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

package/fesm2022/progress-kendo-angular-pager.mjs

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, ContentChildren, Output, HostListener, NgModule } from '@angular/core';
+import { Directive, Input, forwardRef, Component, ChangeDetectionStrategy, ViewChild, HostBinding, Optional, ElementRef, EventEmitter, inject, SkipSelf, ContentChildren, Output, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription } from 'rxjs';
 import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
+import { isFocusable, Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
 import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -63,6 +63,17 @@ class PageSizeChangeEvent extends PreventableEvent {
  * @hidden
  */
 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.
      */
@@ -108,7 +119,7 @@ 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,
@@ -116,7 +127,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
@@ -154,7 +167,7 @@ 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)
@@ -170,7 +183,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
                 }]
@@ -186,7 +199,7 @@ 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)
@@ -202,7 +215,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 }]; } });
@@ -214,6 +227,7 @@ class PagerContextService {
     total;
     skip;
     pageSize;
+    localization;
     changes = new Subject();
     pageChange = new Subject();
     pageSizeChange = new Subject();
@@ -234,7 +248,7 @@ class PagerContextService {
     }
     nextPage() {
         const nextPage = this.currentPage + 1;
-        if (nextPage * this.pageSize <= this.total) {
+        if (nextPage * this.pageSize < this.total) {
             this.changePage(nextPage);
         }
     }
@@ -298,7 +312,8 @@ 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
@@ -366,16 +381,16 @@ const getAllFocusableChildren = (parent) => {
  * @hidden
  */
 const focusableSelector = [
-    'a[href]:not([disabled])',
-    'area[href]:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    'button',
+    'a[href]:not([disabled]):not([aria-hidden="true"])',
+    'area[href]:not([disabled]):not([aria-hidden="true"])',
+    'input:not([disabled]):not([aria-hidden="true"])',
+    'select:not([disabled]):not([aria-hidden="true"])',
+    'textarea:not([disabled]):not([aria-hidden="true"])',
+    'button:not([aria-hidden="true"])',
     'iframe:not([disabled])',
     'object:not([disabled])',
     'embed:not([disabled])',
-    '*[tabindex]:not([disabled])',
+    '*[tabindex]:not([disabled]):not([aria-hidden="true"])',
     '*[contenteditable]:not([disabled]):not([contenteditable="false"])'
 ].join(',');
 /**
@@ -403,6 +418,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
             break;
     }
 };
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
 
 /**
  * @hidden
@@ -428,14 +447,17 @@ 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)
+        ];
     }
 }
 
 /**
- * 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.
  */
 class PagerFocusableDirective {
     navigationService;
@@ -448,6 +470,9 @@ class PagerFocusableDirective {
         this.renderer = renderer;
     }
     ngOnInit() {
+        if (!(this.nativeElement instanceof HTMLElement)) {
+            return;
+        }
         this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
     }
     ngOnDestroy() {
@@ -516,11 +541,13 @@ 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: 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"
@@ -531,9 +558,11 @@ 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"
@@ -549,12 +578,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"
@@ -565,9 +596,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"
@@ -606,15 +639,15 @@ 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 {
@@ -790,7 +823,7 @@ 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: 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"
@@ -808,7 +841,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
@@ -839,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * 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.
@@ -854,15 +887,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * _@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>
  *     `
  * })
  *
@@ -885,12 +918,12 @@ 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: [{
@@ -1021,10 +1054,9 @@ 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: 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)">
@@ -1092,11 +1124,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)">
@@ -1209,7 +1240,7 @@ 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: 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"
@@ -1218,7 +1249,8 @@ 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">
@@ -1231,7 +1263,8 @@ 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">
@@ -1242,7 +1275,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"
@@ -1252,7 +1285,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">
@@ -1265,7 +1299,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">
@@ -1359,7 +1394,7 @@ 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: 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
@@ -1388,7 +1423,7 @@ 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')}}
@@ -1429,7 +1464,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
  */
 class PagerInfoComponent extends PagerElementComponent {
-    pagerContext;
     /**
      * @hidden
      *
@@ -1459,12 +1493,9 @@ 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;
@@ -1473,19 +1504,19 @@ 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: 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: PagerContextService }]; }, propDecorators: { classes: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ["class.k-pager-info"]
+                args: ['class.k-pager-info']
             }] } });
 
 /**
@@ -1495,8 +1526,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pager',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730712112,
-    version: '17.0.0-develop.34',
+    publishDate: 1730720981,
+    version: '17.0.0-develop.36',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1516,17 +1547,21 @@ class PagerComponent {
     renderer;
     ngZone;
     navigationService;
-    resizeSensor;
-    pagerInfo;
-    pagerPageSizes;
-    numericButtons;
     template;
+    /**
+     * @hidden
+     */
+    externalTemplate;
     /**
      * Represents the total number of data items in the collection.
+     *
+     * @default 0
      */
     total = 0;
     /**
      * Defines the number of data items to be skipped.
+     *
+     * @default 0
      */
     skip = 0;
     /**
@@ -1535,14 +1570,20 @@ class PagerComponent {
     pageSize;
     /**
      * Sets the maximum numeric buttons count before the buttons are collapsed.
+     *
+     * @default 10
      */
     buttonCount = 10;
     /**
      * Toggles the information about the current page and the total number of records.
+     *
+     * @default true
      */
     info = true;
     /**
      * Defines the type of the pager.
+     *
+     * @default 'numeric'
      */
     type = 'numeric';
     /**
@@ -1559,6 +1600,8 @@ class PagerComponent {
     }
     /**
      * Toggles the **Previous** and **Next** buttons.
+     *
+     * @default true
      */
     previousNext = true;
     /**
@@ -1590,6 +1633,13 @@ class PagerComponent {
     get size() {
         return this._size;
     }
+    /**
+     * @hidden
+     * Toggles the Pager responsive functionality.
+     *
+     * @default true
+     */
+    responsive = true;
     /**
      * Fires when the current page of the Pager is changed ([see example](slug:overview_pager)).
      * You have to handle the event yourself and page the data.
@@ -1605,7 +1655,9 @@ class PagerComponent {
     widgetRole = 'application';
     roleDescription = 'pager';
     keyShortcuts = 'Enter ArrowRight ArrowLeft';
-    hostTabindex = '0';
+    get hostTabindex() {
+        return this.navigable ? '0' : '-1';
+    }
     get dir() {
         return this.direction;
     }
@@ -1647,11 +1699,17 @@ class PagerComponent {
         this.navigationService = navigationService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
+        if (!navigationService) {
+            this.navigationService = inject(PagerNavigationService);
+        }
+        if (!pagerContext) {
+            this.pagerContext = inject(PagerContextService);
+        }
+        this.pagerContext.localization = localization;
     }
     ngOnInit() {
         this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
         this.subscriptions.add(this.pagerContext.pageSizeChange.subscribe(this.changePageSize.bind(this)));
-        this.subscriptions.add(this.resizeSensor.resize.subscribe(() => this.resizeHandler()));
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         }));
@@ -1664,10 +1722,10 @@ class PagerComponent {
         }
     }
     ngAfterViewInit() {
-        this.resizeHandler();
+        this.responsive && this.resizeHandler();
         this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         this.subscriptions.add(this.template.changes.subscribe(() => {
-            this.resizeHandler();
+            this.responsive && this.resizeHandler();
         }));
         this.handleClasses(this.size, 'size');
     }
@@ -1680,6 +1738,9 @@ class PagerComponent {
             });
             this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         }
+        if (changes['responsive']) {
+            this.responsive && this.resizeHandler();
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -1713,48 +1774,53 @@ class PagerComponent {
             this.pageChange.emit({ skip: this.skip, take: event.newPageSize });
         }
     }
+    /**
+     * @hidden
+     */
     resizeHandler = () => {
-        if (this.template?.first) {
+        if (this.template?.first && !this.responsive) {
             return;
         }
         const width = this.element.nativeElement.offsetWidth;
         this.ngZone.runOutsideAngular(() => {
             setTimeout(() => {
-                if (this.numericButtons) {
-                    const selectElement = this.numericButtons.selectElement.nativeElement;
-                    const numbersElement = this.numericButtons.numbersElement.nativeElement;
-                    this.renderer.removeStyle(numbersElement, 'display');
-                    this.renderer.setStyle(selectElement, 'display', 'none');
-                    this.renderer.addClass(selectElement, 'k-hidden');
+                const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+                const pagerInfoElement = this.element.nativeElement.querySelector('.k-pager-info');
+                const pagerPageSizes = this.element.nativeElement.querySelector('.k-pager-sizes');
+                if (numericButtonsElement) {
+                    const selectElement = numericButtonsElement.querySelector('select');
+                    const numbersElement = numericButtonsElement.querySelector('.k-pager-numbers');
                     if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                        this.renderer.removeStyle(selectElement, 'display');
                         this.renderer.removeClass(selectElement, 'k-hidden');
-                        this.renderer.setStyle(numbersElement, 'display', 'none');
+                        this.renderer.addClass(numbersElement, 'k-hidden');
                     }
                     else {
                         this.renderer.addClass(selectElement, 'k-hidden');
+                        this.renderer.removeClass(numbersElement, 'k-hidden');
                     }
                 }
-                if (this.pagerInfo) {
-                    this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                if (pagerInfoElement) {
                     if (width < RESPONSIVE_BREAKPOINT_LARGE) {
-                        this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
+                        this.renderer.addClass(pagerInfoElement, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.removeClass(pagerInfoElement, 'k-hidden');
                     }
                 }
-                if (this.pagerPageSizes) {
-                    this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+                if (pagerPageSizes) {
                     if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                        this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
+                        this.renderer.addClass(pagerPageSizes, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.removeClass(pagerPageSizes, 'k-hidden');
                     }
                 }
             });
         });
     };
-    textFor(value) {
-        return this.localization.get(value);
-    }
     get ariaLabel() {
-        return `${this.textFor('page')} ${this.currentPage} ${this.textFor('of')} ${this.totalPages}`;
+        const localizationMsg = this.localization.get('ariaLabel') || '';
+        return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
     }
     keyDownHandler(e) {
         const target = e.target;
@@ -1770,11 +1836,17 @@ class PagerComponent {
         const isLastPage = this.currentPage === this.totalPages;
         this.ngZone.run(() => {
             if (isHome) {
+                if (e.target !== wrapper) {
+                    return;
+                }
                 e.preventDefault();
                 !isFirstPage && this.pagerContext.changePage(0);
             }
             else if (isEnd) {
                 e.preventDefault();
+                if (e.target !== wrapper) {
+                    return;
+                }
                 !isLastPage && this.pagerContext.changePage(this.totalPages - 1);
             }
             else if (this.isInnerNavigationEnabled) {
@@ -1787,6 +1859,9 @@ class PagerComponent {
                 }
             }
             else {
+                if (e.target !== wrapper) {
+                    return;
+                }
                 if (isArrowLeftOrPageUp) {
                     e.preventDefault();
                     !isFirstPage && this.pagerContext.prevPage();
@@ -1796,9 +1871,6 @@ class PagerComponent {
                     !isLastPage && this.pagerContext.nextPage();
                 }
                 else if (isEnter) {
-                    if (e.target !== wrapper) {
-                        return;
-                    }
                     e.preventDefault();
                     const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
                     this.navigationService.toggleInnerNavigation(true);
@@ -1820,8 +1892,8 @@ class PagerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-datapager, kendo-pager", inputs: { externalTemplate: "externalTemplate", total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size", responsive: "responsive" }, 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: [
             LocalizationService,
             PagerContextService,
             PagerNavigationService,
@@ -1829,8 +1901,11 @@ class PagerComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.pager'
             }
-        ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], exportAs: ["kendoDataPager"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container kendoDataPagerLocalizedMessages
+        ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], exportAs: ["kendoDataPager", "kendoPager"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoPagerLocalizedMessages
+            i18n-ariaLabel="kendo.pager.ariaLabel|The value of the aria-label attribute of the Pager"
+            ariaLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
+
             i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
             firstPage="Go to the first page"
 
@@ -1866,36 +1941,36 @@ class PagerComponent {
          >
         </ng-container>
         <ng-container
-            *ngIf="template.first?.templateRef"
+            *ngIf="template.first?.templateRef; else default"
             [ngTemplateOutlet]="template.first?.templateRef"
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
-        <ng-container *ngIf="!template?.first?.templateRef">
+        <ng-template #default>
             <div class="k-pager-numbers-wrap">
-                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
-                <kendo-datapager-numeric-buttons
+                <kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
                     [size]="size"
                     *ngIf="type === 'numeric' && buttonCount > 0"
                     [buttonCount]="buttonCount">
-                </kendo-datapager-numeric-buttons>
-                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
-                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
             </div>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues"
+            <kendo-pager-page-sizes *ngIf="pageSizeValues"
                 [size]="size"
                 [pageSizes]="pageSizeValues">
-            </kendo-datapager-page-sizes>
-            <kendo-datapager-info *ngIf='info'>
-            </kendo-datapager-info>
-        </ng-container>
-        <kendo-resize-sensor></kendo-resize-sensor>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="info">
+            </kendo-pager-info>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPagerLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-datapager',
-                    exportAs: 'kendoDataPager',
+                    selector: 'kendo-datapager, kendo-pager',
+                    exportAs: 'kendoDataPager, kendoPager',
                     providers: [
                         LocalizationService,
                         PagerContextService,
@@ -1906,7 +1981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         }
                     ],
                     template: `
-        <ng-container kendoDataPagerLocalizedMessages
+        <ng-container kendoPagerLocalizedMessages
+            i18n-ariaLabel="kendo.pager.ariaLabel|The value of the aria-label attribute of the Pager"
+            ariaLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
+
             i18n-firstPage="kendo.pager.firstPage|The label for the first page button in the Pager"
             firstPage="Go to the first page"
 
@@ -1942,48 +2020,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
          >
         </ng-container>
         <ng-container
-            *ngIf="template.first?.templateRef"
+            *ngIf="template.first?.templateRef; else default"
             [ngTemplateOutlet]="template.first?.templateRef"
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
-        <ng-container *ngIf="!template?.first?.templateRef">
+        <ng-template #default>
             <div class="k-pager-numbers-wrap">
-                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
-                <kendo-datapager-numeric-buttons
+                <kendo-pager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
                     [size]="size"
                     *ngIf="type === 'numeric' && buttonCount > 0"
                     [buttonCount]="buttonCount">
-                </kendo-datapager-numeric-buttons>
-                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
-                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
             </div>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues"
+            <kendo-pager-page-sizes *ngIf="pageSizeValues"
                 [size]="size"
                 [pageSizes]="pageSizeValues">
-            </kendo-datapager-page-sizes>
-            <kendo-datapager-info *ngIf='info'>
-            </kendo-datapager-info>
-        </ng-container>
-        <kendo-resize-sensor></kendo-resize-sensor>
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="info">
+            </kendo-pager-info>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `,
                     standalone: true,
                     imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerPageSizesComponent, PagerInfoComponent, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: PagerContextService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService }]; }, propDecorators: { resizeSensor: [{
-                type: ViewChild,
-                args: [ResizeSensorComponent, { static: true }]
-            }], pagerInfo: [{
-                type: ViewChild,
-                args: [PagerInfoComponent, { read: ElementRef }]
-            }], pagerPageSizes: [{
-                type: ViewChild,
-                args: [PagerPageSizesComponent, { read: ElementRef }]
-            }], numericButtons: [{
-                type: ViewChild,
-                args: [PagerNumericButtonsComponent]
-            }], template: [{
+        }], ctorParameters: function () { return [{ type: PagerContextService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { template: [{
                 type: ContentChildren,
                 args: [PagerTemplateDirective]
+            }], externalTemplate: [{
+                type: Input
             }], total: [{
                 type: Input
             }], skip: [{
@@ -2004,6 +2080,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], responsive: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{
@@ -2031,6 +2109,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['focusin', ['$event']]
             }] } });
 
+/**
+ * Represents the Kendo UI PagerSpacer component for Angular.
+ * Used to give additional white space between the Pager inner elements,
+ * and provides a way for customizing the spacer width.
+ */
+class PagerSpacerComponent {
+    hostClass = true;
+    get sizedClass() {
+        return isPresent(this.width);
+    }
+    get flexBasisStyle() {
+        return this.width;
+    }
+    /**
+     * Specifies the width of the PagerSpacer.
+     * Accepts the [string values of the CSS `flex-basis` property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
+     *
+     * If not set, the PagerSpacer will take all the available space.
+     */
+    width;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerSpacerComponent, isStandalone: true, selector: "kendo-pager-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerSpacerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pager-spacer',
+                    template: ``,
+                    standalone: true
+                }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer']
+            }], sizedClass: [{
+                type: HostBinding,
+                args: ['class.k-spacer-sized']
+            }], flexBasisStyle: [{
+                type: HostBinding,
+                args: ['style.flexBasis']
+            }], width: [{
+                type: Input
+            }] } });
+
 /**
  * Utility array that contains all `@progress/kendo-angular-pager` related components and directives
  */
@@ -2044,7 +2165,8 @@ const KENDO_PAGER = [
     PagerPageSizesComponent,
     PagerPrevButtonsComponent,
     PagerTemplateDirective,
-    PagerComponent
+    PagerComponent,
+    PagerSpacerComponent
 ];
 
 // IMPORTANT: NgModule export kept for backwards compatibility
@@ -2053,7 +2175,7 @@ const KENDO_PAGER = [
  */
 class PagerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent], exports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent, PagerSpacerComponent], exports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent, PagerSpacerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, providers: [
             IconsService,
             PopupService,
@@ -2077,5 +2199,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CustomMessagesComponent, KENDO_PAGER, LocalizedMessagesDirective, PageSizeChangeEvent, PagerComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective };
+export { CustomMessagesComponent, KENDO_PAGER, LocalizedMessagesDirective, PageSizeChangeEvent, PagerComponent, PagerContextService, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNavigationService, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerSpacerComponent, PagerTemplateDirective };