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

package/column-menu/column-list.component.d.ts

@@ -22,6 +22,7 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     applyText: string;
     resetText: string;
     actionsClass: string;
+    private checkboxes;
     private hasLocked;
     private hasVisibleLocked;
     private unlockedCount;
@@ -36,7 +37,6 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     cancelChanges(): void;
     applyChanges(): void;
-    private forEachCheckBox;
     private updateDisabled;
     private updateColumnState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnListComponent, never>;

package/esm2022/column-menu/column-list.component.mjs

@@ -2,9 +2,10 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter } from '@angular/core';
-import { hasClasses } from '../rendering/common/dom-queries';
+import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, QueryList, ViewChildren } from '@angular/core';
 import { NgFor, NgIf, NgClass } from '@angular/common';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -32,6 +33,7 @@ export class ColumnListComponent {
     applyText;
     resetText;
     actionsClass = 'k-actions';
+    checkboxes;
     hasLocked;
     hasVisibleLocked;
     unlockedCount = 0;
@@ -55,22 +57,26 @@ export 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();
-                    }
-                }
+                });
             });
         });
     }
@@ -80,17 +86,17 @@ export 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);
@@ -99,20 +105,13 @@ export 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;
@@ -143,15 +142,14 @@ export 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>
@@ -169,7 +167,7 @@ export 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,
@@ -178,12 +176,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>
@@ -203,7 +200,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,
@@ -226,4 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], actionsClass: [{
                 type: Input
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: [CheckBoxComponent]
             }] } });

package/esm2022/filtering/boolean-filter.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Input, HostBinding, Directive } from '@angular/core';
+import { Input, Directive } from '@angular/core';
 import { ColumnComponent } from '../columns/column.component';
 import { FilterService } from './filter.service';
 import { BaseFilterCellComponent } from './base-filter-cell.component';
@@ -81,14 +81,11 @@ export 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: i1.FilterService }, { token: i2.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: i1.FilterService }, { type: i2.LocalizationService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-filtercell-boolean']
-            }], column: [{
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }]; }, propDecorators: { column: [{
                 type: Input
             }] } });

package/esm2022/filtering/cell/string-filter-cell.component.mjs

@@ -11,6 +11,7 @@ import { replaceMessagePlaceholder } from '../../utils';
 import { FilterInputDirective } from '../filter-input.directive';
 import { FocusableDirective } from '../../navigation/focusable.directive';
 import { FilterCellWrapperComponent } from './filter-cell-wrapper.component';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -70,16 +71,16 @@ export 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,
@@ -92,18 +93,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: i1.FilterService }, { type: i2.LocalizationService }]; }, propDecorators: { filterDelay: [{
                 type: Input

package/esm2022/filtering/menu/boolean-filter-menu.component.mjs

@@ -5,7 +5,7 @@
 import { Component, Input, HostBinding, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { guid } from '@progress/kendo-angular-common';
-import { RadioButtonDirective } from '@progress/kendo-angular-inputs';
+import { RadioButtonComponent } from '@progress/kendo-angular-inputs';
 import { FilterService } from '../filter.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { BooleanFilterComponent } from '../boolean-filter.component';
@@ -90,19 +90,19 @@ export 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,
@@ -111,21 +111,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.LocalizationService }, { type: i2.DomSanitizer }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2022/filtering/menu/filter-menu.module.mjs

@@ -70,7 +70,7 @@ const ENTRY_COMPONENTS = [
 export 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: [i1.FilterMenuComponent, i2.FilterMenuContainerComponent, i3.FilterMenuInputWrapperComponent, i4.StringFilterMenuInputComponent, i5.StringFilterMenuComponent, i6.FilterMenuTemplateDirective, i7.NumericFilterMenuComponent, i8.NumericFilterMenuInputComponent, i9.DateFilterMenuInputComponent, i10.DateFilterMenuComponent, i11.FilterMenuHostDirective, i12.BooleanFilterMenuComponent, i13.BooleanFilterRadioButtonDirective, i14.FilterCellOperatorsComponent, i15.ContainsFilterOperatorComponent, i16.DoesNotContainFilterOperatorComponent, i17.EndsWithFilterOperatorComponent, i18.EqualFilterOperatorComponent, i19.IsEmptyFilterOperatorComponent, i20.IsNotEmptyFilterOperatorComponent, i21.IsNotNullFilterOperatorComponent, i22.IsNullFilterOperatorComponent, i23.NotEqualFilterOperatorComponent, i24.StartsWithFilterOperatorComponent, i25.GreaterFilterOperatorComponent, i26.GreaterOrEqualToFilterOperatorComponent, i27.LessFilterOperatorComponent, i28.LessOrEqualToFilterOperatorComponent, i29.AfterFilterOperatorComponent, i30.AfterEqFilterOperatorComponent, i31.BeforeEqFilterOperatorComponent, i32.BeforeFilterOperatorComponent, i33.FilterInputDirective, i34.ColumnComponent, i35.ColumnGroupComponent, i36.LogicalCellDirective, i37.LogicalRowDirective, i38.FocusableDirective, i39.ColGroupComponent, i40.ResizableContainerDirective, i41.TemplateContextDirective, i42.FieldAccessorPipe, i43.SpanColumnComponent, i44.LoadingComponent, i14.FilterCellOperatorsComponent, i45.CheckboxColumnComponent, i46.RowReorderColumnComponent, i47.CustomMessagesComponent, i47.PagerFocusableDirective, i47.PagerInfoComponent, i47.PagerInputComponent, i47.PagerNextButtonsComponent, i47.PagerNumericButtonsComponent, i47.PagerPageSizesComponent, i47.PagerPrevButtonsComponent, i47.PagerTemplateDirective, i47.PagerComponent, i47.PagerSpacerComponent], exports: [i1.FilterMenuComponent, i2.FilterMenuContainerComponent, i3.FilterMenuInputWrapperComponent, i4.StringFilterMenuInputComponent, i5.StringFilterMenuComponent, i6.FilterMenuTemplateDirective, i7.NumericFilterMenuComponent, i8.NumericFilterMenuInputComponent, i9.DateFilterMenuInputComponent, i10.DateFilterMenuComponent, i11.FilterMenuHostDirective, i12.BooleanFilterMenuComponent, i13.BooleanFilterRadioButtonDirective, i14.FilterCellOperatorsComponent, i15.ContainsFilterOperatorComponent, i16.DoesNotContainFilterOperatorComponent, i17.EndsWithFilterOperatorComponent, i18.EqualFilterOperatorComponent, i19.IsEmptyFilterOperatorComponent, i20.IsNotEmptyFilterOperatorComponent, i21.IsNotNullFilterOperatorComponent, i22.IsNullFilterOperatorComponent, i23.NotEqualFilterOperatorComponent, i24.StartsWithFilterOperatorComponent, i25.GreaterFilterOperatorComponent, i26.GreaterOrEqualToFilterOperatorComponent, i27.LessFilterOperatorComponent, i28.LessOrEqualToFilterOperatorComponent, i29.AfterFilterOperatorComponent, i30.AfterEqFilterOperatorComponent, i31.BeforeEqFilterOperatorComponent, i32.BeforeFilterOperatorComponent, i33.FilterInputDirective, i34.ColumnComponent, i35.ColumnGroupComponent, i36.LogicalCellDirective, i37.LogicalRowDirective, i38.FocusableDirective, i39.ColGroupComponent, i40.ResizableContainerDirective, i41.TemplateContextDirective, i42.FieldAccessorPipe, i43.SpanColumnComponent, i44.LoadingComponent, i14.FilterCellOperatorsComponent, i45.CheckboxColumnComponent, i46.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: [i1.FilterMenuComponent, i2.FilterMenuContainerComponent, i3.FilterMenuInputWrapperComponent, i4.StringFilterMenuInputComponent, i5.StringFilterMenuComponent, i7.NumericFilterMenuComponent, i8.NumericFilterMenuInputComponent, i9.DateFilterMenuInputComponent, i10.DateFilterMenuComponent, i14.FilterCellOperatorsComponent, i14.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: [i1.FilterMenuComponent, i2.FilterMenuContainerComponent, i3.FilterMenuInputWrapperComponent, i4.StringFilterMenuInputComponent, i5.StringFilterMenuComponent, i7.NumericFilterMenuComponent, i8.NumericFilterMenuInputComponent, i9.DateFilterMenuInputComponent, i10.DateFilterMenuComponent, i12.BooleanFilterMenuComponent, i14.FilterCellOperatorsComponent, i14.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,

package/esm2022/filtering/menu/string-filter-menu-input.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input } from '@angular/core';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { TextBoxDirective } from '@progress/kendo-angular-inputs';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { ColumnComponent } from "../../columns/column.component";
 import { FilterService } from '../filter.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -44,15 +44,15 @@ export 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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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,
@@ -67,17 +67,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.LocalizationService }]; }, propDecorators: { operators: [{
                 type: Input

package/esm2022/navigation/default-focusable-element.mjs

@@ -5,9 +5,10 @@
 import { closest, findFocusable, isVisible, matchesNodeName } from '../rendering/common/dom-queries';
 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
  */

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730721033,
-    version: '17.0.0-develop.36',
+    publishDate: 1730732293,
+    version: '17.0.0-develop.38',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/cell.component.mjs

@@ -8,7 +8,7 @@ import { NgSwitch, NgSwitchCase, NgIf, NgFor, NgTemplateOutlet, NgSwitchDefault
 import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, reorderIcon } from '@progress/kendo-svg-icons';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
-import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
+import { CheckBoxComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { EditService } from '../editing/edit.service';
 import { isSpanColumn, isCheckboxColumn, isRowReorderColumn } from '../columns/column-base';
@@ -187,12 +187,11 @@ export 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
@@ -222,25 +221,21 @@ export 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: i4.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: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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,
@@ -269,12 +264,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
@@ -304,27 +298,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: i1.EditService }, { type: i2.LocalizationService }, { type: i3.FocusGroup }]; }, propDecorators: { commandCellClass: [{
                 type: HostBinding,