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

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

@@ -8,12 +8,13 @@ import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription } from 'rxjs';
 import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
-import { isFocusable, Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isFocusable, Keys, EventsOutsideAngularDirective, isDocumentAvailable, anyChanged, ResizeSensorComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { NgIf, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
+import { NgIf, NgFor, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
 import { validatePackage } from '@progress/kendo-licensing';
+import { take } from 'rxjs/operators';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 
@@ -425,6 +426,54 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  * @hidden
  */
 const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+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
+ */
+const createMeasurementSpan = (renderer, container, className) => {
+    const span = renderer.createElement('span');
+    renderer.appendChild(container, span);
+    renderer.addClass(span, className);
+    return span;
+};
+/**
+ * @hidden
+ */
+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
+ */
+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');
+};
 
 /**
  * @hidden
@@ -639,6 +688,18 @@ class PagerPageSizesComponent extends PagerElementComponent {
     element;
     ngZone;
     dropDownList;
+    _showItemsText = true;
+    /**
+     * Controls the visibility of the page text label.
+     * @hidden
+     */
+    get showItemsText() {
+        return this._showItemsText;
+    }
+    set showItemsText(value) {
+        this._showItemsText = value;
+        this.cd.markForCheck();
+    }
     /**
      * The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
      *
@@ -790,6 +851,12 @@ class PagerPageSizesComponent extends PagerElementComponent {
      * * `none`
      */
     size = DEFAULT_SIZE;
+    /**
+     * Toggles the adaptiveness of the internal DropDownList.
+     *
+     * @default 'auto'
+     */
+    adaptiveMode = 'auto';
     /**
      * @hidden
      *
@@ -836,7 +903,7 @@ class PagerPageSizesComponent extends PagerElementComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes", size: "size" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPageSizesComponent, isStandalone: true, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: { showItemsText: "showItemsText", pageSizes: "pageSizes", size: "size", adaptiveMode: "adaptiveMode" }, host: { properties: { "class.k-pager-sizes": "this.classes" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropdownlist"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist kendoPagerFocusable
             #dropdownlist
             [size]="size"
@@ -846,9 +913,10 @@ class PagerPageSizesComponent extends PagerElementComponent {
             [valuePrimitive]="true"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event, dropdownlist)"
+            [adaptiveMode]="adaptiveMode"
             [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
-        {{ textFor('itemsPerPage') }}
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <ng-container *ngIf="showItemsText">{{ textFor('itemsPerPage') }}</ng-container>
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
@@ -865,19 +933,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [valuePrimitive]="true"
             [value]="pageSize"
             (valueChange)="pageSizeChange($event, dropdownlist)"
+            [adaptiveMode]="adaptiveMode"
             [attr.aria-label]="textFor('itemsPerPage')"></kendo-dropdownlist>
-        {{ textFor('itemsPerPage') }}
+        <ng-container *ngIf="showItemsText">{{ textFor('itemsPerPage') }}</ng-container>
     `,
                     standalone: true,
-                    imports: [DropDownListComponent, PagerFocusableDirective]
+                    imports: [DropDownListComponent, PagerFocusableDirective, NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { dropDownList: [{
                 type: ViewChild,
                 args: ['dropdownlist', { static: true }]
+            }], showItemsText: [{
+                type: Input
             }], pageSizes: [{
                 type: Input
             }], size: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], classes: [{
                 type: HostBinding,
                 args: ["class.k-pager-sizes"]
@@ -1068,30 +1141,6 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNumericButtonsComponent, isStandalone: true, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount", size: "size" }, viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, read: ElementRef }, { propertyName: "numbersElement", first: true, predicate: ["numbers"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-        <select kendoPagerFocusable #select
-            class="k-hidden k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            [attr.title]="pageChooserLabel"
-            [attr.aria-label]="pageChooserLabel"
-            (change)="onSelectChange($event)">
-            <option *ngIf="start > 1"
-                value="previousButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(start - 1)">...
-            </option>
-            <option *ngFor="let num of buttons"
-                [value]="num.toString()"
-                [selected]="num === currentPage"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-selected':currentPage === num}">
-                {{num}}
-            </option>
-            <option *ngIf="end < totalPages"
-                value="nextButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(end + 1)">...
-            </option>
-        </select>
         <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
@@ -1131,7 +1180,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
@@ -1139,30 +1188,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons',
                     template: `
-        <select kendoPagerFocusable #select
-            class="k-hidden k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            [attr.title]="pageChooserLabel"
-            [attr.aria-label]="pageChooserLabel"
-            (change)="onSelectChange($event)">
-            <option *ngIf="start > 1"
-                value="previousButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(start - 1)">...
-            </option>
-            <option *ngFor="let num of buttons"
-                [value]="num.toString()"
-                [selected]="num === currentPage"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-selected':currentPage === num}">
-                {{num}}
-            </option>
-            <option *ngIf="end < totalPages"
-                value="nextButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(end + 1)">...
-            </option>
-        </select>
         <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
@@ -1204,7 +1229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [PagerFocusableDirective, NgIf, NgFor, NgClass, ButtonComponent]
+                    imports: [PagerFocusableDirective, NgIf, NgFor, ButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: i0.Renderer2 }]; }, propDecorators: { selectElement: [{
                 type: ViewChild,
@@ -1344,6 +1369,11 @@ class PagerInputComponent extends PagerElementComponent {
     zone;
     renderer;
     numericInput;
+    /**
+     * Controls the visibility of the page text label.
+     * @hidden
+     */
+    showPageText = true;
     /**
      * Specifies the padding of the internal numeric input element.
      *
@@ -1417,9 +1447,9 @@ class PagerInputComponent extends PagerElementComponent {
         return this.totalPages !== 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input, kendo-pager-input", inputs: { size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInputComponent, isStandalone: true, selector: "kendo-datapager-input, kendo-pager-input", inputs: { showPageText: "showPageText", size: "size" }, viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
      <span class="k-pager-input">
-        {{textFor('page')}}
+        <ng-container *ngIf="showPageText">{{textFor('page')}}</ng-container>
         <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"
             [decimals]="0"
@@ -1441,7 +1471,7 @@ class PagerInputComponent extends PagerElementComponent {
         </kendo-numerictextbox>
         {{textFor('of')}} {{totalPages}}
      </span>
-    `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[kendoPagerFocusable]", exportAs: ["kendoPagerFocusable"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
@@ -1449,7 +1479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-datapager-input, kendo-pager-input',
                     template: `
      <span class="k-pager-input">
-        {{textFor('page')}}
+        <ng-container *ngIf="showPageText">{{textFor('page')}}</ng-container>
         <kendo-numerictextbox kendoPagerFocusable
             [spinners]="false"
             [decimals]="0"
@@ -1473,11 +1503,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
      </span>
     `,
                     standalone: true,
-                    imports: [NgClass, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
+                    imports: [NgClass, NgIf, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,
                 args: [NumericTextBoxComponent, { static: true }]
+            }], showPageText: [{
+                type: Input
             }], size: [{
                 type: Input
             }] } });
@@ -1550,28 +1582,40 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1747069694,
-    version: '19.0.0-develop.12',
+    publishDate: 1747133510,
+    version: '19.0.0-develop.13',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
-/**
- * @hidden
- */
-const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
-/**
- * @hidden
- */
-const RESPONSIVE_BREAKPOINT_LARGE = 768;
-
 class PagerComponent {
     pagerContext;
     element;
     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
      */
@@ -1660,12 +1704,17 @@ 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.
@@ -1709,6 +1758,14 @@ class PagerComponent {
         context.currentPage = this.currentPage;
         return context;
     }
+    /**
+     * @hidden
+     */
+    showInput = false;
+    /**
+     * @hidden
+     */
+    initialized = false;
     subscriptions = new Subscription();
     _templateContext = {};
     _pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
@@ -1716,12 +1773,29 @@ 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';
@@ -1738,6 +1812,8 @@ 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) {
@@ -1746,14 +1822,34 @@ 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)) {
@@ -1765,7 +1861,14 @@ 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() {
@@ -1807,40 +1910,37 @@ 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;
+                }
+                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);
             });
         });
     };
@@ -1918,8 +2018,172 @@ 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: PagerContextService, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: 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: 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: "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,
@@ -1927,7 +2191,7 @@ 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}' }}"
@@ -1972,25 +2236,27 @@ 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,
@@ -2051,39 +2317,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: PagerContextService, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: PagerNavigationService, decorators: [{
+                }] }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: 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: [{
@@ -2108,6 +2391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], responsive: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{