@progress/kendo-angular-treelist 17.0.0-develop.34 → 17.0.0-develop.36

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

@@ -3,9 +3,9 @@
 * 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, ChangeDetectionStrategy, HostBinding, ElementRef, ViewChild, Pipe, ViewChildren, Self, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
-import * as i2$1 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isPresent as isPresent$1, hasClasses as hasClasses$1, Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, isChanged as isChanged$1, KendoInput, guid, DraggableDirective, TemplateContextDirective, hasObservers, ResizeBatchService, DraggableModule } from '@progress/kendo-angular-common';
+import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, HostBinding, Pipe, ViewChild, ViewChildren, Self, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i1$4 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isPresent as isPresent$1, hasClasses as hasClasses$1, Keys, anyChanged, isChanged as isChanged$1, ResizeSensorComponent, EventsOutsideAngularDirective, KendoInput, guid, DraggableDirective, TemplateContextDirective, hasObservers, ResizeBatchService, DraggableModule } from '@progress/kendo-angular-common';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, IconsModule, KENDO_ICONS } from '@progress/kendo-angular-icons';
 import * as i15 from '@progress/kendo-angular-dateinputs';
@@ -13,7 +13,7 @@ import { DatePickerComponent, CalendarDOMService, CenturyViewService, DecadeView
 import * as i1 from '@progress/kendo-angular-popup';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
-import { NgIf, NgFor, NgClass, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault, NgStyle } from '@angular/common';
+import { NgSwitch, NgSwitchCase, NgIf, NgFor, NgTemplateOutlet, NgSwitchDefault, NgClass, NgStyle } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormControl, FormGroup } from '@angular/forms';
 import { merge, of, fromEvent, isObservable, BehaviorSubject, Subscription, Subject, zip as zip$1, from, interval, Observable } from 'rxjs';
@@ -24,23 +24,21 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import { orderBy, isCompositeFilterDescriptor, process, aggregateBy } from '@progress/kendo-data-query';
 import * as i1$2 from '@angular/platform-browser';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, caretAltDownIcon, reorderIcon, filterClearIcon, filterIcon, chevronUpIcon, chevronDownIcon, columnsIcon, sortAscSmallIcon, sortDescSmallIcon, moreVerticalIcon, fileExcelIcon, filePdfIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, reorderIcon, filterClearIcon, filterIcon, chevronUpIcon, chevronDownIcon, columnsIcon, sortAscSmallIcon, sortDescSmallIcon, moreVerticalIcon, fileExcelIcon, filePdfIcon } from '@progress/kendo-svg-icons';
+import * as i47 from '@progress/kendo-angular-pager';
+import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { getter, setter } from '@progress/kendo-common';
-import * as i3$1 from '@progress/kendo-angular-label';
-import { LabelComponent, KENDO_LABEL } from '@progress/kendo-angular-label';
-import * as i5 from '@progress/kendo-angular-dropdowns';
-import { DropDownListComponent, AutoCompleteComponent, KENDO_DROPDOWNS, DropDownListModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
-import * as i4 from '@progress/kendo-angular-buttons';
-import { ButtonComponent, Button, KENDO_BUTTON, ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i1$4 from '@progress/kendo-angular-inputs';
-import { NumericTextBoxComponent, TextBoxDirective, RadioButtonDirective, KENDO_NUMERICTEXTBOX, KENDO_INPUTS, InputsModule } from '@progress/kendo-angular-inputs';
+import * as i13 from '@progress/kendo-angular-inputs';
+import { NumericTextBoxComponent, TextBoxDirective, RadioButtonDirective, KENDO_NUMERICTEXTBOX, InputsModule } from '@progress/kendo-angular-inputs';
 import * as i1$3 from '@progress/kendo-angular-intl';
+import { DropDownListComponent, AutoCompleteComponent, DropDownListModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
+import { ButtonComponent, Button, ButtonModule } from '@progress/kendo-angular-buttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { saveAs } from '@progress/kendo-file-saver';
 import { workbookOptions, toDataURL, ColumnBase as ColumnBase$1, ExcelExportModule } from '@progress/kendo-angular-excel-export';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
-import * as i2$2 from '@progress/kendo-angular-toolbar';
-import { ToolBarModule } from '@progress/kendo-angular-toolbar';
+import * as i95 from '@progress/kendo-angular-toolbar';
+import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
 
 /**
  * @hidden
@@ -49,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730712158,
-    version: '17.0.0-develop.34',
+    publishDate: 1730721033,
+    version: '17.0.0-develop.36',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2240,90 +2238,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
-/**
- * Represents the pager template which helps to customize the pager appearance in the TreeList. To define a pager
- * template, nest an `<ng-template>` tag with the `kendoTreeListPagerTemplate` directive inside `<kendo-treelist>`. [See example](slug:pager_template_treelist).
- *
- * The template context provides the following fields:
- * * `currentPage`&mdash;The index of the displayed page.
- * * `pageSize`&mdash;The value of the current `pageSize`.
- * * `skip`&mdash;The current skip value.
- * * `total`&mdash;The total number of records.
- * * `totalPages`&mdash;The total number of available pages.
- *
- * @example
- * ```html
- * <kendo-treelist ...>
- *   <kendo-treelist-column field="type"></kendo-treelist-column>
- *   <ng-template
- *     kendoTreeListPagerTemplate
- *       let-totalPages="totalPages"
- *       let-currentPage="currentPage">
- *     <kendo-treelist-pager-prev-buttons></kendo-treelist-pager-prev-buttons>
- *     <kendo-treelist-pager-next-buttons></kendo-treelist-pager-next-buttons>
- *     <kendo-treelist-pager-info></kendo-treelist-pager-info>
- *   </ng-template>
- * </kendo-treelist>
- * ```
- */
-class PagerTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerTemplateDirective, isStandalone: true, selector: "[kendoTreeListPagerTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTreeListPagerTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/**
- * @hidden
- */
-class PagerContextService {
-    total;
-    skip;
-    pageSize;
-    allCount;
-    changes = new Subject();
-    pageChange = new Subject();
-    get currentPage() {
-        return this.skip / this.pageSize;
-    }
-    notifyChanges(changes) {
-        this.total = changes.total;
-        this.pageSize = changes.pageSize;
-        this.skip = changes.skip;
-        this.allCount = changes.allCount;
-        this.changes.next(changes);
-    }
-    changePage(page) {
-        this.pageChange.next({ skip: page * this.pageSize, take: this.pageSize });
-    }
-    changePageSize(value) {
-        this.pageChange.next({ skip: 0, take: value });
-    }
-    nextPage() {
-        const nextPage = this.currentPage + 1;
-        if (nextPage * this.pageSize <= this.total) {
-            this.changePage(nextPage);
-        }
-    }
-    prevPage() {
-        const prevPage = this.currentPage - 1;
-        if (prevPage * this.pageSize >= 0) {
-            this.changePage(prevPage);
-        }
-    }
-}
-
 /**
  * @hidden
  */
@@ -5138,12 +5052,12 @@ class NavigationService {
         this.leaveCell();
         this.cursor.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: PagerContextService }, { token: ScrollRequestService }, { token: FocusRoot }, { token: EditService }, { token: i1$1.LocalizationService }, { token: ExpandStateService }, { token: SelectionService }, { token: i0.ChangeDetectorRef }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i47.PagerContextService }, { token: ScrollRequestService }, { token: FocusRoot }, { token: EditService }, { token: i1$1.LocalizationService }, { token: ExpandStateService }, { token: SelectionService }, { token: i0.ChangeDetectorRef }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: PagerContextService }, { type: ScrollRequestService }, { type: FocusRoot }, { type: EditService }, { type: i1$1.LocalizationService }, { type: ExpandStateService }, { type: SelectionService }, { type: i0.ChangeDetectorRef }, { type: FocusableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: i47.PagerContextService }, { type: ScrollRequestService }, { type: FocusRoot }, { type: EditService }, { type: i1$1.LocalizationService }, { type: ExpandStateService }, { type: SelectionService }, { type: i0.ChangeDetectorRef }, { type: FocusableDirective, decorators: [{
                     type: Optional
                 }] }]; } });
 
@@ -5630,1456 +5544,134 @@ class RowReorderService {
     isOverChild(_item) { return false; }
     reorderRows(_ev, _collection, _field) { }
     get parentIdField() {
-        return this.bindingDirective.parentIdField;
-    }
-    get idField() {
-        return this.bindingDirective.idField;
-    }
-    get childrenField() {
-        return this.bindingDirective.childrenField;
-    }
-    get data() {
-        return this.bindingDirective.data;
-    }
-    getDragRowPerElement(row, data) {
-        let rowIndex = row?.getAttribute(rowIndexAttr);
-        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
-        const dataItem = rowIndex === -1 ? null : data?.at(rowIndex)?.data;
-        return {
-            dataItem,
-            rowIndex,
-            element: row
-        };
-    }
-    createDropIndicator() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.dropIndicator = document.createElement('div');
-        this.decorateDropIndicator();
-        this.dropIndicator.innerHTML = `
-            <div class="k-drop-hint-start"></div>
-            <div class="k-drop-hint-line"></div>
-        `;
-        document.body.appendChild(this.dropIndicator);
-        this.hide();
-    }
-    destroyDropIndicator() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (this.dropIndicator && this.dropIndicator.parentElement) {
-            document.body.removeChild(this.dropIndicator);
-            this.dropIndicator = null;
-        }
-    }
-    decorateHint() {
-        hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
-        Object.keys(hintStyles)
-            .forEach(style => this.renderer.setStyle(this.hintElement, style, hintStyles[style]));
-    }
-    positionDropIndicator(ev) {
-        this.lastDropPosition = this.getDropPosition(ev.dragEvent);
-        this.updateDropIndicatorPosition();
-    }
-    decorateDropIndicator() {
-        dropIndicatorClasses.forEach(className => this.renderer.addClass(this.dropIndicator, className));
-        Object.keys(dropIndicatorStyles)
-            .forEach(style => this.renderer.setStyle(this.dropIndicator, style, dropIndicatorStyles[style]));
-    }
-    getDropPosition(e) {
-        if (this.dropTarget === this.dragTarget || !isPresent$1(this.dropTarget)) {
-            return dropPosition.forbidden;
-        }
-        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
-        const itemDivisionsCount = 3;
-        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
-        const { dropTargetRow } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
-        const pointerPosition = e.clientY;
-        const itemTop = itemViewPortCoords.top;
-        let currentDropPosition = null;
-        if (pointerPosition <= itemTop + itemDivisionHeight) {
-            currentDropPosition = dropPosition.before;
-        }
-        else if (pointerPosition >= itemTop + itemViewPortCoords.height - itemDivisionHeight) {
-            currentDropPosition = dropPosition.after;
-        }
-        else {
-            currentDropPosition = dropPosition.over;
-        }
-        if (currentDropPosition === dropPosition.before && isNextSibling(this.dropTarget, this.dragTarget)) {
-            currentDropPosition = dropPosition.forbidden;
-        }
-        else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
-            currentDropPosition = dropPosition.forbidden;
-        }
-        if (isPresent$1(dropTargetRow.dataItem)) {
-            if (this.isOverChild(dropTargetRow.dataItem)) {
-                currentDropPosition = dropPosition.forbidden;
-            }
-        }
-        else {
-            currentDropPosition = dropPosition.forbidden;
-        }
-        return currentDropPosition;
-    }
-    updateDropIndicatorPosition() {
-        if (this.shouldHideDropIndicator() || !this.dropTarget) {
-            this.hide();
-            return;
-        }
-        this.show();
-        const destinationItemOffset = getOffset(this.dropTarget);
-        let indicatorOffsetTop = destinationItemOffset.top;
-        const indicatorOffsetLeft = destinationItemOffset.left + this.dropIndicator.offsetWidth / 2;
-        if (this.lastDropPosition === dropPosition.after) {
-            indicatorOffsetTop += this.dropTarget.offsetHeight;
-        }
-        this.renderer.setStyle(this.dropIndicator, 'left', `${indicatorOffsetLeft}px`);
-        this.renderer.setStyle(this.dropIndicator, 'top', `${indicatorOffsetTop}px`);
-    }
-    shouldHideDropIndicator() {
-        return this.lastDropPosition === dropPosition.forbidden || this.lastDropPosition === dropPosition.over;
-    }
-    hide() {
-        if (isPresent$1(this.dropIndicator)) {
-            this.renderer.setStyle(this.dropIndicator, 'display', 'none');
-        }
-    }
-    show() {
-        if (isPresent$1(this.dropIndicator)) {
-            this.renderer.removeStyle(this.dropIndicator, 'display');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
-                type: Output
-            }] } });
-
-/**
- * @hidden
- */
-const normalizeSettings = ({ buttonCount = 10, info = true, type = 'numeric', pageSizes = false, previousNext = true, responsive = true }) => ({
-    buttonCount,
-    info,
-    pageSizes: pageSizes === true ? [5, 10, 20] : pageSizes,
-    previousNext,
-    type,
-    responsive
-});
-/**
- * @hidden
- */
-const normalize$1 = (settings) => normalizeSettings(settings === true ? {} : settings);
-
-/**
- * @hidden
- */
-const RESPONSIVE_BREAKPOINT_MEDIUM = 600;
-/**
- * @hidden
- */
-const RESPONSIVE_BREAKPOINT_LARGE = 768;
-
-/**
- * @hidden
- */
-class PagerElementComponent {
-    localization;
-    pagerContext;
-    cd;
-    total;
-    skip;
-    pageSize;
-    allCount;
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltToLeftIcon = caretAltToLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
-    caretAltToRightIcon = caretAltToRightIcon;
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerElementComponent
-     */
-    get currentPage() {
-        return Math.floor((this.skip || 0) / this.pageSize) + 1;
-    }
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {number}
-     * @memberOf PagerElementComponent
-     */
-    get totalPages() {
-        return Math.ceil((this.total || 0) / this.pageSize);
-    }
-    subscriptions;
-    constructor(localization, pagerContext, cd) {
-        this.localization = localization;
-        this.pagerContext = pagerContext;
-        this.cd = cd;
-        this.total = this.pagerContext.total;
-        this.skip = this.pagerContext.skip;
-        this.pageSize = this.pagerContext.pageSize;
-        this.allCount = this.pagerContext.allCount;
-    }
-    /**
-     * @hidden
-     *
-     * @param {string} key
-     * @returns {string}
-     *
-     * @memberOf PagerElementComponent
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-    /**
-     * @hidden
-     *
-     * @param {number} page
-     *
-     * @memberOf PagerElementComponent
-     */
-    changePage(page) {
-        this.pagerContext.changePage(page);
-        return false;
-    }
-    /**
-     * @hidden
-     *
-     * @memberOf PagerElementComponent
-     */
-    ngOnInit() {
-        this.subscriptions = this.pagerContext.changes.subscribe(this.onChanges.bind(this));
-        this.subscriptions.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
-    }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-    get prevArrowIcons() {
-        return !this.localization.rtl ? ['caret-alt-to-left', 'caret-alt-left'] : ['caret-alt-to-right', 'caret-alt-right'];
-    }
-    get prevArrowSVGIcons() {
-        return !this.localization.rtl ? [this.caretAltToLeftIcon, this.caretAltLeftIcon] : [this.caretAltToRightIcon, this.caretAltRightIcon];
-    }
-    get nextArrowIcons() {
-        return !this.localization.rtl ? ['caret-alt-right', 'caret-alt-to-right'] : ['caret-alt-left', 'caret-alt-to-left'];
-    }
-    get nextArrowSVGIcons() {
-        return !this.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PagerElementComponent, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerElementComponent, decorators: [{
-            type: Directive,
-            args: [{}]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
-
-// eslint-disable no-access-missing-member
-/**
- * Displays information about the current page and the total number of records ([see example](slug:pager_template_treelist)).
- */
-class PagerInfoComponent extends PagerElementComponent {
-    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;
-    }
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
-    onChanges({ allCount, total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = pageSize;
-        this.allCount = allCount;
-        this.cd.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInfoComponent, isStandalone: true, 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: "16.2.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')}})`,
-                    standalone: true
-                }]
-        }], 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:pager_template_treelist)).
- */
-class PagerPageSizesComponent extends PagerElementComponent {
-    elem;
-    pagerContext;
-    /**
-     * 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;
-    }
-    _pageSizes = [];
-    constructor(elem, localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.elem = elem;
-        this.pagerContext = pagerContext;
-    }
-    /**
-     * @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();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPageSizesComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPageSizesComponent, isStandalone: true, 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, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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>
-    `,
-                    standalone: true,
-                    imports: [DropDownListComponent, FocusableDirective, LabelComponent]
-                }]
-        }], 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 */
-/**
- * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_treelist)).
- */
-class PagerNumericButtonsComponent extends PagerElementComponent {
-    pagerContext;
-    selectElement;
-    numbersElement;
-    /**
-     * The count of the displayed buttons.
-     *
-     * @type {number}
-     * @memberOf PagerNumericButtonsComponent
-     */
-    buttonCount;
-    /**
-     * @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;
-    }
-    constructor(localization, cd, pagerContext) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-    }
-    /**
-     * @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();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNumericButtonsComponent, isStandalone: true, 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)">
-            <option *ngIf="start > 1"
-                value="previousButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(start - 1)">...
-            </option>
-            <option *ngFor="let num of buttons"
-                [value]="num.toString()"
-                [selected]="num === currentPage"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-selected':currentPage === num}">
-                {{num}}
-            </option>
-            <option *ngIf="end < totalPages"
-                value="nextButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(end + 1)">...
-            </option>
-        </select>
-        <div class="k-pager-numbers" #numbers>
-            <button *ngIf="start > 1"
-                type="button"
-                kendoTreeListFocusable
-                kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                class="k-pager-nav"
-                rounded="none"
-                [attr.aria-label]="pageLabel(start - 1)"
-                [attr.title]="pageLabel(start - 1)"
-                (click)="changePage(start - 2)">...</button>
-            <button *ngFor="let num of buttons"
-                type="button"
-                kendoTreeListFocusable
-                kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                class="k-pager-nav"
-                rounded="none"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.title]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [selected]="currentPage === num"
-                (click)="changePage(num - 1)">
-                {{num}}
-            </button>
-            <button *ngIf="end < totalPages"
-                type="button"
-                kendoTreeListFocusable
-                kendoButton
-                class="k-pager-nav"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(end + 1)"
-                [attr.title]="pageLabel(end + 1)"
-                (click)="changePage(end)">...</button>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-treelist-pager-numeric-buttons',
-                    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)">
-            <option *ngIf="start > 1"
-                value="previousButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(start - 1)">...
-            </option>
-            <option *ngFor="let num of buttons"
-                [value]="num.toString()"
-                [selected]="num === currentPage"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-selected':currentPage === num}">
-                {{num}}
-            </option>
-            <option *ngIf="end < totalPages"
-                value="nextButtons"
-                [selected]="false"
-                [attr.aria-label]="pageLabel(end + 1)">...
-            </option>
-        </select>
-        <div class="k-pager-numbers" #numbers>
-            <button *ngIf="start > 1"
-                type="button"
-                kendoTreeListFocusable
-                kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                class="k-pager-nav"
-                rounded="none"
-                [attr.aria-label]="pageLabel(start - 1)"
-                [attr.title]="pageLabel(start - 1)"
-                (click)="changePage(start - 2)">...</button>
-            <button *ngFor="let num of buttons"
-                type="button"
-                kendoTreeListFocusable
-                kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                class="k-pager-nav"
-                rounded="none"
-                [attr.aria-label]="pageLabel(num)"
-                [attr.title]="pageLabel(num)"
-                [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [selected]="currentPage === num"
-                (click)="changePage(num - 1)">
-                {{num}}
-            </button>
-            <button *ngIf="end < totalPages"
-                type="button"
-                kendoTreeListFocusable
-                kendoButton
-                class="k-pager-nav"
-                fillMode="flat"
-                themeColor="primary"
-                rounded="none"
-                [attr.aria-label]="pageLabel(end + 1)"
-                [attr.title]="pageLabel(end + 1)"
-                (click)="changePage(end)">...</button>
-        </div>
-    `,
-                    standalone: true,
-                    imports: [FocusableDirective, NgIf, NgFor, NgClass, ButtonComponent]
-                }]
-        }], 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 next and to the last page ([see example](slug:pager_template_treelist)).
- */
-class PagerNextButtonsComponent extends PagerElementComponent {
-    navigationService;
-    /**
-     * @hidden
-     *
-     * @readonly
-     * @type {boolean}
-     * @memberOf PagerNextButtonsComponent
-     */
-    get disabled() {
-        return this.currentPage === this.totalPages || !this.total;
-    }
-    /**
-     * @hidden
-     */
-    navigable;
-    constructor(localization, pagerContext, cd, navigationService) {
-        super(localization, pagerContext, cd);
-        this.navigationService = navigationService;
-    }
-    /**
-     * @hidden
-     */
-    onButtonClick(buttonName) {
-        if (this.currentPage !== this.totalPages) {
-            const skipToPage = buttonName === 'nextPage' ? this.currentPage : this.totalPages - 1;
-            this.changePage(skipToPage);
-        }
-    }
-    onChanges({ total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = pageSize;
-        this.cd.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerNextButtonsComponent, isStandalone: true, selector: "kendo-treelist-pager-next-buttons", inputs: { navigable: "navigable" }, usesInheritance: true, ngImport: i0, template: `
-        <button
-            kendoButton
-            type="button"
-            kendoTreeListFocusable
-            [enabled]="!disabled"
-            [icon]="nextArrowIcons[0]"
-            [svgIcon]="nextArrowSVGIcons[0]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [title]="textFor('pagerNextPage')"
-            [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="onButtonClick('nextPage')">
-        </button>
-        <button
-            kendoButton
-            type="button"
-            kendoTreeListFocusable
-            [enabled]="!disabled"
-            [icon]="nextArrowIcons[1]"
-            [svgIcon]="nextArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
-            [title]="textFor('pagerLastPage')"
-            [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="onButtonClick('lastPage')">
-        </button>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", 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: "16.2.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'kendo-treelist-pager-next-buttons',
-                    template: `
-        <button
-            kendoButton
-            type="button"
-            kendoTreeListFocusable
-            [enabled]="!disabled"
-            [icon]="nextArrowIcons[0]"
-            [svgIcon]="nextArrowSVGIcons[0]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav"
-            [disabled]="disabled"
-            [title]="textFor('pagerNextPage')"
-            [attr.aria-label]="textFor('pagerNextPage')"
-            (click)="onButtonClick('nextPage')">
-        </button>
-        <button
-            kendoButton
-            type="button"
-            kendoTreeListFocusable
-            [enabled]="!disabled"
-            [icon]="nextArrowIcons[1]"
-            [svgIcon]="nextArrowSVGIcons[1]"
-            fillMode="flat"
-            rounded="none"
-            class="k-pager-nav k-pager-last"
-            [disabled]="disabled"
-            [title]="textFor('pagerLastPage')"
-            [attr.aria-label]="textFor('pagerLastPage')"
-            (click)="onButtonClick('lastPage')">
-        </button>
-    `,
-                    standalone: true,
-                    imports: [ButtonComponent, FocusableDirective]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; }, propDecorators: { navigable: [{
-                type: Input
-            }] } });
-
-/**
- * Displays an input element which allows the typing and rendering of page numbers.
- */
-class PagerInputComponent extends PagerElementComponent {
-    pagerContext;
-    navigationService;
-    zone;
-    numericInput;
-    constructor(localization, pagerContext, navigationService, zone, cd) {
-        super(localization, pagerContext, cd);
-        this.pagerContext = pagerContext;
-        this.navigationService = navigationService;
-        this.zone = zone;
-    }
-    /**
-     * @hidden
-     *
-     * @param {string} value
-     *
-     * @memberOf PagerInputComponent
-     */
-    handleKeyDown = (event) => {
-        const incomingValue = this.numericInput.value || this.current;
-        if (event.keyCode === Keys.Enter) {
-            event.preventDefault();
-            if (incomingValue !== this.current) {
-                this.zone.run(() => {
-                    this.changePage(incomingValue - 1);
-                });
-            }
-        }
-    };
-    /**
-     * @hidden
-     *
-     * @param {string} value
-     *
-     * @memberOf PagerInputComponent
-     */
-    handleBlur = () => {
-        const inputValue = this.numericInput.value;
-        if (!inputValue) {
-            this.numericInput.writeValue(this.current);
-            return;
-        }
-        if (inputValue !== this.current) {
-            this.zone.run(() => {
-                this.changePage(inputValue - 1);
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    get current() {
-        return this.hasPages ? this.currentPage : 0;
-    }
-    get hasPages() {
-        return this.totalPages !== 0;
-    }
-    onChanges({ total, skip, pageSize }) {
-        this.total = total;
-        this.skip = skip;
-        this.pageSize = pageSize;
-        this.cd.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: NavigationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerInputComponent, isStandalone: true, selector: "kendo-treelist-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <span class="k-pager-input k-label">
-            {{textFor('pagerPage')}}
-            <kendo-numerictextbox
-                kendoTreeListFocusable
-                [enabled]="hasPages"
-                [style.margin]="'0 1ex'"
-                [style.width]="'3em'"
-                [spinners]="false"
-                [decimals]="0"
-                format="n0"
-                [disabled]="!hasPages"
-                [value]="current"
-                [min]="hasPages ? 1 : 0"
-                [max]="totalPages"
-                [autoCorrect]="true"
-                [title]="textFor('pagerPageNumberInputTitle')"
-                [attr.aria-label]="textFor('pagerPageNumberInputTitle')"
-                [kendoEventsOutsideAngular]="{
-                    keydown: handleKeyDown,
-                    focusout: handleBlur
-                }">
-            </kendo-numerictextbox>
-                {{textFor('pagerOf')}} {{totalPages}}
-        </span>
-    `, isInline: true, dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerInputComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-treelist-pager-input',
-                    template: `
-        <span class="k-pager-input k-label">
-            {{textFor('pagerPage')}}
-            <kendo-numerictextbox
-                kendoTreeListFocusable
-                [enabled]="hasPages"
-                [style.margin]="'0 1ex'"
-                [style.width]="'3em'"
-                [spinners]="false"
-                [decimals]="0"
-                format="n0"
-                [disabled]="!hasPages"
-                [value]="current"
-                [min]="hasPages ? 1 : 0"
-                [max]="totalPages"
-                [autoCorrect]="true"
-                [title]="textFor('pagerPageNumberInputTitle')"
-                [attr.aria-label]="textFor('pagerPageNumberInputTitle')"
-                [kendoEventsOutsideAngular]="{
-                    keydown: handleKeyDown,
-                    focusout: handleBlur
-                }">
-            </kendo-numerictextbox>
-                {{textFor('pagerOf')}} {{totalPages}}
-        </span>
-    `,
-                    standalone: true,
-                    imports: [NumericTextBoxComponent, FocusableDirective, EventsOutsideAngularDirective]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: NavigationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
-                type: ViewChild,
-                args: [NumericTextBoxComponent, { static: true }]
-            }] } });
-
-// eslint-disable no-access-missing-member
-/**
- * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_treelist)).
- */
-class PagerPrevButtonsComponent extends PagerElementComponent {
-    navigationService;
-    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();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerPrevButtonsComponent, isStandalone: true, 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, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", 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: "16.2.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>
-    `,
-                    standalone: true,
-                    imports: [ButtonComponent, FocusableDirective]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
-
-/**
- * @hidden
- */
-class PagerComponent {
-    navigationService;
-    localizationService;
-    pagerContext;
-    focusGroup;
-    focusRoot;
-    renderer;
-    element;
-    zone;
-    pagerInfo;
-    pagerPageSizes;
-    numericButtons;
-    allCount = 0;
-    total = 0;
-    skip = 1;
-    navigable;
-    pageSize;
-    set options(value) {
-        this.settings = normalize$1(value);
-    }
-    template;
-    pageChange = new EventEmitter();
-    pagerRole = 'application';
-    pagerRoleDescription = 'pager';
-    gridPagerClass = true;
-    pagerClass = true;
-    pagerSizingClass = true;
-    get hostTabindex() {
-        return this.navigationService.enabled ? '0' : '-1';
-    }
-    get hostAriaLabel() {
-        return this.pagerLabel;
+        return this.bindingDirective.parentIdField;
     }
-    settings = normalize$1({});
-    get totalPages() {
-        return Math.ceil((this.total || 0) / this.pageSize);
+    get idField() {
+        return this.bindingDirective.idField;
     }
-    get currentPage() {
-        return Math.floor((this.skip || 0) / this.pageSize) + 1;
+    get childrenField() {
+        return this.bindingDirective.childrenField;
     }
-    get templateContext() {
-        const context = this._templateContext;
-        context.totalPages = this.totalPages;
-        context.total = this.total;
-        context.allCount = this.allCount || this.total;
-        context.skip = this.skip;
-        context.pageSize = this.pageSize;
-        context.currentPage = this.currentPage;
-        return context;
+    get data() {
+        return this.bindingDirective.data;
     }
-    subscriptions = new Subscription();
-    _templateContext = {};
-    constructor(navigationService, localizationService, pagerContext, focusGroup, focusRoot, renderer, element, zone) {
-        this.navigationService = navigationService;
-        this.localizationService = localizationService;
-        this.pagerContext = pagerContext;
-        this.focusGroup = focusGroup;
-        this.focusRoot = focusRoot;
-        this.renderer = renderer;
-        this.element = element;
-        this.zone = zone;
+    getDragRowPerElement(row, data) {
+        let rowIndex = row?.getAttribute(rowIndexAttr);
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const dataItem = rowIndex === -1 ? null : data?.at(rowIndex)?.data;
+        return {
+            dataItem,
+            rowIndex,
+            element: row
+        };
     }
-    ngOnInit() {
-        const element = this.element.nativeElement;
-        this.subscriptions.add(this.pagerContext.pageChange.subscribe(this.changePage.bind(this)));
-        this.subscriptions.add(this.renderer.listen(element, 'focusin', event => this.onFocusIn(event)));
-        this.subscriptions.add(this.renderer.listen(element, 'keydown', event => this.onKeyDown(event)));
-        if (this.navigationService.enabled) {
-            this.focusRoot.deactivate();
+    createDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
         }
+        this.dropIndicator = document.createElement('div');
+        this.decorateDropIndicator();
+        this.dropIndicator.innerHTML = `
+            <div class="k-drop-hint-start"></div>
+            <div class="k-drop-hint-line"></div>
+        `;
+        document.body.appendChild(this.dropIndicator);
+        this.hide();
     }
-    ngOnChanges(changes) {
-        if (anyChanged(["pageSize", "skip", "total", "allCount"], changes, false)) {
-            this.pagerContext.notifyChanges({
-                pageSize: this.pageSize,
-                skip: this.skip,
-                total: this.total,
-                allCount: this.allCount || this.total
-            });
-        }
-        const changesInTemplate = changes['template'];
-        if (changesInTemplate) {
-            changesInTemplate.currentValue ? this.clearResponsiveStyling() : this.resizeHandler();
+    destroyDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
         }
-        if (changes['options']) {
-            this.settings.responsive ? this.resizeHandler() : this.clearResponsiveStyling();
+        if (this.dropIndicator && this.dropIndicator.parentElement) {
+            document.body.removeChild(this.dropIndicator);
+            this.dropIndicator = null;
         }
     }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
+    decorateHint() {
+        hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
+        Object.keys(hintStyles)
+            .forEach(style => this.renderer.setStyle(this.hintElement, style, hintStyles[style]));
     }
-    get pagerLabel() {
-        const localizationMsg = this.localizationService.get('pagerLabel') || '';
-        return replaceMessagePlaceholder(replaceMessagePlaceholder(localizationMsg, 'currentPage', this.currentPage.toString()), 'totalPages', this.totalPages.toString());
+    positionDropIndicator(ev) {
+        this.lastDropPosition = this.getDropPosition(ev.dragEvent);
+        this.updateDropIndicatorPosition();
     }
-    get focusTrapTabIndex() {
-        return this.focusGroup.isActive ? '0' : '-1';
+    decorateDropIndicator() {
+        dropIndicatorClasses.forEach(className => this.renderer.addClass(this.dropIndicator, className));
+        Object.keys(dropIndicatorStyles)
+            .forEach(style => this.renderer.setStyle(this.dropIndicator, style, dropIndicatorStyles[style]));
     }
-    onKeyDown(event) {
-        const keyCode = event.keyCode;
-        const target = event.target;
-        if (this.navigationService.enabled) {
-            if (keyCode === Keys.Enter && target === this.element.nativeElement) {
-                this.onEnterEvent(event);
-            }
-            else if (keyCode === Keys.Escape) {
-                this.onEscapeEvent();
-            }
+    getDropPosition(e) {
+        if (this.dropTarget === this.dragTarget || !isPresent$1(this.dropTarget)) {
+            return dropPosition.forbidden;
         }
-        if ((keyCode === Keys.ArrowLeft || keyCode === Keys.PageUp) ||
-            (keyCode === Keys.ArrowRight || keyCode === Keys.PageDown)) {
-            event.preventDefault();
-            this.onArrowEvent(keyCode, target);
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 3;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        const { dropTargetRow } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const pointerPosition = e.clientY;
+        const itemTop = itemViewPortCoords.top;
+        let currentDropPosition = null;
+        if (pointerPosition <= itemTop + itemDivisionHeight) {
+            currentDropPosition = dropPosition.before;
         }
-        else if (keyCode === Keys.Home || keyCode === Keys.End) {
-            event.preventDefault();
-            this.onHomeEndEvent(keyCode, target);
+        else if (pointerPosition >= itemTop + itemViewPortCoords.height - itemDivisionHeight) {
+            currentDropPosition = dropPosition.after;
         }
-    }
-    changePage(event) {
-        this.pageChange.emit(event);
-    }
-    resizeHandler = () => {
-        const element = this.element.nativeElement;
-        if (this.template || !element) {
-            return;
+        else {
+            currentDropPosition = dropPosition.over;
         }
-        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');
-                    }
-                }
-            });
-        });
-    };
-    onInnerFocusIn(event, position) {
-        this.zone.onStable.pipe(take(1)).subscribe(() => {
-            if (position === 'start') {
-                if (event.relatedTarget === this.element.nativeElement) {
-                    this.focusFirstElement();
-                }
-                else {
-                    this.focusLastElement();
-                }
-            }
-            else {
-                this.focusFirstElement();
+        if (currentDropPosition === dropPosition.before && isNextSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        if (isPresent$1(dropTargetRow.dataItem)) {
+            if (this.isOverChild(dropTargetRow.dataItem)) {
+                currentDropPosition = dropPosition.forbidden;
             }
-        });
-    }
-    onEnterEvent(event) {
-        const isTargetCompElement = event.target === this.element.nativeElement;
-        if (this.navigationService.enabled && isTargetCompElement) {
-            event.preventDefault();
-            this.focusRoot.activate();
-            this.focusFirstElement();
         }
-    }
-    onEscapeEvent() {
-        if (this.navigationService.enabled) {
-            this.focusRoot.deactivate();
-            this.element.nativeElement.focus();
+        else {
+            currentDropPosition = dropPosition.forbidden;
         }
+        return currentDropPosition;
     }
-    onArrowEvent(keyCode, target) {
-        const isArrowLeft = keyCode === Keys.ArrowLeft || keyCode === Keys.PageUp;
-        const condition = isArrowLeft ? this.currentPage > 1 : this.currentPage < this.totalPages;
-        if (this.shouldTriggerPageChange(target, condition)) {
-            const pageDir = isArrowLeft ? 'prevPage' : 'nextPage';
-            this.pagerContext[pageDir]();
+    updateDropIndicatorPosition() {
+        if (this.shouldHideDropIndicator() || !this.dropTarget) {
+            this.hide();
+            return;
         }
-    }
-    onHomeEndEvent(keyCode, target) {
-        const isHome = keyCode === Keys.Home;
-        const condition = isHome ? this.currentPage > 1 : this.currentPage < this.totalPages;
-        if (this.shouldTriggerPageChange(target, condition)) {
-            const pageNumber = isHome ? 0 : this.totalPages - 1;
-            this.pagerContext.changePage(pageNumber);
+        this.show();
+        const destinationItemOffset = getOffset(this.dropTarget);
+        let indicatorOffsetTop = destinationItemOffset.top;
+        const indicatorOffsetLeft = destinationItemOffset.left + this.dropIndicator.offsetWidth / 2;
+        if (this.lastDropPosition === dropPosition.after) {
+            indicatorOffsetTop += this.dropTarget.offsetHeight;
         }
+        this.renderer.setStyle(this.dropIndicator, 'left', `${indicatorOffsetLeft}px`);
+        this.renderer.setStyle(this.dropIndicator, 'top', `${indicatorOffsetTop}px`);
     }
-    onFocusIn(event) {
-        if (this.navigationService.enabled) {
-            const shouldFocusPager = event.target === this.element.nativeElement;
-            if (shouldFocusPager) {
-                this.focusRoot.deactivate();
-            }
-            else {
-                this.focusRoot.activate();
-            }
-        }
+    shouldHideDropIndicator() {
+        return this.lastDropPosition === dropPosition.forbidden || this.lastDropPosition === dropPosition.over;
     }
-    focusFirstElement() {
-        const first = findFocusableChild(this.element.nativeElement, true);
-        if (first) {
-            first.focus();
+    hide() {
+        if (isPresent$1(this.dropIndicator)) {
+            this.renderer.setStyle(this.dropIndicator, 'display', 'none');
         }
     }
-    focusLastElement() {
-        const last = findLastFocusableChild(this.element.nativeElement, true);
-        if (last) {
-            last.focus();
+    show() {
+        if (isPresent$1(this.dropIndicator)) {
+            this.renderer.removeStyle(this.dropIndicator, 'display');
         }
     }
-    shouldTriggerPageChange(target, condition) {
-        return this.navigationService.enabled && target === this.element.nativeElement && condition;
-    }
-    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');
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PagerComponent, isStandalone: true, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", navigable: "navigable", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "attr.role": "this.pagerRole", "attr.aria-roledescription": "this.pagerRoleDescription", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager": "this.pagerClass", "class.k-pager-md": "this.pagerSizingClass", "attr.tabindex": "this.hostTabindex", "attr.aria-label": "this.hostAriaLabel" } }, providers: [{
-                provide: FOCUS_ROOT_ACTIVE,
-                useValue: true
-            }, {
-                provide: FocusRoot,
-                deps: [FOCUS_ROOT_ACTIVE],
-                useClass: FocusRoot
-            }, {
-                provide: FocusGroup,
-                deps: [FocusRoot],
-                useClass: FocusGroup
-            }], 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"
-            [tabindex]="focusTrapTabIndex"
-            [attr.aria-hidden]="true"
-            (focusin)="onInnerFocusIn($event, 'start')">
-        </div>
-         <ng-container
-            *ngIf="template?.templateRef"
-            [ngTemplateOutlet]="template.templateRef"
-            [ngTemplateOutletContext]="templateContext">
-        </ng-container>
-        <ng-container *ngIf="!template?.templateRef">
-            <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>
-        </ng-container>
-         <div
-            *ngIf="navigationService.enabled"
-            class="k-sr-only"
-            [tabindex]="focusTrapTabIndex"
-            [attr.aria-hidden]="true"
-            (focusin)="onInnerFocusIn($event, 'end')">
-        </div>
-        <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons" }, { kind: "component", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: ["buttonCount"] }, { kind: "component", type: PagerInputComponent, selector: "kendo-treelist-pager-input" }, { kind: "component", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", inputs: ["navigable"] }, { kind: "component", type: PagerInfoComponent, selector: "kendo-treelist-pager-info" }, { kind: "component", type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: ["pageSizes"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-treelist-pager',
-                    providers: [{
-                            provide: FOCUS_ROOT_ACTIVE,
-                            useValue: true
-                        }, {
-                            provide: FocusRoot,
-                            deps: [FOCUS_ROOT_ACTIVE],
-                            useClass: FocusRoot
-                        }, {
-                            provide: FocusGroup,
-                            deps: [FocusRoot],
-                            useClass: FocusGroup
-                        }],
-                    template: `
-        <div
-            *ngIf="navigationService.enabled"
-            class="k-sr-only"
-            [tabindex]="focusTrapTabIndex"
-            [attr.aria-hidden]="true"
-            (focusin)="onInnerFocusIn($event, 'start')">
-        </div>
-         <ng-container
-            *ngIf="template?.templateRef"
-            [ngTemplateOutlet]="template.templateRef"
-            [ngTemplateOutletContext]="templateContext">
-        </ng-container>
-        <ng-container *ngIf="!template?.templateRef">
-            <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>
-        </ng-container>
-         <div
-            *ngIf="navigationService.enabled"
-            class="k-sr-only"
-            [tabindex]="focusTrapTabIndex"
-            [attr.aria-hidden]="true"
-            (focusin)="onInnerFocusIn($event, 'end')">
-        </div>
-        <kendo-resize-sensor *ngIf="settings.responsive" (resize)="resizeHandler()"></kendo-resize-sensor>
-  `,
-                    standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, PagerPrevButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerNextButtonsComponent, PagerInfoComponent, PagerPageSizesComponent, ResizeSensorComponent]
-                }]
-        }], 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: [PagerInfoComponent, { read: ElementRef }]
-            }], pagerPageSizes: [{
-                type: ViewChild,
-                args: [PagerPageSizesComponent, { read: ElementRef }]
-            }], numericButtons: [{
-                type: ViewChild,
-                args: [PagerNumericButtonsComponent]
-            }], allCount: [{
-                type: Input
-            }], total: [{
-                type: Input
-            }], skip: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], pageChange: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowReorderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
                 type: Output
-            }], pagerRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], pagerRoleDescription: [{
-                type: HostBinding,
-                args: ['attr.aria-roledescription']
-            }], gridPagerClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-pager']
-            }], pagerClass: [{
-                type: HostBinding,
-                args: ['class.k-pager']
-            }], pagerSizingClass: [{
-                type: HostBinding,
-                args: ['class.k-pager-md']
-            }], hostTabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], hostAriaLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
             }] } });
 
 /**
@@ -8700,7 +7292,7 @@ class MarqueeDirective {
             document.body.appendChild(this.marqueeElement);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarqueeDirective, deps: [{ token: i2$1.DraggableDirective }, { token: SelectionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarqueeDirective, deps: [{ token: i1$4.DraggableDirective }, { token: SelectionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MarqueeDirective, isStandalone: true, selector: "[kendoTreeListSelectionMarquee]", host: { properties: { "style.user-select": "this.userSelection" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarqueeDirective, decorators: [{
@@ -8709,7 +7301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListSelectionMarquee]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.DraggableDirective }, { type: SelectionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { userSelection: [{
+        }], ctorParameters: function () { return [{ type: i1$4.DraggableDirective }, { type: SelectionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { userSelection: [{
                 type: HostBinding,
                 args: ['style.user-select']
             }] } });
@@ -9854,7 +8446,7 @@ const DEFAULTS = {
 /**
  * @hidden
  */
-const normalize = (...settings) => Object.assign({}, DEFAULTS, ...settings);
+const normalize$1 = (...settings) => Object.assign({}, DEFAULTS, ...settings);
 
 /**
  * @hidden
@@ -10018,7 +8610,7 @@ class DraggableColumnDirective {
         }
         this.renderer.setStyle(this.element.nativeElement, 'touch-action', this.enabled ? 'none' : '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i2$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DragAndDropService }, { token: DragHintService }, { token: DropCueService }, { token: NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i1$4.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DragAndDropService }, { token: DragHintService }, { token: DropCueService }, { token: NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, host: { properties: { "class.k-grid-draggable-header": "this.hostClass" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, decorators: [{
@@ -10027,7 +8619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoDraggableColumn]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.DraggableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$4.DraggableDirective, decorators: [{
                     type: Host
                 }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: DragAndDropService }, { type: DragHintService }, { type: DropCueService }, { type: NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { context: [{
                 type: Input
@@ -12124,7 +10716,7 @@ class ColumnHandleDirective {
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i2$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1$4.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoTreeListColumnHandle]", inputs: { columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, decorators: [{
@@ -12133,7 +10725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListColumnHandle]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.DraggableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$4.DraggableDirective, decorators: [{
                     type: Host
                 }] }, { type: i0.ElementRef }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$1.LocalizationService }]; }, propDecorators: { columns: [{
                 type: Input
@@ -14361,7 +12953,7 @@ class ColumnMenuSortComponent extends ColumnMenuItemBase {
      */
     toggleSort(dir) {
         const field = this.service.column.field;
-        const { mode, allowUnsort } = normalize(this.service.sortable);
+        const { mode, allowUnsort } = normalize$1(this.service.sortable);
         const descriptor = this.descriptor;
         const sort = mode === 'multiple' ? this.service.sort.filter(s => s.field !== field) : [];
         if (descriptor && descriptor.dir === dir) {
@@ -14835,7 +13427,7 @@ class HeaderComponent {
         }
     }
     showSortNumbering(column) {
-        const { showIndexes } = normalize(this.sortable);
+        const { showIndexes } = normalize$1(this.sortable);
         return showIndexes
             && this.sort
             && this.sort.filter(({ dir }) => isPresent(dir)).length > 1
@@ -14860,7 +13452,7 @@ class HeaderComponent {
         }
     }
     toggleSort(column) {
-        const { allowUnsort, mode, initialDirection } = normalize(this.sortable, column.sortable);
+        const { allowUnsort, mode, initialDirection } = normalize$1(this.sortable, column.sortable);
         const descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
         if (mode === 'single') {
             return [descriptor];
@@ -15570,6 +14162,10 @@ class Messages extends ComponentMessages {
      * internally with the respective actual values.
      */
     pagerLabel;
+    /**
+     * The text of the aria-label attribute applied to the page number input element.
+     */
+    pagerInputLabel;
     /**
      * The label for the **First page** button.
      */
@@ -15609,7 +14205,7 @@ class Messages extends ComponentMessages {
     /**
      * The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager.
      */
-    selectPage;
+    pagerSelectPage;
     /**
      * The label of the filter cell or icon.
      */
@@ -15824,7 +14420,7 @@ class Messages extends ComponentMessages {
      */
     selectAllRowsCheckboxLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", dragRowHandleLabel: "dragRowHandleLabel", selectRowCheckboxLabel: "selectRowCheckboxLabel", selectAllRowsCheckboxLabel: "selectAllRowsCheckboxLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerInputLabel: "pagerInputLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", dragRowHandleLabel: "dragRowHandleLabel", selectRowCheckboxLabel: "selectRowCheckboxLabel", selectAllRowsCheckboxLabel: "selectAllRowsCheckboxLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -15835,6 +14431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], pagerLabel: [{
                 type: Input
+            }], pagerInputLabel: [{
+                type: Input
             }], pagerFirstPage: [{
                 type: Input
             }], pagerLastPage: [{
@@ -15853,7 +14451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], pagerItemsTotal: [{
                 type: Input
-            }], selectPage: [{
+            }], pagerSelectPage: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -15982,6 +14580,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+/**
+ * @hidden
+ */
+const normalizeSettings = ({ buttonCount = 10, info = true, type = 'numeric', pageSizes = false, previousNext = true, responsive = true }) => ({
+    buttonCount,
+    info,
+    pageSizes: pageSizes === true ? [5, 10, 20] : pageSizes,
+    previousNext,
+    type,
+    responsive
+});
+/**
+ * @hidden
+ */
+const normalize = (settings) => normalizeSettings(settings === true ? {} : settings);
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
@@ -16159,6 +14773,9 @@ class TreeListComponent {
      *
      */
     pageable = false;
+    get normalizedPageableSettings() {
+        return normalize(this.pageable);
+    }
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
      * By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
@@ -17676,6 +16293,7 @@ class TreeListComponent {
             FilterService,
             ResponsiveService,
             PagerContextService,
+            PagerNavigationService,
             ExcelService,
             ScrollSyncService,
             ResizeService,
@@ -17706,7 +16324,6 @@ class TreeListComponent {
             RowReorderService
         ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTreeListLocalizedMessages
-
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -17740,6 +16357,9 @@ class TreeListComponent {
             i18n-pagerItemsTotal="kendo.treelist.pagerItemsTotal|The label after the total items count in the TreeList pager"
             pagerItemsTotal="items total"
 
+            i18n-pagerInputLabel="kendo.treelist.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number"
+            pagerInputLabel="Type a page number"
+
             i18n-filterCellOperatorLabel="kendo.treelist.filterCellOperatorLabel|The label of the filter cell operators dropdown"
             filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
 
@@ -17860,8 +16480,8 @@ class TreeListComponent {
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
-            selectPage="Select page"
+            i18n-pagerSelectPage="kendo.treelist.pagerSelectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            pagerSelectPage="Select page"
 
             i18n-topToolbarLabel="kendo.treelist.topToolbarLabel|The label of the TreeList top toolbar"
             topToolbarLabel="Top toolbar"
@@ -18051,18 +16671,41 @@ class TreeListComponent {
                 </div>
             </ng-template>
         </div>
-        <kendo-treelist-pager
+        <kendo-pager
+            #pager
             *ngIf="showPager"
-            [template]="pagerTemplate"
+            class="k-grid-pager"
+            [navigable]="navigable"
             [pageSize]="pageSize"
             [total]="view.totalVisible"
-            [allCount]="view.total"
             [skip]="skip"
-            [navigable]="navigable"
-            [attr.aria-controls]="ariaRootId"
-            [options]="pageable"
+            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
+            [buttonCount]="normalizedPageableSettings.buttonCount"
+            [info]="normalizedPageableSettings.info"
+            [pageSizeValues]="normalizedPageableSettings.pageSizes"
+            [previousNext]="normalizedPageableSettings.previousNext"
+            [type]="normalizedPageableSettings.type"
             (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-treelist-pager>
+            <ng-template kendoPagerTemplate>
+                <ng-container 
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="pager.templateContext"></ng-container>
+            </ng-template>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </kendo-pager>
         <kendo-treelist-toolbar
             *ngIf="showBottomToolbar"
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
@@ -18080,7 +16723,38 @@ class TreeListComponent {
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { kind: "component", type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+        <ng-template #defaultPager>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
+                    [buttonCount]="normalizedPageableSettings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
+            </div>
+            <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
+                [pageSizes]="normalizedPageableSettings.pageSizes">
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="normalizedPageableSettings.info">
+            </kendo-pager-info>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: TableDirective, selector: "[kendoTreeListResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { kind: "component", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }, { kind: "component", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { kind: "component", type: i47.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i47.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i47.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i47.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i47.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i47.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i47.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i47.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i47.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
@@ -18103,6 +16777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FilterService,
                         ResponsiveService,
                         PagerContextService,
+                        PagerNavigationService,
                         ExcelService,
                         ScrollSyncService,
                         ResizeService,
@@ -18135,7 +16810,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-treelist',
                     template: `
         <ng-container kendoTreeListLocalizedMessages
-
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
             noRecords="No records available."
 
@@ -18169,6 +16843,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-pagerItemsTotal="kendo.treelist.pagerItemsTotal|The label after the total items count in the TreeList pager"
             pagerItemsTotal="items total"
 
+            i18n-pagerInputLabel="kendo.treelist.pagerInputLabel|The text of the aria-label attribute applied to the input element for entering the page number"
+            pagerInputLabel="Type a page number"
+
             i18n-filterCellOperatorLabel="kendo.treelist.filterCellOperatorLabel|The label of the filter cell operators dropdown"
             filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
 
@@ -18289,8 +16966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
-            selectPage="Select page"
+            i18n-pagerSelectPage="kendo.treelist.pagerSelectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            pagerSelectPage="Select page"
 
             i18n-topToolbarLabel="kendo.treelist.topToolbarLabel|The label of the TreeList top toolbar"
             topToolbarLabel="Top toolbar"
@@ -18480,18 +17157,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </div>
             </ng-template>
         </div>
-        <kendo-treelist-pager
+        <kendo-pager
+            #pager
             *ngIf="showPager"
-            [template]="pagerTemplate"
+            class="k-grid-pager"
+            [navigable]="navigable"
             [pageSize]="pageSize"
             [total]="view.totalVisible"
-            [allCount]="view.total"
             [skip]="skip"
-            [navigable]="navigable"
-            [attr.aria-controls]="ariaRootId"
-            [options]="pageable"
+            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
+            [buttonCount]="normalizedPageableSettings.buttonCount"
+            [info]="normalizedPageableSettings.info"
+            [pageSizeValues]="normalizedPageableSettings.pageSizes"
+            [previousNext]="normalizedPageableSettings.previousNext"
+            [type]="normalizedPageableSettings.type"
             (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-treelist-pager>
+            <ng-template kendoPagerTemplate>
+                <ng-container 
+                    [ngTemplateOutlet]="pagerTemplate ? pagerTemplate?.templateRef : defaultPager"
+                    [ngTemplateOutletContext]="pager.templateContext"></ng-container>
+            </ng-template>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </kendo-pager>
         <kendo-treelist-toolbar
             *ngIf="showBottomToolbar"
             class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
@@ -18509,9 +17209,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
+
+        <ng-template #defaultPager>
+            <div class="k-pager-numbers-wrap">
+                <kendo-pager-prev-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-prev-buttons>
+                <kendo-pager-numeric-buttons
+                    *ngIf="normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0"
+                    [buttonCount]="normalizedPageableSettings.buttonCount">
+                </kendo-pager-numeric-buttons>
+                <kendo-pager-input *ngIf="normalizedPageableSettings.type === 'input'"></kendo-pager-input>
+                <kendo-pager-next-buttons *ngIf="normalizedPageableSettings.previousNext"></kendo-pager-next-buttons>
+            </div>
+            <kendo-pager-page-sizes *ngIf="normalizedPageableSettings.pageSizes"
+                [pageSizes]="normalizedPageableSettings.pageSizes">
+            </kendo-pager-page-sizes>
+            <kendo-pager-info *ngIf="normalizedPageableSettings.info">
+            </kendo-pager-info>
+            <kendo-pager-messages
+                [ariaLabel]="messageFor('pagerLabel')"
+                [firstPage]="messageFor('pagerFirstPage')"
+                [inputLabel]="messageFor('pagerInputLabel')"
+                [previousPage]="messageFor('pagerPreviousPage')"
+                [nextPage]="messageFor('pagerNextPage')"
+                [lastPage]="messageFor('pagerLastPage')"
+                [selectPage]="messageFor('pagerSelectPage')"
+                [page]="messageFor('pagerPage')"
+                [itemsPerPage]="messageFor('pagerItemsPerPage')"
+                [items]="messageFor('pagerItems')"
+                [of]="messageFor('pagerOf')"
+                [pageNumberInputTitle]="messageFor('pagerPageNumberInputTitle')">
+            </kendo-pager-messages>
+        </ng-template>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, ToolbarComponent, DragTargetContainerDirective, DropTargetContainerDirective, TableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective, ListComponent, DraggableDirective, MarqueeDirective, TableBodyComponent, LoadingComponent, PagerComponent, IconWrapperComponent]
+                    imports: [LocalizedMessagesDirective, NgIf, NgTemplateOutlet, ToolbarComponent, DragTargetContainerDirective, DropTargetContainerDirective,
+                        TableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective, ListComponent, DraggableDirective, MarqueeDirective,
+                        TableBodyComponent, LoadingComponent, ...KENDO_PAGER, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: i0.ElementRef }, { type: ChangeNotificationService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }, { type: RowReorderService }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
@@ -19996,12 +18729,12 @@ class TreeListSpacerComponent {
      */
     width;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeListSpacerComponent, isStandalone: true, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TreeListSpacerComponent, isStandalone: true, selector: "kendo-treelist-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass", "style.flexBasis": "this.flexBasisStyle" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListSpacerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-treelist-spacer, kendo-treelist-pager-spacer',
+                    selector: 'kendo-treelist-spacer',
                     template: ``,
                     standalone: true
                 }]
@@ -22391,7 +21124,7 @@ class AddCommandToolbarDirective {
         e.preventDefault();
         this.editService.beginAdd();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, deps: [{ token: EditService }, { token: i2$2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, deps: [{ token: EditService }, { token: i95.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddCommandToolbarDirective, isStandalone: true, selector: "[kendoTreeListAddTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandToolbarDirective, decorators: [{
@@ -22400,7 +21133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListAddTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: i2$2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i95.ToolBarButtonComponent }]; } });
 
 /**
  * Represents the `export-to-Excel` toolbar tool of the TreeList.
@@ -22446,7 +21179,7 @@ class ExcelCommandToolbarDirective {
         e.preventDefault();
         this.excelService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: ExcelService }, { token: i2$2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: ExcelService }, { token: i95.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExcelCommandToolbarDirective, isStandalone: true, selector: "[kendoTreeListExcelTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, decorators: [{
@@ -22455,7 +21188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListExcelTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i2$2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: ExcelService }, { type: i95.ToolBarButtonComponent }]; } });
 
 /**
  * Represents the `export-to-PDF` toolbar tool of the TreeList.
@@ -22501,7 +21234,7 @@ class PDFCommandToolbarDirective {
         e.preventDefault();
         this.pdfService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, deps: [{ token: PDFService }, { token: i2$2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, deps: [{ token: PDFService }, { token: i95.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PDFCommandToolbarDirective, isStandalone: true, selector: "[kendoTreeListPDFTool]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PDFCommandToolbarDirective, decorators: [{
@@ -22510,7 +21243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoTreeListPDFTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: PDFService }, { type: i2$2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: PDFService }, { type: i95.ToolBarButtonComponent }]; } });
 
 /**
  * @hidden
@@ -22530,7 +21263,8 @@ const SHARED_EXPORTS = [
     LoadingComponent,
     FilterCellOperatorsComponent,
     CheckboxColumnComponent,
-    RowReorderColumnComponent
+    RowReorderColumnComponent,
+    ...KENDO_PAGER
 ];
 /**
  * @hidden
@@ -22559,20 +21293,6 @@ const HEADER_EXPORTS = [
     HeaderTemplateDirective,
     ColumnHandleDirective
 ];
-/**
- * @hidden
- * Utility array that contains the former Pager module exports
- */
-const PAGER_EXPORTS = [
-    PagerComponent,
-    PagerPrevButtonsComponent,
-    PagerNextButtonsComponent,
-    PagerNumericButtonsComponent,
-    PagerInputComponent,
-    PagerInfoComponent,
-    PagerPageSizesComponent,
-    PagerTemplateDirective
-];
 /**
  * @hidden
  * Utility array that contains the former SharedFilter module exports
@@ -22691,7 +21411,6 @@ const KENDO_TREELIST = [
     ...SHARED_EXPORTS,
     ...BODY_EXPORTS,
     ...HEADER_EXPORTS,
-    ...PAGER_EXPORTS,
     ...ROW_FILTER_EXPORTS,
     ...FILTER_MENU_EXPORTS,
     ...COLUMN_MENU_EXPORTS
@@ -22721,7 +21440,7 @@ const KENDO_TREELIST = [
  */
 class TreeListModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TreeListModule, imports: [TreeListComponent, ToolbarTemplateDirective, ToolbarComponent, TreeListSpacerComponent, CustomMessagesComponent, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, HierarchyBindingDirective, FlatBindingDirective, ExpandableDirective, SelectableDirective, TreeListToolbarFocusableDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, TableDirective], exports: [TreeListComponent, ToolbarTemplateDirective, ToolbarComponent, TreeListSpacerComponent, CustomMessagesComponent, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, HierarchyBindingDirective, FlatBindingDirective, ExpandableDirective, SelectableDirective, TreeListToolbarFocusableDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, ToolBarModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TreeListModule, imports: [TreeListComponent, ToolbarTemplateDirective, ToolbarComponent, TreeListSpacerComponent, CustomMessagesComponent, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, HierarchyBindingDirective, FlatBindingDirective, ExpandableDirective, SelectableDirective, TreeListToolbarFocusableDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, i95.ToolBarComponent, i95.ToolbarCustomMessagesComponent, i95.ToolBarButtonComponent, i95.ToolBarButtonGroupComponent, i95.ToolBarDropDownButtonComponent, i95.ToolBarSeparatorComponent, i95.ToolBarSpacerComponent, i95.ToolBarSplitButtonComponent, i95.ToolBarToolComponent, TableDirective], exports: [TreeListComponent, ToolbarTemplateDirective, ToolbarComponent, TreeListSpacerComponent, CustomMessagesComponent, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, HierarchyBindingDirective, FlatBindingDirective, ExpandableDirective, SelectableDirective, TreeListToolbarFocusableDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective, HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, i95.ToolBarComponent, i95.ToolbarCustomMessagesComponent, i95.ToolBarButtonComponent, i95.ToolBarButtonGroupComponent, i95.ToolBarDropDownButtonComponent, i95.ToolBarSeparatorComponent, i95.ToolBarSpacerComponent, i95.ToolBarSplitButtonComponent, i95.ToolBarToolComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListModule, providers: [
             IconsService,
             ResizeBatchService,
@@ -22736,13 +21455,13 @@ class TreeListModule {
             DialogService,
             WindowService,
             WindowContainerService
-        ], imports: [TreeListComponent, FilterCellOperatorsComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerPageSizesComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ToolBarModule] });
+        ], imports: [TreeListComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, i95.ToolBarComponent, i95.ToolbarCustomMessagesComponent, i95.ToolBarButtonComponent, i95.ToolBarButtonGroupComponent, i95.ToolBarDropDownButtonComponent, i95.ToolBarSeparatorComponent, i95.ToolBarSpacerComponent, i95.ToolBarSplitButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [...KENDO_TREELIST, ToolBarModule],
-                    imports: [...KENDO_TREELIST, TableDirective],
+                    exports: [...KENDO_TREELIST, ...KENDO_TOOLBAR],
+                    imports: [...KENDO_TREELIST, ...KENDO_TOOLBAR, TableDirective],
                     providers: [
                         IconsService,
                         ResizeBatchService,
@@ -22768,8 +21487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SharedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, imports: [ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent], exports: [ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, DraggableModule, IconsModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, providers: [IconsService], imports: [FilterCellOperatorsComponent, DraggableModule, IconsModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, imports: [ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent], exports: [ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, DraggableModule, IconsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, providers: [IconsService], imports: [FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, DraggableModule, IconsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -22793,8 +21512,8 @@ const ENTRY_COMPONENTS$1 = [
  */
 class RowFilterModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RowFilterModule, imports: [FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent], exports: [FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowFilterModule, imports: [StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RowFilterModule, imports: [FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent], exports: [FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowFilterModule, imports: [StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowFilterModule, decorators: [{
             type: NgModule,
@@ -22817,8 +21536,8 @@ const ENTRY_COMPONENTS = [
  */
 class FilterMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent], exports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent], exports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, decorators: [{
             type: NgModule,
@@ -22835,8 +21554,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class BodyModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BodyModule, imports: [CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective, i1$4.NumericTextBoxComponent, i1$4.NumericTextBoxCustomMessagesComponent, i2$1.PrefixTemplateDirective, i2$1.SuffixTemplateDirective, i2$1.SeparatorComponent, i15.DatePickerCustomMessagesComponent, i15.DatePickerComponent, i15.CellTemplateDirective, i15.CenturyCellTemplateDirective, i15.DecadeCellTemplateDirective, i15.FooterTemplateDirective, i15.HeaderTemplateDirective, i15.HeaderTitleTemplateDirective, i15.MonthCellTemplateDirective, i15.NavigationItemTemplateDirective, i15.WeekNumberCellTemplateDirective, i15.YearCellTemplateDirective, i15.NavigationItemTemplateDirective], exports: [CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BodyModule, imports: [CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, i1$4.NumericTextBoxComponent, i1$4.NumericTextBoxCustomMessagesComponent, i2$1.SeparatorComponent, i15.DatePickerCustomMessagesComponent, i15.DatePickerComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: BodyModule, imports: [CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective, i13.NumericTextBoxComponent, i13.NumericTextBoxCustomMessagesComponent, i1$4.PrefixTemplateDirective, i1$4.SuffixTemplateDirective, i1$4.SeparatorComponent, i15.DatePickerCustomMessagesComponent, i15.DatePickerComponent, i15.CellTemplateDirective, i15.CenturyCellTemplateDirective, i15.DecadeCellTemplateDirective, i15.FooterTemplateDirective, i15.HeaderTemplateDirective, i15.HeaderTitleTemplateDirective, i15.MonthCellTemplateDirective, i15.NavigationItemTemplateDirective, i15.WeekNumberCellTemplateDirective, i15.YearCellTemplateDirective, i15.NavigationItemTemplateDirective], exports: [CommandColumnComponent, CellTemplateDirective, CellComponent, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, AddCommandToolbarDirective, FooterTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BodyModule, imports: [CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, i13.NumericTextBoxComponent, i13.NumericTextBoxCustomMessagesComponent, i1$4.SeparatorComponent, i15.DatePickerCustomMessagesComponent, i15.DatePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BodyModule, decorators: [{
             type: NgModule,
@@ -22853,8 +21572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class HeaderModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, DraggableColumnDirective, DropTargetDirective], exports: [HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterCellOperatorsComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, DraggableColumnDirective, DropTargetDirective], exports: [HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,
@@ -22864,25 +21583,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * @hidden
- * @deprecated
- */
-class PagerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, imports: [i1$4.TextBoxDirective, i1$4.TextBoxComponent, i1$4.InputSeparatorComponent, i1$4.TextBoxSuffixTemplateDirective, i1$4.TextBoxPrefixTemplateDirective, i1$4.TextBoxCustomMessagesComponent, i2$1.PrefixTemplateDirective, i2$1.SuffixTemplateDirective, i2$1.SeparatorComponent, i1$4.NumericTextBoxComponent, i1$4.NumericTextBoxCustomMessagesComponent, i2$1.PrefixTemplateDirective, i2$1.SuffixTemplateDirective, i2$1.SeparatorComponent, i1$4.MaskedTextBoxComponent, i2$1.PrefixTemplateDirective, i2$1.SuffixTemplateDirective, i2$1.SeparatorComponent, i1$4.TextAreaComponent, i1$4.TextAreaDirective, i1$4.TextAreaPrefixComponent, i1$4.TextAreaSuffixComponent, i2$1.SeparatorComponent, i1$4.CheckBoxComponent, i1$4.CheckBoxDirective, i1$4.RadioButtonComponent, i1$4.RadioButtonDirective, i1$4.SwitchComponent, i1$4.SwitchCustomMessagesComponent, i1$4.FormFieldComponent, i1$4.HintComponent, i1$4.ErrorComponent, i1$4.SliderComponent, i1$4.SliderCustomMessagesComponent, i1$4.LabelTemplateDirective, i1$4.RangeSliderComponent, i1$4.RangeSliderCustomMessagesComponent, i1$4.LabelTemplateDirective, i1$4.RatingComponent, i1$4.RatingItemTemplateDirective, i1$4.RatingHoveredItemTemplateDirective, i1$4.RatingSelectedItemTemplateDirective, i1$4.SignatureComponent, i1$4.SignatureCustomMessagesComponent, i1$4.ColorPickerComponent, i1$4.ColorPickerCustomMessagesComponent, i1$4.FlatColorPickerComponent, i1$4.ColorPickerCustomMessagesComponent, i1$4.ColorGradientComponent, i1$4.ColorPickerCustomMessagesComponent, i1$4.ColorPaletteComponent, i1$4.ColorPickerCustomMessagesComponent, i3$1.LabelDirective, i3$1.LabelComponent, i3$1.CustomMessagesComponent, i4.ButtonComponent, i5.AutoCompleteComponent, i5.FixedGroupTemplateDirective, i5.FooterTemplateDirective, i5.GroupTemplateDirective, i5.HeaderTemplateDirective, i5.ItemTemplateDirective, i5.NoDataTemplateDirective, i5.FilterDirective, i5.CustomMessagesComponent, i2$1.SuffixTemplateDirective, i2$1.PrefixTemplateDirective, i2$1.SeparatorComponent, i5.ComboBoxComponent, i5.FixedGroupTemplateDirective, i5.FooterTemplateDirective, i5.GroupTemplateDirective, i5.HeaderTemplateDirective, i5.ItemTemplateDirective, i5.NoDataTemplateDirective, i5.FilterDirective, i5.CustomMessagesComponent, i2$1.SuffixTemplateDirective, i2$1.PrefixTemplateDirective, i2$1.SeparatorComponent, i5.MultiColumnComboBoxComponent, i5.ComboBoxColumnComponent, i5.ColumnHeaderTemplateDirective, i5.ColumnCellTemplateDirective, i5.FixedGroupTemplateDirective, i5.FooterTemplateDirective, i5.GroupTemplateDirective, i5.HeaderTemplateDirective, i5.ItemTemplateDirective, i5.NoDataTemplateDirective, i5.FilterDirective, i5.CustomMessagesComponent, i2$1.SuffixTemplateDirective, i2$1.PrefixTemplateDirective, i2$1.SeparatorComponent, i5.DropDownListComponent, i5.FixedGroupTemplateDirective, i5.FooterTemplateDirective, i5.GroupTemplateDirective, i5.HeaderTemplateDirective, i5.ItemTemplateDirective, i5.ValueTemplateDirective, i5.NoDataTemplateDirective, i5.FilterDirective, i5.CustomMessagesComponent, i5.MultiSelectComponent, i5.SummaryTagDirective, i5.CustomItemTemplateDirective, i5.FixedGroupTemplateDirective, i5.FooterTemplateDirective, i5.GroupTemplateDirective, i5.GroupTagTemplateDirective, i5.TagTemplateDirective, i5.HeaderTemplateDirective, i5.ItemTemplateDirective, i5.NoDataTemplateDirective, i5.FilterDirective, i5.CustomMessagesComponent, i2$1.SuffixTemplateDirective, i2$1.PrefixTemplateDirective, i2$1.SeparatorComponent, i5.DropDownTreeComponent, i5.DropDownTreeFlatBindingDirective, i5.DropDownTreeHierarchyBindingDirective, i5.DropDownTreesExpandDirective, i5.NodeTemplateDirective, i5.HeaderTemplateDirective, i5.FooterTemplateDirective, i5.ValueTemplateDirective, i5.NoDataTemplateDirective, i5.CustomMessagesComponent, i5.MultiSelectTreeComponent, i5.MultiSelectTreeFlatBindingDirective, i5.MultiSelectTreeHierarchyBindingDirective, i5.DropDownTreesExpandDirective, i5.NodeTemplateDirective, i5.MultiSelectTreeSummaryTagDirective, i5.GroupTagTemplateDirective, i5.TagTemplateDirective, i5.HeaderTemplateDirective, i5.FooterTemplateDirective, i5.ValueTemplateDirective, i5.NoDataTemplateDirective, i5.CustomMessagesComponent, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective], exports: [PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, providers: [ResizeBatchService], imports: [i1$4.TextBoxComponent, i1$4.InputSeparatorComponent, i1$4.TextBoxCustomMessagesComponent, i2$1.SeparatorComponent, i1$4.NumericTextBoxComponent, i1$4.NumericTextBoxCustomMessagesComponent, i2$1.SeparatorComponent, i1$4.MaskedTextBoxComponent, i2$1.SeparatorComponent, i1$4.TextAreaComponent, i1$4.TextAreaPrefixComponent, i1$4.TextAreaSuffixComponent, i2$1.SeparatorComponent, i1$4.CheckBoxComponent, i1$4.RadioButtonComponent, i1$4.SwitchComponent, i1$4.SwitchCustomMessagesComponent, i1$4.FormFieldComponent, i1$4.HintComponent, i1$4.ErrorComponent, i1$4.SliderComponent, i1$4.SliderCustomMessagesComponent, i1$4.RangeSliderComponent, i1$4.RangeSliderCustomMessagesComponent, i1$4.RatingComponent, i1$4.SignatureComponent, i1$4.SignatureCustomMessagesComponent, i1$4.ColorPickerComponent, i1$4.ColorPickerCustomMessagesComponent, i1$4.FlatColorPickerComponent, i1$4.ColorPickerCustomMessagesComponent, i1$4.ColorGradientComponent, i1$4.ColorPickerCustomMessagesComponent, i1$4.ColorPaletteComponent, i1$4.ColorPickerCustomMessagesComponent, i3$1.LabelComponent, i3$1.CustomMessagesComponent, KENDO_BUTTON, i5.AutoCompleteComponent, i5.CustomMessagesComponent, i2$1.SeparatorComponent, i5.ComboBoxComponent, i5.CustomMessagesComponent, i2$1.SeparatorComponent, i5.MultiColumnComboBoxComponent, i5.ComboBoxColumnComponent, i5.CustomMessagesComponent, i2$1.SeparatorComponent, i5.DropDownListComponent, i5.CustomMessagesComponent, i5.MultiSelectComponent, i5.CustomMessagesComponent, i2$1.SeparatorComponent, i5.DropDownTreeComponent, i5.CustomMessagesComponent, i5.MultiSelectTreeComponent, i5.CustomMessagesComponent, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerPageSizesComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...PAGER_EXPORTS],
-                    imports: [...KENDO_INPUTS, ...KENDO_LABEL, ...KENDO_BUTTON, ...KENDO_DROPDOWNS, ...PAGER_EXPORTS],
-                    providers: [ResizeBatchService]
-                }]
-        }] });
-
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -22959,7 +21659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class SharedFilterModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedFilterModule, imports: [FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent], exports: [FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i2$1.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, DropDownListModule, AutoCompleteModule, InputsModule, DatePickerModule, PopupModule, ButtonModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedFilterModule, imports: [FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent], exports: [FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, DropDownListModule, AutoCompleteModule, InputsModule, DatePickerModule, PopupModule, ButtonModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedFilterModule, providers: [
             PopupService,
             ResizeBatchService,
@@ -22974,7 +21674,7 @@ class SharedFilterModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [FilterCellOperatorsComponent, FilterCellOperatorsComponent, DropDownListModule, AutoCompleteModule, InputsModule, DatePickerModule, PopupModule, ButtonModule] });
+        ], imports: [FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, DropDownListModule, AutoCompleteModule, InputsModule, DatePickerModule, PopupModule, ButtonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedFilterModule, decorators: [{
             type: NgModule,
@@ -23003,5 +21703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BODY_EXPORTS, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, COLUMN_MENU_EXPORTS, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnResizingService, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EXCEL_EXPORTS, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FILTER_MENU_EXPORTS, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HEADER_EXPORTS, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_TREELIST, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PAGER_EXPORTS, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PDF_EXPORTS, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ROW_FILTER_EXPORTS, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, RowReorderService, SHARED_EXPORTS, SHARED_FILTER_EXPORTS, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };
+export { AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BODY_EXPORTS, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, COLUMN_MENU_EXPORTS, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnResizingService, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EXCEL_EXPORTS, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FILTER_MENU_EXPORTS, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HEADER_EXPORTS, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_TREELIST, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PDF_EXPORTS, PopupCloseEvent, ROW_FILTER_EXPORTS, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, RowReorderService, SHARED_EXPORTS, SHARED_FILTER_EXPORTS, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };