fix(pagination): disabled page buttons should not be clickable

src/app/modules/angular-slickgrid/components/slick-pagination.component.html

@@ -2,14 +2,14 @@
   <div class="slick-pagination-nav">
     <nav aria-label="Page navigation">
       <ul class="pagination">
-        <li class="page-item" [ngClass]="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''">
+        <li class="page-item" [ngClass]="isLeftPaginationDisabled ? 'disabled' : ''">
           <a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First"
-            (click)="changeToFirstPage($event)">
+             (click)="changeToFirstPage($event)">
           </a>
         </li>
-        <li class="page-item" [ngClass]="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''">
+        <li class="page-item" [ngClass]="isLeftPaginationDisabled ? 'disabled' : ''">
           <a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous"
-            (click)="changeToPreviousPage($event)">
+             (click)="changeToPreviousPage($event)">
           </a>
         </li>
       </ul>
@@ -18,20 +18,20 @@
     <div class="slick-page-number">
       <span>{{textPage}}</span>
       <input type="text" class="form-control" data-test="page-number-input" [value]="pageNumber" size="1"
-        [readOnly]="totalItems === 0" (change)="changeToCurrentPage($event)">
+             [readOnly]="totalItems === 0" (change)="changeToCurrentPage($event)">
       <span>{{textOf}}</span><span data-test="page-count"> {{pageCount}}</span>
     </div>
 
     <nav aria-label="Page navigation">
       <ul class="pagination">
-        <li class="page-item" [ngClass]="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''">
+        <li class="page-item" [ngClass]="isRightPaginationDisabled ? 'disabled' : ''">
           <a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next"
-            (click)="changeToNextPage($event)">
+             (click)="changeToNextPage($event)">
           </a>
         </li>
-        <li class="page-item" [ngClass]="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''">
+        <li class="page-item" [ngClass]="isRightPaginationDisabled ? 'disabled' : ''">
           <a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last"
-            (click)="changeToLastPage($event)">
+             (click)="changeToLastPage($event)">
           </a>
         </li>
       </ul>

src/app/modules/angular-slickgrid/components/slick-pagination.component.ts

@@ -40,6 +40,16 @@ export class SlickPaginationComponent implements OnDestroy, OnInit {
     return this.paginationService.dataTo;
   }
 
+  /** is the left side pagination disabled? */
+  get isLeftPaginationDisabled(): boolean {
+    return this.pageNumber === 1 || this.totalItems === 0;
+  }
+
+  /** is the right side pagination disabled? */
+  get isRightPaginationDisabled(): boolean {
+    return this.pageNumber === this.pageCount || this.totalItems === 0;
+  }
+
   get itemsPerPage(): number {
     return this.paginationService.itemsPerPage;
   }
@@ -80,20 +90,28 @@ export class SlickPaginationComponent implements OnDestroy, OnInit {
     }
   }
 
-  changeToFirstPage(event: any) {
-    this.paginationService.goToFirstPage(event);
+  changeToFirstPage(event: MouseEvent) {
+    if (!this.isLeftPaginationDisabled) {
+      this.paginationService.goToFirstPage(event);
+    }
   }
 
-  changeToLastPage(event: any) {
-    this.paginationService.goToLastPage(event);
+  changeToLastPage(event: MouseEvent) {
+    if (!this.isRightPaginationDisabled) {
+      this.paginationService.goToLastPage(event);
+    }
   }
 
-  changeToNextPage(event: any) {
-    this.paginationService.goToNextPage(event);
+  changeToNextPage(event: MouseEvent) {
+    if (!this.isRightPaginationDisabled) {
+      this.paginationService.goToNextPage(event);
+    }
   }
 
-  changeToPreviousPage(event: any) {
-    this.paginationService.goToPreviousPage(event);
+  changeToPreviousPage(event: MouseEvent) {
+    if (!this.isLeftPaginationDisabled) {
+      this.paginationService.goToPreviousPage(event);
+    }
   }
 
   changeToCurrentPage(event: any) {