@progress/kendo-angular-treelist 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/treelist.component.mjs

@@ -1,3111 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, forwardRef } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Subscription, merge, isObservable } from 'rxjs';
-import { map, tap, take, filter, switchMap, takeUntil } from 'rxjs/operators';
-import { validatePackage } from '@progress/kendo-licensing';
-import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { guid, DraggableDirective } from '@progress/kendo-angular-common';
-import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { packageMetadata } from './package-metadata';
-import { ColumnComponent, isColumnComponent } from './columns/column.component';
-import { isSpanColumnComponent } from './columns/span-column.component';
-import { isColumnGroupComponent, ColumnGroupComponent } from './columns/column-group.component';
-import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers } from './utils';
-import { BrowserSupportService } from './layout/browser-support.service';
-import { ViewCollection } from './data/data.collection';
-import { EditService } from './editing/edit.service';
-import { ColumnsContainer } from './columns/columns-container';
-import { ChangeNotificationService } from './data/change-notification.service';
-import { NoRecordsTemplateDirective } from './rendering/no-records-template.directive';
-import { ColumnBase } from './columns/column-base';
-import { syncRowsHeight } from './layout/row-sync';
-import { FilterService } from './filtering/filter.service';
-import { PDFService } from './pdf/pdf.service';
-import { PDFExportEvent } from './pdf/pdf-export-event';
-import { SuspendService } from './scrolling/suspend.service';
-import { ResponsiveService } from "./layout/responsive.service";
-import { ExcelService } from './excel/excel.service';
-import { ColumnList } from './columns/column-list';
-import { ToolbarTemplateDirective } from "./rendering/toolbar/toolbar-template.directive";
-import { expandColumns, expandColumnsWithSpan, isValidFieldName } from "./columns/column-common";
-import { ScrollSyncService } from "./scrolling/scroll-sync.service";
-import { ResizeService } from "./layout/resize.service";
-import { closest, matchesClasses, matchesNodeName } from './rendering/common/dom-queries';
-import { DomEventsService } from './common/dom-events.service';
-import { ColumnResizingService } from "./column-resizing/column-resizing.service";
-import { hasFilterRow } from './filtering/filterable';
-import { SinglePopupService } from './common/single-popup.service';
-import { DragAndDropService } from './dragdrop/drag-and-drop.service';
-import { DragHintService } from './dragdrop/drag-hint.service';
-import { DropCueService } from './dragdrop/drop-cue.service';
-import { ColumnReorderService } from './dragdrop/column-reorder.service';
-import { ColumnReorderEvent } from './dragdrop/column-reorder-event';
-import { FocusRoot } from './navigation/focus-root';
-import { NavigationService } from './navigation/navigation.service';
-import { NavigationMetadata } from './navigation/navigation-metadata';
-import { IdService } from './common/id.service';
-import { ColumnInfoService } from "./common/column-info.service";
-import { ScrollRequestService } from './scrolling/scroll-request.service';
-import { SortService } from './common/sort.service';
-import { ColumnMenuTemplateDirective } from './column-menu/column-menu-template.directive';
-import { ColumnVisibilityChangeEvent } from './column-menu/column-visibility-change-event';
-import { ColumnLockedChangeEvent } from './column-menu/column-locked-change-event';
-import { sortColumns } from './columns/column-common';
-import { defaultTrackBy } from './common/default-track-by';
-import { ExpandStateService, defaultExpanded } from './expand-state/expand-state.service';
-import { getter } from '@progress/kendo-common';
-import { LocalEditService } from './editing-directives/local-edit.service';
-import { OptionChangesService } from "./common/option-changes.service";
-import { SelectionService } from './selection/selection.service';
-import { DataBoundTreeComponent } from './binding-directives/data-bound-tree-component';
-import { ExpandableTreeComponent } from './expand-state/expandable-tree-component';
-import { ContextService } from './common/provider.service';
-import { RowReorderService } from './row-reordering/row-reorder.service';
-import { LoadingComponent } from './rendering/common/loading.component';
-import { TableBodyComponent } from './rendering/table-body.component';
-import { MarqueeDirective } from './selection/marquee.directive';
-import { ListComponent } from './rendering/list.component';
-import { ResizableContainerDirective } from './layout/resizable.directive';
-import { HeaderComponent } from './rendering/header/header.component';
-import { ColGroupComponent } from './rendering/common/col-group.component';
-import { TableDirective } from './column-resizing/table.directive';
-import { ToolbarComponent } from './rendering/toolbar/toolbar.component';
-import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
-import { KENDO_PAGER, PagerContextService, PagerNavigationService, PagerTemplateDirective } from '@progress/kendo-angular-pager';
-import { normalize } from './common/pager-settings';
-import * as i0 from "@angular/core";
-import * as i1 from "./layout/browser-support.service";
-import * as i2 from "./data/change-notification.service";
-import * as i3 from "./editing/edit.service";
-import * as i4 from "./filtering/filter.service";
-import * as i5 from "./pdf/pdf.service";
-import * as i6 from "./layout/responsive.service";
-import * as i7 from "./excel/excel.service";
-import * as i8 from "./scrolling/scroll-sync.service";
-import * as i9 from "./common/dom-events.service";
-import * as i10 from "./column-resizing/column-resizing.service";
-import * as i11 from "./dragdrop/column-reorder.service";
-import * as i12 from "./common/column-info.service";
-import * as i13 from "./navigation/navigation.service";
-import * as i14 from "./common/sort.service";
-import * as i15 from "./scrolling/scroll-request.service";
-import * as i16 from "./expand-state/expand-state.service";
-import * as i17 from "./common/option-changes.service";
-import * as i18 from "./selection/selection.service";
-import * as i19 from "@progress/kendo-angular-l10n";
-import * as i20 from "./common/provider.service";
-import * as i21 from "./row-reordering/row-reorder.service";
-import * as i22 from "@progress/kendo-angular-pager";
-const createControl = (source) => (acc, key) => {
-    acc[key] = new FormControl(source[key]);
-    return acc;
-};
-const validateColumnsField = (columns) => expandColumns(columns.toArray())
-    .filter(isColumnComponent)
-    .filter(({ field }) => !isValidFieldName(field))
-    .forEach(({ field }) => console.warn(`
-                TreeList column field name '${field}' does not look like a valid JavaScript identifier.
-                Identifiers can contain only alphanumeric characters (including "$" or "_"), and may not start with a digit.
-                Please use only valid identifier names to ensure error-free operation.
-            `));
-const isInEditedCell = (element, treelistElement) => closest(element, matchesClasses('k-grid-edit-cell')) &&
-    closest(element, matchesNodeName('kendo-treelist')) === treelistElement;
-/**
- * Represents the Kendo UI TreeList component for Angular.
- * Use this component to display and manage hierarchical data in a tabular format.
- *
- * @example
- * ```html
- * <kendo-treelist
- *   [kendoTreeListFlatBinding]="data"
- *   [pageSize]="10"
- *   [pageable]="true">
- * </kendo-treelist>
- * ```
- *
- * @remarks
- * Supported children components are:
- * {@link CheckboxColumnComponent},
- * {@link ColumnChooserComponent},
- * {@link ColumnComponent},
- * {@link ColumnGroupComponent},
- * {@link ColumnMenuAutoSizeAllColumnsComponent},
- * {@link ColumnMenuAutoSizeColumnComponent},
- * {@link ColumnMenuChooserComponent},
- * {@link ColumnMenuComponent},
- * {@link ColumnMenuFilterComponent},
- * {@link ColumnMenuItemComponent},
- * {@link ColumnMenuLockComponent},
- * {@link ColumnMenuSortComponent},
- * {@link CommandColumnComponent},
- * {@link CustomMessagesComponent},
- * {@link ExcelComponent},
- * {@link TreeListSpacerComponent},
- * {@link PDFComponent},
- * {@link RowReorderColumnComponent},
- * {@link SpanColumnComponent},
- * {@link ToolBarComponent}.
- */
-export class TreeListComponent {
-    supportService;
-    wrapper;
-    changeNotification;
-    editService;
-    filterService;
-    pdfService;
-    responsiveService;
-    renderer;
-    excelService;
-    ngZone;
-    scrollSyncService;
-    domEvents;
-    columnResizingService;
-    changeDetectorRef;
-    columnReorderService;
-    columnInfoService;
-    navigationService;
-    sortService;
-    scrollRequestService;
-    expandStateService;
-    optionChanges;
-    selectionService;
-    localization;
-    ctx;
-    rowReorderService;
-    /**
-     * Provides an accessible description of the component.
-     */
-    ariaLabel;
-    /**
-     * Sets the data for the TreeList. When you provide an array, the TreeList gets the total count automatically
-     * ([more information and example]({% slug databinding_treelist %})).
-     */
-    set data(value) {
-        this.view.reset();
-        this._data = value;
-        this.loadedData = null;
-        this.unsubscribeDataLoaded();
-        if (isObservable(value)) {
-            this.dataLoadedSubscription = value.subscribe(this.dataLoaded); // handle error
-        }
-        else {
-            this.dataLoaded(value);
-        }
-    }
-    get data() {
-        return this.loadedData;
-    }
-    /**
-     * Sets the page size for the TreeList when [paging]({% slug paging_treelist %}) is enabled.
-     *
-     * @default 10
-     */
-    pageSize = 10;
-    /**
-     * Sets the height in pixels for the TreeList when you set the `scrollable` option.
-     * You can also use `style.height` to set the height. The `style.height`
-     * option supports units such as `px`, `%`, `em`, `rem`, and others.
-     */
-    height;
-    /**
-     * Sets the actual height of each TreeList row (`tr`) element in the DOM.
-     * The [virtual scrolling functionality]({% slug scrollmmodes_treelist %}) requires this setting.
-     * Set the `rowHeight` option to match the exact pixel height of the `tr` element in the DOM.
-     */
-    rowHeight;
-    /**
-     * Sets the number of records that the pager skips.
-     * The [paging]({% slug paging_treelist %}) functionality requires this setting.
-     */
-    get skip() {
-        return this._skip;
-    }
-    set skip(value) {
-        if (typeof value === 'number' && value >= 0) {
-            this._skip = value;
-            this.view.clear();
-        }
-    }
-    /**
-     * Sets the scroll mode for the TreeList.
-     *
-     * @default 'scrollable'
-     */
-    scrollable = 'scrollable';
-    /**
-     * Sets the descriptors for sorting the data ([see example]({% slug sorting_treelist %})).
-     */
-    set sort(value) {
-        if (isArray(value)) {
-            this._sort = value;
-        }
-    }
-    get sort() {
-        return this._sort;
-    }
-    /**
-     * Sets a function that defines how to track changes for the data rows.
-     *
-     * By default, the TreeList tracks changes by the index of the data item.
-     * The TreeList tracks edited rows by reference.
-     */
-    trackBy = defaultTrackBy;
-    /**
-     * Sets the descriptor for filtering the data ([see examples]({% slug filtering_treelist %})).
-     */
-    filter;
-    /**
-     * When set to `true`, the TreeList renders only the columns in the current viewport.
-     *
-     * @default false
-     */
-    virtualColumns = false;
-    /**
-     * @hidden
-     */
-    get showTopToolbar() {
-        return this.toolbarTemplate && ['top', 'both'].indexOf(this.toolbarTemplate.position) > -1;
-    }
-    /**
-     * @hidden
-     */
-    get showBottomToolbar() {
-        return this.toolbarTemplate && ['bottom', 'both'].indexOf(this.toolbarTemplate.position) > -1;
-    }
-    /**
-     * @hidden
-     */
-    get isLocked() {
-        return this.lockedLeafColumns.length > 0;
-    }
-    /**
-     * @hidden
-     */
-    get showPager() {
-        return !this.isVirtual && this.pageable !== false;
-    }
-    get showPagerInput() {
-        return this._showPagerInput;
-    }
-    set showPagerInput(value) {
-        if (this._showPagerInput === value) {
-            return;
-        }
-        this._showPagerInput = value;
-    }
-    get showPagerPageText() {
-        return this._showPagerPageText;
-    }
-    set showPagerPageText(value) {
-        if (!this.normalizedPageableSettings?.responsive) {
-            this._showPagerPageText = true;
-        }
-        if (this._showPagerPageText === value) {
-            return;
-        }
-        this._showPagerPageText = value;
-    }
-    get showPagerItemsText() {
-        return this._showPagerItemsText;
-    }
-    set showPagerItemsText(value) {
-        if (!this.normalizedPageableSettings?.responsive) {
-            this._showPagerItemsText = true;
-        }
-        if (this._showPagerItemsText === value) {
-            return;
-        }
-        this._showPagerItemsText = value;
-    }
-    get marqueeSelection() {
-        return this.selectionService.enableMarquee;
-    }
-    /**
-     * Enables the [filtering]({% slug filtering_treelist %}) of TreeList columns that have their `field` option set.
-     *
-     * @default false
-     */
-    filterable = false;
-    /**
-     * Enables the [sorting]({% slug sorting_treelist %}) of TreeList columns that have their `field` option set.
-     *
-     * @default false
-     */
-    sortable = false;
-    /**
-     * Configures the pager for the TreeList ([see example]({% slug paging_treelist %})).
-     *
-     * @default false
-     */
-    pageable = false;
-    get normalizedPageableSettings() {
-        return normalize(this.pageable);
-    }
-    /**
-     * When keyboard navigation is enabled, you can use dedicated shortcuts to interact with the TreeList.
-     * By default, navigation is enabled. To disable it and include the TreeList content in the normal tab sequence, set this property to `false`.
-     *
-     * @default true
-     */
-    navigable = true;
-    /**
-     * Determines whether TreeList columns resize during initialization to fit their headers and row content.
-     * Columns with `autoSize` set to `false` are excluded.
-     * To dynamically update the column width to match new content,
-     * refer to [this example]({% slug resizing_columns_treelist %}).
-     *
-     * @default false
-     */
-    autoSize = false;
-    /**
-     * A function executed for every data row in the component. It should return a string that will be used as a CSS class for the row.
-     */
-    set rowClass(fn) {
-        if (typeof fn !== 'function') {
-            throw new Error(`rowClass must be a function, but received ${JSON.stringify(fn)}.`);
-        }
-        this._rowClass = fn;
-    }
-    get rowClass() {
-        return this._rowClass;
-    }
-    /**
-     * Returns the currently focused cell (if any).
-     */
-    get activeCell() {
-        return this.navigationService.activeCell;
-    }
-    /**
-     * Gets the currently focused row (if any).
-     */
-    get activeRow() {
-        return this.navigationService.activeRow;
-    }
-    /**
-     * When set to `true`, you can resize columns by dragging the edges (resize handles) of their header cells
-     * ([see example]({% slug resizing_columns_treelist %})).
-     *
-     * @default false
-     */
-    resizable = false;
-    /**
-     * When set to `true`, you can reorder columns by dragging their header cells
-     * ([see example]({% slug reordering_columns_treelist %})).
-     *
-     * @default false
-     */
-    reorderable = false;
-    /**
-     * Determines whether the TreeList displays the loading indicator ([see example]({% slug databinding_treelist %})).
-     *
-     * @default false
-     */
-    loading = false;
-    /**
-     * Determines whether the column menu of the columns displays ([see example]({% slug columnmenu_treelist %})).
-     *
-     * @default false
-     */
-    columnMenu = false;
-    /**
-     * Determines whether the TreeList hides the header. The header is visible by default.
-     *
-     * The header includes column headers and the [filter row](slug:filter_row_treelist).
-     *
-     * @default false
-     */
-    hideHeader = false;
-    /**
-     * Sets the name of the field that contains the unique identifier of the node.
-     *
-     * @default "id"
-     */
-    set idField(value) {
-        if (typeof value === "function") {
-            this.idGetter = value;
-        }
-        else {
-            this.idGetter = getter(value);
-        }
-        this.editService.idGetter = this.idGetter;
-    }
-    /**
-     * Sets the TreeList selection settings.
-     */
-    set selectable(value) {
-        this.selectionService.settings = value;
-    }
-    /**
-     * Sets a callback that determines if the given row or cell is selected.
-     */
-    set isSelected(value) {
-        if (typeof value !== 'function' && isDevMode()) {
-            throw new Error(`isSelected must be a function, but received "${JSON.stringify(value)}".`);
-        }
-        this.selectionService.isSelected = value;
-    }
-    /**
-     * Enables the [row reordering]({% slug treelist_row_reordering %}) of the TreeList.
-     *
-     * @default false
-     */
-    set rowReorderable(value) {
-        this._rowReorderable = value;
-        if (value) {
-            this.rowReorderSubscription = this.rowReorderService.rowReorder.subscribe(args => {
-                hasObservers(this.rowReorder) && this.ngZone.run(() => {
-                    this.rowReorder.emit(args);
-                });
-            });
-            this.subscriptions.add(this.rowReorderSubscription);
-        }
-        else {
-            this.rowReorderSubscription?.unsubscribe();
-        }
-    }
-    get rowReorderable() {
-        return this._rowReorderable;
-    }
-    /**
-     * Fires when the TreeList selection changes.
-     */
-    selectionChange = new EventEmitter();
-    /**
-     * Fires when you modify the TreeList filter through the UI.
-     * You have to handle the event and filter the data.
-     */
-    filterChange = new EventEmitter();
-    /**
-     * Fires when the page of the TreeList changes ([see example]({% slug paging_treelist %})).
-     * You have to handle the event and page the data.
-     */
-    pageChange = new EventEmitter();
-    /**
-     * Fires when the sorting of the TreeList changes ([see example]({% slug sorting_treelist %})).
-     * You have to handle the event and sort the data.
-     */
-    sortChange = new EventEmitter();
-    /**
-     * Fires when the data state of the TreeList changes.
-     */
-    dataStateChange = new EventEmitter();
-    /**
-     * Fires when you click the **Edit** command button to edit a row
-     * ([see example]({% slug editing_template_forms_treelist %}#toc-editing-records)).
-     */
-    edit = new EventEmitter();
-    /**
-     * Fires when you click the **Cancel** command button to close a row
-     * ([see example]({% slug editing_template_forms_treelist %}#toc-cancelling-editing)).
-     */
-    cancel = new EventEmitter();
-    /**
-     * Fires when you click the **Save** command button to save changes in a row
-     * ([see example]({% slug editing_template_forms_treelist %}#toc-saving-records)).
-     */
-    save = new EventEmitter();
-    /**
-     * Fires when you click the **Remove** command button to remove a row
-     * ([see example]({% slug editing_template_forms_treelist %}#toc-removing-records)).
-     */
-    remove = new EventEmitter();
-    /**
-     * Fires when you click the **Add** command button to add a new row
-     * ([see example]({% slug editing_template_forms_treelist %}#toc-adding-records)).
-     */
-    add = new EventEmitter();
-    /**
-     * Fires when you leave an edited cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)).
-     */
-    cellClose = new EventEmitter();
-    /**
-     * Fires when you click a cell ([see example]({% slug editing_incell_treelist %}#toc-basic-concepts)).
-     */
-    cellClick = new EventEmitter();
-    /**
-     * Fires when you click the **Export to PDF** command button.
-     */
-    pdfExport = new EventEmitter();
-    /**
-     * Fires when you click the **Export to Excel** command button.
-     */
-    excelExport = new EventEmitter();
-    /**
-     * Fires when you complete the resizing of the column.
-     */
-    columnResize = new EventEmitter();
-    /**
-     * Fires when you complete the reordering of the column.
-     */
-    columnReorder = new EventEmitter();
-    /**
-     * Fires when you change the visibility of the columns from the column menu or column chooser.
-     */
-    columnVisibilityChange = new EventEmitter();
-    /**
-     * Fires when you change the locked state of the columns from the column menu or by reordering the columns.
-     */
-    columnLockedChange = new EventEmitter();
-    /**
-     * Fires when you scroll to the last record on the page and enables endless scrolling
-     * ([see example]({% slug scrollmmodes_treelist %}#toc-endless-scrolling)).
-     * You have to handle the event and page the data.
-     */
-    scrollBottom = new EventEmitter();
-    /**
-     * Fires when the TreeList content scrolls.
-     * For performance reasons, the event triggers outside the Angular zone. Enter the Angular zone if you make any changes that require change detection.
-     */
-    contentScroll = new EventEmitter();
-    /**
-     * Fires when an item expands.
-     */
-    expandEvent = new EventEmitter();
-    /**
-     * Fires when an item collapses.
-     */
-    collapseEvent = new EventEmitter();
-    /**
-     * @hidden
-     *
-     * Emits when the expand or collapse events are fired.
-     * Used by the expand directive and the Gantt component.
-     */
-    expandStateChange = new EventEmitter();
-    /**
-     * Fires when you drop the dragged row and reordering occurs.
-     * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}).
-     */
-    rowReorder = new EventEmitter();
-    /**
-     * @hidden
-     */
-    columnOrderChange = new EventEmitter();
-    /**
-     * @hidden
-     */
-    set columnsRef(columns) {
-        this._columnsRef = columns;
-        // load the new columns list only if a valid query list is provided
-        if (isPresent(columns)) {
-            this.loadColumns(columns);
-        }
-    }
-    get columnsRef() {
-        return this._columnsRef;
-    }
-    /**
-     * A query list of all declared columns.
-     */
-    columns = new QueryList();
-    get dir() {
-        return this.direction;
-    }
-    hostClasses = true;
-    get lockedClasses() {
-        return this.lockedLeafColumns.length > 0;
-    }
-    get virtualClasses() {
-        return this.isVirtual;
-    }
-    get noScrollbarClass() {
-        return this.scrollbarWidth === 0;
-    }
-    noRecordsTemplateChildren;
-    get noRecordsTemplate() {
-        if (this._customNoRecordsTemplate) {
-            return this._customNoRecordsTemplate;
-        }
-        return this.noRecordsTemplateChildren ? this.noRecordsTemplateChildren.first : undefined;
-    }
-    set noRecordsTemplate(customNoRecordsTemplate) {
-        this._customNoRecordsTemplate = customNoRecordsTemplate;
-    }
-    pagerTemplateChildren;
-    get pagerTemplate() {
-        if (this._customPagerTemplate) {
-            return this._customPagerTemplate;
-        }
-        return this.pagerTemplateChildren ? this.pagerTemplateChildren.first : undefined;
-    }
-    set pagerTemplate(customPagerTemplate) {
-        this._customPagerTemplate = customPagerTemplate;
-    }
-    toolbarTemplateChildren;
-    get toolbarTemplate() {
-        if (this._customToolbarTemplate) {
-            return this._customToolbarTemplate;
-        }
-        return this.toolbarTemplateChildren ? this.toolbarTemplateChildren.first : undefined;
-    }
-    set toolbarTemplate(customToolbarTemplate) {
-        this._customToolbarTemplate = customToolbarTemplate;
-    }
-    columnMenuTemplates;
-    lockedHeader;
-    header;
-    footer = new QueryList();
-    ariaRoot;
-    dragTargetContainer;
-    dropTargetContainer;
-    listComponent;
-    get scrollbarWidth() {
-        return this.supportService.scrollbarWidth;
-    }
-    get headerPadding() {
-        if (isUniversal()) {
-            return '';
-        }
-        const padding = Math.max(0, this.scrollbarWidth) + 'px';
-        const right = this.rtl ? 0 : padding;
-        const left = this.rtl ? padding : 0;
-        return `0 ${right} 0 ${left}`;
-    }
-    columnMenuOptions;
-    columnList;
-    columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
-        if (!isUniversal()) {
-            column.matchesMedia = this.matchesMedia(column);
-        }
-        return column.isVisible;
-    }));
-    get showLoading() {
-        return this.loading || (isObservable(this._data) && !this.loadedData) || this.excelService.loading;
-    }
-    get showFooter() {
-        return this.columnsContainer.hasFooter;
-    }
-    get ariaRowCount() {
-        return this.totalColumnLevels + 1 + this.totalCount;
-    }
-    get ariaColCount() {
-        return this.columnsContainer.leafColumnsToRender.length;
-    }
-    get ariaMultiselectable() {
-        if (this.selectionService.enabled) {
-            return this.selectionService.enableMultiple;
-        }
-    }
-    get navigation() {
-        return this.navigationService;
-    }
-    get isVirtual() {
-        return this.scrollable === 'virtual';
-    }
-    get isScrollable() {
-        return this.scrollable !== 'none';
-    }
-    get visibleColumns() {
-        return this.columnsContainer.allColumns;
-    }
-    get lockedColumns() {
-        return this.columnsContainer.lockedColumns;
-    }
-    get nonLockedColumns() {
-        return this.columnsContainer.nonLockedColumns;
-    }
-    get lockedLeafColumns() {
-        return this.columnsContainer.lockedLeafColumns;
-    }
-    get nonLockedLeafColumns() {
-        return this.columnsContainer.nonLockedLeafColumns;
-    }
-    get leafColumns() {
-        return this.columnsContainer.leafColumns;
-    }
-    get totalColumnLevels() {
-        return this.columnsContainer.totalLevels;
-    }
-    get headerColumns() {
-        if (this.virtualColumns && !this.pdfService.exporting) {
-            return this.viewportColumns;
-        }
-        return this.nonLockedColumns;
-    }
-    get headerLeafColumns() {
-        if (this.virtualColumns && !this.pdfService.exporting) {
-            return this.leafViewportColumns;
-        }
-        return this.nonLockedLeafColumns;
-    }
-    get lockedWidth() {
-        return expandColumns(this.lockedLeafColumns.toArray()).reduce((prev, curr) => prev + (curr.width || 0), 0);
-    }
-    get nonLockedWidth() {
-        if ((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) {
-            return !this.virtualColumns ? this.columnsContainer.unlockedWidth :
-                this.leafViewportColumns.reduce((acc, column) => acc + (column.width || 0), 0);
-        }
-        return undefined;
-    }
-    get columnMenuTemplate() {
-        const template = this.columnMenuTemplates.first;
-        return template ? template.templateRef : null;
-    }
-    get totalCount() {
-        return this.view.totalRows;
-    }
-    /**
-     * Sets or gets the callback function that retrieves the child nodes for a particular node.
-     */
-    set fetchChildren(value) {
-        this._fetchChildren = value;
-    }
-    get fetchChildren() {
-        return this._fetchChildren;
-    }
-    /**
-     * Sets or gets the callback function that determines if a particular node has child nodes.
-     */
-    set hasChildren(value) {
-        this._hasChildren = value;
-    }
-    get hasChildren() {
-        return this._hasChildren;
-    }
-    /**
-     * Sets the callback function that determines if a particular item is expanded.
-     */
-    set isExpanded(value) {
-        this.expandStateService.isExpanded = value || defaultExpanded;
-        this.expandIcons = Boolean(value);
-    }
-    idGetter = getter(undefined);
-    localEditService = new LocalEditService();
-    view;
-    expandIcons;
-    ariaRootId = `k-${guid()}`;
-    dataChanged = false;
-    loadedData;
-    _fetchChildren;
-    _hasChildren = (() => false);
-    subscriptions = new Subscription();
-    dataLoadedSubscription;
-    focusElementSubscription;
-    rowReorderSubscription;
-    detachElementEventHandlers;
-    rtl = false;
-    shouldGenerateColumns = true;
-    direction;
-    _data = [];
-    _sort = new Array();
-    _skip = 0;
-    _columnsRef;
-    cachedWindowWidth = 0;
-    _customNoRecordsTemplate;
-    _customPagerTemplate;
-    _customToolbarTemplate;
-    leafViewportColumns;
-    viewportColumns;
-    pageChangeTimeout;
-    _rowReorderable = false;
-    _showPagerInput = true;
-    _showPagerPageText = true;
-    _showPagerItemsText = true;
-    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx, rowReorderService) {
-        this.supportService = supportService;
-        this.wrapper = wrapper;
-        this.changeNotification = changeNotification;
-        this.editService = editService;
-        this.filterService = filterService;
-        this.pdfService = pdfService;
-        this.responsiveService = responsiveService;
-        this.renderer = renderer;
-        this.excelService = excelService;
-        this.ngZone = ngZone;
-        this.scrollSyncService = scrollSyncService;
-        this.domEvents = domEvents;
-        this.columnResizingService = columnResizingService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.columnReorderService = columnReorderService;
-        this.columnInfoService = columnInfoService;
-        this.navigationService = navigationService;
-        this.sortService = sortService;
-        this.scrollRequestService = scrollRequestService;
-        this.expandStateService = expandStateService;
-        this.optionChanges = optionChanges;
-        this.selectionService = selectionService;
-        this.localization = localization;
-        this.ctx = ctx;
-        this.rowReorderService = rowReorderService;
-        validatePackage(packageMetadata);
-        this.subscriptions.add(localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-        this.view = new ViewCollection(this.viewFieldAccessor.bind(this), this.expandStateService, this.editService, this.selectionService);
-        this.selectionService.init(this);
-        this.ctx.treelist = this;
-        this.subscriptions.add(this.selectionService.changes.subscribe((args) => {
-            if (hasObservers(this.selectionChange)) {
-                this.ngZone.run(() => {
-                    args.sender = this;
-                    this.selectionChange.emit(args);
-                    this.selectionService.updateSelectedState();
-                    this.changeDetectorRef.markForCheck();
-                });
-            }
-        }));
-        this.columnInfoService.init(this.columnsContainer, () => this.columnList);
-        this.subscriptions.add(this.columnInfoService.visibilityChange.subscribe((changed) => {
-            this.columnVisibilityChange.emit(new ColumnVisibilityChangeEvent(changed));
-            this.changeDetectorRef.markForCheck();
-        }));
-        this.subscriptions.add(this.columnInfoService.lockedChange.subscribe((changed) => {
-            this.columnLockedChange.emit(new ColumnLockedChangeEvent(changed));
-            this.changeDetectorRef.markForCheck();
-        }));
-        this.subscriptions.add(merge(this.optionChanges.columns, this.optionChanges.options).subscribe(() => {
-            this.changeDetectorRef.markForCheck();
-        }));
-        this.subscriptions.add(this.filterService.changes.subscribe(x => {
-            this.filterChange.emit(x);
-        }));
-        this.subscriptions.add(this.sortService.changes.subscribe(x => {
-            this.sortChange.emit(x);
-        }));
-        this.attachStateChangesEmitter();
-        this.attachEditHandlers();
-        this.attachDomEventHandlers();
-        this.subscriptions.add(this.pdfService.exportClick.subscribe(this.emitPDFExportEvent.bind(this)));
-        this.subscriptions.add(this.excelService.exportClick.subscribe(this.saveAsExcel.bind(this)));
-        this.subscriptions.add(this.excelService.loadingChange.subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-        }));
-        this.columnsContainerChange();
-        this.handleColumnResize();
-        this.columnList = new ColumnList(this.columns);
-        this.subscriptions.add(this.columnReorderService
-            .changes.subscribe(this.reorder.bind(this)));
-        this.subscriptions.add(this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this)));
-        this.subscriptions.add(this.expandStateService.changes.subscribe((args) => {
-            if (args.expand) {
-                this.expandEvent.emit(args);
-            }
-            else {
-                this.collapseEvent.emit(args);
-            }
-            if (!args.isDefaultPrevented()) {
-                this.changeDetectorRef.markForCheck();
-                this.view.clear();
-                if (this.lockedLeafColumns.length) {
-                    this.ngZone.onStable.pipe(take(1)).subscribe(() => this.changeNotification.notify());
-                }
-                this.expandStateChange.emit(args);
-            }
-            if (this.rowReorderable) {
-                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    this.notifyReorderContainers();
-                });
-            }
-        }));
-        this.subscriptions.add(this.view.childrenLoaded.subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-        }));
-        this.subscriptions.add(this.view.resetPage.subscribe(() => {
-            if (this.skip > 0 && hasObservers(this.pageChange)) {
-                // don't think there is a way to avoid this
-                // every callback in which the view can be computed is already passed the change detection
-                // computing the current page in advance also does not seem feasible for such a rare case
-                this.pageChangeTimeout = setTimeout(() => {
-                    this.pageChange.emit({ skip: 0, take: this.pageSize });
-                }, 0);
-            }
-            this.skip = 0;
-        }));
-        this.dataLoaded = this.dataLoaded.bind(this);
-        this.editService.idGetter = this.idGetter;
-    }
-    /**
-     * @hidden
-     */
-    viewFieldAccessor() {
-        return {
-            fetchChildren: this.fetchChildren,
-            hasChildren: this.hasChildren,
-            idGetter: this.idGetter,
-            skip: this.skip,
-            pageSize: this.pageSize,
-            pageable: this.pageable,
-            isVirtual: this.isVirtual,
-            data: this.loadedData,
-            hasFooter: this.columnsContainer.hasFooter
-        };
-    }
-    /**
-     * @hidden
-     */
-    onDataChange() {
-        this.autoGenerateColumns();
-        this.changeNotification.notify();
-        this.pdfService.dataChanged.emit();
-        this.updateNavigationMetadata();
-    }
-    ngOnChanges(changes) {
-        if (this.lockedLeafColumns.length && anyChanged(["pageSize", "skip", "sort"], changes)) {
-            this.changeNotification.notify();
-        }
-        if (anyChanged(["pageSize", "scrollable", 'virtualColumns'], changes)) {
-            this.updateNavigationMetadata();
-        }
-        if (isChanged("virtualColumns", changes)) {
-            this.viewportColumns = this.leafViewportColumns = null;
-        }
-        if (isChanged("height", changes, false)) {
-            this.renderer.setStyle(this.wrapper.nativeElement, 'height', `${this.height}px`);
-        }
-        if (isChanged("filterable", changes) && this.lockedColumns.length) {
-            this.syncHeaderHeight(this.ngZone.onStable.asObservable().pipe(take(1)));
-        }
-        if (anyChanged(["columnMenu", "sortable", "filterable"], changes, false)) {
-            this.columnMenuOptions = this.columnMenu && Object.assign({
-                filter: Boolean(this.filterable),
-                sort: Boolean(this.sortable)
-            }, this.columnMenu);
-        }
-        if (isChanged("scrollable", changes) && this.isScrollable) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => this.attachScrollSync());
-        }
-    }
-    ngAfterViewInit() {
-        this.attachScrollSync();
-        this.attachElementEventHandlers();
-        this.updateNavigationMetadata();
-        this.applyAutoSize();
-        this.subscriptions.add(this.pagerTemplateChildren.changes.subscribe(() => this.changeDetectorRef.markForCheck()));
-        const toolbarComponentWrapper = this.wrapper?.nativeElement?.querySelector('kendo-toolbar');
-        if (toolbarComponentWrapper) {
-            this.renderer.addClass(toolbarComponentWrapper, 'k-grid-toolbar');
-        }
-    }
-    ngAfterContentChecked() {
-        if (this.dataChanged) {
-            this.dataChanged = false;
-            this.onDataChange();
-        }
-        this.columnsContainer.refresh();
-        this.verifySettings();
-    }
-    ngAfterContentInit() {
-        // initially passed columns though the input prop are overwritten by ContentChildren-queried ones
-        if (isPresent(this.columnsRef)) {
-            this.loadColumns(this.columnsRef);
-        }
-        this.shouldGenerateColumns = !this.columns.length;
-        this.autoGenerateColumns();
-        this.columnList = new ColumnList(this.columns);
-        // is this needed? after content checked already does this
-        this.subscriptions.add(this.columns.changes.subscribe(() => {
-            this.verifySettings();
-            this.optionChanges.columnChanged();
-        }));
-    }
-    ngOnInit() {
-        if (this.navigable) {
-            this.navigationService.init(this.navigationMetadata());
-        }
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        if (this.detachElementEventHandlers) {
-            this.detachElementEventHandlers();
-        }
-        if (this.focusElementSubscription) {
-            this.focusElementSubscription.unsubscribe();
-        }
-        this.unsubscribeDataLoaded();
-        this.ngZone = null;
-        clearTimeout(this.pageChangeTimeout);
-    }
-    /**
-     * @hidden
-     */
-    handleReorderEvents(ev, evType) {
-        this.rowReorderService[evType](ev);
-    }
-    /**
-     * @hidden
-     */
-    getDefaultSelectors(type) {
-        return this.rowReorderService.defaultSelectors[type];
-    }
-    /**
-     * @hidden
-     */
-    treeListData = () => { return this.view; };
-    /**
-     * @hidden
-     */
-    getHintSettings(setting) {
-        return this.rowReorderService[setting];
-    }
-    /**
-     * @hidden
-     */
-    get hintText() {
-        return this.rowReorderService.getDefaultHintText(this.columnList, this.view);
-    }
-    /**
-     * @hidden
-     */
-    attachScrollSync() {
-        if (isUniversal()) {
-            return;
-        }
-        if (this.header) {
-            this.scrollSyncService.registerEmitter(this.header.nativeElement, "header");
-        }
-        if (this.footer) {
-            this.subscriptions.add(observe(this.footer)
-                .subscribe(footers => footers
-                .map(footer => footer.nativeElement)
-                .filter(isPresent)
-                .forEach(element => this.scrollSyncService.registerEmitter(element, "footer"))));
-        }
-    }
-    /**
-     * Switches the specified table row to edit mode ([see example]({% slug editing_template_forms_treelist %}#toc-editing-records)).
-     *
-     * @param dataItem The data item that you will edit.
-     * @param group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi'])
-     * that describes the edit form.
-     * @param options Additional options. Use `skipFocus` to determine if the edit element of the row should receive focus.
-     *
-     * @default false
-     */
-    editRow(dataItem, group, options) {
-        this.editService.editRow(dataItem, group);
-        this.view.updateEditedState();
-        this.changeDetectorRef.markForCheck();
-        if (options && options['skipFocus']) {
-            return;
-        }
-        this.focusEditElement(() => {
-            return `tr[data-treelist-view-index="${this.view.itemIndex(dataItem)}"]`;
-        });
-    }
-    /**
-     * Closes the editor for a given row ([see example]({% slug editing_template_forms_treelist %}#toc-cancelling-editing)).
-     *
-     * @param dataItem The data item that you will switch out of edit mode.
-     * @param isNew Determines whether the data item is new.
-     */
-    closeRow(dataItem, isNew) {
-        this.editService.close(dataItem, isNew);
-        this.changeDetectorRef.markForCheck();
-        if (isNew) {
-            this.view.clear();
-        }
-        else {
-            this.view.updateEditedState();
-        }
-    }
-    /**
-     * Creates a new row editor ([see example]({% slug editing_template_forms_treelist %}#toc-adding-records)).
-     *
-     * @param group The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes
-     * the edit form. If called with a data item, it builds the `FormGroup` from the data item fields.
-     */
-    addRow(group, parent) {
-        const isFormGroup = group instanceof FormGroup;
-        if (!isFormGroup) {
-            const fields = Object.keys(group).reduce(createControl(group), {}); // FormBuilder?
-            group = new FormGroup(fields);
-        }
-        if (this.isVirtual && !parent && this.skip) {
-            const firstVisible = this.navigationService.viewport.firstItemIndex;
-            if (firstVisible !== this.skip) {
-                this.skip = firstVisible;
-                this.pageChange.emit({
-                    skip: this.skip,
-                    take: this.pageSize
-                });
-            }
-        }
-        this.editService.addRow(parent, group);
-        this.changeDetectorRef.markForCheck();
-        this.view.clear();
-        this.focusEditElement(() => {
-            return parent ? `tr[data-treelist-view-index="${this.view.itemIndex(parent) + 1}"]` : '.k-grid-add-row';
-        });
-    }
-    /**
-     * Puts the cell that you specify by the table row and column in edit mode.
-     *
-     * @param dataItem The data item that you will edit.
-     * @param column The leaf column index, or the field name or the column instance that should be edited.
-     * @param group The [`FormGroup`](link:site.data.urls.angular['formgroupapi'])
-     * that describes the edit form.
-     */
-    editCell(dataItem, column, group) {
-        const instance = this.columnInstance(column);
-        this.editService.editCell(dataItem, instance, group);
-        this.changeDetectorRef.markForCheck();
-        this.view.updateEditedState();
-        this.focusEditElement(() => '.k-grid-edit-cell');
-    }
-    /**
-     * Closes the current cell in edit mode and fires
-     * the [`cellClose`]({% slug api_treelist_treelistcomponent %}#toc-cellclose) event.
-     *
-     * @return  {boolean} A Boolean value that indicates whether the edited cell closed.
-     * A `false` value indicates that the [`cellClose`]({% slug api_treelist_treelistcomponent %}#toc-cellclose) event was prevented.
-     */
-    closeCell() {
-        return !this.editService.closeCell();
-    }
-    /**
-     * Closes the current cell in edit mode.
-     */
-    cancelCell() {
-        this.editService.cancelCell();
-        this.view.updateEditedState();
-    }
-    /**
-     * Gets a flag that indicates if a row or a cell is currently edited.
-     *
-     * @return {boolean} A Boolean flag that indicates if a row or a cell is currently edited.
-     */
-    isEditing() {
-        return this.editService.isEditing();
-    }
-    /**
-     * Gets a flag that indicates if a cell is currently edited.
-     *
-     * @return {boolean} A Boolean flag that indicates if a cell is currently being edited.
-     */
-    isEditingCell() {
-        return this.editService.isEditing() && this.editService.isEditingCell();
-    }
-    /**
-     * Starts the PDF export ([see example]({% slug pdfexport_treelist %})).
-     */
-    saveAsPDF() {
-        this.pdfService.save(this);
-    }
-    /**
-     * Exports the TreeList element to a Drawing [`Group`]({% slug api_kendo-drawing_group %}) by using the `kendo-treelist-pdf` component options.
-     * ([see example]({% slug pdfexport_treelist %}#toc-exporting-multiple-treelists-to-the-same-pdf)).
-     *
-     * @return {Promise} A promise that resolves with the Drawing `Group`.
-     */
-    drawPDF() {
-        const promise = createPromise();
-        this.pdfService.draw(this, promise);
-        return promise;
-    }
-    /**
-     * Starts the Excel export ([see example]({% slug excelexport_treelist %})).
-     */
-    saveAsExcel() {
-        this.excelService.save(this);
-    }
-    /**
-     * Applies the minimum possible width for the specified column,
-     * so that the whole text fits without wrapping. This method expects the TreeList
-     * to be resizable (set `resizable` to `true`).
-     * Execute this method only
-     * after the TreeList is already populated with data. [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content).
-     */
-    autoFitColumn(column) {
-        this.columnResizingService.autoFit(column);
-    }
-    /**
-     * Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping.
-     * If you do not specify columns, `autoFitColumns` applies to all columns.
-     *
-     * This method requires the TreeList to be resizable (set `resizable` to `true`).
-     * [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content).
-     */
-    autoFitColumns(columns = this.columns) {
-        let cols;
-        if (columns instanceof QueryList) {
-            cols = columns.toArray();
-        }
-        else {
-            cols = columns;
-        }
-        this.columnResizingService.autoFit(...cols);
-    }
-    /**
-     * @hidden
-     */
-    notifyPageChange(source, event) {
-        if (source === "list" && !this.isVirtual) {
-            return;
-        }
-        this.skip = event.skip;
-        this.pageSize = event.take;
-        this.closeCell();
-        this.cancelCell();
-        this.changeDetectorRef.markForCheck();
-        this.pageChange.emit(event);
-    }
-    /**
-     * @hidden
-     */
-    handlePagerVisibilityChange(prop, ev) {
-        this[prop] = ev;
-    }
-    /**
-     * @hidden
-     */
-    messageFor(token) {
-        return this.localization.get(token);
-    }
-    /**
-     * @hidden
-     */
-    notifyScrollBottom() {
-        if (this.scrollable === 'none') {
-            return;
-        }
-        if (hasObservers(this.scrollBottom)) {
-            this.ngZone.run(() => this.scrollBottom.emit({ sender: this }));
-        }
-    }
-    /**
-     * @hidden
-     */
-    focusEditElement(containerSelector) {
-        if (this.focusElementSubscription) {
-            this.focusElementSubscription.unsubscribe();
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.focusElementSubscription = this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
-                const wrapper = this.wrapper.nativeElement;
-                const selector = containerSelector();
-                if (!this.setEditFocus(wrapper.querySelector(selector)) && this.isLocked) {
-                    this.setEditFocus(wrapper.querySelector(`.k-grid-content ${selector}`));
-                }
-                this.focusElementSubscription = null;
-            });
-        });
-    }
-    /**
-     * Focuses the last active or the first cell of the TreeList.
-     *
-     * @returns {NavigationCell} The focused cell.
-     */
-    focus() {
-        this.assertNavigable();
-        return this.navigationService.focusCell();
-    }
-    /**
-     * Focuses the cell with the specified row and column index.
-     *
-     * The row index is based on the logical structure of the TreeList and does not correspond to the data item index.
-     * The row indexing is absolute and does not change with paging.
-     * Header rows are included, starting at index 0.
-     *
-     * If the TreeList is configured for scrolling, including virtual scrolling, the scroll position updates.
-     * If the row is not present on the current page, the method has no effect.
-     *
-     * @param rowIndex - The logical row index to focus. The top header row has an index 0.
-     * @param colIndex - The column index to focus.
-     * @returns {NavigationCell} The focused cell.
-     *
-     */
-    focusCell(rowIndex, colIndex) {
-        this.assertNavigable();
-        return this.navigationService.focusCell(rowIndex, colIndex);
-    }
-    /**
-     * Focuses the next cell, optionally wrapping to the next row.
-     *
-     * @param wrap A Boolean value that indicates if the focus moves to the next row.
-     * @return {NavigationCell} The focused cell. If the focus is already on the last cell, returns `null`.
-     *
-     * @default true
-     */
-    focusNextCell(wrap = true) {
-        this.assertNavigable();
-        return this.navigationService.focusNextCell(wrap);
-    }
-    /**
-     * Focuses the previous cell. Optionally wraps to the previous row.
-     *
-     * @param wrap A Boolean value that indicates if the focus moves to the next row.
-     * @return {NavigationCell} The focused cell. If the focus is already on the first cell, returns `null`.
-     *
-     * @default true
-     */
-    focusPrevCell(wrap = true) {
-        this.assertNavigable();
-        return this.navigationService.focusPrevCell(wrap);
-    }
-    /**
-     * Scrolls to the specified row and column.
-     */
-    scrollTo(request) {
-        this.scrollRequestService.scrollTo(request);
-    }
-    /**
-     * Changes the position of the specified column.
-     * The reordering of columns operates only on the level
-     * that the source column infers.
-     * For the `reorderColumn` method to work properly,
-     * the `source` column has to be visible.
-     *
-     * @param source The column whose position you will change.
-     * @param destIndex The new position of the column.
-     * @param options Additional options.
-     */
-    reorderColumn(source, destIndex, options = { before: false }) {
-        const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
-        let target = columnsForLevel[destIndex];
-        if (!target) {
-            return;
-        }
-        const lastNonLocked = target.isLocked &&
-            !source.isLocked &&
-            this.columnsContainer.nonLockedColumns.length === 1;
-        if (lastNonLocked) {
-            return;
-        }
-        if (isSpanColumnComponent(target) && !options.before) {
-            target = target.childColumns.last;
-        }
-        this.reorder({
-            before: options.before,
-            source: source,
-            target: target
-        });
-    }
-    /**
-     * Clears the already loaded children for the data item so that the TreeList fetches them again the next time it renders.
-     */
-    reload(dataItem, reloadChildren) {
-        if (dataItem) {
-            this.view.resetItem(dataItem, reloadChildren);
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    /**
-     * Updates the state of the current view without reloading the data.
-     *
-     * Checks all currently rendered items for changes and
-     * triggers re-evaluation of the [isExpanded](#toc-isexpanded) and
-     * [isSelected](#toc-isSelected) callbacks.
-     */
-    updateView() {
-        if (this.rowReorderable) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                this.notifyReorderContainers();
-            });
-        }
-        this.view.clear();
-        this.changeDetectorRef.markForCheck();
-    }
-    /**
-     * Expands the row for the specified data item.
-     */
-    expand(dataItem) {
-        this.expandStateService.expand(dataItem);
-        this.changeDetectorRef.markForCheck();
-    }
-    /**
-     * Collapses the row for the specified data item.
-     */
-    collapse(dataItem) {
-        this.expandStateService.collapse(dataItem);
-        this.changeDetectorRef.markForCheck();
-    }
-    /**
-     * @hidden
-     */
-    reorder({ target, source, before, changeContainer }) {
-        this.ngZone.run(() => {
-            const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
-            let newIndex = columnsForLevel.indexOf(target);
-            if (target.parent && target.parent.isSpanColumn) {
-                newIndex = columnsForLevel.indexOf(target.parent);
-                if (before) {
-                    target = target.parent;
-                }
-            }
-            const oldIndex = columnsForLevel.indexOf(source);
-            if (changeContainer) {
-                if (before && 0 < newIndex && oldIndex < newIndex) { // dropped before the first not locked column
-                    newIndex--;
-                }
-                else if (!before && oldIndex > newIndex) { // dropped after the last locked column
-                    newIndex++;
-                }
-            }
-            const args = new ColumnReorderEvent({
-                column: source,
-                oldIndex: oldIndex,
-                newIndex: newIndex
-            });
-            this.columnReorder.emit(args);
-            if (args.isDefaultPrevented()) {
-                return;
-            }
-            if (changeContainer) {
-                this.columnLockedChange.emit(new ColumnLockedChangeEvent([source]));
-            }
-            this.updateColumnIndices({ columnsForLevel, source, target, before });
-            if (source.locked !== target.locked) {
-                source.locked = target.locked;
-            }
-            this.columnOrderChange.emit(args);
-            this.columnsContainer.refresh();
-            if (this.virtualColumns) {
-                this.listComponent.updateViewportColumns();
-            }
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    updateColumnIndices({ columnsForLevel, source, target, before }) {
-        const expandedColumns = expandColumnsWithSpan(columnsForLevel);
-        const sourceColumnIndex = expandedColumns.indexOf(source);
-        let nextSourceIndex = 0;
-        let nextIndex = 0;
-        let toSkip = 1;
-        // Possible only when called from the API.
-        if (source.isSpanColumn) {
-            toSkip += source.childColumns.length;
-        }
-        let i = 0;
-        while (i < expandedColumns.length) {
-            const column = expandedColumns[i];
-            if (column === target) {
-                nextSourceIndex = before ? nextIndex : nextIndex + 1;
-                nextIndex = before ? nextIndex + toSkip : nextIndex;
-                column.orderIndex = nextIndex;
-                if (nextSourceIndex === nextIndex + 1) {
-                    nextIndex += toSkip;
-                }
-            }
-            else if (column === source) {
-                i += toSkip;
-                continue;
-            }
-            else {
-                column.orderIndex = nextIndex;
-            }
-            nextIndex++;
-            i++;
-        }
-        for (i = sourceColumnIndex; i < sourceColumnIndex + toSkip; i++) {
-            expandedColumns[i].orderIndex = nextSourceIndex++;
-        }
-        this.updateIndicesForLevel(source.level + 1);
-    }
-    updateIndicesForLevel(level) {
-        const colsForParentLevel = this.allColumnsForLevel(level - 1);
-        const colsForLevel = [];
-        sortColumns(colsForParentLevel).forEach((c) => {
-            if (c.isColumnGroup) {
-                colsForLevel.push(...c.childrenArray.sort((a, b) => a.orderIndex - b.orderIndex));
-            }
-        });
-        expandColumnsWithSpan(colsForLevel).forEach((c, i) => c.orderIndex = i);
-        if (level < this.columnList.totalColumnLevels()) {
-            this.updateIndicesForLevel(level + 1);
-        }
-    }
-    allColumnsForLevel(level) {
-        return this.columnList.toArray().filter(column => column.level === level);
-    }
-    setEditFocus(element) {
-        if (element) {
-            return this.navigationService.tryFocus(element);
-        }
-    }
-    columnInstance(column) {
-        let instance;
-        if (typeof column === 'number') {
-            instance = this.columnsContainer.lockedLeafColumns.toArray()
-                .concat(this.columnsContainer.nonLockedLeafColumns.toArray())[column];
-        }
-        else if (typeof column === 'string') {
-            instance = this.columnList.filter((item) => item.field === column)[0];
-        }
-        else {
-            instance = column;
-        }
-        if (!instance && isDevMode()) {
-            throw new Error(`Invalid column ${column}`);
-        }
-        return instance;
-    }
-    verifySettings() {
-        if (isDevMode()) {
-            const locked = this.lockedLeafColumns.length || (this.columnMenu && this.columnMenu.lock);
-            if (this.lockedLeafColumns.length && !this.nonLockedLeafColumns.length) {
-                throw new Error('There should be at least one non-locked column');
-            }
-            if ((locked || this.virtualColumns) && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
-                throw new Error((locked ? 'Locked' : 'Virtual') + ' columns feature requires all columns to have set width.');
-            }
-            if (locked && !this.isScrollable) {
-                throw new Error('Locked columns are only supported when scrolling is enabled.');
-            }
-            if (this.columnList.filter(isColumnGroupComponent).filter((x) => !x.hasChildren).length) {
-                throw new Error('ColumnGroupComponent should contain ColumnComponent or CommandColumnComponent.');
-            }
-            if (this.columnList.filter(x => x.locked && x.parent && !x.parent.isLocked).length) {
-                throw new Error('Locked child columns require their parent columns to be locked.');
-            }
-            if ((this.rowHeight) && !this.isVirtual) {
-                throw new Error('Row height setting requires virtual scrolling mode to be enabled.');
-            }
-            if (this.wrapper?.nativeElement?.querySelector('kendo-toolbar') && this.toolbarTemplate) {
-                console.warn(`Defining both a toolbar template and a ToolBarComponent within the TreeList is not supported.
-                    Please use either the ToolBarComponent or a custom template.`);
-            }
-            validateColumnsField(this.columnList);
-        }
-    }
-    autoGenerateColumns() {
-        if (this.shouldGenerateColumns && !this.columns.length && this.view.length) {
-            const columns = Object.keys(this.view.at(0).data).map(field => {
-                const column = new ColumnComponent();
-                column.field = field;
-                return column;
-            });
-            columns[0].expandable = true;
-            this.columns.reset(columns);
-        }
-    }
-    attachStateChangesEmitter() {
-        this.subscriptions.add(merge(this.sortChange.pipe(map(sort => ({ filter: this.filter, skip: this.skip, sort: sort, take: this.pageSize }))), this.filterChange.pipe(map(filter => ({
-            filter: filter, skip: 0, sort: this.sort, take: this.pageSize
-        }))))
-            .subscribe(x => {
-            this.closeCell();
-            this.cancelCell();
-            this.dataStateChange.emit(x);
-            this.rowReorderable && this.notifyReorderContainers();
-        }));
-    }
-    attachEditHandlers() {
-        if (!this.editService) {
-            return;
-        }
-        this.subscriptions.add(this.editService
-            .changes.subscribe(this.emitCRUDEvent.bind(this)));
-    }
-    emitCRUDEvent(args) {
-        // eslint-disable-next-line prefer-const
-        let { action, formGroup, dataItem } = args;
-        if (action !== 'add' && !dataItem) {
-            dataItem = formGroup.value;
-        }
-        this.view.clear();
-        this.changeDetectorRef.markForCheck();
-        this.closeCell();
-        Object.assign(args, {
-            dataItem: dataItem,
-            sender: this
-        });
-        switch (action) {
-            case 'add':
-                this.add.emit(args);
-                break;
-            case 'cancel':
-                this.cancel.emit(args);
-                break;
-            case 'edit':
-                this.edit.emit(args);
-                break;
-            case 'remove':
-                this.remove.emit(args);
-                break;
-            case 'save':
-                this.save.emit(args);
-                break;
-            case 'cellClose':
-                this.cellClose.emit(args);
-                break;
-            default: break;
-        }
-    }
-    attachDomEventHandlers() {
-        this.subscriptions.add(this.domEvents.cellClick.subscribe((args) => {
-            if (hasObservers(this.cellClick) || this.selectionService.enabled) {
-                this.ngZone.run(() => {
-                    this.cellClick.emit(Object.assign({ sender: this }, args));
-                    this.selectionService.click(args);
-                });
-            }
-        }));
-    }
-    attachElementEventHandlers() {
-        if (isUniversal()) {
-            return;
-        }
-        const wrapper = this.wrapper.nativeElement;
-        const ariaRoot = this.ariaRoot.nativeElement;
-        this.ngZone.runOutsideAngular(() => {
-            const resizeCheck = this.resizeCheck.bind(this);
-            const resizeSubscription = this.renderer.listen('window', 'resize', resizeCheck);
-            const orientationSubscription = this.renderer.listen('window', 'orientationchange', resizeCheck);
-            const documentClickSubscription = this.renderer.listen('document', 'click', (args) => {
-                const activeElement = document.activeElement;
-                if (this.editService.shouldCloseCell() &&
-                    !closest(args.target, matchesClasses('k-animation-container k-treelist-ignore-click')) &&
-                    !(activeElement &&
-                        (closest(activeElement, matchesClasses('k-animation-container')) ||
-                            isInEditedCell(activeElement, this.wrapper.nativeElement)))) {
-                    this.editService.closeCell(args);
-                }
-            });
-            const windowBlurSubscription = this.renderer.listen('window', 'blur', (args) => {
-                const activeElement = document.activeElement;
-                if (activeElement && !(matchesNodeName('input')(activeElement) && activeElement.type === 'file' &&
-                    isInEditedCell(activeElement, this.wrapper.nativeElement))) {
-                    this.editService.closeCell(args);
-                }
-                this.domEvents.windowBlur.emit(args);
-            });
-            const clickSubscription = this.renderer.listen(wrapper, 'click', (args) => {
-                this.domEvents.click.emit(args);
-            });
-            const keydownSubscription = this.renderer.listen(wrapper, 'keydown', (args) => {
-                this.domEvents.keydown.emit(args);
-            });
-            // focusIn and focusOut are relative to the element with ARIA role "treegrid"
-            let focused = false;
-            const focusInSubscription = this.renderer.listen(ariaRoot, 'focusin', (args) => {
-                this.domEvents.focus.emit(args);
-                if (!focused) {
-                    this.domEvents.focusIn.emit(args);
-                    focused = true;
-                }
-            });
-            const focusOutSubscription = this.renderer.listen(ariaRoot, 'focusout', (args) => {
-                const next = args.relatedTarget || document.activeElement;
-                const outside = !closest(next, (node) => node === ariaRoot);
-                if (outside) {
-                    this.domEvents.focusOut.emit(args);
-                    focused = false;
-                }
-            });
-            this.detachElementEventHandlers = () => {
-                resizeSubscription();
-                orientationSubscription();
-                documentClickSubscription();
-                windowBlurSubscription();
-                clickSubscription();
-                keydownSubscription();
-                focusInSubscription();
-                focusOutSubscription();
-            };
-        });
-    }
-    matchesMedia(c) {
-        return this.responsiveService.matchesMedia(c.media);
-    }
-    resizeCheck() {
-        if (window.innerWidth !== this.cachedWindowWidth) {
-            this.cachedWindowWidth = window.innerWidth;
-            let hasChanges = false;
-            this.columnList.filterHierarchy(column => {
-                const matchesMedia = this.matchesMedia(column);
-                if (column.matchesMedia !== matchesMedia) {
-                    hasChanges = true;
-                    column.matchesMedia = matchesMedia;
-                }
-                return column.isVisible;
-            });
-            if (hasChanges) {
-                this.ngZone.run(() => {
-                    this.changeDetectorRef.markForCheck();
-                });
-            }
-        }
-    }
-    emitPDFExportEvent() {
-        const args = new PDFExportEvent();
-        this.pdfExport.emit(args);
-        if (!args.isDefaultPrevented()) {
-            this.saveAsPDF();
-        }
-    }
-    syncHeaderHeight(observable) {
-        return observable
-            .pipe(filter(() => isPresent(this.lockedHeader)))
-            .subscribe(() => syncRowsHeight(this.lockedHeader.nativeElement.children[0], this.header.nativeElement.children[0]));
-    }
-    columnsContainerChange() {
-        this.subscriptions.add(this.syncHeaderHeight(this.columnsContainer.changes.pipe(filter(() => this.lockedColumns.length > 0), switchMap(() => this.ngZone.onStable.asObservable().pipe(take(1))))));
-    }
-    handleColumnResize() {
-        const resizes = this.columnResizingService.changes;
-        this.subscriptions.add(resizes.pipe(tap(e => {
-            if (e.type === 'start') {
-                this.renderer.addClass(this.wrapper.nativeElement, 'k-grid-column-resizing');
-            }
-            else if (e.type === 'end') {
-                this.renderer.removeClass(this.wrapper.nativeElement, 'k-grid-column-resizing');
-            }
-        }), filter(e => e.type === 'start'), switchMap(() => resizes.pipe(takeUntil(resizes.pipe(filter(e => e.type === 'triggerAutoFit'))), filter(e => e.type === 'end'))))
-            .subscribe(this.notifyResize.bind(this)));
-    }
-    notifyResize(e) {
-        const args = e.resizedColumns
-            .filter(item => isTruthy(item.column.resizable) && !item.column.isColumnGroup)
-            .map(item => ({
-            column: item.column,
-            newWidth: item.column.width,
-            oldWidth: item.oldWidth
-        }));
-        if (hasObservers(this.columnResize)) {
-            this.ngZone.run(() => {
-                this.columnResize.emit(args);
-            });
-        }
-    }
-    assertNavigable() {
-        if (isDevMode() && !this.navigable) {
-            throw new Error('The TreeList should be navigable to control focus');
-        }
-    }
-    _rowClass = () => null;
-    navigationMetadata() {
-        const isVirtual = this.isVirtual;
-        const filterRowOffset = hasFilterRow(this.filterable) ? 1 : 0;
-        const headerRows = this.totalColumnLevels + 1 + filterRowOffset;
-        return new NavigationMetadata(this.view, headerRows, isVirtual, this.showPager, this.wrapper, this.virtualColumns, this.columnsContainer);
-    }
-    updateNavigationMetadata() {
-        this.navigationService.metadata = this.navigationMetadata();
-    }
-    applyAutoSize() {
-        const cols = this.columns.filter((c) => this.autoSize ? c.autoSize !== false : c.autoSize);
-        if (cols.length > 0) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(_ => this.autoFitColumns(cols));
-        }
-    }
-    onColumnRangeChange(range) {
-        const viewportColumns = this.viewportColumns = [];
-        const columnsArray = this.columnsContainer.nonLockedLeafColumns.toArray();
-        const leafViewportColumns = columnsArray.slice(range.start, range.end + 1);
-        for (let idx = 0; idx < leafViewportColumns.length; idx++) {
-            let column = leafViewportColumns[idx];
-            while (column.parent) {
-                column = column.parent;
-            }
-            const toAdd = [column];
-            while (toAdd.length) {
-                column = toAdd.shift();
-                viewportColumns.push(column);
-                if (column.isColumnGroup) {
-                    const children = columnsArray.filter(c => c.parent && c.parent.id === column.id);
-                    toAdd.unshift(...children);
-                }
-            }
-            const lastFromGroup = viewportColumns[viewportColumns.length - 1];
-            column = leafViewportColumns[idx];
-            while (column !== lastFromGroup && idx < leafViewportColumns.length) {
-                idx++;
-                column = leafViewportColumns[idx];
-            }
-        }
-        if (range.start > 0) {
-            const first = leafViewportColumns[0];
-            let offset = range.offset;
-            let current = viewportColumns[0];
-            let index = 0;
-            while (current !== first) {
-                offset -= current.isColumnGroup ? 0 : current.width;
-                index++;
-                current = viewportColumns[index];
-            }
-            if (offset > 0) {
-                const totalLevels = this.columnsContainer.totalLevels;
-                let previous;
-                for (let idx = 0; idx <= totalLevels; idx++) {
-                    const offsetColumn = idx < totalLevels ? new ColumnGroupComponent(previous) : new ColumnBase(previous);
-                    previous = offsetColumn;
-                    offsetColumn.title = "\u00A0";
-                    offsetColumn.width = offset;
-                    viewportColumns.unshift(offsetColumn);
-                }
-            }
-        }
-        this.leafViewportColumns = viewportColumns.filter(c => !c.isColumnGroup);
-    }
-    dataLoaded(result) {
-        this.loadedData = result || [];
-        this.view.reset();
-        this.dataChanged = true;
-        this.changeDetectorRef.markForCheck();
-    }
-    unsubscribeDataLoaded() {
-        if (this.dataLoadedSubscription) {
-            this.dataLoadedSubscription.unsubscribe();
-            this.dataLoadedSubscription = null;
-        }
-    }
-    loadColumns(columns) {
-        this.columns.reset(columns.toArray());
-        this.columns.notifyOnChanges();
-    }
-    notifyReorderContainers() {
-        this.dragTargetContainer?.notify();
-        this.dropTargetContainer?.notify();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeListComponent, deps: [{ token: i1.BrowserSupportService }, { token: i0.ElementRef }, { token: i2.ChangeNotificationService }, { token: i3.EditService }, { token: i4.FilterService }, { token: i5.PDFService }, { token: i6.ResponsiveService }, { token: i0.Renderer2 }, { token: i7.ExcelService }, { token: i0.NgZone }, { token: i8.ScrollSyncService }, { token: i9.DomEventsService }, { token: i10.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i11.ColumnReorderService }, { token: i12.ColumnInfoService }, { token: i13.NavigationService }, { token: i14.SortService }, { token: i15.ScrollRequestService }, { token: i16.ExpandStateService }, { token: i17.OptionChangesService }, { token: i18.SelectionService }, { token: i19.LocalizationService }, { token: i20.ContextService }, { token: i21.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeListComponent, isStandalone: true, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", rowReorderable: "rowReorderable", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange", rowReorder: "rowReorder" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
-            BrowserSupportService,
-            LocalizationService,
-            ColumnInfoService,
-            ChangeNotificationService,
-            EditService,
-            PDFService,
-            SuspendService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.treelist'
-            },
-            FilterService,
-            ResponsiveService,
-            PagerContextService,
-            PagerNavigationService,
-            ExcelService,
-            ScrollSyncService,
-            ResizeService,
-            DomEventsService,
-            ColumnResizingService,
-            SinglePopupService,
-            DragAndDropService,
-            DragHintService,
-            DropCueService,
-            ColumnReorderService,
-            NavigationService,
-            FocusRoot,
-            IdService,
-            ScrollRequestService,
-            SortService,
-            ExpandStateService,
-            OptionChangesService,
-            SelectionService,
-            {
-                provide: DataBoundTreeComponent,
-                useExisting: forwardRef(() => TreeListComponent)
-            },
-            {
-                provide: ExpandableTreeComponent,
-                useExisting: forwardRef(() => TreeListComponent)
-            },
-            ContextService,
-            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: "listComponent", first: true, predicate: ListComponent, 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."
-        
-          i18n-pagerLabel="kendo.treelist.pagerLabel|The label for the TreeList pager"
-          pagerLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
-        
-          i18n-pagerFirstPage="kendo.treelist.pagerFirstPage|The label for the first page button in TreeList pager"
-          pagerFirstPage="Go to the first page"
-        
-          i18n-pagerPreviousPage="kendo.treelist.pagerPreviousPage|The label for the previous page button in TreeList pager"
-          pagerPreviousPage="Go to the previous page"
-        
-          i18n-pagerNextPage="kendo.treelist.pagerNextPage|The label for the next page button in TreeList pager"
-          pagerNextPage="Go to the next page"
-        
-          i18n-pagerLastPage="kendo.treelist.pagerLastPage|The label for the last page button in TreeList pager"
-          pagerLastPage="Go to the last page"
-        
-          i18n-pagerPage="kendo.treelist.pagerPage|The label before the current page number in the TreeList pager"
-          pagerPage="Page"
-        
-          i18n-pagerOf="kendo.treelist.pagerOf|The label before the total pages number in the TreeList pager"
-          pagerOf="of"
-        
-          i18n-pagerPageNumberInputTitle="kendo.treelist.pagerPageNumberInputTitle|The label for the pager input in the Treelist pager"
-          pagerPageNumberInputTitle="Page Number"
-        
-          i18n-pagerItemsPerPage="kendo.treelist.pagerItemsPerPage|The label for the page size chooser in the TreeList pager"
-          pagerItemsPerPage="items per page"
-        
-          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}' }}"
-        
-          i18n-booleanFilterCellLabel="kendo.treelist.booleanFilterCellLabel|The label of the boolean filter cell dropdown"
-          booleanFilterCellLabel="{{ 'Boolean filter cell for {columnName}' }}"
-        
-          i18n-filter="kendo.treelist.filter|The label of the filter cell or icon"
-          filter="Filter"
-        
-          i18n-filterEqOperator="kendo.treelist.filterEqOperator|The text of the equal filter operator"
-          filterEqOperator="Is equal to"
-        
-          i18n-filterNotEqOperator="kendo.treelist.filterNotEqOperator|The text of the not equal filter operator"
-          filterNotEqOperator="Is not equal to"
-        
-          i18n-filterIsNullOperator="kendo.treelist.filterIsNullOperator|The text of the is null filter operator"
-          filterIsNullOperator="Is null"
-        
-          i18n-filterIsNotNullOperator="kendo.treelist.filterIsNotNullOperator|The text of the is not null filter operator"
-          filterIsNotNullOperator="Is not null"
-        
-          i18n-filterIsEmptyOperator="kendo.treelist.filterIsEmptyOperator|The text of the is empty filter operator"
-          filterIsEmptyOperator="Is empty"
-        
-          i18n-filterIsNotEmptyOperator="kendo.treelist.filterIsNotEmptyOperator|The text of the is not empty filter operator"
-          filterIsNotEmptyOperator="Is not empty"
-        
-          i18n-filterStartsWithOperator="kendo.treelist.filterStartsWithOperator|The text of the starts with filter operator"
-          filterStartsWithOperator="Starts with"
-        
-          i18n-filterContainsOperator="kendo.treelist.filterContainsOperator|The text of the contains filter operator"
-          filterContainsOperator="Contains"
-        
-          i18n-filterNotContainsOperator="kendo.treelist.filterNotContainsOperator|The text of the does not contain filter operator"
-          filterNotContainsOperator="Does not contain"
-        
-          i18n-filterEndsWithOperator="kendo.treelist.filterEndsWithOperator|The text of the ends with filter operator"
-          filterEndsWithOperator="Ends with"
-        
-          i18n-filterGteOperator="kendo.treelist.filterGteOperator|The text of the greater than or equal filter operator"
-          filterGteOperator="Is greater than or equal to"
-        
-          i18n-filterGtOperator="kendo.treelist.filterGtOperator|The text of the greater than filter operator"
-          filterGtOperator="Is greater than"
-        
-          i18n-filterLteOperator="kendo.treelist.filterLteOperator|The text of the less than or equal filter operator"
-          filterLteOperator="Is less than or equal to"
-        
-          i18n-filterLtOperator="kendo.treelist.filterLtOperator|The text of the less than filter operator"
-          filterLtOperator="Is less than"
-        
-          i18n-filterIsTrue="kendo.treelist.filterIsTrue|The text of the IsTrue boolean filter option"
-          filterIsTrue="Is True"
-        
-          i18n-filterIsFalse="kendo.treelist.filterIsFalse|The text of the IsFalse boolean filter option"
-          filterIsFalse="Is False"
-        
-          i18n-filterBooleanAll="kendo.treelist.filterBooleanAll|The text of the (All) boolean filter option"
-          filterBooleanAll="(All)"
-        
-          i18n-filterAfterOrEqualOperator="kendo.treelist.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
-          filterAfterOrEqualOperator="Is after or equal to"
-        
-          i18n-filterAfterOperator="kendo.treelist.filterAfterOperator|The text of the after date filter operator"
-          filterAfterOperator="Is after"
-        
-          i18n-filterBeforeOperator="kendo.treelist.filterBeforeOperator|The text of the before date filter operator"
-          filterBeforeOperator="Is before"
-        
-          i18n-filterBeforeOrEqualOperator="kendo.treelist.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
-          filterBeforeOrEqualOperator="Is before or equal to"
-        
-          i18n-filterFilterButton="kendo.treelist.filterFilterButton|The text of the filter button"
-          filterFilterButton="Filter"
-        
-          i18n-filterClearButton="kendo.treelist.filterClearButton|The text of the clear filter button"
-          filterClearButton="Clear"
-        
-          i18n-filterAndLogic="kendo.treelist.filterAndLogic|The text of the And filter logic"
-          filterAndLogic="And"
-        
-          i18n-filterOrLogic="kendo.treelist.filterOrLogic|The text of the Or filter logic"
-          filterOrLogic="Or"
-        
-          i18n-filterDateToday="kendo.treelist.filterDateToday|The text of the Today button of the Date filter."
-          filterDateToday="TODAY"
-        
-          i18n-filterDateToggle="kendo.treelist.filterDateToggle|The title of the Toggle button of the Date filter."
-          filterDateToggle="Toggle Calendar"
-        
-          i18n-filterNumericDecrement="kendo.treelist.filterNumericDecrement|The title of the Decrement button of the Numeric filter."
-          filterNumericDecrement="Decrement"
-        
-          i18n-filterNumericIncrement="kendo.treelist.filterNumericIncrement|The title of the Increment button of the Numeric filter."
-          filterNumericIncrement="Increment"
-        
-          i18n-loading="kendo.treelist.loading|The loading text"
-          loading="Loading"
-        
-          i18n-filterInputLabel="kendo.treelist.filterInputLabel|The label of the filter row and menu inputs"
-          filterInputLabel="{{ '{columnName} Filter' }}"
-        
-          i18n-filterMenuLogicDropDownLabel="kendo.treelist.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown"
-          filterMenuLogicDropDownLabel="{{ '{columnName} Filter Logic' }}"
-        
-          i18n-filterMenuOperatorsDropDownLabel="kendo.treelist.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown"
-          filterMenuOperatorsDropDownLabel="{{ '{columnName} Filter Operators' }}"
-        
-          i18n-filterMenuTitle="kendo.treelist.filterMenuTitle|The title of the filter menu icon"
-          filterMenuTitle="{{ '{columnName} Filter Menu' }}"
-        
-          i18n-columnMenu="kendo.treelist.columnMenu|The title of the column menu icon"
-          columnMenu="{{ '{columnName} Column Menu' }}"
-        
-          i18n-columns="kendo.treelist.columns|The text shown in the column menu for the columns item"
-          columns="Columns"
-        
-          i18n-lock="kendo.treelist.lock|The text shown in the column menu for the lock item"
-          lock="Lock"
-        
-          i18n-unlock="kendo.treelist.unlock|The text shown in the column menu for the unlock item"
-          unlock="Unlock"
-        
-          i18n-sortable="kendo.treelist.sortable|The label of the sort icon"
-          sortable="Sortable"
-        
-          i18n-sortAscending="kendo.treelist.sortAscending|The text shown in the column menu for the sort ascending item"
-          sortAscending="Sort Ascending"
-        
-          i18n-sortDescending="kendo.treelist.sortDescending|The text shown in the column menu for the sort descending item"
-          sortDescending="Sort Descending"
-        
-          i18n-sortedDefault="kendo.treelist.sortedDefault|The status announcement when a column is no longer sorted"
-          sortedDefault="Not Sorted"
-        
-          i18n-columnsApply="kendo.treelist.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
-          columnsApply="Apply"
-        
-          i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
-          columnsReset="Reset"
-        
-          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"
-        
-          i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
-          bottomToolbarLabel="Bottom toolbar"
-        
-          i18n-dragRowHandleLabel="kendo.treelist.dragRowHandleLabel|The label for the TreeList drag row handle"
-          dragRowHandleLabel="Drag row"
-        
-          i18n-selectRowCheckboxLabel="kendo.treelist.selectRowCheckboxLabel|The label for the select row checkbox"
-          selectRowCheckboxLabel="Select row"
-        
-          i18n-selectAllRowsCheckboxLabel="kendo.treelist.selectAllRowsCheckboxLabel|The label for the select all rows checkbox"
-          selectAllRowsCheckboxLabel="Select all rows"
-        
-          i18n-autosizeAllColumns="kendo.treelist.autosizeAllColumns|The text shown in the column menu for the autosize all columns item"
-          autosizeAllColumns="Autosize All Columns"
-        
-          i18n-autosizeThisColumn="kendo.treelist.autosizeThisColumn|The text shown in the column menu for the autosize this column item"
-          autosizeThisColumn="Autosize This Column"
-          >
-        </ng-container>
-        @if (showTopToolbar) {
-          <kendo-treelist-toolbar
-            position="top"
-            [navigable]="navigable"
-            [attr.aria-label]="messageFor('topToolbarLabel')"
-          [attr.aria-controls]="ariaRootId"></kendo-treelist-toolbar>
-        }
-        <ng-content select="kendo-toolbar"></ng-content>
-        <div #ariaRoot
-          class="k-grid-aria-root"
-          role="treegrid"
-          [id]="ariaRootId"
-          [attr.aria-rowcount]="ariaRowCount"
-          [attr.aria-colcount]="ariaColCount"
-          [attr.aria-multiselectable]="ariaMultiselectable"
-          [attr.aria-label]="ariaLabel"
-          kendoDragTargetContainer
-          kendoDropTargetContainer
-          mode="manual"
-          [dragDisabled]="!rowReorderable"
-          [dropDisabled]="!rowReorderable"
-          [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-          [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-          [dragHandle]="getDefaultSelectors('handle')"
-          [hint]="{hintTemplate: defaultHint}"
-          (onPress)="handleReorderEvents($event, 'press')"
-          (onDragStart)="handleReorderEvents($event, 'dragStart')"
-          (onDrag)="handleReorderEvents($event, 'drag')"
-          (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
-          (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
-          (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
-          (onDrop)="handleReorderEvents($event, 'drop')"
-          [dragData]="treeListData">
-          @if (isScrollable) {
-            @if (!hideHeader) {
-              <div
-                class="k-grid-header"
-                role="presentation"
-                [style.padding]="headerPadding">
-                @if (isLocked) {
-                  <div
-                    #lockedHeader
-                    role="presentation"
-                    class="k-grid-header-locked"
-                    [style.width.px]="lockedWidth">
-                    <table
-                      kendoTreeListResizableTable
-                      [locked]="true"
-                      role="presentation"
-                      [style.width.px]="lockedWidth"
-                      class="k-grid-header-table k-table k-table-md">
-                      <colgroup
-                        kendoTreeListColGroup
-                        [columns]="$any(lockedLeafColumns)">
-                    </colgroup>
-                    <thead kendoTreeListHeader
-                      role="rowgroup"
-                      [resizable]="resizable"
-                      [scrollable]="true"
-                      [columns]="$any(lockedColumns)"
-                      [totalColumnLevels]="totalColumnLevels"
-                      [sort]="sort"
-                      [filter]="filter"
-                      [filterable]="filterable"
-                      [reorderable]="reorderable"
-                      [sortable]="sortable"
-                      [columnMenu]="columnMenuOptions"
-                      [columnMenuTemplate]="columnMenuTemplate"
-                      [totalColumnsCount]="leafColumns.length"
-                      [totalColumns]="columnsContainer"
-                      [tabIndex]="navigation.enabled ? '-1' : '0'">
-                    </thead>
-                  </table>
-                </div>
-              }
-              <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
-                [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                <table
-                  role="presentation"
-                  [style.width.px]="nonLockedWidth"
-                  kendoTreeListResizableTable
-                  [virtualColumns]="virtualColumns"
-                  class="k-grid-header-table k-table k-table-md">
-                  <colgroup
-                    kendoTreeListColGroup
-                    [columns]="headerLeafColumns">
-                </colgroup>
-                <thead kendoTreeListHeader
-                  [resizable]="resizable"
-                  role="rowgroup"
-                  [scrollable]="true"
-                  [columns]="headerColumns"
-                  [totalColumnLevels]="totalColumnLevels"
-                  [sort]="sort"
-                  [filter]="filter"
-                  [filterable]="filterable"
-                  [reorderable]="reorderable"
-                  [sortable]="sortable"
-                  [columnMenu]="columnMenuOptions"
-                  [columnMenuTemplate]="columnMenuTemplate"
-                  [lockedColumnsCount]="lockedLeafColumns.length"
-                  [totalColumnsCount]="leafColumns.length"
-                  [totalColumns]="columnsContainer"
-                  [tabIndex]="navigation.enabled ? '-1' : '0'">
-                </thead>
-              </table>
-              @if (virtualColumns) {
-                <div class="k-width-container" role="presentation">
-                  <div [style.width.px]="columnsContainer.unlockedWidth"></div>
-                </div>
-              }
-            </div>
-          </div>
-        }
-        <kendo-treelist-list
-          [view]="view"
-          [loading]="showLoading"
-          [rowHeight]="rowHeight"
-          [total]="totalCount"
-          [take]="pageSize"
-          [skip]="skip"
-          [trackBy]="trackBy"
-          [columns]="columnsContainer"
-          [filterable]="filterable"
-          [noRecordsTemplate]="noRecordsTemplate"
-          (pageChange)="notifyPageChange('list', $event)"
-          [rowClass]="rowClass"
-          [isVirtual]="isVirtual"
-          [virtualColumns]="virtualColumns"
-          [expandIcons]="expandIcons"
-          (scrollBottom)="notifyScrollBottom()"
-          (contentScroll)="contentScroll.emit($event)"
-          kendoDraggable
-          kendoTreeListSelectionMarquee
-          [enableDrag]="marqueeSelection">
-        </kendo-treelist-list>
-        }
-        @if (!isScrollable) {
-          <table
-            class="k-table k-table-md k-grid-header-table"
-            role="presentation"
-            [style.table-layout]="resizable ? 'fixed' : null"
-            kendoTreeListResizableTable>
-            <colgroup
-              kendoTreeListColGroup
-              [columns]="$any(leafColumns)">
-          </colgroup>
-          @if (!hideHeader) {
-            <thead kendoTreeListHeader
-              role="rowgroup"
-              [resizable]="resizable"
-              [scrollable]="false"
-              [columns]="$any(visibleColumns)"
-              [totalColumnLevels]="totalColumnLevels"
-              [reorderable]="reorderable"
-              [sort]="sort"
-              [sortable]="sortable"
-              [filter]="filter"
-              [filterable]="filterable"
-              [columnMenu]="columnMenuOptions"
-              [columnMenuTemplate]="columnMenuTemplate"
-              [totalColumns]="columnsContainer"
-              [tabIndex]="navigation.enabled ? '-1' : '0'">
-            </thead>
-          }
-          <tbody kendoTreeListTableBody
-            [view]="view"
-            [skip]="skip"
-            [columns]="$any(leafColumns)"
-            [filterable]="filterable"
-            [noRecordsTemplate]="noRecordsTemplate"
-            [trackBy]="trackBy"
-            [rowClass]="rowClass"
-            [expandIcons]="expandIcons"
-            kendoDraggable
-            kendoTreeListSelectionMarquee
-            [enableDrag]="marqueeSelection">
-          </tbody>
-        </table>
-        @if (showLoading) {
-          <div kendoTreeListLoading>
-          </div>
-        }
-        }
-        </div>
-        @if (showPager) {
-          <kendo-pager
-            #pager
-            class="k-grid-pager"
-            [navigable]="navigable"
-            [pageSize]="pageSize"
-            [total]="view.totalVisible"
-            [skip]="skip"
-            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
-            [buttonCount]="normalizedPageableSettings.buttonCount"
-            [info]="normalizedPageableSettings.info"
-            [pageSizeValues]="normalizedPageableSettings.pageSizes"
-            [previousNext]="normalizedPageableSettings.previousNext"
-            [type]="normalizedPageableSettings.type"
-            (pageChange)="notifyPageChange('pager', $event)"
-            (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
-            (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
-            (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
-            <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>
-        }
-        @if (showBottomToolbar) {
-          <kendo-treelist-toolbar
-            class="k-grid-toolbar-bottom"
-            position="bottom"
-            [navigable]="navigable"
-            [attr.aria-label]="messageFor('bottomToolbarLabel')"
-            [attr.aria-controls]="ariaRootId">
-          </kendo-treelist-toolbar>
-        }
-        
-        <ng-template #defaultHint>
-          <kendo-icon-wrapper
-            [name]="getHintSettings('hintIcon')"
-            [svgIcon]="getHintSettings('hintSVGIcon')"
-            innerCssClass="k-drag-status">
-          </kendo-icon-wrapper>
-          {{hintText}}
-        </ng-template>
-        
-        <ng-template #defaultPager>
-          <div class="k-pager-numbers-wrap">
-            @if (normalizedPageableSettings.previousNext) {
-              <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
-            }
-            @if (normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0) {
-              <kendo-pager-numeric-buttons
-                [buttonCount]="normalizedPageableSettings.buttonCount">
-              </kendo-pager-numeric-buttons>
-            }
-            @if (normalizedPageableSettings.type === 'input' || showPagerInput) {
-              <kendo-pager-input [showPageText]="showPagerPageText"></kendo-pager-input>
-            }
-            @if (normalizedPageableSettings.previousNext) {
-              <kendo-pager-next-buttons></kendo-pager-next-buttons>
-            }
-          </div>
-          @if (normalizedPageableSettings.pageSizes) {
-            <kendo-pager-page-sizes
-              [pageSizes]="normalizedPageableSettings.pageSizes"
-              [showItemsText]="showPagerItemsText">
-            </kendo-pager-page-sizes>
-          }
-          @if (normalizedPageableSettings.info) {
-            <kendo-pager-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: 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", "cursorStyle", "hintContext"], 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", "tabIndex"] }, { 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: i22.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i22.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i22.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i22.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i22.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i22.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i22.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i22.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i22.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], 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: "18.2.14", ngImport: i0, type: TreeListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    exportAs: 'kendoTreeList',
-                    providers: [
-                        BrowserSupportService,
-                        LocalizationService,
-                        ColumnInfoService,
-                        ChangeNotificationService,
-                        EditService,
-                        PDFService,
-                        SuspendService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.treelist'
-                        },
-                        FilterService,
-                        ResponsiveService,
-                        PagerContextService,
-                        PagerNavigationService,
-                        ExcelService,
-                        ScrollSyncService,
-                        ResizeService,
-                        DomEventsService,
-                        ColumnResizingService,
-                        SinglePopupService,
-                        DragAndDropService,
-                        DragHintService,
-                        DropCueService,
-                        ColumnReorderService,
-                        NavigationService,
-                        FocusRoot,
-                        IdService,
-                        ScrollRequestService,
-                        SortService,
-                        ExpandStateService,
-                        OptionChangesService,
-                        SelectionService,
-                        {
-                            provide: DataBoundTreeComponent,
-                            useExisting: forwardRef(() => TreeListComponent)
-                        },
-                        {
-                            provide: ExpandableTreeComponent,
-                            useExisting: forwardRef(() => TreeListComponent)
-                        },
-                        ContextService,
-                        RowReorderService
-                    ],
-                    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."
-        
-          i18n-pagerLabel="kendo.treelist.pagerLabel|The label for the TreeList pager"
-          pagerLabel="{{ 'Page navigation, page {currentPage} of {totalPages}' }}"
-        
-          i18n-pagerFirstPage="kendo.treelist.pagerFirstPage|The label for the first page button in TreeList pager"
-          pagerFirstPage="Go to the first page"
-        
-          i18n-pagerPreviousPage="kendo.treelist.pagerPreviousPage|The label for the previous page button in TreeList pager"
-          pagerPreviousPage="Go to the previous page"
-        
-          i18n-pagerNextPage="kendo.treelist.pagerNextPage|The label for the next page button in TreeList pager"
-          pagerNextPage="Go to the next page"
-        
-          i18n-pagerLastPage="kendo.treelist.pagerLastPage|The label for the last page button in TreeList pager"
-          pagerLastPage="Go to the last page"
-        
-          i18n-pagerPage="kendo.treelist.pagerPage|The label before the current page number in the TreeList pager"
-          pagerPage="Page"
-        
-          i18n-pagerOf="kendo.treelist.pagerOf|The label before the total pages number in the TreeList pager"
-          pagerOf="of"
-        
-          i18n-pagerPageNumberInputTitle="kendo.treelist.pagerPageNumberInputTitle|The label for the pager input in the Treelist pager"
-          pagerPageNumberInputTitle="Page Number"
-        
-          i18n-pagerItemsPerPage="kendo.treelist.pagerItemsPerPage|The label for the page size chooser in the TreeList pager"
-          pagerItemsPerPage="items per page"
-        
-          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}' }}"
-        
-          i18n-booleanFilterCellLabel="kendo.treelist.booleanFilterCellLabel|The label of the boolean filter cell dropdown"
-          booleanFilterCellLabel="{{ 'Boolean filter cell for {columnName}' }}"
-        
-          i18n-filter="kendo.treelist.filter|The label of the filter cell or icon"
-          filter="Filter"
-        
-          i18n-filterEqOperator="kendo.treelist.filterEqOperator|The text of the equal filter operator"
-          filterEqOperator="Is equal to"
-        
-          i18n-filterNotEqOperator="kendo.treelist.filterNotEqOperator|The text of the not equal filter operator"
-          filterNotEqOperator="Is not equal to"
-        
-          i18n-filterIsNullOperator="kendo.treelist.filterIsNullOperator|The text of the is null filter operator"
-          filterIsNullOperator="Is null"
-        
-          i18n-filterIsNotNullOperator="kendo.treelist.filterIsNotNullOperator|The text of the is not null filter operator"
-          filterIsNotNullOperator="Is not null"
-        
-          i18n-filterIsEmptyOperator="kendo.treelist.filterIsEmptyOperator|The text of the is empty filter operator"
-          filterIsEmptyOperator="Is empty"
-        
-          i18n-filterIsNotEmptyOperator="kendo.treelist.filterIsNotEmptyOperator|The text of the is not empty filter operator"
-          filterIsNotEmptyOperator="Is not empty"
-        
-          i18n-filterStartsWithOperator="kendo.treelist.filterStartsWithOperator|The text of the starts with filter operator"
-          filterStartsWithOperator="Starts with"
-        
-          i18n-filterContainsOperator="kendo.treelist.filterContainsOperator|The text of the contains filter operator"
-          filterContainsOperator="Contains"
-        
-          i18n-filterNotContainsOperator="kendo.treelist.filterNotContainsOperator|The text of the does not contain filter operator"
-          filterNotContainsOperator="Does not contain"
-        
-          i18n-filterEndsWithOperator="kendo.treelist.filterEndsWithOperator|The text of the ends with filter operator"
-          filterEndsWithOperator="Ends with"
-        
-          i18n-filterGteOperator="kendo.treelist.filterGteOperator|The text of the greater than or equal filter operator"
-          filterGteOperator="Is greater than or equal to"
-        
-          i18n-filterGtOperator="kendo.treelist.filterGtOperator|The text of the greater than filter operator"
-          filterGtOperator="Is greater than"
-        
-          i18n-filterLteOperator="kendo.treelist.filterLteOperator|The text of the less than or equal filter operator"
-          filterLteOperator="Is less than or equal to"
-        
-          i18n-filterLtOperator="kendo.treelist.filterLtOperator|The text of the less than filter operator"
-          filterLtOperator="Is less than"
-        
-          i18n-filterIsTrue="kendo.treelist.filterIsTrue|The text of the IsTrue boolean filter option"
-          filterIsTrue="Is True"
-        
-          i18n-filterIsFalse="kendo.treelist.filterIsFalse|The text of the IsFalse boolean filter option"
-          filterIsFalse="Is False"
-        
-          i18n-filterBooleanAll="kendo.treelist.filterBooleanAll|The text of the (All) boolean filter option"
-          filterBooleanAll="(All)"
-        
-          i18n-filterAfterOrEqualOperator="kendo.treelist.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
-          filterAfterOrEqualOperator="Is after or equal to"
-        
-          i18n-filterAfterOperator="kendo.treelist.filterAfterOperator|The text of the after date filter operator"
-          filterAfterOperator="Is after"
-        
-          i18n-filterBeforeOperator="kendo.treelist.filterBeforeOperator|The text of the before date filter operator"
-          filterBeforeOperator="Is before"
-        
-          i18n-filterBeforeOrEqualOperator="kendo.treelist.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
-          filterBeforeOrEqualOperator="Is before or equal to"
-        
-          i18n-filterFilterButton="kendo.treelist.filterFilterButton|The text of the filter button"
-          filterFilterButton="Filter"
-        
-          i18n-filterClearButton="kendo.treelist.filterClearButton|The text of the clear filter button"
-          filterClearButton="Clear"
-        
-          i18n-filterAndLogic="kendo.treelist.filterAndLogic|The text of the And filter logic"
-          filterAndLogic="And"
-        
-          i18n-filterOrLogic="kendo.treelist.filterOrLogic|The text of the Or filter logic"
-          filterOrLogic="Or"
-        
-          i18n-filterDateToday="kendo.treelist.filterDateToday|The text of the Today button of the Date filter."
-          filterDateToday="TODAY"
-        
-          i18n-filterDateToggle="kendo.treelist.filterDateToggle|The title of the Toggle button of the Date filter."
-          filterDateToggle="Toggle Calendar"
-        
-          i18n-filterNumericDecrement="kendo.treelist.filterNumericDecrement|The title of the Decrement button of the Numeric filter."
-          filterNumericDecrement="Decrement"
-        
-          i18n-filterNumericIncrement="kendo.treelist.filterNumericIncrement|The title of the Increment button of the Numeric filter."
-          filterNumericIncrement="Increment"
-        
-          i18n-loading="kendo.treelist.loading|The loading text"
-          loading="Loading"
-        
-          i18n-filterInputLabel="kendo.treelist.filterInputLabel|The label of the filter row and menu inputs"
-          filterInputLabel="{{ '{columnName} Filter' }}"
-        
-          i18n-filterMenuLogicDropDownLabel="kendo.treelist.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown"
-          filterMenuLogicDropDownLabel="{{ '{columnName} Filter Logic' }}"
-        
-          i18n-filterMenuOperatorsDropDownLabel="kendo.treelist.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown"
-          filterMenuOperatorsDropDownLabel="{{ '{columnName} Filter Operators' }}"
-        
-          i18n-filterMenuTitle="kendo.treelist.filterMenuTitle|The title of the filter menu icon"
-          filterMenuTitle="{{ '{columnName} Filter Menu' }}"
-        
-          i18n-columnMenu="kendo.treelist.columnMenu|The title of the column menu icon"
-          columnMenu="{{ '{columnName} Column Menu' }}"
-        
-          i18n-columns="kendo.treelist.columns|The text shown in the column menu for the columns item"
-          columns="Columns"
-        
-          i18n-lock="kendo.treelist.lock|The text shown in the column menu for the lock item"
-          lock="Lock"
-        
-          i18n-unlock="kendo.treelist.unlock|The text shown in the column menu for the unlock item"
-          unlock="Unlock"
-        
-          i18n-sortable="kendo.treelist.sortable|The label of the sort icon"
-          sortable="Sortable"
-        
-          i18n-sortAscending="kendo.treelist.sortAscending|The text shown in the column menu for the sort ascending item"
-          sortAscending="Sort Ascending"
-        
-          i18n-sortDescending="kendo.treelist.sortDescending|The text shown in the column menu for the sort descending item"
-          sortDescending="Sort Descending"
-        
-          i18n-sortedDefault="kendo.treelist.sortedDefault|The status announcement when a column is no longer sorted"
-          sortedDefault="Not Sorted"
-        
-          i18n-columnsApply="kendo.treelist.columnsApply|The text shown in the column menu or column chooser for the columns apply button"
-          columnsApply="Apply"
-        
-          i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
-          columnsReset="Reset"
-        
-          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"
-        
-          i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
-          bottomToolbarLabel="Bottom toolbar"
-        
-          i18n-dragRowHandleLabel="kendo.treelist.dragRowHandleLabel|The label for the TreeList drag row handle"
-          dragRowHandleLabel="Drag row"
-        
-          i18n-selectRowCheckboxLabel="kendo.treelist.selectRowCheckboxLabel|The label for the select row checkbox"
-          selectRowCheckboxLabel="Select row"
-        
-          i18n-selectAllRowsCheckboxLabel="kendo.treelist.selectAllRowsCheckboxLabel|The label for the select all rows checkbox"
-          selectAllRowsCheckboxLabel="Select all rows"
-        
-          i18n-autosizeAllColumns="kendo.treelist.autosizeAllColumns|The text shown in the column menu for the autosize all columns item"
-          autosizeAllColumns="Autosize All Columns"
-        
-          i18n-autosizeThisColumn="kendo.treelist.autosizeThisColumn|The text shown in the column menu for the autosize this column item"
-          autosizeThisColumn="Autosize This Column"
-          >
-        </ng-container>
-        @if (showTopToolbar) {
-          <kendo-treelist-toolbar
-            position="top"
-            [navigable]="navigable"
-            [attr.aria-label]="messageFor('topToolbarLabel')"
-          [attr.aria-controls]="ariaRootId"></kendo-treelist-toolbar>
-        }
-        <ng-content select="kendo-toolbar"></ng-content>
-        <div #ariaRoot
-          class="k-grid-aria-root"
-          role="treegrid"
-          [id]="ariaRootId"
-          [attr.aria-rowcount]="ariaRowCount"
-          [attr.aria-colcount]="ariaColCount"
-          [attr.aria-multiselectable]="ariaMultiselectable"
-          [attr.aria-label]="ariaLabel"
-          kendoDragTargetContainer
-          kendoDropTargetContainer
-          mode="manual"
-          [dragDisabled]="!rowReorderable"
-          [dropDisabled]="!rowReorderable"
-          [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-          [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-          [dragHandle]="getDefaultSelectors('handle')"
-          [hint]="{hintTemplate: defaultHint}"
-          (onPress)="handleReorderEvents($event, 'press')"
-          (onDragStart)="handleReorderEvents($event, 'dragStart')"
-          (onDrag)="handleReorderEvents($event, 'drag')"
-          (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
-          (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
-          (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
-          (onDrop)="handleReorderEvents($event, 'drop')"
-          [dragData]="treeListData">
-          @if (isScrollable) {
-            @if (!hideHeader) {
-              <div
-                class="k-grid-header"
-                role="presentation"
-                [style.padding]="headerPadding">
-                @if (isLocked) {
-                  <div
-                    #lockedHeader
-                    role="presentation"
-                    class="k-grid-header-locked"
-                    [style.width.px]="lockedWidth">
-                    <table
-                      kendoTreeListResizableTable
-                      [locked]="true"
-                      role="presentation"
-                      [style.width.px]="lockedWidth"
-                      class="k-grid-header-table k-table k-table-md">
-                      <colgroup
-                        kendoTreeListColGroup
-                        [columns]="$any(lockedLeafColumns)">
-                    </colgroup>
-                    <thead kendoTreeListHeader
-                      role="rowgroup"
-                      [resizable]="resizable"
-                      [scrollable]="true"
-                      [columns]="$any(lockedColumns)"
-                      [totalColumnLevels]="totalColumnLevels"
-                      [sort]="sort"
-                      [filter]="filter"
-                      [filterable]="filterable"
-                      [reorderable]="reorderable"
-                      [sortable]="sortable"
-                      [columnMenu]="columnMenuOptions"
-                      [columnMenuTemplate]="columnMenuTemplate"
-                      [totalColumnsCount]="leafColumns.length"
-                      [totalColumns]="columnsContainer"
-                      [tabIndex]="navigation.enabled ? '-1' : '0'">
-                    </thead>
-                  </table>
-                </div>
-              }
-              <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
-                [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                <table
-                  role="presentation"
-                  [style.width.px]="nonLockedWidth"
-                  kendoTreeListResizableTable
-                  [virtualColumns]="virtualColumns"
-                  class="k-grid-header-table k-table k-table-md">
-                  <colgroup
-                    kendoTreeListColGroup
-                    [columns]="headerLeafColumns">
-                </colgroup>
-                <thead kendoTreeListHeader
-                  [resizable]="resizable"
-                  role="rowgroup"
-                  [scrollable]="true"
-                  [columns]="headerColumns"
-                  [totalColumnLevels]="totalColumnLevels"
-                  [sort]="sort"
-                  [filter]="filter"
-                  [filterable]="filterable"
-                  [reorderable]="reorderable"
-                  [sortable]="sortable"
-                  [columnMenu]="columnMenuOptions"
-                  [columnMenuTemplate]="columnMenuTemplate"
-                  [lockedColumnsCount]="lockedLeafColumns.length"
-                  [totalColumnsCount]="leafColumns.length"
-                  [totalColumns]="columnsContainer"
-                  [tabIndex]="navigation.enabled ? '-1' : '0'">
-                </thead>
-              </table>
-              @if (virtualColumns) {
-                <div class="k-width-container" role="presentation">
-                  <div [style.width.px]="columnsContainer.unlockedWidth"></div>
-                </div>
-              }
-            </div>
-          </div>
-        }
-        <kendo-treelist-list
-          [view]="view"
-          [loading]="showLoading"
-          [rowHeight]="rowHeight"
-          [total]="totalCount"
-          [take]="pageSize"
-          [skip]="skip"
-          [trackBy]="trackBy"
-          [columns]="columnsContainer"
-          [filterable]="filterable"
-          [noRecordsTemplate]="noRecordsTemplate"
-          (pageChange)="notifyPageChange('list', $event)"
-          [rowClass]="rowClass"
-          [isVirtual]="isVirtual"
-          [virtualColumns]="virtualColumns"
-          [expandIcons]="expandIcons"
-          (scrollBottom)="notifyScrollBottom()"
-          (contentScroll)="contentScroll.emit($event)"
-          kendoDraggable
-          kendoTreeListSelectionMarquee
-          [enableDrag]="marqueeSelection">
-        </kendo-treelist-list>
-        }
-        @if (!isScrollable) {
-          <table
-            class="k-table k-table-md k-grid-header-table"
-            role="presentation"
-            [style.table-layout]="resizable ? 'fixed' : null"
-            kendoTreeListResizableTable>
-            <colgroup
-              kendoTreeListColGroup
-              [columns]="$any(leafColumns)">
-          </colgroup>
-          @if (!hideHeader) {
-            <thead kendoTreeListHeader
-              role="rowgroup"
-              [resizable]="resizable"
-              [scrollable]="false"
-              [columns]="$any(visibleColumns)"
-              [totalColumnLevels]="totalColumnLevels"
-              [reorderable]="reorderable"
-              [sort]="sort"
-              [sortable]="sortable"
-              [filter]="filter"
-              [filterable]="filterable"
-              [columnMenu]="columnMenuOptions"
-              [columnMenuTemplate]="columnMenuTemplate"
-              [totalColumns]="columnsContainer"
-              [tabIndex]="navigation.enabled ? '-1' : '0'">
-            </thead>
-          }
-          <tbody kendoTreeListTableBody
-            [view]="view"
-            [skip]="skip"
-            [columns]="$any(leafColumns)"
-            [filterable]="filterable"
-            [noRecordsTemplate]="noRecordsTemplate"
-            [trackBy]="trackBy"
-            [rowClass]="rowClass"
-            [expandIcons]="expandIcons"
-            kendoDraggable
-            kendoTreeListSelectionMarquee
-            [enableDrag]="marqueeSelection">
-          </tbody>
-        </table>
-        @if (showLoading) {
-          <div kendoTreeListLoading>
-          </div>
-        }
-        }
-        </div>
-        @if (showPager) {
-          <kendo-pager
-            #pager
-            class="k-grid-pager"
-            [navigable]="navigable"
-            [pageSize]="pageSize"
-            [total]="view.totalVisible"
-            [skip]="skip"
-            [responsive]="normalizedPageableSettings.responsive && !pagerTemplate"
-            [buttonCount]="normalizedPageableSettings.buttonCount"
-            [info]="normalizedPageableSettings.info"
-            [pageSizeValues]="normalizedPageableSettings.pageSizes"
-            [previousNext]="normalizedPageableSettings.previousNext"
-            [type]="normalizedPageableSettings.type"
-            (pageChange)="notifyPageChange('pager', $event)"
-            (pagerInputVisibilityChange)="handlePagerVisibilityChange('showPagerInput', $event)"
-            (pageTextVisibilityChange)="handlePagerVisibilityChange('showPagerPageText', $event)"
-            (itemsTextVisibilityChange)="handlePagerVisibilityChange('showPagerItemsText', $event)">
-            <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>
-        }
-        @if (showBottomToolbar) {
-          <kendo-treelist-toolbar
-            class="k-grid-toolbar-bottom"
-            position="bottom"
-            [navigable]="navigable"
-            [attr.aria-label]="messageFor('bottomToolbarLabel')"
-            [attr.aria-controls]="ariaRootId">
-          </kendo-treelist-toolbar>
-        }
-        
-        <ng-template #defaultHint>
-          <kendo-icon-wrapper
-            [name]="getHintSettings('hintIcon')"
-            [svgIcon]="getHintSettings('hintSVGIcon')"
-            innerCssClass="k-drag-status">
-          </kendo-icon-wrapper>
-          {{hintText}}
-        </ng-template>
-        
-        <ng-template #defaultPager>
-          <div class="k-pager-numbers-wrap">
-            @if (normalizedPageableSettings.previousNext) {
-              <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
-            }
-            @if (normalizedPageableSettings.type === 'numeric' && normalizedPageableSettings.buttonCount > 0) {
-              <kendo-pager-numeric-buttons
-                [buttonCount]="normalizedPageableSettings.buttonCount">
-              </kendo-pager-numeric-buttons>
-            }
-            @if (normalizedPageableSettings.type === 'input' || showPagerInput) {
-              <kendo-pager-input [showPageText]="showPagerPageText"></kendo-pager-input>
-            }
-            @if (normalizedPageableSettings.previousNext) {
-              <kendo-pager-next-buttons></kendo-pager-next-buttons>
-            }
-          </div>
-          @if (normalizedPageableSettings.pageSizes) {
-            <kendo-pager-page-sizes
-              [pageSizes]="normalizedPageableSettings.pageSizes"
-              [showItemsText]="showPagerItemsText">
-            </kendo-pager-page-sizes>
-          }
-          @if (normalizedPageableSettings.info) {
-            <kendo-pager-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, NgTemplateOutlet, ToolbarComponent, DragTargetContainerDirective, DropTargetContainerDirective, TableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective, ListComponent, DraggableDirective, MarqueeDirective, TableBodyComponent, LoadingComponent, ...KENDO_PAGER, IconWrapperComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.BrowserSupportService }, { type: i0.ElementRef }, { type: i2.ChangeNotificationService }, { type: i3.EditService }, { type: i4.FilterService }, { type: i5.PDFService }, { type: i6.ResponsiveService }, { type: i0.Renderer2 }, { type: i7.ExcelService }, { type: i0.NgZone }, { type: i8.ScrollSyncService }, { type: i9.DomEventsService }, { type: i10.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i11.ColumnReorderService }, { type: i12.ColumnInfoService }, { type: i13.NavigationService }, { type: i14.SortService }, { type: i15.ScrollRequestService }, { type: i16.ExpandStateService }, { type: i17.OptionChangesService }, { type: i18.SelectionService }, { type: i19.LocalizationService }, { type: i20.ContextService }, { type: i21.RowReorderService }], propDecorators: { ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], data: [{
-                type: Input
-            }], pageSize: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], rowHeight: [{
-                type: Input
-            }], skip: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], trackBy: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], virtualColumns: [{
-                type: Input
-            }], filterable: [{
-                type: Input
-            }], sortable: [{
-                type: Input
-            }], pageable: [{
-                type: Input
-            }], navigable: [{
-                type: Input
-            }], autoSize: [{
-                type: Input
-            }], rowClass: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], reorderable: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], columnMenu: [{
-                type: Input
-            }], hideHeader: [{
-                type: Input
-            }], idField: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], isSelected: [{
-                type: Input
-            }], rowReorderable: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], filterChange: [{
-                type: Output
-            }], pageChange: [{
-                type: Output
-            }], sortChange: [{
-                type: Output
-            }], dataStateChange: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], save: [{
-                type: Output
-            }], remove: [{
-                type: Output
-            }], add: [{
-                type: Output
-            }], cellClose: [{
-                type: Output
-            }], cellClick: [{
-                type: Output
-            }], pdfExport: [{
-                type: Output
-            }], excelExport: [{
-                type: Output
-            }], columnResize: [{
-                type: Output
-            }], columnReorder: [{
-                type: Output
-            }], columnVisibilityChange: [{
-                type: Output
-            }], columnLockedChange: [{
-                type: Output
-            }], scrollBottom: [{
-                type: Output
-            }], contentScroll: [{
-                type: Output
-            }], expandEvent: [{
-                type: Output,
-                args: ['expand']
-            }], collapseEvent: [{
-                type: Output,
-                args: ['collapse']
-            }], expandStateChange: [{
-                type: Output
-            }], rowReorder: [{
-                type: Output
-            }], columnsRef: [{
-                type: Input,
-                args: ['columns']
-            }], columns: [{
-                type: ContentChildren,
-                args: [ColumnBase]
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-grid']
-            }, {
-                type: HostBinding,
-                args: ['class.k-grid-md']
-            }, {
-                type: HostBinding,
-                args: ['class.k-treelist']
-            }], lockedClasses: [{
-                type: HostBinding,
-                args: ['class.k-grid-lockedcolumns']
-            }], virtualClasses: [{
-                type: HostBinding,
-                args: ['class.k-grid-virtual']
-            }], noScrollbarClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-no-scrollbar']
-            }], noRecordsTemplateChildren: [{
-                type: ContentChildren,
-                args: [NoRecordsTemplateDirective]
-            }], pagerTemplateChildren: [{
-                type: ContentChildren,
-                args: [PagerTemplateDirective]
-            }], toolbarTemplateChildren: [{
-                type: ContentChildren,
-                args: [ToolbarTemplateDirective]
-            }], columnMenuTemplates: [{
-                type: ContentChildren,
-                args: [ColumnMenuTemplateDirective]
-            }], lockedHeader: [{
-                type: ViewChild,
-                args: ['lockedHeader']
-            }], header: [{
-                type: ViewChild,
-                args: ['header']
-            }], footer: [{
-                type: ViewChildren,
-                args: ['footer']
-            }], ariaRoot: [{
-                type: ViewChild,
-                args: ['ariaRoot', { static: true }]
-            }], dragTargetContainer: [{
-                type: ViewChild,
-                args: [DragTargetContainerDirective]
-            }], dropTargetContainer: [{
-                type: ViewChild,
-                args: [DropTargetContainerDirective]
-            }], listComponent: [{
-                type: ViewChild,
-                args: [ListComponent]
-            }], fetchChildren: [{
-                type: Input
-            }], hasChildren: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }] } });