@progress/kendo-angular-pager 17.0.0-develop.8 → 17.0.0

package/{fesm2020 → 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';
@@ -21,9 +21,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
  * @hidden
  */
 class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses the built-in behavior that follows the event.
@@ -46,6 +44,10 @@ class PreventableEvent {
  * is changed from the UI. If you cancel the event, the change is prevented.
  */
 class PageSizeChangeEvent extends PreventableEvent {
+    /**
+     * The newly selected page size.
+     */
+    newPageSize;
     /**
      * Constructs the event arguments for the `pageSizeChange` event.
      * @param newPageSize - The newly selected page size.
@@ -61,16 +63,73 @@ 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.
+     */
+    firstPage;
+    /**
+     * The label for the **Last page** button.
+     */
+    lastPage;
+    /**
+     * The label for the **Previous page** button.
+     */
+    previousPage;
+    /**
+     * The label for the **Next page** button.
+     */
+    nextPage;
+    /**
+     * The label displayed before the pager input.
+     */
+    page;
+    /**
+     * The title attribute of the page number input element.
+     */
+    pageNumberInputTitle;
+    /**
+     * The label displayed after the page-size selector.
+     */
+    itemsPerPage;
+    /**
+     * The label before the total-page number.
+     */
+    of;
+    /**
+     * The label after the total-page number.
+     */
+    items;
+    /**
+     * The text of the title and aria-label attributes applied to the page chooser.
+     */
+    selectPage;
+    /**
+     * The text of the aria-label attribute applied to the input element for entering the page number."
+     */
+    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: { 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 });
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendoPagerMessages", inputs: { firstPage: "firstPage", lastPage: "lastPage", previousPage: "previousPage", nextPage: "nextPage", page: "page", pageNumberInputTitle: "pageNumberInputTitle", itemsPerPage: "itemsPerPage", of: "of", items: "items", selectPage: "selectPage", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendoPagerMessages'
                 }]
-        }], propDecorators: { firstPage: [{
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], firstPage: [{
                 type: Input
             }], lastPage: [{
                 type: Input
@@ -99,6 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ([see example]({% slug pager_globalization %}#toc-messages)).
  */
 class CustomMessagesComponent extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -106,15 +166,15 @@ class CustomMessagesComponent extends Messages {
     get override() {
         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, kendo-pager-messages", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-datapager-messages", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -123,7 +183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => CustomMessagesComponent)
                         }
                     ],
-                    selector: 'kendo-datapager-messages',
+                    selector: 'kendo-datapager-messages, kendo-pager-messages',
                     template: ``,
                     standalone: true
                 }]
@@ -133,19 +193,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class LocalizedMessagesDirective extends Messages {
+    service;
     constructor(service) {
         super();
         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: "[kendoPagerLocalizedMessages]", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoDataPagerLocalizedMessages]", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -154,7 +215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             useExisting: forwardRef(() => LocalizedMessagesDirective)
                         }
                     ],
-                    selector: '[kendoDataPagerLocalizedMessages]',
+                    selector: '[kendoPagerLocalizedMessages]',
                     standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
@@ -163,11 +224,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PagerContextService {
-    constructor() {
-        this.changes = new Subject();
-        this.pageChange = new Subject();
-        this.pageSizeChange = new Subject();
-    }
+    total;
+    skip;
+    pageSize;
+    localization;
+    changes = new Subject();
+    pageChange = new Subject();
+    pageSizeChange = new Subject();
     get currentPage() {
         return this.skip / this.pageSize;
     }
@@ -185,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);
         }
     }
@@ -201,18 +264,16 @@ class PagerContextService {
  * @hidden
  */
 class PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
-        this.localization = localization;
-        this.pagerContext = pagerContext;
-        this.cd = cd;
-        this.total = this.pagerContext.total;
-        this.skip = this.pagerContext.skip;
-        this.pageSize = this.pagerContext.pageSize;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltToLeftIcon = caretAltToLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltToRightIcon = caretAltToRightIcon;
-    }
+    localization;
+    pagerContext;
+    cd;
+    total;
+    skip;
+    pageSize;
+    caretAltLeftIcon = caretAltLeftIcon;
+    caretAltToLeftIcon = caretAltToLeftIcon;
+    caretAltRightIcon = caretAltRightIcon;
+    caretAltToRightIcon = caretAltToRightIcon;
     /**
      * @hidden
      *
@@ -233,6 +294,15 @@ class PagerElementComponent {
     get totalPages() {
         return Math.ceil((this.total || 0) / this.pageSize);
     }
+    subscriptions;
+    constructor(localization, pagerContext, cd) {
+        this.localization = localization;
+        this.pagerContext = pagerContext;
+        this.cd = cd;
+        this.total = pagerContext.total;
+        this.skip = pagerContext.skip;
+        this.pageSize = pagerContext.pageSize;
+    }
     /**
      * @hidden
      *
@@ -242,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
@@ -281,10 +352,10 @@ class PagerElementComponent {
     get nextArrowSVGIcons() {
         return !this.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerElementComponent, 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: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
 }
-PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerElementComponent, selector: "kendo-pager-element", ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pager-element',
@@ -310,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(',');
 /**
@@ -347,15 +418,17 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
             break;
     }
 };
+/**
+ * @hidden
+ */
+const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
 
 /**
  * @hidden
  */
 class PagerNavigationService {
-    constructor() {
-        this.isNavigable = false;
-        this.innerNavigationChange = new Subject();
-    }
+    isNavigable = false;
+    innerNavigationChange = new Subject();
     toggleInnerNavigation(value) {
         this.innerNavigationChange.next(value);
     }
@@ -374,23 +447,32 @@ 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;
+    element;
+    renderer;
+    subscriptions = new Subscription();
     constructor(navigationService, element, renderer) {
         this.navigationService = navigationService;
         this.element = element;
         this.renderer = renderer;
-        this.subscriptions = new Subscription();
     }
     ngOnInit() {
+        if (!(this.nativeElement instanceof HTMLElement)) {
+            return;
+        }
         this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
     }
     ngOnDestroy() {
@@ -412,10 +494,10 @@ class PagerFocusableDirective {
             this.renderer.setAttribute(el, 'tabindex', index);
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerFocusableDirective, isStandalone: true, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
 }
-PagerFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerFocusableDirective, deps: [{ token: PagerNavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-PagerFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerFocusableDirective, isStandalone: true, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerFocusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerFocusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPagerFocusable]',
@@ -431,17 +513,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
-        /**
-         * Specifies the padding of the buttons.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
     }
+    /**
+     * Specifies the padding of the buttons.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     /**
      * @hidden
      *
@@ -458,13 +540,14 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.pageSize = pageSize;
         this.cd.markForCheck();
     }
-}
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerPrevButtonsComponent, isStandalone: true, selector: "kendo-datapager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPrevButtonsComponent, isStandalone: true, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[0]"
             [svgIcon]="prevArrowSVGIcons[0]"
             fillMode="flat"
@@ -475,9 +558,11 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             (click)="currentPage !== 1 ? changePage(0) : false">
         </button>
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[1]"
             [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
@@ -488,16 +573,19 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
         </button>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-prev-buttons',
+                    selector: 'kendo-datapager-prev-buttons, kendo-pager-prev-buttons',
                     template: `
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[0]"
             [svgIcon]="prevArrowSVGIcons[0]"
             fillMode="flat"
@@ -508,9 +596,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             (click)="currentPage !== 1 ? changePage(0) : false">
         </button>
         <button
-            type="button" kendoButton kendoPagerFocusable
+            type="button" kendoButton
+            kendoPagerFocusable
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [icon]="prevArrowIcons[1]"
             [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
@@ -532,23 +622,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
  */
 class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext, element, ngZone) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.element = element;
-        this.ngZone = ngZone;
-        /**
-         * Specifies the padding of the dropdown.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
-        this._pageSizes = [];
-    }
+    pagerContext;
+    element;
+    ngZone;
+    dropDownList;
     /**
      * The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
      *
@@ -562,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 {
@@ -690,6 +767,16 @@ class PagerPageSizesComponent extends PagerElementComponent {
     get pageSizes() {
         return this._pageSizes;
     }
+    /**
+     * Specifies the padding of the dropdown.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     /**
      * @hidden
      *
@@ -698,6 +785,13 @@ class PagerPageSizesComponent extends PagerElementComponent {
     get classes() {
         return true;
     }
+    _pageSizes = [];
+    constructor(localization, cd, pagerContext, element, ngZone) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.element = element;
+        this.ngZone = ngZone;
+    }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.element.nativeElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
@@ -728,9 +822,8 @@ class PagerPageSizesComponent extends PagerElementComponent {
             this.dropDownList.toggle(false);
         }
     }
-}
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes", inputs: { pageSizes: "pageSizes", size: "size" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes", size: "size" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist
             [size]="size"
@@ -743,11 +836,12 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
         {{ textFor('itemsPerPage') }}
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-page-sizes',
+                    selector: 'kendo-datapager-page-sizes, kendo-pager-page-sizes',
                     template: `
         <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist
@@ -778,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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.
@@ -793,15 +887,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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>
  *     `
  * })
  *
@@ -819,16 +913,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class PagerTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]", ngImport: i0 });
 }
-PagerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PagerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoDataPagerTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDataPagerTemplate]',
+                    selector: '[kendoDataPagerTemplate], [kendoPagerTemplate]',
                     standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
@@ -839,12 +934,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Displays numeric buttons to enable navigation between the pages.
  */
 class PagerNumericButtonsComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext, renderer) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.renderer = renderer;
-        this._size = DEFAULT_SIZE;
-    }
+    pagerContext;
+    renderer;
+    selectElement;
+    numbersElement;
+    /**
+     * The count of the displayed buttons.
+     *
+     * @type {number}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    buttonCount;
     /**
      * Specifies the padding of the numeric buttons.
      *
@@ -894,6 +994,12 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
         }
         return 1;
     }
+    constructor(localization, cd, pagerContext, renderer) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.renderer = renderer;
+    }
+    _size = DEFAULT_SIZE;
     ngAfterViewInit() {
         this.handleClasses(this.size, 'size');
     }
@@ -947,12 +1053,10 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-}
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <select kendoPagerFocusable #select
-            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            [style.display]="'none'"
+            class="k-hidden k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             [attr.title]="pageChooserLabel"
             [attr.aria-label]="pageChooserLabel"
             (change)="onSelectChange($event)">
@@ -1015,15 +1119,15 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 (click)="changePage(end)">...</button>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-numeric-buttons',
+                    selector: 'kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons',
                     template: `
         <select kendoPagerFocusable #select
-            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            [style.display]="'none'"
+            class="k-hidden k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             [attr.title]="pageChooserLabel"
             [attr.aria-label]="pageChooserLabel"
             (change)="onSelectChange($event)">
@@ -1106,19 +1210,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
  */
 class PagerNextButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd) {
-        super(localization, pagerContext, cd);
-        /**
-         * Specifies the padding of the buttons.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
-    }
     /**
      * @hidden
      *
@@ -1129,15 +1220,27 @@ class PagerNextButtonsComponent extends PagerElementComponent {
     get disabled() {
         return this.currentPage === this.totalPages || !this.total;
     }
+    /**
+     * Specifies the padding of the buttons.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
+    constructor(localization, pagerContext, cd) {
+        super(localization, pagerContext, cd);
+    }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
         this.pageSize = pageSize;
         this.cd.markForCheck();
     }
-}
-PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: `
         <button kendoButton kendoPagerFocusable
             type="button"
             [size]="size"
@@ -1146,7 +1249,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('nextPage')"
             [attr.aria-label]="textFor('nextPage')"
             (click)="currentPage !== totalPages ? changePage(currentPage) : false">
@@ -1159,17 +1263,19 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('lastPage')"
             [attr.aria-label]="textFor('lastPage')"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
         </button>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-datapager-next-buttons',
+                    selector: 'kendo-datapager-next-buttons, kendo-pager-next-buttons',
                     template: `
         <button kendoButton kendoPagerFocusable
             type="button"
@@ -1179,7 +1285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('nextPage')"
             [attr.aria-label]="textFor('nextPage')"
             (click)="currentPage !== totalPages ? changePage(currentPage) : false">
@@ -1192,7 +1299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [class.k-disabled]="disabled"
             [title]="textFor('lastPage')"
             [attr.aria-label]="textFor('lastPage')"
             (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
@@ -1209,59 +1317,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Displays an input element which allows the typing and rendering of page numbers.
  */
 class PagerInputComponent extends PagerElementComponent {
+    pagerContext;
+    zone;
+    renderer;
+    numericInput;
+    /**
+     * Specifies the padding of the internal numeric input element.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = DEFAULT_SIZE;
     constructor(localization, pagerContext, zone, cd, renderer) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
         this.zone = zone;
         this.renderer = renderer;
-        /**
-         * Specifies the padding of the internal numeric input element.
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = DEFAULT_SIZE;
-        /**
-         * @hidden
-         *
-         * @param {string} value
-         *
-         * @memberOf PagerInputComponent
-         */
-        this.handleKeyDown = (event) => {
-            const incomingValue = this.numericInput.value || this.current;
-            // eslint-disable import/no-deprecated
-            if (event.keyCode === Keys.Enter) {
-                event.preventDefault();
-                if (incomingValue !== this.current) {
-                    this.zone.run(() => {
-                        this.changePage(incomingValue - 1);
-                    });
-                }
-            }
-        };
-        /**
-         * @hidden
-         *
-         * @param {string} value
-         *
-         * @memberOf PagerInputComponent
-         */
-        this.handleBlur = () => {
-            const inputValue = this.numericInput.value;
-            if (!inputValue) {
-                this.numericInput.writeValue(this.current);
-                return;
-            }
-            if (inputValue !== this.current) {
-                this.zone.run(() => {
-                    this.changePage(inputValue - 1);
-                });
-            }
-        };
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -1269,6 +1343,44 @@ class PagerInputComponent extends PagerElementComponent {
         this.pageSize = pageSize;
         this.cd.markForCheck();
     }
+    /**
+     * @hidden
+     *
+     * @param {string} value
+     *
+     * @memberOf PagerInputComponent
+     */
+    handleKeyDown = (event) => {
+        const incomingValue = this.numericInput.value || this.current;
+        // eslint-disable import/no-deprecated
+        if (event.keyCode === Keys.Enter) {
+            event.preventDefault();
+            if (incomingValue !== this.current) {
+                this.zone.run(() => {
+                    this.changePage(incomingValue - 1);
+                });
+            }
+        }
+    };
+    /**
+     * @hidden
+     *
+     * @param {string} value
+     *
+     * @memberOf PagerInputComponent
+     */
+    handleBlur = () => {
+        const inputValue = this.numericInput.value;
+        if (!inputValue) {
+            this.numericInput.writeValue(this.current);
+            return;
+        }
+        if (inputValue !== this.current) {
+            this.zone.run(() => {
+                this.changePage(inputValue - 1);
+            });
+        }
+    };
     /**
      * @hidden
      */
@@ -1281,9 +1393,8 @@ class PagerInputComponent extends PagerElementComponent {
     get hasPages() {
         return this.totalPages !== 0;
     }
-}
-PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    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, 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
@@ -1308,10 +1419,11 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         {{textFor('of')}} {{totalPages}}
      </span>
     `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInputComponent, decorators: [{
+}
+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')}}
@@ -1352,10 +1464,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
  */
 class PagerInfoComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
     /**
      * @hidden
      *
@@ -1385,8 +1493,9 @@ class PagerInfoComponent extends PagerElementComponent {
      * @type {boolean}
      * @memberOf PagerInfoComponent
      */
-    get classes() {
-        return true;
+    hostClass = true;
+    constructor(localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -1394,20 +1503,20 @@ class PagerInfoComponent extends PagerElementComponent {
         this.pageSize = pageSize;
         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, 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 });
 }
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info", host: { properties: { "class.k-pager-info": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('of')}} {{total}} {{textFor('items')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerInfoComponent, decorators: [{
+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']
             }] } });
 
 /**
@@ -1417,8 +1526,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pager',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729170185,
-    version: '17.0.0-develop.8',
+    publishDate: 1731414064,
+    version: '17.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1432,99 +1541,51 @@ const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
 const RESPONSIVE_BREAKPOINT_LARGE = 768;
 
 class PagerComponent {
-    constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
-        this.pagerContext = pagerContext;
-        this.element = element;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.navigationService = navigationService;
-        /**
-         * Represents the total number of data items in the collection.
-         */
-        this.total = 0;
-        /**
-         * Defines the number of data items to be skipped.
-         */
-        this.skip = 0;
-        /**
-         * Sets the maximum numeric buttons count before the buttons are collapsed.
-         */
-        this.buttonCount = 10;
-        /**
-         * Toggles the information about the current page and the total number of records.
-         */
-        this.info = true;
-        /**
-         * Defines the type of the pager.
-         */
-        this.type = 'numeric';
-        /**
-         * Toggles the **Previous** and **Next** buttons.
-         */
-        this.previousNext = 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.
-         */
-        this.pageChange = new EventEmitter();
-        /**
-         * Fires when the page size of the Pager is changed.
-         * You have to handle the event yourself and page the data.
-         * If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
-         */
-        this.pageSizeChange = new EventEmitter();
-        this.pagerClass = true;
-        this.widgetRole = 'application';
-        this.roleDescription = 'pager';
-        this.keyShortcuts = 'Enter ArrowRight ArrowLeft';
-        this.hostTabindex = '0';
-        this.subscriptions = new Subscription();
-        this._templateContext = {};
-        this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
-        this.isInnerNavigationEnabled = false;
-        this._navigable = false;
-        this._size = DEFAULT_SIZE;
-        this.resizeHandler = () => {
-            if (this.template?.first) {
-                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');
-                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                            this.renderer.removeStyle(selectElement, 'display');
-                            this.renderer.removeClass(selectElement, 'k-hidden');
-                            this.renderer.setStyle(numbersElement, 'display', 'none');
-                        }
-                        else {
-                            this.renderer.addClass(selectElement, 'k-hidden');
-                        }
-                    }
-                    if (this.pagerInfo) {
-                        this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
-                        if (width < RESPONSIVE_BREAKPOINT_LARGE) {
-                            this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
-                        }
-                    }
-                    if (this.pagerPageSizes) {
-                        this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
-                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                            this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
-                        }
-                    }
-                });
-            });
-        };
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-    }
+    pagerContext;
+    element;
+    localization;
+    renderer;
+    ngZone;
+    navigationService;
+    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;
+    /**
+     * Defines the number of data items per page.
+     */
+    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';
     /**
      * Shows a dropdown for selecting the page size.
      * When set to `true`, the dropdown will contain the default list of options - 5, 10, 20.
@@ -1537,6 +1598,12 @@ class PagerComponent {
     get pageSizeValues() {
         return this._pageSizeValues;
     }
+    /**
+     * Toggles the **Previous** and **Next** buttons.
+     *
+     * @default true
+     */
+    previousNext = true;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
      * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
@@ -1566,6 +1633,31 @@ 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.
+     */
+    pageChange = new EventEmitter();
+    /**
+     * Fires when the page size of the Pager is changed.
+     * You have to handle the event yourself and page the data.
+     * If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
+     */
+    pageSizeChange = new EventEmitter();
+    pagerClass = true;
+    widgetRole = 'application';
+    roleDescription = 'pager';
+    keyShortcuts = 'Enter ArrowRight ArrowLeft';
+    get hostTabindex() {
+        return this.navigable ? '0' : '-1';
+    }
     get dir() {
         return this.direction;
     }
@@ -1591,10 +1683,33 @@ class PagerComponent {
         context.currentPage = this.currentPage;
         return context;
     }
+    subscriptions = new Subscription();
+    _templateContext = {};
+    _pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
+    direction;
+    isInnerNavigationEnabled = false;
+    _navigable = false;
+    _size = DEFAULT_SIZE;
+    constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
+        this.pagerContext = pagerContext;
+        this.element = element;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        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';
         }));
@@ -1607,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');
     }
@@ -1623,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();
@@ -1656,11 +1774,53 @@ class PagerComponent {
             this.pageChange.emit({ skip: this.skip, take: event.newPageSize });
         }
     }
-    textFor(value) {
-        return this.localization.get(value);
-    }
+    /**
+     * @hidden
+     */
+    resizeHandler = () => {
+        if (this.template?.first && !this.responsive) {
+            return;
+        }
+        const width = this.element.nativeElement.offsetWidth;
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                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.removeClass(selectElement, 'k-hidden');
+                        this.renderer.addClass(numbersElement, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.addClass(selectElement, 'k-hidden');
+                        this.renderer.removeClass(numbersElement, 'k-hidden');
+                    }
+                }
+                if (pagerInfoElement) {
+                    if (width < RESPONSIVE_BREAKPOINT_LARGE) {
+                        this.renderer.addClass(pagerInfoElement, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.removeClass(pagerInfoElement, 'k-hidden');
+                    }
+                }
+                if (pagerPageSizes) {
+                    if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                        this.renderer.addClass(pagerPageSizes, 'k-hidden');
+                    }
+                    else {
+                        this.renderer.removeClass(pagerPageSizes, 'k-hidden');
+                    }
+                }
+            });
+        });
+    };
     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;
@@ -1676,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) {
@@ -1693,6 +1859,9 @@ class PagerComponent {
                 }
             }
             else {
+                if (e.target !== wrapper) {
+                    return;
+                }
                 if (isArrowLeftOrPageUp) {
                     e.preventDefault();
                     !isFirstPage && this.pagerContext.prevPage();
@@ -1702,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);
@@ -1726,18 +1892,20 @@ class PagerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-}
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PagerComponent, isStandalone: true, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
-        LocalizationService,
-        PagerContextService,
-        PagerNavigationService,
-        {
-            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
+    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,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.pager'
+            }
+        ], 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"
 
@@ -1773,35 +1941,36 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
          >
         </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerComponent, decorators: [{
+            </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,
@@ -1812,7 +1981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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"
 
@@ -1848,48 +2020,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: [{
@@ -1910,6 +2080,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], responsive: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{
@@ -1937,6 +2109,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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
  */
@@ -1950,23 +2165,43 @@ const KENDO_PAGER = [
     PagerPageSizesComponent,
     PagerPrevButtonsComponent,
     PagerTemplateDirective,
-    PagerComponent
+    PagerComponent,
+    PagerSpacerComponent
 ];
 
-// IMPORTANT: NgModule export kept for backwards compatibility
+//IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * @hidden
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Pager component. Imports `PagerModule` into the
+ * [root module](link:site.data.urls.angular['ngmodules']#angular-modularity)
+ * of your application or into any other sub-module that will use the Pager component.
+ *
+ * @example
+ * ```ts-no-run
+ * import { NgModule } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { PagerModule } from '@progress/kendo-angular-pager';
+ * import { AppComponent } from './app.component';
+ *
+ * _@NgModule({
+ *     bootstrap:    [AppComponent],
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, PagerModule]
+ * })
+ * export class AppModule {
+ * }
+ * ```
  */
 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, 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,
+            ResizeBatchService
+        ], imports: [PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerComponent] });
 }
-PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, imports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent], exports: [CustomMessagesComponent, PagerFocusableDirective, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PagerComponent] });
-PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService
-    ], imports: [CustomMessagesComponent, PagerInfoComponent, PagerInputComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PagerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_PAGER],
@@ -1983,5 +2218,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 };