@progress/kendo-angular-pager 4.1.0-dev.202211250852 → 11.0.0-develop.100

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 (68) hide show
  1. package/LICENSE.md +1 -1
  2. package/NOTICE.txt +4 -4
  3. package/README.md +1 -1
  4. package/{esm2015/main.js → esm2020/index.mjs} +1 -1
  5. package/{esm2015/package-metadata.js → esm2020/package-metadata.mjs} +3 -3
  6. package/{esm2015/pager/change-event-args.interface.js → esm2020/pager/change-event-args.interface.mjs} +1 -1
  7. package/{esm2015/pager/common/constants.js → esm2020/pager/common/constants.mjs} +1 -1
  8. package/{esm2015/pager/pagesize-item.interface.js → esm2020/pager/common/pager-classes.mjs} +1 -1
  9. package/{esm2015/pager/common/pager-type.js → esm2020/pager/common/pager-size.mjs} +1 -1
  10. package/esm2020/pager/common/pager-type.mjs +5 -0
  11. package/{esm2015/pager/focusable.directive.js → esm2020/pager/focusable.directive.mjs} +6 -5
  12. package/{esm2015/pager/localization/custom-messages.component.js → esm2020/pager/localization/custom-messages.component.mjs} +5 -4
  13. package/{esm2015/pager/localization/localized-messages.directive.js → esm2020/pager/localization/localized-messages.directive.mjs} +5 -4
  14. package/{esm2015/pager/localization/messages.js → esm2020/pager/localization/messages.mjs} +4 -4
  15. package/{esm2015/pager/navigation.service.js → esm2020/pager/navigation.service.mjs} +1 -1
  16. package/{esm2015/pager/pager-context.service.js → esm2020/pager/pager-context.service.mjs} +1 -1
  17. package/{esm2015/pager/pager-element.component.js → esm2020/pager/pager-element.component.mjs} +7 -5
  18. package/{esm2015/pager/pager-info.component.js → esm2020/pager/pager-info.component.mjs} +7 -8
  19. package/{esm2015/pager/pager-input.component.js → esm2020/pager/pager-input.component.mjs} +23 -6
  20. package/esm2020/pager/pager-next-buttons.component.mjs +124 -0
  21. package/esm2020/pager/pager-numeric-buttons.component.mjs +273 -0
  22. package/{esm2015/pager/pager-page-sizes.component.js → esm2020/pager/pager-page-sizes.component.mjs} +25 -8
  23. package/esm2020/pager/pager-prev-buttons.component.mjs +124 -0
  24. package/{esm2015/pager/pager-template.directive.js → esm2020/pager/pager-template.directive.mjs} +5 -5
  25. package/{esm2015/pager/pager.component.js → esm2020/pager/pager.component.mjs} +72 -35
  26. package/{esm2015/pager/pager.module.js → esm2020/pager/pager.module.mjs} +8 -5
  27. package/esm2020/pager/pagesize-item.interface.mjs +5 -0
  28. package/{esm2015/pager/pagesizechange-event.js → esm2020/pager/pagesizechange-event.mjs} +1 -1
  29. package/{esm2015/pager/preventable-event.js → esm2020/pager/preventable-event.mjs} +1 -1
  30. package/{esm2015/kendo-angular-pager.js → esm2020/progress-kendo-angular-pager.mjs} +2 -2
  31. package/{esm2015/util.js → esm2020/util.mjs} +26 -1
  32. package/fesm2015/progress-kendo-angular-pager.mjs +1966 -0
  33. package/{fesm2015/kendo-angular-pager.js → fesm2020/progress-kendo-angular-pager.mjs} +417 -210
  34. package/{main.d.ts → index.d.ts} +2 -1
  35. package/package-metadata.d.ts +1 -1
  36. package/package.json +30 -55
  37. package/pager/change-event-args.interface.d.ts +1 -1
  38. package/pager/common/constants.d.ts +1 -1
  39. package/pager/common/pager-classes.d.ts +11 -0
  40. package/pager/common/pager-size.d.ts +9 -0
  41. package/pager/common/pager-type.d.ts +1 -1
  42. package/pager/focusable.directive.d.ts +1 -1
  43. package/pager/localization/custom-messages.component.d.ts +1 -1
  44. package/pager/localization/localized-messages.directive.d.ts +1 -1
  45. package/pager/localization/messages.d.ts +1 -1
  46. package/pager/navigation.service.d.ts +1 -1
  47. package/pager/pager-context.service.d.ts +1 -1
  48. package/pager/pager-element.component.d.ts +1 -1
  49. package/pager/pager-info.component.d.ts +1 -1
  50. package/pager/pager-input.component.d.ts +13 -2
  51. package/pager/pager-next-buttons.component.d.ts +22 -2
  52. package/pager/pager-numeric-buttons.component.d.ts +21 -5
  53. package/pager/pager-page-sizes.component.d.ts +13 -2
  54. package/pager/pager-prev-buttons.component.d.ts +22 -2
  55. package/pager/pager-template.directive.d.ts +1 -1
  56. package/pager/pager.component.d.ts +19 -5
  57. package/pager/pager.module.d.ts +4 -3
  58. package/pager/pagesize-item.interface.d.ts +1 -1
  59. package/pager/pagesizechange-event.d.ts +1 -1
  60. package/pager/preventable-event.d.ts +1 -1
  61. package/{kendo-angular-pager.d.ts → progress-kendo-angular-pager.d.ts} +2 -2
  62. package/schematics/ngAdd/index.js +4 -6
  63. package/util.d.ts +13 -1
  64. package/bundles/kendo-angular-pager.umd.js +0 -5
  65. package/esm2015/pager/pager-next-buttons.component.js +0 -87
  66. package/esm2015/pager/pager-numeric-buttons.component.js +0 -217
  67. package/esm2015/pager/pager-prev-buttons.component.js +0 -87
  68. package/schematics/ngAdd/index.js.map +0 -1
@@ -1,19 +1,22 @@
1
1
  /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
6
+ import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChild, Output, HostListener, NgModule } from '@angular/core';
7
7
  import * as i1 from '@progress/kendo-angular-l10n';
8
8
  import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
9
  import { Subject, Subscription } from 'rxjs';
10
+ import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
11
+ import * as i3 from '@progress/kendo-angular-buttons';
12
+ import { ButtonsModule } from '@progress/kendo-angular-buttons';
13
+ import * as i3$1 from '@progress/kendo-angular-dropdowns';
14
+ import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
10
15
  import * as i6 from '@progress/kendo-angular-common';
11
16
  import { Keys, anyChanged, ResizeSensorComponent, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
12
- import * as i3 from '@progress/kendo-angular-dropdowns';
13
- import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
14
- import * as i4 from '@angular/common';
17
+ import * as i5 from '@angular/common';
15
18
  import { CommonModule } from '@angular/common';
16
- import * as i3$1 from '@progress/kendo-angular-inputs';
19
+ import * as i3$2 from '@progress/kendo-angular-inputs';
17
20
  import { NumericTextBoxComponent, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
18
21
  import { validatePackage } from '@progress/kendo-licensing';
19
22
 
@@ -62,9 +65,9 @@ class PageSizeChangeEvent extends PreventableEvent {
62
65
  */
63
66
  class Messages extends ComponentMessages {
64
67
  }
65
- Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
66
- Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", 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: "12.2.17", ngImport: i0, type: Messages, decorators: [{
68
+ Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
69
+ Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", 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 });
70
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
68
71
  type: Directive,
69
72
  args: [{
70
73
  // eslint-disable-next-line @angular-eslint/directive-selector
@@ -107,14 +110,14 @@ class CustomMessagesComponent extends Messages {
107
110
  return true;
108
111
  }
109
112
  }
110
- CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
111
- CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
113
+ CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
114
+ CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-datapager-messages", providers: [
112
115
  {
113
116
  provide: Messages,
114
117
  useExisting: forwardRef(() => CustomMessagesComponent)
115
118
  }
116
119
  ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomMessagesComponent, decorators: [{
120
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
118
121
  type: Component,
119
122
  args: [{
120
123
  providers: [
@@ -137,14 +140,14 @@ class LocalizedMessagesDirective extends Messages {
137
140
  this.service = service;
138
141
  }
139
142
  }
140
- LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
141
- LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
143
+ LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
144
+ LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]", providers: [
142
145
  {
143
146
  provide: Messages,
144
147
  useExisting: forwardRef(() => LocalizedMessagesDirective)
145
148
  }
146
149
  ], usesInheritance: true, ngImport: i0 });
147
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
150
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
148
151
  type: Directive,
149
152
  args: [{
150
153
  providers: [
@@ -264,9 +267,9 @@ class PagerElementComponent {
264
267
  }
265
268
  }
266
269
  }
267
- PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
268
- PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
269
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerElementComponent, decorators: [{
270
+ PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
271
+ PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerElementComponent, decorators: [{
270
273
  type: Component,
271
274
  args: [{
272
275
  selector: 'kendo-pager-element',
@@ -304,6 +307,31 @@ const focusableSelector = [
304
307
  '*[tabindex]:not([disabled])',
305
308
  '*[contenteditable]:not([disabled]):not([contenteditable="false"])'
306
309
  ].join(',');
310
+ /**
311
+ * @hidden
312
+ */
313
+ const DEFAULT_SIZE = 'medium';
314
+ const SIZES = {
315
+ small: 'sm',
316
+ medium: 'md',
317
+ large: 'lg'
318
+ };
319
+ /**
320
+ * @hidden
321
+ *
322
+ * Returns the styling classes to be added and removed
323
+ */
324
+ const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
325
+ switch (stylingOption) {
326
+ case 'size':
327
+ return {
328
+ toRemove: `k-${componentType}-${SIZES[previousValue]}`,
329
+ toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
330
+ };
331
+ default:
332
+ break;
333
+ }
334
+ };
307
335
 
308
336
  /**
309
337
  * @hidden
@@ -370,9 +398,9 @@ class PagerFocusableDirective {
370
398
  });
371
399
  }
372
400
  }
373
- PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
374
- PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
375
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerFocusableDirective, decorators: [{
401
+ PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
402
+ PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
403
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerFocusableDirective, decorators: [{
376
404
  type: Directive,
377
405
  args: [{
378
406
  selector: '[kendoPagerFocusable]',
@@ -387,6 +415,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
387
415
  class PagerPrevButtonsComponent extends PagerElementComponent {
388
416
  constructor(localization, pagerContext, cd) {
389
417
  super(localization, pagerContext, cd);
418
+ /**
419
+ * @hidden
420
+ */
421
+ this.caretAltLeftIcon = caretAltLeftIcon;
422
+ /**
423
+ * @hidden
424
+ */
425
+ this.caretAltToLeftIcon = caretAltToLeftIcon;
426
+ /**
427
+ * Specifies the padding of the buttons.
428
+ *
429
+ * The possible values are:
430
+ * * `small`
431
+ * * `medium` (default)
432
+ * * `large`
433
+ * * `none`
434
+ */
435
+ this.size = DEFAULT_SIZE;
390
436
  }
391
437
  /**
392
438
  * @hidden
@@ -405,58 +451,72 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
405
451
  this.cd.markForCheck();
406
452
  }
407
453
  }
408
- PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
409
- PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
454
+ PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
455
+ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
410
456
  <button
411
- type="button" kendoPagerFocusable
412
- class="k-link k-pager-nav k-pager-first"
413
- [class.k-disabled]="disabled"
457
+ type="button" kendoButton kendoPagerFocusable
458
+ class="k-pager-nav k-pager-first"
459
+ [disabled]="disabled"
460
+ icon="caret-alt-to-left"
461
+ [svgIcon]="caretAltToLeftIcon"
462
+ fillMode="flat"
463
+ rounded="none"
464
+ [size]="size"
414
465
  [title]="textFor('firstPage')"
415
466
  [attr.aria-label]="textFor('firstPage')"
416
- [attr.aria-disabled]="disabled ? true : undefined"
417
467
  (click)="currentPage !== 1 ? changePage(0) : false">
418
- <span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
419
468
  </button>
420
469
  <button
421
- type="button" kendoPagerFocusable
422
- class="k-link k-pager-nav"
423
- [class.k-disabled]="disabled"
470
+ type="button" kendoButton kendoPagerFocusable
471
+ class="k-pager-nav"
472
+ [disabled]="disabled"
473
+ icon="caret-alt-left"
474
+ [svgIcon]="caretAltLeftIcon"
475
+ fillMode="flat"
476
+ rounded="none"
477
+ [size]="size"
424
478
  [title]="textFor('previousPage')"
425
479
  [attr.aria-label]="textFor('previousPage')"
426
- [attr.aria-disabled]="disabled ? true : undefined"
427
480
  (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
428
- <span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
429
481
  </button>
430
- `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
431
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
482
+ `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
483
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
432
484
  type: Component,
433
485
  args: [{
434
486
  changeDetection: ChangeDetectionStrategy.OnPush,
435
487
  selector: 'kendo-datapager-prev-buttons',
436
488
  template: `
437
489
  <button
438
- type="button" kendoPagerFocusable
439
- class="k-link k-pager-nav k-pager-first"
440
- [class.k-disabled]="disabled"
490
+ type="button" kendoButton kendoPagerFocusable
491
+ class="k-pager-nav k-pager-first"
492
+ [disabled]="disabled"
493
+ icon="caret-alt-to-left"
494
+ [svgIcon]="caretAltToLeftIcon"
495
+ fillMode="flat"
496
+ rounded="none"
497
+ [size]="size"
441
498
  [title]="textFor('firstPage')"
442
499
  [attr.aria-label]="textFor('firstPage')"
443
- [attr.aria-disabled]="disabled ? true : undefined"
444
500
  (click)="currentPage !== 1 ? changePage(0) : false">
445
- <span class="k-icon k-i-seek-w" role="note" [attr.aria-label]="textFor('firstPage')"></span>
446
501
  </button>
447
502
  <button
448
- type="button" kendoPagerFocusable
449
- class="k-link k-pager-nav"
450
- [class.k-disabled]="disabled"
503
+ type="button" kendoButton kendoPagerFocusable
504
+ class="k-pager-nav"
505
+ [disabled]="disabled"
506
+ icon="caret-alt-left"
507
+ [svgIcon]="caretAltLeftIcon"
508
+ fillMode="flat"
509
+ rounded="none"
510
+ [size]="size"
451
511
  [title]="textFor('previousPage')"
452
512
  [attr.aria-label]="textFor('previousPage')"
453
- [attr.aria-disabled]="disabled ? true : undefined"
454
513
  (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
455
- <span class="k-icon k-i-arrow-w" role="note" [attr.aria-label]="textFor('previousPage')"></span>
456
514
  </button>
457
515
  `
458
516
  }]
459
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
517
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
518
+ type: Input
519
+ }] } });
460
520
 
461
521
  /**
462
522
  * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
@@ -467,6 +527,16 @@ class PagerPageSizesComponent extends PagerElementComponent {
467
527
  this.pagerContext = pagerContext;
468
528
  this.element = element;
469
529
  this.ngZone = ngZone;
530
+ /**
531
+ * Specifies the padding of the dropdown.
532
+ *
533
+ * The possible values are:
534
+ * * `small`
535
+ * * `medium` (default)
536
+ * * `large`
537
+ * * `none`
538
+ */
539
+ this.size = DEFAULT_SIZE;
470
540
  this._pageSizes = [];
471
541
  }
472
542
  /**
@@ -650,10 +720,12 @@ class PagerPageSizesComponent extends PagerElementComponent {
650
720
  }
651
721
  }
652
722
  }
653
- PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
654
- PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
723
+ PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
724
+ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, 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: `
655
725
  <kendo-dropdownlist kendoPagerFocusable
726
+ class="k-dropdown"
656
727
  #dropdownlist
728
+ [size]="size"
657
729
  [data]="pageSizes"
658
730
  textField="text"
659
731
  valueField="value"
@@ -661,15 +733,17 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
661
733
  [value]="pageSize"
662
734
  (valueChange)="pageSizeChange($event, dropdownlist)"></kendo-dropdownlist>
663
735
  {{ textFor('itemsPerPage') }}
664
- `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
665
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
736
+ `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
737
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
666
738
  type: Component,
667
739
  args: [{
668
740
  changeDetection: ChangeDetectionStrategy.OnPush,
669
741
  selector: 'kendo-datapager-page-sizes',
670
742
  template: `
671
743
  <kendo-dropdownlist kendoPagerFocusable
744
+ class="k-dropdown"
672
745
  #dropdownlist
746
+ [size]="size"
673
747
  [data]="pageSizes"
674
748
  textField="text"
675
749
  valueField="value"
@@ -684,12 +758,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
684
758
  args: ['dropdownlist', { static: true }]
685
759
  }], pageSizes: [{
686
760
  type: Input
761
+ }], size: [{
762
+ type: Input
687
763
  }], classes: [{
688
764
  type: HostBinding,
689
765
  args: ["class.k-pager-sizes"]
690
- }, {
691
- type: HostBinding,
692
- args: ["class.k-label"]
693
766
  }] } });
694
767
 
695
768
  /**
@@ -739,9 +812,9 @@ class PagerTemplateDirective {
739
812
  this.templateRef = templateRef;
740
813
  }
741
814
  }
742
- PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
743
- PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
744
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerTemplateDirective, decorators: [{
815
+ PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
816
+ PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PagerTemplateDirective, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
817
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerTemplateDirective, decorators: [{
745
818
  type: Directive,
746
819
  args: [{
747
820
  selector: '[kendoDataPagerTemplate]'
@@ -754,10 +827,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
754
827
  * Displays numeric buttons to enable navigation between the pages.
755
828
  */
756
829
  class PagerNumericButtonsComponent extends PagerElementComponent {
757
- constructor(localization, cd, pagerContext) {
830
+ constructor(localization, cd, pagerContext, renderer) {
758
831
  super(localization, pagerContext, cd);
759
832
  this.pagerContext = pagerContext;
760
- this.numbersWrapClass = true;
833
+ this.renderer = renderer;
834
+ this._size = DEFAULT_SIZE;
835
+ }
836
+ /**
837
+ * Specifies the padding of the numeric buttons.
838
+ *
839
+ * The possible values are:
840
+ * * `small`
841
+ * * `medium` (default)
842
+ * * `large`
843
+ * * `none`
844
+ */
845
+ set size(size) {
846
+ const newSize = size ? size : DEFAULT_SIZE;
847
+ this.handleClasses(newSize, 'size');
848
+ this._size = newSize;
849
+ }
850
+ get size() {
851
+ return this._size;
761
852
  }
762
853
  /**
763
854
  * @hidden
@@ -767,7 +858,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
767
858
  * @memberOf PagerNumericButtonsComponent
768
859
  */
769
860
  get buttons() {
770
- let result = [];
861
+ const result = [];
771
862
  for (let idx = this.start; idx <= this.end; idx++) {
772
863
  result.push(idx);
773
864
  }
@@ -791,6 +882,9 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
791
882
  }
792
883
  return 1;
793
884
  }
885
+ ngAfterViewInit() {
886
+ this.handleClasses(this.size, 'size');
887
+ }
794
888
  /**
795
889
  * @hidden
796
890
  */
@@ -828,16 +922,28 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
828
922
  get pageChooserLabel() {
829
923
  return this.textFor('selectPage');
830
924
  }
925
+ handleClasses(value, input) {
926
+ const elem = this.selectElement?.nativeElement;
927
+ const classes = getStylingClasses('picker', input, this[input], value);
928
+ if (!elem) {
929
+ return;
930
+ }
931
+ if (classes.toRemove) {
932
+ this.renderer.removeClass(elem, classes.toRemove);
933
+ }
934
+ if (classes.toAdd) {
935
+ this.renderer.addClass(elem, classes.toAdd);
936
+ }
937
+ }
831
938
  }
832
- PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
833
- PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
834
- <select kendoPagerFocusable
835
- class="k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid"
939
+ PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
940
+ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
941
+ <select kendoPagerFocusable #select
942
+ class="k-dropdown-list k-dropdown k-picker k-rounded-md"
836
943
  [attr.title]="pageChooserLabel"
837
944
  [attr.aria-label]="pageChooserLabel"
838
945
  (change)="onSelectChange($event)">
839
946
  <option *ngIf="start > 1"
840
- class="k-link"
841
947
  value="previousButtons"
842
948
  [selected]="false"
843
949
  [attr.aria-label]="pageLabel(start - 1)">...
@@ -847,59 +953,67 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
847
953
  [selected]="num === currentPage"
848
954
  [attr.aria-label]="pageLabel(num)"
849
955
  [attr.aria-current]="currentPage === num ? 'page' : undefined"
850
- [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
956
+ [ngClass]="{'k-selected':currentPage === num}">
851
957
  {{num}}
852
958
  </option>
853
959
  <option *ngIf="end < totalPages"
854
960
  value="nextButtons"
855
961
  [selected]="false"
856
- class="k-link"
857
962
  [attr.aria-label]="pageLabel(end + 1)">...
858
963
  </option>
859
964
  </select>
860
- <ul [ngClass]="{'k-pager-numbers': true}">
861
- <li *ngIf="start > 1">
862
- <button
863
- type="button" kendoPagerFocusable
864
- class="k-link"
865
- [attr.aria-label]="pageLabel(start - 1)"
866
- [attr.title]="pageLabel(start - 1)"
867
- (click)="changePage(start - 2)">...</button>
868
- </li>
869
- <li *ngFor="let num of buttons">
870
- <button
871
- type="button" kendoPagerFocusable
872
- [attr.aria-label]="pageLabel(num)"
873
- [attr.title]="pageLabel(num)"
874
- [attr.aria-current]="currentPage === num ? 'page' : undefined"
875
- [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
876
- (click)="changePage(num - 1)">
877
- {{num}}
878
- </button>
879
- </li>
880
- <li *ngIf="end < totalPages">
881
- <button
882
- type="button" kendoPagerFocusable
883
- class="k-link"
884
- [attr.aria-label]="pageLabel(end + 1)"
885
- [attr.title]="pageLabel(end + 1)"
886
- (click)="changePage(end)">...</button>
887
- </li>
888
- </ul>
889
- `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
890
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
965
+ <div [ngClass]="{'k-pager-numbers': true}">
966
+ <button *ngIf="start > 1"
967
+ type="button"
968
+ kendoPagerFocusable
969
+ kendoButton
970
+ [size]="size"
971
+ fillMode="flat"
972
+ themeColor="primary"
973
+ rounded="none"
974
+ [attr.aria-label]="pageLabel(start - 1)"
975
+ [attr.title]="pageLabel(start - 1)"
976
+ (click)="changePage(start - 2)">...</button>
977
+ <button *ngFor="let num of buttons"
978
+ type="button"
979
+ kendoPagerFocusable
980
+ kendoButton
981
+ [size]="size"
982
+ fillMode="flat"
983
+ themeColor="primary"
984
+ rounded="none"
985
+ [attr.aria-label]="pageLabel(num)"
986
+ [attr.title]="pageLabel(num)"
987
+ [attr.aria-current]="currentPage === num ? 'page' : undefined"
988
+ [selected]="currentPage === num"
989
+ (click)="changePage(num - 1)">
990
+ {{num}}
991
+ </button>
992
+ <button *ngIf="end < totalPages"
993
+ type="button"
994
+ kendoPagerFocusable
995
+ kendoButton
996
+ [size]="size"
997
+ fillMode="flat"
998
+ themeColor="primary"
999
+ rounded="none"
1000
+ [attr.aria-label]="pageLabel(end + 1)"
1001
+ [attr.title]="pageLabel(end + 1)"
1002
+ (click)="changePage(end)">...</button>
1003
+ </div>
1004
+ `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1005
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
891
1006
  type: Component,
892
1007
  args: [{
893
1008
  changeDetection: ChangeDetectionStrategy.OnPush,
894
1009
  selector: 'kendo-datapager-numeric-buttons',
895
1010
  template: `
896
- <select kendoPagerFocusable
897
- class="k-dropdown-list k-picker k-picker-md k-rounded-md k-picker-solid"
1011
+ <select kendoPagerFocusable #select
1012
+ class="k-dropdown-list k-dropdown k-picker k-rounded-md"
898
1013
  [attr.title]="pageChooserLabel"
899
1014
  [attr.aria-label]="pageChooserLabel"
900
1015
  (change)="onSelectChange($event)">
901
1016
  <option *ngIf="start > 1"
902
- class="k-link"
903
1017
  value="previousButtons"
904
1018
  [selected]="false"
905
1019
  [attr.aria-label]="pageLabel(start - 1)">...
@@ -909,52 +1023,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
909
1023
  [selected]="num === currentPage"
910
1024
  [attr.aria-label]="pageLabel(num)"
911
1025
  [attr.aria-current]="currentPage === num ? 'page' : undefined"
912
- [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
1026
+ [ngClass]="{'k-selected':currentPage === num}">
913
1027
  {{num}}
914
1028
  </option>
915
1029
  <option *ngIf="end < totalPages"
916
1030
  value="nextButtons"
917
1031
  [selected]="false"
918
- class="k-link"
919
1032
  [attr.aria-label]="pageLabel(end + 1)">...
920
1033
  </option>
921
1034
  </select>
922
- <ul [ngClass]="{'k-pager-numbers': true}">
923
- <li *ngIf="start > 1">
924
- <button
925
- type="button" kendoPagerFocusable
926
- class="k-link"
927
- [attr.aria-label]="pageLabel(start - 1)"
928
- [attr.title]="pageLabel(start - 1)"
929
- (click)="changePage(start - 2)">...</button>
930
- </li>
931
- <li *ngFor="let num of buttons">
932
- <button
933
- type="button" kendoPagerFocusable
934
- [attr.aria-label]="pageLabel(num)"
935
- [attr.title]="pageLabel(num)"
936
- [attr.aria-current]="currentPage === num ? 'page' : undefined"
937
- [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
938
- (click)="changePage(num - 1)">
939
- {{num}}
940
- </button>
941
- </li>
942
- <li *ngIf="end < totalPages">
943
- <button
944
- type="button" kendoPagerFocusable
945
- class="k-link"
946
- [attr.aria-label]="pageLabel(end + 1)"
947
- [attr.title]="pageLabel(end + 1)"
948
- (click)="changePage(end)">...</button>
949
- </li>
950
- </ul>
1035
+ <div [ngClass]="{'k-pager-numbers': true}">
1036
+ <button *ngIf="start > 1"
1037
+ type="button"
1038
+ kendoPagerFocusable
1039
+ kendoButton
1040
+ [size]="size"
1041
+ fillMode="flat"
1042
+ themeColor="primary"
1043
+ rounded="none"
1044
+ [attr.aria-label]="pageLabel(start - 1)"
1045
+ [attr.title]="pageLabel(start - 1)"
1046
+ (click)="changePage(start - 2)">...</button>
1047
+ <button *ngFor="let num of buttons"
1048
+ type="button"
1049
+ kendoPagerFocusable
1050
+ kendoButton
1051
+ [size]="size"
1052
+ fillMode="flat"
1053
+ themeColor="primary"
1054
+ rounded="none"
1055
+ [attr.aria-label]="pageLabel(num)"
1056
+ [attr.title]="pageLabel(num)"
1057
+ [attr.aria-current]="currentPage === num ? 'page' : undefined"
1058
+ [selected]="currentPage === num"
1059
+ (click)="changePage(num - 1)">
1060
+ {{num}}
1061
+ </button>
1062
+ <button *ngIf="end < totalPages"
1063
+ type="button"
1064
+ kendoPagerFocusable
1065
+ kendoButton
1066
+ [size]="size"
1067
+ fillMode="flat"
1068
+ themeColor="primary"
1069
+ rounded="none"
1070
+ [attr.aria-label]="pageLabel(end + 1)"
1071
+ [attr.title]="pageLabel(end + 1)"
1072
+ (click)="changePage(end)">...</button>
1073
+ </div>
951
1074
  `
952
1075
  }]
953
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
954
- type: HostBinding,
955
- args: ['class.k-pager-numbers-wrap']
1076
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
1077
+ type: ViewChild,
1078
+ args: ['select', { read: ElementRef }]
956
1079
  }], buttonCount: [{
957
1080
  type: Input
1081
+ }], size: [{
1082
+ type: Input
958
1083
  }] } });
959
1084
 
960
1085
  // eslint-disable no-access-missing-member
@@ -964,6 +1089,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
964
1089
  class PagerNextButtonsComponent extends PagerElementComponent {
965
1090
  constructor(localization, pagerContext, cd) {
966
1091
  super(localization, pagerContext, cd);
1092
+ /**
1093
+ * @hidden
1094
+ */
1095
+ this.caretAltRightIcon = caretAltRightIcon;
1096
+ /**
1097
+ * @hidden
1098
+ */
1099
+ this.caretAltToRightIcon = caretAltToRightIcon;
1100
+ /**
1101
+ * Specifies the padding of the buttons.
1102
+ *
1103
+ * The possible values are:
1104
+ * * `small`
1105
+ * * `medium` (default)
1106
+ * * `large`
1107
+ * * `none`
1108
+ */
1109
+ this.size = DEFAULT_SIZE;
967
1110
  }
968
1111
  /**
969
1112
  * @hidden
@@ -982,58 +1125,72 @@ class PagerNextButtonsComponent extends PagerElementComponent {
982
1125
  this.cd.markForCheck();
983
1126
  }
984
1127
  }
985
- PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
986
- PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", usesInheritance: true, ngImport: i0, template: `
987
- <button
988
- type="button" kendoPagerFocusable
989
- class="k-link k-pager-nav"
990
- [class.k-disabled]="disabled"
1128
+ PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1129
+ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
1130
+ <button kendoButton kendoPagerFocusable
1131
+ type="button"
1132
+ [size]="size"
1133
+ icon="caret-alt-right"
1134
+ [svgIcon]="caretAltRightIcon"
1135
+ fillMode="flat"
1136
+ rounded="none"
1137
+ class="k-pager-nav"
1138
+ [disabled]="disabled"
991
1139
  [title]="textFor('nextPage')"
992
1140
  [attr.aria-label]="textFor('nextPage')"
993
- [attr.aria-disabled]="disabled ? true : undefined"
994
1141
  (click)="currentPage !== totalPages ? changePage(currentPage) : false">
995
- <span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
996
1142
  </button>
997
- <button
998
- type="button" kendoPagerFocusable
999
- class="k-link k-pager-nav k-pager-last"
1000
- [class.k-disabled]="disabled"
1143
+ <button kendoButton kendoPagerFocusable
1144
+ type="button"
1145
+ [size]="size"
1146
+ icon="caret-alt-to-right"
1147
+ [svgIcon]="caretAltToRightIcon"
1148
+ fillMode="flat"
1149
+ rounded="none"
1150
+ class="k-pager-nav k-pager-last"
1151
+ [disabled]="disabled"
1001
1152
  [title]="textFor('lastPage')"
1002
1153
  [attr.aria-label]="textFor('lastPage')"
1003
- [attr.aria-disabled]="disabled ? true : undefined"
1004
1154
  (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
1005
- <span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
1006
1155
  </button>
1007
- `, isInline: true, directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1008
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
1156
+ `, isInline: true, components: [{ type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1157
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
1009
1158
  type: Component,
1010
1159
  args: [{
1011
1160
  changeDetection: ChangeDetectionStrategy.OnPush,
1012
1161
  selector: 'kendo-datapager-next-buttons',
1013
1162
  template: `
1014
- <button
1015
- type="button" kendoPagerFocusable
1016
- class="k-link k-pager-nav"
1017
- [class.k-disabled]="disabled"
1163
+ <button kendoButton kendoPagerFocusable
1164
+ type="button"
1165
+ [size]="size"
1166
+ icon="caret-alt-right"
1167
+ [svgIcon]="caretAltRightIcon"
1168
+ fillMode="flat"
1169
+ rounded="none"
1170
+ class="k-pager-nav"
1171
+ [disabled]="disabled"
1018
1172
  [title]="textFor('nextPage')"
1019
1173
  [attr.aria-label]="textFor('nextPage')"
1020
- [attr.aria-disabled]="disabled ? true : undefined"
1021
1174
  (click)="currentPage !== totalPages ? changePage(currentPage) : false">
1022
- <span class="k-icon k-i-arrow-e" role="note" [attr.aria-label]="textFor('nextPage')"></span>
1023
1175
  </button>
1024
- <button
1025
- type="button" kendoPagerFocusable
1026
- class="k-link k-pager-nav k-pager-last"
1027
- [class.k-disabled]="disabled"
1176
+ <button kendoButton kendoPagerFocusable
1177
+ type="button"
1178
+ [size]="size"
1179
+ icon="caret-alt-to-right"
1180
+ [svgIcon]="caretAltToRightIcon"
1181
+ fillMode="flat"
1182
+ rounded="none"
1183
+ class="k-pager-nav k-pager-last"
1184
+ [disabled]="disabled"
1028
1185
  [title]="textFor('lastPage')"
1029
1186
  [attr.aria-label]="textFor('lastPage')"
1030
- [attr.aria-disabled]="disabled ? true : undefined"
1031
1187
  (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
1032
- <span class="k-icon k-i-seek-e" role="note" [attr.aria-label]="textFor('lastPage')"></span>
1033
1188
  </button>
1034
1189
  `
1035
1190
  }]
1036
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
1191
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
1192
+ type: Input
1193
+ }] } });
1037
1194
 
1038
1195
  /**
1039
1196
  * Displays an input element which allows the typing and rendering of page numbers.
@@ -1044,6 +1201,16 @@ class PagerInputComponent extends PagerElementComponent {
1044
1201
  this.pagerContext = pagerContext;
1045
1202
  this.zone = zone;
1046
1203
  this.renderer = renderer;
1204
+ /**
1205
+ * Specifies the padding of the internal numeric input element.
1206
+ *
1207
+ * The possible values are:
1208
+ * * `small`
1209
+ * * `medium` (default)
1210
+ * * `large`
1211
+ * * `none`
1212
+ */
1213
+ this.size = DEFAULT_SIZE;
1047
1214
  /**
1048
1215
  * @hidden
1049
1216
  *
@@ -1052,7 +1219,7 @@ class PagerInputComponent extends PagerElementComponent {
1052
1219
  * @memberOf PagerInputComponent
1053
1220
  */
1054
1221
  this.handleKeyDown = (event) => {
1055
- let incomingValue = this.numericInput.value || this.current;
1222
+ const incomingValue = this.numericInput.value || this.current;
1056
1223
  // eslint-disable import/no-deprecated
1057
1224
  if (event.keyCode === Keys.Enter) {
1058
1225
  event.preventDefault();
@@ -1106,14 +1273,15 @@ class PagerInputComponent extends PagerElementComponent {
1106
1273
  this.cd.markForCheck();
1107
1274
  }
1108
1275
  }
1109
- PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1110
- PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInputComponent, selector: "kendo-datapager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
1276
+ PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1277
+ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputComponent, selector: "kendo-datapager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
1111
1278
  <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
1112
1279
  {{textFor('page')}}
1113
1280
  <kendo-numerictextbox kendoPagerFocusable
1114
1281
  [spinners]="false"
1115
1282
  [decimals]="0"
1116
1283
  format="n0"
1284
+ [size]="size"
1117
1285
  [disabled]="!hasPages"
1118
1286
  [value]="current"
1119
1287
  [min]="hasPages ? 1 : 0"
@@ -1127,8 +1295,8 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
1127
1295
  </kendo-numerictextbox>
1128
1296
  {{textFor('of')}} {{totalPages}}
1129
1297
  </span>
1130
- `, isInline: true, components: [{ type: i3$1.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
1131
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInputComponent, decorators: [{
1298
+ `, isInline: true, components: [{ type: i3$2.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
1299
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, decorators: [{
1132
1300
  type: Component,
1133
1301
  args: [{
1134
1302
  selector: 'kendo-datapager-input',
@@ -1139,6 +1307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1139
1307
  [spinners]="false"
1140
1308
  [decimals]="0"
1141
1309
  format="n0"
1310
+ [size]="size"
1142
1311
  [disabled]="!hasPages"
1143
1312
  [value]="current"
1144
1313
  [min]="hasPages ? 1 : 0"
@@ -1157,6 +1326,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1157
1326
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
1158
1327
  type: ViewChild,
1159
1328
  args: [NumericTextBoxComponent, { static: true }]
1329
+ }], size: [{
1330
+ type: Input
1160
1331
  }] } });
1161
1332
 
1162
1333
  // eslint-disable no-access-missing-member
@@ -1207,9 +1378,9 @@ class PagerInfoComponent extends PagerElementComponent {
1207
1378
  this.cd.markForCheck();
1208
1379
  }
1209
1380
  }
1210
- PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
1211
- PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerInfoComponent, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1212
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerInfoComponent, decorators: [{
1381
+ PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
1382
+ PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInfoComponent, 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 });
1383
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInfoComponent, decorators: [{
1213
1384
  type: Component,
1214
1385
  args: [{
1215
1386
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1219,9 +1390,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1219
1390
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
1220
1391
  type: HostBinding,
1221
1392
  args: ["class.k-pager-info"]
1222
- }, {
1223
- type: HostBinding,
1224
- args: ["class.k-label"]
1225
1393
  }] } });
1226
1394
 
1227
1395
  /**
@@ -1240,9 +1408,9 @@ const packageMetadata = {
1240
1408
  name: '@progress/kendo-angular-pager',
1241
1409
  productName: 'Kendo UI for Angular',
1242
1410
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
1243
- publishDate: 1669366305,
1411
+ publishDate: 1673469356,
1244
1412
  version: '',
1245
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
1413
+ licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
1246
1414
  };
1247
1415
 
1248
1416
  class PagerComponent {
@@ -1298,6 +1466,7 @@ class PagerComponent {
1298
1466
  this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
1299
1467
  this.isInnerNavigationEnabled = false;
1300
1468
  this._navigable = false;
1469
+ this._size = DEFAULT_SIZE;
1301
1470
  this.resizeHandler = () => {
1302
1471
  if (this.template) {
1303
1472
  return;
@@ -1305,16 +1474,16 @@ class PagerComponent {
1305
1474
  const element = this.element.nativeElement;
1306
1475
  const width = element.offsetWidth;
1307
1476
  if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
1308
- element.classList.remove('k-pager-md');
1309
- element.classList.add('k-pager-sm');
1477
+ element.classList.remove('k-pager-mobile-md');
1478
+ element.classList.add('k-pager-mobile-sm');
1310
1479
  }
1311
1480
  else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
1312
- element.classList.add('k-pager-md');
1313
- element.classList.remove('k-pager-sm');
1481
+ element.classList.add('k-pager-mobile-md');
1482
+ element.classList.remove('k-pager-mobile-sm');
1314
1483
  }
1315
1484
  else {
1316
- element.classList.remove('k-pager-md');
1317
- element.classList.remove('k-pager-sm');
1485
+ element.classList.remove('k-pager-mobile-md');
1486
+ element.classList.remove('k-pager-mobile-sm');
1318
1487
  }
1319
1488
  };
1320
1489
  validatePackage(packageMetadata);
@@ -1329,6 +1498,9 @@ class PagerComponent {
1329
1498
  set pageSizeValues(pageSizeValues) {
1330
1499
  this._pageSizeValues = Array.isArray(pageSizeValues) ? pageSizeValues : pageSizeValues ? DEFAULT_PAGE_SIZE_VALUES : false;
1331
1500
  }
1501
+ get pageSizeValues() {
1502
+ return this._pageSizeValues;
1503
+ }
1332
1504
  /**
1333
1505
  * If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
1334
1506
  * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
@@ -1343,6 +1515,23 @@ class PagerComponent {
1343
1515
  return this._navigable;
1344
1516
  }
1345
1517
  ;
1518
+ /**
1519
+ * Specifies the padding of all Pager elements.
1520
+ *
1521
+ * The possible values are:
1522
+ * * `small`
1523
+ * * `medium` (default)
1524
+ * * `large`
1525
+ * * `none`
1526
+ */
1527
+ set size(size) {
1528
+ const newSize = size ? size : DEFAULT_SIZE;
1529
+ this.handleClasses(newSize, 'size');
1530
+ this._size = newSize;
1531
+ }
1532
+ get size() {
1533
+ return this._size;
1534
+ }
1346
1535
  get dir() {
1347
1536
  return this.direction;
1348
1537
  }
@@ -1359,9 +1548,6 @@ class PagerComponent {
1359
1548
  get currentPage() {
1360
1549
  return Math.floor((this.skip || 0) / this.pageSize) + 1;
1361
1550
  }
1362
- get pageSizeValues() {
1363
- return this._pageSizeValues;
1364
- }
1365
1551
  get templateContext() {
1366
1552
  const context = this._templateContext;
1367
1553
  context.totalPages = this.totalPages;
@@ -1389,6 +1575,7 @@ class PagerComponent {
1389
1575
  ngAfterViewInit() {
1390
1576
  this.resizeHandler();
1391
1577
  this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
1578
+ this.handleClasses(this.size, 'size');
1392
1579
  }
1393
1580
  ngOnChanges(changes) {
1394
1581
  if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -1484,7 +1671,7 @@ class PagerComponent {
1484
1671
  e.preventDefault();
1485
1672
  const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
1486
1673
  this.navigationService.toggleInnerNavigation(true);
1487
- firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
1674
+ firstFocusable?.focus();
1488
1675
  }
1489
1676
  }
1490
1677
  });
@@ -1492,9 +1679,19 @@ class PagerComponent {
1492
1679
  innerNavigationChange(value) {
1493
1680
  this.isInnerNavigationEnabled = value;
1494
1681
  }
1682
+ handleClasses(value, input) {
1683
+ const elem = this.element.nativeElement;
1684
+ const classes = getStylingClasses('pager', input, this[input], value);
1685
+ if (classes.toRemove) {
1686
+ this.renderer.removeClass(elem, classes.toRemove);
1687
+ }
1688
+ if (classes.toAdd) {
1689
+ this.renderer.addClass(elem, classes.toAdd);
1690
+ }
1691
+ }
1495
1692
  }
1496
- PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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 });
1497
- PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable" }, 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: [
1693
+ PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 });
1694
+ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, 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: [
1498
1695
  LocalizationService,
1499
1696
  PagerContextService,
1500
1697
  PagerNavigationService
@@ -1540,19 +1737,22 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1540
1737
  [ngTemplateOutletContext]="templateContext">
1541
1738
  </ng-container>
1542
1739
  <ng-container *ngIf="!template?.templateRef">
1543
- <kendo-datapager-prev-buttons *ngIf="previousNext"></kendo-datapager-prev-buttons>
1544
- <kendo-datapager-numeric-buttons
1545
- *ngIf="type === 'numeric' && buttonCount > 0"
1546
- [buttonCount]="buttonCount">
1547
- </kendo-datapager-numeric-buttons>
1548
- <kendo-datapager-input *ngIf="type === 'input'"></kendo-datapager-input>
1549
- <kendo-datapager-next-buttons *ngIf="previousNext"></kendo-datapager-next-buttons>
1740
+ <div class="k-pager-numbers-wrap">
1741
+ <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1742
+ <kendo-datapager-numeric-buttons
1743
+ [size]="size"
1744
+ *ngIf="type === 'numeric' && buttonCount > 0"
1745
+ [buttonCount]="buttonCount">
1746
+ </kendo-datapager-numeric-buttons>
1747
+ <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1748
+ <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1749
+ </div>
1750
+ <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1550
1751
  <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
1551
- <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1552
1752
  </ng-container>
1553
1753
  <kendo-resize-sensor></kendo-resize-sensor>
1554
- `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons" }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount"] }, { type: PagerInputComponent, selector: "kendo-datapager-input" }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons" }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1555
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, decorators: [{
1754
+ `, isInline: true, components: [{ type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { type: PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { type: PagerInfoComponent, selector: "kendo-datapager-info" }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1755
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, decorators: [{
1556
1756
  type: Component,
1557
1757
  args: [{
1558
1758
  selector: 'kendo-datapager',
@@ -1604,15 +1804,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1604
1804
  [ngTemplateOutletContext]="templateContext">
1605
1805
  </ng-container>
1606
1806
  <ng-container *ngIf="!template?.templateRef">
1607
- <kendo-datapager-prev-buttons *ngIf="previousNext"></kendo-datapager-prev-buttons>
1608
- <kendo-datapager-numeric-buttons
1609
- *ngIf="type === 'numeric' && buttonCount > 0"
1610
- [buttonCount]="buttonCount">
1611
- </kendo-datapager-numeric-buttons>
1612
- <kendo-datapager-input *ngIf="type === 'input'"></kendo-datapager-input>
1613
- <kendo-datapager-next-buttons *ngIf="previousNext"></kendo-datapager-next-buttons>
1807
+ <div class="k-pager-numbers-wrap">
1808
+ <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
1809
+ <kendo-datapager-numeric-buttons
1810
+ [size]="size"
1811
+ *ngIf="type === 'numeric' && buttonCount > 0"
1812
+ [buttonCount]="buttonCount">
1813
+ </kendo-datapager-numeric-buttons>
1814
+ <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
1815
+ <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
1816
+ </div>
1817
+ <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1614
1818
  <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
1615
- <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
1616
1819
  </ng-container>
1617
1820
  <kendo-resize-sensor></kendo-resize-sensor>
1618
1821
  `
@@ -1641,6 +1844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
1641
1844
  type: Input
1642
1845
  }], navigable: [{
1643
1846
  type: Input
1847
+ }], size: [{
1848
+ type: Input
1644
1849
  }], pageChange: [{
1645
1850
  type: Output
1646
1851
  }], pageSizeChange: [{
@@ -1672,6 +1877,7 @@ const importedModules = [
1672
1877
  CommonModule,
1673
1878
  NumericTextBoxModule,
1674
1879
  DropDownListModule,
1880
+ ButtonsModule,
1675
1881
  EventsModule,
1676
1882
  ResizeSensorModule
1677
1883
  ];
@@ -1711,8 +1917,8 @@ class PagerModule {
1711
1917
  ];
1712
1918
  }
1713
1919
  }
1714
- PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1715
- PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
1920
+ PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1921
+ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
1716
1922
  PagerPrevButtonsComponent,
1717
1923
  PagerNextButtonsComponent,
1718
1924
  PagerNumericButtonsComponent,
@@ -1725,6 +1931,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
1725
1931
  PagerFocusableDirective], imports: [CommonModule,
1726
1932
  NumericTextBoxModule,
1727
1933
  DropDownListModule,
1934
+ ButtonsModule,
1728
1935
  EventsModule,
1729
1936
  ResizeSensorModule], exports: [PagerComponent,
1730
1937
  PagerPrevButtonsComponent,
@@ -1737,8 +1944,8 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
1737
1944
  LocalizedMessagesDirective,
1738
1945
  CustomMessagesComponent,
1739
1946
  PagerFocusableDirective] });
1740
- PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
1741
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, decorators: [{
1947
+ PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
1948
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, decorators: [{
1742
1949
  type: NgModule,
1743
1950
  args: [{
1744
1951
  declarations: [INTERNAL_COMPONENTS],