feat(pagination): add config service to provide default values (#665)

refs #518

Closes #665

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

@@ -0,0 +1,2 @@
+<p>This pagination uses custom default values</p>
+<ngb-pagination [collectionSize]="70" [(page)]="page"></ngb-pagination>

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

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-pagination-config',
+  templateUrl: './pagination-config.html',
+  providers: [NgbPaginationConfig] // add NgbPaginationConfig to the component providers
+})
+export class NgbdPaginationConfig {
+  page = 4;
+
+  constructor(config: NgbPaginationConfig) {
+    // customize default values of paginations used by this component tree
+    config.size = 'sm';
+    config.boundaryLinks = true;
+  }
+}

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

@@ -1,17 +1,25 @@
 import {NgbdPaginationAdvanced} from './advanced/pagination-advanced';
 import {NgbdPaginationBasic} from './basic/pagination-basic';
 import {NgbdPaginationSize} from './size/pagination-size';
+import {NgbdPaginationConfig} from './config/pagination-config';
 
-export const DEMO_DIRECTIVES = [NgbdPaginationAdvanced, NgbdPaginationBasic, NgbdPaginationSize];
+export const DEMO_DIRECTIVES = [NgbdPaginationAdvanced, NgbdPaginationBasic, NgbdPaginationSize, NgbdPaginationConfig];
 
 export const DEMO_SNIPPETS = {
   advanced: {
     code: require('!!prismjs?lang=typescript!./advanced/pagination-advanced'),
-    markup: require('!!prismjs?lang=markup!./advanced/pagination-advanced.html')},
+    markup: require('!!prismjs?lang=markup!./advanced/pagination-advanced.html')
+  },
   basic: {
     code: require('!!prismjs?lang=typescript!./basic/pagination-basic'),
-    markup: require('!!prismjs?lang=markup!./basic/pagination-basic.html')},
+    markup: require('!!prismjs?lang=markup!./basic/pagination-basic.html')
+  },
   size: {
     code: require('!!prismjs?lang=typescript!./size/pagination-size'),
-    markup: require('!!prismjs?lang=markup!./size/pagination-size.html')}
+    markup: require('!!prismjs?lang=markup!./size/pagination-size.html')
+  },
+  config: {
+    code: require('!!prismjs?lang=typescript!./config/pagination-config'),
+    markup: require('!!prismjs?lang=markup!./config/pagination-config.html')
+  }
 };

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

@@ -6,6 +6,7 @@ import {DEMO_SNIPPETS} from './demos';
   template: `
     <ngbd-content-wrapper component="Pagination">
       <ngbd-api-docs directive="NgbPagination"></ngbd-api-docs>
+      <ngbd-api-docs-config type="NgbPaginationConfig"></ngbd-api-docs-config>
       <ngbd-example-box demoTitle="Basic pagination" [htmlSnippet]="snippets.basic.markup" [tsSnippet]="snippets.basic.code">
         <ngbd-pagination-basic></ngbd-pagination-basic>
       </ngbd-example-box>
@@ -15,6 +16,11 @@ import {DEMO_SNIPPETS} from './demos';
       <ngbd-example-box demoTitle="Pagination size" [htmlSnippet]="snippets.size.markup" [tsSnippet]="snippets.size.code">
         <ngbd-pagination-size></ngbd-pagination-size>
       </ngbd-example-box>
+      <ngbd-example-box demoTitle="Global configuration of paginations" 
+                        [htmlSnippet]="snippets.config.markup" 
+                        [tsSnippet]="snippets.config.code">
+        <ngbd-pagination-config></ngbd-pagination-config>
+      </ngbd-example-box>
     </ngbd-content-wrapper>
   `
 })

src/index.ts

@@ -20,6 +20,7 @@ export {NgbPanelChangeEvent} from './accordion/accordion.module';
 export {NgbModal, NgbModalOptions, NgbModalRef, ModalDismissReasons} from './modal/modal.module';
 export {NgbTabChangeEvent} from './tabset/tabset.module';
 export {NgbProgressbarConfig} from './progressbar/progressbar.module';
+export {NgbPaginationConfig} from './pagination/pagination.module';
 
 @NgModule({
   exports: [

src/pagination/pagination-config.spec.ts

@@ -0,0 +1,15 @@
+import {NgbPaginationConfig} from './pagination-config';
+
+describe('ngb-pagination-config', () => {
+  it('should have sensible default values', () => {
+    const config = new NgbPaginationConfig();
+
+    expect(config.boundaryLinks).toBe(false);
+    expect(config.directionLinks).toBe(true);
+    expect(config.ellipses).toBe(true);
+    expect(config.maxSize).toBe(0);
+    expect(config.pageSize).toBe(10);
+    expect(config.rotate).toBe(false);
+    expect(config.size).toBeUndefined();
+  });
+});

src/pagination/pagination-config.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * Configuration service for the NgbPagination component.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the paginations used in the application.
+ */
+@Injectable()
+export class NgbPaginationConfig {
+  boundaryLinks = false;
+  directionLinks = true;
+  ellipses = true;
+  maxSize = 0;
+  pageSize = 10;
+  rotate = false;
+  size: 'sm' | 'lg';
+}

src/pagination/pagination.module.ts

@@ -2,7 +2,15 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {NGB_PAGINATION_DIRECTIVES} from './pagination';
+import {NgbPaginationConfig} from './pagination-config';
 
-@NgModule({declarations: NGB_PAGINATION_DIRECTIVES, exports: NGB_PAGINATION_DIRECTIVES, imports: [CommonModule]})
+export {NgbPaginationConfig} from './pagination-config';
+
+@NgModule({
+  declarations: NGB_PAGINATION_DIRECTIVES,
+  exports: NGB_PAGINATION_DIRECTIVES,
+  imports: [CommonModule],
+  providers: [NgbPaginationConfig]
+})
 export class NgbPaginationModule {
 }

src/pagination/pagination.spec.ts

@@ -1,10 +1,11 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
 import {createGenericTestComponent} from '../util/tests';
 
 import {Component} from '@angular/core';
 
 import {NgbPaginationModule} from './pagination.module';
 import {NgbPagination} from './pagination';
+import {NgbPaginationConfig} from './pagination-config';
 
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
@@ -46,12 +47,27 @@ function normalizeText(txt: string): string {
   return txt.trim().replace(/\s+/g, ' ');
 }
 
+function expectSameValues(pagination: NgbPagination, config: NgbPaginationConfig) {
+  expect(pagination.boundaryLinks).toBe(config.boundaryLinks);
+  expect(pagination.directionLinks).toBe(config.directionLinks);
+  expect(pagination.ellipses).toBe(config.ellipses);
+  expect(pagination.maxSize).toBe(config.maxSize);
+  expect(pagination.pageSize).toBe(config.pageSize);
+  expect(pagination.rotate).toBe(config.rotate);
+  expect(pagination.size).toBe(config.size);
+}
+
 describe('ngb-pagination', () => {
   describe('business logic', () => {
 
     let pagination: NgbPagination;
 
-    beforeEach(() => { pagination = new NgbPagination(); });
+    beforeEach(() => { pagination = new NgbPagination(new NgbPaginationConfig()); });
+
+    it('should initialize inputs with default values', () => {
+      const defaultConfig = new NgbPaginationConfig();
+      expectSameValues(pagination, defaultConfig);
+    });
 
     it('should calculate and update no of pages (default page size)', () => {
       pagination.collectionSize = 100;
@@ -403,6 +419,54 @@ describe('ngb-pagination', () => {
     });
   });
 
+  describe('Custom config', () => {
+    let config: NgbPaginationConfig;
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [NgbPaginationModule]}); });
+
+    beforeEach(inject([NgbPaginationConfig], (c: NgbPaginationConfig) => {
+      config = c;
+      config.boundaryLinks = true;
+      config.directionLinks = false;
+      config.ellipses = false;
+      config.maxSize = 42;
+      config.pageSize = 7;
+      config.rotate = true;
+      config.size = 'sm';
+    }));
+
+    it('should initialize inputs with provided config', () => {
+      const fixture = TestBed.createComponent(NgbPagination);
+      fixture.detectChanges();
+
+      let pagination = fixture.componentInstance;
+      expectSameValues(pagination, config);
+    });
+  });
+
+  describe('Custom config as provider', () => {
+    let config = new NgbPaginationConfig();
+    config.boundaryLinks = true;
+    config.directionLinks = false;
+    config.ellipses = false;
+    config.maxSize = 42;
+    config.pageSize = 7;
+    config.rotate = true;
+    config.size = 'sm';
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [NgbPaginationModule], providers: [{provide: NgbPaginationConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = TestBed.createComponent(NgbPagination);
+      fixture.detectChanges();
+
+      let pagination = fixture.componentInstance;
+      expectSameValues(pagination, config);
+    });
+  });
 });
 
 @Component({selector: 'test-cmp', template: ''})

src/pagination/pagination.ts

@@ -1,5 +1,6 @@
 import {Component, EventEmitter, Input, Output, OnChanges, ChangeDetectionStrategy} from '@angular/core';
 import {getValueInRange} from '../util/util';
+import {NgbPaginationConfig} from './pagination-config';
 
 /**
  * A directive that will take care of visualising a pagination bar and enable / disable buttons correctly!
@@ -54,23 +55,23 @@ export class NgbPagination implements OnChanges {
   /**
    *  Whether to show the "First" and "Last" page links
    */
-  @Input() boundaryLinks = false;
+  @Input() boundaryLinks: boolean;
 
   /**
    *  Whether to show the "Next" and "Previous" page links
    */
-  @Input() directionLinks = true;
+  @Input() directionLinks: boolean;
 
   /**
    *  Whether to show ellipsis symbols and first/last page numbers when maxSize > number of pages
    */
-  @Input() ellipses = true;
+  @Input() ellipses: boolean;
 
   /**
    *  Whether to rotate pages when maxSize > number of pages.
    *  Current page will be in the middle
    */
-  @Input() rotate = false;
+  @Input() rotate: boolean;
 
   /**
    *  Number of items in collection.
@@ -80,7 +81,7 @@ export class NgbPagination implements OnChanges {
   /**
    *  Maximum number of pages to display.
    */
-  @Input() maxSize = 0;
+  @Input() maxSize: number;
 
   /**
    *  Current page.
@@ -90,7 +91,7 @@ export class NgbPagination implements OnChanges {
   /**
    *  Number of items per page.
    */
-  @Input() pageSize = 10;
+  @Input() pageSize: number;
 
   /**
    *  An event fired when the page is changed.
@@ -103,6 +104,16 @@ export class NgbPagination implements OnChanges {
    */
   @Input() size: 'sm' | 'lg';
 
+  constructor(config: NgbPaginationConfig) {
+    this.boundaryLinks = config.boundaryLinks;
+    this.directionLinks = config.directionLinks;
+    this.ellipses = config.ellipses;
+    this.maxSize = config.maxSize;
+    this.pageSize = config.pageSize;
+    this.rotate = config.rotate;
+    this.size = config.size;
+  }
+
   get pageCount(): number { return this._pageCount; }
 
   hasPrevious(): boolean { return this.page > 1; }