Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ng2-pagination
Advanced tools
ng2-pagination - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
@@ -0,1 +1,8 @@ | ||
| # 0.2.0 (2016-04-29) | ||
| * **Note:** This version is only compatible with Angular 2 **2.0.0-beta.17** and above! | ||
| * Update `*ngFor` syntax to align with beta.17. | ||
| * Update PaginatePipe to use new pipe API from beta.16 ([PR #24](https://github.com/michaelbromley/ng2-pagination/pull/24)). | ||
| * Update tests to reflect changes to async / inject API in beta.16 | ||
| * Add missing devDependiencies to package.json | ||
| # 0.1.0 (2016-04-28) | ||
@@ -2,0 +9,0 @@ * Fix bindings of the `directionLinks` and `autoHide` attributes when used with literal values. (fixes [#20](https://github.com/michaelbromley/ng2-pagination/issues/20)) |
@@ -155,4 +155,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| // from flashing empty until the real values arrive. | ||
| if (args instanceof Array) { | ||
| // compatible with angular2 before beta16 | ||
| args = args[0]; | ||
| } | ||
| if (!(collection instanceof Array)) { | ||
| var _id = args[0].id || this.service.defaultId; | ||
| var _id = args.id || this.service.defaultId; | ||
| if (this.state[_id]) { | ||
@@ -165,3 +169,3 @@ return this.state[_id].slice; | ||
| } | ||
| var serverSideMode = args[0].totalItems !== undefined; | ||
| var serverSideMode = args.totalItems !== undefined; | ||
| var instance = this.createInstance(collection, args); | ||
@@ -196,3 +200,3 @@ var id = instance.id; | ||
| PaginatePipe.prototype.createInstance = function (collection, args) { | ||
| var config = args[0]; | ||
| var config = args; | ||
| this.checkConfig(config); | ||
@@ -268,3 +272,3 @@ 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=\"#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_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); }"); | ||
@@ -271,0 +275,0 @@ } |
@@ -6,3 +6,3 @@ import { PaginationService } from "./pagination-service"; | ||
| constructor(service: PaginationService); | ||
| transform(collection: any[], args: any[]): any; | ||
| transform(collection: any[], args: any): any; | ||
| /** | ||
@@ -9,0 +9,0 @@ * Create an IPaginationInstance object, using defaults for any optional properties not supplied. |
@@ -25,4 +25,8 @@ "use strict"; | ||
| // from flashing empty until the real values arrive. | ||
| if (args instanceof Array) { | ||
| // compatible with angular2 before beta16 | ||
| args = args[0]; | ||
| } | ||
| if (!(collection instanceof Array)) { | ||
| var _id = args[0].id || this.service.defaultId; | ||
| var _id = args.id || this.service.defaultId; | ||
| if (this.state[_id]) { | ||
@@ -35,3 +39,3 @@ return this.state[_id].slice; | ||
| } | ||
| var serverSideMode = args[0].totalItems !== undefined; | ||
| var serverSideMode = args.totalItems !== undefined; | ||
| var instance = this.createInstance(collection, args); | ||
@@ -66,3 +70,3 @@ var id = instance.id; | ||
| PaginatePipe.prototype.createInstance = function (collection, args) { | ||
| var config = args[0]; | ||
| var config = args; | ||
| this.checkConfig(config); | ||
@@ -69,0 +73,0 @@ return { |
@@ -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=\"#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 <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_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); }"; |
| { | ||
| "name": "ng2-pagination", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "Pagination for Angular2", | ||
@@ -34,4 +34,5 @@ "main": "index.js", | ||
| "devDependencies": { | ||
| "angular2": "^2.0.0-beta.12", | ||
| "angular2": "^2.0.0-beta.17", | ||
| "bulma": "^0.0.14", | ||
| "css-loader": "^0.23.1", | ||
| "es6-promise": "^3.0.2", | ||
@@ -46,11 +47,14 @@ "es6-shim": "^0.35.0", | ||
| "karma-webpack": "^1.7.0", | ||
| "node-sass": "^3.6.0", | ||
| "raw-loader": "^0.5.1", | ||
| "reflect-metadata": "^0.1.2", | ||
| "rxjs": "5.0.0-beta.2", | ||
| "rxjs": "5.0.0-beta.6", | ||
| "sass-loader": "^3.1.2", | ||
| "style-loader": "^0.13.1", | ||
| "ts-loader": "^0.7.2", | ||
| "typescript": "^1.8.0", | ||
| "webpack": "^1.12.9", | ||
| "zone.js": "0.6.6" | ||
| "zone.js": "0.6.12" | ||
| }, | ||
| "dependencies": {} | ||
| } |
@@ -15,4 +15,2 @@ # Angular2 Pagination | ||
| Requirements: TypeScript 1.6+ (for TS builds), tested with Angular 2.0.0-beta.12+ | ||
| ``` | ||
@@ -22,2 +20,7 @@ npm install ng2-pagination --save | ||
| ### Angular 2 Version | ||
| Angular 2 is currently in beta, and API changes are ongoing. Therefore, if encountering errors using this | ||
| lib, ensure your version of Angular is compatible. The current version used to develop this lib is angular2 **2.0.0-beta.17 +**. | ||
| ### CommonJS | ||
@@ -43,3 +46,3 @@ | ||
| <ul> | ||
| <li *ngFor="#item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li> | ||
| <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li> | ||
| </ul> | ||
@@ -68,3 +71,3 @@ | ||
| ```HTML | ||
| <element *ngFor="#item of collection | paginate: { id: 'foo' | ||
| <element *ngFor="let item of collection | paginate: { id: 'foo' | ||
| itemsPerPage: pageSize | ||
@@ -130,3 +133,3 @@ currentPage: p | ||
| ```HTML | ||
| <li *ngFor="#item of collection | paginate: { itemsPerPage: 10, currentPage: p, totalItems: res.count }">...</li> | ||
| <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p, totalItems: res.count }">...</li> | ||
| ``` | ||
@@ -154,3 +157,3 @@ | ||
| <div *ngFor="#page of p.pages" [class.current]="p.getCurrent() === page.value"> | ||
| <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value"> | ||
| <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value"> | ||
@@ -199,4 +202,2 @@ <span>{{ page.label }}</span> | ||
| More complete contributing instructions to follow. | ||
| ## Dart Version | ||
@@ -203,0 +204,0 @@ |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.42%
68636
- Lines of code
- increased by0.67%
1206
- Number of lines in readme file
- increased by0.49%
204
Worsened metrics
- Dev dependency count
- increased by22.22%
22
No dependency changes