@progress/kendo-angular-grid 19.0.0-develop.3 → 19.0.0-develop.31

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"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, 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"] }] });
 }
 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"], 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", "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,

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

@@ -91,7 +91,7 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </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"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
             type: Component,

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

@@ -91,7 +91,7 @@ export class ColumnMenuStickComponent 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"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuStickComponent, decorators: [{
             type: Component,

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

@@ -30,6 +30,7 @@ import { ColumnMenuSortComponent } from './column-menu-sort.component';
 import { ColumnMenuContainerComponent } from './column-menu-container.component';
 import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { AdaptiveGridService } from '../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../navigation/navigation.service";
 import * as i2 from "../common/single-popup.service";
@@ -37,6 +38,7 @@ import * as i3 from "./column-menu.service";
 import * as i4 from "../common/provider.service";
 import * as i5 from "../common/column-info.service";
 import * as i6 from "../common/id.service";
+import * as i7 from "../common/adaptiveness.service";
 const POPUP_CLASSES = 'k-grid-columnmenu-popup k-column-menu';
 let id = 0;
 const getId = (gridId) => `${gridId}-column-menu-${id++}`;
@@ -61,6 +63,7 @@ export class ColumnMenuComponent {
     cdr;
     columnInfoService;
     idService;
+    adaptiveGridService;
     /**
      * @hidden
      */
@@ -143,7 +146,7 @@ export class ColumnMenuComponent {
     popupRef;
     closeSubscription;
     popupSubs;
-    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService, idService) {
+    constructor(navigationService, popupService, service, ctx, renderer, cdr, columnInfoService, idService, adaptiveGridService) {
         this.navigationService = navigationService;
         this.popupService = popupService;
         this.service = service;
@@ -152,6 +155,7 @@ export class ColumnMenuComponent {
         this.cdr = cdr;
         this.columnInfoService = columnInfoService;
         this.idService = idService;
+        this.adaptiveGridService = adaptiveGridService;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this, true));
     }
     /**
@@ -264,53 +268,69 @@ export class ColumnMenuComponent {
             e.preventDefault();
             e instanceof KeyboardEvent && e.stopImmediatePropagation();
         }
-        this.expandedFilter = this.getExpandedState(this.settings.filter);
-        this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
-        this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
-        this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASSES);
-        // Needed as changes to 'popupRef' and 'popupId' are not reflected
-        // automatically when the Popup is closed by clicking outside the anchor
-        const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
-        if (this.popupRef) {
-            this.popupSubs?.unsubscribe();
-            this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
-                this.popupSubs?.unsubscribe();
-                this.popupSubs = null;
-                this.close(true);
-                this.updateAria(ariaRoot);
-            });
-            this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
-                this.popupSubs?.unsubscribe();
-                this.popupSubs = this.popupRef = null;
-                this.updateAria(ariaRoot);
-            }));
-            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
-            if (popupAriaElement) {
-                const popupId = getId(this.idService?.gridId());
-                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
-                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
-                this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
-                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
-                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
-            }
-            if (this.settings.view === 'tabbed') {
-                this.renderer.addClass(popupAriaElement, 'k-column-menu-tabbed');
-                this.renderer.addClass(popupAriaElement, 'k-column-menu');
-                this.cdr.detectChanges();
-                this.tabStrip?.selectTab(0);
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'columnMenu';
+                this.adaptiveGridService.columns = this.columns;
+                this.adaptiveGridService.columnMenuService = this.service;
+                this.adaptiveGridService.column = this.column;
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
             }
         }
         else {
-            this.focusRoot();
+            this.expandedFilter = this.getExpandedState(this.settings.filter);
+            this.expandedColumns = this.getExpandedState(this.settings.columnChooser);
+            this.expandedPosition = this.getExpandedState(this.settings.setColumnPosition);
+            this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASSES);
+            // Needed as changes to 'popupRef' and 'popupId' are not reflected
+            // automatically when the Popup is closed by clicking outside the anchor
+            const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
+            if (this.popupRef) {
+                this.popupSubs?.unsubscribe();
+                this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                    this.popupSubs?.unsubscribe();
+                    this.popupSubs = null;
+                    this.close(true);
+                    this.updateAria(ariaRoot);
+                });
+                this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
+                    this.popupSubs?.unsubscribe();
+                    this.popupSubs = this.popupRef = null;
+                    this.updateAria(ariaRoot);
+                }));
+                const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-columnmenu-popup');
+                if (popupAriaElement) {
+                    const popupId = getId(this.idService?.gridId());
+                    this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                    this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                    this.renderer.setAttribute(popupAriaElement, 'aria-label', this.columnMenuTitle);
+                    ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                    ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+                }
+                if (this.settings.view === 'tabbed') {
+                    this.renderer.addClass(popupAriaElement, 'k-column-menu-tabbed');
+                    this.renderer.addClass(popupAriaElement, 'k-column-menu');
+                    this.cdr.detectChanges();
+                    this.tabStrip?.selectTab(0);
+                }
+            }
+            else {
+                this.focusRoot();
+            }
         }
     }
     /**
      * @hidden
      */
     close(triggerFocus = false) {
-        this.popupService.destroy();
-        this.popupRef = null;
-        this.cdr.markForCheck();
+        if (this.ctx.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            this.ctx.grid.adaptiveRenderer.actionSheet.toggle(false);
+        }
+        else {
+            this.popupService.destroy();
+            this.popupRef = null;
+            this.cdr.markForCheck();
+        }
         if (!triggerFocus) {
             return;
         }
@@ -334,7 +354,7 @@ export class ColumnMenuComponent {
     focusRoot() {
         this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }, { token: i6.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }, { token: i6.IdService, optional: true }, { token: i7.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
             ColumnMenuService,
             MenuTabbingService
@@ -380,7 +400,8 @@ export class ColumnMenuComponent {
                     [showStick]="hasStick"
                     [kendoGridColumnMenuItem]="positionItem"
                     [service]="service"
-                    [expanded]="expandedPosition">
+                    [expanded]="expandedPosition"
+                >
                 </kendo-grid-columnmenu-position>
                 <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
                 <kendo-grid-columnmenu-chooser
@@ -505,7 +526,8 @@ export class ColumnMenuComponent {
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { 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: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { 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: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { 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: ColumnMenuComponent, decorators: [{
             type: Component,
@@ -557,7 +579,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [showStick]="hasStick"
                     [kendoGridColumnMenuItem]="positionItem"
                     [service]="service"
-                    [expanded]="expandedPosition">
+                    [expanded]="expandedPosition"
+                >
                 </kendo-grid-columnmenu-position>
                 <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
                 <kendo-grid-columnmenu-chooser
@@ -682,6 +705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
+
     `,
                     standalone: true,
                     imports: [
@@ -694,7 +718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }, { type: i6.IdService, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { standalone: [{
+                }] }, { type: i7.AdaptiveGridService }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {

package/esm2022/column-resizing/column-handle.directive.mjs

@@ -82,7 +82,7 @@ const indexOf = (target, list) => {
             break;
         }
         if ((ignore-- <= 0) && isParentSpanColumn) {
-            ignore = current.parent.childColumns.length - 1;
+            ignore = current.parent.children.length - 1;
             skip += ignore;
         }
         index++;
@@ -134,7 +134,7 @@ export class ColumnHandleDirective {
         const currentLeafs = leafColumns([this.column]).filter(column => isTruthy(column.resizable));
         const columnInfo = currentLeafs.map(column => {
             const isParentSpan = isInSpanColumn(column);
-            const isLastInSpan = isParentSpan ? column.parent.childColumns.last === column : false;
+            const isLastInSpan = isParentSpan ? column.parent.children.last === column : false;
             const index = indexOf(column, allLeafs);
             return {
                 column,

package/esm2022/columns/column-base.mjs

@@ -24,6 +24,7 @@ export const isCheckboxColumn = column => column.isCheckboxColumn;
  */
 export const isRowReorderColumn = column => column.isRowReorderColumn;
 const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
+let columnId = 0;
 /**
  * The base class for the column components of the Grid.
  */
@@ -300,6 +301,12 @@ export class ColumnBase {
         return this.parent ? this.parent.isLocked : this.locked;
     }
     _width;
+    /**
+     * @hidden
+     */
+    get id() {
+        return this._id;
+    }
     /**
      * @hidden
      */
@@ -344,6 +351,7 @@ export class ColumnBase {
     get isVisible() {
         return !this.hidden && this.matchesMedia;
     }
+    _id;
     /**
      * @hidden
      */
@@ -353,6 +361,7 @@ export class ColumnBase {
         if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
             throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
+        this._id = `k-grid-column-${columnId++}`;
     }
     ngAfterViewInit() {
         this.initialMaxResizableWidth = this.maxResizableWidth;

package/esm2022/columns/columns-container.mjs

@@ -70,7 +70,7 @@ export class ColumnsContainer {
                     unlockedWidth += column.width || 0;
                 }
                 if (column.isSpanColumn) {
-                    column.childColumns.forEach(c => {
+                    column.children.forEach(c => {
                         c.leafIndex = leafIndex++;
                     });
                 }

package/esm2022/columns/span-column.component.mjs

@@ -48,7 +48,7 @@ export class SpanColumnComponent extends ColumnBase {
     /**
      * @hidden
      */
-    childColumns = new QueryList();
+    children = new QueryList();
     /**
      * @hidden
      */
@@ -91,13 +91,13 @@ export class SpanColumnComponent extends ColumnBase {
     set width(_value) {
     }
     get width() {
-        return this.childColumns.reduce((total, column) => total + column.width, 0);
+        return this.children.reduce((total, column) => total + column.width, 0);
     }
     /**
      * @hidden
      */
     get leafIndex() {
-        return this.childColumns.first.leafIndex;
+        return this.children.first.leafIndex;
     }
     _editable = true;
     constructor(parent, idService) {
@@ -124,7 +124,7 @@ export class SpanColumnComponent extends ColumnBase {
      * @hidden
      */
     get colspan() {
-        return this.childColumns.filter(c => c.isVisible).length;
+        return this.children.filter(c => c.isVisible).length;
     }
     /**
      * Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
@@ -134,13 +134,13 @@ export class SpanColumnComponent extends ColumnBase {
         this._locked = value;
     }
     get locked() {
-        return this._locked || this.childColumns.some(c => c.locked);
+        return this._locked || this.children.some(c => c.locked);
     }
     get childrenArray() {
-        return this.childColumns.toArray();
+        return this.children.toArray();
     }
     get hasChildren() {
-        return this.childColumns.length > 0;
+        return this.children.length > 0;
     }
     /**
      * @hidden
@@ -156,7 +156,7 @@ export class SpanColumnComponent extends ColumnBase {
                 provide: ColumnBase,
                 useExisting: forwardRef(() => SpanColumnComponent)
             }
-        ], queries: [{ propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }, { propertyName: "childColumns", predicate: ColumnComponent }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+        ], queries: [{ propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }, { propertyName: "children", predicate: ColumnComponent }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpanColumnComponent, decorators: [{
             type: Component,
@@ -185,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], editTemplate: [{
                 type: ContentChildren,
                 args: [EditTemplateDirective, { descendants: false }]
-            }], childColumns: [{
+            }], children: [{
                 type: ContentChildren,
                 args: [ColumnComponent]
             }], editable: [{

package/esm2022/common/adaptiveness.service.mjs

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from "@angular/core";
+import { Subject } from "rxjs";
+import { AdaptiveService } from "@progress/kendo-angular-utils";
+import { ContextService } from "./provider.service";
+import * as i0 from "@angular/core";
+import * as i1 from "./provider.service";
+import * as i2 from "@progress/kendo-angular-utils";
+/**
+ * @hidden
+ *
+ * The AdaptiveGridService is used to provide common information for the ActionSheet used in adaptive mode.
+ */
+export class AdaptiveGridService {
+    ctx;
+    adaptiveService;
+    /**
+     * Observable that emits when the ActionSheet's views change animation ends.
+     */
+    get animationEnd() {
+        return this.animationEndSubject.asObservable();
+    }
+    columnMenuService;
+    columns = [];
+    secondaryView;
+    viewType;
+    popupRef;
+    column;
+    filterMenuContainer;
+    filterMenuContainerComponentRef;
+    animationEndSubject = new Subject();
+    constructor(ctx, adaptiveService) {
+        this.ctx = ctx;
+        this.adaptiveService = adaptiveService;
+    }
+    submitFilter() {
+        this.filterMenuContainer.submit();
+        this.ctx.grid.adaptiveRenderer.actionSheet.toggle(false);
+        this.reset();
+    }
+    resetFilter() {
+        this.filterMenuContainer.reset();
+        this.ctx.grid.adaptiveRenderer.actionSheet.toggle(false);
+        this.reset();
+    }
+    reset() {
+        this.ctx.grid.adaptiveRenderer.actionSheet.currentView = 1;
+        this.filterMenuContainerComponentRef?.destroy();
+        this.column = null;
+        this.popupRef = null;
+        this.filterMenuContainer = null;
+        this.viewType = null;
+        this.secondaryView = null;
+    }
+    /**
+     * Emits an event to notify that the animation has ended.
+     */
+    notifyAnimationEnd() {
+        this.animationEndSubject.next();
+    }
+    get windowSize() {
+        return this.adaptiveService.size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveGridService, deps: [{ token: i1.ContextService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveGridService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveGridService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.AdaptiveService }]; } });

package/esm2022/common/single-popup.service.mjs

@@ -11,10 +11,12 @@ import { ScrollSyncService } from '../scrolling/scroll-sync.service';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { ContextService } from './provider.service';
 import { skip } from 'rxjs/operators';
+import { AdaptiveGridService } from './adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "../scrolling/scroll-sync.service";
 import * as i3 from "./provider.service";
+import * as i4 from "./adaptiveness.service";
 const contains = (node, predicate) => {
     while (node) {
         if (predicate(node)) {
@@ -47,6 +49,7 @@ export class SinglePopupService {
     renderer;
     ngZone;
     ctx;
+    adaptiveGridService;
     /**
      * Fires when the filter or column menus are about to close because the user clicked outside their popups.
      * Used to prevent the popup from closing.
@@ -60,11 +63,12 @@ export class SinglePopupService {
     /**
      * @hidden
      */
-    constructor(popupService, renderer, ngZone, scrollSyncService, ctx) {
+    constructor(popupService, renderer, ngZone, scrollSyncService, ctx, adaptiveGridService) {
         this.popupService = popupService;
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.ctx = ctx;
+        this.adaptiveGridService = adaptiveGridService;
         this.scrollSubscription = scrollSyncService.changes.pipe(skip(1)).subscribe(() => this.destroy());
     }
     /**
@@ -83,6 +87,7 @@ export class SinglePopupService {
                 content: template,
                 positionMode: "absolute"
             });
+            this.adaptiveGridService.popupRef = this.popupRef;
             this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
             this.attachClose(anchor);
         }
@@ -102,6 +107,7 @@ export class SinglePopupService {
             this.pointerEventsSub = null;
             this.popupRef.close();
             this.popupRef = null;
+            this.adaptiveGridService.popupRef = null;
         }
     }
     ngOnDestroy() {
@@ -141,9 +147,9 @@ export class SinglePopupService {
             }));
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, deps: [{ token: i1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.ScrollSyncService }, { token: i3.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, deps: [{ token: i1.PopupService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.ScrollSyncService }, { token: i3.ContextService }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SinglePopupService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.ScrollSyncService }, { type: i3.ContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.ScrollSyncService }, { type: i3.ContextService }, { type: i4.AdaptiveGridService }]; } });

package/esm2022/common/toolbar-tool-base.directive.mjs

@@ -0,0 +1,81 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, Inject, NgZone } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { Subscription } from 'rxjs';
+import { cancelIcon, columnsIcon, fileExcelIcon, filePdfIcon, pencilIcon, plusIcon, saveIcon, trashIcon } from '@progress/kendo-svg-icons';
+import { isPresent } from '@progress/kendo-angular-common';
+import { ContextService } from './provider.service';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "./provider.service";
+const ICONS_MAP = {
+    edit: { svgIcon: pencilIcon, icon: 'pencil' },
+    save: { svgIcon: saveIcon, icon: 'save' },
+    cancel: { svgIcon: cancelIcon, icon: 'cancel' },
+    remove: { svgIcon: trashIcon, icon: 'trash' },
+    add: { svgIcon: plusIcon, icon: 'plus' },
+    excelExport: { svgIcon: fileExcelIcon, icon: 'file-excel' },
+    pdfExport: { svgIcon: filePdfIcon, icon: 'file-pdf' },
+    columns: { svgIcon: columnsIcon, icon: 'columns' }
+};
+/**
+ * @hidden
+ */
+export class ToolbarToolBase {
+    host;
+    commandName;
+    ctx;
+    zone;
+    cdr;
+    clickSub = new Subscription();
+    constructor(host, commandName, ctx, zone, cdr) {
+        this.host = host;
+        this.commandName = commandName;
+        this.ctx = ctx;
+        this.zone = zone;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.clickSub = this.host.click.subscribe(e => this.onClick(e));
+        const hasIcon = (isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '') &&
+            (isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '');
+        const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
+        if (!hasIcon) {
+            this.host.icon = ICONS_MAP[this.commandName].icon;
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = ICONS_MAP[this.commandName].svgIcon;
+        }
+    }
+    ngAfterViewInit() {
+        const hasText = isPresent(this.host.text);
+        if (!hasText) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    const messageKey = this.commandName === ToolbarToolName.columns ? 'columns' : `${this.commandName}ToolbarToolText`;
+                    this.host.text = this.ctx.localization.get(messageKey);
+                    this.zone.run(() => {
+                        this.cdr.markForCheck();
+                    });
+                });
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.clickSub.unsubscribe();
+    }
+    onClick(_e) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, deps: [{ token: i1.ToolBarButtonComponent }, { token: 'command' }, { token: i2.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarToolBase, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['command']
+                }] }, { type: i2.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });