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

package/fesm2015/progress-kendo-angular-treelist.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 { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, HostBinding, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, HostBinding, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ElementRef, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4$1 from '@angular/forms';
@@ -48,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692370860,
-    version: '13.4.0-develop.3',
+    publishDate: 1692620959,
+    version: '13.4.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -13088,113 +13088,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 // eslint-disable no-access-missing-member
 /**
- * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
+ * Displays information about the current page and the total number of records ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
-class PagerPrevButtonsComponent extends PagerElementComponent {
-    constructor(localization, pagerContext, cd, navigationService) {
+class PagerInfoComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext) {
         super(localization, pagerContext, cd);
-        this.navigationService = navigationService;
+        this.pagerContext = pagerContext;
     }
     /**
      * @hidden
      *
      * @readonly
-     * @type {boolean}
-     * @memberOf PagerPrevButtonsComponent
+     * @type {number}
+     * @memberOf PagerInfoComponent
      */
-    get disabled() {
-        return this.currentPage === 1 || !this.total;
+    get currentPageText() {
+        return this.total ? this.currentPage : 0;
     }
     /**
      * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
      */
-    onButtonClick(buttonName) {
-        if (this.currentPage !== 1) {
-            const skipToPage = buttonName === 'prevPage' ? this.currentPage - 2 : 0;
-            this.changePage(skipToPage);
+    get maxPage() {
+        return Math.ceil(this.total / this.pageSize);
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerInfoComponent
+     */
+    get classes() {
+        return true;
+    }
+    onChanges({ allCount, total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.allCount = allCount;
+        this.cd.markForCheck();
+    }
+}
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1$1.LocalizationService }, { 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-treelist-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`, 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-treelist-pager-info',
+                    template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-info"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-label"]
+            }] } });
+
+// eslint-disable no-access-missing-member
+/**
+ * Displays a drop-down list for the page size selection ([see example]({% slug paging_treelist %}#toc-pager-templates)).
+ */
+class PagerPageSizesComponent extends PagerElementComponent {
+    constructor(elem, localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
+        this.elem = elem;
+        this.pagerContext = pagerContext;
+        this._pageSizes = [];
+    }
+    /**
+     * The page sizes collection. Can be an Array of numbers and/or PageSizeItem objects.
+     * [More information and example]({% slug api_treelist_pagerpagesizescomponent %})
+     */
+    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 = pageSize;
+        this.pageSize = typeof pageSize === 'number' ? pageSize : this.total;
         this.cd.markForCheck();
     }
 }
-PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { 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-treelist-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
-        <button
-            kendoButton
-            type="button"
-            kendoTreeListFocusable
-            [enabled]="!disabled"
-            [title]="textFor('pagerFirstPage')"
-            [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="onButtonClick('firstPage')"
-            role="button"
-            [icon]="prevArrowIcons[0]"
-            [svgIcon]="prevArrowSVGIcons[0]"
-            class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
-            fillMode="flat"
-            rounded="none">
-        </button>
-        <button
-            kendoButton
-            type="button"
+PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-treelist-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
+            #dropdownlist
+            class="k-dropdown"
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
             kendoTreeListFocusable
-            [enabled]="!disabled"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [icon]="prevArrowIcons[1]"
-            [svgIcon]="prevArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            [title]="textFor('pagerPreviousPage')"
-            [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="onButtonClick('prevPage')">
-        </button>
-    `, isInline: true, components: [{ type: i4$2.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: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            [attr.aria-label]="textFor('pagerItemsPerPage')"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
+    `, isInline: true, components: [{ type: i3$1.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: i4$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], 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-treelist-pager-prev-buttons',
+                    selector: 'kendo-treelist-pager-page-sizes',
                     template: `
-        <button
-            kendoButton
-            type="button"
-            kendoTreeListFocusable
-            [enabled]="!disabled"
-            [title]="textFor('pagerFirstPage')"
-            [attr.aria-label]="textFor('pagerFirstPage')"
-            (click)="onButtonClick('firstPage')"
-            role="button"
-            [icon]="prevArrowIcons[0]"
-            [svgIcon]="prevArrowSVGIcons[0]"
-            class="k-pager-nav k-pager-first"
-            [disabled]="disabled"
-            fillMode="flat"
-            rounded="none">
-        </button>
-        <button
-            kendoButton
-            type="button"
+        <kendo-dropdownlist
+            #dropdownlist
+            class="k-dropdown"
+            [data]="pageSizes"
+            textField="text"
+            valueField="value"
             kendoTreeListFocusable
-            [enabled]="!disabled"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [icon]="prevArrowIcons[1]"
-            [svgIcon]="prevArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            [title]="textFor('pagerPreviousPage')"
-            [attr.aria-label]="textFor('pagerPreviousPage')"
-            (click)="onButtonClick('prevPage')">
-        </button>
+            [valuePrimitive]="true"
+            [value]="pageSize"
+            [attr.aria-label]="textFor('pagerItemsPerPage')"
+            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
+        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { pageSizes: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-sizes"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-label"]
+            }] } });
 
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /**
@@ -13204,7 +13282,6 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
     constructor(localization, cd, pagerContext) {
         super(localization, pagerContext, cd);
         this.pagerContext = pagerContext;
-        this.numbersWrapClass = true;
     }
     /**
      * @hidden
@@ -13274,10 +13351,12 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
     }
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { 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-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerNumericButtonsComponent, selector: "kendo-treelist-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
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
             kendoTreeListFocusable
+            [style.display]="'none'"
+            #select
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -13300,7 +13379,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"
                 kendoTreeListFocusable
@@ -13349,6 +13428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <select
             class="k-dropdown-list k-dropdown k-picker k-picker-solid k-picker-md k-rounded-md"
             kendoTreeListFocusable
+            [style.display]="'none'"
+            #select
             [attr.title]="textFor('selectPage')"
             [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
@@ -13371,7 +13452,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"
                 kendoTreeListFocusable
@@ -13412,12 +13493,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-numbers-wrap']
-            }], buttonCount: [{
-                type: Input
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { selectElement: [{
+                type: ViewChild,
+                args: ['select', { read: ElementRef }]
+            }], numbersElement: [{
+                type: ViewChild,
+                args: ['numbers', { read: ElementRef }]
+            }], buttonCount: [{
+                type: Input
+            }] } });
+
+// eslint-disable no-access-missing-member
+/**
+ * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
+ */
+class PagerPrevButtonsComponent extends PagerElementComponent {
+    constructor(localization, pagerContext, cd, navigationService) {
+        super(localization, pagerContext, cd);
+        this.navigationService = navigationService;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerPrevButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === 1 || !this.total;
+    }
+    /**
+     * @hidden
+     */
+    onButtonClick(buttonName) {
+        if (this.currentPage !== 1) {
+            const skipToPage = buttonName === 'prevPage' ? this.currentPage - 2 : 0;
+            this.changePage(skipToPage);
+        }
+    }
+    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: i1$1.LocalizationService }, { 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-treelist-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
+        <button
+            kendoButton
+            type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="onButtonClick('firstPage')"
+            role="button"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none">
+        </button>
+        <button
+            kendoButton
+            type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="onButtonClick('prevPage')">
+        </button>
+    `, isInline: true, components: [{ type: i4$2.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: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], 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-treelist-pager-prev-buttons',
+                    template: `
+        <button
+            kendoButton
+            type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
+            [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
+            (click)="onButtonClick('firstPage')"
+            role="button"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none">
+        </button>
+        <button
+            kendoButton
+            type="button"
+            kendoTreeListFocusable
+            [enabled]="!disabled"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
+            fillMode="flat"
+            rounded="none"
+            [title]="textFor('pagerPreviousPage')"
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="onButtonClick('prevPage')">
+        </button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 
 /**
  * Displays an input element which allows the typing and rendering of page numbers.
@@ -13655,194 +13849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-// eslint-disable no-access-missing-member
-/**
- * Displays information about the current page and the total number of records ([see example]({% slug paging_treelist %}#toc-pager-templates)).
- */
-class PagerInfoComponent extends PagerElementComponent {
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerInfoComponent
-     */
-    get currentPageText() {
-        return this.total ? this.currentPage : 0;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerInfoComponent
-     */
-    get maxPage() {
-        return Math.ceil(this.total / this.pageSize);
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {boolean}
-     * @memberOf PagerInfoComponent
-     */
-    get classes() {
-        return true;
-    }
-    onChanges({ allCount, total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = pageSize;
-        this.allCount = allCount;
-        this.cd.markForCheck();
-    }
-}
-PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1$1.LocalizationService }, { 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-treelist-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`, 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-treelist-pager-info',
-                    template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { classes: [{
-                type: HostBinding,
-                args: ["class.k-pager-info"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
-            }] } });
-
-// eslint-disable no-access-missing-member
-/**
- * Displays a drop-down list for the page size selection ([see example]({% slug paging_treelist %}#toc-pager-templates)).
- */
-class PagerPageSizesComponent extends PagerElementComponent {
-    constructor(elem, localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.elem = elem;
-        this.pagerContext = pagerContext;
-        this._pageSizes = [];
-    }
-    /**
-     * The page sizes collection. Can be an Array of numbers and/or PageSizeItem objects.
-     * [More information and example]({% slug api_treelist_pagerpagesizescomponent %})
-     */
-    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: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PagerPageSizesComponent, selector: "kendo-treelist-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
-            #dropdownlist
-            class="k-dropdown"
-            [data]="pageSizes"
-            textField="text"
-            valueField="value"
-            kendoTreeListFocusable
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            [attr.aria-label]="textFor('pagerItemsPerPage')"
-            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
-        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i3$1.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: i4$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], 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-treelist-pager-page-sizes',
-                    template: `
-        <kendo-dropdownlist
-            #dropdownlist
-            class="k-dropdown"
-            [data]="pageSizes"
-            textField="text"
-            valueField="value"
-            kendoTreeListFocusable
-            [valuePrimitive]="true"
-            [value]="pageSize"
-            [attr.aria-label]="textFor('pagerItemsPerPage')"
-            (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
-        <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { pageSizes: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ["class.k-pager-sizes"]
-            }, {
-                type: HostBinding,
-                args: ["class.k-label"]
-            }] } });
-
 /**
  * @hidden
  */
@@ -13874,18 +13880,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) {
@@ -13931,14 +13952,12 @@ class PagerComponent {
                 allCount: this.allCount || this.total
             });
         }
-        const templateChanges = changes['template'];
-        if (templateChanges) {
-            // eslint-disable-next-line no-unused-expressions
-            templateChanges.currentValue ? this.clearResponsiveClasses() : this.resizeHandler();
+        const changesInTemplate = changes['template'];
+        if (changesInTemplate) {
+            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() {
@@ -14048,10 +14067,17 @@ class PagerComponent {
     shouldTriggerPageChange(target, condition) {
         return this.navigationService.enabled && target === this.element.nativeElement && condition;
     }
-    clearResponsiveClasses() {
-        const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-mobile-sm');
-        this.renderer.removeClass(element, 'k-pager-mobile-md');
+    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: NavigationService }, { token: i1$1.LocalizationService }, { token: PagerContextService }, { token: FocusGroup }, { token: FocusRoot }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -14066,7 +14092,7 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             provide: FocusGroup,
             deps: [FocusRoot],
             useClass: FocusGroup
-        }], viewQueries: [{ propertyName: "prevButtons", first: true, predicate: ["prevButtons"], descendants: true }, { propertyName: "nextButtons", first: true, predicate: ["nextButtons"], descendants: true }, { propertyName: "numericButtons", first: true, predicate: ["numericButtons"], descendants: true }, { propertyName: "pagerInput", first: true, predicate: ["pagerInput"], descendants: true }, { propertyName: "pageSizes", first: true, predicate: ["pageSizes"], descendants: true }], 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.enabled"
             class="k-sr-only"
@@ -14080,16 +14106,20 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
-            <kendo-treelist-pager-numeric-buttons
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount"
-            >
-            </kendo-treelist-pager-numeric-buttons>
-            <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
-            <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
+                <kendo-treelist-pager-numeric-buttons
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-treelist-pager-numeric-buttons>
+                <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
+                <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            </div>
             <kendo-treelist-pager-info *ngIf='settings.info'></kendo-treelist-pager-info>
-            <kendo-treelist-pager-page-sizes *ngIf="settings.pageSizes" [pageSizes]="$any(settings.pageSizes)"></kendo-treelist-pager-page-sizes>
+            <kendo-treelist-pager-page-sizes 
+                *ngIf="settings.pageSizes"
+                [pageSizes]="$any(settings.pageSizes)">
+            </kendo-treelist-pager-page-sizes>
         </ng-container>
          <div
             *ngIf="navigationService.enabled"
@@ -14130,16 +14160,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
-            <kendo-treelist-pager-numeric-buttons
-                *ngIf="settings.type === 'numeric'"
-                [buttonCount]="settings.buttonCount"
-            >
-            </kendo-treelist-pager-numeric-buttons>
-            <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
-            <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-treelist-pager-prev-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-prev-buttons>
+                <kendo-treelist-pager-numeric-buttons
+                    *ngIf="settings.type === 'numeric'"
+                    [buttonCount]="settings.buttonCount">
+                </kendo-treelist-pager-numeric-buttons>
+                <kendo-treelist-pager-input *ngIf="settings.type === 'input'"></kendo-treelist-pager-input>
+                <kendo-treelist-pager-next-buttons *ngIf="settings.previousNext"></kendo-treelist-pager-next-buttons>
+            </div>
             <kendo-treelist-pager-info *ngIf='settings.info'></kendo-treelist-pager-info>
-            <kendo-treelist-pager-page-sizes *ngIf="settings.pageSizes" [pageSizes]="$any(settings.pageSizes)"></kendo-treelist-pager-page-sizes>
+            <kendo-treelist-pager-page-sizes 
+                *ngIf="settings.pageSizes"
+                [pageSizes]="$any(settings.pageSizes)">
+            </kendo-treelist-pager-page-sizes>
         </ng-container>
          <div
             *ngIf="navigationService.enabled"
@@ -14151,21 +14185,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: NavigationService }, { type: i1$1.LocalizationService }, { type: PagerContextService }, { type: FocusGroup }, { type: FocusRoot }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { prevButtons: [{
+        }], ctorParameters: function () { return [{ type: NavigationService }, { type: i1$1.LocalizationService }, { type: PagerContextService }, { type: FocusGroup }, { type: FocusRoot }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { pagerInfo: [{
                 type: ViewChild,
-                args: ['prevButtons']
-            }], nextButtons: [{
+                args: [PagerInfoComponent, { read: ElementRef }]
+            }], pagerPageSizes: [{
                 type: ViewChild,
-                args: ['nextButtons']
+                args: [PagerPageSizesComponent, { read: ElementRef }]
             }], numericButtons: [{
                 type: ViewChild,
-                args: ['numericButtons']
-            }], pagerInput: [{
-                type: ViewChild,
-                args: ['pagerInput']
-            }], pageSizes: [{
-                type: ViewChild,
-                args: ['pageSizes']
+                args: [PagerNumericButtonsComponent]
             }], allCount: [{
                 type: Input
             }], total: [{
@@ -15382,6 +15410,7 @@ class TreeListComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
+        this.subscriptions.add(this.pagerTemplateChildren.changes.subscribe(() => this.changeDetectorRef.markForCheck()));
     }
     ngAfterContentChecked() {
         if (this.dataChanged) {