@progress/kendo-angular-treelist 3.2.0 → 4.0.0-dev.202201191257

package/dist/fesm5/index.js

@@ -33,7 +33,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642163095,
+    publishDate: 1642596626,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -3672,7 +3672,7 @@ var FocusGroup = /** @class */ (function () {
  * ```ts-no-run
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```
@@ -6678,7 +6678,7 @@ var TreeListComponent = /** @class */ (function () {
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button" (click)="treelist.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -6744,10 +6744,10 @@ var TreeListComponent = /** @class */ (function () {
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button class="k-button" (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="treelist.autoFitColumns()">
+     *              <button kendoButton (click)="treelist.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -6931,7 +6931,7 @@ var TreeListComponent = /** @class */ (function () {
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>
@@ -9900,7 +9900,7 @@ var StringFilterCellComponent = /** @class */ (function (_super) {
     StringFilterCellComponent = __decorate([
         Component({
             selector: 'kendo-treelist-string-filter-cell',
-            template: "\n        <kendo-treelist-filter-wrapper-cell\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [showOperators]=\"showOperators\">\n            <input\n                class=\"k-textbox\"\n                kendoTreeListFocusable\n                kendoFilterInput\n                [filterDelay]=\"filterDelay\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-wrapper-cell>\n    "
+            template: "\n        <kendo-treelist-filter-wrapper-cell\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [showOperators]=\"showOperators\">\n            <input\n                kendoTextBox\n                kendoTreeListFocusable\n                kendoFilterInput\n                [filterDelay]=\"filterDelay\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-wrapper-cell>\n    "
         }),
         __metadata("design:paramtypes", [FilterService,
             LocalizationService])
@@ -10018,7 +10018,7 @@ var FilterCellOperatorsComponent = /** @class */ (function () {
     FilterCellOperatorsComponent = __decorate([
         Component({
             selector: 'kendo-treelist-filter-cell-operators',
-            template: "\n        <kendo-dropdownlist\n            #dropdown\n            *ngIf=\"showOperators\"\n            kendoTreeListFocusable\n            [data]=\"operators\"\n            class=\"k-dropdown-operator\"\n            (valueChange)=\"onChange($event)\"\n            [value]=\"value\"\n            iconClass=\"k-i-filter\"\n            [valuePrimitive]=\"true\"\n            textField=\"text\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            valueField=\"value\"\n            (keydown)=\"dropdownKeydown($event)\">\n        </kendo-dropdownlist>\n        <button type=\"button\"\n            kendoTreeListFocusable\n            [ngClass]=\"{'k-clear-button-visible': showButton}\"\n            class=\"k-button k-button-icon\"\n            [title]=\"clearText\"\n            (click)=\"clearClick()\"\n            (keydown)=\"clearKeydown($event)\">\n                <span class=\"k-icon k-i-filter-clear\"></span>\n        </button>\n    "
+            template: "\n        <kendo-dropdownlist\n            #dropdown\n            *ngIf=\"showOperators\"\n            kendoTreeListFocusable\n            [data]=\"operators\"\n            class=\"k-dropdown-operator\"\n            (valueChange)=\"onChange($event)\"\n            [value]=\"value\"\n            iconClass=\"k-i-filter\"\n            [valuePrimitive]=\"true\"\n            textField=\"text\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            valueField=\"value\"\n            (keydown)=\"dropdownKeydown($event)\">\n        </kendo-dropdownlist>\n        <button type=\"button\"\n            kendoTreeListFocusable\n            *ngIf=\"showButton\"\n            class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button\"\n            [title]=\"clearText\"\n            (click)=\"clearClick()\"\n            (keydown)=\"clearKeydown($event)\">\n                <span class=\"k-icon k-button-icon k-i-filter-clear\"></span>\n        </button>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], FilterCellOperatorsComponent);
@@ -10786,11 +10786,11 @@ var LogicalCellDirective = /** @class */ (function () {
                         return _this.isFocused() && el.focus();
                     });
                 }
-                this.renderer.addClass(el, 'k-state-focused');
+                this.renderer.addClass(el, 'k-focus');
             }
         }
         else {
-            this.renderer.removeClass(el, 'k-state-focused');
+            this.renderer.removeClass(el, 'k-focus');
         }
     };
     LogicalCellDirective.prototype.microtask = function (callback) {
@@ -12283,7 +12283,7 @@ var PagerPrevButtonsComponent = /** @class */ (function (_super) {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-treelist-pager-prev-buttons',
-            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerFirstPage')\"\n            (click)=\"currentPage !== 1 ? changePage(0) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                'k-pager-first': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerFirstPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-w': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerPreviousPage')\"\n            (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerPreviousPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-w': true\n                }\">\n            </span>\n        </a>\n    "
+            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerFirstPage')\"\n            (click)=\"currentPage !== 1 ? changePage(0) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                'k-pager-first': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerFirstPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-w': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerPreviousPage')\"\n            (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerPreviousPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-w': true\n                }\">\n            </span>\n        </a>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             PagerContextService,
@@ -12325,7 +12325,7 @@ var PagerNextButtonsComponent = /** @class */ (function (_super) {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-treelist-pager-next-buttons',
-            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerNextPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(currentPage) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerNextPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-e': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerLastPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(totalPages-1) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                'k-pager-last': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerLastPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-e': true\n                }\">\n            </span>\n        </a>\n    "
+            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerNextPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(currentPage) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerNextPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-e': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerLastPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(totalPages-1) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                'k-pager-last': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerLastPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-e': true\n                }\">\n            </span>\n        </a>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             PagerContextService,
@@ -12436,7 +12436,7 @@ var PagerNumericButtonsComponent = /** @class */ (function (_super) {
         Component({
             changeDetection: ChangeDetectionStrategy.OnPush,
             selector: 'kendo-treelist-pager-numeric-buttons',
-            template: "\n       <select\n            class=\"k-dropdown\"\n            [value]=\"(currentPage).toString()\"\n            (change)=\"onSelectChange($event)\">\n            <option *ngIf=\"start > 1\"\n                class=\"k-link\"\n                value=\"previousButtons\"\n                [attr.aria-label]=\"pageLabel(start - 1)\">...\n            </option>\n            <option *ngFor=\"let num of buttons\"\n                [value]=\"num.toString()\"\n                [attr.aria-label]=\"pageLabel(num)\"\n                [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n                [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\">\n                {{num}}\n            </option>\n            <option *ngIf=\"end < totalPages\"\n                value=\"nextButtons\"\n                class=\"k-link\"\n                [attr.aria-label]=\"pageLabel(end + 1)\">...\n            </option>\n        </select>\n        <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n            <li *ngIf=\"start > 1\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(start - 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(start - 2)\">...</a>\n            </li>\n            <li *ngFor=\"let num of buttons\">\n                <a  href=\"#\"\n                    [attr.aria-label]=\"pageLabel(num)\"\n                    tabindex=\"-1\"\n                    [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\"\n                    (click)=\"changePage(num - 1)\">\n                    {{num}}\n                </a>\n            </li>\n            <li *ngIf=\"end < totalPages\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(end + 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(end)\">...</a>\n            </li>\n        </ul>\n    "
+            template: "\n       <select\n            class=\"k-dropdown\"\n            [value]=\"(currentPage).toString()\"\n            (change)=\"onSelectChange($event)\">\n            <option *ngIf=\"start > 1\"\n                class=\"k-link\"\n                value=\"previousButtons\"\n                [attr.aria-label]=\"pageLabel(start - 1)\">...\n            </option>\n            <option *ngFor=\"let num of buttons\"\n                [value]=\"num.toString()\"\n                [attr.aria-label]=\"pageLabel(num)\"\n                [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n                [ngClass]=\"{'k-link': true, 'k-selected':currentPage == num}\">\n                {{num}}\n            </option>\n            <option *ngIf=\"end < totalPages\"\n                value=\"nextButtons\"\n                class=\"k-link\"\n                [attr.aria-label]=\"pageLabel(end + 1)\">...\n            </option>\n        </select>\n        <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n            <li *ngIf=\"start > 1\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(start - 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(start - 2)\">...</a>\n            </li>\n            <li *ngFor=\"let num of buttons\">\n                <a  href=\"#\"\n                    [attr.aria-label]=\"pageLabel(num)\"\n                    tabindex=\"-1\"\n                    [ngClass]=\"{'k-link': true, 'k-selected':currentPage == num}\"\n                    (click)=\"changePage(num - 1)\">\n                    {{num}}\n                </a>\n            </li>\n            <li *ngIf=\"end < totalPages\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(end + 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(end)\">...</a>\n            </li>\n        </ul>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             ChangeDetectorRef,
@@ -13360,7 +13360,7 @@ var HeaderComponent = /** @class */ (function () {
     HeaderComponent = __decorate([
         Component({
             selector: '[kendoTreeListHeader]',
-            template: "\n        <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"levelIndex\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n            <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n                <th *ngIf=\"!isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [colSpan]=\"column.colspan\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    role=\"columnheader\"\n                    aria-selected=\"false\"\n                    [attr.aria-sort]=\"sortState(column)\"\n                    (keydown)=\"onHeaderKeydown(column, $event)\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        field: column.field,\n                        type: 'column',\n                        column: column,\n                        hint: column.title || column.field,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                    <ng-template [ngIf]=\"!isSortable(column)\">\n                        <kendo-treelist-filter-menu\n                            *ngIf=\"showFilterMenu && isFilterable(column)\"\n                            [column]=\"column\"\n                            [filter]=\"filter\">\n                        </kendo-treelist-filter-menu>\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\"\n                            [sort]=\"sort\"\n                            [filter]=\"filter\"\n                            [sortable]=\"sortable\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: column.leafIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                    </ng-template>\n                    <ng-template [ngIf]=\"isSortable(column)\">\n                        <span class=\"k-cell-inner\">\n                            <a #link href=\"#\" tabindex=\"-1\" class=\"k-link\" (click)=\"sortColumn(column, $event, link)\">\n                                <ng-template\n                                    [templateContext]=\"{\n                                        templateRef: column.headerTemplateRef,\n                                        columnIndex: column.leafIndex,\n                                        column: column,\n                                        $implicit: column\n                                    }\">\n                                </ng-template>\n                                <ng-template [ngIf]=\"!column.headerTemplateRef\">\n                                    <span class=\"k-column-title\">{{column.displayTitle}}</span>\n                                </ng-template>\n                                <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n                                <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n                            </a>\n                            <span role=\"status\"\n                                class=\"k-sort-status\"\n                                style=\"position: absolute; left: -10000px;\"\n                                [innerHtml]=\"sortStatus(column)\">\n                            </span>\n                            <kendo-treelist-filter-menu\n                                *ngIf=\"showFilterMenu && isFilterable(column)\"\n                                [column]=\"column\"\n                                [filter]=\"filter\">\n                            </kendo-treelist-filter-menu>\n                            <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                                [standalone]=\"false\"\n                                [settings]=\"columnMenu\"\n                                [column]=\"column\"\n                                [columnMenuTemplate]=\"columnMenuTemplate\"\n                                [sort]=\"sort\"\n                                [filter]=\"filter\"\n                                [sortable]=\"sortable\">\n                            </kendo-treelist-column-menu>\n                        </span>\n                    </ng-template>\n                    <ng-container *ngIf=\"renderSelectAll(column)\">\n                        <input type=\"checkbox\" class=\"k-checkbox\" kendoTreeListFocusable\n                              (click)=\"selectAllClick($event)\" />\n                    </ng-container>\n                    <span kendoTreeListColumnHandle\n                        kendoDraggable\n                        class=\"k-column-resizer\"\n                        *ngIf=\"resizable\"\n                        [column]=\"column\"\n                        [columns]=\"columns\">\n                    </span>\n                </th>\n                <th *ngIf=\"isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    [colSpan]=\"column.colspan\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        type: 'columnGroup',\n                        column: column,\n                        hint: column.title,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-filterable]=\"showColumnMenu(column)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: lockedColumnsCount + columnIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                        <span kendoTreeListColumnHandle\n                            kendoDraggable\n                            class=\"k-column-resizer\"\n                            *ngIf=\"resizable\"\n                            [column]=\"column\"\n                            [columns]=\"columns\">\n                        </span>\n                </th>\n            </ng-template>\n        </tr>\n        <tr *ngIf=\"showFilterRow\"\n            kendoTreeListFilterRow\n            [columns]=\"leafColumns\"\n            [filter]=\"filter\"\n            [lockedColumnsCount]=\"lockedColumnsCount\"\n            kendoTreeListLogicalRow\n            [logicalRowIndex]=\"totalColumnLevels + 1\"\n            [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n            [logicalCellsCount]=\"columns.length\"\n            [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n        >\n        </tr>\n    "
+            template: "\n        <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"levelIndex\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n            <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n                <th *ngIf=\"!isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [colSpan]=\"column.colspan\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    role=\"columnheader\"\n                    aria-selected=\"false\"\n                    [attr.aria-sort]=\"sortState(column)\"\n                    (keydown)=\"onHeaderKeydown(column, $event)\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        field: column.field,\n                        type: 'column',\n                        column: column,\n                        hint: column.title || column.field,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                    <ng-template [ngIf]=\"!isSortable(column)\">\n                        <kendo-treelist-filter-menu\n                            *ngIf=\"showFilterMenu && isFilterable(column)\"\n                            [column]=\"column\"\n                            [filter]=\"filter\">\n                        </kendo-treelist-filter-menu>\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\"\n                            [sort]=\"sort\"\n                            [filter]=\"filter\"\n                            [sortable]=\"sortable\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: column.leafIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                    </ng-template>\n                    <ng-template [ngIf]=\"isSortable(column)\">\n                        <span class=\"k-cell-inner\">\n                            <a #link href=\"#\" tabindex=\"-1\" class=\"k-link\" (click)=\"sortColumn(column, $event, link)\">\n                                <ng-template\n                                    [templateContext]=\"{\n                                        templateRef: column.headerTemplateRef,\n                                        columnIndex: column.leafIndex,\n                                        column: column,\n                                        $implicit: column\n                                    }\">\n                                </ng-template>\n                                <ng-template [ngIf]=\"!column.headerTemplateRef\">\n                                    <span class=\"k-column-title\">{{column.displayTitle}}</span>\n                                </ng-template>\n                                <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n                                <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n                            </a>\n                            <span role=\"status\"\n                                class=\"k-sort-status\"\n                                style=\"position: absolute; left: -10000px;\"\n                                [innerHtml]=\"sortStatus(column)\">\n                            </span>\n                            <kendo-treelist-filter-menu\n                                *ngIf=\"showFilterMenu && isFilterable(column)\"\n                                [column]=\"column\"\n                                [filter]=\"filter\">\n                            </kendo-treelist-filter-menu>\n                            <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                                [standalone]=\"false\"\n                                [settings]=\"columnMenu\"\n                                [column]=\"column\"\n                                [columnMenuTemplate]=\"columnMenuTemplate\"\n                                [sort]=\"sort\"\n                                [filter]=\"filter\"\n                                [sortable]=\"sortable\">\n                            </kendo-treelist-column-menu>\n                        </span>\n                    </ng-template>\n                    <ng-container *ngIf=\"renderSelectAll(column)\">\n                        <input\n                            type=\"checkbox\"\n                            class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                            kendoTreeListFocusable\n                            (click)=\"selectAllClick($event)\" />\n                    </ng-container>\n                    <span kendoTreeListColumnHandle\n                        kendoDraggable\n                        class=\"k-column-resizer\"\n                        *ngIf=\"resizable\"\n                        [column]=\"column\"\n                        [columns]=\"columns\">\n                    </span>\n                </th>\n                <th *ngIf=\"isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    [colSpan]=\"column.colspan\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        type: 'columnGroup',\n                        column: column,\n                        hint: column.title,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-filterable]=\"showColumnMenu(column)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: lockedColumnsCount + columnIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                        <span kendoTreeListColumnHandle\n                            kendoDraggable\n                            class=\"k-column-resizer\"\n                            *ngIf=\"resizable\"\n                            [column]=\"column\"\n                            [columns]=\"columns\">\n                        </span>\n                </th>\n            </ng-template>\n        </tr>\n        <tr *ngIf=\"showFilterRow\"\n            kendoTreeListFilterRow\n            [columns]=\"leafColumns\"\n            [filter]=\"filter\"\n            [lockedColumnsCount]=\"lockedColumnsCount\"\n            kendoTreeListLogicalRow\n            [logicalRowIndex]=\"totalColumnLevels + 1\"\n            [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n            [logicalCellsCount]=\"columns.length\"\n            [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n        >\n        </tr>\n    "
         }),
         __metadata("design:paramtypes", [SinglePopupService,
             DragHintService,
@@ -13839,7 +13839,7 @@ var FilterMenuContainerComponent = /** @class */ (function () {
         Component({
             providers: [FilterService],
             selector: 'kendo-treelist-filter-menu-container',
-            template: "\n        <form (submit)=\"submit()\" (reset)=\"reset()\"\n            class=\"k-filter-menu k-group k-reset k-state-border-up\">\n            <div class=\"k-filter-menu-container\">\n                <ng-container [ngSwitch]=\"hasTemplate\">\n                    <ng-container *ngSwitchCase=\"false\">\n                        <ng-container\n                            kendoFilterMenuHost\n                            [filterService]=\"childService\"\n                            [column]=\"column\"\n                            [filter]=\"childFilter\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"true\">\n                        <ng-template\n                            *ngIf=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutlet]=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"templateContext\"\n                            >\n                        </ng-template>\n                    </ng-container>\n                </ng-container>\n                <div [ngClass]=\"actionsClass\">\n                    <button type=\"reset\" class=\"k-button\">{{clearText}}</button>\n                    <button type=\"submit\" class=\"k-button k-primary\" [disabled]=\"disabled\">{{filterText}}</button>\n                </div>\n            </div>\n        </form>\n    "
+            template: "\n        <form (submit)=\"submit()\" (reset)=\"reset()\"\n            class=\"k-filter-menu k-group k-reset k-state-border-up\">\n            <div class=\"k-filter-menu-container\">\n                <ng-container [ngSwitch]=\"hasTemplate\">\n                    <ng-container *ngSwitchCase=\"false\">\n                        <ng-container\n                            kendoFilterMenuHost\n                            [filterService]=\"childService\"\n                            [column]=\"column\"\n                            [filter]=\"childFilter\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"true\">\n                        <ng-template\n                            *ngIf=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutlet]=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"templateContext\"\n                            >\n                        </ng-template>\n                    </ng-container>\n                </ng-container>\n                <div [ngClass]=\"actionsClass\">\n                    <button\n                        type=\"reset\"\n                        class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle\">\n                        {{clearText}}\n                    </button>\n                    <button\n                        type=\"submit\"\n                        class=\"k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                        [disabled]=\"disabled\">\n                        {{filterText}}\n                    </button>\n                </div>\n            </div>\n        </form>\n    "
         }),
         __param(0, SkipSelf()),
         __metadata("design:paramtypes", [FilterService,
@@ -13958,7 +13958,7 @@ var StringFilterMenuInputComponent = /** @class */ (function () {
     StringFilterMenuInputComponent = __decorate([
         Component({
             selector: 'kendo-treelist-string-filter-menu-input',
-            template: "\n        <kendo-treelist-filter-menu-input-wrapper\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [currentFilter]=\"currentFilter\"\n            [filterService]=\"filterService\"\n            >\n            <input class=\"k-textbox\" kendoFilterInput [filterDelay]=\"0\" [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-menu-input-wrapper>\n    "
+            template: "\n        <kendo-treelist-filter-menu-input-wrapper\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [currentFilter]=\"currentFilter\"\n            [filterService]=\"filterService\"\n            >\n            <input\n                kendoTextBox\n                kendoFilterInput\n                [filterDelay]=\"0\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-menu-input-wrapper>\n    "
         })
     ], StringFilterMenuInputComponent);
     return StringFilterMenuInputComponent;
@@ -14390,7 +14390,7 @@ var BooleanFilterMenuComponent = /** @class */ (function (_super) {
     BooleanFilterMenuComponent = __decorate([
         Component({
             selector: 'kendo-treelist-boolean-filter-menu',
-            template: "\n        <ul class=\"k-radio-list k-reset\">\n            <li *ngFor=\"let item of items\">\n                <input type=\"radio\"\n                    [name]=\"idPrefix\"\n                    class=\"k-radio\"\n                    [checked]=\"isSelected(item.value)\"\n                    [attr.id]=\"radioId(item.value)\"\n                    (change)=\"onChange(item.value)\"\n                />\n                <label class=\"k-radio-label\" [attr.for]=\"radioId(item.value)\">{{item.text}}</label>\n            </li>\n        </ul>\n    "
+            template: "\n        <ul class=\"k-radio-list k-reset\">\n            <li *ngFor=\"let item of items\">\n                <input type=\"radio\"\n                    kendoRadioButton\n                    [name]=\"idPrefix\"\n                    [checked]=\"isSelected(item.value)\"\n                    [attr.id]=\"radioId(item.value)\"\n                    (change)=\"onChange(item.value)\"\n                />\n                <label class=\"k-radio-label\" [attr.for]=\"radioId(item.value)\">{{item.text}}</label>\n            </li>\n        </ul>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], BooleanFilterMenuComponent);
@@ -14585,9 +14585,9 @@ var preventOnDblClick$1 = function (release) { return function (mouseDown) {
     return of(mouseDown).pipe(delay(150), takeUntil(release));
 }; };
 var hasClass = function (className) { return function (el) { return new RegExp("(^| )" + className + "( |$)").test(el.className); }; };
-var isDeleteButton = or(hasClass("k-i-group-delete"), hasClass("k-button-icon"));
-var isSortIcon = or(hasClass("k-i-sort-asc-sm"), hasClass("k-i-sort-desc-sm"));
-var skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName("label")));
+var isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
+var isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+var skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 var elementUnderCursor = function (_a) {
     var clientX = _a.clientX, clientY = _a.clientY;
     return document.elementFromPoint(clientX, clientY);
@@ -14925,7 +14925,7 @@ var ColumnListComponent = /** @class */ (function () {
     ColumnListComponent = __decorate([
         Component({
             selector: 'kendo-treelist-columnlist',
-            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <input class=\"k-checkbox\" type=\"checkbox\" [attr.data-index]=\"index\" [checked]=\"!column.hidden\" [disabled]=\"isDisabled(column)\" /><span class=\"k-checkbox-label\">{{ column.displayTitle }}</span>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <button type=\"button\" class=\"k-button\" (click)=\"cancelChanges()\">{{ resetText }}</button>\n            <button type=\"button\" class=\"k-button k-primary\" (click)=\"applyChanges()\">{{ applyText }}</button>\n        </div>\n    "
+            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <input\n                    class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                    type=\"checkbox\"\n                    [attr.data-index]=\"index\"\n                    [checked]=\"!column.hidden\"\n                    [disabled]=\"isDisabled(column)\" />\n                <span class=\"k-checkbox-label\">{{ column.displayTitle }}</span>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <button\n                type=\"button\"\n                class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                (click)=\"cancelChanges()\">\n                {{ resetText }}\n            </button>\n            <button\n                type=\"button\"\n                class=\"k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                (click)=\"applyChanges()\">\n                {{ applyText }}\n            </button>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef, NgZone, Renderer2])
     ], ColumnListComponent);
@@ -15039,7 +15039,7 @@ var ColumnChooserComponent = /** @class */ (function () {
     ColumnChooserComponent = __decorate([
         Component({
             selector: 'kendo-treelist-column-chooser',
-            template: "\n        <button #anchor\n            type=\"button\"\n            (click)=\"toggle(anchor, template)\"\n            class=\"k-button k-bare k-button-icon\"\n            [attr.title]=\"localization.get('columns')\">\n            <span class=\"k-icon k-i-columns\"></span>\n        </button>\n        <ng-template #template>\n            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>\n            <kendo-treelist-columnlist\n                [columns]=\"columns\"\n                [applyText]=\"localization.get('columnsApply')\"\n                [resetText]=\"localization.get('columnsReset')\"\n                [autoSync]=\"autoSync\"\n                [allowHideAll]=\"allowHideAll\"\n                (apply)=\"onApply($event)\"\n                (columnChange)=\"onChange($event)\">\n            </kendo-treelist-columnlist>\n        </ng-template>\n    "
+            template: "\n        <button #anchor\n            type=\"button\"\n            (click)=\"toggle(anchor, template)\"\n            class=\"k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button\"\n            [attr.title]=\"localization.get('columns')\">\n            <span class=\"k-button-icon k-icon k-i-columns\"></span>\n        </button>\n        <ng-template #template>\n            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>\n            <kendo-treelist-columnlist\n                [columns]=\"columns\"\n                [applyText]=\"localization.get('columnsApply')\"\n                [resetText]=\"localization.get('columnsReset')\"\n                [autoSync]=\"autoSync\"\n                [allowHideAll]=\"allowHideAll\"\n                (apply)=\"onApply($event)\"\n                (columnChange)=\"onChange($event)\">\n            </kendo-treelist-columnlist>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             ColumnInfoService,
@@ -15400,7 +15400,7 @@ var ColumnMenuItemComponent = /** @class */ (function () {
                 ])
             ],
             selector: 'kendo-treelist-columnmenu-item',
-            template: "\n        <div class=\"k-columnmenu-item\" (click)=\"onClick($event)\" [class.k-state-selected]=\"selected\" [class.k-state-disabled]=\"disabled\">\n           <span *ngIf=\"icon\" class=\"k-icon\" [ngClass]=\"iconClass\">\n           </span>\n           {{ text }}\n        </div>\n        <div *ngIf=\"contentTemplate\" [@state]=\"contentState\" style=\"overflow:hidden;\" class=\"k-columnmenu-item-content\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\">\n            </ng-container>\n        <div>\n    "
+            template: "\n        <div class=\"k-columnmenu-item\" (click)=\"onClick($event)\" [class.k-selected]=\"selected\" [class.k-disabled]=\"disabled\">\n           <span *ngIf=\"icon\" class=\"k-icon\" [ngClass]=\"iconClass\">\n           </span>\n           {{ text }}\n        </div>\n        <div *ngIf=\"contentTemplate\" [@state]=\"contentState\" style=\"overflow:hidden;\" class=\"k-columnmenu-item-content\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\">\n            </ng-container>\n        <div>\n    "
         })
     ], ColumnMenuItemComponent);
     return ColumnMenuItemComponent;
@@ -16240,7 +16240,7 @@ var TableBodyComponent = /** @class */ (function () {
     TableBodyComponent = __decorate([
         Component({
             selector: '[kendoTreeListTableBody]',
-            template: "\n    <tr *ngIf=\"!view || view.data?.length === 0 || view.data == null\" class=\"k-grid-norecords\">\n        <td [attr.colspan]=\"colSpan\">\n            <ng-container *ngIf=\"noRecordsTemplate?.templateRef\" [ngTemplateOutlet]=\"noRecordsTemplate.templateRef\">\n            </ng-container>\n            <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n                {{noRecordsText}}\n            </ng-container>\n        </td>\n    </tr>\n    <ng-container *ngFor=\"let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;\">\n        <tr *ngIf=\"item.type === 'data'\"\n            kendoTreeListLogicalRow\n                [dataRowIndex]=\"item.index\"\n                [dataItem]=\"item.data\"\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n                [isNew]=\"item.isNew\"\n            [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n            [class.k-alt]=\"isOdd(item)\"\n            [class.k-grid-edit-row]=\"isEditingRow(item)\"\n            [class.k-grid-add-row]=\"item.isNew\"\n            [class.k-state-selected]=\"item.selected\"\n            [attr.data-treelist-view-index]=\"rowIndex\">\n\n            <td kendoTreeListCell\n                    [columnIndex]=\"lockedColumnsCount + columnIndex\"\n                    [column]=\"column\"\n                    [viewItem]=\"item\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [hasChildren]=\"item.hasChildren\"\n                    [isExpanded]=\"item.expanded\"\n                    [loading]=\"item.loading\"\n                    [isNew]=\"item.isNew\"\n                    [selected]=\"item.selected\"\n                    [expandIcons]=\"expandIcons\"\n                kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [dataRowIndex]=\"item.index\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                    [colSpan]=\"column.colspan\"\n                    [expandable]=\"column.expandable\"\n                    role=\"gridcell\"\n                    [attr.aria-expanded]=\"ariaExpanded(item, column)\"\n                    [attr.aria-selected]=\"ariaSelected(item, column, lockedColumnsCount + columnIndex)\"\n                [ngClass]=\"column.cssClass\"\n                [class.k-grid-edit-cell]=\"isEditingCell(item, column)\"\n                [class.k-state-selected]=\"isCellSelected(item.data, column, lockedColumnsCount + columnIndex)\"\n                [ngStyle]=\"column.style\"\n                [attr.colspan]=\"column.colspan\"\n                *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n            </td>\n        </tr>\n        <tr *ngIf=\"item.type === 'footer' && hasFooter\"\n            class=\"k-footer\"\n            [attr.data-treelist-view-index]=\"rowIndex\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n\n            <td kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                [ngClass]=\"column.footerClass\"\n                [ngStyle]=\"column.footerStyle\"\n                *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of item.level | levelItems\"></span>\n                </ng-container>\n                <ng-container [ngTemplateOutlet]=\"column.footerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: item.aggregates,\n                        aggregates: item.aggregates,\n                        column: column,\n                        columnIndex: columnIndex,\n                        field: column.field,\n                        items: item.items,\n                        parentItem: item.parentItem\n                    }\">\n                </ng-container>\n           </td>\n        </tr>\n    </ng-container>\n    "
+            template: "\n    <tr *ngIf=\"!view || view.data?.length === 0 || view.data == null\" class=\"k-grid-norecords\">\n        <td [attr.colspan]=\"colSpan\">\n            <ng-container *ngIf=\"noRecordsTemplate?.templateRef\" [ngTemplateOutlet]=\"noRecordsTemplate.templateRef\">\n            </ng-container>\n            <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n                {{noRecordsText}}\n            </ng-container>\n        </td>\n    </tr>\n    <ng-container *ngFor=\"let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;\">\n        <tr *ngIf=\"item.type === 'data'\"\n            kendoTreeListLogicalRow\n                [dataRowIndex]=\"item.index\"\n                [dataItem]=\"item.data\"\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n                [isNew]=\"item.isNew\"\n            [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n            [class.k-alt]=\"isOdd(item)\"\n            [class.k-grid-edit-row]=\"isEditingRow(item)\"\n            [class.k-grid-add-row]=\"item.isNew\"\n            [class.k-selected]=\"item.selected\"\n            [attr.data-treelist-view-index]=\"rowIndex\">\n\n            <td kendoTreeListCell\n                    [columnIndex]=\"lockedColumnsCount + columnIndex\"\n                    [column]=\"column\"\n                    [viewItem]=\"item\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [hasChildren]=\"item.hasChildren\"\n                    [isExpanded]=\"item.expanded\"\n                    [loading]=\"item.loading\"\n                    [isNew]=\"item.isNew\"\n                    [selected]=\"item.selected\"\n                    [expandIcons]=\"expandIcons\"\n                kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [dataRowIndex]=\"item.index\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                    [colSpan]=\"column.colspan\"\n                    [expandable]=\"column.expandable\"\n                    role=\"gridcell\"\n                    [attr.aria-expanded]=\"ariaExpanded(item, column)\"\n                    [attr.aria-selected]=\"ariaSelected(item, column, lockedColumnsCount + columnIndex)\"\n                [ngClass]=\"column.cssClass\"\n                [class.k-grid-edit-cell]=\"isEditingCell(item, column)\"\n                [class.k-selected]=\"isCellSelected(item.data, column, lockedColumnsCount + columnIndex)\"\n                [ngStyle]=\"column.style\"\n                [attr.colspan]=\"column.colspan\"\n                *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n            </td>\n        </tr>\n        <tr *ngIf=\"item.type === 'footer' && hasFooter\"\n            class=\"k-footer\"\n            [attr.data-treelist-view-index]=\"rowIndex\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n\n            <td kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                [ngClass]=\"column.footerClass\"\n                [ngStyle]=\"column.footerStyle\"\n                *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of item.level | levelItems\"></span>\n                </ng-container>\n                <ng-container [ngTemplateOutlet]=\"column.footerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: item.aggregates,\n                        aggregates: item.aggregates,\n                        column: column,\n                        columnIndex: columnIndex,\n                        field: column.field,\n                        items: item.items,\n                        parentItem: item.parentItem\n                    }\">\n                </ng-container>\n           </td>\n        </tr>\n    </ng-container>\n    "
         }),
         __metadata("design:paramtypes", [ChangeNotificationService,
             EditService,
@@ -16458,7 +16458,7 @@ var CellComponent = /** @class */ (function () {
     CellComponent = __decorate([
         Component({
             selector: '[kendoTreeListCell]',
-            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of level | levelItems : hasChildren && expandIcons\"></span>\n                    <span class=\"k-icon\" *ngIf=\"hasChildren && expandIcons\"\n                        [ngClass]=\"{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }\">\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"column.templateRef\"\n                    [ngTemplateOutlet]=\"column.templateRef\"\n                    [ngTemplateOutletContext]=\"templateContext\">\n                </ng-container>\n                <ng-container *ngIf=\"isSpanColumn\">\n                    <ng-container *ngFor=\"let childColumn of childColumns\">\n                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-container>\n                <ng-template [ngIf]=\"column.isCheckboxColumn && !isNew\">\n                    <input type=\"checkbox\" kendoTreeListFocusable class=\"k-checkbox\" [checked]=\"selected\" />\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-container\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-container>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
+            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of level | levelItems : hasChildren && expandIcons\"></span>\n                    <span class=\"k-icon\" *ngIf=\"hasChildren && expandIcons\"\n                        [ngClass]=\"{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }\">\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"column.templateRef\"\n                    [ngTemplateOutlet]=\"column.templateRef\"\n                    [ngTemplateOutletContext]=\"templateContext\">\n                </ng-container>\n                <ng-container *ngIf=\"isSpanColumn\">\n                    <ng-container *ngFor=\"let childColumn of childColumns\">\n                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-container>\n                <ng-template [ngIf]=\"column.isCheckboxColumn && !isNew\">\n                    <input\n                        type=\"checkbox\"\n                        kendoTreeListFocusable\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [checked]=\"selected\" />\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-container\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-container>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox k-input k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
         }),
         __metadata("design:paramtypes", [EditService,
             FocusGroup])

package/dist/npm/column-menu/column-chooser.component.js

@@ -117,7 +117,7 @@ var ColumnChooserComponent = /** @class */ (function () {
     ColumnChooserComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-treelist-column-chooser',
-            template: "\n        <button #anchor\n            type=\"button\"\n            (click)=\"toggle(anchor, template)\"\n            class=\"k-button k-bare k-button-icon\"\n            [attr.title]=\"localization.get('columns')\">\n            <span class=\"k-icon k-i-columns\"></span>\n        </button>\n        <ng-template #template>\n            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>\n            <kendo-treelist-columnlist\n                [columns]=\"columns\"\n                [applyText]=\"localization.get('columnsApply')\"\n                [resetText]=\"localization.get('columnsReset')\"\n                [autoSync]=\"autoSync\"\n                [allowHideAll]=\"allowHideAll\"\n                (apply)=\"onApply($event)\"\n                (columnChange)=\"onChange($event)\">\n            </kendo-treelist-columnlist>\n        </ng-template>\n    "
+            template: "\n        <button #anchor\n            type=\"button\"\n            (click)=\"toggle(anchor, template)\"\n            class=\"k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button\"\n            [attr.title]=\"localization.get('columns')\">\n            <span class=\"k-button-icon k-icon k-i-columns\"></span>\n        </button>\n        <ng-template #template>\n            <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>\n            <kendo-treelist-columnlist\n                [columns]=\"columns\"\n                [applyText]=\"localization.get('columnsApply')\"\n                [resetText]=\"localization.get('columnsReset')\"\n                [autoSync]=\"autoSync\"\n                [allowHideAll]=\"allowHideAll\"\n                (apply)=\"onApply($event)\"\n                (columnChange)=\"onChange($event)\">\n            </kendo-treelist-columnlist>\n        </ng-template>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             column_info_service_1.ColumnInfoService,

package/dist/npm/column-menu/column-list.component.js

@@ -187,7 +187,7 @@ var ColumnListComponent = /** @class */ (function () {
     ColumnListComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-treelist-columnlist',
-            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <input class=\"k-checkbox\" type=\"checkbox\" [attr.data-index]=\"index\" [checked]=\"!column.hidden\" [disabled]=\"isDisabled(column)\" /><span class=\"k-checkbox-label\">{{ column.displayTitle }}</span>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <button type=\"button\" class=\"k-button\" (click)=\"cancelChanges()\">{{ resetText }}</button>\n            <button type=\"button\" class=\"k-button k-primary\" (click)=\"applyChanges()\">{{ applyText }}</button>\n        </div>\n    "
+            template: "\n        <div class=\"k-column-list\">\n            <label *ngFor=\"let column of columns; let index = index;\" class='k-column-list-item'>\n                <input\n                    class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                    type=\"checkbox\"\n                    [attr.data-index]=\"index\"\n                    [checked]=\"!column.hidden\"\n                    [disabled]=\"isDisabled(column)\" />\n                <span class=\"k-checkbox-label\">{{ column.displayTitle }}</span>\n            </label>\n        </div>\n        <div [ngClass]=\"actionsClass\" *ngIf=\"!autoSync\">\n            <button\n                type=\"button\"\n                class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                (click)=\"cancelChanges()\">\n                {{ resetText }}\n            </button>\n            <button\n                type=\"button\"\n                class=\"k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                (click)=\"applyChanges()\">\n                {{ applyText }}\n            </button>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone, core_1.Renderer2])
     ], ColumnListComponent);

package/dist/npm/column-menu/column-menu-item.component.js

@@ -128,7 +128,7 @@ var ColumnMenuItemComponent = /** @class */ (function () {
                 ])
             ],
             selector: 'kendo-treelist-columnmenu-item',
-            template: "\n        <div class=\"k-columnmenu-item\" (click)=\"onClick($event)\" [class.k-state-selected]=\"selected\" [class.k-state-disabled]=\"disabled\">\n           <span *ngIf=\"icon\" class=\"k-icon\" [ngClass]=\"iconClass\">\n           </span>\n           {{ text }}\n        </div>\n        <div *ngIf=\"contentTemplate\" [@state]=\"contentState\" style=\"overflow:hidden;\" class=\"k-columnmenu-item-content\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\">\n            </ng-container>\n        <div>\n    "
+            template: "\n        <div class=\"k-columnmenu-item\" (click)=\"onClick($event)\" [class.k-selected]=\"selected\" [class.k-disabled]=\"disabled\">\n           <span *ngIf=\"icon\" class=\"k-icon\" [ngClass]=\"iconClass\">\n           </span>\n           {{ text }}\n        </div>\n        <div *ngIf=\"contentTemplate\" [@state]=\"contentState\" style=\"overflow:hidden;\" class=\"k-columnmenu-item-content\">\n            <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\">\n            </ng-container>\n        <div>\n    "
         })
     ], ColumnMenuItemComponent);
     return ColumnMenuItemComponent;

package/dist/npm/dragdrop/draggable-column.directive.js

@@ -28,9 +28,9 @@ exports.ɵ0 = ɵ0;
 var hasClass = function (className) { return function (el) { return new RegExp("(^| )" + className + "( |$)").test(el.className); }; };
 var ɵ1 = hasClass;
 exports.ɵ1 = ɵ1;
-var isDeleteButton = utils_1.or(hasClass("k-i-group-delete"), hasClass("k-button-icon"));
-var isSortIcon = utils_1.or(hasClass("k-i-sort-asc-sm"), hasClass("k-i-sort-desc-sm"));
-var skipButtons = utils_1.and(utils_1.not(isDeleteButton), utils_1.not(isSortIcon), utils_1.not(dom_queries_1.isFocusableWithTabKey), utils_1.not(dom_queries_1.matchesNodeName("label")));
+var isDeleteButton = utils_1.or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
+var isSortIcon = utils_1.or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+var skipButtons = utils_1.and(utils_1.not(isDeleteButton), utils_1.not(isSortIcon), utils_1.not(dom_queries_1.isFocusableWithTabKey), utils_1.not(dom_queries_1.matchesNodeName('label')));
 var elementUnderCursor = function (_a) {
     var clientX = _a.clientX, clientY = _a.clientY;
     return document.elementFromPoint(clientX, clientY);

package/dist/npm/filtering/cell/filter-cell-operators.component.js

@@ -119,7 +119,7 @@ var FilterCellOperatorsComponent = /** @class */ (function () {
     FilterCellOperatorsComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-treelist-filter-cell-operators',
-            template: "\n        <kendo-dropdownlist\n            #dropdown\n            *ngIf=\"showOperators\"\n            kendoTreeListFocusable\n            [data]=\"operators\"\n            class=\"k-dropdown-operator\"\n            (valueChange)=\"onChange($event)\"\n            [value]=\"value\"\n            iconClass=\"k-i-filter\"\n            [valuePrimitive]=\"true\"\n            textField=\"text\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            valueField=\"value\"\n            (keydown)=\"dropdownKeydown($event)\">\n        </kendo-dropdownlist>\n        <button type=\"button\"\n            kendoTreeListFocusable\n            [ngClass]=\"{'k-clear-button-visible': showButton}\"\n            class=\"k-button k-button-icon\"\n            [title]=\"clearText\"\n            (click)=\"clearClick()\"\n            (keydown)=\"clearKeydown($event)\">\n                <span class=\"k-icon k-i-filter-clear\"></span>\n        </button>\n    "
+            template: "\n        <kendo-dropdownlist\n            #dropdown\n            *ngIf=\"showOperators\"\n            kendoTreeListFocusable\n            [data]=\"operators\"\n            class=\"k-dropdown-operator\"\n            (valueChange)=\"onChange($event)\"\n            [value]=\"value\"\n            iconClass=\"k-i-filter\"\n            [valuePrimitive]=\"true\"\n            textField=\"text\"\n            [popupSettings]=\"{ width: 'auto' }\"\n            valueField=\"value\"\n            (keydown)=\"dropdownKeydown($event)\">\n        </kendo-dropdownlist>\n        <button type=\"button\"\n            kendoTreeListFocusable\n            *ngIf=\"showButton\"\n            class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button\"\n            [title]=\"clearText\"\n            (click)=\"clearClick()\"\n            (keydown)=\"clearKeydown($event)\">\n                <span class=\"k-icon k-button-icon k-i-filter-clear\"></span>\n        </button>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], FilterCellOperatorsComponent);

package/dist/npm/filtering/cell/string-filter-cell.component.js

@@ -56,7 +56,7 @@ var StringFilterCellComponent = /** @class */ (function (_super) {
     StringFilterCellComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-treelist-string-filter-cell',
-            template: "\n        <kendo-treelist-filter-wrapper-cell\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [showOperators]=\"showOperators\">\n            <input\n                class=\"k-textbox\"\n                kendoTreeListFocusable\n                kendoFilterInput\n                [filterDelay]=\"filterDelay\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-wrapper-cell>\n    "
+            template: "\n        <kendo-treelist-filter-wrapper-cell\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [showOperators]=\"showOperators\">\n            <input\n                kendoTextBox\n                kendoTreeListFocusable\n                kendoFilterInput\n                [filterDelay]=\"filterDelay\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-wrapper-cell>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [filter_service_1.FilterService,
             kendo_angular_l10n_1.LocalizationService])

package/dist/npm/filtering/menu/boolean-filter-menu.component.js

@@ -90,7 +90,7 @@ var BooleanFilterMenuComponent = /** @class */ (function (_super) {
     BooleanFilterMenuComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-treelist-boolean-filter-menu',
-            template: "\n        <ul class=\"k-radio-list k-reset\">\n            <li *ngFor=\"let item of items\">\n                <input type=\"radio\"\n                    [name]=\"idPrefix\"\n                    class=\"k-radio\"\n                    [checked]=\"isSelected(item.value)\"\n                    [attr.id]=\"radioId(item.value)\"\n                    (change)=\"onChange(item.value)\"\n                />\n                <label class=\"k-radio-label\" [attr.for]=\"radioId(item.value)\">{{item.text}}</label>\n            </li>\n        </ul>\n    "
+            template: "\n        <ul class=\"k-radio-list k-reset\">\n            <li *ngFor=\"let item of items\">\n                <input type=\"radio\"\n                    kendoRadioButton\n                    [name]=\"idPrefix\"\n                    [checked]=\"isSelected(item.value)\"\n                    [attr.id]=\"radioId(item.value)\"\n                    (change)=\"onChange(item.value)\"\n                />\n                <label class=\"k-radio-label\" [attr.for]=\"radioId(item.value)\">{{item.text}}</label>\n            </li>\n        </ul>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], BooleanFilterMenuComponent);

package/dist/npm/filtering/menu/filter-menu-container.component.js

@@ -190,7 +190,7 @@ var FilterMenuContainerComponent = /** @class */ (function () {
         core_1.Component({
             providers: [filter_service_1.FilterService],
             selector: 'kendo-treelist-filter-menu-container',
-            template: "\n        <form (submit)=\"submit()\" (reset)=\"reset()\"\n            class=\"k-filter-menu k-group k-reset k-state-border-up\">\n            <div class=\"k-filter-menu-container\">\n                <ng-container [ngSwitch]=\"hasTemplate\">\n                    <ng-container *ngSwitchCase=\"false\">\n                        <ng-container\n                            kendoFilterMenuHost\n                            [filterService]=\"childService\"\n                            [column]=\"column\"\n                            [filter]=\"childFilter\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"true\">\n                        <ng-template\n                            *ngIf=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutlet]=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"templateContext\"\n                            >\n                        </ng-template>\n                    </ng-container>\n                </ng-container>\n                <div [ngClass]=\"actionsClass\">\n                    <button type=\"reset\" class=\"k-button\">{{clearText}}</button>\n                    <button type=\"submit\" class=\"k-button k-primary\" [disabled]=\"disabled\">{{filterText}}</button>\n                </div>\n            </div>\n        </form>\n    "
+            template: "\n        <form (submit)=\"submit()\" (reset)=\"reset()\"\n            class=\"k-filter-menu k-group k-reset k-state-border-up\">\n            <div class=\"k-filter-menu-container\">\n                <ng-container [ngSwitch]=\"hasTemplate\">\n                    <ng-container *ngSwitchCase=\"false\">\n                        <ng-container\n                            kendoFilterMenuHost\n                            [filterService]=\"childService\"\n                            [column]=\"column\"\n                            [filter]=\"childFilter\">\n                        </ng-container>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"true\">\n                        <ng-template\n                            *ngIf=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutlet]=\"column.filterMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"templateContext\"\n                            >\n                        </ng-template>\n                    </ng-container>\n                </ng-container>\n                <div [ngClass]=\"actionsClass\">\n                    <button\n                        type=\"reset\"\n                        class=\"k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle\">\n                        {{clearText}}\n                    </button>\n                    <button\n                        type=\"submit\"\n                        class=\"k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle\"\n                        [disabled]=\"disabled\">\n                        {{filterText}}\n                    </button>\n                </div>\n            </div>\n        </form>\n    "
         }),
         tslib_1.__param(0, core_1.SkipSelf()),
         tslib_1.__metadata("design:paramtypes", [filter_service_1.FilterService,

package/dist/npm/filtering/menu/string-filter-menu-input.component.js

@@ -42,7 +42,7 @@ var StringFilterMenuInputComponent = /** @class */ (function () {
     StringFilterMenuInputComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-treelist-string-filter-menu-input',
-            template: "\n        <kendo-treelist-filter-menu-input-wrapper\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [currentFilter]=\"currentFilter\"\n            [filterService]=\"filterService\"\n            >\n            <input class=\"k-textbox\" kendoFilterInput [filterDelay]=\"0\" [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-menu-input-wrapper>\n    "
+            template: "\n        <kendo-treelist-filter-menu-input-wrapper\n            [column]=\"column\"\n            [filter]=\"filter\"\n            [operators]=\"operators\"\n            [defaultOperator]=\"operator\"\n            [currentFilter]=\"currentFilter\"\n            [filterService]=\"filterService\"\n            >\n            <input\n                kendoTextBox\n                kendoFilterInput\n                [filterDelay]=\"0\"\n                [ngModel]=\"currentFilter?.value\" />\n        </kendo-treelist-filter-menu-input-wrapper>\n    "
         })
     ], StringFilterMenuInputComponent);
     return StringFilterMenuInputComponent;

package/dist/npm/navigation/focusable.directive.js

@@ -17,7 +17,7 @@ var focus_group_1 = require("./focus-group");
  * ```ts-no-run
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```

package/dist/npm/navigation/logical-cell.directive.js

@@ -108,11 +108,11 @@ var LogicalCellDirective = /** @class */ (function () {
                         return _this.isFocused() && el.focus();
                     });
                 }
-                this.renderer.addClass(el, 'k-state-focused');
+                this.renderer.addClass(el, 'k-focus');
             }
         }
         else {
-            this.renderer.removeClass(el, 'k-state-focused');
+            this.renderer.removeClass(el, 'k-focus');
         }
     };
     LogicalCellDirective.prototype.microtask = function (callback) {

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642163095,
+    publishDate: 1642596626,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/pager/pager-next-buttons.component.js

@@ -43,7 +43,7 @@ var PagerNextButtonsComponent = /** @class */ (function (_super) {
         core_1.Component({
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
             selector: 'kendo-treelist-pager-next-buttons',
-            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerNextPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(currentPage) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerNextPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-e': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerLastPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(totalPages-1) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                'k-pager-last': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerLastPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-e': true\n                }\">\n            </span>\n        </a>\n    "
+            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerNextPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(currentPage) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerNextPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-e': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerLastPage')\"\n            (click)=\"currentPage !== totalPages ? changePage(totalPages-1) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                'k-pager-last': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerLastPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-e': true\n                }\">\n            </span>\n        </a>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             pager_context_service_1.PagerContextService,

package/dist/npm/pager/pager-numeric-buttons.component.js

@@ -111,7 +111,7 @@ var PagerNumericButtonsComponent = /** @class */ (function (_super) {
         core_1.Component({
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
             selector: 'kendo-treelist-pager-numeric-buttons',
-            template: "\n       <select\n            class=\"k-dropdown\"\n            [value]=\"(currentPage).toString()\"\n            (change)=\"onSelectChange($event)\">\n            <option *ngIf=\"start > 1\"\n                class=\"k-link\"\n                value=\"previousButtons\"\n                [attr.aria-label]=\"pageLabel(start - 1)\">...\n            </option>\n            <option *ngFor=\"let num of buttons\"\n                [value]=\"num.toString()\"\n                [attr.aria-label]=\"pageLabel(num)\"\n                [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n                [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\">\n                {{num}}\n            </option>\n            <option *ngIf=\"end < totalPages\"\n                value=\"nextButtons\"\n                class=\"k-link\"\n                [attr.aria-label]=\"pageLabel(end + 1)\">...\n            </option>\n        </select>\n        <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n            <li *ngIf=\"start > 1\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(start - 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(start - 2)\">...</a>\n            </li>\n            <li *ngFor=\"let num of buttons\">\n                <a  href=\"#\"\n                    [attr.aria-label]=\"pageLabel(num)\"\n                    tabindex=\"-1\"\n                    [ngClass]=\"{'k-link': true, 'k-state-selected':currentPage == num}\"\n                    (click)=\"changePage(num - 1)\">\n                    {{num}}\n                </a>\n            </li>\n            <li *ngIf=\"end < totalPages\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(end + 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(end)\">...</a>\n            </li>\n        </ul>\n    "
+            template: "\n       <select\n            class=\"k-dropdown\"\n            [value]=\"(currentPage).toString()\"\n            (change)=\"onSelectChange($event)\">\n            <option *ngIf=\"start > 1\"\n                class=\"k-link\"\n                value=\"previousButtons\"\n                [attr.aria-label]=\"pageLabel(start - 1)\">...\n            </option>\n            <option *ngFor=\"let num of buttons\"\n                [value]=\"num.toString()\"\n                [attr.aria-label]=\"pageLabel(num)\"\n                [attr.aria-current]=\"currentPage == num ? 'page' : undefined\"\n                [ngClass]=\"{'k-link': true, 'k-selected':currentPage == num}\">\n                {{num}}\n            </option>\n            <option *ngIf=\"end < totalPages\"\n                value=\"nextButtons\"\n                class=\"k-link\"\n                [attr.aria-label]=\"pageLabel(end + 1)\">...\n            </option>\n        </select>\n        <ul [ngClass]=\"{'k-pager-numbers': true, 'k-reset': true}\">\n            <li *ngIf=\"start > 1\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(start - 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(start - 2)\">...</a>\n            </li>\n            <li *ngFor=\"let num of buttons\">\n                <a  href=\"#\"\n                    [attr.aria-label]=\"pageLabel(num)\"\n                    tabindex=\"-1\"\n                    [ngClass]=\"{'k-link': true, 'k-selected':currentPage == num}\"\n                    (click)=\"changePage(num - 1)\">\n                    {{num}}\n                </a>\n            </li>\n            <li *ngIf=\"end < totalPages\">\n                <a  class=\"k-link\"\n                    [attr.aria-label]=\"pageLabel(end + 1)\"\n                    href=\"#\"\n                    tabindex=\"-1\"\n                    (click)=\"changePage(end)\">...</a>\n            </li>\n        </ul>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.ChangeDetectorRef,

package/dist/npm/pager/pager-prev-buttons.component.js

@@ -43,7 +43,7 @@ var PagerPrevButtonsComponent = /** @class */ (function (_super) {
         core_1.Component({
             changeDetection: core_1.ChangeDetectionStrategy.OnPush,
             selector: 'kendo-treelist-pager-prev-buttons',
-            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerFirstPage')\"\n            (click)=\"currentPage !== 1 ? changePage(0) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                'k-pager-first': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerFirstPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-w': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerPreviousPage')\"\n            (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-state-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerPreviousPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-w': true\n                }\">\n            </span>\n        </a>\n    "
+            template: "\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerFirstPage')\"\n            (click)=\"currentPage !== 1 ? changePage(0) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                'k-pager-first': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerFirstPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-seek-w': true\n                }\">\n            </span>\n        </a>\n        <a  href=\"#\"\n            tabindex=\"-1\"\n            [title]=\"textFor('pagerPreviousPage')\"\n            (click)=\"currentPage !== 1 ? changePage(currentPage-2) : false\"\n            [ngClass]=\"{\n                'k-link': true,\n                'k-pager-nav': true,\n                'k-disabled': disabled,\n                '': true\n            }\">\n            <span [attr.aria-label]=\"textFor('pagerPreviousPage')\"\n                [ngClass]=\"{\n                    'k-icon':true,\n                    'k-i-arrow-w': true\n                }\">\n            </span>\n        </a>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             pager_context_service_1.PagerContextService,

package/dist/npm/rendering/cell.component.js

@@ -213,7 +213,7 @@ var CellComponent = /** @class */ (function () {
     CellComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoTreeListCell]',
-            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of level | levelItems : hasChildren && expandIcons\"></span>\n                    <span class=\"k-icon\" *ngIf=\"hasChildren && expandIcons\"\n                        [ngClass]=\"{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }\">\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"column.templateRef\"\n                    [ngTemplateOutlet]=\"column.templateRef\"\n                    [ngTemplateOutletContext]=\"templateContext\">\n                </ng-container>\n                <ng-container *ngIf=\"isSpanColumn\">\n                    <ng-container *ngFor=\"let childColumn of childColumns\">\n                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-container>\n                <ng-template [ngIf]=\"column.isCheckboxColumn && !isNew\">\n                    <input type=\"checkbox\" kendoTreeListFocusable class=\"k-checkbox\" [checked]=\"selected\" />\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-container\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-container>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
+            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of level | levelItems : hasChildren && expandIcons\"></span>\n                    <span class=\"k-icon\" *ngIf=\"hasChildren && expandIcons\"\n                        [ngClass]=\"{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }\">\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"column.templateRef\"\n                    [ngTemplateOutlet]=\"column.templateRef\"\n                    [ngTemplateOutletContext]=\"templateContext\">\n                </ng-container>\n                <ng-container *ngIf=\"isSpanColumn\">\n                    <ng-container *ngFor=\"let childColumn of childColumns\">\n                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-container>\n                <ng-template [ngIf]=\"column.isCheckboxColumn && !isNew\">\n                    <input\n                        type=\"checkbox\"\n                        kendoTreeListFocusable\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [checked]=\"selected\" />\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-container\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-container>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox k-input k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [edit_service_1.EditService,
             focus_group_1.FocusGroup])