@progress/kendo-angular-grid 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/column-menu/column-list.component.mjs

@@ -9,46 +9,27 @@ 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";
 /**
  * @hidden
  */
 export class ColumnListComponent {
-    constructor(element, ngZone, renderer, listNavigationService) {
-        this.element = element;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.listNavigationService = listNavigationService;
-        this.reset = new EventEmitter();
-        this.apply = new EventEmitter();
-        this.columnChange = new EventEmitter();
-        this.autoSync = true;
-        this.allowHideAll = false;
-        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
-        this.unlockedCount = 0;
-        this.domSubscriptions = new Subscription();
-        this.onKeydown = (e) => {
-            if (e.keyCode !== Keys.Tab) {
-                e.preventDefault();
-            }
-            if (e.keyCode === Keys.ArrowDown) {
-                this.listNavigationService.next();
-            }
-            else if (e.keyCode === Keys.ArrowUp) {
-                this.listNavigationService.prev();
-            }
-            else if (e.keyCode === Keys.Space && e.target.classList.contains('k-column-list-item')) {
-                this.listNavigationService.toggleCheckedState();
-            }
-        };
-    }
+    element;
+    ngZone;
+    renderer;
+    listNavigationService;
     get className() {
         return true;
     }
     isChecked(checkbox) {
         return checkbox.checked;
     }
+    reset = new EventEmitter();
+    apply = new EventEmitter();
+    columnChange = new EventEmitter();
     set columns(value) {
         this._columns = value.filter(column => column.includeInChooser !== false);
         this.allColumns = value;
@@ -57,42 +38,68 @@ export class ColumnListComponent {
     get columns() {
         return this._columns;
     }
+    autoSync = true;
+    ariaLabel;
+    allowHideAll = false;
+    applyText;
+    resetText;
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    isLast;
+    isExpanded;
+    service;
+    resetButton;
+    applyButton;
+    options;
+    checkboxes;
+    hasLocked;
+    hasVisibleLocked;
+    unlockedCount = 0;
+    hasUnlockedFiltered;
+    hasFiltered;
+    _columns;
+    allColumns;
+    domSubscriptions = new Subscription();
+    constructor(element, ngZone, renderer, listNavigationService) {
+        this.element = element;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.listNavigationService = listNavigationService;
+    }
     ngOnInit() {
         if (!this.element) {
             return;
         }
         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));
         });
@@ -100,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) {
@@ -121,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);
@@ -151,20 +158,27 @@ export class ColumnListComponent {
             }
         }
     }
-    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);
+    onKeydown = (e) => {
+        if (e.keyCode !== Keys.Tab) {
+            e.preventDefault();
         }
-    }
+        if (e.keyCode === Keys.ArrowDown) {
+            this.listNavigationService.next();
+        }
+        else if (e.keyCode === Keys.ArrowUp) {
+            this.listNavigationService.prev();
+        }
+        else if (e.keyCode === Keys.Space && e.target.classList.contains('k-column-list-item')) {
+            this.listNavigationService.toggleCheckedState();
+        }
+    };
     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);
@@ -194,17 +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);
     }
-}
-ColumnListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
-ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 ɵ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 }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-column-list"
             role="listbox"
@@ -215,14 +229,11 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 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>
@@ -243,8 +254,9 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 (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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnListComponent, decorators: [{
+    `, 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,
             args: [{
                     selector: 'kendo-grid-columnlist',
@@ -260,14 +272,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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>
@@ -290,7 +299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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,
@@ -330,4 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], options: [{
                 type: ViewChildren,
                 args: [ColumnMenuChooserItemCheckedDirective]
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: [CheckBoxComponent]
             }] } });

package/{esm2020 → esm2022}/column-menu/column-locked-change-event.mjs

@@ -6,6 +6,10 @@
  * Arguments for the `columnLockedChange` event.
  */
 export class ColumnLockedChangeEvent {
+    /**
+     * The columns whose locked state is changed.
+     */
+    columns;
     /**
      * @hidden
      */

package/{esm2020 → esm2022}/column-menu/column-menu-autosize-all.component.mjs

@@ -31,10 +31,11 @@ import * as i1 from "../common/provider.service";
  * ```
  */
 export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
+    ctx;
+    displayInlineFlexIcon = displayInlineFlexIcon;
     constructor(ctx) {
         super();
         this.ctx = ctx;
-        this.displayInlineFlexIcon = displayInlineFlexIcon;
     }
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
@@ -48,9 +49,8 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
     autoSizeAllColumns() {
         autoSizeColumn(this.ctx.grid, this.service);
     }
-}
-ColumnMenuAutoSizeAllColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuAutoSizeAllColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuAutoSizeAllColumnsComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuAutoSizeAllColumnsComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             *ngIf="!this.ctx.grid.virtualColumns"
             [text]="ctx.localization.get('autosizeAllColumns')"
@@ -59,7 +59,8 @@ ColumnMenuAutoSizeAllColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
             (itemClick)="autoSizeAllColumns()"
         ></kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-autosize-all-columns',

package/{esm2020 → esm2022}/column-menu/column-menu-autosize.component.mjs

@@ -32,10 +32,15 @@ import * as i1 from "../common/provider.service";
  * ```
  */
 export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
+    ctx;
+    /**
+     * The Grid column instance which will be resized through the auto size column option.
+     */
+    column;
+    maxWidthIcon = maxWidthIcon;
     constructor(ctx) {
         super();
         this.ctx = ctx;
-        this.maxWidthIcon = maxWidthIcon;
     }
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
@@ -49,9 +54,8 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
     autoSizeColumn() {
         autoSizeColumn(this.ctx.grid, this.service, this.column);
     }
-}
-ColumnMenuAutoSizeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuAutoSizeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuAutoSizeColumnComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuAutoSizeColumnComponent, isStandalone: true, selector: "kendo-grid-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             *ngIf="!this.ctx.grid.virtualColumns"
             class="k-grid-columnmenu-autosize-column"
@@ -61,7 +65,8 @@ ColumnMenuAutoSizeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             (itemClick)="autoSizeColumn()"
         ></kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-autosize-column',

package/{esm2020 → esm2022}/column-menu/column-menu-chooser.component.mjs

@@ -30,37 +30,41 @@ import * as i2 from "../common/column-info.service";
  * ```
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
+    ctx;
+    columnInfoService;
+    changeDetector;
+    hostElement;
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies if the content is expanded.
+     * @default false
+     */
+    expanded = false;
+    /**
+     * @hidden
+     */
+    isLast = false;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    get columns() {
+        return this.columnInfoService.leafNamedColumns;
+    }
+    columnsIcon = columnsIcon;
     constructor(ctx, columnInfoService, changeDetector, hostElement) {
         super();
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
         this.hostElement = hostElement;
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Specifies if the content is expanded.
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * @hidden
-         */
-        this.isLast = false;
-        /**
-         * @hidden
-         */
-        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
-        this.columnsIcon = columnsIcon;
-    }
-    get columns() {
-        return this.columnInfoService.leafNamedColumns;
     }
     /**
      * @hidden
@@ -89,9 +93,8 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.expanded = true;
         this.expand.emit();
     }
-}
-ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('columns')"
             icon="columns"
@@ -116,7 +119,8 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
             </ng-template>
         </kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-chooser',

package/{esm2020 → esm2022}/column-menu/column-menu-container.component.mjs

@@ -12,10 +12,13 @@ import * as i1 from "./column-menu.service";
  * @hidden
  */
 export class ColumnMenuContainerComponent {
+    service;
+    ngZone;
+    columnMenuItems;
+    templateMenuItems = [];
     constructor(service, ngZone) {
         this.service = service;
         this.ngZone = ngZone;
-        this.templateMenuItems = [];
         service.columnMenuContainer = this;
     }
     ngAfterViewInit() {
@@ -32,12 +35,12 @@ export class ColumnMenuContainerComponent {
         }
         this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
     }
-}
-ColumnMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuContainerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-container',

package/{esm2020 → esm2022}/column-menu/column-menu-filter.component.mjs

@@ -29,32 +29,34 @@ import * as i1 from "../common/provider.service";
  * ```
  */
 export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
+    ctx;
+    hostElement;
+    /**
+     * Fires when the content is expanded.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the content is collapsed.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Specifies if the content is expanded.
+     * @default false
+     */
+    expanded = false;
+    /**
+     * @hidden
+     */
+    isLast = false;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
+    filterIcon = filterIcon;
     constructor(ctx, hostElement) {
         super();
         this.ctx = ctx;
         this.hostElement = hostElement;
-        /**
-         * Fires when the content is expanded.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the content is collapsed.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Specifies if the content is expanded.
-         * @default false
-         */
-        this.expanded = false;
-        /**
-         * @hidden
-         */
-        this.isLast = false;
-        /**
-         * @hidden
-         */
-        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
-        this.filterIcon = filterIcon;
     }
     /**
      * @hidden
@@ -73,9 +75,8 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.expanded = true;
         this.expand.emit();
     }
-}
-ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuFilterComponent, isStandalone: true, selector: "kendo-grid-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.ContextService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuFilterComponent, isStandalone: true, selector: "kendo-grid-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('filter')"
             icon="filter"
@@ -97,7 +98,8 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </ng-template>
         </kendo-grid-columnmenu-item>
     `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-filter',

package/{esm2020 → esm2022}/column-menu/column-menu-item-base.mjs

@@ -10,9 +10,12 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ColumnMenuItemBase {
-    constructor() {
-        this.hostClass = true;
-    }
+    /**
+     * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
+     * Requires a mandatory input.
+     */
+    service;
+    hostClass = true;
     ngOnInit() {
         if (isDevMode() && !this.service) {
             throw new Error(ColumnMenuErrorMessages.serviceInput);
@@ -24,10 +27,10 @@ export class ColumnMenuItemBase {
     close() {
         this.service.close();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemBase, selector: "kendo-grid-column-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
 }
-ColumnMenuItemBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuItemBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnMenuItemBase, selector: "kendo-grid-column-menu-item-base", inputs: { service: "service" }, host: { properties: { "class.k-columnmenu-item-wrapper": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnMenuItemBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-column-menu-item-base',