@progress/kendo-angular-grid 19.0.0-develop.8 → 19.0.0

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

@@ -70,6 +70,10 @@ export class ColumnChooserComponent {
     ngOnDestroy() {
         this.close();
     }
+    /**
+     * @hidden
+     */
+    messageFor = token => this.ctx.localization.get(token);
     /**
      * @hidden
      */
@@ -154,28 +158,27 @@ export class ColumnChooserComponent {
             type="button"
             (click)="toggle(anchor, template)"
             fillMode="flat"
-            [attr.title]="ctx.localization.get('columns')"
+            [attr.title]="messageFor('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
             [attr.aria-haspopup]="'dialog'"
             [attr.aria-expanded]="!!(popupRef)"
             [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
-            <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
                 #columnList
                 [columns]="columns"
-                [ariaLabel]="ctx.localization.get('columns')"
+                [ariaLabel]="messageFor('columns')"
                 [isLast]="true"
-                [applyText]="ctx.localization.get('columnsApply')"
-                [resetText]="ctx.localization.get('columnsReset')"
+                [applyText]="messageFor('columnsApply')"
+                [resetText]="messageFor('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"
                 (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, 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: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, 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: "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: ColumnChooserComponent, decorators: [{
             type: Component,
@@ -187,21 +190,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type="button"
             (click)="toggle(anchor, template)"
             fillMode="flat"
-            [attr.title]="ctx.localization.get('columns')"
+            [attr.title]="messageFor('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
             [attr.aria-haspopup]="'dialog'"
             [attr.aria-expanded]="!!(popupRef)"
             [attr.aria-controls]="!!(popupRef) ? popupId : undefined"></button>
         <ng-template #template>
-            <span class='k-column-chooser-title'>{{ ctx.localization.get('columns') }}</span>
             <kendo-grid-columnlist
                 #columnList
                 [columns]="columns"
-                [ariaLabel]="ctx.localization.get('columns')"
+                [ariaLabel]="messageFor('columns')"
                 [isLast]="true"
-                [applyText]="ctx.localization.get('columnsApply')"
-                [resetText]="ctx.localization.get('columnsReset')"
+                [applyText]="messageFor('columnsApply')"
+                [resetText]="messageFor('columnsReset')"
                 [autoSync]="autoSync"
                 [allowHideAll]="allowHideAll"
                 (apply)="onApply($event)"

package/esm2022/column-menu/column-list.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, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChild, ViewChildren, QueryList } from '@angular/core';
+import { Component, HostBinding, Input, ElementRef, NgZone, Renderer2, Output, EventEmitter, ViewChild, ViewChildren, QueryList, Optional } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
 import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
@@ -13,8 +13,12 @@ import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { take } from 'rxjs/operators';
 import { arrowRotateCcwIcon, checkIcon } from '@progress/kendo-svg-icons';
 import { ButtonDirective } from '@progress/kendo-angular-buttons';
+import { ContextService } from '../common/provider.service';
+import { AdaptiveGridService } from '../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-list-kb-nav.service";
+import * as i2 from "../common/adaptiveness.service";
+import * as i3 from "../common/provider.service";
 /**
  * @hidden
  */
@@ -23,9 +27,17 @@ export class ColumnListComponent {
     ngZone;
     renderer;
     listNavigationService;
+    adaptiveGridService;
+    ctx;
     checkIcon = checkIcon;
     arrowRotateCcwIcon = arrowRotateCcwIcon;
     className = true;
+    get listSizeMd() {
+        return !(this.ctx?.grid?.isActionSheetExpanded);
+    }
+    get listSizeLg() {
+        return this.ctx?.grid?.isActionSheetExpanded;
+    }
     reset = new EventEmitter();
     apply = new EventEmitter();
     columnChange = new EventEmitter();
@@ -37,6 +49,7 @@ export class ColumnListComponent {
     get columns() {
         return this._columns;
     }
+    showActions = true;
     autoSync = true;
     ariaLabel;
     allowHideAll = false;
@@ -58,11 +71,13 @@ export class ColumnListComponent {
     _columns;
     allColumns;
     domSubscriptions = new Subscription();
-    constructor(element, ngZone, renderer, listNavigationService) {
+    constructor(element, ngZone, renderer, listNavigationService, adaptiveGridService, ctx) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.listNavigationService = listNavigationService;
+        this.adaptiveGridService = adaptiveGridService;
+        this.ctx = ctx;
     }
     ngOnInit() {
         if (!this.element) {
@@ -70,6 +85,7 @@ export class ColumnListComponent {
         }
         this.ngZone.runOutsideAngular(() => {
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
+                e.stopImmediatePropagation();
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                     this.handleCheckBoxClick(e);
                 });
@@ -80,9 +96,16 @@ export class ColumnListComponent {
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             this.listNavigationService.items = this.options.toArray();
-            this.listNavigationService.toggle(0, true);
+            if (!this.ctx) {
+                this.listNavigationService.toggle(0, true);
+            }
             this.updateDisabled();
         });
+        if (this.ctx?.grid?.isActionSheetExpanded) {
+            this.domSubscriptions.add(this.adaptiveGridService.animationEnd.subscribe(() => {
+                this.listNavigationService.toggle(0, true);
+            }));
+        }
     }
     ngOnChanges(changes) {
         if (!this.service) {
@@ -250,8 +273,8 @@ export class ColumnListComponent {
             }
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }, { token: i2.AdaptiveGridService, optional: true }, { token: i3.ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", showActions: "showActions", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className", "class.k-column-list-md": "this.listSizeMd", "class.k-column-list-lg": "this.listSizeLg" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-column-list"
             role="listbox"
@@ -271,11 +294,13 @@ export class ColumnListComponent {
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
-        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+        <div [ngClass]="actionsClass" *ngIf="!autoSync && showActions">            
             <button
                 #applyButton
                 kendoButton
                 type="button"
+                icon="check"
+                [svgIcon]="checkIcon"
                 themeColor="primary"
                 (click)="applyChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
@@ -284,6 +309,8 @@ export class ColumnListComponent {
                 #resetButton
                 kendoButton
                 type="button"
+                icon="reset"
+                [svgIcon]="arrowRotateCcwIcon"
                 (keydown.tab)="onTab($event)"
                 (click)="cancelChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
@@ -316,11 +343,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
-        <div [ngClass]="actionsClass" *ngIf="!autoSync">
+        <div [ngClass]="actionsClass" *ngIf="!autoSync && showActions">            
             <button
                 #applyButton
                 kendoButton
                 type="button"
+                icon="check"
+                [svgIcon]="checkIcon"
                 themeColor="primary"
                 (click)="applyChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
@@ -329,6 +358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 #resetButton
                 kendoButton
                 type="button"
+                icon="reset"
+                [svgIcon]="arrowRotateCcwIcon"
                 (keydown.tab)="onTab($event)"
                 (click)="cancelChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
@@ -338,9 +369,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent, ButtonDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }, { type: i2.AdaptiveGridService, decorators: [{
+                    type: Optional
+                }] }, { type: i3.ContextService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ["class.k-column-list-wrapper"]
+            }], listSizeMd: [{
+                type: HostBinding,
+                args: ['class.k-column-list-md']
+            }], listSizeLg: [{
+                type: HostBinding,
+                args: ['class.k-column-list-lg']
             }], reset: [{
                 type: Output
             }], apply: [{
@@ -349,6 +390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], columns: [{
                 type: Input
+            }], showActions: [{
+                type: Input
             }], autoSync: [{
                 type: Input
             }], ariaLabel: [{

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"], 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", "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"], 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", "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"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "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-container.component.mjs

@@ -33,7 +33,7 @@ export class ColumnMenuContainerComponent {
         else {
             return;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable.focus());
+        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-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `

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"], 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", "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,16 +2,24 @@
 * 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, chevronUpIcon } from '@progress/kendo-svg-icons';
+import { chevronDownIcon, chevronRightIcon, chevronUpIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { guid } from '@progress/kendo-angular-common';
 import { ColumnMenuService } from './column-menu.service';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { take } from 'rxjs/operators';
+import { ContextService } from '../common/provider.service';
+import { filtersByField } from '../filtering/base-filter-cell.component';
+import { AdaptiveGridService } from '../common/adaptiveness.service';
+import { ColumnComponent } from '../columns/column.component';
+import { normalize } from '../columns/sort-settings';
+import { isPresent } from '../utils';
 import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
+import * as i2 from "../common/adaptiveness.service";
 /**
  * Represents an item that can be placed inside a
  * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
@@ -27,6 +35,17 @@ import * as i0 from "@angular/core";
  */
 export class ColumnMenuItemComponent {
     ngZone;
+    ctx;
+    adaptiveGridService;
+    element;
+    /**
+     * @hidden
+     */
+    sortAscSmallIcon = sortAscSmallIcon;
+    /**
+     * @hidden
+     */
+    sortDescSmallIcon = sortDescSmallIcon;
     /**
      * Fires when the item is clicked.
      */
@@ -48,6 +67,10 @@ export class ColumnMenuItemComponent {
      * Defines the [SVG icon](slug:svgicon_list) to be rendered within the item.
      */
     svgIcon;
+    /**
+     * @hidden
+     */
+    indicatorIcon;
     /**
      * Specifies the item text.
      */
@@ -64,24 +87,49 @@ 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.
      */
     service;
+    /**
+     * @hidden
+     */
+    column;
     contentTemplate;
     contentState = 'collapsed';
     contentId;
     chevronUpIcon = chevronUpIcon;
     chevronDownIcon = chevronDownIcon;
+    chevronRightIcon = chevronRightIcon;
+    filterIcon = filterIcon;
+    /**
+     * @hidden
+     */
+    get hasFilters() {
+        return filtersByField(this.ctx.grid.filter, this.column.field).length > 0;
+    }
     get expandedIcon() {
+        if (this.ctx.grid.isActionSheetExpanded) {
+            return 'arrow-chevron-right';
+        }
         return this.expanded ? 'arrow-chevron-up' : 'arrow-chevron-down';
     }
     get expandedSvgIcon() {
+        if (this.ctx.grid.isActionSheetExpanded) {
+            return this.chevronRightIcon;
+        }
         return this.expanded ? this.chevronUpIcon : this.chevronDownIcon;
     }
-    constructor(ngZone) {
+    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(() => {
@@ -93,14 +141,41 @@ export class ColumnMenuItemComponent {
             this.updateContentState();
         }
     }
+    /**
+     * @hidden
+     */
+    sortDescriptor(field) {
+        return this.ctx.grid.sort.find(item => item.field === field) || { field };
+    }
+    /**
+     * @hidden
+     */
+    showSortNumbering(column) {
+        const { showIndexes } = normalize(this.ctx.grid.sortable);
+        return showIndexes
+            && this.ctx.grid.sort
+            && this.ctx.grid.sort.filter(({ dir }) => isPresent(dir)).length > 1
+            && this.sortOrder(column.field) > 0;
+    }
+    /**
+     * @hidden
+     */
+    sortOrder(field) {
+        return this.ctx.grid.sort
+            .filter(({ dir }) => isPresent(dir))
+            .findIndex(x => x.field === field)
+            + 1;
+    }
     /**
      * @hidden
      */
     onClick(e) {
         this.itemClick.emit(e);
         if (this.contentTemplate) {
-            this.expanded = !this.expanded;
-            this.updateContentState();
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.expanded = !this.expanded;
+                this.updateContentState();
+            }
             if (this.expanded) {
                 this.expand.emit();
             }
@@ -112,8 +187,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 }], 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" }, 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", 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>
@@ -125,6 +200,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">
@@ -133,8 +209,22 @@ export class ColumnMenuItemComponent {
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 {{ text }}
-                <span *ngIf="contentTemplate" class="k-spacer"></span>
-                <span *ngIf="contentTemplate" class="k-expander-indicator">
+                <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir)"
+                        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">
+                    </kendo-icon-wrapper>
+                    <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
+                </span>
+                <kendo-icon-wrapper
+                    *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'filterToolbarTool' && hasFilters) || indicatorIcon"
+                    class="k-columnmenu-indicators"
+                    name="filter"
+                    [svgIcon]="filterIcon">
+                </kendo-icon-wrapper>
+                <span *ngIf="contentTemplate && adaptiveGridService.viewType !== 'sortToolbarTool'" class="k-spacer"></span>
+                <span *ngIf="contentTemplate && adaptiveGridService.viewType !== 'sortToolbarTool'" class="k-expander-indicator">
                     <kendo-icon-wrapper
                         [name]="expandedIcon"
                         [svgIcon]="expandedSvgIcon">
@@ -209,6 +299,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">
@@ -217,8 +308,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [name]="icon"
                     [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 {{ text }}
-                <span *ngIf="contentTemplate" class="k-spacer"></span>
-                <span *ngIf="contentTemplate" class="k-expander-indicator">
+                <span *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'sortToolbarTool' && sortDescriptor(column.field).dir)"
+                        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">
+                    </kendo-icon-wrapper>
+                    <span *ngIf="showSortNumbering(column)" class="k-sort-index">{{sortOrder(column.field)}}</span>
+                </span>
+                <kendo-icon-wrapper
+                    *ngIf="(ctx.grid.isActionSheetExpanded && adaptiveGridService.viewType === 'filterToolbarTool' && hasFilters) || indicatorIcon"
+                    class="k-columnmenu-indicators"
+                    name="filter"
+                    [svgIcon]="filterIcon">
+                </kendo-icon-wrapper>
+                <span *ngIf="contentTemplate && adaptiveGridService.viewType !== 'sortToolbarTool'" class="k-spacer"></span>
+                <span *ngIf="contentTemplate && adaptiveGridService.viewType !== 'sortToolbarTool'" class="k-expander-indicator">
                     <kendo-icon-wrapper
                         [name]="expandedIcon"
                         [svgIcon]="expandedSvgIcon">
@@ -234,7 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [IconWrapperComponent, NgIf, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { itemClick: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.ContextService }, { type: i2.AdaptiveGridService }, { type: i0.ElementRef }]; }, propDecorators: { itemClick: [{
                 type: Output
             }], expand: [{
                 type: Output
@@ -244,6 +349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
+            }], indicatorIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -252,8 +359,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], focused: [{
+                type: Input
             }], service: [{
                 type: Input
+            }], column: [{
+                type: Input
             }], contentTemplate: [{
                 type: ContentChild,
                 args: [ColumnMenuItemContentTemplateDirective]

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

@@ -2,17 +2,21 @@
 * 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 { ChangeDetectorRef, Directive, ElementRef, Input, NgZone, Renderer2 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Keys } from '@progress/kendo-angular-common';
 import { ColumnMenuPositionComponent } from './column-menu-position.component';
 import { ColumnMenuChooserComponent } from './column-menu-chooser.component';
 import { ColumnMenuFilterComponent } from './column-menu-filter.component';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
 export class ColumnMenuItemDirective {
     hostElement;
     renderer;
     ngZone;
+    cdr;
+    ctx;
     /**
      * The reference to the Grid column menu item. Required to include the item in the built-in keyboard navigation.
      */
@@ -55,6 +59,9 @@ export class ColumnMenuItemDirective {
             });
             if (this.isExpandableItem()) {
                 this.menuItemComponent.isLast = true;
+                if (this.ctx.grid.isActionSheetExpanded) {
+                    this.cdr.detectChanges();
+                }
             }
         }
         this._isLast = value;
@@ -69,10 +76,12 @@ export class ColumnMenuItemDirective {
     _isLast = false;
     columnMenuItems;
     subs = new Subscription();
-    constructor(hostElement, renderer, ngZone) {
+    constructor(hostElement, renderer, ngZone, cdr, ctx) {
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.ngZone = ngZone;
+        this.cdr = cdr;
+        this.ctx = ctx;
     }
     ngAfterViewInit() {
         this.columnMenuItems = this.hostElement.nativeElement.querySelectorAll('.k-columnmenu-item');
@@ -80,7 +89,7 @@ export class ColumnMenuItemDirective {
         if (this.menuItemComponent instanceof ColumnMenuFilterComponent) {
             this.menuItemComponent.service.menuTabbingService.isColumnMenu = true;
         }
-        this.menuItemComponent.service?.columnMenuContainer.templateMenuItems.push(this);
+        this.menuItemComponent.service?.columnMenuContainer?.templateMenuItems.push(this);
     }
     ngOnDestroy() {
         if (this.subs) {
@@ -112,7 +121,7 @@ export class ColumnMenuItemDirective {
             this.menuItemComponent instanceof ColumnMenuChooserComponent ||
             this.menuItemComponent instanceof ColumnMenuPositionComponent;
     }
-    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 ɵ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 }, { token: i0.ChangeDetectorRef }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuItemDirective, isStandalone: true, selector: "[kendoGridColumnMenuItem]", inputs: { menuItemComponent: ["kendoGridColumnMenuItem", "menuItemComponent"] }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuItemDirective, decorators: [{
@@ -121,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridColumnMenuItem]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { menuItemComponent: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.ContextService }]; }, propDecorators: { menuItemComponent: [{
                 type: Input,
                 args: ['kendoGridColumnMenuItem']
             }] } });