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

package/column-menu/column-chooser-item-checked.directive.d.ts

@@ -2,19 +2,20 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, Renderer2 } from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class ColumnMenuChooserItemCheckedDirective {
     host: ElementRef;
-    private renderer;
     kendoColumnMenuChooserItemChecked: boolean;
+    checkbox: CheckBoxComponent;
     private checkedChangeSub;
-    constructor(host: ElementRef, renderer: Renderer2);
+    constructor(host: ElementRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuChooserItemCheckedDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnMenuChooserItemCheckedDirective, "[kendoColumnMenuChooserItemChecked]", never, { "kendoColumnMenuChooserItemChecked": { "alias": "kendoColumnMenuChooserItemChecked"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnMenuChooserItemCheckedDirective, "[kendoColumnMenuChooserItemChecked]", never, { "kendoColumnMenuChooserItemChecked": { "alias": "kendoColumnMenuChooserItemChecked"; "required": false; }; }, {}, ["checkbox"], never, true, never>;
 }

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

@@ -33,6 +33,7 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     resetButton: ElementRef;
     private applyButton;
     private options;
+    private checkboxes;
     private hasLocked;
     private hasVisibleLocked;
     private unlockedCount;
@@ -51,7 +52,6 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     applyChanges(): void;
     onTab(e: Event): void;
     onKeydown: (e: KeyboardEvent) => void;
-    private forEachCheckBox;
     private updateDisabled;
     private updateColumnState;
     private setDisabledState;

package/esm2022/column-menu/column-chooser-item-checked.directive.mjs

@@ -2,7 +2,8 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
+import { ContentChild, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
@@ -10,23 +11,22 @@ import * as i0 from "@angular/core";
  */
 export 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,
@@ -34,9 +34,12 @@ 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]
             }] } });

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

@@ -9,6 +9,8 @@ import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-che
 import { Keys } from '@progress/kendo-angular-common';
 import { Subscription } from 'rxjs';
 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";
 import * as i1 from "./column-list-kb-nav.service";
 /**
@@ -48,6 +50,7 @@ export class ColumnListComponent {
     resetButton;
     applyButton;
     options;
+    checkboxes;
     hasLocked;
     hasVisibleLocked;
     unlockedCount = 0;
@@ -68,36 +71,35 @@ export 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));
         });
@@ -105,7 +107,7 @@ export 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) {
@@ -126,17 +128,17 @@ export 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);
@@ -170,20 +172,13 @@ export 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);
@@ -213,16 +208,17 @@ export 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: i1.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"
@@ -233,14 +229,11 @@ export 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>
@@ -261,7 +254,7 @@ export 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,
@@ -279,14 +272,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>
@@ -309,7 +299,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: i1.ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,
@@ -349,4 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], options: [{
                 type: ViewChildren,
                 args: [ColumnMenuChooserItemCheckedDirective]
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: [CheckBoxComponent]
             }] } });

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 // eslint-disable no-access-missing-member
-import { Input, HostBinding, Component } from '@angular/core';
+import { Input, Component } from '@angular/core';
 import { ColumnComponent } from '../columns/column.component';
 import { FilterService } from './filter.service';
 import { BaseFilterCellComponent } from './base-filter-cell.component';
@@ -16,12 +16,6 @@ import * as i2 from "../common/provider.service";
  */
 export class BooleanFilterComponent extends BaseFilterCellComponent {
     ctx;
-    /**
-     * @hidden
-     */
-    get hostClasses() {
-        return true;
-    }
     /**
      * The column with which the filter is associated.
      * @type {ColumnComponent}
@@ -76,7 +70,7 @@ export 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: i1.FilterService }, { token: i2.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,
@@ -84,9 +78,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-grid-boolean-filter-base',
                     template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.ContextService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-filtercell-boolean']
-            }], column: [{
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.ContextService }]; }, propDecorators: { column: [{
                 type: Input
             }] } });

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

@@ -87,7 +87,8 @@ export 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"] }] });
 }
@@ -110,7 +111,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,

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

@@ -46,14 +46,12 @@ export class FilterRowComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: i1.ContextService }, { token: i2.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>
@@ -78,14 +76,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>

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

@@ -11,7 +11,7 @@ import { replaceMessagePlaceholder } from '../../utils';
 import { MenuTabbingService } from './menu-tabbing.service';
 import { ContextService } from '../../common/provider.service';
 import { NgFor } from '@angular/common';
-import { RadioButtonDirective } from '@progress/kendo-angular-inputs';
+import { RadioButtonComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/provider.service";
 /**
@@ -80,7 +80,7 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
             operator: "eq",
             value: value
         }));
-        this.filterService.menuTabbingService.firstFocusable = input;
+        this.filterService.menuTabbingService.firstFocusable = input.hostElement.nativeElement;
     }
     /**
      * @hidden
@@ -109,21 +109,20 @@ export 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,
@@ -132,23 +131,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: i1.ContextService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

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

@@ -90,7 +90,7 @@ export class FilterMenuModule {
             MonthViewService,
             YearViewService,
             NavigationService
-        ], imports: [i15.FilterCellOperatorsComponent, i35.FilterMenuComponent, i36.FilterMenuContainerComponent, i37.FilterMenuInputWrapperComponent, i38.StringFilterMenuInputComponent, i39.StringFilterMenuComponent, i41.NumericFilterMenuComponent, i42.NumericFilterMenuInputComponent, i43.DateFilterMenuInputComponent, i44.DateFilterMenuComponent] });
+        ], imports: [i15.FilterCellOperatorsComponent, i35.FilterMenuComponent, i36.FilterMenuContainerComponent, i37.FilterMenuInputWrapperComponent, i38.StringFilterMenuInputComponent, i39.StringFilterMenuComponent, i41.NumericFilterMenuComponent, i42.NumericFilterMenuInputComponent, i43.DateFilterMenuInputComponent, i44.DateFilterMenuComponent, i46.BooleanFilterMenuComponent] });
 }
 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

@@ -11,7 +11,7 @@ import { ContextService } from '../../common/provider.service';
 import { FilterInputDirective } from '../filter-input.directive';
 import { FormsModule } from '@angular/forms';
 import { FilterMenuInputWrapperComponent } from './filter-menu-input-wrapper.component';
-import { TextBoxDirective } from '@progress/kendo-angular-inputs';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/provider.service";
 import * as i2 from "@angular/forms";
@@ -49,15 +49,15 @@ export 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: 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: 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-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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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,
@@ -74,17 +74,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: i1.ContextService }]; }, propDecorators: { operators: [{
                 type: Input

package/esm2022/grid.module.mjs

@@ -176,7 +176,7 @@ export class GridModule {
             MonthViewService,
             YearViewService,
             NavigationService
-        ], imports: [i4.GroupHeaderComponent, i5.GroupPanelComponent, i25.TableBodyComponent, i27.CellComponent, i28.EditCommandDirective, i29.CancelCommandDirective, i30.SaveCommandDirective, i31.RemoveCommandDirective, i32.AddCommandDirective, i37.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, i47.StringFilterCellComponent, i48.NumericFilterCellComponent, i49.AutoCompleteFilterCellComponent, i50.BooleanFilterCellComponent, i52.FilterCellWrapperComponent, i53.DateFilterCellComponent, i54.FilterCellOperatorsComponent, i54.FilterCellOperatorsComponent, i74.FilterMenuComponent, i75.FilterMenuContainerComponent, i76.FilterMenuInputWrapperComponent, i77.StringFilterMenuInputComponent, i78.StringFilterMenuComponent, i80.NumericFilterMenuComponent, i81.NumericFilterMenuInputComponent, i82.DateFilterMenuInputComponent, i83.DateFilterMenuComponent, i90.ColumnChooserComponent, i91.ColumnMenuChooserComponent, i92.ColumnMenuFilterComponent, i93.ColumnMenuItemComponent, i95.ColumnMenuSortComponent, i96.ColumnMenuComponent, i97.ColumnMenuLockComponent, i101.ColumnMenuStickComponent, i102.ColumnMenuPositionComponent, i103.ColumnMenuAutoSizeColumnComponent, i104.ColumnMenuAutoSizeAllColumnsComponent, i105.GridComponent, i106.ListComponent] });
+        ], imports: [i4.GroupHeaderComponent, i5.GroupPanelComponent, i25.TableBodyComponent, i27.CellComponent, i28.EditCommandDirective, i29.CancelCommandDirective, i30.SaveCommandDirective, i31.RemoveCommandDirective, i32.AddCommandDirective, i37.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, i47.StringFilterCellComponent, i48.NumericFilterCellComponent, i49.AutoCompleteFilterCellComponent, i50.BooleanFilterCellComponent, i52.FilterCellWrapperComponent, i53.DateFilterCellComponent, i54.FilterCellOperatorsComponent, i54.FilterCellOperatorsComponent, i74.FilterMenuComponent, i75.FilterMenuContainerComponent, i76.FilterMenuInputWrapperComponent, i77.StringFilterMenuInputComponent, i78.StringFilterMenuComponent, i80.NumericFilterMenuComponent, i81.NumericFilterMenuInputComponent, i82.DateFilterMenuInputComponent, i83.DateFilterMenuComponent, i85.BooleanFilterMenuComponent, i89.ColumnListComponent, i90.ColumnChooserComponent, i91.ColumnMenuChooserComponent, i92.ColumnMenuFilterComponent, i93.ColumnMenuItemComponent, i95.ColumnMenuSortComponent, i96.ColumnMenuComponent, i97.ColumnMenuLockComponent, i101.ColumnMenuStickComponent, i102.ColumnMenuPositionComponent, i103.ColumnMenuAutoSizeColumnComponent, i104.ColumnMenuAutoSizeAllColumnsComponent, i105.GridComponent, i106.ListComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,

package/esm2022/grouping/group-header.component.mjs

@@ -114,7 +114,7 @@ export class GroupHeaderComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderComponent, deps: [{ token: i1.GroupsService }, { token: i2.GroupInfoService }, { token: i3.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>
@@ -189,7 +189,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>

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

@@ -6,9 +6,10 @@ import { closest, findFocusable, isVisible, matchesNodeName } from '../rendering
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 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
  */