@progress/kendo-angular-treelist 18.2.1-develop.3 → 18.3.0-develop.1

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

@@ -2,32 +2,52 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, TemplateRef, HostBinding, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, TemplateRef, HostBinding, ChangeDetectorRef, Optional, isDevMode, ElementRef, ViewChild, Renderer2 } from '@angular/core';
 import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
-import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { filtersByField } from '../filtering/base-filter-cell.component';
-import { hasFilter, hasSort, hasLock, hasColumnChooser } from './utils';
+import { hasFilter, hasSort, hasLock, hasColumnChooser, hasAutoSizeColumn, hasAutoSizeAllColumns } from './utils';
 import { ColumnMenuFilterComponent } from './column-menu-filter.component';
 import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
 import { ColumnMenuLockComponent } from './column-menu-lock.component';
 import { ColumnMenuSortComponent } from './column-menu-sort.component';
+import { ColumnMenuContainerComponent } from './column-menu-container.component';
+import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
+import { ColumnMenuAutoSizeColumnComponent } from './column-menu-autosize.component';
+import { ColumnMenuItemDirective } from './column-menu-item.directive';
+import { NavigationService } from '../navigation/navigation.service';
+import { IdService } from '../common/id.service';
+import { ContextService } from '../common/provider.service';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
+import { Subscription } from 'rxjs';
+import { replaceMessagePlaceholder } from '../utils';
+import { MenuTabbingService } from '../filtering/menu/menu-tabbing.service';
 import * as i0 from "@angular/core";
-import * as i1 from "../common/single-popup.service";
-import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./column-menu.service";
+import * as i1 from "../navigation/navigation.service";
+import * as i2 from "../common/single-popup.service";
+import * as i3 from "../common/provider.service";
+import * as i4 from "./column-menu.service";
+import * as i5 from "../common/id.service";
 const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
+let id = 0;
+const getId = (gridId) => `${gridId}-column-menu-${id++}`;
 /**
  * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 export class ColumnMenuComponent {
+    navigationService;
     popupService;
-    localization;
+    ctx;
     service;
     cdr;
+    renderer;
+    idService;
+    anchor;
+    template;
+    defaultTemplate;
     /**
      * @hidden
      */
@@ -58,6 +78,11 @@ export class ColumnMenuComponent {
      * @hidden
      */
     columnMenuTemplate;
+    /**
+     * @hidden
+     */
+    tabIndex = '-1';
+    moreVerticalIcon = moreVerticalIcon;
     /**
      * @hidden
      */
@@ -66,16 +91,43 @@ export class ColumnMenuComponent {
      * @hidden
      */
     expandedColumns = false;
-    moreVerticalIcon = moreVerticalIcon;
     popupRef;
     closeSubscription;
-    constructor(popupService, localization, service, cdr) {
+    popupSubs = new Subscription();
+    constructor(navigationService, popupService, ctx, service, cdr, renderer, idService) {
+        this.navigationService = navigationService;
         this.popupService = popupService;
-        this.localization = localization;
+        this.ctx = ctx;
         this.service = service;
         this.cdr = cdr;
+        this.renderer = renderer;
+        this.idService = idService;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
+    ngAfterViewInit() {
+        if (this.ctx.treelist.virtualColumns && isDevMode()) {
+            if (this.settings.autoSizeAllColumns) {
+                this.settings.autoSizeAllColumns = false;
+                console.warn(ColumnMenuErrorMessages.autoSizeAllColumns);
+            }
+            if (this.settings.autoSizeColumn) {
+                this.settings.autoSizeColumn = false;
+                console.warn(ColumnMenuErrorMessages.autoSizeColumn);
+            }
+        }
+    }
+    ngOnChanges() {
+        this.service.column = this.column;
+        this.service.sort = this.sort;
+        this.service.filter = this.filter;
+        this.service.sortable = this.sortable;
+    }
+    ngOnDestroy() {
+        this.close();
+        this.closeSubscription.unsubscribe();
+        this.popupSubs?.unsubscribe();
+        this.closeSubscription = this.popupSubs = null;
+    }
     /**
      * @hidden
      */
@@ -107,118 +159,261 @@ export class ColumnMenuComponent {
     get hasLock() {
         return hasLock(this.settings, this.column);
     }
-    ngOnChanges() {
-        this.service.column = this.column;
-        this.service.sort = this.sort;
-        this.service.filter = this.filter;
-        this.service.sortable = this.sortable;
+    /**
+     * @hidden
+     */
+    get hasAutoSizeColumn() {
+        return hasAutoSizeColumn(this.settings);
     }
-    ngOnDestroy() {
-        this.close();
-        this.closeSubscription.unsubscribe();
+    /**
+     * @hidden
+     */
+    get hasAutoSizeAllColumns() {
+        return hasAutoSizeAllColumns(this.settings);
+    }
+    /**
+     * @hidden
+     */
+    get isNavigable() {
+        return this.navigationService.enabled;
     }
     /**
      * @hidden
      */
     toggle(e, anchor, template) {
-        e.preventDefault();
-        this.expandedFilter = !this.hasColumnChooser;
-        this.expandedColumns = !this.hasFilter;
+        if (e) {
+            e.preventDefault();
+            e instanceof KeyboardEvent && e.stopImmediatePropagation();
+        }
+        this.expandedFilter = this.getExpandedState(this.settings.filter);
+        this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASSES);
+        // Needed as changes to 'popupRef' and 'popupId' are not reflected
+        // automatically when the Popup is closed by clicking outside the anchor
+        const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+        if (this.popupRef) {
+            this.popupSubs?.unsubscribe();
+            this.popupSubs = null;
+            this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                this.popupSubs?.unsubscribe();
+                this.popupSubs = null;
+                this.close(true);
+                this.updateAria(ariaRoot);
+            });
+            this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
+                this.popupSubs?.unsubscribe();
+                this.popupSubs = this.popupRef = null;
+                this.updateAria(ariaRoot);
+            }));
+            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
+            if (popupAriaElement) {
+                const popupId = getId(this.idService?.gridId());
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+            }
+        }
+        else {
+            this.focusRoot();
+        }
     }
     /**
      * @hidden
      */
-    close() {
+    close(triggerFocus = false) {
         this.popupService.destroy();
         this.popupRef = null;
         this.cdr.markForCheck();
+        if (!triggerFocus) {
+            return;
+        }
+        this.focusRoot();
     }
     /**
      * @hidden
      */
-    onColumnsExpand() {
-        this.expandedColumns = true;
-        this.expandedFilter = false;
+    get columnMenuTitle() {
+        const localizationMsg = this.ctx.localization.get('columnMenu') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
-    /**
-     * @hidden
-     */
-    onFilterExpand() {
-        this.expandedFilter = true;
-        this.expandedColumns = false;
+    getExpandedState(menuItemSettings) {
+        return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
+    }
+    updateAria(ariaRoot) {
+        ariaRoot && this.renderer.removeAttribute(ariaRoot, 'aria-controls');
+        ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [ColumnMenuService], usesOnChanges: true, ngImport: i0, template: `
+    focusRoot() {
+        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.ColumnMenuService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-treelist-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
+            ColumnMenuService,
+            MenuTabbingService
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
             class="k-grid-column-menu k-grid-header-menu"
             [ngClass]="{ 'k-active': isActive }"
             (click)="toggle($event, anchor, template)"
+            (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
-            tabindex="-1"
-            [attr.title]="localization.get('columnMenu')">
+            [tabindex]="tabIndex"
+            [attr.title]="columnMenuTitle"
+            [attr.aria-expanded]="isNavigable ? undefined : false"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
             <kendo-icon-wrapper
                 name="more-vertical"
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
-            <ng-container [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
-                          [ngTemplateOutletContext]="{ service: service, column: column }">
-            </ng-container>
+            <kendo-treelist-columnmenu-container
+                (keydown.escape)="close(true)"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <ng-container
+                    [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
+                    [ngTemplateOutletContext]="{ service: service, column: column }">
+                </ng-container>
+            </kendo-treelist-columnmenu-container>
         </ng-template>
         <ng-template #defaultTemplate>
-            <kendo-treelist-columnmenu-sort *ngIf="hasSort" [service]="service">
-            </kendo-treelist-columnmenu-sort>
-            <kendo-treelist-columnmenu-lock *ngIf="hasLock" [service]="service">
-            </kendo-treelist-columnmenu-lock>
-            <kendo-treelist-columnmenu-chooser *ngIf="hasColumnChooser" [service]="service"
-                [expanded]="expandedColumns" (expand)="onColumnsExpand()">
-            </kendo-treelist-columnmenu-chooser>
-            <kendo-treelist-columnmenu-filter *ngIf="hasFilter" [service]="service"
-                [expanded]="expandedFilter" (expand)="onFilterExpand()">
-            </kendo-treelist-columnmenu-filter>
+            <kendo-treelist-columnmenu-container
+                (keydown.escape)="close(true)"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-treelist-columnmenu-sort #sortItem [kendoTreeListColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
+                </kendo-treelist-columnmenu-sort>
+                <kendo-treelist-columnmenu-lock #lockItem *ngIf="hasLock" [kendoTreeListColumnMenuItem]="lockItem" [service]="service">
+                </kendo-treelist-columnmenu-lock>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
+                <kendo-treelist-columnmenu-chooser
+                    #chooserItem
+                    *ngIf="hasColumnChooser"
+                    [kendoTreeListColumnMenuItem]="chooserItem"
+                    [service]="service"
+                    [expanded]="expandedColumns">
+                </kendo-treelist-columnmenu-chooser>
+                <kendo-treelist-columnmenu-autosize-column
+                    #autoSizeColumnItem
+                    *ngIf="hasAutoSizeColumn"
+                    [service]="service"
+                    [kendoTreeListColumnMenuItem]="autoSizeColumnItem"
+                    [column]="column"
+                >
+                </kendo-treelist-columnmenu-autosize-column>
+
+                <kendo-treelist-columnmenu-autosize-all-columns
+                    #autoSizeAllColumnsItem
+                    *ngIf="hasAutoSizeAllColumns"
+                    [service]="service"
+                    [kendoTreeListColumnMenuItem]="autoSizeAllColumnsItem"
+                >
+                </kendo-treelist-columnmenu-autosize-all-columns>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
+                <kendo-treelist-columnmenu-filter
+                    #filterItem
+                    *ngIf="hasFilter"
+                    [kendoTreeListColumnMenuItem]="filterItem"
+                    [service]="service"
+                    [expanded]="expandedFilter">
+                </kendo-treelist-columnmenu-filter>
+            </kendo-treelist-columnmenu-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-treelist-columnmenu-container" }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-treelist-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-treelist-columnmenu-autosize-column", inputs: ["column"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoTreeListColumnMenuItem]", inputs: ["kendoTreeListColumnMenuItem"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
-                    providers: [ColumnMenuService],
+                    providers: [
+                        ColumnMenuService,
+                        MenuTabbingService
+                    ],
                     selector: 'kendo-treelist-column-menu',
                     template: `
         <a #anchor
             class="k-grid-column-menu k-grid-header-menu"
             [ngClass]="{ 'k-active': isActive }"
             (click)="toggle($event, anchor, template)"
+            (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
-            tabindex="-1"
-            [attr.title]="localization.get('columnMenu')">
+            [tabindex]="tabIndex"
+            [attr.title]="columnMenuTitle"
+            [attr.aria-expanded]="isNavigable ? undefined : false"
+            [attr.aria-haspopup]="isNavigable ? undefined : 'dialog'">
             <kendo-icon-wrapper
                 name="more-vertical"
                 [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
-            <ng-container [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
-                          [ngTemplateOutletContext]="{ service: service, column: column }">
-            </ng-container>
+            <kendo-treelist-columnmenu-container
+                (keydown.escape)="close(true)"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <ng-container
+                    [ngTemplateOutlet]="column.columnMenuTemplateRef || columnMenuTemplate || defaultTemplate"
+                    [ngTemplateOutletContext]="{ service: service, column: column }">
+                </ng-container>
+            </kendo-treelist-columnmenu-container>
         </ng-template>
         <ng-template #defaultTemplate>
-            <kendo-treelist-columnmenu-sort *ngIf="hasSort" [service]="service">
-            </kendo-treelist-columnmenu-sort>
-            <kendo-treelist-columnmenu-lock *ngIf="hasLock" [service]="service">
-            </kendo-treelist-columnmenu-lock>
-            <kendo-treelist-columnmenu-chooser *ngIf="hasColumnChooser" [service]="service"
-                [expanded]="expandedColumns" (expand)="onColumnsExpand()">
-            </kendo-treelist-columnmenu-chooser>
-            <kendo-treelist-columnmenu-filter *ngIf="hasFilter" [service]="service"
-                [expanded]="expandedFilter" (expand)="onFilterExpand()">
-            </kendo-treelist-columnmenu-filter>
+            <kendo-treelist-columnmenu-container
+                (keydown.escape)="close(true)"
+                (keydown.enter)="$event.stopImmediatePropagation()">
+                <kendo-treelist-columnmenu-sort #sortItem [kendoTreeListColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="service">
+                </kendo-treelist-columnmenu-sort>
+                <kendo-treelist-columnmenu-lock #lockItem *ngIf="hasLock" [kendoTreeListColumnMenuItem]="lockItem" [service]="service">
+                </kendo-treelist-columnmenu-lock>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
+                <kendo-treelist-columnmenu-chooser
+                    #chooserItem
+                    *ngIf="hasColumnChooser"
+                    [kendoTreeListColumnMenuItem]="chooserItem"
+                    [service]="service"
+                    [expanded]="expandedColumns">
+                </kendo-treelist-columnmenu-chooser>
+                <kendo-treelist-columnmenu-autosize-column
+                    #autoSizeColumnItem
+                    *ngIf="hasAutoSizeColumn"
+                    [service]="service"
+                    [kendoTreeListColumnMenuItem]="autoSizeColumnItem"
+                    [column]="column"
+                >
+                </kendo-treelist-columnmenu-autosize-column>
+
+                <kendo-treelist-columnmenu-autosize-all-columns
+                    #autoSizeAllColumnsItem
+                    *ngIf="hasAutoSizeAllColumns"
+                    [service]="service"
+                    [kendoTreeListColumnMenuItem]="autoSizeAllColumnsItem"
+                >
+                </kendo-treelist-columnmenu-autosize-all-columns>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
+                <kendo-treelist-columnmenu-filter
+                    #filterItem
+                    *ngIf="hasFilter"
+                    [kendoTreeListColumnMenuItem]="filterItem"
+                    [service]="service"
+                    [expanded]="expandedFilter">
+                </kendo-treelist-columnmenu-filter>
+            </kendo-treelist-columnmenu-container>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [NgClass, IconWrapperComponent, NgTemplateOutlet, NgIf, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent, ColumnMenuFilterComponent]
+                    imports: [NgClass, IconWrapperComponent, NgTemplateOutlet, NgIf, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuChooserComponent,
+                        ColumnMenuFilterComponent, ColumnMenuContainerComponent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuItemDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }, { type: i3.ColumnMenuService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.ColumnMenuService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { anchor: [{
+                type: ViewChild,
+                args: ['anchor', { static: true }]
+            }], template: [{
+                type: ViewChild,
+                args: ['template', { static: true, read: TemplateRef }]
+            }], defaultTemplate: [{
+                type: ViewChild,
+                args: ['defaultTemplate', { static: true, read: TemplateRef }]
+            }], standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {
@@ -235,4 +430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], columnMenuTemplate: [{
                 type: Input
+            }], tabIndex: [{
+                type: Input
             }] } });

package/esm2022/column-menu/column-menu.service.mjs

@@ -3,7 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, EventEmitter } from '@angular/core';
+import { MenuTabbingService } from '../filtering/menu/menu-tabbing.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../filtering/menu/menu-tabbing.service";
 /**
  * Represents the service that is passed to the
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
@@ -21,6 +23,10 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class ColumnMenuService {
+    /**
+     * @hidden
+     */
+    menuTabbingService;
     /**
      * @hidden
      */
@@ -41,15 +47,25 @@ export class ColumnMenuService {
      * @hidden
      */
     sortable;
+    /**
+     * @hidden
+     */
+    columnMenuContainer;
+    /**
+     * @hidden
+     */
+    constructor(menuTabbingService) {
+        this.menuTabbingService = menuTabbingService;
+    }
     /**
      * Closes the column menu.
      */
     close() {
         this.closeMenu.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService, deps: [{ token: i1.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.MenuTabbingService }]; } });

package/esm2022/column-menu/utils.mjs

@@ -21,4 +21,24 @@ export const hasColumnChooser = (settings) => settings.columnChooser !== false;
 /**
  * @hidden
  */
-export const hasItems = (settings, column) => hasColumnChooser(settings) || hasLock(settings, column) || hasSort(settings, column) || hasFilter(settings, column);
+export const hasAutoSizeColumn = (settings) => settings.autoSizeColumn;
+/**
+ * @hidden
+ */
+export const hasAutoSizeAllColumns = (settings) => settings.autoSizeAllColumns;
+/**
+ * @hidden
+ */
+export const autoSizeColumn = (treelist, service, column) => {
+    column ? treelist.autoFitColumn(column) : treelist.autoFitColumns();
+    service.close();
+};
+/**
+ * @hidden
+ */
+export const hasItems = (settings, column) => hasAutoSizeAllColumns(settings) ||
+    hasColumnChooser(settings) ||
+    hasFilter(settings, column) ||
+    hasAutoSizeColumn(settings) ||
+    hasLock(settings, column) ||
+    hasSort(settings, column);

package/esm2022/common/error-messages.mjs

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const ColumnMenuErrorMessages = {
+    autoSizeColumn: `The auto size column does not work with enabled virtual columns.
+    See https://www.telerik.com/kendo-angular-ui/components/treelist/accessories/column-menu/#toc-autosize-column-item.`,
+    autoSizeAllColumns: `The auto size all columns does not work with enabled virtual columns.
+    See https://www.telerik.com/kendo-angular-ui/components/treelist/accessories/column-menu/#toc-autosize-all-columns-item.`,
+    serviceInput: `The service input of the predefined column menu components is mandatory.
+    See https://www.telerik.com/kendo-angular-ui/components/treelist/accessories/column-menu/#toc-customizing-the-content.`
+};

package/esm2022/common/id.service.mjs

@@ -17,6 +17,15 @@ export class IdService {
     cellId(rowIndex, colIndex) {
         return `${this.prefix}-r${rowIndex}c${colIndex}`;
     }
+    gridId() {
+        return this.prefix;
+    }
+    selectionCheckboxId(itemIndex) {
+        return `${this.prefix}-checkbox${itemIndex}`;
+    }
+    selectAllCheckboxId() {
+        return `${this.prefix}-select-all`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService });
 }

package/esm2022/common/provider.service.mjs

@@ -4,7 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, Renderer2 } from '@angular/core';
 import { TreeListToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
 /**
  * @hidden
  *
@@ -15,16 +17,18 @@ import * as i0 from "@angular/core";
  * and a avoids dependency cycles between components.
  */
 export class ContextService {
+    localization;
     treelist;
     topToolbarNavigation;
     bottomToolbarNavigation;
-    constructor(renderer) {
+    constructor(renderer, localization) {
+        this.localization = localization;
         this.topToolbarNavigation = new TreeListToolbarNavigationService(renderer);
         this.bottomToolbarNavigation = new TreeListToolbarNavigationService(renderer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContextService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });

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

@@ -10,6 +10,7 @@ import { BooleanFilterComponent } from '../boolean-filter.component';
 import { replaceMessagePlaceholder } from '../../utils';
 import { FilterInputDirective } from '../filter-input.directive';
 import { FilterCellWrapperComponent } from './filter-cell-wrapper.component';
+import { FocusableDirective } from '../../navigation/focusable.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -62,6 +63,7 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
             [defaultOperator]="operator">
             <kendo-dropdownlist
                 kendoFilterInput
+                kendoTreeListFocusable
                 [defaultItem]="defaultItem"
                 [columnLabel]="columnLabel"
                 [data]="items"
@@ -72,7 +74,7 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
                 [value]="currentFilter?.value">
             </kendo-dropdownlist>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
             type: Component,
@@ -86,6 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [defaultOperator]="operator">
             <kendo-dropdownlist
                 kendoFilterInput
+                kendoTreeListFocusable
                 [defaultItem]="defaultItem"
                 [columnLabel]="columnLabel"
                 [data]="items"
@@ -98,6 +101,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </kendo-treelist-filter-wrapper-cell>
     `,
                     standalone: true,
-                    imports: [FilterCellWrapperComponent, DropDownListComponent, FilterInputDirective]
+                    imports: [FilterCellWrapperComponent, DropDownListComponent, FilterInputDirective, FocusableDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });