@progress/kendo-angular-treelist 17.0.0-develop.37 → 17.0.0-develop.38

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

@@ -29,7 +29,7 @@ import * as i47 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService, PagerTemplateDirective, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { getter, setter } from '@progress/kendo-common';
 import * as i13 from '@progress/kendo-angular-inputs';
-import { NumericTextBoxComponent, TextBoxDirective, RadioButtonDirective, KENDO_NUMERICTEXTBOX, InputsModule } from '@progress/kendo-angular-inputs';
+import { NumericTextBoxComponent, CheckBoxComponent, TextBoxComponent, RadioButtonComponent, KENDO_NUMERICTEXTBOX, InputsModule } from '@progress/kendo-angular-inputs';
 import * as i1$3 from '@progress/kendo-angular-intl';
 import { DropDownListComponent, AutoCompleteComponent, DropDownListModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
 import { ButtonComponent, Button, ButtonModule } from '@progress/kendo-angular-buttons';
@@ -47,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730722845,
-    version: '17.0.0-develop.37',
+    publishDate: 1730732293,
+    version: '17.0.0-develop.38',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3395,9 +3395,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const isButton = matchesNodeName('button');
 const isInputTag = matchesNodeName('input');
+const isKendoInputTag = matchesNodeName('kendo-checkbox') || matchesNodeName('kendo-textbox');
 const navigableRegex = /(button|checkbox|color|file|radio|reset|submit)/i;
 const isNavigableInput = element => isInputTag(element) && navigableRegex.test(element.type);
-const isNavigable = element => !element.disabled && (isButton(element) || isNavigableInput(element));
+const isNavigable = element => !element.disabled && (isButton(element) || isNavigableInput(element) || isKendoInputTag(element));
 /**
  * @hidden
  */
@@ -4298,6 +4299,7 @@ class SelectionService {
             this.dragging = false;
             return;
         }
+        //
         const isCheckbox = args.originalEvent.target ? hasClasses$1(args.originalEvent.target, 'k-checkbox') : true;
         if (this.rowSelection && this.settings.checkboxOnly && !isCheckbox) {
             return;
@@ -6131,12 +6133,11 @@ class CellComponent {
                 </ng-container>
                 <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                 <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
-                    <input
-                        type="checkbox"
+                    <kendo-checkbox
                         kendoTreeListFocusable
-                        [attr.aria-label]="messageFor('selectRowCheckboxLabel')"
-                        class="k-checkbox k-checkbox-md k-rounded-md"
-                        [checked]="selected" />
+                        [inputAttributes]="{'aria-label': messageFor('selectRowCheckboxLabel')}"
+                        [checkedState]="selected"
+                    ></kendo-checkbox>
                 </ng-template>
                 <ng-container *ngIf="column.isRowReorderColumn && !isNew">
                     <kendo-icon-wrapper
@@ -6166,25 +6167,21 @@ class CellComponent {
                         kendoTreeListFocusable
                     ></kendo-datepicker>
 
-                    <input
+                    <kendo-checkbox
                         *ngSwitchCase="'boolean'"
-                        type="checkbox"
-                        class="k-checkbox k-checkbox-md k-rounded-md"
                         [formControl]="$any(formGroup.get(column.field))"
                         kendoTreeListFocusable
-                    />
+                    ></kendo-checkbox>
 
-                    <input
+                    <kendo-textbox
                         *ngSwitchDefault
-                        type="text"
-                        class="k-textbox k-input k-input-md k-input-solid k-rounded-md"
                         [formControl]="$any(formGroup.get(column.field))"
                         kendoTreeListFocusable
-                    />
+                    ></kendo-textbox>
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "pipe", type: LevelItemsPipe, name: "levelItems" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "pipe", type: LevelItemsPipe, name: "levelItems" }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
@@ -6213,12 +6210,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ng-container>
                 <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                 <ng-template [ngIf]="column.isCheckboxColumn && !isNew">
-                    <input
-                        type="checkbox"
+                    <kendo-checkbox
                         kendoTreeListFocusable
-                        [attr.aria-label]="messageFor('selectRowCheckboxLabel')"
-                        class="k-checkbox k-checkbox-md k-rounded-md"
-                        [checked]="selected" />
+                        [inputAttributes]="{'aria-label': messageFor('selectRowCheckboxLabel')}"
+                        [checkedState]="selected"
+                    ></kendo-checkbox>
                 </ng-template>
                 <ng-container *ngIf="column.isRowReorderColumn && !isNew">
                     <kendo-icon-wrapper
@@ -6248,27 +6244,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoTreeListFocusable
                     ></kendo-datepicker>
 
-                    <input
+                    <kendo-checkbox
                         *ngSwitchCase="'boolean'"
-                        type="checkbox"
-                        class="k-checkbox k-checkbox-md k-rounded-md"
                         [formControl]="$any(formGroup.get(column.field))"
                         kendoTreeListFocusable
-                    />
+                    ></kendo-checkbox>
 
-                    <input
+                    <kendo-textbox
                         *ngSwitchDefault
-                        type="text"
-                        class="k-textbox k-input k-input-md k-input-solid k-rounded-md"
                         [formControl]="$any(formGroup.get(column.field))"
                         kendoTreeListFocusable
-                    />
+                    ></kendo-textbox>
                 </ng-container>
             </ng-container>
         </ng-container>
     `,
                     standalone: true,
-                    imports: [NgSwitch, NgSwitchCase, NgIf, NgFor, IconWrapperComponent, NgTemplateOutlet, FocusableDirective, NumericTextBoxComponent, ReactiveFormsModule, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, LevelItemsPipe]
+                    imports: [NgSwitch, NgSwitchCase, NgIf, NgFor, IconWrapperComponent, NgTemplateOutlet, FocusableDirective, NumericTextBoxComponent, ReactiveFormsModule, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, LevelItemsPipe, CheckBoxComponent, TextBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: EditService }, { type: i1$1.LocalizationService }, { type: FocusGroup }]; }, propDecorators: { commandCellClass: [{
                 type: HostBinding,
@@ -6755,7 +6747,7 @@ class TableBodyComponent {
     }
     checkboxClick(cell, row, eventArg) {
         const isCheckboxCell = hasClasses(cell, 'k-checkbox-cell');
-        const isCheckbox = hasClasses(eventArg.target, 'k-checkbox');
+        const isCheckbox = eventArg.target.closest('.k-checkbox-wrap');
         if (isCheckboxCell && !isCheckbox && this.selection.settings.checkboxOnly) {
             return;
         }
@@ -6763,7 +6755,8 @@ class TableBodyComponent {
             this.selection.enabled && this.selection.rowSelection) {
             const args = this.cellClickArgs(cell, row, eventArg);
             this.selection.checkboxClick(args);
-            if (eventArg.target.checked !== this.selection.isRowSelected(args.dataItem)) {
+            const isChecked = isCheckbox?.firstElementChild.classList.contains('k-checked');
+            if (isChecked !== this.selection.isRowSelected(args.dataItem)) {
                 eventArg.preventDefault();
             }
             return true;
@@ -8188,7 +8181,7 @@ class ListComponent {
             DOMMouseScroll: lockedMousewheel
         }"
         [scope]="this">
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 kendoTreeListResizableTable
                 [locked]="true"
@@ -8227,7 +8220,7 @@ class ListComponent {
         [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
         [lockedWidth]="lockedWidth + 1"
     >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table 
                 [style.width.px]="nonLockedWidth" 
                 #table
@@ -8290,7 +8283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             DOMMouseScroll: lockedMousewheel
         }"
         [scope]="this">
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 kendoTreeListResizableTable
                 [locked]="true"
@@ -8329,7 +8322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
         [lockedWidth]="lockedWidth + 1"
     >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table 
                 [style.width.px]="nonLockedWidth" 
                 #table
@@ -9641,16 +9634,16 @@ class StringFilterCellComponent extends StringFilterComponent {
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input
-                class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
+            <kendo-textbox
                 kendoTreeListFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
-                [attr.placeholder]="placeholder"
-                [ngModel]="currentFilter?.value" />
+                [placeholder]="placeholder"
+                [ngModel]="currentFilter?.value ?? null"
+            ></kendo-textbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
@@ -9663,18 +9656,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input
-                class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
+            <kendo-textbox
                 kendoTreeListFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
-                [attr.placeholder]="placeholder"
-                [ngModel]="currentFilter?.value" />
+                [placeholder]="placeholder"
+                [ngModel]="currentFilter?.value ?? null"
+            ></kendo-textbox>
         </kendo-treelist-filter-wrapper-cell>
     `,
                     standalone: true,
-                    imports: [FilterCellWrapperComponent, ReactiveFormsModule, FocusableDirective, FilterInputDirective, FormsModule]
+                    imports: [FilterCellWrapperComponent, ReactiveFormsModule, FocusableDirective, FilterInputDirective, FormsModule, TextBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: FilterService }, { type: i1$1.LocalizationService }]; }, propDecorators: { filterDelay: [{
                 type: Input
@@ -9998,15 +9991,12 @@ class BooleanFilterComponent extends BaseFilterCellComponent {
         this.defaultItem = { text: this.localization.get("filterBooleanAll"), value: null };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterComponent, deps: [{ token: FilterService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterComponent, inputs: { column: "column" }, host: { properties: { "class.k-filtercell-boolean": "this.hostClasses" } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterComponent, inputs: { column: "column" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterComponent, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1$1.LocalizationService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-filtercell-boolean']
-            }], column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1$1.LocalizationService }]; }, propDecorators: { column: [{
                 type: Input
             }] } });
 
@@ -10944,15 +10934,15 @@ class StringFilterMenuInputComponent {
             [currentFilter]="currentFilter"
             [filterService]="filterService"
             >
-            <input
-                kendoTextBox
+            <kendo-textbox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                [attr.placeholder]="placeholder"
-                [ngModel]="currentFilter?.value" />
+                [placeholder]="placeholder"
+                [ngModel]="currentFilter?.value ?? null"
+            ></kendo-textbox>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
@@ -10967,17 +10957,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [currentFilter]="currentFilter"
             [filterService]="filterService"
             >
-            <input
-                kendoTextBox
+            <kendo-textbox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                [attr.placeholder]="placeholder"
-                [ngModel]="currentFilter?.value" />
+                [placeholder]="placeholder"
+                [ngModel]="currentFilter?.value ?? null"
+            ></kendo-textbox>
         </kendo-treelist-filter-menu-input-wrapper>
     `,
                     standalone: true,
-                    imports: [FilterMenuInputWrapperComponent, TextBoxDirective, ReactiveFormsModule, FilterInputDirective, FormsModule]
+                    imports: [FilterMenuInputWrapperComponent, TextBoxComponent, ReactiveFormsModule, FilterInputDirective, FormsModule]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { operators: [{
                 type: Input
@@ -11846,19 +11836,19 @@ class BooleanFilterMenuComponent extends BooleanFilterComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "inputElem", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
-                <input #inputElem type="radio"
-                    kendoRadioButton
+                <kendo-radiobutton
+                    #inputElem
                     kendoFilterMenuRadioButton
                     [columnLabel]="columnLabel"
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
-                    (change)="onChange(item.value)"
-                />
+                    (checkedChange)="onChange(item.value)"
+                ></kendo-radiobutton>
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
         </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
             type: Component,
@@ -11867,21 +11857,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
-                <input #inputElem type="radio"
-                    kendoRadioButton
+                <kendo-radiobutton
+                    #inputElem
                     kendoFilterMenuRadioButton
                     [columnLabel]="columnLabel"
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
-                    (change)="onChange(item.value)"
-                />
+                    (checkedChange)="onChange(item.value)"
+                ></kendo-radiobutton>
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
         </ul>
     `,
                     standalone: true,
-                    imports: [NgFor, RadioButtonDirective, BooleanFilterRadioButtonDirective]
+                    imports: [NgFor, RadioButtonComponent, BooleanFilterRadioButtonDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i1$2.DomSanitizer }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -12526,6 +12516,7 @@ class ColumnListComponent {
     applyText;
     resetText;
     actionsClass = 'k-actions';
+    checkboxes;
     hasLocked;
     hasVisibleLocked;
     unlockedCount = 0;
@@ -12549,22 +12540,26 @@ class ColumnListComponent {
         }
         this.ngZone.runOutsideAngular(() => {
             this.domSubscriptions = this.renderer.listen(this.element.nativeElement, 'click', (e) => {
-                if (hasClasses(e.target, 'k-checkbox')) {
-                    if (this.autoSync) {
-                        const index = parseInt(e.target.getAttribute('data-index'), 10);
-                        const column = this.columns[index];
-                        const hidden = !e.target.checked;
-                        if (Boolean(column.hidden) !== hidden) {
-                            this.ngZone.run(() => {
-                                column.hidden = hidden;
-                                this.columnChange.emit([column]);
-                            });
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    const closestItem = e.target.closest('.k-checkbox-wrap');
+                    if (closestItem) {
+                        if (this.autoSync) {
+                            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === closestItem);
+                            const index = parseInt(closestItem.firstElementChild.getAttribute('data-index'), 10);
+                            const column = this.columns[index];
+                            const hidden = !checkbox.checkedState;
+                            if (Boolean(column.hidden) !== hidden) {
+                                this.ngZone.run(() => {
+                                    column.hidden = hidden;
+                                    this.columnChange.emit([column]);
+                                });
+                            }
+                        }
+                        else {
+                            this.ngZone.run(() => this.updateDisabled());
                         }
                     }
-                    else {
-                        this.updateDisabled();
-                    }
-                }
+                });
             });
         });
     }
@@ -12574,17 +12569,17 @@ class ColumnListComponent {
         }
     }
     cancelChanges() {
-        this.forEachCheckBox((element, index) => {
-            element.checked = !this.columns[index].hidden;
+        this.checkboxes.forEach((item, index) => {
+            item.checkedState = !this.columns[index].hidden;
         });
         this.updateDisabled();
         this.reset.emit();
     }
     applyChanges() {
         const changed = [];
-        this.forEachCheckBox((element, index) => {
+        this.checkboxes.forEach((item, index) => {
             const column = this.columns[index];
-            const hidden = !element.checked;
+            const hidden = !item.checkedState;
             if (Boolean(column.hidden) !== hidden) {
                 column.hidden = hidden;
                 changed.push(column);
@@ -12593,20 +12588,13 @@ class ColumnListComponent {
         this.updateDisabled();
         this.apply.emit(changed);
     }
-    forEachCheckBox(callback) {
-        const checkboxes = this.element.nativeElement.getElementsByClassName('k-checkbox');
-        const length = checkboxes.length;
-        for (let idx = 0; idx < length; idx++) {
-            callback(checkboxes[idx], idx);
-        }
-    }
     updateDisabled() {
         if (this.allowHideAll && !this.hasLocked) {
             return;
         }
         const checkedItems = [];
-        this.forEachCheckBox((checkbox, index) => {
-            if (checkbox.checked) {
+        this.checkboxes.forEach((checkbox, index) => {
+            if (checkbox.checkedState) {
                 checkedItems.push({ checkbox, index });
             }
             checkbox.disabled = false;
@@ -12637,15 +12625,14 @@ class ColumnListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-treelist-columnlist", inputs: { columns: "columns", autoSync: "autoSync", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, viewQueries: [{ propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], ngImport: i0, template: `
         <div class="k-column-list">
             <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input
-                    class="k-checkbox k-checkbox-md k-rounded-md"
-                    type="checkbox"
-                    [attr.data-index]="index"
-                    [checked]="!column.hidden"
-                    [disabled]="isDisabled(column)" />
+                <kendo-checkbox
+                    [inputAttributes]="{'data-index': index.toString()}"
+                    [checkedState]="!column.hidden"
+                    [disabled]="isDisabled(column)"
+                ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
@@ -12663,7 +12650,7 @@ class ColumnListComponent {
                 {{ applyText }}
             </button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -12672,12 +12659,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <div class="k-column-list">
             <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input
-                    class="k-checkbox k-checkbox-md k-rounded-md"
-                    type="checkbox"
-                    [attr.data-index]="index"
-                    [checked]="!column.hidden"
-                    [disabled]="isDisabled(column)" />
+                <kendo-checkbox
+                    [inputAttributes]="{'data-index': index.toString()}"
+                    [checkedState]="!column.hidden"
+                    [disabled]="isDisabled(column)"
+                ></kendo-checkbox>
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
@@ -12697,7 +12683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, NgClass]
+                    imports: [NgFor, NgIf, NgClass, CheckBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { className: [{
                 type: HostBinding,
@@ -12720,6 +12706,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], actionsClass: [{
                 type: Input
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: [CheckBoxComponent]
             }] } });
 
 /**
@@ -13551,8 +13540,8 @@ class HeaderComponent {
         return column.isCheckboxColumn && column.showSelectAll && !column.headerTemplateRef &&
             this.selectionService.enableMultiple;
     }
-    selectAllClick(args) {
-        this.selectionService.toggleAll(args.target.checked);
+    selectAllChange(state) {
+        this.selectionService.toggleAll(state);
     }
     sortDescriptor(field) {
         return this.sort.find(item => item.field === field) || { field };
@@ -13718,7 +13707,7 @@ class HeaderComponent {
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span class="k-sort-icon">
+                                <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
                                 <kendo-icon-wrapper
                                         *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
                                         role="note" [attr.aria-label]="sortableLabel"
@@ -13745,12 +13734,11 @@ class HeaderComponent {
                         </span>
                     </ng-template>
                     <ng-template [ngIf]="renderSelectAll(column)">
-                        <input
-                            type="checkbox"
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [attr.aria-label]="messageFor('selectAllRowsCheckboxLabel')"
+                        <kendo-checkbox
+                            [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
-                            (click)="selectAllClick($event)" />
+                            (checkedStateChange)="selectAllChange($event)"
+                        ></kendo-checkbox>
                     </ng-template>
                     <span kendoTreeListColumnHandle
                         kendoDraggable
@@ -13823,7 +13811,7 @@ class HeaderComponent {
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -13906,7 +13894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 <ng-container *ngIf="!column.headerTemplateRef">
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
-                                <span class="k-sort-icon">
+                                <span [class.k-sort-icon]="sortDescriptor(getColumnComponent(column).field).dir">
                                 <kendo-icon-wrapper
                                         *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
                                         role="note" [attr.aria-label]="sortableLabel"
@@ -13933,12 +13921,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </span>
                     </ng-template>
                     <ng-template [ngIf]="renderSelectAll(column)">
-                        <input
-                            type="checkbox"
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [attr.aria-label]="messageFor('selectAllRowsCheckboxLabel')"
+                        <kendo-checkbox
+                            [inputAttributes]="{'aria-label': messageFor('selectAllRowsCheckboxLabel')}"
                             kendoTreeListFocusable
-                            (click)="selectAllClick($event)" />
+                            (checkedStateChange)="selectAllChange($event)"
+                        ></kendo-checkbox>
                     </ng-template>
                     <span kendoTreeListColumnHandle
                         kendoDraggable
@@ -14013,7 +14000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </tr>
     `,
                     standalone: true,
-                    imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle, FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent]
+                    imports: [NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective, NgClass, NgStyle, FilterMenuComponent, ColumnMenuComponent, TemplateContextDirective, IconWrapperComponent, FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: SortService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { totalColumnLevels: [{
                 type: Input
@@ -21455,7 +21442,7 @@ class TreeListModule {
             DialogService,
             WindowService,
             WindowContainerService
-        ], imports: [TreeListComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, i95.ToolBarComponent, i95.ToolbarCustomMessagesComponent, i95.ToolBarButtonComponent, i95.ToolBarButtonGroupComponent, i95.ToolBarDropDownButtonComponent, i95.ToolBarSeparatorComponent, i95.ToolBarSpacerComponent, i95.ToolBarSplitButtonComponent] });
+        ], imports: [TreeListComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, i95.ToolBarComponent, i95.ToolbarCustomMessagesComponent, i95.ToolBarButtonComponent, i95.ToolBarButtonGroupComponent, i95.ToolBarDropDownButtonComponent, i95.ToolBarSeparatorComponent, i95.ToolBarSpacerComponent, i95.ToolBarSplitButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeListModule, decorators: [{
             type: NgModule,
@@ -21537,7 +21524,7 @@ const ENTRY_COMPONENTS = [
 class FilterMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent], exports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, imports: [FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, decorators: [{
             type: NgModule,
@@ -21573,7 +21560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class HeaderModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, FilterInputDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterMenuHostDirective, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, ColumnComponent, ColumnGroupComponent, LogicalCellDirective, LogicalRowDirective, FocusableDirective, ColGroupComponent, ResizableContainerDirective, i1$4.TemplateContextDirective, FieldAccessorPipe, SpanColumnComponent, LoadingComponent, FilterCellOperatorsComponent, CheckboxColumnComponent, RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuTemplateDirective, DraggableColumnDirective, DropTargetDirective], exports: [HeaderComponent, HeaderTemplateDirective, ColumnHandleDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, imports: [HeaderComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterCellOperatorsComponent, i47.CustomMessagesComponent, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerComponent, i47.PagerSpacerComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,