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

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, isChanged, 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
      */
@@ -85,6 +106,9 @@ export class PagerComponent {
             this._pageSizeValues = value;
         }
     }
+    get pageSizeValues() {
+        return this._pageSizeValues;
+    }
     /**
      * Toggles the **Previous** and **Next** buttons.
      *
@@ -93,8 +117,8 @@ export class PagerComponent {
     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.
-     * @default false
+     * By default, navigation is enabled. To disable it and make the Pager content accessible in the normal tab sequence, set the property to `false`.
+     * @default true
      */
     set navigable(value) {
         this._navigable = value;
@@ -121,12 +145,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.
@@ -138,7 +167,22 @@ export class PagerComponent {
      * If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
      */
     pageSizeChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    pagerInputVisibilityChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    pageTextVisibilityChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    itemsTextVisibilityChange = new EventEmitter();
     pagerClass = true;
+    get responsiveClass() {
+        return this.responsive;
+    }
     widgetRole = 'application';
     roleDescription = 'pager';
     keyShortcuts = 'Enter ArrowRight ArrowLeft';
@@ -170,19 +214,76 @@ export class PagerComponent {
         context.currentPage = this.currentPage;
         return context;
     }
+    /**
+     * @hidden
+     */
+    get showPageText() {
+        return this._showPageText;
+    }
+    set showPageText(value) {
+        this._showPageText = value;
+        this.pagerInputComponent && (this.pagerInputComponent.showPageText = value);
+        this.pageTextVisibilityChange.emit(value);
+    }
+    /**
+     * @hidden
+     */
+    get showItemsText() {
+        return this._showItemsText;
+    }
+    set showItemsText(value) {
+        this._showItemsText = value;
+        this.pageSizesComponent && (this.pageSizesComponent.showItemsText = value);
+        this.itemsTextVisibilityChange.emit(value);
+    }
+    /**
+     * @hidden
+     */
+    get showInput() {
+        return this._showInput;
+    }
+    set showInput(value) {
+        this._showInput = value;
+        this.pagerInputVisibilityChange.emit(value);
+    }
+    /**
+     * @hidden
+     */
+    initialized = false;
     subscriptions = new Subscription();
     _templateContext = {};
     _pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
     direction;
     isInnerNavigationEnabled = false;
-    _navigable = false;
+    _navigable = true;
     _size = DEFAULT_SIZE;
-    constructor(pagerContext, element, localization, renderer, ngZone, navigationService) {
+    _showInput = true;
+    _showPageText = true;
+    _showItemsText = true;
+    /**
+     * 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,
+        width: 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 +300,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) {
@@ -208,25 +311,67 @@ export class PagerComponent {
             });
         }
     }
+    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.responsive && this.resizeHandler();
+            this.measureAllTextWidths();
+            this.responsive && this.resizeHandler(false);
         }));
         this.handleClasses(this.size, 'size');
+        this.measureAllTextWidths();
+        !this.numericButtons && (this.pagerDimensions.numericButtonsWidth = this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0);
+        !this.pagerInput && (this.pagerDimensions.inputWidth = this.element.nativeElement.querySelector('.k-pager-input')?.offsetWidth ?? 0);
+        !this.pageSizes && (this.pagerDimensions.pageSizesWidth = this.element.nativeElement.querySelector('.k-pager-sizes')?.offsetWidth ?? 0);
+        const padding = calculatePadding(this.element.nativeElement);
+        this.pagerDimensions.padding = padding.padding;
+        this.pagerDimensions.gapNumbersSizes = padding.gapNumbersSizes;
+        this.pagerDimensions.gapSizesInfo = padding.gapSizesInfo;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.type !== 'input') {
+                this.showInput = false;
+            }
+        });
+        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)) {
+            const previousButtonCount = Math.min(this.buttonCount, (changes['total']?.previousValue || this.total) / (changes['pageSize']?.previousValue || this.pageSize));
             this.pagerContext.notifyChanges({
                 pageSize: this.pageSize,
                 skip: this.skip,
                 total: this.total
             });
+            this.pagerDimensions.numericButtonsWidth = (this.pagerDimensions.numericButtonsWidth * Math.min(this.buttonCount, this.total / this.pageSize)) / previousButtonCount;
             this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
+            this.responsive && this.resizeHandler(false);
         }
-        if (changes['responsive']) {
-            this.responsive && this.resizeHandler();
+        if (anyChanged(["pageSizeValues", "previousNext", "buttonCount"], changes, true)) {
+            this.responsive && this.resizeHandler(false);
+        }
+        if (isChanged('responsive', changes, true)) {
+            if (changes['responsive'].currentValue && !changes['responsive'].previousValue) {
+                this.measureAllTextWidths();
+                this.resizeHandler(false);
+            }
+            if (!this.responsive) {
+                this.showInput = this.type === 'input';
+                this.showElementsInOrder(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
+            }
+        }
+        if (isChanged('type', changes, true)) {
+            this.showNumericButtonsResponsive();
+            this.responsive && this.resizeHandler(false);
         }
     }
     ngOnDestroy() {
@@ -264,44 +409,47 @@ export class PagerComponent {
     /**
      * @hidden
      */
-    resizeHandler = () => {
+    resizeHandler = (compareWidth = true) => {
         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;
+        }
+        if (compareWidth && pagerWidth === this.pagerDimensions.width) {
+            return;
+        }
+        else {
+            this.pagerDimensions.width = pagerWidth;
+        }
         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;
+                }
+                pagerWidth -= this.pagerDimensions.padding;
+                if (this.isElementVisible(pagerPageSizes)) {
+                    pagerWidth -= this.pagerDimensions.gapNumbersSizes;
                 }
-                if (pagerInfoElement) {
-                    if (width < RESPONSIVE_BREAKPOINT_LARGE) {
-                        this.renderer.addClass(pagerInfoElement, 'k-hidden');
-                    }
-                    else {
-                        this.renderer.removeClass(pagerInfoElement, 'k-hidden');
-                    }
+                if (Math.ceil(elementsWidths) <= pagerWidth) {
+                    this.showElementsInOrder(pagerWidth, elementsWidths);
                 }
-                if (pagerPageSizes) {
-                    if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                        this.renderer.addClass(pagerPageSizes, 'k-hidden');
-                    }
-                    else {
-                        this.renderer.removeClass(pagerPageSizes, 'k-hidden');
-                    }
+                else {
+                    this.hideElementsInOrder(pagerWidth, elementsWidths);
                 }
+                !this.initialized && this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
             });
         });
     };
@@ -379,8 +527,183 @@ 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 pagerSizesDropDown = el.querySelector('.k-pager-sizes .k-dropdownlist');
+        const checkOverflow = this.responsive;
+        if (this.type === 'input' && this.isElementVisible(pagerInfoElement) || this.isElementVisible(numericButtonsElement)) {
+            return;
+        }
+        if (this.showPageSizes && !this.isElementVisible(pagerPageSizes)) {
+            const addDropDownWidth = currentWidth + this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth;
+            if (checkOverflow && addDropDownWidth > availableWidth)
+                return;
+            this.ngZone.run(() => this.showItemsText = false);
+            this.showElement(pagerPageSizes);
+            currentWidth = addDropDownWidth;
+            if (checkOverflow && currentWidth >= availableWidth)
+                return;
+        }
+        if (this.showPageSizes && this.isElementVisible(pagerPageSizes) && !this.showItemsText) {
+            const addPageSizesText = currentWidth - pagerSizesDropDown?.offsetWidth + this.pagerDimensions.pageSizesWidth;
+            if (checkOverflow && addPageSizesText > availableWidth)
+                return;
+            this.ngZone.run(() => this.showItemsText = true);
+            currentWidth = addPageSizesText;
+            if (checkOverflow && currentWidth >= availableWidth)
+                return;
+        }
+        if (!this.showPageText && (!this.showPageSizes || (this.isElementVisible(pagerPageSizes) && this.showItemsText))) {
+            const addPageText = currentWidth + this.pagerDimensions.pageTextWidth;
+            if (checkOverflow && addPageText > availableWidth)
+                return;
+            this.ngZone.run(() => this.showPageText = true);
+            currentWidth = addPageText;
+            if (checkOverflow && currentWidth >= availableWidth)
+                return;
+        }
+        if (this.info && !this.isElementVisible(pagerInfoElement) && (!this.showPageSizes || (this.isElementVisible(pagerPageSizes) && this.showPageText))) {
+            const addInfoText = currentWidth + this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo;
+            if (checkOverflow && addInfoText > availableWidth)
+                return;
+            this.ngZone.run(() => {
+                this.showElement(pagerInfoElement);
+            });
+            currentWidth = addInfoText;
+        }
+        if (this.type === 'numeric' && (!this.info || this.isElementVisible(pagerInfoElement))) {
+            const addNumericButtons = currentWidth - this.pagerDimensions.inputWidth + this.pagerDimensions.numericButtonsWidth;
+            if (checkOverflow && 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 + this.pagerDimensions.gapSizesInfo);
+            if (currentWidth <= availableWidth)
+                return;
+        }
+        if (this.showPageText) {
+            this.ngZone.run(() => this.showPageText = false);
+            currentWidth = currentWidth - this.pagerDimensions.pageTextWidth;
+            if (currentWidth <= availableWidth)
+                return;
+        }
+        if (this.showPageSizes && this.isElementVisible(pagerPageSizes) && this.showItemsText) {
+            this.ngZone.run(() => this.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 (!isDocumentAvailable() || !this.element?.nativeElement) {
+            return;
+        }
+        const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+        const hasNumericButtons = this.numericButtons || numericButtonsElement;
+        const hasInput = this.pagerInput || this.element.nativeElement.querySelector('.k-pager-input');
+        if (!this.responsive || (!hasNumericButtons && !hasInput)) {
+            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;
+        }
+        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;
+    }
+    get showPageSizes() {
+        if (typeof this.pageSizeValues === 'boolean') {
+            return this.pageSizeValues;
+        }
+        return this.pageSizeValues?.length > 0;
+    }
+    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", pagerInputVisibilityChange: "pagerInputVisibilityChange", pageTextVisibilityChange: "pageTextVisibilityChange", itemsTextVisibilityChange: "itemsTextVisibilityChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "class.k-pager-responsive": "this.responsiveClass", "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 +711,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 +756,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 ? null : '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 ? null : '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 ? null : '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 +837,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 ? null : '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 ? null : '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 ? null : '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,13 +911,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], responsive: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{
                 type: Output
+            }], pagerInputVisibilityChange: [{
+                type: Output
+            }], pageTextVisibilityChange: [{
+                type: Output
+            }], itemsTextVisibilityChange: [{
+                type: Output
             }], pagerClass: [{
                 type: HostBinding,
                 args: ['class.k-pager']
+            }], responsiveClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-responsive']
             }], widgetRole: [{
                 type: HostBinding,
                 args: ['attr.role']