@progress/kendo-angular-pager 21.0.0-develop.2 → 21.0.0-develop.21

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761752851,
-    version: '21.0.0-develop.2',
+    publishDate: 1762426777,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/pager/common/responsive-element.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/pager/pager.component.mjs

@@ -195,9 +195,9 @@ export class PagerComponent {
     /**
      * Determines whether the Pager adaptiveness functionality is enabled ([see example](slug:adaptive_mode_pager)).
      *
-     * @default 'auto'
+     * @default 'none'
      */
-    adaptiveMode = 'auto';
+    adaptiveMode = 'none';
     /**
      * Fires when the current page of the Pager changes ([see example](slug:overview_pager)).
      * You have to handle the event and page the data.
@@ -376,36 +376,23 @@ export class PagerComponent {
             }
         }));
         this.handleClasses(this.size, 'size');
-        this.measureAllTextWidths();
-        if (!this.numericButtons) {
-            this.pagerDimensions.numericButtonsWidth = this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0;
-        }
-        if (!this.pagerInput) {
-            this.pagerDimensions.inputWidth = this.element.nativeElement.querySelector('.k-pager-input')?.offsetWidth ?? 0;
-        }
-        if (!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.setPagerDimensions();
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             if (this.type !== 'input') {
                 this.showInput = false;
             }
+            this.responsive && this.resizeHandler();
         });
         if (!isDocumentAvailable()) {
             this.initialized = true;
             return;
         }
-        if (this.responsive) {
-            this.resizeHandler();
-        }
-        setTimeout(() => {
-            this.initialized = true;
-            this.cdr.markForCheck();
-        }, 0);
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this.initialized = true;
+                this.cdr.markForCheck();
+            }, 0);
+        });
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -447,7 +434,7 @@ export class PagerComponent {
             }
             if (!this.responsive) {
                 this.showInput = this.type === 'input';
-                this.showElementsInOrder(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
+                this.showElements(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
             }
         }
         if (isChanged('type', changes, true)) {
@@ -518,8 +505,8 @@ export class PagerComponent {
                     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');
+                const pagerInfoElement = this.pagerInfoElement();
+                const pagerPageSizes = this.sizesDropDownElement();
                 let elementsWidths = numericButtonsWrapperElement?.offsetWidth + (pagerPageSizes?.offsetWidth || 0) + (pagerInfoElement?.offsetWidth > 0 ? Math.min(this.pagerDimensions.infoTextWidth) : 0);
                 if (this.isElementVisible(pagerInfoElement)) {
                     elementsWidths += this.pagerDimensions.gapSizesInfo;
@@ -528,18 +515,100 @@ export class PagerComponent {
                 if (this.isElementVisible(pagerPageSizes)) {
                     pagerWidth -= this.pagerDimensions.gapNumbersSizes;
                 }
-                if (Math.ceil(elementsWidths) <= pagerWidth) {
-                    this.showElementsInOrder(pagerWidth, elementsWidths);
-                }
-                else {
-                    this.hideElementsInOrder(pagerWidth, elementsWidths);
+                if (pagerWidth < 0) {
+                    return;
                 }
+                this.showElements(pagerWidth, elementsWidths);
                 if (!this.initialized) {
                     this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
                 }
             });
         });
     };
+    // use selectors to get the element even when used in a template
+    sizesDropDownElement = () => this.element.nativeElement.querySelector('.k-pager-sizes');
+    pagerInputElement = () => this.element.nativeElement.querySelector('.k-pager-input');
+    pagerInfoElement = () => this.element.nativeElement.querySelector('.k-pager-info');
+    numericButtonsElement = () => this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+    responsiveDropDownElement = {
+        name: 'sizeDropDown',
+        isEnabled: () => this.showPageSizes,
+        isVisible: () => this.isElementVisible(this.sizesDropDownElement()),
+        width: () => this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth,
+        show: () => {
+            this.ngZone.run(() => this.showItemsText = false);
+            this.showElement(this.sizesDropDownElement());
+        },
+        hide: () => {
+            this.hideElement(this.sizesDropDownElement());
+        }
+    };
+    responsiveDropDownTextElement = {
+        name: 'itemsDropDownText',
+        isEnabled: () => this.showPageSizes,
+        isVisible: () => this.isElementVisible(this.sizesDropDownElement()) && this.showItemsText,
+        width: () => this.pagerDimensions.sizesTextWidth + this.pagerDimensions.gapPageText,
+        show: () => this.ngZone.run(() => this.showItemsText = true),
+        hide: () => this.ngZone.run(() => this.showItemsText = false)
+    };
+    responsivePageTextElement = {
+        name: 'pageText',
+        isEnabled: () => this.isElementVisible(this.pagerInputElement()),
+        isVisible: () => this.showPageText,
+        width: () => this.pagerDimensions.pageTextWidth + this.pagerDimensions.gapPageText,
+        show: () => this.ngZone.run(() => this.showPageText = true),
+        hide: () => this.ngZone.run(() => this.showPageText = false)
+    };
+    responsiveInfoTextElement = {
+        name: 'infoText',
+        isEnabled: () => this.info,
+        isVisible: () => this.isElementVisible(this.pagerInfoElement()),
+        width: () => this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo,
+        show: () => {
+            this.ngZone.run(() => {
+                this.showElement(this.pagerInfoElement());
+            });
+        },
+        hide: () => {
+            this.ngZone.run(() => {
+                this.hideElement(this.pagerInfoElement());
+            });
+        }
+    };
+    responsiveNumericButtonsElement = {
+        name: 'numericButtons',
+        isEnabled: () => this.type === 'numeric',
+        isVisible: () => this.isElementVisible(this.numericButtonsElement()),
+        width: () => this.pagerDimensions.numericButtonsWidth - this.pagerDimensions.inputWidth,
+        show: () => {
+            this.showElement(this.numericButtonsElement());
+            this.ngZone.run(() => {
+                this.showInput = false;
+                this.cdr.markForCheck();
+            });
+        },
+        hide: () => {
+            this.hideElement(this.numericButtonsElement());
+            this.ngZone.run(() => {
+                this.showInput = true;
+                this.showPageText = true;
+                this.cdr.markForCheck();
+            });
+        }
+    };
+    /**
+     * Contains all elements that are subject to responsive toggling.
+     * These elements will be shown or hidden based on the available space.
+     * The order of elements in the array defines the priority of visibility.
+     * This array allows us to work with the elements without performing element-specific logic in other methods.
+     */
+    responsiveElements = [
+        this.responsiveDropDownElement,
+        this.responsiveDropDownTextElement,
+        this.responsivePageTextElement,
+        this.responsiveInfoTextElement,
+        this.responsiveNumericButtonsElement
+    ];
     get ariaLabel() {
         const localizationMsg = this.localization.get('ariaLabel') || '';
         return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
@@ -631,96 +700,40 @@ export class PagerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    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 + this.pagerDimensions.gapPageText;
-            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;
+    showElements(availableWidth, currentWidth) {
+        let index = 0;
+        while (index < this.responsiveElements.length) {
+            const element = this.responsiveElements[index];
+            if (!element.isEnabled() || element.isVisible()) {
+                index++;
+                continue;
+            }
+            const elementWidth = element.width();
+            // If not responsive, show all elements regardless of available width. If responsive, check if the current element fits
+            if (this.responsive && (currentWidth + elementWidth) > availableWidth) {
+                index++;
+                break;
+            }
+            element.show();
+            currentWidth += elementWidth;
+            index++;
         }
-        if (this.showPageText) {
-            this.ngZone.run(() => this.showPageText = false);
-            currentWidth = currentWidth - this.pagerDimensions.pageTextWidth;
-            if (currentWidth <= availableWidth)
-                return;
+        // Do not hide elements if not responsive. If all elements fit, do not hide any.
+        if (!this.responsive || 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;
+        let hideIndex = Math.min(index - 1, this.responsiveElements.length - 1);
+        while (hideIndex >= 0 && currentWidth > availableWidth) {
+            const element = this.responsiveElements[hideIndex];
+            if (!element.isEnabled() || !element.isVisible()) {
+                hideIndex--;
+                continue;
+            }
+            const elementWidth = element.width();
+            element.hide();
+            currentWidth -= elementWidth;
+            hideIndex--;
         }
-        this.hideElement(pagerPageSizes);
     }
     isElementVisible(element) {
         return element && !element?.classList.contains('k-hidden');
@@ -739,10 +752,9 @@ export class PagerComponent {
         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');
+        const existingInfo = this.pagerInfoElement();
+        const existingInput = this.pagerInputElement();
+        const existingSizes = this.sizesDropDownElement();
         // create a single measurement container
         const measureContainer = this.renderer.createElement('div');
         positionOffScreen(this.renderer, measureContainer);
@@ -778,14 +790,14 @@ export class PagerComponent {
         if (!isDocumentAvailable() || !this.element?.nativeElement) {
             return;
         }
-        const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+        const numericButtonsElement = this.numericButtonsElement();
         const hasNumericButtons = this.numericButtons || numericButtonsElement;
-        const hasInput = this.pagerInput || this.element.nativeElement.querySelector('.k-pager-input');
+        const hasInput = this.pagerInput || this.pagerInputElement();
         if (!this.responsive || (!hasNumericButtons && !hasInput)) {
             this.showInput = this.type === 'input';
             return;
         }
-        const pagerInfoElement = this.element.nativeElement.querySelector('.k-pager-info');
+        const pagerInfoElement = this.pagerInfoElement();
         if (this.type === 'input' || !this.isElementVisible(pagerInfoElement)) {
             this.showInput = true;
             return;
@@ -806,6 +818,18 @@ export class PagerComponent {
         }
         return this.pageSizeValues?.length > 0;
     }
+    setPagerDimensions() {
+        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('kendo-pager-input')?.offsetWidth ?? 0);
+        !this.pageSizes && (this.pagerDimensions.pageSizesWidth = this.sizesDropDownElement()?.offsetWidth ?? 0);
+        const padding = calculatePadding(this.element.nativeElement);
+        this.pagerDimensions.padding = padding.padding;
+        this.pagerDimensions.gapNumbersSizes = padding.gapNumbersSizes;
+        this.pagerDimensions.gapSizesInfo = padding.gapSizesInfo;
+        const innerStyledElement = this.pagerInputElement();
+        !this.pagerDimensions.gapPageText && (this.pagerDimensions.gapPageText = calculateGap(innerStyledElement));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", 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,

package/fesm2022/progress-kendo-angular-pager.mjs

@@ -1522,8 +1522,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761752851,
-    version: '21.0.0-develop.2',
+    publishDate: 1762426777,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1697,9 +1697,9 @@ class PagerComponent {
     /**
      * Determines whether the Pager adaptiveness functionality is enabled ([see example](slug:adaptive_mode_pager)).
      *
-     * @default 'auto'
+     * @default 'none'
      */
-    adaptiveMode = 'auto';
+    adaptiveMode = 'none';
     /**
      * Fires when the current page of the Pager changes ([see example](slug:overview_pager)).
      * You have to handle the event and page the data.
@@ -1878,36 +1878,23 @@ class PagerComponent {
             }
         }));
         this.handleClasses(this.size, 'size');
-        this.measureAllTextWidths();
-        if (!this.numericButtons) {
-            this.pagerDimensions.numericButtonsWidth = this.element.nativeElement.querySelector('.k-pager-numbers')?.offsetWidth ?? 0;
-        }
-        if (!this.pagerInput) {
-            this.pagerDimensions.inputWidth = this.element.nativeElement.querySelector('.k-pager-input')?.offsetWidth ?? 0;
-        }
-        if (!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.setPagerDimensions();
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             if (this.type !== 'input') {
                 this.showInput = false;
             }
+            this.responsive && this.resizeHandler();
         });
         if (!isDocumentAvailable()) {
             this.initialized = true;
             return;
         }
-        if (this.responsive) {
-            this.resizeHandler();
-        }
-        setTimeout(() => {
-            this.initialized = true;
-            this.cdr.markForCheck();
-        }, 0);
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this.initialized = true;
+                this.cdr.markForCheck();
+            }, 0);
+        });
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -1949,7 +1936,7 @@ class PagerComponent {
             }
             if (!this.responsive) {
                 this.showInput = this.type === 'input';
-                this.showElementsInOrder(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
+                this.showElements(this.element.nativeElement.offsetWidth, this.pagerDimensions.width);
             }
         }
         if (isChanged('type', changes, true)) {
@@ -2020,8 +2007,8 @@ class PagerComponent {
                     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');
+                const pagerInfoElement = this.pagerInfoElement();
+                const pagerPageSizes = this.sizesDropDownElement();
                 let elementsWidths = numericButtonsWrapperElement?.offsetWidth + (pagerPageSizes?.offsetWidth || 0) + (pagerInfoElement?.offsetWidth > 0 ? Math.min(this.pagerDimensions.infoTextWidth) : 0);
                 if (this.isElementVisible(pagerInfoElement)) {
                     elementsWidths += this.pagerDimensions.gapSizesInfo;
@@ -2030,18 +2017,100 @@ class PagerComponent {
                 if (this.isElementVisible(pagerPageSizes)) {
                     pagerWidth -= this.pagerDimensions.gapNumbersSizes;
                 }
-                if (Math.ceil(elementsWidths) <= pagerWidth) {
-                    this.showElementsInOrder(pagerWidth, elementsWidths);
-                }
-                else {
-                    this.hideElementsInOrder(pagerWidth, elementsWidths);
+                if (pagerWidth < 0) {
+                    return;
                 }
+                this.showElements(pagerWidth, elementsWidths);
                 if (!this.initialized) {
                     this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialized = true);
                 }
             });
         });
     };
+    // use selectors to get the element even when used in a template
+    sizesDropDownElement = () => this.element.nativeElement.querySelector('.k-pager-sizes');
+    pagerInputElement = () => this.element.nativeElement.querySelector('.k-pager-input');
+    pagerInfoElement = () => this.element.nativeElement.querySelector('.k-pager-info');
+    numericButtonsElement = () => this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+    responsiveDropDownElement = {
+        name: 'sizeDropDown',
+        isEnabled: () => this.showPageSizes,
+        isVisible: () => this.isElementVisible(this.sizesDropDownElement()),
+        width: () => this.pagerDimensions.pageSizesWidth + this.pagerDimensions.gapNumbersSizes - this.pagerDimensions.sizesTextWidth,
+        show: () => {
+            this.ngZone.run(() => this.showItemsText = false);
+            this.showElement(this.sizesDropDownElement());
+        },
+        hide: () => {
+            this.hideElement(this.sizesDropDownElement());
+        }
+    };
+    responsiveDropDownTextElement = {
+        name: 'itemsDropDownText',
+        isEnabled: () => this.showPageSizes,
+        isVisible: () => this.isElementVisible(this.sizesDropDownElement()) && this.showItemsText,
+        width: () => this.pagerDimensions.sizesTextWidth + this.pagerDimensions.gapPageText,
+        show: () => this.ngZone.run(() => this.showItemsText = true),
+        hide: () => this.ngZone.run(() => this.showItemsText = false)
+    };
+    responsivePageTextElement = {
+        name: 'pageText',
+        isEnabled: () => this.isElementVisible(this.pagerInputElement()),
+        isVisible: () => this.showPageText,
+        width: () => this.pagerDimensions.pageTextWidth + this.pagerDimensions.gapPageText,
+        show: () => this.ngZone.run(() => this.showPageText = true),
+        hide: () => this.ngZone.run(() => this.showPageText = false)
+    };
+    responsiveInfoTextElement = {
+        name: 'infoText',
+        isEnabled: () => this.info,
+        isVisible: () => this.isElementVisible(this.pagerInfoElement()),
+        width: () => this.pagerDimensions.infoTextWidth + this.pagerDimensions.gapSizesInfo,
+        show: () => {
+            this.ngZone.run(() => {
+                this.showElement(this.pagerInfoElement());
+            });
+        },
+        hide: () => {
+            this.ngZone.run(() => {
+                this.hideElement(this.pagerInfoElement());
+            });
+        }
+    };
+    responsiveNumericButtonsElement = {
+        name: 'numericButtons',
+        isEnabled: () => this.type === 'numeric',
+        isVisible: () => this.isElementVisible(this.numericButtonsElement()),
+        width: () => this.pagerDimensions.numericButtonsWidth - this.pagerDimensions.inputWidth,
+        show: () => {
+            this.showElement(this.numericButtonsElement());
+            this.ngZone.run(() => {
+                this.showInput = false;
+                this.cdr.markForCheck();
+            });
+        },
+        hide: () => {
+            this.hideElement(this.numericButtonsElement());
+            this.ngZone.run(() => {
+                this.showInput = true;
+                this.showPageText = true;
+                this.cdr.markForCheck();
+            });
+        }
+    };
+    /**
+     * Contains all elements that are subject to responsive toggling.
+     * These elements will be shown or hidden based on the available space.
+     * The order of elements in the array defines the priority of visibility.
+     * This array allows us to work with the elements without performing element-specific logic in other methods.
+     */
+    responsiveElements = [
+        this.responsiveDropDownElement,
+        this.responsiveDropDownTextElement,
+        this.responsivePageTextElement,
+        this.responsiveInfoTextElement,
+        this.responsiveNumericButtonsElement
+    ];
     get ariaLabel() {
         const localizationMsg = this.localization.get('ariaLabel') || '';
         return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
@@ -2133,96 +2202,40 @@ class PagerComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-    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 + this.pagerDimensions.gapPageText;
-            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;
+    showElements(availableWidth, currentWidth) {
+        let index = 0;
+        while (index < this.responsiveElements.length) {
+            const element = this.responsiveElements[index];
+            if (!element.isEnabled() || element.isVisible()) {
+                index++;
+                continue;
+            }
+            const elementWidth = element.width();
+            // If not responsive, show all elements regardless of available width. If responsive, check if the current element fits
+            if (this.responsive && (currentWidth + elementWidth) > availableWidth) {
+                index++;
+                break;
+            }
+            element.show();
+            currentWidth += elementWidth;
+            index++;
         }
-        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();
-            });
+        // Do not hide elements if not responsive. If all elements fit, do not hide any.
+        if (!this.responsive || currentWidth <= availableWidth) {
+            return;
         }
-    }
-    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;
+        let hideIndex = Math.min(index - 1, this.responsiveElements.length - 1);
+        while (hideIndex >= 0 && currentWidth > availableWidth) {
+            const element = this.responsiveElements[hideIndex];
+            if (!element.isEnabled() || !element.isVisible()) {
+                hideIndex--;
+                continue;
+            }
+            const elementWidth = element.width();
+            element.hide();
+            currentWidth -= elementWidth;
+            hideIndex--;
         }
-        this.hideElement(pagerPageSizes);
     }
     isElementVisible(element) {
         return element && !element?.classList.contains('k-hidden');
@@ -2241,10 +2254,9 @@ class PagerComponent {
         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');
+        const existingInfo = this.pagerInfoElement();
+        const existingInput = this.pagerInputElement();
+        const existingSizes = this.sizesDropDownElement();
         // create a single measurement container
         const measureContainer = this.renderer.createElement('div');
         positionOffScreen(this.renderer, measureContainer);
@@ -2280,14 +2292,14 @@ class PagerComponent {
         if (!isDocumentAvailable() || !this.element?.nativeElement) {
             return;
         }
-        const numericButtonsElement = this.element.nativeElement.querySelector('kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons');
+        const numericButtonsElement = this.numericButtonsElement();
         const hasNumericButtons = this.numericButtons || numericButtonsElement;
-        const hasInput = this.pagerInput || this.element.nativeElement.querySelector('.k-pager-input');
+        const hasInput = this.pagerInput || this.pagerInputElement();
         if (!this.responsive || (!hasNumericButtons && !hasInput)) {
             this.showInput = this.type === 'input';
             return;
         }
-        const pagerInfoElement = this.element.nativeElement.querySelector('.k-pager-info');
+        const pagerInfoElement = this.pagerInfoElement();
         if (this.type === 'input' || !this.isElementVisible(pagerInfoElement)) {
             this.showInput = true;
             return;
@@ -2308,6 +2320,18 @@ class PagerComponent {
         }
         return this.pageSizeValues?.length > 0;
     }
+    setPagerDimensions() {
+        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('kendo-pager-input')?.offsetWidth ?? 0);
+        !this.pageSizes && (this.pagerDimensions.pageSizesWidth = this.sizesDropDownElement()?.offsetWidth ?? 0);
+        const padding = calculatePadding(this.element.nativeElement);
+        this.pagerDimensions.padding = padding.padding;
+        this.pagerDimensions.gapNumbersSizes = padding.gapNumbersSizes;
+        this.pagerDimensions.gapSizesInfo = padding.gapSizesInfo;
+        const innerStyledElement = this.pagerInputElement();
+        !this.pagerDimensions.gapPageText && (this.pagerDimensions.gapPageText = calculateGap(innerStyledElement));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: PagerNavigationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pager",
-  "version": "21.0.0-develop.2",
+  "version": "21.0.0-develop.21",
   "description": "Kendo UI Angular Pager",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -17,7 +17,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1761752851,
+      "publishDate": 1762426777,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -27,16 +27,16 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "21.0.0-develop.2",
-    "@progress/kendo-angular-dropdowns": "21.0.0-develop.2",
-    "@progress/kendo-angular-inputs": "21.0.0-develop.2",
-    "@progress/kendo-angular-icons": "21.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "21.0.0-develop.2",
+    "@progress/kendo-angular-common": "21.0.0-develop.21",
+    "@progress/kendo-angular-dropdowns": "21.0.0-develop.21",
+    "@progress/kendo-angular-inputs": "21.0.0-develop.21",
+    "@progress/kendo-angular-icons": "21.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "21.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "21.0.0-develop.21"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-pager.mjs",

package/pager/common/responsive-element.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface ResponsiveElement {
+    name: string;
+    isEnabled: () => boolean;
+    isVisible: () => boolean;
+    width: () => number;
+    show: () => void;
+    hide: () => void;
+}

package/pager/pager.component.d.ts

@@ -147,7 +147,7 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
     /**
      * Determines whether the Pager adaptiveness functionality is enabled ([see example](slug:adaptive_mode_pager)).
      *
-     * @default 'auto'
+     * @default 'none'
      */
     adaptiveMode: AdaptiveMode;
     /**
@@ -248,18 +248,34 @@ export declare class PagerComponent implements OnChanges, AfterViewInit, OnInit,
      * @hidden
      */
     resizeHandler: (compareWidth?: boolean) => void;
+    private sizesDropDownElement;
+    private pagerInputElement;
+    private pagerInfoElement;
+    private numericButtonsElement;
+    private responsiveDropDownElement;
+    private responsiveDropDownTextElement;
+    private responsivePageTextElement;
+    private responsiveInfoTextElement;
+    private responsiveNumericButtonsElement;
+    /**
+     * Contains all elements that are subject to responsive toggling.
+     * These elements will be shown or hidden based on the available space.
+     * The order of elements in the array defines the priority of visibility.
+     * This array allows us to work with the elements without performing element-specific logic in other methods.
+     */
+    private responsiveElements;
     private get ariaLabel();
     private keyDownHandler;
     private innerNavigationChange;
     private handleClasses;
-    private showElementsInOrder;
-    private hideElementsInOrder;
+    private showElements;
     private isElementVisible;
     private hideElement;
     private showElement;
     private measureAllTextWidths;
     private showNumericButtonsResponsive;
     private get showPageSizes();
+    private setPagerDimensions;
     static ɵfac: i0.ɵɵFactoryDeclaration<PagerComponent, [{ optional: true; skipSelf: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PagerComponent, "kendo-datapager, kendo-pager", ["kendoDataPager", "kendoPager"], { "externalTemplate": { "alias": "externalTemplate"; "required": false; }; "total": { "alias": "total"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "buttonCount": { "alias": "buttonCount"; "required": false; }; "info": { "alias": "info"; "required": false; }; "type": { "alias": "type"; "required": false; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; }; "previousNext": { "alias": "previousNext"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "pagerInputVisibilityChange": "pagerInputVisibilityChange"; "pageTextVisibilityChange": "pageTextVisibilityChange"; "itemsTextVisibilityChange": "itemsTextVisibilityChange"; }, ["template"], never, true, never>;
 }

package/schematics/ngAdd/index.js

@@ -5,14 +5,14 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'PagerModule', package: 'pager', peerDependencies: {
             // Peers of inputs and dropdowns
-            '@progress/kendo-angular-treeview': '21.0.0-develop.2',
-            '@progress/kendo-angular-intl': '21.0.0-develop.2',
-            '@progress/kendo-angular-navigation': '21.0.0-develop.2',
-            '@progress/kendo-angular-popup': '21.0.0-develop.2',
+            '@progress/kendo-angular-treeview': '21.0.0-develop.21',
+            '@progress/kendo-angular-intl': '21.0.0-develop.21',
+            '@progress/kendo-angular-navigation': '21.0.0-develop.21',
+            '@progress/kendo-angular-popup': '21.0.0-develop.21',
             '@progress/kendo-drawing': '^1.5.12',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-buttons': '21.0.0-develop.2',
-            '@progress/kendo-angular-dialog': '21.0.0-develop.2',
+            '@progress/kendo-angular-buttons': '21.0.0-develop.21',
+            '@progress/kendo-angular-dialog': '21.0.0-develop.21',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'
         } });