@progress/kendo-angular-treelist 5.0.9 → 11.0.0-develop.101

package/{esm2015/treelist.component.js → esm2020/treelist.component.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChildren, EventEmitter, HostBinding, Input, Output, QueryList, ViewChild, isDevMode, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy, forwardRef } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Subscription, merge, isObservable } from 'rxjs';
 import { map, tap, take, filter, switchMap, takeUntil } from 'rxjs/operators';
@@ -390,9 +390,12 @@ export class TreeListComponent {
          * A query list of all declared columns.
          */
         this.columns = new QueryList();
+        this.hostClasses = true;
         this.footer = new QueryList();
         this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
-            column.matchesMedia = this.matchesMedia(column);
+            if (!isUniversal()) {
+                column.matchesMedia = this.matchesMedia(column);
+            }
             return column.isVisible;
         }));
         this.idGetter = getter(undefined);
@@ -666,7 +669,6 @@ export class TreeListComponent {
             throw new Error(`isSelected must be a function, but received "${JSON.stringify(value)}".`);
         }
         this.selectionService.isSelected = value;
-        this.selectionService.settings = this.selectionService.settings;
     }
     /**
      * @hidden
@@ -684,9 +686,6 @@ export class TreeListComponent {
     get dir() {
         return this.direction;
     }
-    get hostClasses() {
-        return true;
-    }
     get lockedClasses() {
         return this.lockedLeafColumns.length > 0;
     }
@@ -951,7 +950,7 @@ export class TreeListComponent {
      * Switches the specified table row in the edit mode ([see example]({% slug editing_template_forms_treelist %}#toc-editing-records)).
      *
      * @param index - The row index that will be switched in the edit mode.
-     * @param group - The [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }})
+     * @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 row's edit element should be focused. Defaults to `false`.
      */
@@ -959,7 +958,7 @@ export class TreeListComponent {
         this.editService.editRow(item, group);
         this.view.updateEditedState();
         this.changeDetectorRef.markForCheck();
-        if (options && options.skipFocus) {
+        if (options && options['skipFocus']) {
             return;
         }
         this.focusEditElement(() => {
@@ -985,7 +984,7 @@ export class TreeListComponent {
     /**
      * Creates a new row editor ([see example]({% slug editing_template_forms_treelist %}#toc-adding-records)).
      *
-     * @param {FormGroup} group - The [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }}) that describes
+     * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes
      * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.
      */
     addRow(group, parent) {
@@ -1016,7 +1015,7 @@ export class TreeListComponent {
      *
      * @param {number} rowIndex - The data row index that will be switched in the edit mode.
      * @param {number|string|any} column - The leaf column index, or the field name or the column instance that should be edited.
-     * @param {FormGroup} group - The [`FormGroup`]({{ site.data.urls.angular['formgroupapi'] }})
+     * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi'])
      * that describes the edit form.
      */
     editCell(dataItem, column, group) {
@@ -1467,7 +1466,7 @@ export class TreeListComponent {
                     target = target.parent;
                 }
             }
-            let oldIndex = columnsForLevel.indexOf(source);
+            const oldIndex = columnsForLevel.indexOf(source);
             if (changeContainer) {
                 if (before && 0 < newIndex && oldIndex < newIndex) { // dropped before the first not locked column
                     newIndex--;
@@ -1509,7 +1508,7 @@ export class TreeListComponent {
         }
         let i = 0;
         while (i < expandedColumns.length) {
-            let column = expandedColumns[i];
+            const column = expandedColumns[i];
             if (column === target) {
                 nextSourceIndex = before ? nextIndex : nextIndex + 1;
                 nextIndex = before ? nextIndex + toSkip : nextIndex;
@@ -1598,7 +1597,7 @@ export class TreeListComponent {
     autoGenerateColumns() {
         if (this.shouldGenerateColumns && !this.columns.length && this.view.length) {
             const columns = Object.keys(this.view.at(0).data).map(field => {
-                let column = new ColumnComponent();
+                const column = new ColumnComponent();
                 column.field = field;
                 return column;
             });
@@ -1624,6 +1623,7 @@ export class TreeListComponent {
             .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;
@@ -1776,9 +1776,7 @@ export class TreeListComponent {
             else if (e.type === 'end') {
                 this.renderer.removeClass(this.wrapper.nativeElement, 'k-grid-column-resizing');
             }
-        }), filter(e => e.type === 'start'), switchMap(() => resizes.pipe(
-        // eslint-disable-next-line  rxjs/no-unsafe-takeuntil
-        takeUntil(resizes.pipe(filter(e => e.type === 'triggerAutoFit'))), filter(e => e.type === 'end'))))
+        }), 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) {
@@ -1829,7 +1827,7 @@ export class TreeListComponent {
                 column = toAdd.shift();
                 viewportColumns.push(column);
                 if (column.isColumnGroup) {
-                    toAdd.unshift.apply(toAdd, column.childrenArray);
+                    toAdd.unshift(...column.childrenArray);
                 }
             }
             const lastFromGroup = viewportColumns[viewportColumns.length - 1];
@@ -1880,8 +1878,8 @@ export class TreeListComponent {
         this.columns.notifyOnChanges();
     }
 }
-TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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 }], target: i0.ɵɵFactoryTarget.Component });
-TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TreeListComponent, 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", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", 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" }, host: { properties: { "attr.dir": "this.dir", "class.k-widget": "this.hostClasses", "class.k-grid": "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: [
+TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 }], target: i0.ɵɵFactoryTarget.Component });
+TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TreeListComponent, 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", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", 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" }, 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,
@@ -2072,140 +2070,152 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
+
+            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            selectPage="Select page"
          >
         </ng-container>
-        <kendo-treelist-toolbar *ngIf="showTopToolbar" position="top"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showTopToolbar"
+            position="top" 
+            class="k-toolbar k-grid-toolbar k-toolbar-md"></kendo-treelist-toolbar>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel"
-            >
-        <ng-template [ngIf]="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                    [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table [locked]="true" role="presentation" [style.width.px]="lockedWidth">
-                        <colgroup kendoTreeListColGroup
+            [attr.aria-label]="ariaLabel">
+            <ng-template [ngIf]="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                        [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                         #lockedHeader
+                         role="presentation"
+                         class="k-grid-header-locked"
+                         [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="$any(lockedLeafColumns)">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [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">
-                        </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" [virtualColumns]="virtualColumns">
-                        <colgroup kendoTreeListColGroup
-                            role="presentation"
-                            [columns]="headerLeafColumns">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [resizable]="resizable"
+                            [style.width.px]="lockedWidth"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="$any(lockedLeafColumns)">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [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">
+                            </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"
-                            [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">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="headerLeafColumns">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [resizable]="resizable"
+                                role="presentation"
+                                [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">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </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>
-        </ng-template>
-        <ng-template [ngIf]="!isScrollable">
-            <table [style.table-layout]="resizable ? 'fixed' : null">
-                <colgroup kendoTreeListColGroup
-                    [columns]="$any(leafColumns)">
-                </colgroup>
-                <thead kendoTreeListHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate">
-                </thead>
-                <tbody kendoTreeListTableBody
+                <kendo-treelist-list
                     [view]="view"
+                    [loading]="showLoading"
+                    [rowHeight]="rowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [filterable]="filterable"
                     [noRecordsTemplate]="noRecordsTemplate"
-                    [trackBy]="trackBy"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [isVirtual]="isVirtual"
+                    [virtualColumns]="virtualColumns"
                     [expandIcons]="expandIcons"
-
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"   
                     kendoDraggable
                     kendoTreeListSelectionMarquee
-                    [enableDrag]="marqueeSelection"
-                    >
-                </tbody>
-            </table>
-            <div *ngIf="showLoading" kendoTreeListLoading>
-            </div>
-        </ng-template>
+                    [enableDrag]="marqueeSelection">
+                </kendo-treelist-list>
+            </ng-template>
+            <ng-template [ngIf]="!isScrollable">
+                <table 
+                    class="k-table k-table-md k-grid-header-table"
+                    [style.table-layout]="resizable ? 'fixed' : null">
+                    <colgroup kendoTreeListColGroup
+                        [columns]="$any(leafColumns)">
+                    </colgroup>
+                    <thead kendoTreeListHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate">
+                    </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>
+                <div *ngIf="showLoading" kendoTreeListLoading>
+                </div>
+            </ng-template>
         </div>
         <kendo-treelist-pager
             *ngIf="showPager"
@@ -2217,9 +2227,12 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-treelist-pager>
-        <kendo-treelist-toolbar *ngIf="showBottomToolbar" position="bottom"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showBottomToolbar"
+            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
+            position="bottom"></kendo-treelist-toolbar>
     `, isInline: true, components: [{ type: i21.ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position"] }, { type: i22.ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: i23.HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: i24.ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i25.TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i26.LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: i27.PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: i28.LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i30.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i31.ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i32.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i33.MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TreeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2418,140 +2431,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
+
+            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            selectPage="Select page"
          >
         </ng-container>
-        <kendo-treelist-toolbar *ngIf="showTopToolbar" position="top"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showTopToolbar"
+            position="top" 
+            class="k-toolbar k-grid-toolbar k-toolbar-md"></kendo-treelist-toolbar>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel"
-            >
-        <ng-template [ngIf]="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                    [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table [locked]="true" role="presentation" [style.width.px]="lockedWidth">
-                        <colgroup kendoTreeListColGroup
-                            role="presentation"
-                            [columns]="$any(lockedLeafColumns)">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [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">
-                        </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" [virtualColumns]="virtualColumns">
-                        <colgroup kendoTreeListColGroup
+            [attr.aria-label]="ariaLabel">
+            <ng-template [ngIf]="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                        [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                         #lockedHeader
+                         role="presentation"
+                         class="k-grid-header-locked"
+                         [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="headerLeafColumns">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [resizable]="resizable"
+                            [style.width.px]="lockedWidth"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="$any(lockedLeafColumns)">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [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">
+                            </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"
-                            [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">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="headerLeafColumns">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [resizable]="resizable"
+                                role="presentation"
+                                [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">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </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>
-        </ng-template>
-        <ng-template [ngIf]="!isScrollable">
-            <table [style.table-layout]="resizable ? 'fixed' : null">
-                <colgroup kendoTreeListColGroup
-                    [columns]="$any(leafColumns)">
-                </colgroup>
-                <thead kendoTreeListHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate">
-                </thead>
-                <tbody kendoTreeListTableBody
+                <kendo-treelist-list
                     [view]="view"
+                    [loading]="showLoading"
+                    [rowHeight]="rowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [filterable]="filterable"
                     [noRecordsTemplate]="noRecordsTemplate"
-                    [trackBy]="trackBy"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [isVirtual]="isVirtual"
+                    [virtualColumns]="virtualColumns"
                     [expandIcons]="expandIcons"
-
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"   
                     kendoDraggable
                     kendoTreeListSelectionMarquee
-                    [enableDrag]="marqueeSelection"
-                    >
-                </tbody>
-            </table>
-            <div *ngIf="showLoading" kendoTreeListLoading>
-            </div>
-        </ng-template>
+                    [enableDrag]="marqueeSelection">
+                </kendo-treelist-list>
+            </ng-template>
+            <ng-template [ngIf]="!isScrollable">
+                <table 
+                    class="k-table k-table-md k-grid-header-table"
+                    [style.table-layout]="resizable ? 'fixed' : null">
+                    <colgroup kendoTreeListColGroup
+                        [columns]="$any(leafColumns)">
+                    </colgroup>
+                    <thead kendoTreeListHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate">
+                    </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>
+                <div *ngIf="showLoading" kendoTreeListLoading>
+                </div>
+            </ng-template>
         </div>
         <kendo-treelist-pager
             *ngIf="showPager"
@@ -2563,7 +2588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-treelist-pager>
-        <kendo-treelist-toolbar *ngIf="showBottomToolbar" position="bottom"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showBottomToolbar"
+            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
+            position="bottom"></kendo-treelist-toolbar>
     `
                 }]
         }], ctorParameters: function () { return [{ 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 }]; }, propDecorators: { ariaLabel: [{
@@ -2678,10 +2706,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 args: ['attr.dir']
             }], hostClasses: [{
                 type: HostBinding,
-                args: ['class.k-widget']
+                args: ['class.k-grid']
             }, {
                 type: HostBinding,
-                args: ['class.k-grid']
+                args: ['class.k-grid-md']
             }, {
                 type: HostBinding,
                 args: ['class.k-treelist']