@progress/kendo-angular-pager 19.0.0-develop.12 → 19.0.0-develop.14

package/esm2022/pager/pager.component.mjs

@@ -2,12 +2,12 @@
 * Copyright © 2025 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, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList, Optional, SkipSelf, inject } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, ElementRef, Renderer2, NgZone, HostListener, ContentChildren, QueryList, Optional, SkipSelf, inject, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { PagerTemplateDirective } from "./pager-template.directive";
-import { anyChanged, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
+import { anyChanged, isDocumentAvailable, 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, replaceMessagePlaceholder } from '../util';
+import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE, replaceMessagePlaceholder, calculatePadding, createMeasurementSpan, copyComputedStyles, positionOffScreen } from '../util';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -15,12 +15,12 @@ import { PagerNavigationService } from './navigation.service';
 import { PagerNumericButtonsComponent } from './pager-numeric-buttons.component';
 import { PagerInfoComponent } from './pager-info.component';
 import { PagerPageSizesComponent } from './pager-page-sizes.component';
-import { RESPONSIVE_BREAKPOINT_MEDIUM, RESPONSIVE_BREAKPOINT_LARGE } from './common/constants';
 import { PagerNextButtonsComponent } from './pager-next-buttons.component';
 import { PagerInputComponent } from './pager-input.component';
 import { PagerPrevButtonsComponent } from './pager-prev-buttons.component';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "./pager-context.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -31,8 +31,29 @@ export class PagerComponent {
     localization;
     renderer;
     ngZone;
+    cdr;
     navigationService;
     template;
+    set numericButtons(buttons) {
+        const newWidth = buttons ? buttons.nativeElement?.offsetWidth : 0;
+        if (buttons && newWidth !== this.pagerDimensions.numericButtonsWidth) {
+            this.pagerDimensions.numericButtonsWidth = newWidth;
+        }
+    }
+    set pagerInput(input) {
+        const newWidth = input ? input.nativeElement?.offsetWidth : 0;
+        if (input && newWidth !== this.pagerDimensions.inputWidth) {
+            this.pagerDimensions.inputWidth = newWidth;
+        }
+    }
+    pagerInputComponent;
+    set pageSizes(sizes) {
+        const newWidth = sizes ? sizes.nativeElement?.offsetWidth : 0;
+        if (sizes && newWidth !== this.pagerDimensions.pageSizesWidth) {
+            this.pagerDimensions.pageSizesWidth = newWidth;
+        }
+    }
+    pageSizesComponent;
     /**
      * @hidden
      */
@@ -121,12 +142,17 @@ export class PagerComponent {
         return this._size;
     }
     /**
-     * @hidden
-     * Toggles the Pager responsive functionality.
+     * Toggles the Pager responsive functionality ([see example](slug:responsive_pager)).
      *
      * @default true
      */
     responsive = true;
+    /**
+     * Toggles the Pager adaptiveness functionality ([see example](slug:adaptive_mode_pager)).
+     *
+     * @default 'auto'
+     */
+    adaptiveMode = 'auto';
     /**
      * 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.
@@ -170,6 +196,14 @@ export class PagerComponent {
         context.currentPage = this.currentPage;
         return context;
     }
+    /**
+     * @hidden
+     */
+    showInput = false;
+    /**
+     * @hidden
+     */
+    initialized = false;
     subscriptions = new Subscription();
     _templateContext = {};
     _pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
@@ -177,12 +211,29 @@ export class PagerComponent {
     isInnerNavigationEnabled = false;
     _navigable = false;
     _size = DEFAULT_SIZE;
-    constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
+    /**
+     * Stores the measurements of various Pager elements.
+     * These dimensions are used for responsive layout calculations.
+     * @hidden
+     */
+    pagerDimensions = {
+        padding: 0,
+        numericButtonsWidth: 0,
+        inputWidth: 0,
+        pageSizesWidth: 0,
+        sizesTextWidth: 0,
+        pageTextWidth: 0,
+        infoTextWidth: 0,
+        gapNumbersSizes: 0,
+        gapSizesInfo: 0
+    };
+    constructor(pagerContext, element, localization, renderer, ngZone, cdr, navigationService) {
         this.pagerContext = pagerContext;
         this.element = element;
         this.localization = localization;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.cdr = cdr;
         this.navigationService = navigationService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
@@ -199,6 +250,8 @@ export class PagerComponent {
         this.subscriptions.add(this.pagerContext.pageSizeChange.subscribe(this.changePageSize.bind(this)));
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
+            this.measureAllTextWidths();
+            this.responsive && this.resizeHandler();
         }));
         this.subscriptions.add(this.navigationService.innerNavigationChange.subscribe(this.innerNavigationChange.bind(this)));
         if (this.navigable) {
@@ -207,14 +260,34 @@ export class PagerComponent {
                 this.subscriptions.add(this.renderer.listen(wrapper, 'keydown', this.keyDownHandler.bind(this)));
             });
         }
+        if (this.type === 'input') {
+            this.showInput = true;
+        }
+    }
+    get maxItems() {
+        return Math.min(this.currentPage * this.pageSize, this.total);
     }
     ngAfterViewInit() {
-        this.responsive && this.resizeHandler();
         this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         this.subscriptions.add(this.template.changes.subscribe(() => {
+            this.measureAllTextWidths();
             this.responsive && this.resizeHandler();
         }));
         this.handleClasses(this.size, 'size');
+        this.measureAllTextWidths();
+        const padding = calculatePadding(this.element.nativeElement);
+        this.pagerDimensions.padding = padding.padding;
+        this.pagerDimensions.gapNumbersSizes = padding.gapNumbersSizes;
+        this.pagerDimensions.gapSizesInfo = padding.gapSizesInfo;
+        if (!isDocumentAvailable()) {
+            this.initialized = true;
+            return;
+        }
+        this.responsive && this.resizeHandler();
+        setTimeout(() => {
+            this.initialized = true;
+            this.cdr.markForCheck();
+        }, 0);
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -226,7 +299,14 @@ export class PagerComponent {
             this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
         }
         if (changes['responsive']) {
+            this.measureAllTextWidths();
             this.responsive && this.resizeHandler();
+            if (!this.responsive) {
+                this.showInput = this.type === 'input';
+            }
+        }
+        if (changes['type']) {
+            this.showNumericButtonsResponsive();
         }
     }
     ngOnDestroy() {
@@ -268,40 +348,37 @@ export class PagerComponent {
         if (this.template?.first && !this.responsive) {
             return;
         }
-        const width = this.element.nativeElement.offsetWidth;
+        if (!isDocumentAvailable() || !this.element?.nativeElement) {
+            this.initialized = true;
+            return;
+        }
+        let pagerWidth = this.element.nativeElement.offsetWidth;
+        if (pagerWidth <= 0) {
+            return;
+        }
         this.ngZone.runOutsideAngular(() => {
             setTimeout(() => {
-                const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+                if (this.template?.first || !this.responsive) {
+                    return;
+                }
+                const numericButtonsWrapperElement = this.element.nativeElement.querySelector('.k-pager-numbers-wrap');
                 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');
-                    }
+                let elementsWidths = numericButtonsWrapperElement?.offsetWidth + (pagerPageSizes?.offsetWidth || 0) + (pagerInfoElement?.offsetWidth > 0 ? Math.min(this.pagerDimensions.infoTextWidth) : 0);
+                if (this.isElementVisible(pagerInfoElement)) {
+                    elementsWidths += this.pagerDimensions.gapSizesInfo;
                 }
-                if (pagerInfoElement) {
-                    if (width < RESPONSIVE_BREAKPOINT_LARGE) {
-                        this.renderer.addClass(pagerInfoElement, 'k-hidden');
-                    }
-                    else {
-                        this.renderer.removeClass(pagerInfoElement, 'k-hidden');
-                    }
+                pagerWidth -= this.pagerDimensions.padding;
+                if (this.isElementVisible(pagerPageSizes)) {
+                    pagerWidth -= this.pagerDimensions.gapNumbersSizes;
                 }
-                if (pagerPageSizes) {
-                    if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                        this.renderer.addClass(pagerPageSizes, 'k-hidden');
-                    }
-                    else {
-                        this.renderer.removeClass(pagerPageSizes, 'k-hidden');
-                    }
+                if (Math.ceil(elementsWidths) <= pagerWidth) {
+                    this.showElementsInOrder(pagerWidth, elementsWidths);
                 }
+                else {
+                    this.hideElementsInOrder(pagerWidth, elementsWidths);
+                }
+                !this.initialized && this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
             });
         });
     };
@@ -379,8 +456,172 @@ export class PagerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, deps: [{ token: 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: [
+    showElementsInOrder(availableWidth, currentWidth) {
+        const el = this.element.nativeElement;
+        const numericButtonsElement = el.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+        const pagerInfoElement = el.querySelector('.k-pager-info');
+        const pagerPageSizes = el.querySelector('.k-pager-sizes');
+        const pagerInput = el.querySelector('kendo-pager-input');
+        const pagerSizesDropDown = el.querySelector('.k-pager-sizes .k-dropdownlist');
+        if (this.type === 'input' && this.isElementVisible(pagerInfoElement) || this.isElementVisible(numericButtonsElement)) {
+            return;
+        }
+        if (!this.isElementVisible(pagerPageSizes)) {
+            const addDropDownWidth = currentWidth + this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth;
+            if (addDropDownWidth > availableWidth)
+                return;
+            this.ngZone.run(() => this.pageSizesComponent && (this.pageSizesComponent.showItemsText = false));
+            this.showElement(pagerPageSizes);
+            currentWidth = addDropDownWidth;
+            if (currentWidth >= availableWidth)
+                return;
+        }
+        if (this.isElementVisible(pagerPageSizes) && this.pageSizesComponent && !this.pageSizesComponent.showItemsText) {
+            const addPageSizesText = currentWidth - pagerSizesDropDown?.offsetWidth + this.pagerDimensions.pageSizesWidth;
+            if (addPageSizesText > availableWidth)
+                return;
+            this.ngZone.run(() => this.pageSizesComponent.showItemsText = true);
+            currentWidth = addPageSizesText;
+            if (currentWidth >= availableWidth)
+                return;
+        }
+        if (this.isElementVisible(pagerPageSizes) && this.pageSizesComponent?.showItemsText && this.pagerInputComponent && !this.pagerInputComponent.showPageText) {
+            const addPageText = currentWidth - pagerInput?.offsetWidth + this.pagerDimensions.inputWidth;
+            if (addPageText > availableWidth)
+                return;
+            this.ngZone.run(() => this.pagerInputComponent.showPageText = true);
+            currentWidth = addPageText;
+            if (currentWidth >= availableWidth)
+                return;
+        }
+        if (this.isElementVisible(pagerPageSizes) && this.pagerInputComponent?.showPageText) {
+            const addInfoText = currentWidth + this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo;
+            if (addInfoText > availableWidth)
+                return;
+            this.ngZone.run(() => {
+                this.showElement(pagerInfoElement);
+            });
+            currentWidth = addInfoText;
+        }
+        if (this.isElementVisible(pagerInfoElement) && this.type === 'numeric') {
+            const addNumericButtons = currentWidth - this.pagerDimensions.inputWidth + this.pagerDimensions.numericButtonsWidth;
+            if (addNumericButtons > availableWidth)
+                return;
+            this.showElement(numericButtonsElement);
+            this.ngZone.run(() => {
+                this.showInput = false;
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    hideElementsInOrder(availableWidth, currentWidth) {
+        const el = this.element.nativeElement;
+        const numericButtonsElement = el.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+        const pagerInfoElement = el.querySelector('.k-pager-info');
+        const pagerPageSizes = el.querySelector('.k-pager-sizes');
+        const pagerSizesDropDown = el.querySelector('.k-pager-sizes .k-dropdownlist');
+        if (this.isElementVisible(numericButtonsElement)) {
+            this.hideElement(numericButtonsElement);
+            this.ngZone.run(() => this.showInput = true);
+            currentWidth += this.pagerDimensions.inputWidth - this.pagerDimensions.numericButtonsWidth;
+            if (currentWidth <= availableWidth)
+                return;
+        }
+        if (this.isElementVisible(pagerInfoElement)) {
+            this.hideElement(pagerInfoElement);
+            currentWidth -= this.pagerDimensions.infoTextWidth;
+            if (currentWidth <= availableWidth)
+                return;
+        }
+        if (this.pagerInputComponent?.showPageText) {
+            this.ngZone.run(() => this.pagerInputComponent.showPageText = false);
+            currentWidth = currentWidth - this.pagerDimensions.pageTextWidth;
+            if (currentWidth <= availableWidth)
+                return;
+        }
+        if (this.isElementVisible(pagerPageSizes) && this.pageSizesComponent?.showItemsText) {
+            this.ngZone.run(() => this.pageSizesComponent.showItemsText = false);
+            currentWidth = currentWidth - this.pagerDimensions.pageSizesWidth + pagerSizesDropDown?.offsetWidth;
+            if (currentWidth <= availableWidth)
+                return;
+        }
+        this.hideElement(pagerPageSizes);
+    }
+    isElementVisible(element) {
+        return element && !element?.classList.contains('k-hidden');
+    }
+    hideElement(element) {
+        if (element) {
+            this.renderer.addClass(element, 'k-hidden');
+        }
+    }
+    showElement(element) {
+        if (element) {
+            this.renderer.removeClass(element, 'k-hidden');
+        }
+    }
+    measureAllTextWidths() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const el = this.element.nativeElement;
+        const existingInfo = el.querySelector('.k-pager-info');
+        const existingInput = el.querySelector('.k-pager-input');
+        const existingSizes = el.querySelector('.k-pager-sizes');
+        // create a single measurement container
+        const measureContainer = this.renderer.createElement('div');
+        positionOffScreen(this.renderer, measureContainer);
+        this.renderer.appendChild(this.element.nativeElement, measureContainer);
+        const infoSpan = createMeasurementSpan(this.renderer, measureContainer, 'k-pager-info');
+        const pageSpan = createMeasurementSpan(this.renderer, measureContainer, 'k-pager-input');
+        const sizesSpan = createMeasurementSpan(this.renderer, measureContainer, 'k-pager-sizes');
+        const infoText = `${this.currentPage} - ${this.maxItems} ${this.localization.get('of')} ${this.total} ${this.localization.get('items')}`;
+        this.renderer.setProperty(infoSpan, 'textContent', infoText);
+        this.renderer.setProperty(pageSpan, 'textContent', this.localization.get('page'));
+        this.renderer.setProperty(sizesSpan, 'textContent', this.localization.get('itemsPerPage'));
+        // copy computed styles if available
+        if (existingInfo)
+            copyComputedStyles(this.renderer, existingInfo, infoSpan);
+        if (existingInput)
+            copyComputedStyles(this.renderer, existingInput, pageSpan);
+        if (existingSizes)
+            copyComputedStyles(this.renderer, existingSizes, sizesSpan);
+        // force a reflow to ensure measurements are accurate
+        measureContainer.getBoundingClientRect();
+        this.pagerDimensions.infoTextWidth = infoSpan?.offsetWidth;
+        if (this.pagerDimensions.inputWidth && this.pagerDimensions.pageTextWidth) {
+            this.pagerDimensions.inputWidth = this.pagerDimensions.inputWidth - this.pagerDimensions.pageTextWidth + pageSpan.offsetWidth;
+        }
+        this.pagerDimensions.pageTextWidth = pageSpan?.offsetWidth;
+        if (this.pagerDimensions.pageSizesWidth && this.pagerDimensions.sizesTextWidth) {
+            this.pagerDimensions.pageSizesWidth = this.pagerDimensions.pageSizesWidth - this.pagerDimensions.sizesTextWidth + sizesSpan.offsetWidth;
+        }
+        this.pagerDimensions.sizesTextWidth = sizesSpan?.offsetWidth;
+        this.renderer.removeChild(this.element.nativeElement, measureContainer);
+    }
+    showNumericButtonsResponsive() {
+        if (!this.responsive || (!this.numericButtons && !this.pagerInput) || !isDocumentAvailable()) {
+            this.showInput = this.type === 'input';
+            return;
+        }
+        const pagerInfoElement = this.element.nativeElement.querySelector('.k-pager-info');
+        if (this.type === 'input' || !this.isElementVisible(pagerInfoElement)) {
+            this.showInput = true;
+            return;
+        }
+        const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+        if (this.isElementVisible(numericButtonsElement)) {
+            this.showInput = false;
+            return;
+        }
+        const pagerWidth = this.element.nativeElement?.offsetWidth;
+        const numericButtonsWrapperElement = this.element.nativeElement.querySelector('.k-pager-numbers-wrap');
+        const elementsWidths = numericButtonsWrapperElement?.offsetWidth + this.pagerDimensions.pageSizesWidth + this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo;
+        const hasAvailableWidth = pagerWidth > elementsWidths - this.pagerDimensions.inputWidth + this.pagerDimensions.numericButtonsWidth;
+        this.showInput = !hasAvailableWidth;
+    }
+    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: i0.ChangeDetectorRef }, { 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", adaptiveMode: "adaptiveMode" }, 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,
@@ -388,7 +629,7 @@ export class PagerComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.pager'
             }
-        ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], exportAs: ["kendoDataPager", "kendoPager"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "template", predicate: PagerTemplateDirective }], viewQueries: [{ propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true, read: ElementRef }, { propertyName: "pagerInput", first: true, predicate: PagerInputComponent, descendants: true, read: ElementRef }, { propertyName: "pagerInputComponent", first: true, predicate: PagerInputComponent, descendants: true }, { propertyName: "pageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "pageSizesComponent", first: true, predicate: PagerPageSizesComponent, descendants: true }], 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}' }}"
@@ -433,25 +674,27 @@ export class PagerComponent {
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-template #default>
-            <div class="k-pager-numbers-wrap">
+            <div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? '1' : '0'}">
                 <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-pager-numeric-buttons>
-                <kendo-pager-input [size]="size" *ngIf="type === 'input'"></kendo-pager-input>
+                <kendo-pager-input [size]="size" *ngIf="showInput"></kendo-pager-input>
                 <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
             </div>
             <kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
+                [ngStyle]="{opacity: initialized ? '1' : '0'}"
                 [size]="size"
-                [pageSizes]="_pageSizeValues">
+                [pageSizes]="_pageSizeValues"
+                [adaptiveMode]="adaptiveMode">
             </kendo-pager-page-sizes>
-            <kendo-pager-info *ngIf="info">
+            <kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? '1' : '0'}">
             </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"] }] });
+  `, 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: ["showPageText", "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: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
@@ -512,39 +755,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-template #default>
-            <div class="k-pager-numbers-wrap">
+            <div class="k-pager-numbers-wrap" [ngStyle]="{opacity: initialized ? '1' : '0'}">
                 <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-pager-numeric-buttons>
-                <kendo-pager-input [size]="size" *ngIf="type === 'input'"></kendo-pager-input>
+                <kendo-pager-input [size]="size" *ngIf="showInput"></kendo-pager-input>
                 <kendo-pager-next-buttons [size]="size" *ngIf="previousNext"></kendo-pager-next-buttons>
             </div>
             <kendo-pager-page-sizes *ngIf="_pageSizeValues.length"
+                [ngStyle]="{opacity: initialized ? '1' : '0'}"
                 [size]="size"
-                [pageSizes]="_pageSizeValues">
+                [pageSizes]="_pageSizeValues"
+                [adaptiveMode]="adaptiveMode">
             </kendo-pager-page-sizes>
-            <kendo-pager-info *ngIf="info">
+            <kendo-pager-info *ngIf="info" [ngStyle]="{opacity: initialized ? '1' : '0'}">
             </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]
+                    imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerPageSizesComponent, PagerInfoComponent, ResizeSensorComponent, NgStyle]
                 }]
         }], 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: i0.ElementRef }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.PagerNavigationService, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
                 }] }]; }, propDecorators: { template: [{
                 type: ContentChildren,
                 args: [PagerTemplateDirective]
+            }], numericButtons: [{
+                type: ViewChild,
+                args: [PagerNumericButtonsComponent, { read: ElementRef }]
+            }], pagerInput: [{
+                type: ViewChild,
+                args: [PagerInputComponent, { read: ElementRef }]
+            }], pagerInputComponent: [{
+                type: ViewChild,
+                args: [PagerInputComponent]
+            }], pageSizes: [{
+                type: ViewChild,
+                args: [PagerPageSizesComponent, { read: ElementRef }]
+            }], pageSizesComponent: [{
+                type: ViewChild,
+                args: [PagerPageSizesComponent]
             }], externalTemplate: [{
                 type: Input
             }], total: [{
@@ -569,6 +829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], responsive: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{

package/esm2022/util.mjs

@@ -64,3 +64,51 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
  * @hidden
  */
 export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+export const calculatePadding = (element) => {
+    const computedStyle = window.getComputedStyle(element);
+    const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
+    const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
+    const padding = (paddingLeft + paddingRight) * 1.2; // account for rounding errors
+    const style = getComputedStyle(document.documentElement);
+    const gapNumbersSizes = 2 * (parseFloat(style.getPropertyValue('--kendo-spacing-3\\.5') || '0.875rem') * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16)); // convert rem to px
+    const gapSizesInfo = gapNumbersSizes;
+    return { padding, gapNumbersSizes, gapSizesInfo };
+};
+/**
+ * @hidden
+ */
+export const createMeasurementSpan = (renderer, container, className) => {
+    const span = renderer.createElement('span');
+    renderer.appendChild(container, span);
+    renderer.addClass(span, className);
+    return span;
+};
+/**
+ * @hidden
+ */
+export const copyComputedStyles = (renderer, source, destination) => {
+    const computedStyle = getComputedStyle(source);
+    const importantStyles = [
+        'font-family', 'font-size', 'font-weight', 'font-style',
+        'letter-spacing', 'text-transform', 'white-space', 'word-spacing',
+        'padding-left', 'padding-right', 'margin-left', 'margin-right',
+        'border-left-width', 'border-right-width', 'box-sizing'
+    ];
+    importantStyles.forEach(style => {
+        renderer.setStyle(destination, style, computedStyle.getPropertyValue(style));
+    });
+};
+/**
+ *
+ * @hidden
+ */
+export const positionOffScreen = (renderer, element) => {
+    renderer.setStyle(element, 'position', 'absolute');
+    renderer.setStyle(element, 'visibility', 'hidden');
+    renderer.setStyle(element, 'left', '-9999px');
+    renderer.setStyle(element, 'top', '-9999px');
+    renderer.setStyle(element, 'display', 'flex');
+};