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

package/README.md

@@ -1,33 +1,42 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<a href="https://www.telerik.com/kendo-angular-ui/components/pager" target="_blank">
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
 ## Kendo UI for Angular Pager Component
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager)&mdash;a commercial library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager).
-> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
->
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-pager) and speed up your development process!
+> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+The Kendo UI for Angular Pager component enables you to split a set of data into pages, providing a flexible and intuitive UI.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular Pager delivers are:
+
+* Pager Settings and Types&mdash;The Pager component features multiple settings to customize the paging UI. [Read more about the available settings configurations of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/settings)
+* Pager Appearance&mdash;You can change the size of the Pager or fully customize its appearance by mixing custom components and built-in pager elements by using the built-in Pager template. Read more about the [Pager template](https://www.telerik.com/kendo-angular-ui/components/pager/template) and the [built-in sizing options...](https://www.telerik.com/kendo-angular-ui/components/pager/appearance)
+* Responsive Design&mdash;The Pager supports responsive web-design by adapting its layout based on the set width or the available screen size. [Read more about the adaptive layout of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/responsive)
+* Globalization&mdash;The Kendo UI for Angular Pager supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Pager supports rendering in a right-to-left (RTL) direction. [Read more about the globalization of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/globalization)
+* Keyboard Navigation&mdash;The Pager supports a number of keyboard shortcuts which alow users to accomplish various commands. [Read more about the keyboard navigation of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/keyboard-navigation)
+* Accessibility&mdash;The Kendo UI for Angular Pager component is [WCAG 2.2 AA](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) compliant. The component also follows the [WAI-ARIA best practices](https://www.w3.org/WAI/ARIA/apg/) for implementing the keyboard navigation for its component role, and is tested against the popular screen readers. [Read more about the accessibility of the Pager...](https://www.telerik.com/kendo-angular-ui/components/pager/accessibility)
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular Pager, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular Pager](https://www.telerik.com/kendo-angular-ui/components/pager/installation/getting-started)
 * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
 * [Blogs](http://www.telerik.com/blogs/kendo-ui)
 * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
-## Questions and Feedback
-
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
-
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/directives.d.ts

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

package/{esm2020 → esm2022}/directives.mjs

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

package/{esm2020 → esm2022}/index.mjs

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

package/{esm2020 → esm2022}/package-metadata.mjs

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

package/{esm2020 → esm2022}/pager/focusable.directive.mjs

@@ -9,16 +9,22 @@ import { PagerNavigationService } from './navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./navigation.service";
 /**
- * Place the directive on custom focusable elements in the [`kendoDataPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
+ * Place the directive on custom focusable elements in the [`kendoPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
  */
 export class PagerFocusableDirective {
+    navigationService;
+    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() {
@@ -40,10 +46,10 @@ export 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: i1.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: i1.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]',

package/{esm2020 → esm2022}/pager/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example]({% slug pager_globalization %}#toc-messages)).
  */
 export class CustomMessagesComponent extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export 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: [
@@ -36,7 +37,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
                 }]

package/{esm2020 → esm2022}/pager/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export 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: [
@@ -32,7 +33,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 }]; } });

package/esm2022/pager/localization/messages.mjs

@@ -0,0 +1,100 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class Messages extends ComponentMessages {
+    /**
+     * The label of the pager. Follows the pattern **Page navigation, page {currentPage} of {totalPages}** by default.
+     * Тhe default label text when the current page is 1, and the total number of pages is 10 will be
+     * **Page navigation, page 1 of 10**.
+     *
+     * The message consists of several parts - the current page number, the total number of pages, and a localizable string.
+     * To allow for reordering its parts, the `ariaLabel` input accepts a string with placeholders for the current page
+     * and total number of pages. The `{currentPage}` and `{totalPages}` placeholders will be replaced
+     * internally with the respective actual values.
+     */
+    ariaLabel;
+    /**
+     * The label for the **First page** button.
+     */
+    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 });
+}
+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: { ariaLabel: [{
+                type: Input
+            }], firstPage: [{
+                type: Input
+            }], lastPage: [{
+                type: Input
+            }], previousPage: [{
+                type: Input
+            }], nextPage: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageNumberInputTitle: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], of: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], selectPage: [{
+                type: Input
+            }], inputLabel: [{
+                type: Input
+            }] } });

package/{esm2020 → esm2022}/pager/navigation.service.mjs

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

package/{esm2020 → esm2022}/pager/pager-context.service.mjs

@@ -7,11 +7,13 @@ import { Subject } from "rxjs";
  * @hidden
  */
 export 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;
     }
@@ -29,7 +31,7 @@ export class PagerContextService {
     }
     nextPage() {
         const nextPage = this.currentPage + 1;
-        if (nextPage * this.pageSize <= this.total) {
+        if (nextPage * this.pageSize < this.total) {
             this.changePage(nextPage);
         }
     }

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

@@ -13,18 +13,16 @@ import * as i2 from "./pager-context.service";
  * @hidden
  */
 export 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
      *
@@ -45,6 +43,15 @@ export 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
      *
@@ -54,7 +61,8 @@ export class PagerElementComponent {
      * @memberOf PagerElementComponent
      */
     textFor(key) {
-        return this.localization.get(key);
+        const isPagerLocalization = this.localization.prefix === 'kendo.pager';
+        return this.localization.get(isPagerLocalization ? key : `pager${key[0].toLocaleUpperCase()}${key.slice(1)}`);
     }
     /**
      * @hidden
@@ -93,10 +101,10 @@ export 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: i2.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: i2.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',

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

@@ -14,10 +14,6 @@ import * as i2 from "./pager-context.service";
  * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
  */
 export class PagerInfoComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
     /**
      * @hidden
      *
@@ -47,8 +43,9 @@ export class PagerInfoComponent extends PagerElementComponent {
      * @type {boolean}
      * @memberOf PagerInfoComponent
      */
-    get classes() {
-        return true;
+    hostClass = true;
+    constructor(localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -56,18 +53,18 @@ export 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: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInfoComponent, isStandalone: true, selector: "kendo-datapager-info, 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: i2.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: i2.PagerContextService }]; }, propDecorators: { classes: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ["class.k-pager-info"]
+                args: ['class.k-pager-info']
             }] } });