ng2-pagination - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0

CHANGELOG.md

@@ -0,1 +1,14 @@
+# 1.0.0 (in progress)
+* Fix errors when using TypeScript < 2.0 ([#81](https://github.com/michaelbromley/ng2-pagination/issues/81))
+* Fix change detection errors when controls are declared before the pipe in the DOM ([#91](https://github.com/michaelbromley/ng2-pagination/issues/91)).
+* Create the PaginationControlsDirective, which is the basis for all controls components, including the default component and any custom components.
+
+#### Breaking Changes
+* Custom templates are now implemented with the new PaginationControlsDirective, rather than by putting elements inside the PaginationControlsComponent.
+* 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`.
+
+## 0.5.2 (2016-10-13)
+* Fix flash of default template when creating component with custom template ([#82](https://github.com/michaelbromley/ng2-pagination/issues/82))
+
 ## 0.5.1 (2016-10-07)
@@ -2,0 +15,0 @@ * Fix type def issue which was breaking AoT builds ([#80](https://github.com/michaelbromley/ng2-pagination/pull/80))

dist/ng2-pagination-bundle.js

@@ -10,5 +10,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-System.register("pagination-service", ['@angular/core'], function(exports_1, context_1) {
+System.register("pagination-instance", [], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
+    return {
+        setters:[],
+        execute: function() {
+        }
+    }
+});
+System.register("pagination.service", ['@angular/core'], function(exports_2, context_2) {
+    "use strict";
+    var __moduleName = context_2 && context_2.id;
     var core_1;
@@ -28,7 +37,3 @@ var PaginationService;
                 }
-                Object.defineProperty(PaginationService.prototype, "defaultId", {
-                    get: function () { return this.DEFAULT_ID; },
-                    enumerable: true,
-                    configurable: true
-                });
+                PaginationService.prototype.defaultId = function () { return this.DEFAULT_ID; };
                 PaginationService.prototype.register = function (instance) {
@@ -127,9 +132,9 @@ if (!instance.id) {
             }());
-            exports_1("PaginationService", PaginationService);
+            exports_2("PaginationService", PaginationService);
         }
     }
 });
-System.register("paginate-pipe", ["@angular/core", "pagination-service"], function(exports_2, context_2) {
+System.register("paginate.pipe", ["@angular/core", "pagination.service"], function(exports_3, context_3) {
     "use strict";
-    var __moduleName = context_2 && context_2.id;
+    var __moduleName = context_3 && context_3.id;
     var core_2, pagination_service_1;
@@ -198,3 +203,3 @@ var LARGE_NUMBER, PaginatePipe;
                 /**
-                 * Create an IPaginationInstance object, using defaults for any optional properties not supplied.
+                 * Create an PaginationInstance object, using defaults for any optional properties not supplied.
                  */
@@ -205,3 +210,3 @@ PaginatePipe.prototype.createInstance = function (collection, args) {
                     return {
-                        id: config.id || this.service.defaultId,
+                        id: config.id || this.service.defaultId(),
                         itemsPerPage: config.itemsPerPage || 0,
@@ -262,3 +267,3 @@ currentPage: config.currentPage || 1,
             }());
-            exports_2("PaginatePipe", PaginatePipe);
+            exports_3("PaginatePipe", PaginatePipe);
         }
@@ -271,5 +276,5 @@ }
  */
-System.register("template", [], function(exports_3, context_3) {
+System.register("template", [], function(exports_4, context_4) {
     "use strict";
-    var __moduleName = context_3 && context_3.id;
+    var __moduleName = context_4 && context_4.id;
     var DEFAULT_TEMPLATE, DEFAULT_STYLES;
@@ -279,12 +284,12 @@ return {
         execute: function() {
-            exports_3("DEFAULT_TEMPLATE", DEFAULT_TEMPLATE = "\n    <div #template>\n        <ng-content></ng-content>\n    </div>\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        aria-label=\"Pagination\" \n        *ngIf=\"!hasTemplate && !(autoHide && pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < getCurrent()\" (click)=\"previous()\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"getCurrent() === page.value\" *ngFor=\"let page of pages\">\n            <a (click)=\"setCurrent(page.value)\" *ngIf=\"getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"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]=\"isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!isLastPage()\" (click)=\"next()\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    ");
-            exports_3("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        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); }");
         }
     }
 });
-System.register("pagination-controls-cmp", ['@angular/core', "pagination-service", "template"], function(exports_4, context_4) {
+System.register("pagination-controls.component", ['@angular/core', "template"], function(exports_5, context_5) {
     "use strict";
-    var __moduleName = context_4 && context_4.id;
-    var core_3, pagination_service_2, template_1;
-    var PaginationControlsCmp;
+    var __moduleName = context_5 && context_5.id;
+    var core_3, template_1;
+    var PaginationControlsComponent;
     return {
@@ -295,5 +300,2 @@ setters:[
             },
-            function (pagination_service_2_1) {
-                pagination_service_2 = pagination_service_2_1;
-            },
             function (template_1_1) {
@@ -303,22 +305,13 @@ template_1 = template_1_1;
         execute: function() {
-            PaginationControlsCmp = (function () {
-                function PaginationControlsCmp(service, changeDetectorRef) {
-                    var _this = this;
-                    this.service = service;
-                    this.changeDetectorRef = changeDetectorRef;
+            /**
+             * The default pagination controls component. Actually just a default implementation of a custom template.
+             */
+            PaginationControlsComponent = (function () {
+                function PaginationControlsComponent() {
                     this.maxSize = 7;
                     this.pageChange = new core_3.EventEmitter();
-                    this.pages = [];
-                    this.hasTemplate = false;
                     this._directionLinks = true;
                     this._autoHide = false;
-                    this.changeSub = this.service.change
-                        .subscribe(function (id) {
-                        if (_this.id === id) {
-                            _this.updatePageLinks();
-                            _this.changeDetectorRef.markForCheck();
-                        }
-                    });
                 }
-                Object.defineProperty(PaginationControlsCmp.prototype, "directionLinks", {
+                Object.defineProperty(PaginationControlsComponent.prototype, "directionLinks", {
                     get: function () {
@@ -333,3 +326,3 @@ return this._directionLinks;
                 });
-                Object.defineProperty(PaginationControlsCmp.prototype, "autoHide", {
+                Object.defineProperty(PaginationControlsComponent.prototype, "autoHide", {
                     get: function () {
@@ -344,19 +337,83 @@ return this._autoHide;
                 });
-                PaginationControlsCmp.prototype.ngOnInit = function () {
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', String)
+                ], PaginationControlsComponent.prototype, "id", void 0);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', Number)
+                ], PaginationControlsComponent.prototype, "maxSize", void 0);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', Boolean)
+                ], PaginationControlsComponent.prototype, "directionLinks", null);
+                __decorate([
+                    core_3.Input(), 
+                    __metadata('design:type', Boolean)
+                ], PaginationControlsComponent.prototype, "autoHide", null);
+                __decorate([
+                    core_3.Output(), 
+                    __metadata('design:type', core_3.EventEmitter)
+                ], PaginationControlsComponent.prototype, "pageChange", void 0);
+                PaginationControlsComponent = __decorate([
+                    core_3.Component({
+                        selector: 'pagination-controls',
+                        template: template_1.DEFAULT_TEMPLATE,
+                        styles: [template_1.DEFAULT_STYLES],
+                        changeDetection: core_3.ChangeDetectionStrategy.OnPush
+                    }), 
+                    __metadata('design:paramtypes', [])
+                ], PaginationControlsComponent);
+                return PaginationControlsComponent;
+            }());
+            exports_5("PaginationControlsComponent", PaginationControlsComponent);
+        }
+    }
+});
+System.register("pagination-controls.directive", ['@angular/core', "pagination.service"], function(exports_6, context_6) {
+    "use strict";
+    var __moduleName = context_6 && context_6.id;
+    var core_4, pagination_service_2;
+    var PaginationControlsDirective;
+    return {
+        setters:[
+            function (core_4_1) {
+                core_4 = core_4_1;
+            },
+            function (pagination_service_2_1) {
+                pagination_service_2 = pagination_service_2_1;
+            }],
+        execute: function() {
+            /**
+             * This directive is what powers all pagination controls components, including the default one.
+             * It exposes an API which is hooked up to the PaginationService to keep the PaginatePipe in sync
+             * with the pagination controls.
+             */
+            PaginationControlsDirective = (function () {
+                function PaginationControlsDirective(service, changeDetectorRef) {
+                    var _this = this;
+                    this.service = service;
+                    this.changeDetectorRef = changeDetectorRef;
+                    this.maxSize = 7;
+                    this.pageChange = new core_4.EventEmitter();
+                    this.pages = [];
+                    this.changeSub = this.service.change
+                        .subscribe(function (id) {
+                        if (_this.id === id) {
+                            _this.updatePageLinks();
+                            _this.changeDetectorRef.markForCheck();
+                            _this.changeDetectorRef.detectChanges();
+                        }
+                    });
+                }
+                PaginationControlsDirective.prototype.ngOnInit = function () {
                     if (this.id === undefined) {
-                        this.id = this.service.defaultId;
+                        this.id = this.service.defaultId();
                     }
                     this.updatePageLinks();
                 };
-                PaginationControlsCmp.prototype.ngOnChanges = function (changes) {
+                PaginationControlsDirective.prototype.ngOnChanges = function (changes) {
                     this.updatePageLinks();
                 };
-                PaginationControlsCmp.prototype.ngAfterViewInit = function () {
-                    var _this = this;
-                    if (this.template && 0 < this.template.nativeElement.children.length) {
-                        this.hasTemplate = true;
-                        setTimeout(function () { return _this.changeDetectorRef.markForCheck(); });
-                    }
-                };
-                PaginationControlsCmp.prototype.ngOnDestroy = function () {
+                PaginationControlsDirective.prototype.ngOnDestroy = function () {
                     this.changeSub.unsubscribe();
@@ -367,3 +424,3 @@ };
                  */
-                PaginationControlsCmp.prototype.previous = function () {
+                PaginationControlsDirective.prototype.previous = function () {
                     this.setCurrent(this.getCurrent() - 1);
@@ -374,3 +431,3 @@ };
                  */
-                PaginationControlsCmp.prototype.next = function () {
+                PaginationControlsDirective.prototype.next = function () {
                     this.setCurrent(this.getCurrent() + 1);
@@ -381,3 +438,3 @@ };
                  */
-                PaginationControlsCmp.prototype.isFirstPage = function () {
+                PaginationControlsDirective.prototype.isFirstPage = function () {
                     return this.getCurrent() === 1;
@@ -388,3 +445,3 @@ };
                  */
-                PaginationControlsCmp.prototype.isLastPage = function () {
+                PaginationControlsDirective.prototype.isLastPage = function () {
                     return this.getLastPage() === this.getCurrent();
@@ -395,3 +452,3 @@ };
                  */
-                PaginationControlsCmp.prototype.setCurrent = function (page) {
+                PaginationControlsDirective.prototype.setCurrent = function (page) {
                     this.pageChange.emit(page);
@@ -402,3 +459,3 @@ };
                  */
-                PaginationControlsCmp.prototype.getCurrent = function () {
+                PaginationControlsDirective.prototype.getCurrent = function () {
                     return this.service.getCurrentPage(this.id);
@@ -409,3 +466,3 @@ };
                  */
-                PaginationControlsCmp.prototype.getLastPage = function () {
+                PaginationControlsDirective.prototype.getLastPage = function () {
                     var inst = this.service.getInstance(this.id);
@@ -424,3 +481,3 @@ if (inst.totalItems < 1) {
                  */
-                PaginationControlsCmp.prototype.updatePageLinks = function () {
+                PaginationControlsDirective.prototype.updatePageLinks = function () {
                     var _this = this;
@@ -443,3 +500,3 @@ var inst = this.service.getInstance(this.id);
                  */
-                PaginationControlsCmp.prototype.outOfBoundCorrection = function (instance) {
+                PaginationControlsDirective.prototype.outOfBoundCorrection = function (instance) {
                     var totalPages = Math.ceil(instance.totalItems / instance.itemsPerPage);
@@ -455,5 +512,5 @@ if (totalPages < instance.currentPage && 0 < totalPages) {
                 /**
-                 * Returns an array of IPage objects to use in the pagination controls.
+                 * Returns an array of Page objects to use in the pagination controls.
                  */
-                PaginationControlsCmp.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
+                PaginationControlsDirective.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
                     // paginationRange could be a string if passed from attribute, so cast to number.
@@ -492,3 +549,3 @@ paginationRange = +paginationRange;
                  */
-                PaginationControlsCmp.prototype.calculatePageNumber = function (i, currentPage, paginationRange, totalPages) {
+                PaginationControlsDirective.prototype.calculatePageNumber = function (i, currentPage, paginationRange, totalPages) {
                     var halfWay = Math.ceil(paginationRange / 2);
@@ -517,49 +574,35 @@ if (i === paginationRange) {
                 __decorate([
-                    core_3.Input(), 
+                    core_4.Input(), 
                     __metadata('design:type', String)
-                ], PaginationControlsCmp.prototype, "id", void 0);
+                ], PaginationControlsDirective.prototype, "id", void 0);
                 __decorate([
-                    core_3.Input(), 
+                    core_4.Input(), 
                     __metadata('design:type', Number)
-                ], PaginationControlsCmp.prototype, "maxSize", void 0);
+                ], PaginationControlsDirective.prototype, "maxSize", void 0);
                 __decorate([
-                    core_3.Input(), 
-                    __metadata('design:type', Boolean)
-                ], PaginationControlsCmp.prototype, "directionLinks", null);
-                __decorate([
-                    core_3.Input(), 
-                    __metadata('design:type', Boolean)
-                ], PaginationControlsCmp.prototype, "autoHide", null);
-                __decorate([
-                    core_3.Output(), 
-                    __metadata('design:type', core_3.EventEmitter)
-                ], PaginationControlsCmp.prototype, "pageChange", void 0);
-                __decorate([
-                    core_3.ViewChild('template'), 
-                    __metadata('design:type', Object)
-                ], PaginationControlsCmp.prototype, "template", void 0);
-                PaginationControlsCmp = __decorate([
-                    core_3.Component({
-                        selector: 'pagination-controls',
-                        template: template_1.DEFAULT_TEMPLATE,
-                        styles: [template_1.DEFAULT_STYLES],
-                        changeDetection: core_3.ChangeDetectionStrategy.OnPush
+                    core_4.Output(), 
+                    __metadata('design:type', core_4.EventEmitter)
+                ], PaginationControlsDirective.prototype, "pageChange", void 0);
+                PaginationControlsDirective = __decorate([
+                    core_4.Directive({
+                        selector: 'pagination-template,[pagination-template]',
+                        exportAs: 'paginationApi'
                     }), 
-                    __metadata('design:paramtypes', [pagination_service_2.PaginationService, core_3.ChangeDetectorRef])
-                ], PaginationControlsCmp);
-                return PaginationControlsCmp;
+                    __metadata('design:paramtypes', [pagination_service_2.PaginationService, core_4.ChangeDetectorRef])
+                ], PaginationControlsDirective);
+                return PaginationControlsDirective;
             }());
-            exports_4("PaginationControlsCmp", PaginationControlsCmp);
+            exports_6("PaginationControlsDirective", PaginationControlsDirective);
         }
     }
 });
-System.register("ng2-pagination", ['@angular/core', '@angular/common', "paginate-pipe", "pagination-service", "pagination-controls-cmp"], function(exports_5, context_5) {
+System.register("ng2-pagination", ['@angular/core', '@angular/common', "paginate.pipe", "pagination.service", "pagination-controls.component", "pagination-controls.directive"], function(exports_7, context_7) {
     "use strict";
-    var __moduleName = context_5 && context_5.id;
-    var core_4, common_1, paginate_pipe_1, pagination_service_3, pagination_controls_cmp_1;
+    var __moduleName = context_7 && context_7.id;
+    var core_5, common_1, paginate_pipe_1, pagination_service_3, pagination_controls_component_1, pagination_controls_directive_1;
     var Ng2PaginationModule;
     return {
         setters:[
-            function (core_4_1) {
-                core_4 = core_4_1;
+            function (core_5_1) {
+                core_5 = core_5_1;
             },
@@ -571,3 +614,3 @@ function (common_1_1) {
                 paginate_pipe_1 = paginate_pipe_1_1;
-                exports_5({
+                exports_7({
                     "PaginatePipe": paginate_pipe_1_1["PaginatePipe"]
@@ -578,12 +621,14 @@ });
                 pagination_service_3 = pagination_service_3_1;
-                exports_5({
-                    "PaginationService": pagination_service_3_1["PaginationService"],
-                    "IPaginationInstance": pagination_service_3_1["IPaginationInstance"]
+                exports_7({
+                    "PaginationService": pagination_service_3_1["PaginationService"]
                 });
             },
-            function (pagination_controls_cmp_1_1) {
-                pagination_controls_cmp_1 = pagination_controls_cmp_1_1;
-                exports_5({
-                    "PaginationControlsCmp": pagination_controls_cmp_1_1["PaginationControlsCmp"]
+            function (pagination_controls_component_1_1) {
+                pagination_controls_component_1 = pagination_controls_component_1_1;
+                exports_7({
+                    "PaginationControlsComponent": pagination_controls_component_1_1["PaginationControlsComponent"]
                 });
+            },
+            function (pagination_controls_directive_1_1) {
+                pagination_controls_directive_1 = pagination_controls_directive_1_1;
             }],
@@ -595,10 +640,11 @@ execute: function() {
                 Ng2PaginationModule = __decorate([
-                    core_4.NgModule({
+                    core_5.NgModule({
                         imports: [common_1.CommonModule],
                         declarations: [
                             paginate_pipe_1.PaginatePipe,
-                            pagination_controls_cmp_1.PaginationControlsCmp
+                            pagination_controls_component_1.PaginationControlsComponent,
+                            pagination_controls_directive_1.PaginationControlsDirective
                         ],
                         providers: [pagination_service_3.PaginationService],
-                        exports: [paginate_pipe_1.PaginatePipe, pagination_controls_cmp_1.PaginationControlsCmp]
+                        exports: [paginate_pipe_1.PaginatePipe, pagination_controls_component_1.PaginationControlsComponent, pagination_controls_directive_1.PaginationControlsDirective]
                     }), 
@@ -609,5 +655,5 @@ __metadata('design:paramtypes', [])
             }());
-            exports_5("Ng2PaginationModule", Ng2PaginationModule);
+            exports_7("Ng2PaginationModule", Ng2PaginationModule);
         }
     }
 });

dist/ng2-pagination.d.ts

@@ -1,5 +0,6 @@
-export { PaginationService, IPaginationInstance } from './pagination-service';
-export { PaginationControlsCmp } from './pagination-controls-cmp';
-export { PaginatePipe } from './paginate-pipe';
+export { PaginationInstance } from './pagination-instance';
+export { PaginationService } from './pagination.service';
+export { PaginationControlsComponent } from './pagination-controls.component';
+export { PaginatePipe } from './paginate.pipe';
 export declare class Ng2PaginationModule {
 }

dist/ng2-pagination.js

 "use strict";
 var core_1 = require('@angular/core');
 var common_1 = require('@angular/common');
-var paginate_pipe_1 = require('./paginate-pipe');
-var pagination_service_1 = require('./pagination-service');
-var pagination_controls_cmp_1 = require('./pagination-controls-cmp');
-var pagination_service_2 = require('./pagination-service');
+var paginate_pipe_1 = require('./paginate.pipe');
+var pagination_service_1 = require('./pagination.service');
+var pagination_controls_component_1 = require('./pagination-controls.component');
+var pagination_controls_directive_1 = require('./pagination-controls.directive');
+var pagination_service_2 = require('./pagination.service');
 exports.PaginationService = pagination_service_2.PaginationService;
-var pagination_controls_cmp_2 = require('./pagination-controls-cmp');
-exports.PaginationControlsCmp = pagination_controls_cmp_2.PaginationControlsCmp;
-var paginate_pipe_2 = require('./paginate-pipe');
+var pagination_controls_component_2 = require('./pagination-controls.component');
+exports.PaginationControlsComponent = pagination_controls_component_2.PaginationControlsComponent;
+var paginate_pipe_2 = require('./paginate.pipe');
 exports.PaginatePipe = paginate_pipe_2.PaginatePipe;
@@ -21,6 +22,7 @@ var Ng2PaginationModule = (function () {
                         paginate_pipe_1.PaginatePipe,
-                        pagination_controls_cmp_1.PaginationControlsCmp
+                        pagination_controls_component_1.PaginationControlsComponent,
+                        pagination_controls_directive_1.PaginationControlsDirective
                     ],
                     providers: [pagination_service_1.PaginationService],
-                    exports: [paginate_pipe_1.PaginatePipe, pagination_controls_cmp_1.PaginationControlsCmp]
+                    exports: [paginate_pipe_1.PaginatePipe, pagination_controls_component_1.PaginationControlsComponent, pagination_controls_directive_1.PaginationControlsDirective]
                 },] },
@@ -27,0 +29,0 @@ ];

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-cmp","name":"PaginationControlsCmp"}],"providers":[{"__symbolic":"reference","module":"./pagination-service","name":"PaginationService"}],"exports":[{"__symbolic":"reference","module":"./paginate-pipe","name":"PaginatePipe"},{"__symbolic":"reference","module":"./pagination-controls-cmp","name":"PaginationControlsCmp"}]}]}]}},"exports":[{"from":"./pagination-service","export":["PaginationService","IPaginationInstance"]},{"from":"./pagination-controls-cmp","export":["PaginationControlsCmp"]},{"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":"./paginate.pipe","export":["PaginatePipe"]}]}

dist/template.js

@@ -6,3 +6,3 @@ /**
 "use strict";
-exports.DEFAULT_TEMPLATE = "\n    <div #template>\n        <ng-content></ng-content>\n    </div>\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        aria-label=\"Pagination\" \n        *ngIf=\"!hasTemplate && !(autoHide && pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < getCurrent()\" (click)=\"previous()\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"getCurrent() === page.value\" *ngFor=\"let page of pages\">\n            <a (click)=\"setCurrent(page.value)\" *ngIf=\"getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"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]=\"isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!isLastPage()\" (click)=\"next()\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    ";
+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); }";

dist/template.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"DEFAULT_TEMPLATE":"\n    <div #template>\n        <ng-content></ng-content>\n    </div>\n    <ul class=\"ng2-pagination\" \n        role=\"navigation\" \n        aria-label=\"Pagination\" \n        *ngIf=\"!hasTemplate && !(autoHide && pages.length <= 1)\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"isFirstPage()\" *ngIf=\"directionLinks\"> \n            <a *ngIf=\"1 < getCurrent()\" (click)=\"previous()\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"getCurrent() === page.value\" *ngFor=\"let page of pages\">\n            <a (click)=\"setCurrent(page.value)\" *ngIf=\"getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"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]=\"isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"!isLastPage()\" (click)=\"next()\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\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":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); }"}}

package.json

 {
   "name": "ng2-pagination",
-  "version": "0.5.1",
+  "version": "1.0.0",
   "description": "Pagination for Angular 2",
   "main": "index.js",
   "scripts": {
-    "typings:install": "node node_modules/typings/dist/bin install",
-    "build:system": "node node_modules/typescript/bin/tsc -p tsconfig.system.json",
-    "build:cjs": "ngc",
+    "build:system": "tsc -p config/tsconfig.system.json",
+    "build:cjs": "ngc -p config/tsconfig.cjs.json",
     "build": "npm run build:cjs && npm run build:system",
-    "test": "karma start karma.conf.js",
+    "test": "karma start config/karma.conf.js",
     "test:watch": "npm run test -- --auto-watch --no-single-run",
-    "demo:watch": "webpack --progress --colors --watch",
-    "demo:dist": "webpack --progress --colors -p --env.aot",
+    "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"
@@ -44,5 +43,9 @@ },
     "@angular/platform-server": "^2.0.2",
-    "@ngtools/webpack": "^1.0.0",
-    "angular2-template-loader": "^0.5.0",
-    "bulma": "^0.0.14",
+    "@angular/router": "3.1.2",
+    "@ngtools/webpack": "1.1.4",
+    "@types/es6-shim": "^0.31.32",
+    "@types/jasmine": "^2.5.35",
+    "@types/node": "^6.0.45",
+    "angular2-template-loader": "0.6.0",
+    "bulma": "0.2.3",
     "core-js": "^2.4.0",
@@ -62,2 +65,3 @@ "css-loader": "^0.23.1",
     "karma-webpack": "^1.8.0",
+    "marked": "^0.3.6",
     "node-sass": "^3.6.0",
@@ -70,5 +74,4 @@ "phantomjs-prebuilt": "^2.1.7",
     "style-loader": "^0.13.1",
-    "ts-loader": "^0.7.2",
-    "typescript": "2.0.3",
-    "typings": "^1.0.4",
+    "ts-loader": "^1.0.0",
+    "typescript": "2.0.6",
     "webpack": "2.1.0-beta.25",
@@ -75,0 +78,0 @@ "zone.js": "0.6.25"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90394

increased by8.41%

Number of package files

26

increased by23.81%

Lines of code

1356

increased by6.52%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

218

increased by3.81%

Worsened metrics

Dev dependency count

41

increased by10.81%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes