feat(pagination): add disabled state support

Closes #1153
Closes #1155

demo/src/app/components/pagination/demos/disabled/pagination-disabled.html

@@ -0,0 +1,6 @@
+<p>Pagination control can be disabled:</p>
+<ngb-pagination [collectionSize]="70" [(page)]="page" [disabled]='isDisabled'></ngb-pagination>
+<hr>
+<button class="btn btn-sm btn-outline-primary" (click)="toggleDisabled()">
+  Toggle disabled
+</button>

demo/src/app/components/pagination/demos/disabled/pagination-disabled.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-pagination-disabled',
+  templateUrl: './pagination-disabled.html'
+})
+export class NgbdPaginationDisabled {
+  page = 3;
+  isDisabled = true;
+
+  toggleDisabled() {
+    this.isDisabled = !this.isDisabled;
+  }
+}

demo/src/app/components/pagination/demos/index.ts

@@ -2,8 +2,11 @@ import {NgbdPaginationAdvanced} from './advanced/pagination-advanced';
 import {NgbdPaginationBasic} from './basic/pagination-basic';
 import {NgbdPaginationSize} from './size/pagination-size';
 import {NgbdPaginationConfig} from './config/pagination-config';
+import {NgbdPaginationDisabled} from './disabled/pagination-disabled';
 
-export const DEMO_DIRECTIVES = [NgbdPaginationAdvanced, NgbdPaginationBasic, NgbdPaginationSize, NgbdPaginationConfig];
+export const DEMO_DIRECTIVES = [
+  NgbdPaginationAdvanced, NgbdPaginationBasic, NgbdPaginationSize, NgbdPaginationConfig, NgbdPaginationDisabled
+];
 
 export const DEMO_SNIPPETS = {
   advanced: {
@@ -18,6 +21,10 @@ export const DEMO_SNIPPETS = {
     code: require('!!prismjs-loader?lang=typescript!./size/pagination-size'),
     markup: require('!!prismjs-loader?lang=markup!./size/pagination-size.html')
   },
+  disabled: {
+    code: require('!!prismjs-loader?lang=typescript!./disabled/pagination-disabled'),
+    markup: require('!!prismjs-loader?lang=markup!./disabled/pagination-disabled.html')
+  },
   config: {
     code: require('!!prismjs-loader?lang=typescript!./config/pagination-config'),
     markup: require('!!prismjs-loader?lang=markup!./config/pagination-config.html')

demo/src/app/components/pagination/index.ts

@@ -1,7 +1,6 @@
 export * from './pagination.component';
 
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
 
 import {NgbdSharedModule} from '../../shared';
 import {NgbdComponentsSharedModule} from '../shared';

demo/src/app/components/pagination/pagination.component.ts

@@ -16,7 +16,10 @@ import {DEMO_SNIPPETS} from './demos';
       <ngbd-example-box demoTitle="Pagination size" [snippets]="snippets" component="pagination" demo="size">
         <ngbd-pagination-size></ngbd-pagination-size>
       </ngbd-example-box>
-      <ngbd-example-box demoTitle="Global configuration of paginations" [snippets]="snippets" component="pagination" demo="config">
+      <ngbd-example-box demoTitle="Disabled pagination" [snippets]="snippets" component="pagination" demo="disabled">
+        <ngbd-pagination-disabled></ngbd-pagination-disabled>
+      </ngbd-example-box>
+      <ngbd-example-box demoTitle="Global configuration" [snippets]="snippets" component="pagination" demo="config">
         <ngbd-pagination-config></ngbd-pagination-config>
       </ngbd-example-box>
     </ngbd-content-wrapper>

src/pagination/pagination-config.spec.ts

@@ -4,6 +4,7 @@ describe('ngb-pagination-config', () => {
   it('should have sensible default values', () => {
     const config = new NgbPaginationConfig();
 
+    expect(config.disabled).toBe(false);
     expect(config.boundaryLinks).toBe(false);
     expect(config.directionLinks).toBe(true);
     expect(config.ellipses).toBe(true);

src/pagination/pagination-config.ts

@@ -7,6 +7,7 @@ import {Injectable} from '@angular/core';
  */
 @Injectable()
 export class NgbPaginationConfig {
+  disabled = false;
   boundaryLinks = false;
   directionLinks = true;
   ellipses = true;

src/pagination/pagination.spec.ts

@@ -54,6 +54,7 @@ function normalizeText(txt: string): string {
 }
 
 function expectSameValues(pagination: NgbPagination, config: NgbPaginationConfig) {
+  expect(pagination.disabled).toBe(config.disabled);
   expect(pagination.boundaryLinks).toBe(config.boundaryLinks);
   expect(pagination.directionLinks).toBe(config.directionLinks);
   expect(pagination.ellipses).toBe(config.ellipses);
@@ -547,6 +548,17 @@ describe('ngb-pagination', () => {
 
          expect(fixture.componentInstance.onPageChange).not.toHaveBeenCalled();
        }));
+    it('should set classes correctly for disabled state', fakeAsync(() => {
+         const html = `<ngb-pagination [collectionSize]="collectionSize" [pageSize]="pageSize" [maxSize]="maxSize" 
+         [disabled]=true></ngb-pagination>`;
+         const fixture = createTestComponent(html);
+         tick();
+
+         const buttons = fixture.nativeElement.querySelectorAll('li');
+         for (let i = 0; i < buttons.length; i++) {
+           expect(buttons[i]).toHaveCssClass('disabled');
+         }
+       }));
   });
 
   describe('Custom config', () => {
@@ -576,6 +588,7 @@ describe('ngb-pagination', () => {
 
   describe('Custom config as provider', () => {
     let config = new NgbPaginationConfig();
+    config.disabled = true;
     config.boundaryLinks = true;
     config.directionLinks = false;
     config.ellipses = false;

src/pagination/pagination.ts

@@ -11,34 +11,34 @@ import {NgbPaginationConfig} from './pagination-config';
   template: `
     <nav>
       <ul [class]="'pagination' + (size ? ' pagination-' + size : '')">
-        <li *ngIf="boundaryLinks" class="page-item" [class.disabled]="!hasPrevious()">
+        <li *ngIf="boundaryLinks" class="page-item" 
+          [class.disabled]="!hasPrevious() || disabled">
           <a aria-label="First" class="page-link" href (click)="!!selectPage(1)" [attr.tabindex]="hasPrevious() ? null : '-1'">
             <span aria-hidden="true">&laquo;&laquo;</span>
             <span class="sr-only">First</span>
           </a>                
         </li>
       
-        <li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasPrevious()">
+        <li *ngIf="directionLinks" class="page-item" 
+          [class.disabled]="!hasPrevious() || disabled">
           <a aria-label="Previous" class="page-link" href (click)="!!selectPage(page-1)" [attr.tabindex]="hasPrevious() ? null : '-1'">
             <span aria-hidden="true">&laquo;</span>
             <span class="sr-only">Previous</span>
           </a>
         </li>
-
         <li *ngFor="let pageNumber of pages" class="page-item" [class.active]="pageNumber === page" 
-          [class.disabled]="isEllipsis(pageNumber)">
+          [class.disabled]="isEllipsis(pageNumber) || disabled">
           <a *ngIf="isEllipsis(pageNumber)" class="page-link">...</a>
           <a *ngIf="!isEllipsis(pageNumber)" class="page-link" href (click)="!!selectPage(pageNumber)">{{pageNumber}}</a>
         </li>
-
-        <li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasNext()">
+        <li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasNext() || disabled">
           <a aria-label="Next" class="page-link" href (click)="!!selectPage(page+1)" [attr.tabindex]="hasNext() ? null : '-1'">
             <span aria-hidden="true">&raquo;</span>
             <span class="sr-only">Next</span>
           </a>
         </li>
         
-        <li *ngIf="boundaryLinks" class="page-item" [class.disabled]="!hasNext()">
+        <li *ngIf="boundaryLinks" class="page-item" [class.disabled]="!hasNext() || disabled">
           <a aria-label="Last" class="page-link" href (click)="!!selectPage(pageCount)" [attr.tabindex]="hasNext() ? null : '-1'">
             <span aria-hidden="true">&raquo;&raquo;</span>
             <span class="sr-only">Last</span>
@@ -52,6 +52,11 @@ export class NgbPagination implements OnChanges {
   pageCount = 0;
   pages: number[] = [];
 
+  /**
+   * Whether to disable buttons from user input
+   */
+  @Input() disabled: boolean;
+
   /**
    *  Whether to show the "First" and "Last" page links
    */
@@ -105,6 +110,7 @@ export class NgbPagination implements OnChanges {
   @Input() size: 'sm' | 'lg';
 
   constructor(config: NgbPaginationConfig) {
+    this.disabled = config.disabled;
     this.boundaryLinks = config.boundaryLinks;
     this.directionLinks = config.directionLinks;
     this.ellipses = config.ellipses;