abp pagination done & moved to new directory

Author: iyilm4z

angular/src/shared/components/pagination/abp-pagination-controls.component.html

@@ -0,0 +1,59 @@
+<pagination-template
+  #p="paginationApi"
+  [id]="id"
+  [maxSize]="maxSize"
+  (pageChange)="pageChange.emit($event)"
+>
+  <nav>
+    <ul *ngIf="!(autoHide && p.pages.length <= 1)" class="pagination m-0">
+      <li
+        *ngIf="directionLinks"
+        class="page-item"
+        [class.disabled]="p.isFirstPage()"
+      >
+        <a
+          *ngIf="!p.isFirstPage()"
+          class="page-link"
+          href="javascript:;"
+          (click)="p.previous()"
+        >
+          <i class="fas fa-chevron-left"></i>
+        </a>
+        <a *ngIf="p.isFirstPage()" class="page-link" href="javascript:;">
+          <i class="fas fa-chevron-left"></i>
+        </a>
+      </li>
+      <li
+        *ngFor="let page of p.pages"
+        class="page-item"
+        [class.active]="p.getCurrent() === page.value"
+        [style.z-index]="p.getCurrent() === page.value ? '0' : ''"
+      >
+        <a
+          class="page-link"
+          href="javascript:;"
+          (click)="p.setCurrent(page.value)"
+        >
+          {{ page.label }}
+        </a>
+      </li>
+      <li
+        *ngIf="directionLinks"
+        class="page-item"
+        [class.disabled]="p.isLastPage()"
+      >
+        <a
+          *ngIf="!p.isLastPage()"
+          class="page-link"
+          href="javascript:;"
+          (click)="p.next()"
+        >
+          <i class="fas fa-chevron-right"></i>
+        </a>
+        <a *ngIf="p.isLastPage()" class="page-link" href="javascript:;">
+          <i class="fas fa-chevron-right"></i>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</pagination-template>

angular/src/shared/components/pagination/abp-pagination-controls.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'abp-pagination-controls',
+  templateUrl: './abp-pagination-controls.component.html'
+})
+export class AbpPaginationControlsComponent {
+  @Input() id: string;
+  @Input() maxSize = 7;
+  @Input()
+  get directionLinks(): boolean {
+    return this._directionLinks;
+  }
+  set directionLinks(value: boolean) {
+    this._directionLinks = !!value && <any>value !== 'false';
+  }
+  @Input()
+  get autoHide(): boolean {
+    return this._autoHide;
+  }
+  set autoHide(value: boolean) {
+    this._autoHide = !!value && <any>value !== 'false';
+  }
+  @Input() previousLabel = 'Previous';
+  @Input() nextLabel = 'Next';
+  @Input() screenReaderPaginationLabel = 'Pagination';
+  @Input() screenReaderPageLabel = 'page';
+  @Input() screenReaderCurrentLabel = `You're on page`;
+
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  private _directionLinks = true;
+  private _autoHide = false;
+}

angular/src/shared/pagination/abp-pagination-controls.component.html

@@ -8,13 +8,13 @@ import { AppSessionService } from './session/app-session.service';
 import { AppUrlService } from './nav/app-url.service';
 import { AppAuthService } from './auth/app-auth.service';
 import { AppRouteGuard } from './auth/auth-route-guard';
-import { AbpPaginationControlsComponent } from './pagination/abp-pagination-controls.component';
 import { LocalizePipe } from '@shared/pipes/localize.pipe';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule } from '@angular/cdk/tree';
 
+import { AbpPaginationControlsComponent } from './components/pagination/abp-pagination-controls.component';
 import { ApbValidationSummaryComponent } from './components/validation/abp-validation.summary.component';
 import { AbpModalHeaderComponent } from './components/modal/abp-modal-header.component';
 import { AbpModalFooterComponent } from './components/modal/abp-modal-footer.component';