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

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

@@ -2,12 +2,12 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, EventEmitter, Output, HostBinding, ViewChild, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList, Optional, SkipSelf, inject } from '@angular/core';
 import { PagerTemplateDirective } from "./pager-template.directive";
 import { anyChanged, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
 import { PagerContextService } from "./pager-context.service";
 import { Subscription } from "rxjs";
-import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE } from '../util';
+import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE, replaceMessagePlaceholder } from '../util';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -26,99 +26,51 @@ import * as i1 from "./pager-context.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./navigation.service";
 export 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.
@@ -131,6 +83,12 @@ export 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.
@@ -160,6 +118,31 @@ export 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;
     }
@@ -185,10 +168,33 @@ export 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';
         }));
@@ -201,10 +207,10 @@ export 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');
     }
@@ -217,6 +223,9 @@ export class PagerComponent {
             });
             this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         }
+        if (changes['responsive']) {
+            this.responsive && this.resizeHandler();
+        }
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -250,11 +259,53 @@ export 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;
@@ -270,11 +321,17 @@ export 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) {
@@ -287,6 +344,9 @@ export class PagerComponent {
                 }
             }
             else {
+                if (e.target !== wrapper) {
+                    return;
+                }
                 if (isArrowLeftOrPageUp) {
                     e.preventDefault();
                     !isFirstPage && this.pagerContext.prevPage();
@@ -296,9 +356,6 @@ export 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);
@@ -320,18 +377,20 @@ export 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: i1.PagerContextService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.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: i1.PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.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"
 
@@ -367,35 +426,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,
@@ -406,7 +466,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"
 
@@ -442,48 +505,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: i1.PagerContextService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.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: i1.PagerContextService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.PagerNavigationService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { template: [{
                 type: ContentChildren,
                 args: [PagerTemplateDirective]
+            }], externalTemplate: [{
+                type: Input
             }], total: [{
                 type: Input
             }], skip: [{
@@ -504,6 +565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], responsive: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{

package/esm2022/pager/pager.module.mjs

@@ -0,0 +1,65 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { ResizeBatchService } from '@progress/kendo-angular-common';
+import { KENDO_PAGER } from '../directives';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { PopupService } from '@progress/kendo-angular-popup';
+import * as i0 from "@angular/core";
+import * as i1 from "./localization/custom-messages.component";
+import * as i2 from "./focusable.directive";
+import * as i3 from "./pager-info.component";
+import * as i4 from "./pager-input.component";
+import * as i5 from "./pager-next-buttons.component";
+import * as i6 from "./pager-numeric-buttons.component";
+import * as i7 from "./pager-page-sizes.component";
+import * as i8 from "./pager-prev-buttons.component";
+import * as i9 from "./pager-template.directive";
+import * as i10 from "./pager.component";
+import * as i11 from "./spacer.component";
+//IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * 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 {
+ * }
+ * ```
+ */
+export 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: [i1.CustomMessagesComponent, i2.PagerFocusableDirective, i3.PagerInfoComponent, i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i9.PagerTemplateDirective, i10.PagerComponent, i11.PagerSpacerComponent], exports: [i1.CustomMessagesComponent, i2.PagerFocusableDirective, i3.PagerInfoComponent, i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i9.PagerTemplateDirective, i10.PagerComponent, i11.PagerSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, providers: [
+            IconsService,
+            PopupService,
+            ResizeBatchService
+        ], imports: [i4.PagerInputComponent, i5.PagerNextButtonsComponent, i6.PagerNumericButtonsComponent, i7.PagerPageSizesComponent, i8.PagerPrevButtonsComponent, i10.PagerComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [...KENDO_PAGER],
+                    imports: [...KENDO_PAGER],
+                    providers: [
+                        IconsService,
+                        PopupService,
+                        ResizeBatchService
+                    ]
+                }]
+        }] });

package/{esm2020 → esm2022}/pager/pagesizechange-event.mjs

@@ -8,6 +8,10 @@ import { PreventableEvent } from './preventable-event';
  * is changed from the UI. If you cancel the event, the change is prevented.
  */
 export 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.

package/{esm2020 → esm2022}/pager/preventable-event.mjs

@@ -6,9 +6,7 @@
  * @hidden
  */
 export 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.