ng2-pagination - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+# 2.0.0 (2016-01-12)
+
+#### Breaking Changes
+* The module is being built with **Angular 2.4.3**. Therefore the metadata output is not compatible with Angular < 2.3.0. Attempting to use this version
+in an app running Angular < 2.3.0 will result in a "ctorParameters.map is not a function" error. See [this StackOverflow answer for further information](http://stackoverflow.com/a/41444599/772859).
+* `PaginationControlsComponent` no longer uses view encapsulation, making it very easy to style without the need for the `/deep/` operator.
+
+#### Features
+* Add inputs to `PaginationControlsComponent` to allow custom labels for "Previous", "Next" and screen reader labels.
+
 ## 1.0.1 (2016-11-16)
@@ -12,3 +22,3 @@ * Fix missing export of PaginationControlsDirective
 * Naming of files and classes has been brought into line with the official [style guide recommendations](https://angular.io/docs/ts/latest/guide/style-guide.html#!#naming)
-This should not have a big impact if you are just consuming the NgModule, but the main change is that `PaginationControlsCmp` is now `PaginationControlsComponent`.
+This should not have a big impact if you are just consuming the NgModule, but the main change is that `PaginationControlsCmp` is now `PaginationControlsComponent`, and the `IPaginationInstance` is now just `PaginationInstance`.
 
@@ -15,0 +25,0 @@ ## 0.5.2 (2016-10-13)

dist/ng2-pagination-bundle.js

@@ -277,4 +277,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         execute: function() {
-            exports_4("DEFAULT_TEMPLATE", DEFAULT_TEMPLATE = "\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        aria-label=\"Pagination\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">You're on page</span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ");
-            exports_4("DEFAULT_STYLES", DEFAULT_STYLES = "\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    font-size: 0.875rem;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '\u2026';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '\u00AB';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '\u00BB';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }");
+            exports_4("DEFAULT_TEMPLATE", DEFAULT_TEMPLATE = "\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        [attr.aria-label]=\"screenReaderPaginationLabel\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ");
+            exports_4("DEFAULT_STYLES", DEFAULT_STYLES = "\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '\u2026';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '\u00AB';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '\u00BB';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }");
         }
@@ -303,2 +303,7 @@ }
                     this.maxSize = 7;
+                    this.previousLabel = 'Previous';
+                    this.nextLabel = 'Next';
+                    this.screenReaderPaginationLabel = 'Pagination';
+                    this.screenReaderPageLabel = 'page';
+                    this.screenReaderCurrentLabel = "You're on page";
                     this.pageChange = new core_3.EventEmitter();
@@ -345,2 +350,22 @@ this._directionLinks = true;
                 __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', String)
+                ], PaginationControlsComponent.prototype, "previousLabel", void 0);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', String)
+                ], PaginationControlsComponent.prototype, "nextLabel", void 0);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', String)
+                ], PaginationControlsComponent.prototype, "screenReaderPaginationLabel", void 0);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', String)
+                ], PaginationControlsComponent.prototype, "screenReaderPageLabel", void 0);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', String)
+                ], PaginationControlsComponent.prototype, "screenReaderCurrentLabel", void 0);
+                __decorate([
                     core_3.Output(), 
@@ -354,3 +379,4 @@ __metadata('design:type', core_3.EventEmitter)
                         styles: [template_1.DEFAULT_STYLES],
-                        changeDetection: core_3.ChangeDetectionStrategy.OnPush
+                        changeDetection: core_3.ChangeDetectionStrategy.OnPush,
+                        encapsulation: core_3.ViewEncapsulation.None
                     }), 
@@ -357,0 +383,0 @@ __metadata('design:paramtypes', [])

dist/ng2-pagination.js

@@ -32,5 +32,5 @@ "use strict";
     /** @nocollapse */
-    Ng2PaginationModule.ctorParameters = [];
+    Ng2PaginationModule.ctorParameters = function () { return []; };
     return Ng2PaginationModule;
 }());
 exports.Ng2PaginationModule = Ng2PaginationModule;

dist/ng2-pagination.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"Ng2PaginationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./paginate.pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls.component","name":"PaginationControlsComponent"},{"__symbolic":"reference","module":"./pagination-controls.directive","name":"PaginationControlsDirective"}],"providers":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"}],"exports":[{"__symbolic":"reference","module":"./paginate.pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls.component","name":"PaginationControlsComponent"},{"__symbolic":"reference","module":"./pagination-controls.directive","name":"PaginationControlsDirective"}]}]}]}},"exports":[{"from":"./pagination-instance","export":["PaginationInstance"]},{"from":"./pagination.service","export":["PaginationService"]},{"from":"./pagination-controls.component","export":["PaginationControlsComponent"]},{"from":"./pagination-controls.directive","export":["PaginationControlsDirective"]},{"from":"./paginate.pipe","export":["PaginatePipe"]}]}
+[{"__symbolic":"module","version":3,"metadata":{"Ng2PaginationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./paginate.pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls.component","name":"PaginationControlsComponent"},{"__symbolic":"reference","module":"./pagination-controls.directive","name":"PaginationControlsDirective"}],"providers":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"}],"exports":[{"__symbolic":"reference","module":"./paginate.pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls.component","name":"PaginationControlsComponent"},{"__symbolic":"reference","module":"./pagination-controls.directive","name":"PaginationControlsDirective"}]}]}]}},"exports":[{"from":"./pagination-instance","export":["PaginationInstance"]},{"from":"./pagination.service","export":["PaginationService"]},{"from":"./pagination-controls.component","export":["PaginationControlsComponent"]},{"from":"./pagination-controls.directive","export":["PaginationControlsDirective"]},{"from":"./paginate.pipe","export":["PaginatePipe"]}]},{"__symbolic":"module","version":1,"metadata":{"Ng2PaginationModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./paginate.pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls.component","name":"PaginationControlsComponent"},{"__symbolic":"reference","module":"./pagination-controls.directive","name":"PaginationControlsDirective"}],"providers":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"}],"exports":[{"__symbolic":"reference","module":"./paginate.pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls.component","name":"PaginationControlsComponent"},{"__symbolic":"reference","module":"./pagination-controls.directive","name":"PaginationControlsDirective"}]}]}]}},"exports":[{"from":"./pagination-instance","export":["PaginationInstance"]},{"from":"./pagination.service","export":["PaginationService"]},{"from":"./pagination-controls.component","export":["PaginationControlsComponent"]},{"from":"./pagination-controls.directive","export":["PaginationControlsDirective"]},{"from":"./paginate.pipe","export":["PaginatePipe"]}]}]

dist/paginate.pipe.js

@@ -116,7 +116,7 @@ "use strict";
     /** @nocollapse */
-    PaginatePipe.ctorParameters = [
+    PaginatePipe.ctorParameters = function () { return [
         { type: pagination_service_1.PaginationService, },
-    ];
+    ]; };
     return PaginatePipe;
 }());
 exports.PaginatePipe = PaginatePipe;

dist/paginate.pipe.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"PaginatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"paginate","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"}]}],"transform":[{"__symbolic":"method"}],"createInstance":[{"__symbolic":"method"}],"checkConfig":[{"__symbolic":"method"}],"saveState":[{"__symbolic":"method"}],"stateIsIdentical":[{"__symbolic":"method"}]}}}}
+[{"__symbolic":"module","version":3,"metadata":{"PaginatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"paginate","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"}]}],"transform":[{"__symbolic":"method"}],"createInstance":[{"__symbolic":"method"}],"checkConfig":[{"__symbolic":"method"}],"saveState":[{"__symbolic":"method"}],"stateIsIdentical":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PaginatePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"paginate","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"}]}],"transform":[{"__symbolic":"method"}],"createInstance":[{"__symbolic":"method"}],"checkConfig":[{"__symbolic":"method"}],"saveState":[{"__symbolic":"method"}],"stateIsIdentical":[{"__symbolic":"method"}]}}}}]

dist/pagination-controls.component.d.ts

@@ -10,2 +10,7 @@ import { EventEmitter } from '@angular/core';
     autoHide: boolean;
+    previousLabel: string;
+    nextLabel: string;
+    screenReaderPaginationLabel: string;
+    screenReaderPageLabel: string;
+    screenReaderCurrentLabel: string;
     pageChange: EventEmitter<number>;
@@ -12,0 +17,0 @@ private _directionLinks;

dist/pagination-controls.component.js

@@ -10,2 +10,7 @@ "use strict";
         this.maxSize = 7;
+        this.previousLabel = 'Previous';
+        this.nextLabel = 'Next';
+        this.screenReaderPaginationLabel = 'Pagination';
+        this.screenReaderPageLabel = 'page';
+        this.screenReaderCurrentLabel = "You're on page";
         this.pageChange = new core_1.EventEmitter();
@@ -40,7 +45,8 @@ this._directionLinks = true;
                     styles: [template_1.DEFAULT_STYLES],
-                    changeDetection: core_1.ChangeDetectionStrategy.OnPush
+                    changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+                    encapsulation: core_1.ViewEncapsulation.None
                 },] },
     ];
     /** @nocollapse */
-    PaginationControlsComponent.ctorParameters = [];
+    PaginationControlsComponent.ctorParameters = function () { return []; };
     PaginationControlsComponent.propDecorators = {
@@ -51,2 +57,7 @@ 'id': [{ type: core_1.Input },],
         'autoHide': [{ type: core_1.Input },],
+        'previousLabel': [{ type: core_1.Input },],
+        'nextLabel': [{ type: core_1.Input },],
+        'screenReaderPaginationLabel': [{ type: core_1.Input },],
+        'screenReaderPageLabel': [{ type: core_1.Input },],
+        'screenReaderCurrentLabel': [{ type: core_1.Input },],
         'pageChange': [{ type: core_1.Output },],
@@ -53,0 +64,0 @@ };

dist/pagination-controls.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"PaginationControlsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pagination-controls","template":{"__symbolic":"reference","module":"./template","name":"DEFAULT_TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./template","name":"DEFAULT_STYLES"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"directionLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}}
+[{"__symbolic":"module","version":3,"metadata":{"PaginationControlsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pagination-controls","template":{"__symbolic":"reference","module":"./template","name":"DEFAULT_TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./template","name":"DEFAULT_STYLES"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"directionLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"previousLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nextLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"screenReaderPaginationLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"screenReaderPageLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"screenReaderCurrentLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"PaginationControlsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pagination-controls","template":{"__symbolic":"reference","module":"./template","name":"DEFAULT_TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./template","name":"DEFAULT_STYLES"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"directionLinks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoHide":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"previousLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"nextLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"screenReaderPaginationLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"screenReaderPageLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"screenReaderCurrentLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}]}}}}]

dist/pagination-controls.directive.js

@@ -186,6 +186,6 @@ "use strict";
     /** @nocollapse */
-    PaginationControlsDirective.ctorParameters = [
+    PaginationControlsDirective.ctorParameters = function () { return [
         { type: pagination_service_1.PaginationService, },
         { type: core_1.ChangeDetectorRef, },
-    ];
+    ]; };
     PaginationControlsDirective.propDecorators = {
@@ -192,0 +192,0 @@ 'id': [{ type: core_1.Input },],

dist/pagination-controls.directive.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"PaginationControlsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"pagination-template,[pagination-template]","exportAs":"paginationApi"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"isFirstPage":[{"__symbolic":"method"}],"isLastPage":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}],"getCurrent":[{"__symbolic":"method"}],"getLastPage":[{"__symbolic":"method"}],"updatePageLinks":[{"__symbolic":"method"}],"outOfBoundCorrection":[{"__symbolic":"method"}],"createPageArray":[{"__symbolic":"method"}],"calculatePageNumber":[{"__symbolic":"method"}]}}}}
+[{"__symbolic":"module","version":3,"metadata":{"PaginationControlsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"pagination-template,[pagination-template]","exportAs":"paginationApi"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"isFirstPage":[{"__symbolic":"method"}],"isLastPage":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}],"getCurrent":[{"__symbolic":"method"}],"getLastPage":[{"__symbolic":"method"}],"updatePageLinks":[{"__symbolic":"method"}],"outOfBoundCorrection":[{"__symbolic":"method"}],"createPageArray":[{"__symbolic":"method"}],"calculatePageNumber":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PaginationControlsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"pagination-template,[pagination-template]","exportAs":"paginationApi"}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./pagination.service","name":"PaginationService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"previous":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"isFirstPage":[{"__symbolic":"method"}],"isLastPage":[{"__symbolic":"method"}],"setCurrent":[{"__symbolic":"method"}],"getCurrent":[{"__symbolic":"method"}],"getLastPage":[{"__symbolic":"method"}],"updatePageLinks":[{"__symbolic":"method"}],"outOfBoundCorrection":[{"__symbolic":"method"}],"createPageArray":[{"__symbolic":"method"}],"calculatePageNumber":[{"__symbolic":"method"}]}}}}]

dist/template.js

@@ -6,3 +6,3 @@ /**
 "use strict";
-exports.DEFAULT_TEMPLATE = "\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        aria-label=\"Pagination\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">You're on page</span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ";
-exports.DEFAULT_STYLES = "\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    font-size: 0.875rem;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '\u2026';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '\u00AB';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '\u00BB';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }";
+exports.DEFAULT_TEMPLATE = "\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        [attr.aria-label]=\"screenReaderPaginationLabel\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ";
+exports.DEFAULT_STYLES = "\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '\u2026';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '\u00AB';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '\u00BB';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }";

dist/template.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"DEFAULT_TEMPLATE":"\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        aria-label=\"Pagination\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">You're on page</span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ","DEFAULT_STYLES":"\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    font-size: 0.875rem;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '…';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '«';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '»';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }"}}
+[{"__symbolic":"module","version":3,"metadata":{"DEFAULT_TEMPLATE":"\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        [attr.aria-label]=\"screenReaderPaginationLabel\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ","DEFAULT_STYLES":"\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '…';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '«';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '»';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }"}},{"__symbolic":"module","version":1,"metadata":{"DEFAULT_TEMPLATE":"\n    <pagination-template  #p=\"paginationApi\"\n                         [id]=\"id\"\n                         [maxSize]=\"maxSize\"\n                         (pageChange)=\"pageChange.emit($event)\">\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        [attr.aria-label]=\"screenReaderPaginationLabel\" \n        *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < p.getCurrent()\" (click)=\"p.previous()\" [attr.aria-label]=\"previousLabel + ' ' + screenReaderPageLabel\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isFirstPage()\">\n                {{ previousLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n        <li [class.current]=\"p.getCurrent() === page.value\" *ngFor=\"let page of p.pages\">\n            <a (click)=\"p.setCurrent(page.value)\" *ngIf=\"p.getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderPageLabel }} </span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"p.getCurrent() === page.value\">\n                <span class=\"show-for-sr\">{{ screenReaderCurrentLabel }} </span>\n                <span>{{ page.label }}</span> \n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!p.isLastPage()\" (click)=\"p.next()\" [attr.aria-label]=\"nextLabel + ' ' + screenReaderPageLabel\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </a>\n            <span *ngIf=\"p.isLastPage()\">\n                 {{ nextLabel }} <span class=\"show-for-sr\">{{ screenReaderPageLabel }}</span>\n            </span>\n        </li>\n\n    </ul>\n    </pagination-template>\n    ","DEFAULT_STYLES":"\n.ng2-pagination {\n  margin-left: 0;\n  margin-bottom: 1rem; }\n  .ng2-pagination::before, .ng2-pagination::after {\n    content: ' ';\n    display: table; }\n  .ng2-pagination::after {\n    clear: both; }\n  .ng2-pagination li {\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    margin-right: 0.0625rem;\n    border-radius: 0; }\n  .ng2-pagination li {\n    display: inline-block; }\n  .ng2-pagination a,\n  .ng2-pagination button {\n    color: #0a0a0a; \n    display: block;\n    padding: 0.1875rem 0.625rem;\n    border-radius: 0; }\n    .ng2-pagination a:hover,\n    .ng2-pagination button:hover {\n      background: #e6e6e6; }\n  .ng2-pagination .current {\n    padding: 0.1875rem 0.625rem;\n    background: #2199e8;\n    color: #fefefe;\n    cursor: default; }\n  .ng2-pagination .disabled {\n    padding: 0.1875rem 0.625rem;\n    color: #cacaca;\n    cursor: default; } \n    .ng2-pagination .disabled:hover {\n      background: transparent; }\n  .ng2-pagination .ellipsis::after {\n    content: '…';\n    padding: 0.1875rem 0.625rem;\n    color: #0a0a0a; }\n\n.ng2-pagination .pagination-previous a::before,\n.ng2-pagination .pagination-previous.disabled::before { \n  content: '«';\n  display: inline-block;\n  margin-right: 0.5rem; }\n\n.ng2-pagination .pagination-next a::after,\n.ng2-pagination .pagination-next.disabled::after {\n  content: '»';\n  display: inline-block;\n  margin-left: 0.5rem; }\n\n.ng2-pagination .show-for-sr {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0); }"}}]

package.json

 {
   "name": "ng2-pagination",
-  "version": "1.0.1",
-  "description": "Pagination for Angular 2",
+  "version": "2.0.0",
+  "description": "Pagination for Angular",
   "main": "index.js",
@@ -12,5 +12,5 @@ "scripts": {
     "test:watch": "npm run test -- --auto-watch --no-single-run",
-    "demo:watch": "webpack --config config/webpack.config.js --progress --colors --watch",
-    "demo:dist": "webpack --config config/webpack.config.js --progress --colors -p --env.prod",
-    "publish-lib": "npm run test && npm run build && npm run demo:dist"
+    "docs:watch": "webpack --config config/webpack.config.js --progress --colors --watch",
+    "docs:dist": "webpack --config config/webpack.config.js --progress --colors -p --env.prod",
+    "publish-lib": "npm run test && npm run build && npm run docs:dist"
   },
@@ -23,2 +23,3 @@ "files": [
   "keywords": [
+    "angular",
     "angular2",
@@ -37,11 +38,11 @@ "pagination"
   "devDependencies": {
-    "@angular/common": "^2.0.2",
-    "@angular/compiler": "^2.0.2",
-    "@angular/compiler-cli": "^0.6.4",
-    "@angular/core": "^2.0.2",
-    "@angular/forms": "^2.0.2",
-    "@angular/platform-browser": "^2.0.2",
-    "@angular/platform-browser-dynamic": "^2.0.2",
-    "@angular/platform-server": "^2.0.2",
-    "@angular/router": "3.1.2",
+    "@angular/common": "^2.4.3",
+    "@angular/compiler": "^2.4.3",
+    "@angular/compiler-cli": "^2.4.3",
+    "@angular/core": "^2.4.3",
+    "@angular/forms": "^2.4.3",
+    "@angular/platform-browser": "^2.4.3",
+    "@angular/platform-browser-dynamic": "^2.4.3",
+    "@angular/platform-server": "^2.4.3",
+    "@angular/router": "3.4.3",
     "@ngtools/webpack": "1.1.4",
@@ -72,3 +73,3 @@ "@types/es6-shim": "^0.31.32",
     "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "^5.0.3",
     "sass-loader": "^3.1.2",
@@ -79,5 +80,5 @@ "style-loader": "^0.13.1",
     "webpack": "2.1.0-beta.25",
-    "zone.js": "0.6.25"
+    "zone.js": "0.7.4"
   },
   "dependencies": {}
 }

README.md

@@ -1,5 +0,5 @@
-# Angular2 Pagination [![Build Status](https://travis-ci.org/michaelbromley/ng2-pagination.svg?branch=master)](https://travis-ci.org/michaelbromley/ng2-pagination)
+# Pagination for Angular 2+[![Build Status](https://travis-ci.org/michaelbromley/ng2-pagination.svg?branch=master)](https://travis-ci.org/michaelbromley/ng2-pagination)
 
 This is a port of my [angular-utils-pagination](https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination)
-module from Angular 1.x to Angular 2. Due to fundamental differences in the design of Angular2, the API is different but
+module from Angular 1.x to Angular 2. Due to fundamental differences in the design of Angular from version 2 onwards, the API is different but
 the idea is the same - the most simple possible way to add full-featured pagination to an Angular app.
@@ -19,6 +19,6 @@
 
-### Angular 2 Version
+### Angular Version
 
-This library is built to work with **Angular 2.0.0+**, and support ahead-of-time compilation.
-If you need to support a previous version of Angular 2 for now, please see the changelog for advice on which version to use.
+This library is built to work with **Angular 2.3.0+**, and support ahead-of-time compilation.
+If you need to support an earlier or pre-release version of Angular for now, please see the changelog for advice on which version to use.
 
@@ -105,3 +105,8 @@ ### CommonJS
                       directionLinks="true"
-                      autoHide="true">
+                      autoHide="true"
+                      previousLabel="Previous"
+                      nextLabel="Next"
+                      screenReaderPaginationLabel="Pagination"
+                      screenReaderPageLabel="page"
+                      screenReaderCurrentLabel="You're on page">
 </pagination-controls>
@@ -119,2 +124,7 @@ ```
 collection fit onto the first page. Default is `false`.
+* **`previousLabel`** [`string`] The label displayed on the "previous" link.
+* **`nextLabel`** [`string`] The label displayed on the "next" link.
+* **`screenReaderPaginationLabel`** [`string`] The word for "Pagination" used to label the controls for screen readers.
+* **`screenReaderPageLabel`** [`string`] The word for "page" used in certain strings generated for screen readers, e.g. "Next page".
+* **`screenReaderCurrentLabel`** [`string`] The phrase indicating the current page for screen readers, e.g. "You're on page <x>".
 
@@ -175,2 +185,20 @@ ### PaginationControlsDirective
 
+## Styling
+
+The `PaginationControlsComponent` can be styled by simply overriding the default styles. The component does not use view encapsulation, which means you do not need to use operators such as `/deep/` to target it.
+
+To avoid specificity issues, just add your own custom class name to the element, which will allow your styles to override the defaults:
+
+```HTML
+// head
+<style>
+  .my-pagination .ng2-pagination .current {
+    background: red;
+  }
+</style>
+
+// body
+<pagination-controls class="my-pagination"><pagination-controls>
+```
+
 ## Server-Side Paging
@@ -216,3 +244,3 @@
 npm run test // Karma unit tests
-npm run demo:watch // Build the demo app and watch
+npm run docs:watch // Build the demo/docs app and watch
 ```
@@ -219,0 +247,0 @@

No alert changes

Improved metrics

Total package byte prevSize

108131

increased by18.74%

Number of package files

27

increased by3.85%

Lines of code

1406

increased by3.23%

Number of lines in readme file

246

increased by12.84%

No dependency changes