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

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

@@ -28,7 +28,8 @@ import * as i1$4 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
-import { TextBoxDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonDirective, TextBoxComponent } from '@progress/kendo-angular-inputs';
+import * as i3 from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { DatePickerComponent, DatePickerCustomMessagesComponent, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { TabStripComponent, TabStripTabComponent, TabTitleDirective, TabContentDirective } from '@progress/kendo-angular-layout';
@@ -655,9 +656,10 @@ function rtlScrollPosition(position, element, initial) {
 
 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
  */
@@ -5183,7 +5185,7 @@ class GroupHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: GroupsService }, { token: GroupInfoService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderComponent, isStandalone: true, selector: "[kendoGridGroupHeader]", inputs: { rowIndex: "rowIndex", logicalRowIndex: "logicalRowIndex", item: "item", skipGroupDecoration: "skipGroupDecoration", hasDetails: "hasDetails", totalColumnsCount: "totalColumnsCount", hasGroupHeaderColumn: "hasGroupHeaderColumn", groupHeaderColumns: "groupHeaderColumns", columns: "columns", groups: "groups" }, host: { properties: { "class.k-grouping-row": "this.groupItemClass", "class.k-table-group-row": "this.tableGroupRowClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!skipGroupDecoration">
-            <td class="k-group-cell k-table-td"
+            <td class="k-group-cell k-table-td k-table-group-td"
                 role="presentation"
                 *ngFor="let g of prefixGroupCell(item)"></td>
         </ng-container>
@@ -5258,7 +5260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridGroupHeader]',
                     template: `
         <ng-container *ngIf="!skipGroupDecoration">
-            <td class="k-group-cell k-table-td"
+            <td class="k-group-cell k-table-td k-table-group-td"
                 role="presentation"
                 *ngFor="let g of prefixGroupCell(item)"></td>
         </ng-container>
@@ -7716,15 +7718,15 @@ class StringFilterMenuInputComponent {
             [isFirstDropDown]="isFirstDropDown"
             [menuTabbingService]="menuTabbingService"
             >
-            <input
-                kendoTextBox
+            <kendo-textbox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                [attr.placeholder]="placeholder"
-                [ngModel]="currentFilter?.value" />
+                [placeholder]="placeholder"
+                [ngModel]="currentFilter?.value ?? null">
+            </kendo-textbox>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "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: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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,
@@ -7741,17 +7743,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [isFirstDropDown]="isFirstDropDown"
             [menuTabbingService]="menuTabbingService"
             >
-            <input
-                kendoTextBox
+            <kendo-textbox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                [attr.placeholder]="placeholder"
-                [ngModel]="currentFilter?.value" />
+                [placeholder]="placeholder"
+                [ngModel]="currentFilter?.value ?? null">
+            </kendo-textbox>
         </kendo-grid-filter-menu-input-wrapper>
     `,
                     standalone: true,
-                    imports: [FilterMenuInputWrapperComponent, TextBoxDirective, FilterInputDirective, FormsModule]
+                    imports: [FilterMenuInputWrapperComponent, TextBoxComponent, FilterInputDirective, FormsModule]
                 }]
         }], ctorParameters: function () { return [{ type: ContextService }]; }, propDecorators: { operators: [{
                 type: Input
@@ -8968,12 +8970,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class BooleanFilterComponent extends BaseFilterCellComponent {
     ctx;
-    /**
-     * @hidden
-     */
-    get hostClasses() {
-        return true;
-    }
     /**
      * The column with which the filter is associated.
      * @type {ColumnComponent}
@@ -9028,7 +9024,7 @@ class BooleanFilterComponent extends BaseFilterCellComponent {
         this.defaultItem = { text: this.ctx.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: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterComponent, selector: "kendo-grid-boolean-filter-base", inputs: { column: "column" }, host: { properties: { "class.k-filtercell-boolean": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterComponent, selector: "kendo-grid-boolean-filter-base", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterComponent, decorators: [{
             type: Component,
@@ -9036,10 +9032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-grid-boolean-filter-base',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-filtercell-boolean']
-            }], column: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }] } });
 
@@ -9138,7 +9131,7 @@ class BooleanFilterMenuComponent extends BooleanFilterComponent {
             operator: "eq",
             value: value
         }));
-        this.filterService.menuTabbingService.firstFocusable = input;
+        this.filterService.menuTabbingService.firstFocusable = input.hostElement.nativeElement;
     }
     /**
      * @hidden
@@ -9167,21 +9160,20 @@ class BooleanFilterMenuComponent extends BooleanFilterComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-grid-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
-                <input type="radio"
+                <kendo-radiobutton
                     kendoFilterMenuRadioButton
                     [columnLabel]="columnLabel"
                     #input
                     [name]="idPrefix"
-                    kendoRadioButton
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (change)="onChange(item.value, input)"
                     (keydown.shift.tab)="onShiftTab($event)"
-                />
+                ></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,
@@ -9190,23 +9182,22 @@ 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 type="radio"
+                <kendo-radiobutton
                     kendoFilterMenuRadioButton
                     [columnLabel]="columnLabel"
                     #input
                     [name]="idPrefix"
-                    kendoRadioButton
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (change)="onChange(item.value, input)"
                     (keydown.shift.tab)="onShiftTab($event)"
-                />
+                ></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: ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -10199,7 +10190,8 @@ class StringFilterCellComponent extends StringFilterComponent {
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [placeholder]="placeholder"
-                [ngModel]="currentFilter?.value"></kendo-textbox>
+                [ngModel]="currentFilter?.value ?? null"
+            ></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
     `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { 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: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
@@ -10222,7 +10214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [placeholder]="placeholder"
-                [ngModel]="currentFilter?.value"></kendo-textbox>
+                [ngModel]="currentFilter?.value ?? null"
+            ></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
     `,
                     standalone: true,
@@ -10525,14 +10518,12 @@ class FilterRowComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterRowComponent, isStandalone: true, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
         <td
-            class="k-table-td"
-            [class.k-group-cell]="true"
+            class="k-table-td k-group-cell k-table-group-td"
             *ngFor="let g of groups"
             role="presentation">
         </td>
         <td
-            class="k-table-td"
-            [class.k-hierarchy-cell]="true"
+            class="k-table-td k-hierarchy-cell"
             *ngIf="detailTemplate?.templateRef"
             role="presentation">
         </td>
@@ -10557,14 +10548,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridFilterRow]',
                     template: `
         <td
-            class="k-table-td"
-            [class.k-group-cell]="true"
+            class="k-table-td k-group-cell k-table-group-td"
             *ngFor="let g of groups"
             role="presentation">
         </td>
         <td
-            class="k-table-td"
-            [class.k-hierarchy-cell]="true"
+            class="k-table-td k-hierarchy-cell"
             *ngIf="detailTemplate?.templateRef"
             role="presentation">
         </td>
@@ -10607,23 +10596,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ColumnMenuChooserItemCheckedDirective {
     host;
-    renderer;
     kendoColumnMenuChooserItemChecked;
+    checkbox;
     checkedChangeSub = new Subscription();
-    constructor(host, renderer) {
+    constructor(host) {
         this.host = host;
-        this.renderer = renderer;
     }
     ngAfterViewInit() {
-        this.checkedChangeSub.add(this.renderer.listen(this.host.nativeElement.firstElementChild, 'change', (e) => {
-            this.kendoColumnMenuChooserItemChecked = e.target.checked;
+        this.checkedChangeSub.add(this.checkbox.checkedStateChange.subscribe(() => {
+            this.kendoColumnMenuChooserItemChecked = this.checkbox.checkedState === true;
         }));
     }
     ngOnDestroy() {
         this.checkedChangeSub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserItemCheckedDirective, isStandalone: true, selector: "[kendoColumnMenuChooserItemChecked]", inputs: { kendoColumnMenuChooserItemChecked: "kendoColumnMenuChooserItemChecked" }, host: { properties: { "attr.aria-checked": "this.kendoColumnMenuChooserItemChecked" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserItemCheckedDirective, isStandalone: true, selector: "[kendoColumnMenuChooserItemChecked]", inputs: { kendoColumnMenuChooserItemChecked: "kendoColumnMenuChooserItemChecked" }, host: { properties: { "attr.aria-checked": "this.kendoColumnMenuChooserItemChecked" } }, queries: [{ propertyName: "checkbox", first: true, predicate: CheckBoxComponent, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserItemCheckedDirective, decorators: [{
             type: Directive,
@@ -10631,11 +10619,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoColumnMenuChooserItemChecked]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { kendoColumnMenuChooserItemChecked: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { kendoColumnMenuChooserItemChecked: [{
                 type: HostBinding,
                 args: ['attr.aria-checked']
             }, {
                 type: Input
+            }], checkbox: [{
+                type: ContentChild,
+                args: [CheckBoxComponent]
             }] } });
 
 /**
@@ -10775,6 +10766,7 @@ class ColumnListComponent {
     resetButton;
     applyButton;
     options;
+    checkboxes;
     hasLocked;
     hasVisibleLocked;
     unlockedCount = 0;
@@ -10795,36 +10787,35 @@ class ColumnListComponent {
         }
         this.ngZone.runOutsideAngular(() => {
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
-                const closestItem = e.target.closest('.k-column-list-item');
-                if (closestItem) {
-                    const checkbox = closestItem.querySelector('.k-checkbox');
-                    const index = parseInt(checkbox.getAttribute('data-index'), 10);
-                    if (e.target === checkbox) {
-                        closestItem.focus();
-                    }
-                    else {
-                        e.preventDefault();
-                        checkbox.checked = !checkbox.checked;
-                    }
-                    if (this.autoSync) {
-                        const column = this.columns[index];
-                        const hidden = !checkbox.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-column-list-item');
+                    if (closestItem) {
+                        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
+                        const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
+                        const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
+                        if (this.autoSync) {
+                            if (!this.columns[index]) {
+                                return;
+                            }
+                            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.updateDisabled();
+                        }
+                        if (index !== this.listNavigationService.activeIndex) {
+                            this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                            this.listNavigationService.activeIndex = index;
+                            this.listNavigationService.toggle(index, true);
                         }
                     }
-                    else {
-                        this.updateDisabled();
-                    }
-                    if (index !== this.listNavigationService.activeIndex) {
-                        this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                        this.listNavigationService.activeIndex = index;
-                        this.listNavigationService.toggle(index, true);
-                    }
-                }
+                });
             }));
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
         });
@@ -10832,7 +10823,7 @@ class ColumnListComponent {
     ngAfterViewInit() {
         this.listNavigationService.items = this.options.toArray();
         this.listNavigationService.toggle(0, true);
-        this.updateDisabled();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.updateDisabled());
     }
     ngOnChanges(changes) {
         if (!this.service) {
@@ -10853,17 +10844,17 @@ class ColumnListComponent {
             (this.hasVisibleLocked && !this.hasUnlockedFiltered && this.unlockedCount === 1 && !column.locked && !column.hidden);
     }
     cancelChanges() {
-        this.forEachCheckBox((element, index) => {
-            element.checked = !this.columns[index].hidden;
+        this.checkboxes.forEach((element, index) => {
+            element.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);
@@ -10897,20 +10888,13 @@ class ColumnListComponent {
             this.listNavigationService.toggleCheckedState();
         }
     };
-    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 });
             }
             this.setDisabledState(checkbox, false);
@@ -10940,16 +10924,17 @@ class ColumnListComponent {
             this.hasUnlockedFiltered = false;
         }
     }
-    setDisabledState(element, disabled) {
-        element.disabled = disabled;
-        const parent = element.parentElement;
+    setDisabledState(checkbox, disabled) {
+        this.ngZone.run(() => checkbox.disabled = disabled);
+        const checkboxElement = checkbox.hostElement.nativeElement;
+        const parentElement = checkboxElement.parentElement;
         const classCommand = disabled ? 'addClass' : 'removeClass';
         const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
-        this.renderer[classCommand](parent, 'k-disabled');
-        this.renderer[attributeCommand](parent, 'aria-disabled', disabled ? 'true' : undefined);
+        this.renderer[classCommand](parentElement, 'k-disabled');
+        this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
     }
     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 }, { token: ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-column-list"
             role="listbox"
@@ -10960,14 +10945,11 @@ class ColumnListComponent {
                 class='k-column-list-item'
                 [kendoColumnMenuChooserItemChecked]="!column.hidden"
                 role="option">
-                <input 
-                    class="k-checkbox k-checkbox-md k-rounded-md" 
-                    type="checkbox" 
-                    [attr.data-index]="index"
-                    [checked]="!column.hidden" 
-                    tabindex="-1"
-                    [attr.aria-hidden]="true"
-                    [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>
@@ -10988,7 +10970,7 @@ class ColumnListComponent {
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation; cancelChanges();"
                 (keydown.space)="$event.preventDefault(); $event.stopPropagation; cancelChanges();">{{ resetText }}</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { 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: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { 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,
@@ -11006,14 +10988,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 class='k-column-list-item'
                 [kendoColumnMenuChooserItemChecked]="!column.hidden"
                 role="option">
-                <input 
-                    class="k-checkbox k-checkbox-md k-rounded-md" 
-                    type="checkbox" 
-                    [attr.data-index]="index"
-                    [checked]="!column.hidden" 
-                    tabindex="-1"
-                    [attr.aria-hidden]="true"
-                    [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>
@@ -11036,7 +11015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass]
+                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,
@@ -11076,6 +11055,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], options: [{
                 type: ViewChildren,
                 args: [ColumnMenuChooserItemCheckedDirective]
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: [CheckBoxComponent]
             }] } });
 
 /**
@@ -15773,9 +15755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class SelectAllCheckboxDirective {
     selectionService;
     cellSelectionService;
-    el;
-    renderer;
     ngZone;
+    checkbox;
     /**
      * Explicitly overrides the state of the select-all checkbox.
      */
@@ -15785,7 +15766,6 @@ class SelectAllCheckboxDirective {
      * ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
      */
     selectAllChange = new EventEmitter();
-    type = 'checkbox';
     destroyClick;
     stateSet = false;
     ngAfterContentChecked() {
@@ -15794,28 +15774,27 @@ class SelectAllCheckboxDirective {
     ngOnChanges() {
         this.stateSet = true;
     }
-    constructor(selectionService, cellSelectionService, el, renderer, ngZone) {
+    constructor(selectionService, cellSelectionService, ngZone, checkbox) {
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
-        this.el = el;
-        this.renderer = renderer;
         this.ngZone = ngZone;
+        this.checkbox = checkbox;
         this.ngZone.runOutsideAngular(() => {
-            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
+            this.destroyClick = this.checkbox.checkedStateChange.subscribe(this.onClick.bind(this));
         });
     }
     ngOnDestroy() {
         if (this.destroyClick) {
-            this.destroyClick();
+            this.destroyClick.unsubscribe();
         }
     }
     /**
      * @hidden
      */
     onClick() {
-        const uncheckedState = this.el.nativeElement.indeterminate ? 'indeterminate' : 'unchecked';
-        const checkboxState = this.el.nativeElement.checked ? 'checked' : uncheckedState;
-        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.el.nativeElement.checked;
+        const uncheckedState = this.checkbox.checkedState === 'indeterminate' ? 'indeterminate' : 'unchecked';
+        const checkboxState = this.checkbox.checkedState ? 'checked' : uncheckedState;
+        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.checkbox.checkedState === true;
         const options = this.selectionService.options;
         const enabledAndMultiple = options.enabled && options.mode === 'multiple' && !this.cellSelectionService.active;
         const shouldEmitSelectAll = hasObservers(this.selectAllChange);
@@ -15835,9 +15814,7 @@ class SelectAllCheckboxDirective {
      */
     setState() {
         const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
-        const elem = this.el.nativeElement;
-        this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
-        this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
+        this.checkbox.checkedState = isPresent(state) ? state : 'indeterminate';
     }
     /**
      * @hidden
@@ -15852,8 +15829,8 @@ class SelectAllCheckboxDirective {
                 return undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, host: { properties: { "attr.type": "this.type" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
             type: Directive,
@@ -15861,13 +15838,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { state: [{
                 type: Input
             }], selectAllChange: [{
                 type: Output
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
             }] } });
 
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
@@ -16414,7 +16392,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"
@@ -16444,14 +16422,12 @@ class HeaderComponent {
                     </ng-container>
 
                     <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
-                        <span class="k-checkbox-wrap">
-                            <input
-                                class="k-checkbox k-checkbox-md k-rounded-md"
-                                [attr.id]="selectAllCheckboxId()"
-                                [attr.aria-label]="selectAllCheckboxLabel"
-                                kendoGridSelectAllCheckbox
-                                kendoGridFocusable>
-                        </span>
+                        <kendo-checkbox
+                            [attr.id]="selectAllCheckboxId()"
+                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                            kendoGridSelectAllCheckbox
+                            kendoGridFocusable
+                        ></kendo-checkbox>
                     </ng-container>
                     <span kendoGridColumnHandle
                         kendoDraggable
@@ -16532,7 +16508,7 @@ class HeaderComponent {
                 [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { 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: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { 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: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "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,
@@ -16641,7 +16617,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"
@@ -16671,14 +16647,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
 
                     <ng-container *ngIf="isCheckboxColumn(column) && !column.headerTemplateRef && $any(column).showSelectAll">
-                        <span class="k-checkbox-wrap">
-                            <input
-                                class="k-checkbox k-checkbox-md k-rounded-md"
-                                [attr.id]="selectAllCheckboxId()"
-                                [attr.aria-label]="selectAllCheckboxLabel"
-                                kendoGridSelectAllCheckbox
-                                kendoGridFocusable>
-                        </span>
+                        <kendo-checkbox
+                            [attr.id]="selectAllCheckboxId()"
+                            [inputAttributes]="{'aria-label': selectAllCheckboxLabel}"
+                            kendoGridSelectAllCheckbox
+                            kendoGridFocusable
+                        ></kendo-checkbox>
                     </ng-container>
                     <span kendoGridColumnHandle
                         kendoDraggable
@@ -16764,7 +16738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     imports: [
                         NgFor, LogicalRowDirective, NgIf, LogicalCellDirective, DropTargetDirective, DraggableDirective, DraggableColumnDirective,
                         NgClass, NgStyle, TemplateContextDirective, FilterMenuComponent, ColumnMenuComponent, IconWrapperComponent, SelectAllCheckboxDirective,
-                        FocusableDirective, ColumnHandleDirective, FilterRowComponent
+                        FocusableDirective, ColumnHandleDirective, FilterRowComponent, CheckBoxComponent
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: DragHintService }, { type: DropCueService }, { type: ColumnReorderService }, { type: IdService }, { type: SortService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: NavigationService }, { type: i0.NgZone }]; }, propDecorators: { totalColumnLevels: [{
@@ -16875,7 +16849,7 @@ class FooterComponent {
                 [totalColumns]="totalColumns"
             >
             <td
-                class="k-table-td k-group-cell"
+                class="k-table-td k-group-cell k-table-group-td"
                 role="presentation"
                 *ngFor="let g of groups">
             </td>
@@ -16925,7 +16899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [totalColumns]="totalColumns"
             >
             <td
-                class="k-table-td k-group-cell"
+                class="k-table-td k-group-cell k-table-group-td"
                 role="presentation"
                 *ngFor="let g of groups">
             </td>
@@ -17154,23 +17128,24 @@ class SelectionCheckboxDirective {
     el;
     renderer;
     ngZone;
+    checkbox;
     /**
      * The current index of the `dataItem` that will be selected.
      */
     itemIndex;
-    type = 'checkbox';
     destroyClick;
     destroyKeyDown;
     ngAfterContentChecked() {
         this.setCheckedState();
     }
-    constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone) {
+    constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone, checkbox) {
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
         this.aggregateService = aggregateService;
         this.el = el;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.checkbox = checkbox;
         this.ngZone.runOutsideAngular(() => {
             this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
             this.destroyKeyDown = this.renderer.listen(this.el.nativeElement, 'keydown', this.onKeyDown.bind(this));
@@ -17220,10 +17195,10 @@ class SelectionCheckboxDirective {
      */
     setCheckedState() {
         const isSelected = this.selectionService.nonSelectableRows.has(this.itemIndex) ? false : this.selectionService.isSelected(this.itemIndex);
-        this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
+        this.checkbox.checkedState = isSelected;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, host: { properties: { "attr.type": "this.type" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.CheckBoxComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
             type: Directive,
@@ -17231,12 +17206,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridSelectionCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.CheckBoxComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { itemIndex: [{
                 type: Input,
                 args: ['kendoGridSelectionCheckbox']
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
             }] } });
 
 /**
@@ -17482,23 +17458,19 @@ class CellComponent {
                     <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                     <ng-container *ngIf="isCheckboxColumn && !isNew">
                         <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <span class="k-checkbox-wrap">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel" />
-                            </span>
+                            <kendo-checkbox
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
+                            </kendo-checkbox>
                         </ng-container>
                         <ng-template #nonSelectableRow>
-                            <span class="k-checkbox-wrap" *ngIf="column.showDisabledCheckbox">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md k-disabled"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel"
-                                    [disabled]="true" />
-                            </span>
+                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                [disabled]="true"
+                            ></kendo-checkbox>
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
@@ -17538,27 +17510,21 @@ class CellComponent {
                         kendoGridFocusable
                     ></kendo-datepicker>
 
-                    <span class="k-checkbox-wrap">
-                        <input
-                            *ngSwitchCase="'boolean'"
-                            type="checkbox"
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [formControl]="$any(formGroup.get(column.field))"
-                            kendoGridFocusable
-                        />
-                    </span>
+                    <kendo-checkbox
+                        *ngSwitchCase="'boolean'"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    ></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))"
                         kendoGridFocusable
-                    />
+                    ></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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "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: "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"] }] });
+    `, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "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: "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: 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,
@@ -17580,23 +17546,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                     <ng-container *ngIf="isCheckboxColumn && !isNew">
                         <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <span class="k-checkbox-wrap">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel" />
-                            </span>
+                            <kendo-checkbox
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
+                            </kendo-checkbox>
                         </ng-container>
                         <ng-template #nonSelectableRow>
-                            <span class="k-checkbox-wrap" *ngIf="column.showDisabledCheckbox">
-                                <input
-                                    class="k-checkbox k-checkbox-md k-rounded-md k-disabled"
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [attr.aria-label]="selectionCheckboxLabel"
-                                    [disabled]="true" />
-                            </span>
+                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                [kendoGridSelectionCheckbox]="rowIndex"
+                                [attr.id]="selectionCheckboxId"
+                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                [disabled]="true"
+                            ></kendo-checkbox>
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
@@ -17636,30 +17598,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoGridFocusable
                     ></kendo-datepicker>
 
-                    <span class="k-checkbox-wrap">
-                        <input
-                            *ngSwitchCase="'boolean'"
-                            type="checkbox"
-                            class="k-checkbox k-checkbox-md k-rounded-md"
-                            [formControl]="$any(formGroup.get(column.field))"
-                            kendoGridFocusable
-                        />
-                    </span>
+                    <kendo-checkbox
+                        *ngSwitchCase="'boolean'"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    ></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))"
                         kendoGridFocusable
-                    />
+                    ></kendo-textbox>
                 </ng-container>
             </ng-container>
         </ng-container>
     `,
                     standalone: true,
                     imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective,
-                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule]
+                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: EditService }, { type: IdService }, { type: ContextService }, { type: undefined, decorators: [{
                     type: Optional
@@ -18106,7 +18062,7 @@ class TableBodyComponent {
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -18183,12 +18139,13 @@ class TableBodyComponent {
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
+            [class.k-expanded]="isDataItem(item) && isExpanded(item)"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -18232,7 +18189,6 @@ class TableBodyComponent {
                     [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
                     [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                    [class.k-touch-action-auto]="!(isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag)"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                 [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
@@ -18247,7 +18203,6 @@ class TableBodyComponent {
                 detailTemplate.showIf(item.data, $any(item).index) &&
                 isExpanded(item)"
             class="k-detail-row"
-            [class.k-alt]="isOdd(item)"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -18255,7 +18210,7 @@ class TableBodyComponent {
                 [logicalSlaveRow]="false"
                 [logicalCellsCount]="1"
             >
-            <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+            <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             <td class="k-hierarchy-cell k-table-td"></td>
             <td class="k-detail-cell k-table-td"
                 [attr.colspan]="columnsSpan"
@@ -18290,7 +18245,7 @@ class TableBodyComponent {
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -18336,7 +18291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalSlaveCellsCount]="unlockedColumnsCount()"
                 [totalColumns]="totalColumns">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -18413,12 +18368,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
+            [class.k-expanded]="isDataItem(item) && isExpanded(item)"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -18462,7 +18418,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
                     [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
-                    [class.k-touch-action-auto]="!(isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag)"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                 [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
@@ -18477,7 +18432,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 detailTemplate.showIf(item.data, $any(item).index) &&
                 isExpanded(item)"
             class="k-detail-row"
-            [class.k-alt]="isOdd(item)"
             kendoGridLogicalRow
                 [dataRowIndex]="$any(item).index"
                 [dataItem]="item.data"
@@ -18485,7 +18439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalSlaveRow]="false"
                 [logicalCellsCount]="1"
             >
-            <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+            <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             <td class="k-hierarchy-cell k-table-td"></td>
             <td class="k-detail-cell k-table-td"
                 [attr.colspan]="columnsSpan"
@@ -18520,7 +18474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
             <ng-container *ngIf="!skipGroupDecoration">
-                <td class="k-group-cell k-table-td" *ngFor="let g of groups"></td>
+                <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
             </ng-container>
             <td class="k-hierarchy-cell k-table-td"
                 *ngIf="detailTemplate?.templateRef"
@@ -19228,8 +19182,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1730722859,
-    version: '17.0.0-develop.37',
+    publishDate: 1730732307,
+    version: '17.0.0-develop.38',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -21841,7 +21795,7 @@ class ListComponent {
         }"
         [scope]="this"
         >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 kendoGridResizableTable
                 [locked]="true"
@@ -21890,7 +21844,7 @@ class ListComponent {
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
         [lockedWidth]="lockedWidth + 1"
     >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 [style.width.px]="nonLockedWidth"
                 #table
@@ -21964,7 +21918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }"
         [scope]="this"
         >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 kendoGridResizableTable
                 [locked]="true"
@@ -22013,7 +21967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
         [lockedWidth]="lockedWidth + 1"
     >
-        <div role="presentation" class="k-grid-table-wrap">
+        <div role="presentation">
             <table
                 [style.width.px]="nonLockedWidth"
                 #table
@@ -28563,7 +28517,7 @@ class GridModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i42.CustomMessagesComponent, i42.PagerInfoComponent, i42.PagerInputComponent, i42.PagerNextButtonsComponent, i42.PagerNumericButtonsComponent, i42.PagerPageSizesComponent, i42.PagerPrevButtonsComponent, i42.PagerComponent, i42.PagerSpacerComponent, i43.ToolBarComponent, i43.ToolbarCustomMessagesComponent, i43.ToolBarButtonComponent, i43.ToolBarButtonGroupComponent, i43.ToolBarDropDownButtonComponent, i43.ToolBarSeparatorComponent, i43.ToolBarSpacerComponent, i43.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent] });
+        ], imports: [GroupHeaderComponent, GroupPanelComponent, TableBodyComponent, CellComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, HeaderComponent, i42.CustomMessagesComponent, i42.PagerInfoComponent, i42.PagerInputComponent, i42.PagerNextButtonsComponent, i42.PagerNumericButtonsComponent, i42.PagerPageSizesComponent, i42.PagerPrevButtonsComponent, i42.PagerComponent, i42.PagerSpacerComponent, i43.ToolBarComponent, i43.ToolbarCustomMessagesComponent, i43.ToolBarButtonComponent, i43.ToolBarButtonGroupComponent, i43.ToolBarDropDownButtonComponent, i43.ToolBarSeparatorComponent, i43.ToolBarSpacerComponent, i43.ToolBarSplitButtonComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, GridComponent, ListComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,
@@ -28701,7 +28655,7 @@ class FilterMenuModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent] });
+        ], imports: [FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuModule, decorators: [{
             type: NgModule,
@@ -28819,7 +28773,7 @@ class HeaderModule {
             MonthViewService,
             YearViewService,
             NavigationService$1
-        ], imports: [GroupHeaderComponent, GroupPanelComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, HeaderComponent] });
+        ], imports: [GroupHeaderComponent, GroupPanelComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, FilterCellWrapperComponent, DateFilterCellComponent, FilterCellOperatorsComponent, FilterCellOperatorsComponent, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuInputWrapperComponent, StringFilterMenuInputComponent, StringFilterMenuComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, DateFilterMenuInputComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, ColumnListComponent, ColumnChooserComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuSortComponent, ColumnMenuComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent, HeaderComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,