@progress/kendo-angular-grid 13.4.0-develop.3 → 13.4.0-develop.4

package/fesm2015/progress-kendo-angular-grid.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable, Directive, Optional, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, SkipSelf, Host, Inject, Output, SecurityContext, HostListener, ChangeDetectionStrategy, ViewChild, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
+import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable, Directive, Optional, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, SkipSelf, Host, Inject, Output, SecurityContext, HostListener, ChangeDetectionStrategy, ElementRef, ViewChild, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, closest as closest$1, isFocusable as isFocusable$1, anyChanged, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, zip as zip$1, BehaviorSubject, Observable } from 'rxjs';
@@ -24,14 +24,14 @@ import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i41 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
-import * as i4$1 from '@progress/kendo-angular-buttons';
-import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
-import * as i3$1 from '@progress/kendo-angular-inputs';
-import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i1$4 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
+import * as i4$1 from '@progress/kendo-angular-buttons';
+import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
+import * as i3$1 from '@progress/kendo-angular-inputs';
+import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i4$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import * as i16 from '@progress/kendo-angular-layout';
@@ -4474,8 +4474,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692370838,
-    version: '13.4.0-develop.3',
+    publishDate: 1692620937,
+    version: '13.4.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -7105,23 +7105,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+// eslint-disable no-access-missing-member
 /**
- * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ * Displays information about the current page and the total number of records ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
-class PagerPrevButtonsComponent extends PagerElementComponent {
-    constructor(ctx, pagerContext, cd, navigationService) {
+class PagerInfoComponent extends PagerElementComponent {
+    constructor(ctx, cd, pagerContext) {
         super(ctx, pagerContext, cd);
-        this.navigationService = navigationService;
+        this.pagerContext = pagerContext;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get maxItems() {
+        return Math.min(this.currentPage * this.pageSize, this.total);
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get currentPageText() {
+        return this.total ?
+            (this.currentPage - 1) * this.pageSize + 1 :
+            0;
     }
     /**
      * @hidden
      *
      * @readonly
      * @type {boolean}
-     * @memberOf PagerPrevButtonsComponent
+     * @memberOf PagerInfoComponent
      */
-    get disabled() {
-        return this.currentPage === 1 || !this.total;
+    get classes() {
+        return true;
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
@@ -7130,168 +7153,266 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
-        <button
-            [kendoGridFocusable]="!disabled"
-            kendoButton
-            type="button"
-            [title]="textFor('pagerFirstPage')"
-            [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
-            role="button"
-            [icon]="prevArrowIcons[0]"
-            [svgIcon]="prevArrowSVGIcons[0]"
-            class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
-            fillMode="flat"
-            rounded="none"
-            [size]="size">
-        </button>
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [icon]="prevArrowIcons[1]"
-            [svgIcon]="prevArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            [size]="size"
-            [title]="textFor('pagerPreviousPage')"
-            [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
-        </button>
-    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInfoComponent, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-prev-buttons',
-                    template: `
-        <button
-            [kendoGridFocusable]="!disabled"
-            kendoButton
-            type="button"
-            [title]="textFor('pagerFirstPage')"
-            [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="currentPage !== 1 ? changePage(0) : false"
-            role="button"
-            [icon]="prevArrowIcons[0]"
-            [svgIcon]="prevArrowSVGIcons[0]"
-            class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
-            fillMode="flat"
-            rounded="none"
-            [size]="size">
-        </button>
-        <button
-            kendoButton
-            [kendoGridFocusable]="!disabled"
-            type="button"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [icon]="prevArrowIcons[1]"
-            [svgIcon]="prevArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            [size]="size"
-            [title]="textFor('pagerPreviousPage')"
-            [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
-        </button>
-    `
+                    selector: 'kendo-pager-info',
+                    template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-info"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-label"]
+            }] } });
 
 /**
- * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ * @hidden
  */
-class PagerNumericButtonsComponent extends PagerElementComponent {
-    constructor(ctx, cd, pagerContext) {
+class PagerDropDownListDirective {
+    constructor(host) {
+        this.host = host;
+        this.keydownHandler = (e) => {
+            if (e.keyCode === Keys.Escape && this.host.isOpen) {
+                e.stopPropagation();
+                this.host.toggle(false);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+}
+PagerDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, deps: [{ token: i1$4.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+PagerDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoGridPagerDropDown]' }]
+        }], ctorParameters: function () { return [{ type: i1$4.DropDownListComponent }]; } });
+
+/**
+ * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ */
+class PagerPageSizesComponent extends PagerElementComponent {
+    constructor(ctx, cd, pagerContext, navigationService) {
         super(ctx, pagerContext, cd);
         this.pagerContext = pagerContext;
-        this.numbersWrapClass = true;
+        this.navigationService = navigationService;
+        this._pageSizes = [];
     }
     /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number[]}
-     * @memberOf PagerNumericButtonsComponent
+     * The page sizes collection. Can be an Array of numbers and/or [`PageSizeItem`](slug:api_grid_pagesizeitem) objects
+     * ([see example]({% slug paging_grid %}#toc-pager-templates))
      */
-    get buttons() {
-        const result = [];
-        for (let idx = this.start; idx <= this.end; idx++) {
-            result.push(idx);
+    set pageSizes(pageSizes) {
+        let normalizedItems = [];
+        pageSizes.forEach(item => {
+            if (typeof item === 'number') {
+                normalizedItems.push({
+                    text: item.toString(),
+                    value: item
+                });
+            }
+            else {
+                normalizedItems.push(item);
+            }
+        });
+        if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
+            normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
         }
-        return result;
+        this._pageSizes = normalizedItems;
+    }
+    get pageSizes() {
+        return this._pageSizes;
     }
     /**
      * @hidden
+     *
+     * @readonly
      */
-    get end() {
-        return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
+    get classes() {
+        return true;
     }
     /**
      * @hidden
+     *
+     * @readonly
      */
-    get start() {
-        const page = this.currentPage;
-        const buttonCount = this.buttonCount;
-        if (page > buttonCount) {
-            const reminder = (page % buttonCount);
-            return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
-        }
-        return 1;
+    get showInitialPageSize() {
+        return this.pageSizes
+            .filter(item => {
+            if (typeof item.value === 'number') {
+                return item.value === Number(this.pageSize);
+            }
+            return this.total === Number(this.pageSize);
+        })
+            .length === 0;
     }
     /**
      * @hidden
      */
-    pageLabel(num) {
-        const pageText = this.textFor('pagerPage');
-        if (pageText) {
-            return pageText + ' ' + num;
-        }
-        return num.toString();
+    pageSizeChange(value) {
+        this.pageSize = typeof value === 'number' ? value : this.total;
+        this.pagerContext.changePageSize(this.pageSize);
     }
     /**
      * @hidden
      */
-    onSelectChange(e) {
-        const target = e.target;
-        const valueAsNumber = Number(target.value);
-        if (!Number.isNaN(valueAsNumber)) {
-            this.changePage(valueAsNumber - 1);
-        }
-        else {
-            if (target.value === 'previousButtons') {
-                this.changePage(this.start - 2);
-            }
-            else {
-                this.changePage(this.end);
-            }
-        }
+    getValue(page) {
+        return typeof page.value === 'number' ? page.value : this.total;
     }
     onChanges({ total, skip, pageSize }) {
         this.total = total;
         this.skip = skip;
-        this.pageSize = pageSize;
+        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
         this.cd.markForCheck();
     }
 }
-PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-        <select
-            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
-            kendoGridFocusable
-            [attr.title]="textFor('selectPage')"
-            [attr.aria-label]="textFor('selectPage')"
-            [ngClass]="{
-                'k-picker-sm': size === 'small',
-                'k-picker-md': size === 'medium' || !size
-            }"
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist
+            class="k-dropdown"
+            #dropdownlist
+            [size]="size"
+            kendoGridPagerDropDown
+            [tabindex]="0"
+            kendoGridFocusable
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-page-sizes',
+                    template: `
+        <kendo-dropdownlist
+            class="k-dropdown"
+            #dropdownlist
+            [size]="size"
+            kendoGridPagerDropDown
+            [tabindex]="0"
+            kendoGridFocusable
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: NavigationService }]; }, propDecorators: { pageSizes: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class.k-pager-sizes']
+            }, {
+                type: HostBinding,
+                args: ['class.k-label']
+            }] } });
+
+/**
+ * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ */
+class PagerNumericButtonsComponent extends PagerElementComponent {
+    constructor(ctx, cd, pagerContext) {
+        super(ctx, pagerContext, cd);
+        this.pagerContext = pagerContext;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number[]}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    get buttons() {
+        const result = [];
+        for (let idx = this.start; idx <= this.end; idx++) {
+            result.push(idx);
+        }
+        return result;
+    }
+    /**
+     * @hidden
+     */
+    get end() {
+        return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
+    }
+    /**
+     * @hidden
+     */
+    get start() {
+        const page = this.currentPage;
+        const buttonCount = this.buttonCount;
+        if (page > buttonCount) {
+            const reminder = (page % buttonCount);
+            return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
+        }
+        return 1;
+    }
+    /**
+     * @hidden
+     */
+    pageLabel(num) {
+        const pageText = this.textFor('pagerPage');
+        if (pageText) {
+            return pageText + ' ' + num;
+        }
+        return num.toString();
+    }
+    /**
+     * @hidden
+     */
+    onSelectChange(e) {
+        const target = e.target;
+        const valueAsNumber = Number(target.value);
+        if (!Number.isNaN(valueAsNumber)) {
+            this.changePage(valueAsNumber - 1);
+        }
+        else {
+            if (target.value === 'previousButtons') {
+                this.changePage(this.start - 2);
+            }
+            else {
+                this.changePage(this.end);
+            }
+        }
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, 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
+            #select
+            class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
+            kendoGridFocusable
+            [style.display]="'none'"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
+            [ngClass]="{
+                'k-picker-sm': size === 'small',
+                'k-picker-md': size === 'medium' || !size
+            }"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
                 value="previousButtons"
@@ -7312,7 +7433,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoGridFocusable
@@ -7362,8 +7483,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-pager-numeric-buttons',
                     template: `
         <select
+            #select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-rounded-md"
             kendoGridFocusable
+            [style.display]="'none'"
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             [ngClass]="{
@@ -7390,7 +7513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <div class="k-pager-numbers">
+        <div class="k-pager-numbers" #numbers>
             <button *ngIf="start > 1"
                 type="button"
                 kendoGridFocusable
@@ -7434,13 +7557,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-numbers-wrap']
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], numbersElement: [{
+                type: ViewChild,
+                args: ['numbers', { read: ElementRef }]
             }], buttonCount: [{
                 type: Input
             }] } });
 
+/**
+ * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
+ */
+class PagerPrevButtonsComponent extends PagerElementComponent {
+    constructor(ctx, pagerContext, cd, navigationService) {
+        super(ctx, pagerContext, cd);
+        this.navigationService = navigationService;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerPrevButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === 1 || !this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: ContextService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPrevButtonsComponent, selector: "kendo-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+        <button
+            [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, isInline: true, components: [{ type: i4$1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-pager-prev-buttons',
+                    template: `
+        <button
+            [kendoGridFocusable]="!disabled"
+            kendoButton
+            type="button"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="currentPage !== 1 ? changePage(0) : false"
+            role="button"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none"
+            [size]="size">
+        </button>
+        <button
+            kendoButton
+            [kendoGridFocusable]="!disabled"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            [size]="size"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+
 /**
  * @hidden
  */
@@ -7683,226 +7909,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: ContextService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 
-// eslint-disable no-access-missing-member
-/**
- * Displays information about the current page and the total number of records ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
- */
-class PagerInfoComponent extends PagerElementComponent {
-    constructor(ctx, cd, pagerContext) {
-        super(ctx, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerInfoComponent
-     */
-    get maxItems() {
-        return Math.min(this.currentPage * this.pageSize, this.total);
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerInfoComponent
-     */
-    get currentPageText() {
-        return this.total ?
-            (this.currentPage - 1) * this.pageSize + 1 :
-            0;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {boolean}
-     * @memberOf PagerInfoComponent
-     */
-    get classes() {
-        return true;
-    }
-    onChanges({ total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = pageSize;
-        this.cd.markForCheck();
-    }
-}
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerInfoComponent, selector: "kendo-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-info',
-                    template: `{{currentPageText}} - {{maxItems}} {{textFor('pagerOf')}} {{total}} {{textFor('pagerItems')}}`
-                }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
-                type: HostBinding,
-                args: ["class.k-pager-info"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
-            }] } });
-
-/**
- * @hidden
- */
-class PagerDropDownListDirective {
-    constructor(host) {
-        this.host = host;
-        this.keydownHandler = (e) => {
-            if (e.keyCode === Keys.Escape && this.host.isOpen) {
-                e.stopPropagation();
-                this.host.toggle(false);
-            }
-        };
-    }
-    ngAfterViewInit() {
-        const wrapperElement = this.host.wrapper.nativeElement;
-        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
-    }
-    ngOnDestroy() {
-        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
-    }
-}
-PagerDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, deps: [{ token: i1$4.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
-PagerDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerDropDownListDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kendoGridPagerDropDown]' }]
-        }], ctorParameters: function () { return [{ type: i1$4.DropDownListComponent }]; } });
-
-/**
- * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
- */
-class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(ctx, cd, pagerContext, navigationService) {
-        super(ctx, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.navigationService = navigationService;
-        this._pageSizes = [];
-    }
-    /**
-     * The page sizes collection. Can be an Array of numbers and/or [`PageSizeItem`](slug:api_grid_pagesizeitem) objects
-     * ([see example]({% slug paging_grid %}#toc-pager-templates))
-     */
-    set pageSizes(pageSizes) {
-        let normalizedItems = [];
-        pageSizes.forEach(item => {
-            if (typeof item === 'number') {
-                normalizedItems.push({
-                    text: item.toString(),
-                    value: item
-                });
-            }
-            else {
-                normalizedItems.push(item);
-            }
-        });
-        if (this.pageSize && !normalizedItems.some(item => item.value === this.pageSize)) {
-            normalizedItems = [{ text: this.pageSize.toString(), value: this.pageSize }, ...normalizedItems];
-        }
-        this._pageSizes = normalizedItems;
-    }
-    get pageSizes() {
-        return this._pageSizes;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     */
-    get classes() {
-        return true;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     */
-    get showInitialPageSize() {
-        return this.pageSizes
-            .filter(item => {
-            if (typeof item.value === 'number') {
-                return item.value === Number(this.pageSize);
-            }
-            return this.total === Number(this.pageSize);
-        })
-            .length === 0;
-    }
-    /**
-     * @hidden
-     */
-    pageSizeChange(value) {
-        this.pageSize = typeof value === 'number' ? value : this.total;
-        this.pagerContext.changePageSize(this.pageSize);
-    }
-    /**
-     * @hidden
-     */
-    getValue(page) {
-        return typeof page.value === 'number' ? page.value : this.total;
-    }
-    onChanges({ total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
-        this.cd.markForCheck();
-    }
-}
-PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: ContextService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-dropdownlist
-            class="k-dropdown"
-            #dropdownlist
-            [size]="size"
-            kendoGridPagerDropDown
-            [tabindex]="0"
-            kendoGridFocusable
-            [data]="pageSizes"
-            textField="text"
-            valueField="value"
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
-        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: PagerDropDownListDirective, selector: "[kendoGridPagerDropDown]" }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-pager-page-sizes',
-                    template: `
-        <kendo-dropdownlist
-            class="k-dropdown"
-            #dropdownlist
-            [size]="size"
-            kendoGridPagerDropDown
-            [tabindex]="0"
-            kendoGridFocusable
-            [data]="pageSizes"
-            textField="text"
-            valueField="value"
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
-        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }, { type: NavigationService }]; }, propDecorators: { pageSizes: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class.k-pager-sizes']
-            }, {
-                type: HostBinding,
-                args: ['class.k-label']
-            }] } });
-
 /**
  * @hidden
  */
@@ -7932,18 +7938,33 @@ class PagerComponent {
             if (this.template || !element) {
                 return;
             }
-            const width = element.offsetWidth;
-            if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-mobile-md');
-                this.renderer.addClass(element, 'k-pager-mobile-sm');
-            }
-            else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-mobile-md');
-                this.renderer.removeClass(element, 'k-pager-mobile-sm');
-            }
-            else {
-                this.clearResponsiveClasses();
-            }
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    const width = element.offsetWidth;
+                    if (this.numericButtons) {
+                        const selectElement = this.numericButtons.selectElement.nativeElement;
+                        const numbersElement = this.numericButtons.numbersElement.nativeElement;
+                        this.renderer.removeStyle(numbersElement, 'display');
+                        this.renderer.setStyle(selectElement, 'display', 'none');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.removeStyle(selectElement, 'display');
+                            this.renderer.setStyle(numbersElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerInfo) {
+                        this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_LARGE) {
+                            this.renderer.setStyle(this.pagerInfo.nativeElement, 'display', 'none');
+                        }
+                    }
+                    if (this.pagerPageSizes) {
+                        this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+                        if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
+                            this.renderer.setStyle(this.pagerPageSizes.nativeElement, 'display', 'none');
+                        }
+                    }
+                });
+            });
         };
     }
     set options(value) {
@@ -8062,12 +8083,10 @@ class PagerComponent {
         }
         const changesInTemplate = changes['template'];
         if (changesInTemplate) {
-            // eslint-disable-next-line no-unused-expressions
-            changesInTemplate.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
+            changesInTemplate.currentValue ? this.clearResponsiveStyling() : this.resizeHandler();
         }
         if (changes['options']) {
-            // eslint-disable-next-line no-unused-expressions
-            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveClasses();
+            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveStyling();
         }
     }
     ngOnDestroy() {
@@ -8093,11 +8112,6 @@ class PagerComponent {
             }
         });
     }
-    clearResponsiveClasses() {
-        const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-mobile-sm');
-        this.renderer.removeClass(element, 'k-pager-mobile-md');
-    }
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.pagerEnabled &&
             target === this.element.nativeElement &&
@@ -8120,6 +8134,18 @@ class PagerComponent {
             this.cellContext.focusGroup = this.focusGroup;
         }
     }
+    clearResponsiveStyling() {
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                if (this.numericButtons) {
+                    this.renderer.removeStyle(this.numericButtons.numbersElement.nativeElement, 'display');
+                    this.renderer.setStyle(this.numericButtons.selectElement.nativeElement, 'display', 'none');
+                }
+                this.pagerInfo && this.renderer.removeStyle(this.pagerInfo.nativeElement, 'display');
+                this.pagerPageSizes && this.renderer.removeStyle(this.pagerPageSizes.nativeElement, 'display');
+            });
+        });
+    }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ContextService }, { token: CELL_CONTEXT, optional: true }, { token: FocusRoot }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
 PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerComponent, selector: "kendo-pager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", options: "options", size: "size", template: "template" }, outputs: { pageChange: "pageChange" }, host: { listeners: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowleft": "navigateToPreviousPage($event)", "keydown.pageup": "navigateToPreviousPage($event)", "keydown.arrowright": "navigateToNextPage($event)", "keydown.pagedown": "navigateToNextPage($event)", "keydown.home": "navigateToFirstPage($event)", "keydown.end": "navigateToLastPage($event)" }, properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager-sm": "this.sizeSmallClass", "class.k-pager-md": "this.sizeMediumClass", "class.k-focus": "this.isFocused", "attr.aria-label": "this.pagerAriaLabel" } }, providers: [{
@@ -8133,7 +8159,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             provide: FocusGroup,
             deps: [FocusRoot],
             useClass: FocusGroup
-        }], usesOnChanges: true, ngImport: i0, template: `
+        }], viewQueries: [{ propertyName: "pagerInfo", first: true, predicate: PagerInfoComponent, descendants: true, read: ElementRef }, { propertyName: "pagerPageSizes", first: true, predicate: PagerPageSizesComponent, descendants: true, read: ElementRef }, { propertyName: "numericButtons", first: true, predicate: PagerNumericButtonsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             *ngIf="navigationService.pagerEnabled"
             class="k-sr-only"
@@ -8147,20 +8173,21 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
-            <kendo-pager-numeric-buttons
-                [size]="size"
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
-            </kendo-pager-numeric-buttons>
-            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            </div>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
                 [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
-                #pageSizes
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
@@ -8202,20 +8229,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
-            <kendo-pager-numeric-buttons
-                [size]="size"
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount">
-            </kendo-pager-numeric-buttons>
-            <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
-            <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    [size]="size"
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input [size]="size" *ngIf="settings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons [size]="size" *ngIf="settings.previousNext"></kendo-pager-next-buttons>
+            </div>
             <kendo-pager-info *ngIf='settings.info'></kendo-pager-info>
             <kendo-pager-page-sizes
                 [size]="size"
                 *ngIf="settings.pageSizes"
                 [pageSizes]="$any(settings.pageSizes)"
-                #pageSizes
             ></kendo-pager-page-sizes>
         </ng-container>
         <div
@@ -8235,7 +8263,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         type: Inject,
                         args: [CELL_CONTEXT]
                     }] }, { type: FocusRoot }, { type: FocusGroup }];
-    }, propDecorators: { total: [{
+    }, propDecorators: { pagerInfo: [{
+                type: ViewChild,
+                args: [PagerInfoComponent, { read: ElementRef }]
+            }], pagerPageSizes: [{
+                type: ViewChild,
+                args: [PagerPageSizesComponent, { read: ElementRef }]
+            }], numericButtons: [{
+                type: ViewChild,
+                args: [PagerNumericButtonsComponent]
+            }], total: [{
                 type: Input
             }], skip: [{
                 type: Input