@progress/kendo-angular-pager 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/pager/pager-input.component.mjs

@@ -19,59 +19,25 @@ import * as i2 from "./pager-context.service";
  * Displays an input element which allows the typing and rendering of page numbers.
  */
 export class PagerInputComponent extends PagerElementComponent {
+    pagerContext;
+    zone;
+    renderer;
+    numericInput;
+    /**
+     * Specifies the padding of the internal numeric input element.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     constructor(localization, pagerContext, zone, cd, renderer) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.zone = zone;
         this.renderer = renderer;
-        /**
-         * Specifies the padding of the internal numeric input element.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
-        /**
-         * @hidden
-         *
-         * @param {string} value
-         *
-         * @memberOf PagerInputComponent
-         */
-        this.handleKeyDown = (event) => {
-            const incomingValue = this.numericInput.value || this.current;
-            // eslint-disable import/no-deprecated
-            if (event.keyCode === Keys.Enter) {
-                event.preventDefault();
-                if (incomingValue !== this.current) {
-                    this.zone.run(() => {
-                        this.changePage(incomingValue - 1);
-                    });
-                }
-            }
-        };
-        /**
-         * @hidden
-         *
-         * @param {string} value
-         *
-         * @memberOf PagerInputComponent
-         */
-        this.handleBlur = () => {
-            const inputValue = this.numericInput.value;
-            if (!inputValue) {
-                this.numericInput.writeValue(this.current);
-                return;
-            }
-            if (inputValue !== this.current) {
-                this.zone.run(() => {
-                    this.changePage(inputValue - 1);
-                });
-            }
-        };
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -79,6 +45,44 @@ export class PagerInputComponent extends PagerElementComponent {
         this.pageSize = pageSize;
         this.cd.markForCheck();
     }
+    /**
+     * @hidden
+     *
+     * @param {string} value
+     *
+     * @memberOf PagerInputComponent
+     */
+    handleKeyDown = (event) => {
+        const incomingValue = this.numericInput.value || this.current;
+        // eslint-disable import/no-deprecated
+        if (event.keyCode === Keys.Enter) {
+            event.preventDefault();
+            if (incomingValue !== this.current) {
+                this.zone.run(() => {
+                    this.changePage(incomingValue - 1);
+                });
+            }
+        }
+    };
+    /**
+     * @hidden
+     *
+     * @param {string} value
+     *
+     * @memberOf PagerInputComponent
+     */
+    handleBlur = () => {
+        const inputValue = this.numericInput.value;
+        if (!inputValue) {
+            this.numericInput.writeValue(this.current);
+            return;
+        }
+        if (inputValue !== this.current) {
+            this.zone.run(() => {
+                this.changePage(inputValue - 1);
+            });
+        }
+    };
     /**
      * @hidden
      */
@@ -91,10 +95,9 @@ export class PagerInputComponent extends PagerElementComponent {
     get hasPages() {
         return this.totalPages !== 0;
     }
-}
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-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: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input, kendo-pager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+     <span class="k-pager-input">
         {{textFor('page')}}
         <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"
@@ -117,13 +120,14 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </kendo-numerictextbox>
         {{textFor('of')}} {{totalPages}}
      </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, decorators: [{
+    `, 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-datapager-input',
+                    selector: 'kendo-datapager-input, kendo-pager-input',
                     template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
+     <span class="k-pager-input">
         {{textFor('page')}}
         <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"

package/{esm2020 → esm2022}/pager/pager-next-buttons.component.mjs

@@ -17,19 +17,6 @@ import * as i2 from "./pager-context.service";
  * Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
  */
 export class PagerNextButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
-        super(localization, pagerContext, cd);
-        /**
-         * Specifies the padding of the buttons.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
-    }
     /**
      * @hidden
      *
@@ -40,15 +27,27 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
     get disabled() {
         return this.currentPage === this.totalPages || !this.total;
     }
+    /**
+     * Specifies the padding of the buttons.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
+    constructor(localization, pagerContext, cd) {
+        super(localization, pagerContext, cd);
+    }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
         this.cd.markForCheck();
     }
-}
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
         <button kendoButton kendoPagerFocusable
             type="button"
             [size]="size"
@@ -57,7 +56,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('nextPage')"
             [attr.aria-label]="textFor('nextPage')"
             (click)="currentPage !== totalPages ? changePage(currentPage) : false">
@@ -70,17 +70,19 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('lastPage')"
             [attr.aria-label]="textFor('lastPage')"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
         </button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
+    `, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-next-buttons',
+                    selector: 'kendo-datapager-next-buttons, kendo-pager-next-buttons',
                     template: `
         <button kendoButton kendoPagerFocusable
             type="button"
@@ -90,7 +92,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('nextPage')"
             [attr.aria-label]="textFor('nextPage')"
             (click)="currentPage !== totalPages ? changePage(currentPage) : false">
@@ -103,7 +106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('lastPage')"
             [attr.aria-label]="textFor('lastPage')"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">

package/{esm2020 → esm2022}/pager/pager-numeric-buttons.component.mjs

@@ -17,12 +17,17 @@ import * as i2 from "./pager-context.service";
  * Displays numeric buttons to enable navigation between the pages.
  */
 export class PagerNumericButtonsComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext, renderer) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.renderer = renderer;
-        this._size = DEFAULT_SIZE;
-    }
+    pagerContext;
+    renderer;
+    selectElement;
+    numbersElement;
+    /**
+     * The count of the displayed buttons.
+     *
+     * @type {number}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    buttonCount;
     /**
      * Specifies the padding of the numeric buttons.
      *
@@ -72,6 +77,12 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
         }
         return 1;
     }
+    constructor(localization, cd, pagerContext, renderer) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.renderer = renderer;
+    }
+    _size = DEFAULT_SIZE;
     ngAfterViewInit() {
         this.handleClasses(this.size, 'size');
     }
@@ -125,12 +136,10 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-}
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons, kendo-pager-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: `
         <select kendoPagerFocusable #select
-            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            [style.display]="'none'"
+            class="k-hidden k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             [attr.title]="pageChooserLabel"
             [attr.aria-label]="pageChooserLabel"
             (change)="onSelectChange($event)">
@@ -192,16 +201,16 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `, 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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+    `, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-numeric-buttons',
+                    selector: 'kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons',
                     template: `
         <select kendoPagerFocusable #select
-            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            [style.display]="'none'"
+            class="k-hidden k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             [attr.title]="pageChooserLabel"
             [attr.aria-label]="pageChooserLabel"
             (change)="onSelectChange($event)">

package/{esm2020 → esm2022}/pager/pager-page-sizes.component.mjs

@@ -18,23 +18,10 @@ import * as i2 from "./pager-context.service";
  * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
  */
 export class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext, element, ngZone) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.element = element;
-        this.ngZone = ngZone;
-        /**
-         * Specifies the padding of the dropdown.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
-        this._pageSizes = [];
-    }
+    pagerContext;
+    element;
+    ngZone;
+    dropDownList;
     /**
      * The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
      *
@@ -48,15 +35,15 @@ export class PagerPageSizesComponent extends PagerElementComponent {
      *            <span>{{item.ProductID}}. </span>
      *            <span>{{item.ProductName}}</span>
      *        </div>
-     *        <kendo-datapager
+     *        <kendo-pager
      *             [skip]="skip"
      *             [pageSize]="pageSize"
      *             [total]="total"
      *             (pageChange)="onPageChange($event)">
-     *           <ng-template kendoDataPagerTemplate>
-     *               <kendo-datapager-page-sizes [pageSizes]="pagesizes"></kendo-datapager-page-sizes>
+     *           <ng-template kendoPagerTemplate>
+     *               <kendo-pager-page-sizes [pageSizes]="pagesizes"></kendo-pager-page-sizes>
      *           </ng-template>
-     *        </kendo-datapager>
+     *        </kendo-pager>
      *    `
      * })
      * class AppComponent {
@@ -176,6 +163,16 @@ export class PagerPageSizesComponent extends PagerElementComponent {
     get pageSizes() {
         return this._pageSizes;
     }
+    /**
+     * Specifies the padding of the dropdown.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     /**
      * @hidden
      *
@@ -184,6 +181,13 @@ export class PagerPageSizesComponent extends PagerElementComponent {
     get classes() {
         return true;
     }
+    _pageSizes = [];
+    constructor(localization, cd, pagerContext, element, ngZone) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.element = element;
+        this.ngZone = ngZone;
+    }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
@@ -214,9 +218,8 @@ export class PagerPageSizesComponent extends PagerElementComponent {
             this.dropDownList.toggle(false);
         }
     }
-}
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-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: `
         <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist
             [size]="size"
@@ -229,11 +232,12 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
         {{ textFor('itemsPerPage') }}
     `, 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-page-sizes',
+                    selector: 'kendo-datapager-page-sizes, kendo-pager-page-sizes',
                     template: `
         <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist

package/{esm2020 → esm2022}/pager/pager-prev-buttons.component.mjs

@@ -19,17 +19,17 @@ import * as i2 from "./pager-context.service";
 export class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
-        /**
-         * Specifies the padding of the buttons.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
     }
+    /**
+     * Specifies the padding of the buttons.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     /**
      * @hidden
      *
@@ -46,13 +46,14 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
         this.pageSize = pageSize;
         this.cd.markForCheck();
     }
-}
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPrevButtonsComponent, isStandalone: true, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[0]"
             [svgIcon]="prevArrowSVGIcons[0]"
             fillMode="flat"
@@ -63,9 +64,11 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             (click)="currentPage !== 1 ? changePage(0) : false">
         </button>
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[1]"
             [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
@@ -75,17 +78,20 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             [attr.aria-label]="textFor('previousPage')"
             (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
         </button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+    `, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-prev-buttons',
+                    selector: 'kendo-datapager-prev-buttons, kendo-pager-prev-buttons',
                     template: `
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[0]"
             [svgIcon]="prevArrowSVGIcons[0]"
             fillMode="flat"
@@ -96,9 +102,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             (click)="currentPage !== 1 ? changePage(0) : false">
         </button>
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[1]"
             [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"

package/{esm2020 → esm2022}/pager/pager-template.directive.mjs

@@ -6,7 +6,7 @@ import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the pager template which helps to customize the pager appearance. To define a pager
- * template, nest an `<ng-template>` tag with the `kendoDataPagerTemplate` directive inside `<kendo-datapager>`.
+ * template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-pager>`.
  *
  * The template context provides the following fields:
  * * `currentPage`&mdash;The index of the displayed page.
@@ -21,15 +21,15 @@ import * as i0 from "@angular/core";
  * _@Component({
  *     selector: 'my-app',
  *     template: `
- *       <kendo-datapager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
- *           <ng-template kendoDataPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
- *               <kendo-datapager-prev-buttons></kendo-datapager-prev-buttons>
- *               <kendo-datapager-numeric-buttons [buttonCount]="10"></kendo-datapager-numeric-buttons>
- *               <kendo-datapager-next-buttons></kendo-datapager-next-buttons>
- *               <kendo-datapager-info></kendo-datapager-info>
+ *       <kendo-pager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
+ *           <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
+ *               <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
+ *               <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
+ *               <kendo-pager-next-buttons></kendo-pager-next-buttons>
+ *               <kendo-pager-info></kendo-pager-info>
  *               Current page: {{currentPage}}
  *           </ng-template>
- *        </kendo-datapager>
+ *        </kendo-pager>
  *     `
  * })
  *
@@ -47,16 +47,17 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class PagerTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]", ngImport: i0 });
 }
-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 });
-PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDataPagerTemplate]',
+                    selector: '[kendoDataPagerTemplate], [kendoPagerTemplate]',
                     standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{