@progress/kendo-angular-pager 3.0.1 → 4.0.0-next.202203010907
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/kendo-angular-pager.umd.js +5 -0
- package/{dist/es/util.js → esm2015/kendo-angular-pager.js} +2 -2
- package/{dist/es2015 → esm2015}/main.js +1 -0
- package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
- package/{dist/es → esm2015}/pager/change-event-args.interface.js +1 -0
- package/{dist/es2015 → esm2015}/pager/common/constants.js +0 -0
- package/{dist/es2015 → esm2015}/pager/common/pager-type.js +1 -0
- package/esm2015/pager/localization/custom-messages.component.js +41 -0
- package/esm2015/pager/localization/localized-messages.directive.js +36 -0
- package/esm2015/pager/localization/messages.js +40 -0
- package/{dist/es2015 → esm2015}/pager/pager-context.service.js +0 -0
- package/{dist/es2015 → esm2015}/pager/pager-element.component.js +13 -0
- package/esm2015/pager/pager-info.component.js +73 -0
- package/esm2015/pager/pager-input.component.js +133 -0
- package/esm2015/pager/pager-next-buttons.component.js +86 -0
- package/{dist/es2015 → esm2015}/pager/pager-numeric-buttons.component.js +73 -25
- package/{dist/es2015 → esm2015}/pager/pager-page-sizes.component.js +51 -44
- package/esm2015/pager/pager-prev-buttons.component.js +86 -0
- package/{dist/es2015 → esm2015}/pager/pager-template.directive.js +14 -12
- package/{dist/es2015 → esm2015}/pager/pager.component.js +120 -85
- package/{dist/es2015 → esm2015}/pager/pager.module.js +37 -12
- package/{dist/es2015 → esm2015}/pager/pagesize-item.interface.js +1 -0
- package/{dist/es2015 → esm2015}/pager/pagesizechange-event.js +0 -0
- package/{dist/es2015 → esm2015}/pager/preventable-event.js +0 -0
- package/{dist/es2015 → esm2015}/util.js +0 -0
- package/{dist/fesm2015/index.js → fesm2015/kendo-angular-pager.js} +491 -303
- package/{dist/es2015/pager/pager.module.d.ts → kendo-angular-pager.d.ts} +3 -4
- package/{dist/es2015/main.d.ts → main.d.ts} +1 -0
- package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
- package/package.json +32 -104
- package/{dist/es2015/pager → pager}/change-event-args.interface.d.ts +0 -0
- package/{dist/es2015/pager → pager}/common/constants.d.ts +0 -0
- package/{dist/es2015/pager → pager}/common/pager-type.d.ts +0 -0
- package/{dist/es2015/pager → pager}/localization/custom-messages.component.d.ts +4 -1
- package/{dist/es2015/pager → pager}/localization/localized-messages.directive.d.ts +3 -0
- package/{dist/es2015/pager → pager}/localization/messages.d.ts +3 -0
- package/{dist/es2015/pager → pager}/pager-context.service.d.ts +1 -1
- package/{dist/es2015/pager → pager}/pager-element.component.d.ts +5 -2
- package/{dist/es2015/pager → pager}/pager-info.component.d.ts +6 -3
- package/{dist/es2015/pager → pager}/pager-input.component.d.ts +5 -2
- package/{dist/es2015/pager → pager}/pager-next-buttons.component.d.ts +4 -1
- package/{dist/es2015/pager → pager}/pager-numeric-buttons.component.d.ts +7 -4
- package/pager/pager-page-sizes.component.d.ts +154 -0
- package/{dist/es2015/pager → pager}/pager-prev-buttons.component.d.ts +4 -1
- package/{dist/es2015/pager → pager}/pager-template.directive.d.ts +3 -0
- package/{dist/es2015/pager → pager}/pager.component.d.ts +9 -5
- package/pager/pager.module.d.ts +28 -0
- package/{dist/es2015/pager → pager}/pagesize-item.interface.d.ts +0 -0
- package/{dist/es2015/pager → pager}/pagesizechange-event.d.ts +0 -0
- package/{dist/es2015/pager → pager}/preventable-event.d.ts +0 -0
- package/schematics/ngAdd/index.js +5 -2
- package/schematics/ngAdd/index.js.map +1 -1
- package/{dist/es2015/util.d.ts → util.d.ts} +0 -0
- package/dist/cdn/js/kendo-angular-pager.js +0 -150
- package/dist/cdn/main.js +0 -5
- package/dist/es/index.js +0 -13
- package/dist/es/main.js +0 -15
- package/dist/es/package-metadata.js +0 -15
- package/dist/es/pager/common/constants.js +0 -12
- package/dist/es/pager/common/pager-type.js +0 -4
- package/dist/es/pager/localization/custom-messages.component.js +0 -44
- package/dist/es/pager/localization/localized-messages.directive.js +0 -35
- package/dist/es/pager/localization/messages.js +0 -58
- package/dist/es/pager/pager-context.service.js +0 -48
- package/dist/es/pager/pager-element.component.js +0 -84
- package/dist/es/pager/pager-info.component.js +0 -90
- package/dist/es/pager/pager-input.component.js +0 -105
- package/dist/es/pager/pager-next-buttons.component.js +0 -52
- package/dist/es/pager/pager-numeric-buttons.component.js +0 -127
- package/dist/es/pager/pager-page-sizes.component.js +0 -226
- package/dist/es/pager/pager-prev-buttons.component.js +0 -52
- package/dist/es/pager/pager-template.directive.js +0 -62
- package/dist/es/pager/pager.component.js +0 -271
- package/dist/es/pager/pager.module.js +0 -76
- package/dist/es/pager/pagesize-item.interface.js +0 -4
- package/dist/es/pager/pagesizechange-event.js +0 -25
- package/dist/es/pager/preventable-event.js +0 -29
- package/dist/es2015/index.d.ts +0 -13
- package/dist/es2015/index.js +0 -13
- package/dist/es2015/index.metadata.json +0 -1
- package/dist/es2015/pager/change-event-args.interface.js +0 -4
- package/dist/es2015/pager/localization/custom-messages.component.js +0 -36
- package/dist/es2015/pager/localization/localized-messages.directive.js +0 -31
- package/dist/es2015/pager/localization/messages.js +0 -52
- package/dist/es2015/pager/pager-info.component.js +0 -74
- package/dist/es2015/pager/pager-input.component.js +0 -113
- package/dist/es2015/pager/pager-next-buttons.component.js +0 -66
- package/dist/es2015/pager/pager-page-sizes.component.d.ts +0 -150
- package/dist/es2015/pager/pager-prev-buttons.component.js +0 -66
- package/dist/fesm5/index.js +0 -1282
- package/dist/npm/index.js +0 -21
- package/dist/npm/main.js +0 -28
- package/dist/npm/package-metadata.js +0 -17
- package/dist/npm/pager/change-event-args.interface.js +0 -6
- package/dist/npm/pager/common/constants.js +0 -14
- package/dist/npm/pager/common/pager-type.js +0 -6
- package/dist/npm/pager/localization/custom-messages.component.js +0 -46
- package/dist/npm/pager/localization/localized-messages.directive.js +0 -37
- package/dist/npm/pager/localization/messages.js +0 -60
- package/dist/npm/pager/pager-context.service.js +0 -50
- package/dist/npm/pager/pager-element.component.js +0 -86
- package/dist/npm/pager/pager-info.component.js +0 -92
- package/dist/npm/pager/pager-input.component.js +0 -107
- package/dist/npm/pager/pager-next-buttons.component.js +0 -54
- package/dist/npm/pager/pager-numeric-buttons.component.js +0 -129
- package/dist/npm/pager/pager-page-sizes.component.js +0 -228
- package/dist/npm/pager/pager-prev-buttons.component.js +0 -54
- package/dist/npm/pager/pager-template.directive.js +0 -64
- package/dist/npm/pager/pager.component.js +0 -273
- package/dist/npm/pager/pager.module.js +0 -78
- package/dist/npm/pager/pagesize-item.interface.js +0 -6
- package/dist/npm/pager/pagesizechange-event.js +0 -27
- package/dist/npm/pager/preventable-event.js +0 -31
- package/dist/npm/util.js +0 -10
- package/dist/systemjs/kendo-angular-pager.js +0 -5
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as tslib_1 from "tslib";
|
|
6
|
-
// tslint:disable: no-access-missing-member
|
|
7
|
-
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
|
8
|
-
import { PagerContextService } from "./pager-context.service";
|
|
9
|
-
import { PagerElementComponent } from './pager-element.component';
|
|
10
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
11
|
-
/**
|
|
12
|
-
* Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
|
|
13
|
-
*/
|
|
14
|
-
var PagerNextButtonsComponent = /** @class */ (function (_super) {
|
|
15
|
-
tslib_1.__extends(PagerNextButtonsComponent, _super);
|
|
16
|
-
function PagerNextButtonsComponent(localization, pagerContext, cd) {
|
|
17
|
-
return _super.call(this, localization, pagerContext, cd) || this;
|
|
18
|
-
}
|
|
19
|
-
Object.defineProperty(PagerNextButtonsComponent.prototype, "disabled", {
|
|
20
|
-
/**
|
|
21
|
-
* @hidden
|
|
22
|
-
*
|
|
23
|
-
* @readonly
|
|
24
|
-
* @type {boolean}
|
|
25
|
-
* @memberOf PagerNextButtonsComponent
|
|
26
|
-
*/
|
|
27
|
-
get: function () {
|
|
28
|
-
return this.currentPage === this.totalPages || !this.total;
|
|
29
|
-
},
|
|
30
|
-
enumerable: true,
|
|
31
|
-
configurable: true
|
|
32
|
-
});
|
|
33
|
-
PagerNextButtonsComponent.prototype.onChanges = function (_a) {
|
|
34
|
-
var total = _a.total, skip = _a.skip, pageSize = _a.pageSize;
|
|
35
|
-
this.total = total;
|
|
36
|
-
this.skip = skip;
|
|
37
|
-
this.pageSize = pageSize;
|
|
38
|
-
this.cd.markForCheck();
|
|
39
|
-
};
|
|
40
|
-
PagerNextButtonsComponent = tslib_1.__decorate([
|
|
41
|
-
Component({
|
|
42
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
43
|
-
selector: 'kendo-datapager-next-buttons',
|
|
44
|
-
template: "\n <button\n type=\"button\"\n class=\"k-link k-pager-nav\"\n [class.k-disabled]=\"disabled\"\n [title]=\"textFor('nextPage')\"\n [attr.aria-label]=\"textFor('nextPage')\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n (click)=\"currentPage !== totalPages ? changePage(currentPage) : false\">\n <span class=\"k-icon k-i-arrow-e\" role=\"note\" [attr.aria-label]=\"textFor('nextPage')\"></span>\n </button>\n <button\n type=\"button\"\n class=\"k-link k-pager-nav k-pager-last\"\n [class.k-disabled]=\"disabled\"\n [title]=\"textFor('lastPage')\"\n [attr.aria-label]=\"textFor('lastPage')\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n (click)=\"currentPage !== totalPages ? changePage(totalPages-1) : false\">\n <span class=\"k-icon k-i-seek-e\" role=\"note\" [attr.aria-label]=\"textFor('lastPage')\"></span>\n </button>\n "
|
|
45
|
-
}),
|
|
46
|
-
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
47
|
-
PagerContextService,
|
|
48
|
-
ChangeDetectorRef])
|
|
49
|
-
], PagerNextButtonsComponent);
|
|
50
|
-
return PagerNextButtonsComponent;
|
|
51
|
-
}(PagerElementComponent));
|
|
52
|
-
export { PagerNextButtonsComponent };
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as tslib_1 from "tslib";
|
|
6
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, HostBinding } from '@angular/core';
|
|
7
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { PagerContextService } from './pager-context.service';
|
|
9
|
-
import { PagerElementComponent } from './pager-element.component';
|
|
10
|
-
/**
|
|
11
|
-
* Displays numeric buttons to enable navigation between the pages.
|
|
12
|
-
*/
|
|
13
|
-
var PagerNumericButtonsComponent = /** @class */ (function (_super) {
|
|
14
|
-
tslib_1.__extends(PagerNumericButtonsComponent, _super);
|
|
15
|
-
function PagerNumericButtonsComponent(localization, cd, pagerContext) {
|
|
16
|
-
var _this = _super.call(this, localization, pagerContext, cd) || this;
|
|
17
|
-
_this.pagerContext = pagerContext;
|
|
18
|
-
_this.numbersWrapClass = true;
|
|
19
|
-
return _this;
|
|
20
|
-
}
|
|
21
|
-
Object.defineProperty(PagerNumericButtonsComponent.prototype, "buttons", {
|
|
22
|
-
/**
|
|
23
|
-
* @hidden
|
|
24
|
-
*
|
|
25
|
-
* @readonly
|
|
26
|
-
* @type {number[]}
|
|
27
|
-
* @memberOf PagerNumericButtonsComponent
|
|
28
|
-
*/
|
|
29
|
-
get: function () {
|
|
30
|
-
var result = [];
|
|
31
|
-
for (var idx = this.start; idx <= this.end; idx++) {
|
|
32
|
-
result.push(idx);
|
|
33
|
-
}
|
|
34
|
-
return result;
|
|
35
|
-
},
|
|
36
|
-
enumerable: true,
|
|
37
|
-
configurable: true
|
|
38
|
-
});
|
|
39
|
-
Object.defineProperty(PagerNumericButtonsComponent.prototype, "end", {
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
get: function () {
|
|
44
|
-
return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
|
|
45
|
-
},
|
|
46
|
-
enumerable: true,
|
|
47
|
-
configurable: true
|
|
48
|
-
});
|
|
49
|
-
Object.defineProperty(PagerNumericButtonsComponent.prototype, "start", {
|
|
50
|
-
/**
|
|
51
|
-
* @hidden
|
|
52
|
-
*/
|
|
53
|
-
get: function () {
|
|
54
|
-
var page = this.currentPage;
|
|
55
|
-
var buttonCount = this.buttonCount;
|
|
56
|
-
if (page > buttonCount) {
|
|
57
|
-
var reminder = (page % buttonCount);
|
|
58
|
-
return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
|
|
59
|
-
}
|
|
60
|
-
return 1;
|
|
61
|
-
},
|
|
62
|
-
enumerable: true,
|
|
63
|
-
configurable: true
|
|
64
|
-
});
|
|
65
|
-
/**
|
|
66
|
-
* @hidden
|
|
67
|
-
*/
|
|
68
|
-
PagerNumericButtonsComponent.prototype.pageLabel = function (num) {
|
|
69
|
-
var pageText = this.textFor('page');
|
|
70
|
-
if (pageText) {
|
|
71
|
-
return pageText + ' ' + num;
|
|
72
|
-
}
|
|
73
|
-
return num.toString();
|
|
74
|
-
};
|
|
75
|
-
/**
|
|
76
|
-
* @hidden
|
|
77
|
-
*/
|
|
78
|
-
PagerNumericButtonsComponent.prototype.onSelectChange = function (e) {
|
|
79
|
-
var target = e.target;
|
|
80
|
-
var valueAsNumber = Number(target.value);
|
|
81
|
-
if (!Number.isNaN(valueAsNumber)) {
|
|
82
|
-
this.changePage(valueAsNumber - 1);
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
if (target.value === 'previousButtons') {
|
|
86
|
-
this.changePage(this.start - 2);
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
this.changePage(this.end);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
PagerNumericButtonsComponent.prototype.onChanges = function (_a) {
|
|
94
|
-
var total = _a.total, skip = _a.skip, pageSize = _a.pageSize;
|
|
95
|
-
this.total = total;
|
|
96
|
-
this.skip = skip;
|
|
97
|
-
this.pageSize = pageSize;
|
|
98
|
-
this.cd.markForCheck();
|
|
99
|
-
};
|
|
100
|
-
Object.defineProperty(PagerNumericButtonsComponent.prototype, "pageChooserLabel", {
|
|
101
|
-
get: function () {
|
|
102
|
-
return this.textFor('selectPage');
|
|
103
|
-
},
|
|
104
|
-
enumerable: true,
|
|
105
|
-
configurable: true
|
|
106
|
-
});
|
|
107
|
-
tslib_1.__decorate([
|
|
108
|
-
HostBinding('class.k-pager-numbers-wrap'),
|
|
109
|
-
tslib_1.__metadata("design:type", Boolean)
|
|
110
|
-
], PagerNumericButtonsComponent.prototype, "numbersWrapClass", void 0);
|
|
111
|
-
tslib_1.__decorate([
|
|
112
|
-
Input(),
|
|
113
|
-
tslib_1.__metadata("design:type", Number)
|
|
114
|
-
], PagerNumericButtonsComponent.prototype, "buttonCount", void 0);
|
|
115
|
-
PagerNumericButtonsComponent = tslib_1.__decorate([
|
|
116
|
-
Component({
|
|
117
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
118
|
-
selector: 'kendo-datapager-numeric-buttons',
|
|
119
|
-
template: "\n <select\n class=\"k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid\"\n [attr.title]=\"pageChooserLabel\"\n [attr.aria-label]=\"pageChooserLabel\"\n [value]=\"(currentPage).toString()\"\n (change)=\"onSelectChange($event)\">\n <option *ngIf=\"start > 1\"\n class=\"k-link\"\n value=\"previousButtons\"\n [attr.aria-label]=\"pageLabel(start - 1)\">...\n </option>\n <option *ngFor=\"let num of buttons\"\n [value]=\"num.toString()\"\n [attr.aria-label]=\"pageLabel(num)\"\n [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\">\n {{num}}\n </option>\n <option *ngIf=\"end < totalPages\"\n value=\"nextButtons\"\n class=\"k-link\"\n [attr.aria-label]=\"pageLabel(end + 1)\">...\n </option>\n </select>\n <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n <li *ngIf=\"start > 1\">\n <button\n type=\"button\"\n class=\"k-link\"\n [attr.aria-label]=\"pageLabel(start - 1)\"\n (click)=\"changePage(start - 2)\">...</button>\n </li>\n <li *ngFor=\"let num of buttons\">\n <button\n type=\"button\"\n [attr.aria-label]=\"pageLabel(num)\"\n [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\"\n (click)=\"changePage(num - 1)\">\n {{num}}\n </button>\n </li>\n <li *ngIf=\"end < totalPages\">\n <button\n type=\"button\"\n class=\"k-link\"\n [attr.aria-label]=\"pageLabel(end + 1)\"\n (click)=\"changePage(end)\">...</button>\n </li>\n </ul>\n "
|
|
120
|
-
}),
|
|
121
|
-
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
122
|
-
ChangeDetectorRef,
|
|
123
|
-
PagerContextService])
|
|
124
|
-
], PagerNumericButtonsComponent);
|
|
125
|
-
return PagerNumericButtonsComponent;
|
|
126
|
-
}(PagerElementComponent));
|
|
127
|
-
export { PagerNumericButtonsComponent };
|
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as tslib_1 from "tslib";
|
|
6
|
-
import { Component, ChangeDetectorRef, ChangeDetectionStrategy, HostBinding, Input, ViewChild } from '@angular/core';
|
|
7
|
-
import { PagerElementComponent } from './pager-element.component';
|
|
8
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
9
|
-
import { PagerContextService } from "./pager-context.service";
|
|
10
|
-
import { PageSizeChangeEvent } from './pagesizechange-event';
|
|
11
|
-
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
|
|
12
|
-
/**
|
|
13
|
-
* Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
|
|
14
|
-
*/
|
|
15
|
-
var PagerPageSizesComponent = /** @class */ (function (_super) {
|
|
16
|
-
tslib_1.__extends(PagerPageSizesComponent, _super);
|
|
17
|
-
function PagerPageSizesComponent(localization, cd, pagerContext) {
|
|
18
|
-
var _this = _super.call(this, localization, pagerContext, cd) || this;
|
|
19
|
-
_this.pagerContext = pagerContext;
|
|
20
|
-
_this._pageSizes = [];
|
|
21
|
-
return _this;
|
|
22
|
-
}
|
|
23
|
-
Object.defineProperty(PagerPageSizesComponent.prototype, "pageSizes", {
|
|
24
|
-
get: function () {
|
|
25
|
-
return this._pageSizes;
|
|
26
|
-
},
|
|
27
|
-
/**
|
|
28
|
-
* The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
|
|
29
|
-
*
|
|
30
|
-
* @example
|
|
31
|
-
* {% meta height:400 %}
|
|
32
|
-
* ```ts-preview
|
|
33
|
-
* _@Component({
|
|
34
|
-
* selector: 'my-app',
|
|
35
|
-
* template: `
|
|
36
|
-
* <div *ngFor="let item of pagedData" style="border: 1px solid black; padding: 10px;">
|
|
37
|
-
* <span>{{item.ProductID}}. </span>
|
|
38
|
-
* <span>{{item.ProductName}}</span>
|
|
39
|
-
* </div>
|
|
40
|
-
* <kendo-datapager
|
|
41
|
-
* [skip]="skip"
|
|
42
|
-
* [pageSize]="pageSize"
|
|
43
|
-
* [total]="total"
|
|
44
|
-
* (pageChange)="onPageChange($event)">
|
|
45
|
-
* <ng-template kendoDataPagerTemplate>
|
|
46
|
-
* <kendo-datapager-page-sizes [pageSizes]="pagesizes"></kendo-datapager-page-sizes>
|
|
47
|
-
* </ng-template>
|
|
48
|
-
* </kendo-datapager>
|
|
49
|
-
* `
|
|
50
|
-
* })
|
|
51
|
-
* class AppComponent {
|
|
52
|
-
* public data: any[] = products;
|
|
53
|
-
* public pagedData = [];
|
|
54
|
-
* public skip = 0;
|
|
55
|
-
* public pageSize = 2;
|
|
56
|
-
* public total = products.length;
|
|
57
|
-
* public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
|
|
58
|
-
*
|
|
59
|
-
* public ngOnInit() {
|
|
60
|
-
* this.pageData();
|
|
61
|
-
* }
|
|
62
|
-
*
|
|
63
|
-
* public onPageChange(e) {
|
|
64
|
-
* this.skip = e.skip;
|
|
65
|
-
* this.pageSize = e.take;
|
|
66
|
-
* this.pageData();
|
|
67
|
-
* }
|
|
68
|
-
*
|
|
69
|
-
* private pageData() {
|
|
70
|
-
* this.pagedData = this.data.slice(this.skip, this.skip + this.pageSize);
|
|
71
|
-
* }
|
|
72
|
-
* }
|
|
73
|
-
*
|
|
74
|
-
* const products = [{
|
|
75
|
-
* 'ProductID' : 1,
|
|
76
|
-
* 'ProductName' : "Chai",
|
|
77
|
-
* 'SupplierID' : 1,
|
|
78
|
-
* 'CategoryID' : 1,
|
|
79
|
-
* 'QuantityPerUnit' : "10 boxes x 20 bags",
|
|
80
|
-
* 'UnitPrice' : 18.0000,
|
|
81
|
-
* 'UnitsInStock' : 39,
|
|
82
|
-
* 'UnitsOnOrder' : 0,
|
|
83
|
-
* 'ReorderLevel' : 10,
|
|
84
|
-
* 'Discontinued' : false
|
|
85
|
-
*
|
|
86
|
-
* }, {
|
|
87
|
-
* 'ProductID' : 2,
|
|
88
|
-
* 'ProductName' : "Chang",
|
|
89
|
-
* 'SupplierID' : 1,
|
|
90
|
-
* 'CategoryID' : 1,
|
|
91
|
-
* 'QuantityPerUnit' : "24 - 12 oz bottles",
|
|
92
|
-
* 'UnitPrice' : 19.0000,
|
|
93
|
-
* 'UnitsInStock' : 17,
|
|
94
|
-
* 'UnitsOnOrder' : 40,
|
|
95
|
-
* 'ReorderLevel' : 25,
|
|
96
|
-
* 'Discontinued' : false
|
|
97
|
-
* }, {
|
|
98
|
-
* 'ProductID' : 3,
|
|
99
|
-
* 'ProductName' : "Aniseed Syrup",
|
|
100
|
-
* 'SupplierID' : 1,
|
|
101
|
-
* 'CategoryID' : 2,
|
|
102
|
-
* 'QuantityPerUnit' : "12 - 550 ml bottles",
|
|
103
|
-
* 'UnitPrice' : 10.0000,
|
|
104
|
-
* 'UnitsInStock' : 13,
|
|
105
|
-
* 'UnitsOnOrder' : 70,
|
|
106
|
-
* 'ReorderLevel' : 25,
|
|
107
|
-
* 'Discontinued' : false
|
|
108
|
-
* }, {
|
|
109
|
-
* 'ProductID' : 4,
|
|
110
|
-
* 'ProductName' : "Chef Anton\'s Cajun Seasoning",
|
|
111
|
-
* 'SupplierID' : 2,
|
|
112
|
-
* 'CategoryID' : 2,
|
|
113
|
-
* 'QuantityPerUnit' : "48 - 6 oz jars",
|
|
114
|
-
* 'UnitPrice' : 22.0000,
|
|
115
|
-
* 'UnitsInStock' : 53,
|
|
116
|
-
* 'UnitsOnOrder' : 0,
|
|
117
|
-
* 'ReorderLevel' : 0,
|
|
118
|
-
* 'Discontinued' : false
|
|
119
|
-
* }, {
|
|
120
|
-
* 'ProductID' : 5,
|
|
121
|
-
* 'ProductName' : "Chef Anton\'s Gumbo Mix",
|
|
122
|
-
* 'SupplierID' : 2,
|
|
123
|
-
* 'CategoryID' : 2,
|
|
124
|
-
* 'QuantityPerUnit' : "36 boxes",
|
|
125
|
-
* 'UnitPrice' : 21.3500,
|
|
126
|
-
* 'UnitsInStock' : 0,
|
|
127
|
-
* 'UnitsOnOrder' : 0,
|
|
128
|
-
* 'ReorderLevel' : 0,
|
|
129
|
-
* 'Discontinued' : true
|
|
130
|
-
* }, {
|
|
131
|
-
* 'ProductID' : 6,
|
|
132
|
-
* 'ProductName' : "Grandma\'s Boysenberry Spread",
|
|
133
|
-
* 'SupplierID' : 3,
|
|
134
|
-
* 'CategoryID' : 2,
|
|
135
|
-
* 'QuantityPerUnit' : "12 - 8 oz jars",
|
|
136
|
-
* 'UnitPrice' : 25.0000,
|
|
137
|
-
* 'UnitsInStock' : 120,
|
|
138
|
-
* 'UnitsOnOrder' : 0,
|
|
139
|
-
* 'ReorderLevel' : 25,
|
|
140
|
-
* 'Discontinued' : false
|
|
141
|
-
* }];
|
|
142
|
-
* ```
|
|
143
|
-
* {% endmeta %}
|
|
144
|
-
*/
|
|
145
|
-
set: function (pageSizes) {
|
|
146
|
-
var _this = this;
|
|
147
|
-
var normalizedItems = [];
|
|
148
|
-
pageSizes.forEach(function (item) {
|
|
149
|
-
if (typeof item === 'number') {
|
|
150
|
-
normalizedItems.push({
|
|
151
|
-
text: item.toString(),
|
|
152
|
-
value: item
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
else {
|
|
156
|
-
normalizedItems.push(item);
|
|
157
|
-
}
|
|
158
|
-
});
|
|
159
|
-
if (this.pageSize && !normalizedItems.some(function (item) { return item.value === _this.pageSize; })) {
|
|
160
|
-
normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }].concat(normalizedItems);
|
|
161
|
-
}
|
|
162
|
-
this._pageSizes = normalizedItems;
|
|
163
|
-
},
|
|
164
|
-
enumerable: true,
|
|
165
|
-
configurable: true
|
|
166
|
-
});
|
|
167
|
-
Object.defineProperty(PagerPageSizesComponent.prototype, "classes", {
|
|
168
|
-
/**
|
|
169
|
-
* @hidden
|
|
170
|
-
*
|
|
171
|
-
* @readonly
|
|
172
|
-
*/
|
|
173
|
-
get: function () {
|
|
174
|
-
return true;
|
|
175
|
-
},
|
|
176
|
-
enumerable: true,
|
|
177
|
-
configurable: true
|
|
178
|
-
});
|
|
179
|
-
PagerPageSizesComponent.prototype.ngAfterViewInit = function () {
|
|
180
|
-
this.dropDownList.wrapper.nativeElement.setAttribute('aria-label', this.textFor('itemsPerPage'));
|
|
181
|
-
};
|
|
182
|
-
/**
|
|
183
|
-
* @hidden
|
|
184
|
-
*/
|
|
185
|
-
PagerPageSizesComponent.prototype.pageSizeChange = function (value, dropdownlist) {
|
|
186
|
-
var event = new PageSizeChangeEvent(value);
|
|
187
|
-
this.pagerContext.changePageSize(event);
|
|
188
|
-
if (event.isDefaultPrevented()) {
|
|
189
|
-
dropdownlist.writeValue(this.pageSize);
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
PagerPageSizesComponent.prototype.onChanges = function (_a) {
|
|
193
|
-
var total = _a.total, skip = _a.skip, pageSize = _a.pageSize;
|
|
194
|
-
this.total = total;
|
|
195
|
-
this.skip = skip;
|
|
196
|
-
this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
|
|
197
|
-
this.cd.markForCheck();
|
|
198
|
-
};
|
|
199
|
-
tslib_1.__decorate([
|
|
200
|
-
ViewChild('dropdownlist', { static: true }),
|
|
201
|
-
tslib_1.__metadata("design:type", DropDownListComponent)
|
|
202
|
-
], PagerPageSizesComponent.prototype, "dropDownList", void 0);
|
|
203
|
-
tslib_1.__decorate([
|
|
204
|
-
Input(),
|
|
205
|
-
tslib_1.__metadata("design:type", Array),
|
|
206
|
-
tslib_1.__metadata("design:paramtypes", [Array])
|
|
207
|
-
], PagerPageSizesComponent.prototype, "pageSizes", null);
|
|
208
|
-
tslib_1.__decorate([
|
|
209
|
-
HostBinding("class.k-pager-sizes"),
|
|
210
|
-
HostBinding("class.k-label"),
|
|
211
|
-
tslib_1.__metadata("design:type", Boolean),
|
|
212
|
-
tslib_1.__metadata("design:paramtypes", [])
|
|
213
|
-
], PagerPageSizesComponent.prototype, "classes", null);
|
|
214
|
-
PagerPageSizesComponent = tslib_1.__decorate([
|
|
215
|
-
Component({
|
|
216
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
217
|
-
selector: 'kendo-datapager-page-sizes',
|
|
218
|
-
template: "\n <kendo-dropdownlist\n #dropdownlist\n [data]=\"pageSizes\"\n textField=\"text\"\n valueField=\"value\"\n [valuePrimitive]=\"true\"\n [value]=\"pageSize\"\n (valueChange)=\"pageSizeChange($event, dropdownlist)\"></kendo-dropdownlist>\n {{ textFor('itemsPerPage') }}\n "
|
|
219
|
-
}),
|
|
220
|
-
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
221
|
-
ChangeDetectorRef,
|
|
222
|
-
PagerContextService])
|
|
223
|
-
], PagerPageSizesComponent);
|
|
224
|
-
return PagerPageSizesComponent;
|
|
225
|
-
}(PagerElementComponent));
|
|
226
|
-
export { PagerPageSizesComponent };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as tslib_1 from "tslib";
|
|
6
|
-
// tslint:disable:no-access-missing-member
|
|
7
|
-
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
|
8
|
-
import { PagerContextService } from "./pager-context.service";
|
|
9
|
-
import { PagerElementComponent } from './pager-element.component';
|
|
10
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
11
|
-
/**
|
|
12
|
-
* Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
|
|
13
|
-
*/
|
|
14
|
-
var PagerPrevButtonsComponent = /** @class */ (function (_super) {
|
|
15
|
-
tslib_1.__extends(PagerPrevButtonsComponent, _super);
|
|
16
|
-
function PagerPrevButtonsComponent(localization, pagerContext, cd) {
|
|
17
|
-
return _super.call(this, localization, pagerContext, cd) || this;
|
|
18
|
-
}
|
|
19
|
-
Object.defineProperty(PagerPrevButtonsComponent.prototype, "disabled", {
|
|
20
|
-
/**
|
|
21
|
-
* @hidden
|
|
22
|
-
*
|
|
23
|
-
* @readonly
|
|
24
|
-
* @type {boolean}
|
|
25
|
-
* @memberOf PagerPrevButtonsComponent
|
|
26
|
-
*/
|
|
27
|
-
get: function () {
|
|
28
|
-
return this.currentPage === 1 || !this.total;
|
|
29
|
-
},
|
|
30
|
-
enumerable: true,
|
|
31
|
-
configurable: true
|
|
32
|
-
});
|
|
33
|
-
PagerPrevButtonsComponent.prototype.onChanges = function (_a) {
|
|
34
|
-
var total = _a.total, skip = _a.skip, pageSize = _a.pageSize;
|
|
35
|
-
this.total = total;
|
|
36
|
-
this.skip = skip;
|
|
37
|
-
this.pageSize = pageSize;
|
|
38
|
-
this.cd.markForCheck();
|
|
39
|
-
};
|
|
40
|
-
PagerPrevButtonsComponent = tslib_1.__decorate([
|
|
41
|
-
Component({
|
|
42
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
43
|
-
selector: 'kendo-datapager-prev-buttons',
|
|
44
|
-
template: "\n <button\n type=\"button\"\n class=\"k-link k-pager-nav k-pager-first\"\n [class.k-disabled]=\"disabled\"\n [title]=\"textFor('firstPage')\"\n [attr.aria-label]=\"textFor('firstPage')\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n (click)=\"currentPage !== 1 ? changePage(0) : false\">\n <span class=\"k-icon k-i-seek-w\" role=\"note\" [attr.aria-label]=\"textFor('firstPage')\"></span>\n </button>\n <button\n type=\"button\"\n class=\"k-link k-pager-nav\"\n [class.k-disabled]=\"disabled\"\n [title]=\"textFor('previousPage')\"\n [attr.aria-label]=\"textFor('previousPage')\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\">\n <span class=\"k-icon k-i-arrow-w\" role=\"note\" [attr.aria-label]=\"textFor('previousPage')\"></span>\n </button>\n "
|
|
45
|
-
}),
|
|
46
|
-
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
47
|
-
PagerContextService,
|
|
48
|
-
ChangeDetectorRef])
|
|
49
|
-
], PagerPrevButtonsComponent);
|
|
50
|
-
return PagerPrevButtonsComponent;
|
|
51
|
-
}(PagerElementComponent));
|
|
52
|
-
export { PagerPrevButtonsComponent };
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as tslib_1 from "tslib";
|
|
6
|
-
import { Directive, TemplateRef, Optional } from '@angular/core';
|
|
7
|
-
/**
|
|
8
|
-
* Represents the pager template which helps to customize the pager appearance. To define a pager
|
|
9
|
-
* template, nest an `<ng-template>` tag with the `kendoDataPagerTemplate` directive inside `<kendo-datapager>`.
|
|
10
|
-
*
|
|
11
|
-
* The template context provides the following fields:
|
|
12
|
-
* * `currentPage`—The index of the displayed page.
|
|
13
|
-
* * `pageSize`—The value of the current `pageSize`.
|
|
14
|
-
* * `skip`—The current skip value.
|
|
15
|
-
* * `total`—The total number of records.
|
|
16
|
-
* * `totalPages`—The total number of available pages.
|
|
17
|
-
*
|
|
18
|
-
* @example
|
|
19
|
-
* ```ts-preview
|
|
20
|
-
*
|
|
21
|
-
* _@Component({
|
|
22
|
-
* selector: 'my-app',
|
|
23
|
-
* template: `
|
|
24
|
-
* <kendo-datapager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
|
|
25
|
-
* <ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
|
|
26
|
-
* <kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
|
|
27
|
-
* <kendo-datapager-numeric-buttons [buttonCount]="10"></kendo-datapager-numeric-buttons>
|
|
28
|
-
* <kendo-datapager-next-buttons></kendo-datapager-next-buttons>
|
|
29
|
-
* <kendo-datapager-info></kendo-datapager-info>
|
|
30
|
-
* Current page: {{currentPage}}
|
|
31
|
-
* </ng-template>
|
|
32
|
-
* </kendo-datapager>
|
|
33
|
-
* `
|
|
34
|
-
* })
|
|
35
|
-
*
|
|
36
|
-
* class AppComponent {
|
|
37
|
-
* public skip = 0;
|
|
38
|
-
* public pageSize = 10;
|
|
39
|
-
* public total = 100;
|
|
40
|
-
*
|
|
41
|
-
* public onPageChange(e: any): void {
|
|
42
|
-
* this.skip = e.skip;
|
|
43
|
-
* this.pageSize = e.take;
|
|
44
|
-
* }
|
|
45
|
-
* }
|
|
46
|
-
*
|
|
47
|
-
* ```
|
|
48
|
-
*/
|
|
49
|
-
var PagerTemplateDirective = /** @class */ (function () {
|
|
50
|
-
function PagerTemplateDirective(templateRef) {
|
|
51
|
-
this.templateRef = templateRef;
|
|
52
|
-
}
|
|
53
|
-
PagerTemplateDirective = tslib_1.__decorate([
|
|
54
|
-
Directive({
|
|
55
|
-
selector: '[kendoDataPagerTemplate]'
|
|
56
|
-
}),
|
|
57
|
-
tslib_1.__param(0, Optional()),
|
|
58
|
-
tslib_1.__metadata("design:paramtypes", [TemplateRef])
|
|
59
|
-
], PagerTemplateDirective);
|
|
60
|
-
return PagerTemplateDirective;
|
|
61
|
-
}());
|
|
62
|
-
export { PagerTemplateDirective };
|