@progress/kendo-angular-pager 17.0.0-develop.9 → 17.0.1-develop.1

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.
Files changed (57) hide show
  1. package/README.md +26 -17
  2. package/directives.d.ts +2 -1
  3. package/{esm2020 → esm2022}/directives.mjs +3 -1
  4. package/{esm2020 → esm2022}/index.mjs +3 -0
  5. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  6. package/{esm2020 → esm2022}/pager/focusable.directive.mjs +11 -5
  7. package/{esm2020 → esm2022}/pager/localization/custom-messages.component.mjs +10 -9
  8. package/{esm2020 → esm2022}/pager/localization/localized-messages.directive.mjs +10 -9
  9. package/esm2022/pager/localization/messages.mjs +100 -0
  10. package/{esm2020 → esm2022}/pager/navigation.service.mjs +10 -8
  11. package/{esm2020 → esm2022}/pager/pager-context.service.mjs +8 -6
  12. package/{esm2020 → esm2022}/pager/pager-element.component.mjs +24 -16
  13. package/{esm2020 → esm2022}/pager/pager-info.component.mjs +9 -12
  14. package/{esm2020 → esm2022}/pager/pager-input.component.mjs +57 -53
  15. package/{esm2020 → esm2022}/pager/pager-next-buttons.component.mjs +26 -22
  16. package/{esm2020 → esm2022}/pager/pager-numeric-buttons.component.mjs +24 -15
  17. package/{esm2020 → esm2022}/pager/pager-page-sizes.component.mjs +30 -26
  18. package/{esm2020 → esm2022}/pager/pager-prev-buttons.component.mjs +31 -23
  19. package/{esm2020 → esm2022}/pager/pager-template.directive.mjs +13 -12
  20. package/{esm2020 → esm2022}/pager/pager.component.mjs +224 -161
  21. package/esm2022/pager/pager.module.mjs +65 -0
  22. package/{esm2020 → esm2022}/pager/pagesizechange-event.mjs +4 -0
  23. package/{esm2020 → esm2022}/pager/preventable-event.mjs +1 -3
  24. package/esm2022/pager/spacer.component.mjs +49 -0
  25. package/{esm2020 → esm2022}/util.mjs +11 -7
  26. package/{fesm2020 → fesm2022}/progress-kendo-angular-pager.mjs +639 -404
  27. package/index.d.ts +3 -0
  28. package/package.json +15 -21
  29. package/pager/common/pager-size.d.ts +1 -1
  30. package/pager/common/pager-type.d.ts +3 -3
  31. package/pager/focusable.directive.d.ts +1 -1
  32. package/pager/localization/custom-messages.component.d.ts +1 -1
  33. package/pager/localization/localized-messages.directive.d.ts +1 -1
  34. package/pager/localization/messages.d.ts +12 -1
  35. package/pager/pager-context.service.d.ts +3 -1
  36. package/pager/pager-info.component.d.ts +2 -3
  37. package/pager/pager-input.component.d.ts +1 -1
  38. package/pager/pager-next-buttons.component.d.ts +1 -1
  39. package/pager/pager-numeric-buttons.component.d.ts +1 -1
  40. package/pager/pager-page-sizes.component.d.ts +5 -5
  41. package/pager/pager-prev-buttons.component.d.ts +1 -1
  42. package/pager/pager-template.directive.d.ts +9 -9
  43. package/pager/pager.component.d.ts +30 -11
  44. package/pager/pager.module.d.ts +22 -2
  45. package/pager/spacer.component.d.ts +24 -0
  46. package/schematics/ngAdd/index.js +7 -7
  47. package/util.d.ts +4 -0
  48. package/esm2020/pager/localization/messages.mjs +0 -43
  49. package/esm2020/pager/pager.module.mjs +0 -45
  50. package/fesm2015/progress-kendo-angular-pager.mjs +0 -1991
  51. /package/{esm2020 → esm2022}/pager/change-event-args.interface.mjs +0 -0
  52. /package/{esm2020 → esm2022}/pager/common/constants.mjs +0 -0
  53. /package/{esm2020 → esm2022}/pager/common/pager-classes.mjs +0 -0
  54. /package/{esm2020 → esm2022}/pager/common/pager-size.mjs +0 -0
  55. /package/{esm2020 → esm2022}/pager/common/pager-type.mjs +0 -0
  56. /package/{esm2020 → esm2022}/pager/pagesize-item.interface.mjs +0 -0
  57. /package/{esm2020 → esm2022}/progress-kendo-angular-pager.mjs +0 -0
@@ -1,1991 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 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 i0 from '@angular/core';
6
- import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChildren, Output, HostListener, NgModule } from '@angular/core';
7
- import * as i1 from '@progress/kendo-angular-l10n';
8
- import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
- import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
10
- import { Subject, Subscription } from 'rxjs';
11
- import { ButtonComponent } from '@progress/kendo-angular-buttons';
12
- import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
13
- import { Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
14
- import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
15
- import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
16
- import { validatePackage } from '@progress/kendo-licensing';
17
- import { IconsService } from '@progress/kendo-angular-icons';
18
- import { PopupService } from '@progress/kendo-angular-popup';
19
-
20
- /**
21
- * @hidden
22
- */
23
- class PreventableEvent {
24
- constructor() {
25
- this.prevented = false;
26
- }
27
- /**
28
- * Prevents the default action for a specified event.
29
- * In this way, the source component suppresses the built-in behavior that follows the event.
30
- */
31
- preventDefault() {
32
- this.prevented = true;
33
- }
34
- /**
35
- * If the event is prevented by any of its subscribers, returns `true`.
36
- *
37
- * @returns `true` if the default action was prevented. Otherwise, returns `false`.
38
- */
39
- isDefaultPrevented() {
40
- return this.prevented;
41
- }
42
- }
43
-
44
- /**
45
- * Arguments for the `pageSizeChange` event. The `pageSizeChange` event fires when the page size
46
- * is changed from the UI. If you cancel the event, the change is prevented.
47
- */
48
- class PageSizeChangeEvent extends PreventableEvent {
49
- /**
50
- * Constructs the event arguments for the `pageSizeChange` event.
51
- * @param newPageSize - The newly selected page size.
52
- * @hidden
53
- */
54
- constructor(newPageSize) {
55
- super();
56
- this.newPageSize = newPageSize;
57
- }
58
- }
59
-
60
- /**
61
- * @hidden
62
- */
63
- class Messages extends ComponentMessages {
64
- }
65
- Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
66
- Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendoPagerMessages", inputs: { firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
67
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
68
- type: Directive,
69
- args: [{
70
- // eslint-disable-next-line @angular-eslint/directive-selector
71
- selector: 'kendoPagerMessages'
72
- }]
73
- }], propDecorators: { firstPage: [{
74
- type: Input
75
- }], lastPage: [{
76
- type: Input
77
- }], previousPage: [{
78
- type: Input
79
- }], nextPage: [{
80
- type: Input
81
- }], page: [{
82
- type: Input
83
- }], pageNumberInputTitle: [{
84
- type: Input
85
- }], itemsPerPage: [{
86
- type: Input
87
- }], of: [{
88
- type: Input
89
- }], items: [{
90
- type: Input
91
- }], selectPage: [{
92
- type: Input
93
- }], inputLabel: [{
94
- type: Input
95
- }] } });
96
-
97
- /**
98
- * Custom component messages override default component messages
99
- * ([see example]({% slug pager_globalization %}#toc-messages)).
100
- */
101
- class CustomMessagesComponent extends Messages {
102
- constructor(service) {
103
- super();
104
- this.service = service;
105
- }
106
- get override() {
107
- return true;
108
- }
109
- }
110
- CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
111
- CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-datapager-messages", providers: [
112
- {
113
- provide: Messages,
114
- useExisting: forwardRef(() => CustomMessagesComponent)
115
- }
116
- ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
118
- type: Component,
119
- args: [{
120
- providers: [
121
- {
122
- provide: Messages,
123
- useExisting: forwardRef(() => CustomMessagesComponent)
124
- }
125
- ],
126
- selector: 'kendo-datapager-messages',
127
- template: ``,
128
- standalone: true
129
- }]
130
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
131
-
132
- /**
133
- * @hidden
134
- */
135
- class LocalizedMessagesDirective extends Messages {
136
- constructor(service) {
137
- super();
138
- this.service = service;
139
- }
140
- }
141
- LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
142
- LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoDataPagerLocalizedMessages]", providers: [
143
- {
144
- provide: Messages,
145
- useExisting: forwardRef(() => LocalizedMessagesDirective)
146
- }
147
- ], usesInheritance: true, ngImport: i0 });
148
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
149
- type: Directive,
150
- args: [{
151
- providers: [
152
- {
153
- provide: Messages,
154
- useExisting: forwardRef(() => LocalizedMessagesDirective)
155
- }
156
- ],
157
- selector: '[kendoDataPagerLocalizedMessages]',
158
- standalone: true
159
- }]
160
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
161
-
162
- /**
163
- * @hidden
164
- */
165
- class PagerContextService {
166
- constructor() {
167
- this.changes = new Subject();
168
- this.pageChange = new Subject();
169
- this.pageSizeChange = new Subject();
170
- }
171
- get currentPage() {
172
- return this.skip / this.pageSize;
173
- }
174
- notifyChanges(changes) {
175
- this.total = changes.total;
176
- this.pageSize = changes.pageSize;
177
- this.skip = changes.skip;
178
- this.changes.next(changes);
179
- }
180
- changePage(page) {
181
- this.pageChange.next({ skip: page * this.pageSize, take: this.pageSize });
182
- }
183
- changePageSize(event) {
184
- this.pageSizeChange.next(event);
185
- }
186
- nextPage() {
187
- const nextPage = this.currentPage + 1;
188
- if (nextPage * this.pageSize <= this.total) {
189
- this.changePage(nextPage);
190
- }
191
- }
192
- prevPage() {
193
- const prevPage = this.currentPage - 1;
194
- if (prevPage * this.pageSize >= 0) {
195
- this.changePage(prevPage);
196
- }
197
- }
198
- }
199
-
200
- /**
201
- * @hidden
202
- */
203
- class PagerElementComponent {
204
- constructor(localization, pagerContext, cd) {
205
- this.localization = localization;
206
- this.pagerContext = pagerContext;
207
- this.cd = cd;
208
- this.total = this.pagerContext.total;
209
- this.skip = this.pagerContext.skip;
210
- this.pageSize = this.pagerContext.pageSize;
211
- this.caretAltLeftIcon = caretAltLeftIcon;
212
- this.caretAltToLeftIcon = caretAltToLeftIcon;
213
- this.caretAltRightIcon = caretAltRightIcon;
214
- this.caretAltToRightIcon = caretAltToRightIcon;
215
- }
216
- /**
217
- * @hidden
218
- *
219
- * @readonly
220
- * @type {number}
221
- * @memberOf PagerElementComponent
222
- */
223
- get currentPage() {
224
- return Math.floor((this.skip || 0) / this.pageSize) + 1;
225
- }
226
- /**
227
- * @hidden
228
- *
229
- * @readonly
230
- * @type {number}
231
- * @memberOf PagerElementComponent
232
- */
233
- get totalPages() {
234
- return Math.ceil((this.total || 0) / this.pageSize);
235
- }
236
- /**
237
- * @hidden
238
- *
239
- * @param {string} key
240
- * @returns {string}
241
- *
242
- * @memberOf PagerElementComponent
243
- */
244
- textFor(key) {
245
- return this.localization.get(key);
246
- }
247
- /**
248
- * @hidden
249
- *
250
- * @param {number} page
251
- *
252
- * @memberOf PagerElementComponent
253
- */
254
- changePage(page) {
255
- this.pagerContext.changePage(page);
256
- return false;
257
- }
258
- /**
259
- * @hidden
260
- *
261
- * @memberOf PagerElementComponent
262
- */
263
- ngOnInit() {
264
- this.subscriptions = this.pagerContext.changes.subscribe(this.onChanges.bind(this));
265
- this.subscriptions.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
266
- }
267
- ngOnDestroy() {
268
- if (this.subscriptions) {
269
- this.subscriptions.unsubscribe();
270
- }
271
- }
272
- get prevArrowIcons() {
273
- return !this.localization.rtl ? ['caret-alt-to-left', 'caret-alt-left'] : ['caret-alt-to-right', 'caret-alt-right'];
274
- }
275
- get prevArrowSVGIcons() {
276
- return !this.localization.rtl ? [this.caretAltToLeftIcon, this.caretAltLeftIcon] : [this.caretAltToRightIcon, this.caretAltRightIcon];
277
- }
278
- get nextArrowIcons() {
279
- return !this.localization.rtl ? ['caret-alt-right', 'caret-alt-to-right'] : ['caret-alt-left', 'caret-alt-to-left'];
280
- }
281
- get nextArrowSVGIcons() {
282
- return !this.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
283
- }
284
- }
285
- PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
286
- PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
287
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerElementComponent, decorators: [{
288
- type: Component,
289
- args: [{
290
- selector: 'kendo-pager-element',
291
- template: ``
292
- }]
293
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
294
-
295
- /**
296
- * @hidden
297
- */
298
- const DEFAULT_PAGE_SIZE_VALUES = [5, 10, 20];
299
- /**
300
- * @hidden
301
- */
302
- const focusableDirectiveSelector = '[kendoPagerFocusable]';
303
- /**
304
- * @hidden
305
- */
306
- const getAllFocusableChildren = (parent) => {
307
- return parent.querySelectorAll(focusableDirectiveSelector);
308
- };
309
- /**
310
- * @hidden
311
- */
312
- const focusableSelector = [
313
- 'a[href]:not([disabled])',
314
- 'area[href]:not([disabled])',
315
- 'input:not([disabled])',
316
- 'select:not([disabled])',
317
- 'textarea:not([disabled])',
318
- 'button',
319
- 'iframe:not([disabled])',
320
- 'object:not([disabled])',
321
- 'embed:not([disabled])',
322
- '*[tabindex]:not([disabled])',
323
- '*[contenteditable]:not([disabled]):not([contenteditable="false"])'
324
- ].join(',');
325
- /**
326
- * @hidden
327
- */
328
- const DEFAULT_SIZE = 'medium';
329
- const SIZES = {
330
- small: 'sm',
331
- medium: 'md',
332
- large: 'lg'
333
- };
334
- /**
335
- * @hidden
336
- *
337
- * Returns the styling classes to be added and removed
338
- */
339
- const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
340
- switch (stylingOption) {
341
- case 'size':
342
- return {
343
- toRemove: `k-${componentType}-${SIZES[previousValue]}`,
344
- toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
345
- };
346
- default:
347
- break;
348
- }
349
- };
350
-
351
- /**
352
- * @hidden
353
- */
354
- class PagerNavigationService {
355
- constructor() {
356
- this.isNavigable = false;
357
- this.innerNavigationChange = new Subject();
358
- }
359
- toggleInnerNavigation(value) {
360
- this.innerNavigationChange.next(value);
361
- }
362
- keepFocusWithinComponent(wrapper, target, event) {
363
- const [firstFocusable, lastFocusable] = this.getFirstAndLastFocusable(wrapper);
364
- const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
365
- const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
366
- if (tabAfterLastFocusable) {
367
- event.preventDefault();
368
- firstFocusable.focus();
369
- }
370
- if (shiftTabAfterFirstFocusable) {
371
- event.preventDefault();
372
- lastFocusable.focus();
373
- }
374
- }
375
- getFirstAndLastFocusable(wrapper) {
376
- const all = getAllFocusableChildren(wrapper);
377
- const firstFocusable = all.length > 0 ? all[0] : parent;
378
- const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
379
- return [firstFocusable, lastFocusable];
380
- }
381
- }
382
-
383
- /**
384
- * Place the directive on custom focusable elements in the [`kendoDataPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
385
- */
386
- class PagerFocusableDirective {
387
- constructor(navigationService, element, renderer) {
388
- this.navigationService = navigationService;
389
- this.element = element;
390
- this.renderer = renderer;
391
- this.subscriptions = new Subscription();
392
- }
393
- ngOnInit() {
394
- this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
395
- }
396
- ngOnDestroy() {
397
- this.subscriptions.unsubscribe();
398
- }
399
- get nativeElement() {
400
- return this.element.nativeElement;
401
- }
402
- innerNavigationChange(value) {
403
- if (!this.navigationService.isNavigable) {
404
- return;
405
- }
406
- const index = value ? '0' : '-1';
407
- if (this.nativeElement.matches(focusableSelector)) {
408
- this.renderer.setAttribute(this.nativeElement, 'tabindex', index);
409
- }
410
- const focusableElements = this.nativeElement.querySelectorAll(focusableSelector);
411
- focusableElements.forEach(el => {
412
- this.renderer.setAttribute(el, 'tabindex', index);
413
- });
414
- }
415
- }
416
- PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
417
- PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerFocusableDirective, isStandalone: true, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerFocusableDirective, decorators: [{
419
- type: Directive,
420
- args: [{
421
- selector: '[kendoPagerFocusable]',
422
- exportAs: 'kendoPagerFocusable',
423
- standalone: true
424
- }]
425
- }], ctorParameters: function () { return [{ type: PagerNavigationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
426
-
427
- // eslint-disable no-access-missing-member
428
- /**
429
- * Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
430
- */
431
- class PagerPrevButtonsComponent extends PagerElementComponent {
432
- constructor(localization, pagerContext, cd) {
433
- super(localization, pagerContext, cd);
434
- /**
435
- * Specifies the padding of the buttons.
436
- *
437
- * The possible values are:
438
- * * `small`
439
- * * `medium` (default)
440
- * * `large`
441
- * * `none`
442
- */
443
- this.size = DEFAULT_SIZE;
444
- }
445
- /**
446
- * @hidden
447
- *
448
- * @readonly
449
- * @type {boolean}
450
- * @memberOf PagerPrevButtonsComponent
451
- */
452
- get disabled() {
453
- return this.currentPage === 1 || !this.total;
454
- }
455
- onChanges({ total, skip, pageSize }) {
456
- this.total = total;
457
- this.skip = skip;
458
- this.pageSize = pageSize;
459
- this.cd.markForCheck();
460
- }
461
- }
462
- PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
463
- PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerPrevButtonsComponent, isStandalone: true, selector: "kendo-datapager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
464
- <button
465
- type="button" kendoButton kendoPagerFocusable
466
- class="k-pager-nav k-pager-first"
467
- [disabled]="disabled"
468
- [icon]="prevArrowIcons[0]"
469
- [svgIcon]="prevArrowSVGIcons[0]"
470
- fillMode="flat"
471
- rounded="none"
472
- [size]="size"
473
- [title]="textFor('firstPage')"
474
- [attr.aria-label]="textFor('firstPage')"
475
- (click)="currentPage !== 1 ? changePage(0) : false">
476
- </button>
477
- <button
478
- type="button" kendoButton kendoPagerFocusable
479
- class="k-pager-nav"
480
- [disabled]="disabled"
481
- [icon]="prevArrowIcons[1]"
482
- [svgIcon]="prevArrowSVGIcons[1]"
483
- fillMode="flat"
484
- rounded="none"
485
- [size]="size"
486
- [title]="textFor('previousPage')"
487
- [attr.aria-label]="textFor('previousPage')"
488
- (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
489
- </button>
490
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
491
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
492
- type: Component,
493
- args: [{
494
- changeDetection: ChangeDetectionStrategy.OnPush,
495
- selector: 'kendo-datapager-prev-buttons',
496
- template: `
497
- <button
498
- type="button" kendoButton kendoPagerFocusable
499
- class="k-pager-nav k-pager-first"
500
- [disabled]="disabled"
501
- [icon]="prevArrowIcons[0]"
502
- [svgIcon]="prevArrowSVGIcons[0]"
503
- fillMode="flat"
504
- rounded="none"
505
- [size]="size"
506
- [title]="textFor('firstPage')"
507
- [attr.aria-label]="textFor('firstPage')"
508
- (click)="currentPage !== 1 ? changePage(0) : false">
509
- </button>
510
- <button
511
- type="button" kendoButton kendoPagerFocusable
512
- class="k-pager-nav"
513
- [disabled]="disabled"
514
- [icon]="prevArrowIcons[1]"
515
- [svgIcon]="prevArrowSVGIcons[1]"
516
- fillMode="flat"
517
- rounded="none"
518
- [size]="size"
519
- [title]="textFor('previousPage')"
520
- [attr.aria-label]="textFor('previousPage')"
521
- (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
522
- </button>
523
- `,
524
- standalone: true,
525
- imports: [ButtonComponent, PagerFocusableDirective]
526
- }]
527
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
528
- type: Input
529
- }] } });
530
-
531
- /**
532
- * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
533
- */
534
- class PagerPageSizesComponent extends PagerElementComponent {
535
- constructor(localization, cd, pagerContext, element, ngZone) {
536
- super(localization, pagerContext, cd);
537
- this.pagerContext = pagerContext;
538
- this.element = element;
539
- this.ngZone = ngZone;
540
- /**
541
- * Specifies the padding of the dropdown.
542
- *
543
- * The possible values are:
544
- * * `small`
545
- * * `medium` (default)
546
- * * `large`
547
- * * `none`
548
- */
549
- this.size = DEFAULT_SIZE;
550
- this._pageSizes = [];
551
- }
552
- /**
553
- * The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
554
- *
555
- * @example
556
- *
557
- * ```ts-preview
558
- * _@Component({
559
- * selector: 'my-app',
560
- * template: `
561
- * <div *ngFor="let item of pagedData" style="border: 1px solid black; padding: 10px;">
562
- * <span>{{item.ProductID}}. </span>
563
- * <span>{{item.ProductName}}</span>
564
- * </div>
565
- * <kendo-datapager
566
- * [skip]="skip"
567
- * [pageSize]="pageSize"
568
- * [total]="total"
569
- * (pageChange)="onPageChange($event)">
570
- * <ng-template kendoDataPagerTemplate>
571
- * <kendo-datapager-page-sizes [pageSizes]="pagesizes"></kendo-datapager-page-sizes>
572
- * </ng-template>
573
- * </kendo-datapager>
574
- * `
575
- * })
576
- * class AppComponent {
577
- * public data: any[] = products;
578
- * public pagedData = [];
579
- * public skip = 0;
580
- * public pageSize = 2;
581
- * public total = products.length;
582
- * public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
583
- *
584
- * public ngOnInit() {
585
- * this.pageData();
586
- * }
587
- *
588
- * public onPageChange(e) {
589
- * this.skip = e.skip;
590
- * this.pageSize = e.take;
591
- * this.pageData();
592
- * }
593
- *
594
- * private pageData() {
595
- * this.pagedData = this.data.slice(this.skip, this.skip + this.pageSize);
596
- * }
597
- * }
598
- *
599
- * const products = [{
600
- * 'ProductID' : 1,
601
- * 'ProductName' : "Chai",
602
- * 'SupplierID' : 1,
603
- * 'CategoryID' : 1,
604
- * 'QuantityPerUnit' : "10 boxes x 20 bags",
605
- * 'UnitPrice' : 18.0000,
606
- * 'UnitsInStock' : 39,
607
- * 'UnitsOnOrder' : 0,
608
- * 'ReorderLevel' : 10,
609
- * 'Discontinued' : false
610
- *
611
- * }, {
612
- * 'ProductID' : 2,
613
- * 'ProductName' : "Chang",
614
- * 'SupplierID' : 1,
615
- * 'CategoryID' : 1,
616
- * 'QuantityPerUnit' : "24 - 12 oz bottles",
617
- * 'UnitPrice' : 19.0000,
618
- * 'UnitsInStock' : 17,
619
- * 'UnitsOnOrder' : 40,
620
- * 'ReorderLevel' : 25,
621
- * 'Discontinued' : false
622
- * }, {
623
- * 'ProductID' : 3,
624
- * 'ProductName' : "Aniseed Syrup",
625
- * 'SupplierID' : 1,
626
- * 'CategoryID' : 2,
627
- * 'QuantityPerUnit' : "12 - 550 ml bottles",
628
- * 'UnitPrice' : 10.0000,
629
- * 'UnitsInStock' : 13,
630
- * 'UnitsOnOrder' : 70,
631
- * 'ReorderLevel' : 25,
632
- * 'Discontinued' : false
633
- * }, {
634
- * 'ProductID' : 4,
635
- * 'ProductName' : "Chef Anton\'s Cajun Seasoning",
636
- * 'SupplierID' : 2,
637
- * 'CategoryID' : 2,
638
- * 'QuantityPerUnit' : "48 - 6 oz jars",
639
- * 'UnitPrice' : 22.0000,
640
- * 'UnitsInStock' : 53,
641
- * 'UnitsOnOrder' : 0,
642
- * 'ReorderLevel' : 0,
643
- * 'Discontinued' : false
644
- * }, {
645
- * 'ProductID' : 5,
646
- * 'ProductName' : "Chef Anton\'s Gumbo Mix",
647
- * 'SupplierID' : 2,
648
- * 'CategoryID' : 2,
649
- * 'QuantityPerUnit' : "36 boxes",
650
- * 'UnitPrice' : 21.3500,
651
- * 'UnitsInStock' : 0,
652
- * 'UnitsOnOrder' : 0,
653
- * 'ReorderLevel' : 0,
654
- * 'Discontinued' : true
655
- * }, {
656
- * 'ProductID' : 6,
657
- * 'ProductName' : "Grandma\'s Boysenberry Spread",
658
- * 'SupplierID' : 3,
659
- * 'CategoryID' : 2,
660
- * 'QuantityPerUnit' : "12 - 8 oz jars",
661
- * 'UnitPrice' : 25.0000,
662
- * 'UnitsInStock' : 120,
663
- * 'UnitsOnOrder' : 0,
664
- * 'ReorderLevel' : 25,
665
- * 'Discontinued' : false
666
- * }];
667
- * ```
668
- *
669
- */
670
- set pageSizes(pageSizes) {
671
- let normalizedItems = [];
672
- if (Array.isArray(pageSizes)) {
673
- pageSizes.forEach(item => {
674
- if (typeof item === 'number') {
675
- normalizedItems.push({
676
- text: item.toString(),
677
- value: item
678
- });
679
- }
680
- else {
681
- normalizedItems.push(item);
682
- }
683
- });
684
- }
685
- if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
686
- normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
687
- }
688
- this._pageSizes = normalizedItems;
689
- }
690
- get pageSizes() {
691
- return this._pageSizes;
692
- }
693
- /**
694
- * @hidden
695
- *
696
- * @readonly
697
- */
698
- get classes() {
699
- return true;
700
- }
701
- ngAfterViewInit() {
702
- this.ngZone.runOutsideAngular(() => {
703
- this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
704
- });
705
- }
706
- ngOnDestroy() {
707
- this.element.nativeElement.removeEventListener('keydown', this.keyDownHandler);
708
- }
709
- /**
710
- * @hidden
711
- */
712
- pageSizeChange(value, dropdownlist) {
713
- const event = new PageSizeChangeEvent(value);
714
- this.pagerContext.changePageSize(event);
715
- if (event.isDefaultPrevented()) {
716
- dropdownlist.writeValue(this.pageSize);
717
- }
718
- }
719
- onChanges({ total, skip, pageSize }) {
720
- this.total = total;
721
- this.skip = skip;
722
- this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
723
- this.cd.markForCheck();
724
- }
725
- keyDownHandler(ev) {
726
- if (ev.keyCode === Keys.Escape && this.dropDownList.isOpen) {
727
- ev.stopPropagation();
728
- this.dropDownList.toggle(false);
729
- }
730
- }
731
- }
732
- PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
733
- PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes", size: "size" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
734
- <kendo-dropdownlist kendoPagerFocusable
735
- #dropdownlist
736
- [size]="size"
737
- [data]="pageSizes"
738
- textField="text"
739
- valueField="value"
740
- [valuePrimitive]="true"
741
- [value]="pageSize"
742
- (valueChange)="pageSizeChange($event, dropdownlist)"
743
- [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
744
- {{ textFor('itemsPerPage') }}
745
- `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
746
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
747
- type: Component,
748
- args: [{
749
- changeDetection: ChangeDetectionStrategy.OnPush,
750
- selector: 'kendo-datapager-page-sizes',
751
- template: `
752
- <kendo-dropdownlist kendoPagerFocusable
753
- #dropdownlist
754
- [size]="size"
755
- [data]="pageSizes"
756
- textField="text"
757
- valueField="value"
758
- [valuePrimitive]="true"
759
- [value]="pageSize"
760
- (valueChange)="pageSizeChange($event, dropdownlist)"
761
- [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
762
- {{ textFor('itemsPerPage') }}
763
- `,
764
- standalone: true,
765
- imports: [DropDownListComponent, PagerFocusableDirective]
766
- }]
767
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { dropDownList: [{
768
- type: ViewChild,
769
- args: ['dropdownlist', { static: true }]
770
- }], pageSizes: [{
771
- type: Input
772
- }], size: [{
773
- type: Input
774
- }], classes: [{
775
- type: HostBinding,
776
- args: ["class.k-pager-sizes"]
777
- }] } });
778
-
779
- /**
780
- * Represents the pager template which helps to customize the pager appearance. To define a pager
781
- * template, nest an `<ng-template>` tag with the `kendoDataPagerTemplate` directive inside `<kendo-datapager>`.
782
- *
783
- * The template context provides the following fields:
784
- * * `currentPage`&mdash;The index of the displayed page.
785
- * * `pageSize`&mdash;The value of the current `pageSize`.
786
- * * `skip`&mdash;The current skip value.
787
- * * `total`&mdash;The total number of records.
788
- * * `totalPages`&mdash;The total number of available pages.
789
- *
790
- * @example
791
- * ```ts-preview
792
- *
793
- * _@Component({
794
- * selector: 'my-app',
795
- * template: `
796
- * <kendo-datapager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
797
- * <ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
798
- * <kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
799
- * <kendo-datapager-numeric-buttons [buttonCount]="10"></kendo-datapager-numeric-buttons>
800
- * <kendo-datapager-next-buttons></kendo-datapager-next-buttons>
801
- * <kendo-datapager-info></kendo-datapager-info>
802
- * Current page: {{currentPage}}
803
- * </ng-template>
804
- * </kendo-datapager>
805
- * `
806
- * })
807
- *
808
- * class AppComponent {
809
- * public skip = 0;
810
- * public pageSize = 10;
811
- * public total = 100;
812
- *
813
- * public onPageChange(e: any): void {
814
- * this.skip = e.skip;
815
- * this.pageSize = e.take;
816
- * }
817
- * }
818
- *
819
- * ```
820
- */
821
- class PagerTemplateDirective {
822
- constructor(templateRef) {
823
- this.templateRef = templateRef;
824
- }
825
- }
826
- PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
827
- PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
828
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerTemplateDirective, decorators: [{
829
- type: Directive,
830
- args: [{
831
- selector: '[kendoDataPagerTemplate]',
832
- standalone: true
833
- }]
834
- }], ctorParameters: function () {
835
- return [{ type: i0.TemplateRef, decorators: [{
836
- type: Optional
837
- }] }];
838
- } });
839
-
840
- /**
841
- * Displays numeric buttons to enable navigation between the pages.
842
- */
843
- class PagerNumericButtonsComponent extends PagerElementComponent {
844
- constructor(localization, cd, pagerContext, renderer) {
845
- super(localization, pagerContext, cd);
846
- this.pagerContext = pagerContext;
847
- this.renderer = renderer;
848
- this._size = DEFAULT_SIZE;
849
- }
850
- /**
851
- * Specifies the padding of the numeric buttons.
852
- *
853
- * The possible values are:
854
- * * `small`
855
- * * `medium` (default)
856
- * * `large`
857
- * * `none`
858
- */
859
- set size(size) {
860
- const newSize = size ? size : DEFAULT_SIZE;
861
- this.handleClasses(newSize, 'size');
862
- this._size = newSize;
863
- }
864
- get size() {
865
- return this._size;
866
- }
867
- /**
868
- * @hidden
869
- *
870
- * @readonly
871
- * @type {number[]}
872
- * @memberOf PagerNumericButtonsComponent
873
- */
874
- get buttons() {
875
- const result = [];
876
- for (let idx = this.start; idx <= this.end; idx++) {
877
- result.push(idx);
878
- }
879
- return result;
880
- }
881
- /**
882
- * @hidden
883
- */
884
- get end() {
885
- return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
886
- }
887
- /**
888
- * @hidden
889
- */
890
- get start() {
891
- const page = this.currentPage;
892
- const buttonCount = this.buttonCount;
893
- if (page > buttonCount) {
894
- const reminder = (page % buttonCount);
895
- return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
896
- }
897
- return 1;
898
- }
899
- ngAfterViewInit() {
900
- this.handleClasses(this.size, 'size');
901
- }
902
- /**
903
- * @hidden
904
- */
905
- pageLabel(num) {
906
- const pageText = this.textFor('page');
907
- if (pageText) {
908
- return pageText + ' ' + num;
909
- }
910
- return num.toString();
911
- }
912
- /**
913
- * @hidden
914
- */
915
- onSelectChange(e) {
916
- const target = e.target;
917
- const valueAsNumber = Number(target.value);
918
- if (!Number.isNaN(valueAsNumber)) {
919
- this.changePage(valueAsNumber - 1);
920
- }
921
- else {
922
- if (target.value === 'previousButtons') {
923
- this.changePage(this.start - 2);
924
- }
925
- else {
926
- this.changePage(this.end);
927
- }
928
- }
929
- }
930
- onChanges({ total, skip, pageSize }) {
931
- this.total = total;
932
- this.skip = skip;
933
- this.pageSize = pageSize;
934
- this.cd.markForCheck();
935
- }
936
- get pageChooserLabel() {
937
- return this.textFor('selectPage');
938
- }
939
- handleClasses(value, input) {
940
- var _a;
941
- const elem = (_a = this.selectElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
942
- const classes = getStylingClasses('picker', input, this[input], value);
943
- if (!elem) {
944
- return;
945
- }
946
- if (classes.toRemove) {
947
- this.renderer.removeClass(elem, classes.toRemove);
948
- }
949
- if (classes.toAdd) {
950
- this.renderer.addClass(elem, classes.toAdd);
951
- }
952
- }
953
- }
954
- PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
955
- PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
956
- <select kendoPagerFocusable #select
957
- class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
958
- [style.display]="'none'"
959
- [attr.title]="pageChooserLabel"
960
- [attr.aria-label]="pageChooserLabel"
961
- (change)="onSelectChange($event)">
962
- <option *ngIf="start > 1"
963
- value="previousButtons"
964
- [selected]="false"
965
- [attr.aria-label]="pageLabel(start - 1)">...
966
- </option>
967
- <option *ngFor="let num of buttons"
968
- [value]="num.toString()"
969
- [selected]="num === currentPage"
970
- [attr.aria-label]="pageLabel(num)"
971
- [attr.aria-current]="currentPage === num ? 'page' : undefined"
972
- [ngClass]="{'k-selected':currentPage === num}">
973
- {{num}}
974
- </option>
975
- <option *ngIf="end < totalPages"
976
- value="nextButtons"
977
- [selected]="false"
978
- [attr.aria-label]="pageLabel(end + 1)">...
979
- </option>
980
- </select>
981
- <div class="k-pager-numbers" #numbers>
982
- <button *ngIf="start > 1"
983
- type="button"
984
- kendoPagerFocusable
985
- kendoButton
986
- [size]="size"
987
- fillMode="flat"
988
- themeColor="primary"
989
- rounded="none"
990
- [attr.aria-label]="pageLabel(start - 1)"
991
- [attr.title]="pageLabel(start - 1)"
992
- (click)="changePage(start - 2)">...</button>
993
- <button *ngFor="let num of buttons"
994
- type="button"
995
- kendoPagerFocusable
996
- kendoButton
997
- [size]="size"
998
- fillMode="flat"
999
- themeColor="primary"
1000
- rounded="none"
1001
- [attr.aria-label]="pageLabel(num)"
1002
- [attr.title]="pageLabel(num)"
1003
- [attr.aria-current]="currentPage === num ? 'page' : undefined"
1004
- [selected]="currentPage === num"
1005
- (click)="changePage(num - 1)">
1006
- {{num}}
1007
- </button>
1008
- <button *ngIf="end < totalPages"
1009
- type="button"
1010
- kendoPagerFocusable
1011
- kendoButton
1012
- [size]="size"
1013
- fillMode="flat"
1014
- themeColor="primary"
1015
- rounded="none"
1016
- [attr.aria-label]="pageLabel(end + 1)"
1017
- [attr.title]="pageLabel(end + 1)"
1018
- (click)="changePage(end)">...</button>
1019
- </div>
1020
- `, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1021
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
1022
- type: Component,
1023
- args: [{
1024
- changeDetection: ChangeDetectionStrategy.OnPush,
1025
- selector: 'kendo-datapager-numeric-buttons',
1026
- template: `
1027
- <select kendoPagerFocusable #select
1028
- class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
1029
- [style.display]="'none'"
1030
- [attr.title]="pageChooserLabel"
1031
- [attr.aria-label]="pageChooserLabel"
1032
- (change)="onSelectChange($event)">
1033
- <option *ngIf="start > 1"
1034
- value="previousButtons"
1035
- [selected]="false"
1036
- [attr.aria-label]="pageLabel(start - 1)">...
1037
- </option>
1038
- <option *ngFor="let num of buttons"
1039
- [value]="num.toString()"
1040
- [selected]="num === currentPage"
1041
- [attr.aria-label]="pageLabel(num)"
1042
- [attr.aria-current]="currentPage === num ? 'page' : undefined"
1043
- [ngClass]="{'k-selected':currentPage === num}">
1044
- {{num}}
1045
- </option>
1046
- <option *ngIf="end < totalPages"
1047
- value="nextButtons"
1048
- [selected]="false"
1049
- [attr.aria-label]="pageLabel(end + 1)">...
1050
- </option>
1051
- </select>
1052
- <div class="k-pager-numbers" #numbers>
1053
- <button *ngIf="start > 1"
1054
- type="button"
1055
- kendoPagerFocusable
1056
- kendoButton
1057
- [size]="size"
1058
- fillMode="flat"
1059
- themeColor="primary"
1060
- rounded="none"
1061
- [attr.aria-label]="pageLabel(start - 1)"
1062
- [attr.title]="pageLabel(start - 1)"
1063
- (click)="changePage(start - 2)">...</button>
1064
- <button *ngFor="let num of buttons"
1065
- type="button"
1066
- kendoPagerFocusable
1067
- kendoButton
1068
- [size]="size"
1069
- fillMode="flat"
1070
- themeColor="primary"
1071
- rounded="none"
1072
- [attr.aria-label]="pageLabel(num)"
1073
- [attr.title]="pageLabel(num)"
1074
- [attr.aria-current]="currentPage === num ? 'page' : undefined"
1075
- [selected]="currentPage === num"
1076
- (click)="changePage(num - 1)">
1077
- {{num}}
1078
- </button>
1079
- <button *ngIf="end < totalPages"
1080
- type="button"
1081
- kendoPagerFocusable
1082
- kendoButton
1083
- [size]="size"
1084
- fillMode="flat"
1085
- themeColor="primary"
1086
- rounded="none"
1087
- [attr.aria-label]="pageLabel(end + 1)"
1088
- [attr.title]="pageLabel(end + 1)"
1089
- (click)="changePage(end)">...</button>
1090
- </div>
1091
- `,
1092
- standalone: true,
1093
- imports: [PagerFocusableDirective, NgIf, NgFor, NgClass, ButtonComponent]
1094
- }]
1095
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
1096
- type: ViewChild,
1097
- args: ['select', { read: ElementRef }]
1098
- }], numbersElement: [{
1099
- type: ViewChild,
1100
- args: ['numbers', { read: ElementRef }]
1101
- }], buttonCount: [{
1102
- type: Input
1103
- }], size: [{
1104
- type: Input
1105
- }] } });
1106
-
1107
- // eslint-disable no-access-missing-member
1108
- /**
1109
- * Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
1110
- */
1111
- class PagerNextButtonsComponent extends PagerElementComponent {
1112
- constructor(localization, pagerContext, cd) {
1113
- super(localization, pagerContext, cd);
1114
- /**
1115
- * Specifies the padding of the buttons.
1116
- *
1117
- * The possible values are:
1118
- * * `small`
1119
- * * `medium` (default)
1120
- * * `large`
1121
- * * `none`
1122
- */
1123
- this.size = DEFAULT_SIZE;
1124
- }
1125
- /**
1126
- * @hidden
1127
- *
1128
- * @readonly
1129
- * @type {boolean}
1130
- * @memberOf PagerNextButtonsComponent
1131
- */
1132
- get disabled() {
1133
- return this.currentPage === this.totalPages || !this.total;
1134
- }
1135
- onChanges({ total, skip, pageSize }) {
1136
- this.total = total;
1137
- this.skip = skip;
1138
- this.pageSize = pageSize;
1139
- this.cd.markForCheck();
1140
- }
1141
- }
1142
- PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1143
- PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
1144
- <button kendoButton kendoPagerFocusable
1145
- type="button"
1146
- [size]="size"
1147
- [icon]="nextArrowIcons[0]"
1148
- [svgIcon]="nextArrowSVGIcons[0]"
1149
- fillMode="flat"
1150
- rounded="none"
1151
- class="k-pager-nav"
1152
- [disabled]="disabled"
1153
- [title]="textFor('nextPage')"
1154
- [attr.aria-label]="textFor('nextPage')"
1155
- (click)="currentPage !== totalPages ? changePage(currentPage) : false">
1156
- </button>
1157
- <button kendoButton kendoPagerFocusable
1158
- type="button"
1159
- [size]="size"
1160
- [icon]="nextArrowIcons[1]"
1161
- [svgIcon]="nextArrowSVGIcons[1]"
1162
- fillMode="flat"
1163
- rounded="none"
1164
- class="k-pager-nav k-pager-last"
1165
- [disabled]="disabled"
1166
- [title]="textFor('lastPage')"
1167
- [attr.aria-label]="textFor('lastPage')"
1168
- (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
1169
- </button>
1170
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1171
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
1172
- type: Component,
1173
- args: [{
1174
- changeDetection: ChangeDetectionStrategy.OnPush,
1175
- selector: 'kendo-datapager-next-buttons',
1176
- template: `
1177
- <button kendoButton kendoPagerFocusable
1178
- type="button"
1179
- [size]="size"
1180
- [icon]="nextArrowIcons[0]"
1181
- [svgIcon]="nextArrowSVGIcons[0]"
1182
- fillMode="flat"
1183
- rounded="none"
1184
- class="k-pager-nav"
1185
- [disabled]="disabled"
1186
- [title]="textFor('nextPage')"
1187
- [attr.aria-label]="textFor('nextPage')"
1188
- (click)="currentPage !== totalPages ? changePage(currentPage) : false">
1189
- </button>
1190
- <button kendoButton kendoPagerFocusable
1191
- type="button"
1192
- [size]="size"
1193
- [icon]="nextArrowIcons[1]"
1194
- [svgIcon]="nextArrowSVGIcons[1]"
1195
- fillMode="flat"
1196
- rounded="none"
1197
- class="k-pager-nav k-pager-last"
1198
- [disabled]="disabled"
1199
- [title]="textFor('lastPage')"
1200
- [attr.aria-label]="textFor('lastPage')"
1201
- (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
1202
- </button>
1203
- `,
1204
- standalone: true,
1205
- imports: [ButtonComponent, PagerFocusableDirective]
1206
- }]
1207
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
1208
- type: Input
1209
- }] } });
1210
-
1211
- /**
1212
- * Displays an input element which allows the typing and rendering of page numbers.
1213
- */
1214
- class PagerInputComponent extends PagerElementComponent {
1215
- constructor(localization, pagerContext, zone, cd, renderer) {
1216
- super(localization, pagerContext, cd);
1217
- this.pagerContext = pagerContext;
1218
- this.zone = zone;
1219
- this.renderer = renderer;
1220
- /**
1221
- * Specifies the padding of the internal numeric input element.
1222
- *
1223
- * The possible values are:
1224
- * * `small`
1225
- * * `medium` (default)
1226
- * * `large`
1227
- * * `none`
1228
- */
1229
- this.size = DEFAULT_SIZE;
1230
- /**
1231
- * @hidden
1232
- *
1233
- * @param {string} value
1234
- *
1235
- * @memberOf PagerInputComponent
1236
- */
1237
- this.handleKeyDown = (event) => {
1238
- const incomingValue = this.numericInput.value || this.current;
1239
- // eslint-disable import/no-deprecated
1240
- if (event.keyCode === Keys.Enter) {
1241
- event.preventDefault();
1242
- if (incomingValue !== this.current) {
1243
- this.zone.run(() => {
1244
- this.changePage(incomingValue - 1);
1245
- });
1246
- }
1247
- }
1248
- };
1249
- /**
1250
- * @hidden
1251
- *
1252
- * @param {string} value
1253
- *
1254
- * @memberOf PagerInputComponent
1255
- */
1256
- this.handleBlur = () => {
1257
- const inputValue = this.numericInput.value;
1258
- if (!inputValue) {
1259
- this.numericInput.writeValue(this.current);
1260
- return;
1261
- }
1262
- if (inputValue !== this.current) {
1263
- this.zone.run(() => {
1264
- this.changePage(inputValue - 1);
1265
- });
1266
- }
1267
- };
1268
- }
1269
- onChanges({ total, skip, pageSize }) {
1270
- this.total = total;
1271
- this.skip = skip;
1272
- this.pageSize = pageSize;
1273
- this.cd.markForCheck();
1274
- }
1275
- /**
1276
- * @hidden
1277
- */
1278
- get current() {
1279
- return this.hasPages ? this.currentPage : 0;
1280
- }
1281
- /**
1282
- * @hidden
1283
- */
1284
- get hasPages() {
1285
- return this.totalPages !== 0;
1286
- }
1287
- }
1288
- PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1289
- PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
1290
- <span class="k-pager-input">
1291
- {{textFor('page')}}
1292
- <kendo-numerictextbox kendoPagerFocusable
1293
- [spinners]="false"
1294
- [decimals]="0"
1295
- format="n0"
1296
- [size]="size"
1297
- [disabled]="!hasPages"
1298
- [value]="current"
1299
- [min]="hasPages ? 1 : 0"
1300
- [max]="totalPages"
1301
- [autoCorrect]="true"
1302
- [inputAttributes]="{
1303
- 'aria-label': textFor('inputLabel')
1304
- }"
1305
- [title]="textFor('pageNumberInputTitle')"
1306
- [kendoEventsOutsideAngular]="{
1307
- keydown: handleKeyDown,
1308
- focusout: handleBlur
1309
- }">
1310
- </kendo-numerictextbox>
1311
- {{textFor('of')}} {{totalPages}}
1312
- </span>
1313
- `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
1314
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, decorators: [{
1315
- type: Component,
1316
- args: [{
1317
- selector: 'kendo-datapager-input',
1318
- template: `
1319
- <span class="k-pager-input">
1320
- {{textFor('page')}}
1321
- <kendo-numerictextbox kendoPagerFocusable
1322
- [spinners]="false"
1323
- [decimals]="0"
1324
- format="n0"
1325
- [size]="size"
1326
- [disabled]="!hasPages"
1327
- [value]="current"
1328
- [min]="hasPages ? 1 : 0"
1329
- [max]="totalPages"
1330
- [autoCorrect]="true"
1331
- [inputAttributes]="{
1332
- 'aria-label': textFor('inputLabel')
1333
- }"
1334
- [title]="textFor('pageNumberInputTitle')"
1335
- [kendoEventsOutsideAngular]="{
1336
- keydown: handleKeyDown,
1337
- focusout: handleBlur
1338
- }">
1339
- </kendo-numerictextbox>
1340
- {{textFor('of')}} {{totalPages}}
1341
- </span>
1342
- `,
1343
- standalone: true,
1344
- imports: [NgClass, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
1345
- }]
1346
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
1347
- type: ViewChild,
1348
- args: [NumericTextBoxComponent, { static: true }]
1349
- }], size: [{
1350
- type: Input
1351
- }] } });
1352
-
1353
- // eslint-disable no-access-missing-member
1354
- /**
1355
- * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
1356
- */
1357
- class PagerInfoComponent extends PagerElementComponent {
1358
- constructor(localization, cd, pagerContext) {
1359
- super(localization, pagerContext, cd);
1360
- this.pagerContext = pagerContext;
1361
- }
1362
- /**
1363
- * @hidden
1364
- *
1365
- * @readonly
1366
- * @type {number}
1367
- * @memberOf PagerInfoComponent
1368
- */
1369
- get maxItems() {
1370
- return Math.min(this.currentPage * this.pageSize, this.total);
1371
- }
1372
- /**
1373
- * @hidden
1374
- *
1375
- * @readonly
1376
- * @type {number}
1377
- * @memberOf PagerInfoComponent
1378
- */
1379
- get currentPageText() {
1380
- return this.total ?
1381
- (this.currentPage - 1) * this.pageSize + 1 :
1382
- 0;
1383
- }
1384
- /**
1385
- * @hidden
1386
- *
1387
- * @readonly
1388
- * @type {boolean}
1389
- * @memberOf PagerInfoComponent
1390
- */
1391
- get classes() {
1392
- return true;
1393
- }
1394
- onChanges({ total, skip, pageSize }) {
1395
- this.total = total;
1396
- this.skip = skip;
1397
- this.pageSize = pageSize;
1398
- this.cd.markForCheck();
1399
- }
1400
- }
1401
- PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
1402
- PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, decorators: [{
1404
- type: Component,
1405
- args: [{
1406
- changeDetection: ChangeDetectionStrategy.OnPush,
1407
- selector: 'kendo-datapager-info',
1408
- template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`,
1409
- standalone: true
1410
- }]
1411
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
1412
- type: HostBinding,
1413
- args: ["class.k-pager-info"]
1414
- }] } });
1415
-
1416
- /**
1417
- * @hidden
1418
- */
1419
- const packageMetadata = {
1420
- name: '@progress/kendo-angular-pager',
1421
- productName: 'Kendo UI for Angular',
1422
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
1423
- publishDate: 1729174545,
1424
- version: '17.0.0-develop.9',
1425
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
1426
- };
1427
-
1428
- /**
1429
- * @hidden
1430
- */
1431
- const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
1432
- /**
1433
- * @hidden
1434
- */
1435
- const RESPONSIVE_BREAKPOINT_LARGE = 768;
1436
-
1437
- class PagerComponent {
1438
- constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
1439
- this.pagerContext = pagerContext;
1440
- this.element = element;
1441
- this.localization = localization;
1442
- this.renderer = renderer;
1443
- this.ngZone = ngZone;
1444
- this.navigationService = navigationService;
1445
- /**
1446
- * Represents the total number of data items in the collection.
1447
- */
1448
- this.total = 0;
1449
- /**
1450
- * Defines the number of data items to be skipped.
1451
- */
1452
- this.skip = 0;
1453
- /**
1454
- * Sets the maximum numeric buttons count before the buttons are collapsed.
1455
- */
1456
- this.buttonCount = 10;
1457
- /**
1458
- * Toggles the information about the current page and the total number of records.
1459
- */
1460
- this.info = true;
1461
- /**
1462
- * Defines the type of the pager.
1463
- */
1464
- this.type = 'numeric';
1465
- /**
1466
- * Toggles the **Previous** and **Next** buttons.
1467
- */
1468
- this.previousNext = true;
1469
- /**
1470
- * Fires when the current page of the Pager is changed ([see example](slug:overview_pager)).
1471
- * You have to handle the event yourself and page the data.
1472
- */
1473
- this.pageChange = new EventEmitter();
1474
- /**
1475
- * Fires when the page size of the Pager is changed.
1476
- * You have to handle the event yourself and page the data.
1477
- * If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
1478
- */
1479
- this.pageSizeChange = new EventEmitter();
1480
- this.pagerClass = true;
1481
- this.widgetRole = 'application';
1482
- this.roleDescription = 'pager';
1483
- this.keyShortcuts = 'Enter ArrowRight ArrowLeft';
1484
- this.hostTabindex = '0';
1485
- this.subscriptions = new Subscription();
1486
- this._templateContext = {};
1487
- this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
1488
- this.isInnerNavigationEnabled = false;
1489
- this._navigable = false;
1490
- this._size = DEFAULT_SIZE;
1491
- this.resizeHandler = () => {
1492
- var _a;
1493
- if ((_a = this.template) === null || _a === void 0 ? void 0 : _a.first) {
1494
- return;
1495
- }
1496
- const width = this.element.nativeElement.offsetWidth;
1497
- this.ngZone.runOutsideAngular(() => {
1498
- setTimeout(() => {
1499
- if (this.numericButtons) {
1500
- const selectElement = this.numericButtons.selectElement.nativeElement;
1501
- const numbersElement = this.numericButtons.numbersElement.nativeElement;
1502
- this.renderer.removeStyle(numbersElement, 'display');
1503
- this.renderer.setStyle(selectElement, 'display', 'none');
1504
- this.renderer.addClass(selectElement, 'k-hidden');
1505
- if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1506
- this.renderer.removeStyle(selectElement, 'display');
1507
- this.renderer.removeClass(selectElement, 'k-hidden');
1508
- this.renderer.setStyle(numbersElement, 'display', 'none');
1509
- }
1510
- else {
1511
- this.renderer.addClass(selectElement, 'k-hidden');
1512
- }
1513
- }
1514
- if (this.pagerInfo) {
1515
- this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
1516
- if (width < RESPONSIVE_BREAKPOINT_LARGE) {
1517
- this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
1518
- }
1519
- }
1520
- if (this.pagerPageSizes) {
1521
- this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
1522
- if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1523
- this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
1524
- }
1525
- }
1526
- });
1527
- });
1528
- };
1529
- validatePackage(packageMetadata);
1530
- this.direction = localization.rtl ? 'rtl' : 'ltr';
1531
- }
1532
- /**
1533
- * Shows a dropdown for selecting the page size.
1534
- * When set to `true`, the dropdown will contain the default list of options - 5, 10, 20.
1535
- * To customize the list of options, set `pageSizeValues` to an array of the desired values.
1536
- * The array can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
1537
- */
1538
- set pageSizeValues(pageSizeValues) {
1539
- this._pageSizeValues = Array.isArray(pageSizeValues) ? pageSizeValues : pageSizeValues ? DEFAULT_PAGE_SIZE_VALUES : false;
1540
- }
1541
- get pageSizeValues() {
1542
- return this._pageSizeValues;
1543
- }
1544
- /**
1545
- * If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
1546
- * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
1547
- * @default false
1548
- */
1549
- set navigable(value) {
1550
- this._navigable = value;
1551
- this.navigationService.isNavigable = value;
1552
- }
1553
- get navigable() {
1554
- return this._navigable;
1555
- }
1556
- /**
1557
- * Specifies the padding of all Pager elements.
1558
- *
1559
- * The possible values are:
1560
- * * `small`
1561
- * * `medium` (default)
1562
- * * `large`
1563
- * * `none`
1564
- */
1565
- set size(size) {
1566
- const newSize = size ? size : DEFAULT_SIZE;
1567
- this.handleClasses(newSize, 'size');
1568
- this._size = newSize;
1569
- }
1570
- get size() {
1571
- return this._size;
1572
- }
1573
- get dir() {
1574
- return this.direction;
1575
- }
1576
- /**
1577
- * @hidden
1578
- */
1579
- focusHandler(ev) {
1580
- const isInnerNavigationEnabled = ev.target !== this.element.nativeElement;
1581
- this.navigationService.toggleInnerNavigation(isInnerNavigationEnabled);
1582
- }
1583
- get totalPages() {
1584
- return Math.ceil((this.total || 0) / this.pageSize);
1585
- }
1586
- get currentPage() {
1587
- return Math.floor((this.skip || 0) / this.pageSize) + 1;
1588
- }
1589
- get templateContext() {
1590
- const context = this._templateContext;
1591
- context.totalPages = this.totalPages;
1592
- context.total = this.total;
1593
- context.skip = this.skip;
1594
- context.pageSize = this.pageSize;
1595
- context.currentPage = this.currentPage;
1596
- return context;
1597
- }
1598
- ngOnInit() {
1599
- this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
1600
- this.subscriptions.add(this.pagerContext.pageSizeChange.subscribe(this.changePageSize.bind(this)));
1601
- this.subscriptions.add(this.resizeSensor.resize.subscribe(() => this.resizeHandler()));
1602
- this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
1603
- this.direction = rtl ? 'rtl' : 'ltr';
1604
- }));
1605
- this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
1606
- if (this.navigable) {
1607
- const wrapper = this.element.nativeElement;
1608
- this.ngZone.runOutsideAngular(() => {
1609
- this.subscriptions.add(this.renderer.listen(wrapper, 'keydown', this.keyDownHandler.bind(this)));
1610
- });
1611
- }
1612
- }
1613
- ngAfterViewInit() {
1614
- this.resizeHandler();
1615
- this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
1616
- this.subscriptions.add(this.template.changes.subscribe(() => {
1617
- this.resizeHandler();
1618
- }));
1619
- this.handleClasses(this.size, 'size');
1620
- }
1621
- ngOnChanges(changes) {
1622
- if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
1623
- this.pagerContext.notifyChanges({
1624
- pageSize: this.pageSize,
1625
- skip: this.skip,
1626
- total: this.total
1627
- });
1628
- this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
1629
- }
1630
- }
1631
- ngOnDestroy() {
1632
- this.subscriptions.unsubscribe();
1633
- }
1634
- /**
1635
- * @hidden
1636
- */
1637
- changePage(event) {
1638
- this.pageChange.emit(event);
1639
- }
1640
- /**
1641
- * @hidden
1642
- */
1643
- changePageSize(event) {
1644
- this.pageSizeChange.emit(event);
1645
- if (!event.isDefaultPrevented()) {
1646
- if (event.newPageSize === 'all') {
1647
- this.pageChange.emit({ skip: 0, take: this.total });
1648
- }
1649
- else {
1650
- this.pageChange.emit({ skip: 0, take: event.newPageSize });
1651
- }
1652
- }
1653
- }
1654
- /**
1655
- * @hidden
1656
- */
1657
- onPageSizeChange(event) {
1658
- this.pageSizeChange.emit(event);
1659
- if (!event.isDefaultPrevented()) {
1660
- this.pageChange.emit({ skip: this.skip, take: event.newPageSize });
1661
- }
1662
- }
1663
- textFor(value) {
1664
- return this.localization.get(value);
1665
- }
1666
- get ariaLabel() {
1667
- return `${this.textFor('page')} ${this.currentPage} ${this.textFor('of')} ${this.totalPages}`;
1668
- }
1669
- keyDownHandler(e) {
1670
- const target = e.target;
1671
- const wrapper = this.element.nativeElement;
1672
- const isArrowLeftOrPageUp = e.keyCode === Keys.ArrowLeft || e.keyCode === Keys.PageUp;
1673
- const isArrowRightOrPageDown = e.keyCode === Keys.ArrowRight || e.keyCode === Keys.PageDown;
1674
- const isEnter = e.keyCode === Keys.Enter;
1675
- const isHome = e.keyCode === Keys.Home;
1676
- const isEnd = e.keyCode === Keys.End;
1677
- const isEsc = e.keyCode === Keys.Escape;
1678
- const isTab = e.keyCode === Keys.Tab;
1679
- const isFirstPage = this.currentPage === 1;
1680
- const isLastPage = this.currentPage === this.totalPages;
1681
- this.ngZone.run(() => {
1682
- if (isHome) {
1683
- e.preventDefault();
1684
- !isFirstPage && this.pagerContext.changePage(0);
1685
- }
1686
- else if (isEnd) {
1687
- e.preventDefault();
1688
- !isLastPage && this.pagerContext.changePage(this.totalPages - 1);
1689
- }
1690
- else if (this.isInnerNavigationEnabled) {
1691
- if (isEsc) {
1692
- this.navigationService.toggleInnerNavigation(false);
1693
- wrapper.focus();
1694
- }
1695
- else if (isTab) {
1696
- this.navigationService.keepFocusWithinComponent(wrapper, target, e);
1697
- }
1698
- }
1699
- else {
1700
- if (isArrowLeftOrPageUp) {
1701
- e.preventDefault();
1702
- !isFirstPage && this.pagerContext.prevPage();
1703
- }
1704
- else if (isArrowRightOrPageDown) {
1705
- e.preventDefault();
1706
- !isLastPage && this.pagerContext.nextPage();
1707
- }
1708
- else if (isEnter) {
1709
- if (e.target !== wrapper) {
1710
- return;
1711
- }
1712
- e.preventDefault();
1713
- const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
1714
- this.navigationService.toggleInnerNavigation(true);
1715
- firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
1716
- }
1717
- }
1718
- });
1719
- }
1720
- innerNavigationChange(value) {
1721
- this.isInnerNavigationEnabled = value;
1722
- }
1723
- handleClasses(value, input) {
1724
- const elem = this.element.nativeElement;
1725
- const classes = getStylingClasses('pager', input, this[input], value);
1726
- if (classes.toRemove) {
1727
- this.renderer.removeClass(elem, classes.toRemove);
1728
- }
1729
- if (classes.toAdd) {
1730
- this.renderer.addClass(elem, classes.toAdd);
1731
- }
1732
- }
1733
- }
1734
- PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
1735
- PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerComponent, isStandalone: true, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
1736
- LocalizationService,
1737
- PagerContextService,
1738
- PagerNavigationService,
1739
- {
1740
- provide: L10N_PREFIX,
1741
- useValue: 'kendo.pager'
1742
- }
1743
- ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
1744
- <ng-container kendoDataPagerLocalizedMessages
1745
- i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
1746
- firstPage="Go to the first page"
1747
-
1748
- i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
1749
- previousPage="Go to the previous page"
1750
-
1751
- i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
1752
- nextPage="Go to the next page"
1753
-
1754
- i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
1755
- lastPage="Go to the last page"
1756
-
1757
- i18n-page="kendo.pager.page|The label before the current page number in the Pager"
1758
- page="Page"
1759
-
1760
- i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
1761
- of="of"
1762
-
1763
- i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
1764
- pageNumberInputTitle="Page Number"
1765
-
1766
- i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
1767
- items="items"
1768
-
1769
- i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
1770
- itemsPerPage="items per page"
1771
-
1772
- i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
1773
- selectPage="Select page"
1774
-
1775
- i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
1776
- inputLabel="Type a page number"
1777
- >
1778
- </ng-container>
1779
- <ng-container
1780
- *ngIf="template.first?.templateRef"
1781
- [ngTemplateOutlet]="template.first?.templateRef"
1782
- [ngTemplateOutletContext]="templateContext">
1783
- </ng-container>
1784
- <ng-container *ngIf="!template?.first?.templateRef">
1785
- <div class="k-pager-numbers-wrap">
1786
- <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1787
- <kendo-datapager-numeric-buttons
1788
- [size]="size"
1789
- *ngIf="type === 'numeric' && buttonCount > 0"
1790
- [buttonCount]="buttonCount">
1791
- </kendo-datapager-numeric-buttons>
1792
- <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1793
- <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1794
- </div>
1795
- <kendo-datapager-page-sizes *ngIf="pageSizeValues"
1796
- [size]="size"
1797
- [pageSizes]="pageSizeValues">
1798
- </kendo-datapager-page-sizes>
1799
- <kendo-datapager-info *ngIf='info'>
1800
- </kendo-datapager-info>
1801
- </ng-container>
1802
- <kendo-resize-sensor></kendo-resize-sensor>
1803
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
1804
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerComponent, decorators: [{
1805
- type: Component,
1806
- args: [{
1807
- selector: 'kendo-datapager',
1808
- exportAs: 'kendoDataPager',
1809
- providers: [
1810
- LocalizationService,
1811
- PagerContextService,
1812
- PagerNavigationService,
1813
- {
1814
- provide: L10N_PREFIX,
1815
- useValue: 'kendo.pager'
1816
- }
1817
- ],
1818
- template: `
1819
- <ng-container kendoDataPagerLocalizedMessages
1820
- i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
1821
- firstPage="Go to the first page"
1822
-
1823
- i18n-previousPage="kendo.pager.previousPage|The label for the previous page button in the Pager"
1824
- previousPage="Go to the previous page"
1825
-
1826
- i18n-nextPage="kendo.pager.nextPage|The label for the next page button in the Pager"
1827
- nextPage="Go to the next page"
1828
-
1829
- i18n-lastPage="kendo.pager.lastPage|The label for the last page button in the Pager"
1830
- lastPage="Go to the last page"
1831
-
1832
- i18n-page="kendo.pager.page|The label before the current page number in the Pager"
1833
- page="Page"
1834
-
1835
- i18n-of="kendo.pager.of|The label before the total pages number in the Pager"
1836
- of="of"
1837
-
1838
- i18n-pageNumberInputTitle="kendo.pager.pageNumberInputTitle|The label for the pager input in the Pager"
1839
- pageNumberInputTitle="Page Number"
1840
-
1841
- i18n-items="kendo.pager.items|The label after the total pages number in the Pager"
1842
- items="items"
1843
-
1844
- i18n-itemsPerPage="kendo.pager.itemsPerPage|The label for the page size chooser in the Pager"
1845
- itemsPerPage="items per page"
1846
-
1847
- i18n-selectPage="kendo.pager.selectPage|The text of the title and aria-label attributes applied to the page chooser in the Pager"
1848
- selectPage="Select page"
1849
-
1850
- i18n-inputLabel="kendo.pager.inputLabel|The text of the aria-label attribute applied to the input element for entering the page number."
1851
- inputLabel="Type a page number"
1852
- >
1853
- </ng-container>
1854
- <ng-container
1855
- *ngIf="template.first?.templateRef"
1856
- [ngTemplateOutlet]="template.first?.templateRef"
1857
- [ngTemplateOutletContext]="templateContext">
1858
- </ng-container>
1859
- <ng-container *ngIf="!template?.first?.templateRef">
1860
- <div class="k-pager-numbers-wrap">
1861
- <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1862
- <kendo-datapager-numeric-buttons
1863
- [size]="size"
1864
- *ngIf="type === 'numeric' && buttonCount > 0"
1865
- [buttonCount]="buttonCount">
1866
- </kendo-datapager-numeric-buttons>
1867
- <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1868
- <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1869
- </div>
1870
- <kendo-datapager-page-sizes *ngIf="pageSizeValues"
1871
- [size]="size"
1872
- [pageSizes]="pageSizeValues">
1873
- </kendo-datapager-page-sizes>
1874
- <kendo-datapager-info *ngIf='info'>
1875
- </kendo-datapager-info>
1876
- </ng-container>
1877
- <kendo-resize-sensor></kendo-resize-sensor>
1878
- `,
1879
- standalone: true,
1880
- imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerPageSizesComponent, PagerInfoComponent, ResizeSensorComponent]
1881
- }]
1882
- }], ctorParameters: function () { return [{ type: PagerContextService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
1883
- type: ViewChild,
1884
- args: [ResizeSensorComponent, { static: true }]
1885
- }], pagerInfo: [{
1886
- type: ViewChild,
1887
- args: [PagerInfoComponent, { read: ElementRef }]
1888
- }], pagerPageSizes: [{
1889
- type: ViewChild,
1890
- args: [PagerPageSizesComponent, { read: ElementRef }]
1891
- }], numericButtons: [{
1892
- type: ViewChild,
1893
- args: [PagerNumericButtonsComponent]
1894
- }], template: [{
1895
- type: ContentChildren,
1896
- args: [PagerTemplateDirective]
1897
- }], total: [{
1898
- type: Input
1899
- }], skip: [{
1900
- type: Input
1901
- }], pageSize: [{
1902
- type: Input
1903
- }], buttonCount: [{
1904
- type: Input
1905
- }], info: [{
1906
- type: Input
1907
- }], type: [{
1908
- type: Input
1909
- }], pageSizeValues: [{
1910
- type: Input
1911
- }], previousNext: [{
1912
- type: Input
1913
- }], navigable: [{
1914
- type: Input
1915
- }], size: [{
1916
- type: Input
1917
- }], pageChange: [{
1918
- type: Output
1919
- }], pageSizeChange: [{
1920
- type: Output
1921
- }], pagerClass: [{
1922
- type: HostBinding,
1923
- args: ['class.k-pager']
1924
- }], widgetRole: [{
1925
- type: HostBinding,
1926
- args: ['attr.role']
1927
- }], roleDescription: [{
1928
- type: HostBinding,
1929
- args: ['attr.aria-roledescription']
1930
- }], keyShortcuts: [{
1931
- type: HostBinding,
1932
- args: ['attr.aria-keyshortcuts']
1933
- }], hostTabindex: [{
1934
- type: HostBinding,
1935
- args: ['attr.tabindex']
1936
- }], dir: [{
1937
- type: HostBinding,
1938
- args: ['attr.dir']
1939
- }], focusHandler: [{
1940
- type: HostListener,
1941
- args: ['focusin', ['$event']]
1942
- }] } });
1943
-
1944
- /**
1945
- * Utility array that contains all `@progress/kendo-angular-pager` related components and directives
1946
- */
1947
- const KENDO_PAGER = [
1948
- CustomMessagesComponent,
1949
- PagerFocusableDirective,
1950
- PagerInfoComponent,
1951
- PagerInputComponent,
1952
- PagerNextButtonsComponent,
1953
- PagerNumericButtonsComponent,
1954
- PagerPageSizesComponent,
1955
- PagerPrevButtonsComponent,
1956
- PagerTemplateDirective,
1957
- PagerComponent
1958
- ];
1959
-
1960
- // IMPORTANT: NgModule export kept for backwards compatibility
1961
- /**
1962
- * @hidden
1963
- */
1964
- class PagerModule {
1965
- }
1966
- PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1967
- PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, imports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent], exports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent] });
1968
- PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, providers: [
1969
- IconsService,
1970
- PopupService,
1971
- ResizeBatchService
1972
- ], imports: [CustomMessagesComponent, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerComponent] });
1973
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, decorators: [{
1974
- type: NgModule,
1975
- args: [{
1976
- exports: [...KENDO_PAGER],
1977
- imports: [...KENDO_PAGER],
1978
- providers: [
1979
- IconsService,
1980
- PopupService,
1981
- ResizeBatchService
1982
- ]
1983
- }]
1984
- }] });
1985
-
1986
- /**
1987
- * Generated bundle index. Do not edit.
1988
- */
1989
-
1990
- export { CustomMessagesComponent, KENDO_PAGER, LocalizedMessagesDirective, PageSizeChangeEvent, PagerComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective };
1991
-