@progress/kendo-angular-pager 17.0.0-develop.34 → 17.0.0-develop.35

package/directives.d.ts

@@ -12,7 +12,8 @@ import { PagerPageSizesComponent } from './pager/pager-page-sizes.component';
 import { PagerPrevButtonsComponent } from './pager/pager-prev-buttons.component';
 import { PagerTemplateDirective } from './pager/pager-template.directive';
 import { PagerComponent } from './pager/pager.component';
+import { PagerSpacerComponent } from './pager/spacer.component';
 /**
  * Utility array that contains all `@progress/kendo-angular-pager` related components and directives
  */
-export declare const KENDO_PAGER: readonly [typeof CustomMessagesComponent, typeof PagerFocusableDirective, typeof PagerInfoComponent, typeof PagerInputComponent, typeof PagerNextButtonsComponent, typeof PagerNumericButtonsComponent, typeof PagerPageSizesComponent, typeof PagerPrevButtonsComponent, typeof PagerTemplateDirective, typeof PagerComponent];
+export declare const KENDO_PAGER: readonly [typeof CustomMessagesComponent, typeof PagerFocusableDirective, typeof PagerInfoComponent, typeof PagerInputComponent, typeof PagerNextButtonsComponent, typeof PagerNumericButtonsComponent, typeof PagerPageSizesComponent, typeof PagerPrevButtonsComponent, typeof PagerTemplateDirective, typeof PagerComponent, typeof PagerSpacerComponent];

package/esm2022/directives.mjs

@@ -12,6 +12,7 @@ import { PagerPageSizesComponent } from './pager/pager-page-sizes.component';
 import { PagerPrevButtonsComponent } from './pager/pager-prev-buttons.component';
 import { PagerTemplateDirective } from './pager/pager-template.directive';
 import { PagerComponent } from './pager/pager.component';
+import { PagerSpacerComponent } from './pager/spacer.component';
 /**
  * Utility array that contains all `@progress/kendo-angular-pager` related components and directives
  */
@@ -25,5 +26,6 @@ export const KENDO_PAGER = [
     PagerPageSizesComponent,
     PagerPrevButtonsComponent,
     PagerTemplateDirective,
-    PagerComponent
+    PagerComponent,
+    PagerSpacerComponent
 ];

package/esm2022/index.mjs

@@ -15,4 +15,7 @@ export { PagerInfoComponent } from './pager/pager-info.component';
 export { PagerFocusableDirective } from './pager/focusable.directive';
 export { PagerComponent } from './pager/pager.component';
 export { PagerModule } from './pager/pager.module';
+export { PagerNavigationService } from './pager/navigation.service';
+export { PagerContextService } from './pager/pager-context.service';
+export { PagerSpacerComponent } from './pager/spacer.component';
 export * from './directives';

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pager',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730712112,
-    version: '17.0.0-develop.34',
+    publishDate: 1730714595,
+    version: '17.0.0-develop.35',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/pager/focusable.directive.mjs

@@ -9,7 +9,7 @@ import { PagerNavigationService } from './navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./navigation.service";
 /**
- * Place the directive on custom focusable elements in the [`kendoDataPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
+ * Place the directive on custom focusable elements in the [`kendoPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
  */
 export class PagerFocusableDirective {
     navigationService;
@@ -22,6 +22,9 @@ export class PagerFocusableDirective {
         this.renderer = renderer;
     }
     ngOnInit() {
+        if (!(this.nativeElement instanceof HTMLElement)) {
+            return;
+        }
         this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
     }
     ngOnDestroy() {

package/esm2022/pager/localization/custom-messages.component.mjs

@@ -21,7 +21,7 @@ export class CustomMessagesComponent extends Messages {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-datapager-messages", providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-datapager-messages, kendo-pager-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => CustomMessagesComponent)
@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => CustomMessagesComponent)
                         }
                     ],
-                    selector: 'kendo-datapager-messages',
+                    selector: 'kendo-datapager-messages, kendo-pager-messages',
                     template: ``,
                     standalone: true
                 }]

package/esm2022/pager/localization/localized-messages.directive.mjs

@@ -17,7 +17,7 @@ export class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoDataPagerLocalizedMessages]", providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoPagerLocalizedMessages]", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
@@ -33,7 +33,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => LocalizedMessagesDirective)
                         }
                     ],
-                    selector: '[kendoDataPagerLocalizedMessages]',
+                    selector: '[kendoPagerLocalizedMessages]',
                     standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2022/pager/localization/messages.mjs

@@ -9,6 +9,17 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class Messages extends ComponentMessages {
+    /**
+     * The label of the pager. Follows the pattern **Page navigation, page {currentPage} of {totalPages}** by default.
+     * Тhe default label text when the current page is 1, and the total number of pages is 10 will be
+     * **Page navigation, page 1 of 10**.
+     *
+     * The message consists of several parts - the current page number, the total number of pages, and a localizable string.
+     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current page
+     * and total number of pages. The `{currentPage}` and `{totalPages}` placeholders will be replaced
+     * internally with the respective actual values.
+     */
+    ariaLabel;
     /**
      * The label for the **First page** button.
      */
@@ -54,7 +65,7 @@ export class Messages extends ComponentMessages {
      */
     inputLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendoPagerMessages", inputs: { ariaLabel: "ariaLabel", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -62,7 +73,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendoPagerMessages'
                 }]
-        }], propDecorators: { firstPage: [{
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], firstPage: [{
                 type: Input
             }], lastPage: [{
                 type: Input

package/esm2022/pager/navigation.service.mjs

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Subject } from "rxjs";
-import { getAllFocusableChildren } from "../util";
+import { focusableSelector, getAllFocusableChildren } from "../util";
+import { isFocusable } from "@progress/kendo-angular-common";
 /**
  * @hidden
  */
@@ -28,8 +29,11 @@ export class PagerNavigationService {
     }
     getFirstAndLastFocusable(wrapper) {
         const all = getAllFocusableChildren(wrapper);
-        const firstFocusable = all.length > 0 ? all[0] : parent;
-        const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
-        return [firstFocusable, lastFocusable];
+        const firstFocusable = all.length > 0 ? all[0] : wrapper;
+        const lastFocusable = all.length > 0 ? all[all.length - 1] : wrapper;
+        return [
+            isFocusable(firstFocusable) ? firstFocusable : firstFocusable.querySelector(focusableSelector),
+            isFocusable(lastFocusable) ? lastFocusable : lastFocusable.querySelector(focusableSelector)
+        ];
     }
 }

package/esm2022/pager/pager-context.service.mjs

@@ -10,6 +10,7 @@ export class PagerContextService {
     total;
     skip;
     pageSize;
+    localization;
     changes = new Subject();
     pageChange = new Subject();
     pageSizeChange = new Subject();
@@ -30,7 +31,7 @@ export class PagerContextService {
     }
     nextPage() {
         const nextPage = this.currentPage + 1;
-        if (nextPage * this.pageSize <= this.total) {
+        if (nextPage * this.pageSize < this.total) {
             this.changePage(nextPage);
         }
     }

package/esm2022/pager/pager-element.component.mjs

@@ -61,7 +61,8 @@ export class PagerElementComponent {
      * @memberOf PagerElementComponent
      */
     textFor(key) {
-        return this.localization.get(key);
+        const isPagerLocalization = this.localization.prefix === 'kendo.pager';
+        return this.localization.get(isPagerLocalization ? key : `pager${key[0].toLocaleUpperCase()}${key.slice(1)}`);
     }
     /**
      * @hidden

package/esm2022/pager/pager-info.component.mjs

@@ -14,7 +14,6 @@ import * as i2 from "./pager-context.service";
  * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
  */
 export class PagerInfoComponent extends PagerElementComponent {
-    pagerContext;
     /**
      * @hidden
      *
@@ -44,12 +43,9 @@ export class PagerInfoComponent extends PagerElementComponent {
      * @type {boolean}
      * @memberOf PagerInfoComponent
      */
-    get classes() {
-        return true;
-    }
+    hostClass = true;
     constructor(localization, cd, pagerContext) {
         super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -58,17 +54,17 @@ export class PagerInfoComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info, kendo-pager-info", host: { properties: { "class.k-pager-info": "this.hostClass" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-info',
+                    selector: 'kendo-datapager-info, kendo-pager-info',
                     template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { classes: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ["class.k-pager-info"]
+                args: ['class.k-pager-info']
             }] } });

package/esm2022/pager/pager-input.component.mjs

@@ -96,7 +96,7 @@ export class PagerInputComponent extends PagerElementComponent {
         return this.totalPages !== 0;
     }
     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", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    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
@@ -125,7 +125,7 @@ export class PagerInputComponent extends PagerElementComponent {
 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 class="k-pager-input">
         {{textFor('page')}}

package/esm2022/pager/pager-next-buttons.component.mjs

@@ -47,7 +47,7 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
     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", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
+    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"
@@ -56,7 +56,8 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
             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">
@@ -69,7 +70,8 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
             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">
@@ -80,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             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: "16.2.12", 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: "16.2.12", 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/esm2022/pager/pager-numeric-buttons.component.mjs

@@ -137,10 +137,9 @@ export class PagerNumericButtonsComponent extends PagerElementComponent {
         }
     }
     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", 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 ɵ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)">
@@ -208,11 +207,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             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/esm2022/pager/pager-page-sizes.component.mjs

@@ -35,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 {
@@ -219,7 +219,7 @@ export class PagerPageSizesComponent extends PagerElementComponent {
         }
     }
     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", 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 ɵ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"
@@ -237,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             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/esm2022/pager/pager-prev-buttons.component.mjs

@@ -47,11 +47,13 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
     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", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
+    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"
@@ -62,9 +64,11 @@ export class PagerPrevButtonsComponent extends PagerElementComponent {
             (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"
@@ -80,12 +84,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             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: "16.2.12", 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/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>
  *     `
  * })
  *
@@ -52,12 +52,12 @@ export class PagerTemplateDirective {
         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]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]", ngImport: i0 });
 }
 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: [{