@progress/kendo-angular-treelist 11.0.0-develop.81 → 11.0.0-develop.82

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, HostBinding, Output, Inject, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Output, Inject, HostBinding, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$2 from '@angular/forms';
@@ -27,12 +27,13 @@ import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@pr
 import * as i4$1 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i3$3 from '@progress/kendo-angular-buttons';
+import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
 import * as i1$4 from '@progress/kendo-angular-intl';
 import * as i4$2 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
-import * as i3$3 from '@progress/kendo-angular-icons';
+import * as i3$4 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import { Button } from '@progress/kendo-angular-buttons';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { saveAs } from '@progress/kendo-file-saver';
 import { workbookOptions, toDataURL, ColumnBase as ColumnBase$1, ExcelExportModule } from '@progress/kendo-angular-excel-export';
@@ -44,7 +45,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1672821809,
+    publishDate: 1672862547,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -5021,7 +5022,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class ToolbarComponent {
     constructor(ctx) {
         this.ctx = ctx;
-        this.classNames = 'k-toolbar k-grid-toolbar';
         this.context = {};
     }
     set position(value) {
@@ -5032,7 +5032,7 @@ class ToolbarComponent {
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [{ token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: { position: "position" }, host: { properties: { "class": "this.classNames" } }, ngImport: i0, template: `
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: { position: "position" }, ngImport: i0, template: `
         <ng-template
             *ngIf="toolbarTemplateRef"
             [ngTemplateOutlet]="toolbarTemplateRef"
@@ -5053,10 +5053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { classNames: [{
-                type: HostBinding,
-                args: ['class']
-            }], position: [{
+        }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { position: [{
                 type: Input
             }] } });
 
@@ -7239,7 +7236,8 @@ class FilterMenuComponent {
 FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: { column: "column", filter: "filter" }, ngImport: i0, template: `
         <a #anchor
-            [ngClass]="{'k-grid-filter':true, 'k-active': hasFilters}"
+            class="k-grid-filter-menu k-grid-header-menu"
+            [class.k-active]="hasFilters"
             (click)="toggle(anchor, template)"
             href="#"
             [attr.title]="filterLabel">
@@ -7253,14 +7251,15 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-treelist-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-filter-menu',
                     template: `
         <a #anchor
-            [ngClass]="{'k-grid-filter':true, 'k-active': hasFilters}"
+            class="k-grid-filter-menu k-grid-header-menu"
+            [class.k-active]="hasFilters"
             (click)="toggle(anchor, template)"
             href="#"
             [attr.title]="filterLabel">
@@ -8162,7 +8161,7 @@ class ColumnMenuComponent {
 ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: SinglePopupService }, { token: i1$1.LocalizationService }, { token: ColumnMenuService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
-            class="k-grid-column-menu k-grid-filter"
+            class="k-grid-column-menu k-grid-header-menu"
             [ngClass]="{ 'k-active': isActive }"
             (click)="toggle($event, anchor, template)"
             href="#"
@@ -8195,7 +8194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treelist-column-menu',
                     template: `
         <a #anchor
-            class="k-grid-column-menu k-grid-filter"
+            class="k-grid-column-menu k-grid-header-menu"
             [ngClass]="{ 'k-active': isActive }"
             (click)="toggle($event, anchor, template)"
             href="#"
@@ -8308,7 +8307,7 @@ class FilterCellOperatorsComponent {
         }
     }
     ngOnInit() {
-        this.subscription = this.localization.changes.subscribe(() => this.clearText = this.localization.get("filterClearButton"));
+        this.subscription = this.localization.changes.subscribe(() => this.clearText = this.localization.get('filterClearButton'));
     }
     ngOnDestroy() {
         if (this.subscription) {
@@ -8334,15 +8333,15 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (keydown)="dropdownKeydown($event)">
         </kendo-dropdownlist>
         <button type="button"
+            kendoButton
             kendoTreeListFocusable
             *ngIf="showButton"
-            class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            icon="filter-clear"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
-                <span class="k-icon k-button-icon k-i-filter-clear"></span>
         </button>
-    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
+    `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i3$3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -8364,13 +8363,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (keydown)="dropdownKeydown($event)">
         </kendo-dropdownlist>
         <button type="button"
+            kendoButton
             kendoTreeListFocusable
             *ngIf="showButton"
-            class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button"
+            icon="filter-clear"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
-                <span class="k-icon k-button-icon k-i-filter-clear"></span>
         </button>
     `
                 }]
@@ -8497,14 +8496,14 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input
-                kendoTextBox
+            <input 
+                class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
                 kendoTreeListFocusable
                 kendoFilterInput
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i3$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -8516,8 +8515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input
-                kendoTextBox
+            <input 
+                class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
                 kendoTreeListFocusable
                 kendoFilterInput
                 [filterDelay]="filterDelay"
@@ -9061,6 +9060,7 @@ FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [column]="$any(column)"
             [filter]="filter"
           kendoTreeListLogicalCell
+            class="k-table-td"
             [logicalRowIndex]="logicalRowIndex"
             [logicalColIndex]="lockedColumnsCount + columnIndex"
             [column]="getColumnComponent(column)"
@@ -9078,6 +9078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [column]="$any(column)"
             [filter]="filter"
           kendoTreeListLogicalCell
+            class="k-table-td"
             [logicalRowIndex]="logicalRowIndex"
             [logicalColIndex]="lockedColumnsCount + columnIndex"
             [column]="getColumnComponent(column)"
@@ -9114,6 +9115,7 @@ class LogicalRowDirective {
         this.dataRowIndex = -1;
         this.isNew = false;
         this.uid = nextId();
+        this.tableRowClass = true;
     }
     get hostRole() {
         return this.logicalSlaveRow ? 'presentation' : 'row';
@@ -9155,7 +9157,7 @@ class LogicalRowDirective {
     }
 }
 LogicalRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogicalRowDirective, deps: [{ token: IdService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", isNew: "isNew" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
+LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", isNew: "isNew" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-owns": "this.ariaOwns", "class.k-table-row": "this.tableRowClass" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogicalRowDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9184,6 +9186,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], ariaOwns: [{
                 type: HostBinding,
                 args: ['attr.aria-owns']
+            }], tableRowClass: [{
+                type: HostBinding,
+                args: ['class.k-table-row']
             }] } });
 
 /**
@@ -9577,6 +9582,7 @@ class HeaderComponent {
         this.columnMenu = false;
         this.totalColumnsCount = 0;
         this.sortedFields = {};
+        this.hostClass = true;
         this.dropTargets = new QueryList();
         this.subscription = new Subscription();
     }
@@ -9851,7 +9857,7 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: SortService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-header": "this.headerClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoTreeListLogicalRow
                 [logicalRowIndex]="levelIndex"
@@ -9880,7 +9886,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                         hint: column.title || getColumnComponent(column).field,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
@@ -9914,7 +9920,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     </ng-template>
                     <ng-template [ngIf]="isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
-                            <a #link href="#" tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
+                            <span #link tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
                                 <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
@@ -9926,9 +9932,11 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <span class="k-sort-icon">
+                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
-                            </a>
+                            </span>
                             <span role="status"
                                 class="k-sort-status"
                                 [style]="'position: absolute; left: -10000px;'"
@@ -9981,7 +9989,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                         hint: column.title,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [class.k-filterable]="showColumnMenu(column)"
                     [ngClass]="column.headerClass"
@@ -10059,7 +10067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         hint: column.title || getColumnComponent(column).field,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-filterable]="(showFilterMenu && isFilterable(getColumnComponent(column))) || showColumnMenu(column)"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [ngClass]="column.headerClass"
@@ -10093,7 +10101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     </ng-template>
                     <ng-template [ngIf]="isSortable(getColumnComponent(column))">
                         <span class="k-cell-inner">
-                            <a #link href="#" tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
+                            <span #link tabindex="-1" class="k-link" (click)="sortColumn(getColumnComponent(column), $event, link)">  
                                 <ng-template
                                     [templateContext]="{
                                         templateRef: column.headerTemplateRef,
@@ -10105,9 +10113,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                <span class="k-sort-icon">
+                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
-                            </a>
+                            </span>
                             <span role="status"
                                 class="k-sort-status"
                                 [style]="'position: absolute; left: -10000px;'"
@@ -10160,7 +10170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         hint: column.title,
                         lastColumn: last && columnIndex === 0
                     }"
-                    class="k-header"
+                    class="k-header k-table-th"
                     [class.k-first]="isFirstOnRow(getColumnComponent(column), columnIndex)"
                     [class.k-filterable]="showColumnMenu(column)"
                     [ngClass]="column.headerClass"
@@ -10235,6 +10245,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], headerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-header']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-thead']
             }], dropTargets: [{
                 type: ViewChildren,
                 args: [DropTargetDirective]
@@ -10382,7 +10395,7 @@ const ICON_CLASS = 'k-icon';
 /**
  * @hidden
  */
-const IGNORE_CONTAINER_CLASSES = 'k-widget k-treelist-ignore-click';
+const IGNORE_CONTAINER_CLASSES = 'k-treelist-ignore-click';
 
 /* eslint-disable @angular-eslint/pipe-prefix */
 /**
@@ -10732,6 +10745,7 @@ class TableBodyComponent {
         this.navigationService = navigationService;
         this.expandState = expandState;
         this.selection = selection;
+        this.hostClass = true;
         this.columns = [];
         this.skip = 0;
         this.noRecordsText = this.localization.get('noRecords');
@@ -10990,9 +11004,9 @@ class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableBodyComponent, deps: [{ token: ChangeNotificationService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: ColumnInfoService }, { token: NavigationService }, { token: ExpandStateService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", rowClass: "rowClass" }, usesOnChanges: true, ngImport: i0, template: `
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: { columns: "columns", allColumns: "allColumns", noRecordsTemplate: "noRecordsTemplate", view: "view", skip: "skip", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", expandIcons: "expandIcons", trackBy: "trackBy", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <tr *ngIf="!hasData" class="k-grid-norecords">
-        <td [attr.colspan]="colSpan">
+        <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
             </ng-container>
             <ng-container *ngIf="!noRecordsTemplate?.templateRef">
@@ -11040,6 +11054,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                     role="gridcell"
                     [attr.aria-expanded]="ariaExpanded(item, column)"
                     [attr.aria-selected]="ariaSelected(item, column, lockedColumnsCount + columnIndex)"
+                class="k-table-td"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell(item, column)"
                 [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
@@ -11062,6 +11077,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                     [logicalColIndex]="logicalColIndex(column)"
                     [column]="column"
                     [colIndex]="columnIndex"
+                    class="k-table-td"
                 [ngClass]="column.footerClass"
                 [ngStyle]="column.footerStyle"
                 *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
@@ -11089,7 +11105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: '[kendoTreeListTableBody]',
                     template: `
     <tr *ngIf="!hasData" class="k-grid-norecords">
-        <td [attr.colspan]="colSpan">
+        <td [attr.colspan]="colSpan" class="k-table-td">
             <ng-container *ngIf="noRecordsTemplate?.templateRef" [ngTemplateOutlet]="noRecordsTemplate.templateRef">
             </ng-container>
             <ng-container *ngIf="!noRecordsTemplate?.templateRef">
@@ -11137,6 +11153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     role="gridcell"
                     [attr.aria-expanded]="ariaExpanded(item, column)"
                     [attr.aria-selected]="ariaSelected(item, column, lockedColumnsCount + columnIndex)"
+                class="k-table-td"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell(item, column)"
                 [class.k-selected]="isCellSelected(item.data, column, lockedColumnsCount + columnIndex)"
@@ -11159,6 +11176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [logicalColIndex]="logicalColIndex(column)"
                     [column]="column"
                     [colIndex]="columnIndex"
+                    class="k-table-td"
                 [ngClass]="column.footerClass"
                 [ngStyle]="column.footerStyle"
                 *ngFor="let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;">
@@ -11181,7 +11199,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ChangeNotificationService }, { type: EditService }, { type: i1$1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DomEventsService }, { type: ColumnInfoService }, { type: NavigationService }, { type: ExpandStateService }, { type: SelectionService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: ChangeNotificationService }, { type: EditService }, { type: i1$1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DomEventsService }, { type: ColumnInfoService }, { type: NavigationService }, { type: ExpandStateService }, { type: SelectionService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-table-tbody']
+            }], columns: [{
                 type: Input
             }], allColumns: [{
                 type: Input
@@ -11890,7 +11911,12 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
         *ngIf="isLocked" [style.width.px]="lockedWidth">
         <div role="presentation" class="k-grid-table-wrap">
-            <table [locked]="true" #lockedTable class="k-grid-table" role="presentation" [style.width.px]="lockedWidth">
+            <table
+                [locked]="true"
+                #lockedTable
+                class="k-table k-grid-table k-table-md"
+                role="presentation"
+                [style.width.px]="lockedWidth">
                 <colgroup kendoTreeListColGroup
                     role="presentation"
                     [columns]="$any(lockedLeafColumns)">
@@ -11914,14 +11940,15 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <div class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-    </div><div #container
+    </div>
+    <div #container
                class="k-grid-content k-virtual-content"
                role="presentation" tabindex="-1"
                [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
                [lockedWidth]="lockedWidth + 1">
         <div role="presentation" class="k-grid-table-wrap">
             <table [style.width.px]="nonLockedWidth" #table [virtualColumns]="virtualColumns"
-              class="k-grid-table" role="presentation">
+              class="k-table k-grid-table k-table-md" role="presentation">
                 <colgroup kendoTreeListColGroup
                     role="presentation"
                     [columns]="$any(nonLockedColumnsToRender)">
@@ -11969,7 +11996,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
         *ngIf="isLocked" [style.width.px]="lockedWidth">
         <div role="presentation" class="k-grid-table-wrap">
-            <table [locked]="true" #lockedTable class="k-grid-table" role="presentation" [style.width.px]="lockedWidth">
+            <table
+                [locked]="true"
+                #lockedTable
+                class="k-table k-grid-table k-table-md"
+                role="presentation"
+                [style.width.px]="lockedWidth">
                 <colgroup kendoTreeListColGroup
                     role="presentation"
                     [columns]="$any(lockedLeafColumns)">
@@ -11993,14 +12025,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <div class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-    </div><div #container
+    </div>
+    <div #container
                class="k-grid-content k-virtual-content"
                role="presentation" tabindex="-1"
                [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
                [lockedWidth]="lockedWidth + 1">
         <div role="presentation" class="k-grid-table-wrap">
             <table [style.width.px]="nonLockedWidth" #table [virtualColumns]="virtualColumns"
-              class="k-grid-table" role="presentation">
+              class="k-table k-grid-table k-table-md" role="presentation">
                 <colgroup kendoTreeListColGroup
                     role="presentation"
                     [columns]="$any(nonLockedColumnsToRender)">
@@ -12224,81 +12257,67 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
 }
 PagerPrevButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPrevButtonsComponent, selector: "kendo-treelist-pager-prev-buttons", usesInheritance: true, ngImport: i0, template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            [tabIndex]="-1"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span [attr.aria-label]="textFor('pagerFirstPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-left': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            role="button"
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none">
+        </button>
+        <button
+            kendoButton
+            [tabIndex]="-1"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
             [title]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerPreviousPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-left': true
-                }">
-            </span>
-        </a>
-    `, isInline: true, directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
+    `, isInline: true, components: [{ type: i3$3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-prev-buttons',
                     template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            [tabIndex]="-1"
+            kendoButton
+            type="button"
             [title]="textFor('pagerFirstPage')"
+            [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="currentPage !== 1 ? changePage(0) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-first': true
-            }">
-            <span [attr.aria-label]="textFor('pagerFirstPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-left': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            role="button"
+            icon="caret-alt-to-left"
+            class="k-pager-nav k-pager-first"
+            [disabled]="disabled"
+            fillMode="flat"
+            rounded="none">
+        </button>
+        <button
+            kendoButton
+            [tabIndex]="-1"
+            type="button"
+            class="k-pager-nav"
+            [disabled]="disabled"
+            icon="caret-alt-left"
+            fillMode="flat"
+            rounded="none"
             [title]="textFor('pagerPreviousPage')"
-            (click)="currentPage !== 1 ? changePage(currentPage-2) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerPreviousPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-left': true
-                }">
-            </span>
-        </a>
+            [attr.aria-label]="textFor('pagerPreviousPage')"
+            (click)="currentPage !== 1 ? changePage(currentPage-2) : false">
+        </button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
@@ -12381,11 +12400,12 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
 }
 PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
 PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
-       <select
-            class="k-dropdown"
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-picker-md k-rounded-md k-pager-nav"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -12395,53 +12415,67 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
-                class="k-link"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(start - 2)">...</a>
-            </li>
-            <li *ngFor="let num of buttons">
-                <a  href="#"
-                    [attr.aria-label]="pageLabel(num)"
-                    tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </a>
-            </li>
-            <li *ngIf="end < totalPages">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(end)">...</a>
-            </li>
-        </ul>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                class="k-pager-nav"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
+    `, isInline: true, components: [{ type: i3$3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-numeric-buttons',
                     template: `
-       <select
-            class="k-dropdown"
+        <select
+            class="k-dropdown-list k-dropdown k-picker k-picker-md k-rounded-md k-pager-nav"
+            [attr.title]="textFor('selectPage')"
+            [attr.aria-label]="textFor('selectPage')"
             (change)="onSelectChange($event)">
             <option *ngIf="start > 1"
-                class="k-link"
                 value="previousButtons"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(start - 1)">...
@@ -12451,41 +12485,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [selected]="num === currentPage"
                 [attr.aria-label]="pageLabel(num)"
                 [attr.aria-current]="currentPage === num ? 'page' : undefined"
-                [ngClass]="{'k-link': true, 'k-selected':currentPage === num}">
+                [ngClass]="{'k-selected':currentPage === num}">
                 {{num}}
             </option>
             <option *ngIf="end < totalPages"
                 value="nextButtons"
-                class="k-link"
                 [selected]="false"
                 [attr.aria-label]="pageLabel(end + 1)">...
             </option>
         </select>
-        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
-            <li *ngIf="start > 1">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(start - 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(start - 2)">...</a>
-            </li>
-            <li *ngFor="let num of buttons">
-                <a  href="#"
-                    [attr.aria-label]="pageLabel(num)"
-                    tabindex="-1"
-                    [ngClass]="{'k-link': true, 'k-selected':currentPage === num}"
-                    (click)="changePage(num - 1)">
-                    {{num}}
-                </a>
-            </li>
-            <li *ngIf="end < totalPages">
-                <a  class="k-link"
-                    [attr.aria-label]="pageLabel(end + 1)"
-                    href="#"
-                    tabindex="-1"
-                    (click)="changePage(end)">...</a>
-            </li>
-        </ul>
+        <div class="k-pager-numbers">
+            <button *ngIf="start > 1"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(start - 1)"
+                [attr.title]="pageLabel(start - 1)"
+                (click)="changePage(start - 2)">...</button>
+            <button *ngFor="let num of buttons"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                fillMode="flat"
+                themeColor="primary"
+                class="k-pager-nav"
+                rounded="none"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.title]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [selected]="currentPage === num"
+                (click)="changePage(num - 1)">
+                {{num}}
+            </button>
+            <button *ngIf="end < totalPages"
+                type="button"
+                [tabIndex]="-1"
+                kendoButton
+                class="k-pager-nav"
+                fillMode="flat"
+                themeColor="primary"
+                rounded="none"
+                [attr.aria-label]="pageLabel(end + 1)"
+                [attr.title]="pageLabel(end + 1)"
+                (click)="changePage(end)">...</button>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
@@ -12559,54 +12606,54 @@ class PagerInputComponent extends PagerElementComponent {
 }
 PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerInputComponent, selector: "kendo-treelist-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
-        {{textFor('pagerPage')}}
-        <kendo-numerictextbox
-            [style.margin]="'0 1ex'"
-            [style.width]="'3em'"
-            [spinners]="false"
-            [decimals]="0"
-            format="n0"
-            [disabled]="!hasPages"
-            [value]="current"
-            [min]="hasPages ? 1 : 0"
-            [max]="totalPages"
-            [autoCorrect]="true"
-            [title]="textFor('pagerPageNumberInputTitle')"
-            [kendoEventsOutsideAngular]="{
-                keydown: handleKeyDown,
-                focusout: handleBlur
-            }">
-        </kendo-numerictextbox>
-            {{textFor('pagerOf')}} {{totalPages}}
-     </span>
-    `, isInline: true, components: [{ type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+        <span class="k-pager-input k-label">
+            {{textFor('pagerPage')}}
+            <kendo-numerictextbox
+                [style.margin]="'0 1ex'"
+                [style.width]="'3em'"
+                [spinners]="false"
+                [decimals]="0"
+                format="n0"
+                [disabled]="!hasPages"
+                [value]="current"
+                [min]="hasPages ? 1 : 0"
+                [max]="totalPages"
+                [autoCorrect]="true"
+                [title]="textFor('pagerPageNumberInputTitle')"
+                [kendoEventsOutsideAngular]="{
+                    keydown: handleKeyDown,
+                    focusout: handleBlur
+                }">
+            </kendo-numerictextbox>
+                {{textFor('pagerOf')}} {{totalPages}}
+        </span>
+    `, isInline: true, components: [{ type: i3$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-pager-input',
                     template: `
-     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
-        {{textFor('pagerPage')}}
-        <kendo-numerictextbox
-            [style.margin]="'0 1ex'"
-            [style.width]="'3em'"
-            [spinners]="false"
-            [decimals]="0"
-            format="n0"
-            [disabled]="!hasPages"
-            [value]="current"
-            [min]="hasPages ? 1 : 0"
-            [max]="totalPages"
-            [autoCorrect]="true"
-            [title]="textFor('pagerPageNumberInputTitle')"
-            [kendoEventsOutsideAngular]="{
-                keydown: handleKeyDown,
-                focusout: handleBlur
-            }">
-        </kendo-numerictextbox>
-            {{textFor('pagerOf')}} {{totalPages}}
-     </span>
+        <span class="k-pager-input k-label">
+            {{textFor('pagerPage')}}
+            <kendo-numerictextbox
+                [style.margin]="'0 1ex'"
+                [style.width]="'3em'"
+                [spinners]="false"
+                [decimals]="0"
+                format="n0"
+                [disabled]="!hasPages"
+                [value]="current"
+                [min]="hasPages ? 1 : 0"
+                [max]="totalPages"
+                [autoCorrect]="true"
+                [title]="textFor('pagerPageNumberInputTitle')"
+                [kendoEventsOutsideAngular]="{
+                    keydown: handleKeyDown,
+                    focusout: handleBlur
+                }">
+            </kendo-numerictextbox>
+                {{textFor('pagerOf')}} {{totalPages}}
+        </span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
@@ -12641,81 +12688,65 @@ class PagerNextButtonsComponent extends PagerElementComponent {
 }
 PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            kendoButton
+            type="button"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [tabIndex]="-1"
+            [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerNextPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-right': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
+            type="button"
+            [tabIndex]="-1"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-last': true
-            }">
-            <span [attr.aria-label]="textFor('pagerLastPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-right': true
-                }">
-            </span>
-        </a>
-    `, isInline: true, directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
+    `, isInline: true, components: [{ type: i3$3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-treelist-pager-next-buttons',
                     template: `
-        <a  href="#"
-            tabindex="-1"
+        <button
+            kendoButton
+            type="button"
+            icon="caret-alt-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav"
+            [tabIndex]="-1"
+            [disabled]="disabled"
             [title]="textFor('pagerNextPage')"
-            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                '': true
-            }">
-            <span [attr.aria-label]="textFor('pagerNextPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-right': true
-                }">
-            </span>
-        </a>
-        <a  href="#"
-            tabindex="-1"
+            [attr.aria-label]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false">
+        </button>
+        <button
+            kendoButton
+            type="button"
+            [tabIndex]="-1"
+            icon="caret-alt-to-right"
+            fillMode="flat"
+            rounded="none"
+            class="k-pager-nav k-pager-last"
+            [disabled]="disabled"
             [title]="textFor('pagerLastPage')"
-            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
-            [ngClass]="{
-                'k-link': true,
-                'k-pager-nav': true,
-                'k-disabled': disabled,
-                'k-pager-last': true
-            }">
-            <span [attr.aria-label]="textFor('pagerLastPage')"
-                [ngClass]="{
-                    'k-icon':true,
-                    'k-i-caret-alt-to-right': true
-                }">
-            </span>
-        </a>
+            [attr.aria-label]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false">
+        </button>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }]; } });
@@ -12866,6 +12897,7 @@ PagerPageSizesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerPageSizesComponent, selector: "kendo-treelist-pager-page-sizes", inputs: { pageSizes: "pageSizes" }, host: { properties: { "class.k-pager-sizes": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdownlist
+            class="k-dropdown"
             [data]="pageSizes"
             textField="text"
             valueField="value"
@@ -12882,6 +12914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     template: `
         <kendo-dropdownlist
             #dropdownlist
+            class="k-dropdown"
             [data]="pageSizes"
             textField="text"
             valueField="value"
@@ -12915,7 +12948,8 @@ class PagerComponent {
         this.pageChange = new EventEmitter();
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
-        this.widgetClass = true;
+        this.pagerClass = true;
+        this.pagerSizingClass = true;
         this.settings = normalize({});
         this.subscriptions = new Subscription();
         this._templateContext = {};
@@ -12926,12 +12960,12 @@ class PagerComponent {
             }
             const width = element.offsetWidth;
             if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                this.renderer.removeClass(element, 'k-pager-md');
-                this.renderer.addClass(element, 'k-pager-sm');
+                this.renderer.removeClass(element, 'k-pager-mobile-md');
+                this.renderer.addClass(element, 'k-pager-mobile-sm');
             }
             else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                this.renderer.addClass(element, 'k-pager-md');
-                this.renderer.removeClass(element, 'k-pager-sm');
+                this.renderer.addClass(element, 'k-pager-mobile-md');
+                this.renderer.removeClass(element, 'k-pager-mobile-sm');
             }
             else {
                 this.clearResponsiveClasses();
@@ -12989,12 +13023,12 @@ class PagerComponent {
     }
     clearResponsiveClasses() {
         const element = this.element.nativeElement;
-        this.renderer.removeClass(element, 'k-pager-sm');
-        this.renderer.removeClass(element, 'k-pager-md');
+        this.renderer.removeClass(element, 'k-pager-mobile-sm');
+        this.renderer.removeClass(element, 'k-pager-mobile-md');
     }
 }
 PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: PagerContextService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-widget": "this.widgetClass" } }, usesOnChanges: true, ngImport: i0, template: `
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-treelist-pager", inputs: { allCount: "allCount", total: "total", skip: "skip", pageSize: "pageSize", options: "options", template: "template" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class.k-pager-wrap": "this.pagerWrapClass", "class.k-grid-pager": "this.gridPagerClass", "class.k-pager": "this.pagerClass", "class.k-pager-md": "this.pagerSizingClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             *ngIf="template?.templateRef"
             [ngTemplateOutlet]="template.templateRef"
@@ -13057,9 +13091,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], gridPagerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-pager']
-            }], widgetClass: [{
+            }], pagerClass: [{
+                type: HostBinding,
+                args: ['class.k-pager']
+            }], pagerSizingClass: [{
                 type: HostBinding,
-                args: ['class.k-widget']
+                args: ['class.k-pager-md']
             }] } });
 
 /**
@@ -13068,7 +13105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{}]
@@ -13094,6 +13131,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], pagerItemsTotal: [{
                 type: Input
+            }], selectPage: [{
+                type: Input
             }], filter: [{
                 type: Input
             }], filterEqOperator: [{
@@ -15251,7 +15290,7 @@ class TreeListComponent {
     }
 }
 TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeListComponent, deps: [{ token: BrowserSupportService }, { token: i0.ElementRef }, { token: ChangeNotificationService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: ExpandStateService }, { token: OptionChangesService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: 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-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.ɵ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-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,
@@ -15442,140 +15481,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
-                            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"
@@ -15587,7 +15638,10 @@ 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: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { 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"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
@@ -15788,140 +15842,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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"
@@ -15933,7 +15999,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: BrowserSupportService }, { type: i0.ElementRef }, { type: ChangeNotificationService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }]; }, propDecorators: { ariaLabel: [{
@@ -16047,9 +16116,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: HostBinding,
                 args: ['attr.dir']
             }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-grid']
             }, {
@@ -16954,7 +17020,8 @@ const importedModules$3 = [
     InputsModule,
     DatePickerModule,
     PopupModule,
-    SharedModule
+    SharedModule,
+    ButtonModule
 ];
 const COMPONENTS$1 = [
     FilterInputDirective
@@ -16996,7 +17063,8 @@ SharedFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputsModule,
         DatePickerModule,
         PopupModule,
-        SharedModule], exports: [FilterCellOperatorsComponent,
+        SharedModule,
+        ButtonModule], exports: [FilterCellOperatorsComponent,
         ContainsFilterOperatorComponent,
         DoesNotContainFilterOperatorComponent,
         EndsWithFilterOperatorComponent,
@@ -17022,7 +17090,8 @@ SharedFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputsModule,
         DatePickerModule,
         PopupModule,
-        SharedModule, FilterInputDirective] });
+        SharedModule,
+        ButtonModule, FilterInputDirective] });
 SharedFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedFilterModule, imports: [[...importedModules$3], CommonModule,
         ReactiveFormsModule,
         FormsModule,
@@ -17031,7 +17100,8 @@ SharedFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         InputsModule,
         DatePickerModule,
         PopupModule,
-        SharedModule] });
+        SharedModule,
+        ButtonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedFilterModule, decorators: [{
             type: NgModule,
             args: [{
@@ -17113,6 +17183,7 @@ const importedModules$2 = [
     CommonModule,
     InputsModule,
     LabelModule,
+    ButtonModule,
     DropDownsModule,
     ResizeSensorModule,
     SharedModule,
@@ -17156,6 +17227,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerTemplateDirective], imports: [CommonModule,
         InputsModule,
         LabelModule,
+        ButtonModule,
         DropDownsModule,
         ResizeSensorModule,
         SharedModule,
@@ -17630,7 +17702,7 @@ BaseCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BaseCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -17702,7 +17774,7 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -17787,7 +17859,7 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -17871,7 +17943,7 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -17942,7 +18014,7 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -18023,7 +18095,7 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -19370,7 +19442,7 @@ const wrapTable = (table) => {
         return;
     }
     const wrapper = document.createElement('div');
-    wrapper.className = 'k-widget k-grid';
+    wrapper.className = 'k-grid';
     wrapper.appendChild(table);
     return wrapper;
 };
@@ -19718,7 +19790,7 @@ PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -20071,7 +20143,7 @@ ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3$4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExcelCommandDirective, decorators: [{
             type: Component,
             args: [{