@progress/kendo-angular-grid 19.0.0-develop.23 → 19.0.0-develop.25

package/codemods/template-transformer/index.js

@@ -0,0 +1,94 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templateTransformer = void 0;
+const node_html_parser_1 = require("node-html-parser");
+function templateTransformer(root, j, ...processFns) {
+    root
+        .find(j.ClassDeclaration)
+        .forEach(classPath => {
+        // Skip if no decorators
+        const classNode = classPath.node;
+        if (!classNode.decorators || !classNode.decorators.length)
+            return;
+        // Find Component decorator
+        const componentDecorator = classNode.decorators.find((decorator) => {
+            if (decorator.expression && decorator.expression.type === 'CallExpression') {
+                const callee = decorator.expression.callee;
+                // Handle direct Component identifier
+                if (callee.type === 'Identifier' && callee.name === 'Component') {
+                    return true;
+                }
+                // Handle angular.core.Component or similar
+                if (callee.type === 'MemberExpression' &&
+                    callee.property &&
+                    callee.property.type === 'Identifier' &&
+                    callee.property.name === 'Component') {
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (!componentDecorator || !componentDecorator.expression)
+            return;
+        const expression = componentDecorator.expression;
+        if (expression.type !== 'CallExpression' || !expression.arguments.length)
+            return;
+        const componentOptions = expression.arguments[0];
+        if (componentOptions.type !== 'ObjectExpression')
+            return;
+        // Find template and templateUrl properties
+        const props = componentOptions.properties || [];
+        const templateProp = props.find((prop) => (prop.key.type === 'Identifier' && prop.key.name === 'template') ||
+            (prop.key.type === 'StringLiteral' && prop.key.value === 'template'));
+        //   const templateUrlProp = props.find((prop: any) =>
+        //     (prop.key.type === 'Identifier' && prop.key.name === 'templateUrl') ||
+        //     (prop.key.type === 'StringLiteral' && prop.key.value === 'templateUrl')
+        //   );
+        // Process inline template
+        if (templateProp) {
+            // Extract template based on node type
+            let originalTemplate;
+            if (templateProp.value.type === 'StringLiteral' || templateProp.value.type === 'Literal') {
+                originalTemplate = templateProp.value.value;
+            }
+            else if (templateProp.value.type === 'TemplateLiteral') {
+                // For template literals, join quasis
+                if (templateProp.value.quasis && templateProp.value.quasis.length) {
+                    originalTemplate = templateProp.value.quasis
+                        .map((q) => q.value.cooked || q.value.raw)
+                        .join('');
+                }
+                else {
+                    console.warn('Could not process TemplateLiteral properly');
+                    return;
+                }
+            }
+            else {
+                console.warn(`Unsupported template type: ${templateProp.value.type}`);
+                return;
+            }
+            const root = (0, node_html_parser_1.parse)(originalTemplate);
+            processFns.forEach(fn => {
+                fn(root);
+            });
+            // Transform template using Angular compiler
+            const transformedTemplate = root.toString();
+            if (transformedTemplate !== originalTemplate) {
+                // Update template property
+                if (templateProp.value.type === 'TemplateLiteral') {
+                    // For template literals, create a new template literal
+                    templateProp.value = j.templateLiteral([j.templateElement({ cooked: transformedTemplate, raw: transformedTemplate }, true)], []);
+                }
+                else {
+                    // For string literals, update the value
+                    templateProp.value.value = transformedTemplate;
+                }
+            }
+        }
+    });
+}
+exports.templateTransformer = templateTransformer;

package/codemods/utils.js

@@ -0,0 +1,131 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlAttributeTransformer = exports.tsPropertyTransformer = exports.templateAttributeTransformer = void 0;
+const node_html_parser_1 = __importDefault(require("node-html-parser"));
+const templateAttributeTransformer = (root, tagName, attributeName, newAttributeName) => {
+    const elements = Array.from(root.getElementsByTagName(tagName)) || [];
+    for (const element of elements) {
+        // Handle bound attributes like [title]="foo" or [title]="'foo'"
+        const boundAttr = element.getAttribute(`[${attributeName}]`);
+        if (boundAttr) {
+            element.setAttribute(`[${newAttributeName}]`, boundAttr);
+            element.removeAttribute(`[${attributeName}]`);
+        }
+    }
+};
+exports.templateAttributeTransformer = templateAttributeTransformer;
+const tsPropertyTransformer = (root, j, componentType, propertyName, newPropertyName) => {
+    // Find all class properties that are of type DropDownListComponent
+    const properties = new Set();
+    // Find properties with type annotations
+    root
+        .find(j.ClassProperty, {
+        typeAnnotation: {
+            typeAnnotation: {
+                typeName: {
+                    name: componentType
+                }
+            }
+        }
+    })
+        .forEach(path => {
+        if (path.node.key.type === 'Identifier') {
+            properties.add(path.node.key.name);
+        }
+    });
+    // Find function parameters of type componentType
+    const parameters = new Set();
+    root
+        .find(j.FunctionDeclaration)
+        .forEach(path => {
+        if (path.node.params) {
+            path.node.params.forEach(param => {
+                if (param.type === 'Identifier' &&
+                    param.typeAnnotation &&
+                    param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                    param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                    param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                    parameters.add(param.name);
+                }
+            });
+        }
+    });
+    // Also check method declarations in classes
+    root
+        .find(j.ClassMethod)
+        .forEach(path => {
+        if (path.node.params) {
+            path.node.params.forEach(param => {
+                if (param.type === 'Identifier' &&
+                    param.typeAnnotation &&
+                    param.typeAnnotation.typeAnnotation?.type === 'TSTypeReference' &&
+                    param.typeAnnotation.typeAnnotation.typeName.type === 'Identifier' &&
+                    param.typeAnnotation.typeAnnotation.typeName.name === componentType) {
+                    parameters.add(param.name);
+                }
+            });
+        }
+    });
+    // Find all member expressions where title property is accessed on any componentType instance
+    root
+        .find(j.MemberExpression, {
+        property: {
+            type: 'Identifier',
+            name: propertyName
+        }
+    })
+        .filter(path => {
+        // Filter to only include accesses on properties that are componentType instances
+        if (path.node.object.type === 'MemberExpression' &&
+            path.node.object.property.type === 'Identifier') {
+            // handle properties of this
+            if (path.node.object.object.type === 'ThisExpression' &&
+                properties.has(path.node.object.property.name)) {
+                return true;
+            }
+        }
+        // Handle function parameters
+        if (path.node.object.type === 'Identifier' &&
+            parameters.has(path.node.object.name)) {
+            return true;
+        }
+        return false;
+    })
+        .forEach(path => {
+        // Replace old property name with new property name
+        if (path.node.property.type === 'Identifier') {
+            path.node.property.name = newPropertyName;
+        }
+    });
+};
+exports.tsPropertyTransformer = tsPropertyTransformer;
+const htmlAttributeTransformer = (fileInfo, tagName, oldName, newName) => {
+    const fileContent = fileInfo.source;
+    const root = (0, node_html_parser_1.default)(fileContent);
+    let modified = false;
+    // Locate elements using [oldName] binding and update the old attribute to the new one
+    const elements = Array.from(root.querySelectorAll(tagName));
+    for (const element of elements) {
+        const boundTitleAttr = element.getAttribute(`[${oldName}]`);
+        if (boundTitleAttr) {
+            element.removeAttribute(`[${oldName}]`);
+            element.setAttribute(`[${newName}]`, boundTitleAttr);
+            modified = true;
+        }
+    }
+    // Return modified content if changes were made
+    if (modified) {
+        const updatedContent = root.toString();
+        return updatedContent;
+    }
+    // Return original content if no changes were made or if there was an error
+    return fileContent;
+};
+exports.htmlAttributeTransformer = htmlAttributeTransformer;

package/codemods/v19/grid-kendogridgroupbinding.js

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_transformer_1 = require("../template-transformer");
+const fs = __importStar(require("fs"));
+const utils_1 = require("../utils");
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    // Check if the file is an HTML file
+    if (filePath.endsWith('.html')) {
+        let updatedContent = fileInfo.source;
+        updatedContent = (0, utils_1.htmlAttributeTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-grid', 'kendoGridGroupBinding', 'kendoGridBinding');
+        // Only write to file once after all transformations
+        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, template_transformer_1.templateTransformer)(rootSource, j, (root) => {
+        // Using node-html-parser to parse and manipulate the template: https://github.com/taoqf/node-html-parser
+        (0, utils_1.templateAttributeTransformer)(root, 'kendo-grid', 'kendoGridGroupBinding', 'kendoGridBinding');
+    });
+    return rootSource.toSource();
+}
+exports.default = default_1;

package/codemods/v19/index.js

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_transformer_1 = require("../template-transformer");
+const fs = __importStar(require("fs"));
+const utils_1 = require("../utils");
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    // Check if the file is an HTML file
+    if (filePath.endsWith('.html')) {
+        let updatedContent = fileInfo.source;
+        updatedContent = (0, utils_1.htmlAttributeTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-grid', 'kendoGridGroupBinding', 'kendoGridBinding');
+        // Only write to file once after all transformations
+        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, template_transformer_1.templateTransformer)(rootSource, j, (root) => {
+        // Using node-html-parser to parse and manipulate the template: https://github.com/taoqf/node-html-parser
+        (0, utils_1.templateAttributeTransformer)(root, 'kendo-grid', 'kendoGridGroupBinding', 'kendoGridBinding');
+    });
+    return rootSource.toSource();
+}
+exports.default = default_1;

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

@@ -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 { EventEmitter, OnChanges, AfterViewInit, NgZone } from '@angular/core';
+import { EventEmitter, OnChanges, AfterViewInit, NgZone, ElementRef } from '@angular/core';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ColumnMenuService } from './column-menu.service';
@@ -28,6 +28,7 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
     private ngZone;
     ctx: ContextService;
     adaptiveGridService: AdaptiveGridService;
+    element: ElementRef;
     /**
      * @hidden
      */
@@ -57,6 +58,14 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
      * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    indicatorIcon: string;
+    /**
+     * @hidden
+     */
+    indicatorSVGIcon: SVGIcon;
     /**
      * Specifies the item text.
      */
@@ -73,6 +82,10 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
      * Specifies if the item is expanded.
      */
     expanded: boolean;
+    /**
+     * @hidden
+     */
+    focused: boolean;
     /**
      * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
      * Required to include the item in the column menu keyboard navigation sequence.
@@ -95,7 +108,7 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
     get hasFilters(): boolean;
     get expandedIcon(): string;
     get expandedSvgIcon(): SVGIcon;
-    constructor(ngZone: NgZone, ctx: ContextService, adaptiveGridService: AdaptiveGridService);
+    constructor(ngZone: NgZone, ctx: ContextService, adaptiveGridService: AdaptiveGridService, element: ElementRef);
     ngAfterViewInit(): void;
     ngOnChanges(changes: any): void;
     /**
@@ -116,5 +129,5 @@ export declare class ColumnMenuItemComponent implements AfterViewInit, OnChanges
     onClick(e: any): void;
     private updateContentState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-grid-columnmenu-item", never, { "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "service": { "alias": "service"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-grid-columnmenu-item", never, { "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "indicatorIcon": { "alias": "indicatorIcon"; "required": false; }; "indicatorSVGIcon": { "alias": "indicatorSVGIcon"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "service": { "alias": "service"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never, true, never>;
 }

package/esm2022/adaptiveness/adaptive-renderer.component.mjs

@@ -660,7 +660,7 @@ export class AdaptiveRendererComponent {
                 {{messageFor('filterFilterButton')}}
             </button>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,

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

@@ -58,7 +58,7 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
             [svgIcon]="displayInlineFlexIcon"
             (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", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, 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", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,

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

@@ -64,7 +64,7 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
             [svgIcon]="maxWidthIcon"
             (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", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, 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", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,

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

@@ -118,7 +118,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
                 </kendo-grid-columnlist>
             </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", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "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,

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

@@ -97,7 +97,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
                 </kendo-grid-filter-menu-container>
             </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", "column"], 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"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], 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: "16.2.12", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,

package/esm2022/column-menu/column-menu-item.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, ContentChild, NgZone } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ContentChild, NgZone, ElementRef } from '@angular/core';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
 import { chevronDownIcon, chevronRightIcon, chevronUpIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
@@ -37,6 +37,7 @@ export class ColumnMenuItemComponent {
     ngZone;
     ctx;
     adaptiveGridService;
+    element;
     /**
      * @hidden
      */
@@ -66,6 +67,14 @@ export class ColumnMenuItemComponent {
      * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon;
+    /**
+     * @hidden
+     */
+    indicatorIcon;
+    /**
+     * @hidden
+     */
+    indicatorSVGIcon;
     /**
      * Specifies the item text.
      */
@@ -82,6 +91,10 @@ export class ColumnMenuItemComponent {
      * Specifies if the item is expanded.
      */
     expanded;
+    /**
+     * @hidden
+     */
+    focused;
     /**
      * Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) class.
      * Required to include the item in the column menu keyboard navigation sequence.
@@ -116,10 +129,11 @@ export class ColumnMenuItemComponent {
         }
         return this.expanded ? this.chevronUpIcon : this.chevronDownIcon;
     }
-    constructor(ngZone, ctx, adaptiveGridService) {
+    constructor(ngZone, ctx, adaptiveGridService, element) {
         this.ngZone = ngZone;
         this.ctx = ctx;
         this.adaptiveGridService = adaptiveGridService;
+        this.element = element;
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -177,8 +191,8 @@ export class ColumnMenuItemComponent {
     updateContentState() {
         this.contentState = this.expanded ? 'expanded' : 'collapsed';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [{ token: i0.NgZone }, { token: i1.ContextService }, { token: i2.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", service: "service", column: "column" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemComponent, deps: [{ token: i0.NgZone }, { token: i1.ContextService }, { token: i2.AdaptiveGridService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemComponent, isStandalone: true, selector: "kendo-grid-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", indicatorIcon: "indicatorIcon", indicatorSVGIcon: "indicatorSVGIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded", focused: "focused", service: "service", column: "column" }, 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>
@@ -190,6 +204,7 @@ export class ColumnMenuItemComponent {
                 (keydown.enter)="onClick($event)"
                 [class.k-selected]="selected"
                 [class.k-disabled]="disabled"
+                [class.k-focus]="focused"
                 role="button"
                 [attr.aria-expanded]="expanded"
                 [attr.aria-controls]="expanded ? contentId : undefined">
@@ -198,11 +213,11 @@ export class ColumnMenuItemComponent {
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 {{ text }}
-                <span *ngIf="ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir"
+                <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir) || indicatorIcon || indicatorSVGIcon"
                         class="k-columnmenu-indicators">
                     <kendo-icon-wrapper
-                        [name]="sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
-                        [svgIcon]="sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
+                        [name]="indicatorIcon ? indicatorIcon : sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
+                        [svgIcon]="indicatorSVGIcon ? indicatorSVGIcon : sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
                     </kendo-icon-wrapper>
                     <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
                 </span>
@@ -288,6 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 (keydown.enter)="onClick($event)"
                 [class.k-selected]="selected"
                 [class.k-disabled]="disabled"
+                [class.k-focus]="focused"
                 role="button"
                 [attr.aria-expanded]="expanded"
                 [attr.aria-controls]="expanded ? contentId : undefined">
@@ -296,11 +312,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 {{ text }}
-                <span *ngIf="ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir"
+                <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir) || indicatorIcon || indicatorSVGIcon"
                         class="k-columnmenu-indicators">
                     <kendo-icon-wrapper
-                        [name]="sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
-                        [svgIcon]="sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
+                        [name]="indicatorIcon ? indicatorIcon : sortDescriptor(column.field).dir === 'asc' ? 'sort-asc-small' : 'sort-desc-small'"
+                        [svgIcon]="indicatorSVGIcon ? indicatorSVGIcon : sortDescriptor(column.field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon">
                     </kendo-icon-wrapper>
                     <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
                 </span>
@@ -327,7 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [IconWrapperComponent, NgIf, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ContextService }, { type: i2.AdaptiveGridService }]; }, propDecorators: { itemClick: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ContextService }, { type: i2.AdaptiveGridService }, { type: i0.ElementRef }]; }, propDecorators: { itemClick: [{
                 type: Output
             }], expand: [{
                 type: Output
@@ -337,6 +353,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
+            }], indicatorIcon: [{
+                type: Input
+            }], indicatorSVGIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -345,6 +365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], focused: [{
+                type: Input
             }], service: [{
                 type: Input
             }], column: [{

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

@@ -89,7 +89,7 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
             (itemClick)="toggleColumn()"
             [disabled]="disabled">
        </kendo-grid-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], 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-position.component.mjs

@@ -138,7 +138,7 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
                 </kendo-grid-columnmenu-stick>
             </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", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "indicatorSVGIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
             type: Component,