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

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

@@ -2,7 +2,7 @@
 * 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, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
@@ -20,12 +20,12 @@ import * as i2 from "../common/column-info.service";
  *
  * To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
  * that is passed by the template to the service input of the `kendo-treelist-columnmenu-chooser` component.
- *
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     localization;
     columnInfoService;
     changeDetector;
+    hostElement;
     /**
      * Fires when the content is expanded.
      */
@@ -42,16 +42,21 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     /**
      * @hidden
      */
-    actionsClass = 'k-actions';
+    isLast = false;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
     get columns() {
         return this.columnInfoService.leafNamedColumns;
     }
     columnsIcon = columnsIcon;
-    constructor(localization, columnInfoService, changeDetector) {
+    constructor(localization, columnInfoService, changeDetector, hostElement) {
         super();
         this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
+        this.hostElement = hostElement;
     }
     /**
      * @hidden
@@ -63,28 +68,49 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
             this.columnInfoService.changeVisibility(changed);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-chooser", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.expanded = false;
+        if (this.isLast) {
+            this.service.menuTabbingService.lastFocusable = this.hostElement.nativeElement.querySelector('.k-columnmenu-item');
+        }
+        this.collapse.emit();
+    }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this.expanded = true;
+        this.expand.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { 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-treelist-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-treelist-columnmenu-item
             [text]="localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
             [expanded]="expanded"
-            (collapse)="collapse.emit()"
-            (expand)="expand.emit()">
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                 <kendo-treelist-columnlist
                     [applyText]="localization.get('columnsApply')"
                     [resetText]="localization.get('columnsReset')"
+                    [ariaLabel]="localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
                     [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    [service]="service"
                     (apply)="onApply($event)">
                 </kendo-treelist-columnlist>
             </ng-template>
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
@@ -96,16 +122,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             icon="columns"
             [svgIcon]="columnsIcon"
             [expanded]="expanded"
-            (collapse)="collapse.emit()"
-            (expand)="expand.emit()">
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                 <kendo-treelist-columnlist
                     [applyText]="localization.get('columnsApply')"
                     [resetText]="localization.get('columnsReset')"
+                    [ariaLabel]="localization.get('columns')"
                     [columns]="columns"
                     [autoSync]="false"
                     [allowHideAll]="false"
                     [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    [service]="service"
                     (apply)="onApply($event)">
                 </kendo-treelist-columnlist>
             </ng-template>
@@ -114,10 +144,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnListComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output
             }], expanded: [{
                 type: Input
+            }], isLast: [{
+                type: Input
             }] } });

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

@@ -0,0 +1,58 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ContentChildren, Inject, NgZone, QueryList } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { ColumnMenuService } from './column-menu.service';
+import { ColumnMenuItemDirective } from './column-menu-item.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./column-menu.service";
+/**
+ * @hidden
+ */
+export class ColumnMenuContainerComponent {
+    service;
+    ngZone;
+    columnMenuItems;
+    templateMenuItems = [];
+    constructor(service, ngZone) {
+        this.service = service;
+        this.ngZone = ngZone;
+        service.columnMenuContainer = this;
+    }
+    ngAfterViewInit() {
+        if (this.columnMenuItems.length) {
+            this.columnMenuItems.first.isFirst = true;
+            this.columnMenuItems.last.isLast = true;
+        }
+        else if (this.templateMenuItems.length) {
+            this.templateMenuItems[0].isFirst = true;
+            this.templateMenuItems[this.templateMenuItems.length - 1].isLast = true;
+        }
+        else {
+            return;
+        }
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
+    }
+    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-treelist-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: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-columnmenu-container',
+                    template: `
+        <ng-content></ng-content>
+    `,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ColumnMenuService }, { type: i0.NgZone, decorators: [{
+                    type: Inject,
+                    args: [NgZone]
+                }] }]; }, propDecorators: { columnMenuItems: [{
+                type: ContentChildren,
+                args: [ColumnMenuItemDirective, { descendants: true }]
+            }] } });

package/esm2022/column-menu/column-menu-expandable-item.interface.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

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

@@ -2,7 +2,7 @@
 * 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, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { filterIcon } from '@progress/kendo-svg-icons';
@@ -22,6 +22,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  */
 export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
     localization;
+    hostElement;
     /**
      * Fires when the content is expanded.
      */
@@ -38,31 +39,57 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
     /**
      * @hidden
      */
-    actionsClass = 'k-actions';
+    isLast = false;
+    /**
+     * @hidden
+     */
+    actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
     filterIcon = filterIcon;
-    constructor(localization) {
+    constructor(localization, hostElement) {
         super();
         this.localization = localization;
+        this.hostElement = hostElement;
+    }
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.expanded = false;
+        if (this.isLast) {
+            this.service.menuTabbingService.lastFocusable = this.hostElement.nativeElement.querySelector('.k-columnmenu-item');
+        }
+        this.collapse.emit();
+    }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this.expanded = true;
+        this.expand.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuFilterComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-filter", inputs: { expanded: "expanded" }, 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.LocalizationService }, { 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-treelist-columnmenu-filter", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-treelist-columnmenu-item
             [text]="localization.get('filter')"
             icon="filter"
             [svgIcon]="filterIcon"
             [expanded]="expanded"
-            (collapse)="collapse.emit()"
-            (expand)="expand.emit()">
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
-                    <kendo-treelist-filter-menu-container
-                        [column]="service.column"
-                        [filter]="service.filter"
-                        [actionsClass]="actionsClass"
-                        (close)="close()">
-                    </kendo-treelist-filter-menu-container>
-                </ng-template>
+                <kendo-treelist-filter-menu-container
+                    [column]="service.column"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [filter]="service.filter"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-treelist-filter-menu-container>
+            </ng-template>
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
@@ -74,25 +101,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             icon="filter"
             [svgIcon]="filterIcon"
             [expanded]="expanded"
-            (collapse)="collapse.emit()"
-            (expand)="expand.emit()">
+            (collapse)="onCollapse()"
+            (expand)="onExpand()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
-                    <kendo-treelist-filter-menu-container
-                        [column]="service.column"
-                        [filter]="service.filter"
-                        [actionsClass]="actionsClass"
-                        (close)="close()">
-                    </kendo-treelist-filter-menu-container>
-                </ng-template>
+                <kendo-treelist-filter-menu-container
+                    [column]="service.column"
+                    [menuTabbingService]="service.menuTabbingService"
+                    [filter]="service.filter"
+                    [actionsClass]="actionsClass"
+                    [isLast]="isLast"
+                    [isExpanded]="expanded"
+                    (keydown.shift.tab)="$event.stopImmediatePropagation()"
+                    (close)="close()">
+                </kendo-treelist-filter-menu-container>
+            </ng-template>
         </kendo-treelist-columnmenu-item>
     `,
                     standalone: true,
                     imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, FilterMenuContainerComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output
             }], expanded: [{
                 type: Input
+            }], isLast: [{
+                type: Input
             }] } });

package/esm2022/column-menu/column-menu-item-base.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Directive, HostBinding, Input, isDevMode } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
+import { ColumnMenuErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -17,7 +18,7 @@ export class ColumnMenuItemBase {
     hostClass = true;
     ngOnInit() {
         if (isDevMode() && !this.service) {
-            throw new Error('The service input of the predefined column menu components is mandatory.');
+            throw new Error(ColumnMenuErrorMessages.serviceInput);
         }
     }
     /**

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

@@ -8,6 +8,8 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
 import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import { ColumnMenuService } from './column-menu.service';
+import { guid } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 /**
  * Represents an item that can be placed inside a
@@ -61,8 +63,14 @@ export class ColumnMenuItemComponent {
      * Specifies if the item is expanded.
      */
     expanded;
+    /**
+     * Represents the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) class.
+     * Required to include the item in the column menu keyboard navigation sequence.
+     */
+    service;
     contentTemplate;
     contentState = 'collapsed';
+    contentId;
     chevronUpIcon = chevronUpIcon;
     chevronDownIcon = chevronDownIcon;
     get expandedIcon() {
@@ -71,6 +79,9 @@ export class ColumnMenuItemComponent {
     get expandedSvgIcon() {
         return this.expanded ? this.chevronUpIcon : this.chevronDownIcon;
     }
+    ngAfterViewInit() {
+        this.contentTemplate && (this.contentId = `k-${guid()}`);
+    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -96,13 +107,21 @@ export class ColumnMenuItemComponent {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div *ngIf="contentTemplate; else content" class="k-expander">
             <ng-container [ngTemplateOutlet]="content"></ng-container>
         </div>
 
         <ng-template #content>
-            <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
+            <div
+                class="k-columnmenu-item"
+                (click)="onClick($event)"
+                (keydown.enter)="onClick($event)"
+                [class.k-selected]="selected"
+                [class.k-disabled]="disabled"
+                role="button"
+                [attr.aria-expanded]="expanded"
+                [attr.aria-controls]="expanded ? contentId : undefined">
                 <kendo-icon-wrapper
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
@@ -115,7 +134,7 @@ export class ColumnMenuItemComponent {
                     </kendo-icon-wrapper>
                 </span>
             </div>
-            <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+            <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
                 <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
                 </ng-container>
             </div>
@@ -177,7 +196,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
 
         <ng-template #content>
-            <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
+            <div
+                class="k-columnmenu-item"
+                (click)="onClick($event)"
+                (keydown.enter)="onClick($event)"
+                [class.k-selected]="selected"
+                [class.k-disabled]="disabled"
+                role="button"
+                [attr.aria-expanded]="expanded"
+                [attr.aria-controls]="expanded ? contentId : undefined">
                 <kendo-icon-wrapper
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
@@ -190,7 +217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </kendo-icon-wrapper>
                 </span>
             </div>
-            <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
+            <div *ngIf="contentTemplate" [attr.id]="contentId" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
                 <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
                 </ng-container>
             </div>
@@ -217,6 +244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], service: [{
+                type: Input
             }], contentTemplate: [{
                 type: ContentChild,
                 args: [ColumnMenuItemContentTemplateDirective]

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

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, ElementRef, Input, NgZone, Renderer2 } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Keys } from '@progress/kendo-angular-common';
+import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
+import { ColumnMenuFilterComponent } from './column-menu-filter.component';
+import * as i0 from "@angular/core";
+export class ColumnMenuItemDirective {
+    hostElement;
+    renderer;
+    ngZone;
+    /**
+     * The reference to the TreeList column menu item. Required to include the item in the built-in keyboard navigation.
+     */
+    menuItemComponent;
+    firstFocusableElement;
+    lastFocusableElement;
+    /**
+     * @hidden
+     */
+    set isFirst(value) {
+        if (value) {
+            const focusableElement = this.columnMenuItems[0];
+            this.menuItemComponent.service.menuTabbingService.firstFocusable = focusableElement;
+            this.ngZone.runOutsideAngular(() => {
+                const firstItemKeydownSub = this.renderer.listen(focusableElement, 'keydown', this.onTab);
+                this.subs.add(firstItemKeydownSub);
+            });
+        }
+        this._isFirst = value;
+    }
+    /**
+     * @hidden
+     */
+    get isFirst() {
+        return this._isFirst;
+    }
+    /**
+     * @hidden
+     */
+    set isLast(value) {
+        if (!this.columnMenuItems) {
+            return;
+        }
+        if (value) {
+            const lastFocusableElement = this.getLastColumnMenuItem();
+            this.menuItemComponent.service.menuTabbingService.lastFocusable = lastFocusableElement;
+            this.ngZone.runOutsideAngular(() => {
+                const lastItemKeydownSub = this.renderer.listen(lastFocusableElement, 'keydown', this.onTab);
+                this.subs.add(lastItemKeydownSub);
+            });
+            if (this.isExpandableItem()) {
+                this.menuItemComponent.isLast = true;
+            }
+        }
+        this._isLast = value;
+    }
+    /**
+     * @hidden
+     */
+    get isLast() {
+        return this._isLast;
+    }
+    _isFirst = false;
+    _isLast = false;
+    columnMenuItems;
+    subs = new Subscription();
+    constructor(hostElement, renderer, ngZone) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+    }
+    ngAfterViewInit() {
+        this.columnMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
+        [].slice.apply(this.columnMenuItems).forEach(el => this.renderer.setAttribute(el, 'tabindex', '0'));
+        if (this.menuItemComponent instanceof ColumnMenuFilterComponent) {
+            this.menuItemComponent.service.menuTabbingService.isColumnMenu = true;
+        }
+        this.menuItemComponent.service?.columnMenuContainer.templateMenuItems.push(this);
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    onTab = (e) => {
+        if (e.keyCode !== Keys.Tab) {
+            return;
+        }
+        if (this.isFirst && e.shiftKey && e.target === this.columnMenuItems[0]) {
+            e.preventDefault();
+            this.menuItemComponent.service.menuTabbingService.lastFocusable.focus();
+        }
+        if (this.isLast && !e.shiftKey) {
+            const lastColumnMenuItem = this.getLastColumnMenuItem();
+            const isExpanded = this.menuItemComponent.expanded;
+            if (lastColumnMenuItem === e.target && !isExpanded) {
+                e.preventDefault();
+                this.menuItemComponent.service.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    };
+    getLastColumnMenuItem() {
+        return (this.columnMenuItems.length === 1 ? this.columnMenuItems[0] : this.columnMenuItems[1]);
+    }
+    isExpandableItem() {
+        return this.menuItemComponent instanceof ColumnMenuFilterComponent ||
+            this.menuItemComponent instanceof ColumnMenuChooserComponent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemDirective, isStandalone: true, selector: "[kendoTreeListColumnMenuItem]", inputs: { menuItemComponent: ["kendoTreeListColumnMenuItem", "menuItemComponent"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTreeListColumnMenuItem]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { menuItemComponent: [{
+                type: Input,
+                args: ['kendoTreeListColumnMenuItem']
+            }] } });

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

@@ -81,7 +81,7 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
            (itemClick)="toggleColumn()"
            [disabled]="disabled">
        </kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
             type: Component,

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

@@ -77,7 +77,7 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
             type: Component,