@progress/kendo-angular-grid 19.0.0-develop.17 → 19.0.0-develop.19

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/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/directives.mjs

@@ -73,7 +73,7 @@ import { FilterRowComponent } from "./filtering/filter-row.component";
 // COLUMN MENU
 import { ColumnMenuChooserItemCheckedDirective } from "./column-menu/column-chooser-item-checked.directive";
 import { ColumnChooserComponent } from "./column-menu/column-chooser.component";
-import { ColumnChooserToolbarDirective } from "./column-menu/column-chooser-tool.directive";
+import { ColumnChooserToolbarDirective } from "./rendering/toolbar/tools/column-chooser-tool.directive";
 import { ColumnListComponent } from "./column-menu/column-list.component";
 import { ColumnMenuAutoSizeAllColumnsComponent } from "./column-menu/column-menu-autosize-all.component";
 import { ColumnMenuAutoSizeColumnComponent } from "./column-menu/column-menu-autosize.component";

package/esm2022/editing-directives/external-editing.directive.mjs

@@ -9,9 +9,11 @@ import { markAllAsTouched } from './utils';
 import { EditingDirectiveBase } from './editing-directive-base';
 import { DialogFormComponent } from '../editing/form';
 import { isPresent } from '@progress/kendo-angular-common';
+import { AdaptiveGridService } from '../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
+import * as i3 from "../common/adaptiveness.service";
 /**
  * A directive which encapsulates the editing operations of the Grid when using the
  * External Form ([see example](slug:editing_directives_grid#external-editing)).
@@ -19,6 +21,7 @@ import * as i2 from "../editing/local-data-changes.service";
 export class ExternalEditingDirective extends EditingDirectiveBase {
     grid;
     localDataChangesService;
+    adaptiveGridService;
     /**
      * The function that creates the `FormGroup` for the edited model.
      */
@@ -31,10 +34,11 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
      * Allows you to customize the Dialog that contains the edit form.
      */
     dialogSettings;
-    constructor(grid, localDataChangesService) {
+    constructor(grid, localDataChangesService, adaptiveGridService) {
         super(grid, localDataChangesService);
         this.grid = grid;
         this.localDataChangesService = localDataChangesService;
+        this.adaptiveGridService = adaptiveGridService;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -46,19 +50,29 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
      * Opens a Dialog that contains the edit form.
      */
     openEditFormDialog(editEventArgs, formGroup, formSettings) {
-        const settings = { appendTo: this.grid.dialogContainer, content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
-        const dialog = this.dialogService.open(settings);
         const formControls = this.normalizeFormSettings(formGroup, editEventArgs);
-        dialog.content.setInput('controls', formControls);
-        formSettings && dialog.content.setInput('formSettings', formSettings);
-        dialog.content.setInput('formGroup', formGroup);
-        dialog.result.subscribe((r) => {
-            const resultType = r['text'];
-            if (resultType === this.localization.get('externalEditingSaveText')) {
-                this.saveHandler({ ...editEventArgs, formGroup });
+        if (this.grid.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'externalEditing';
+                this.grid.adaptiveRenderer.externalEditingSettings = { formControls, formGroup, formSettings, event: editEventArgs, externalEditingDirective: this };
+                this.grid.adaptiveRenderer.actionSheet.toggle(true);
             }
-            dialog.close();
-        });
+        }
+        else {
+            const settings = { appendTo: this.grid.dialogContainer, content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
+            const dialog = this.dialogService.open(settings);
+            this.adaptiveGridService.popupRef = dialog;
+            dialog.content.setInput('controls', formControls);
+            formSettings && dialog.content.setInput('formSettings', formSettings);
+            dialog.content.setInput('formGroup', formGroup);
+            dialog.result.subscribe((r) => {
+                const resultType = r['text'];
+                if (resultType === this.localization.get('externalEditingSaveText')) {
+                    this.saveHandler({ ...editEventArgs, formGroup });
+                }
+                dialog.close();
+            });
+        }
     }
     createModel(args) {
         return this.createFormGroup(args);
@@ -111,7 +125,7 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
         });
         return settings.filter(item => isPresent(item));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, deps: [{ token: i1.GridComponent }, { token: i2.LocalDataChangesService }, { token: i3.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExternalEditingDirective, isStandalone: true, selector: "[kendoGridExternalEditing]", inputs: { createFormGroup: ["kendoGridExternalEditing", "createFormGroup"], formSettings: "formSettings", dialogSettings: "dialogSettings" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExternalEditingDirective, decorators: [{
@@ -120,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridExternalEditing]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.LocalDataChangesService }]; }, propDecorators: { createFormGroup: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i2.LocalDataChangesService }, { type: i3.AdaptiveGridService }]; }, propDecorators: { createFormGroup: [{
                 type: Input,
                 args: ['kendoGridExternalEditing']
             }], formSettings: [{

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

@@ -119,7 +119,7 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
                     (change)="onChange(item.value, input)"
                     (keydown.shift.tab)="onShiftTab($event)"
                 ></kendo-radiobutton>
-                <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
+                <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
             </li>
         </ul>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
@@ -141,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     (change)="onChange(item.value, input)"
                     (keydown.shift.tab)="onShiftTab($event)"
                 ></kendo-radiobutton>
-                <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
+                <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
             </li>
         </ul>
     `,

package/esm2022/filtering/menu/date-filter-menu-input.component.mjs

@@ -76,6 +76,7 @@ export class DateFilterMenuInputComponent {
             <kendo-datepicker
                 #picker
                 kendoFilterInput
+                [adaptiveMode]="ctx.grid?.adaptiveMode"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 (open)="open(picker)"
@@ -114,6 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-datepicker
                 #picker
                 kendoFilterInput
+                [adaptiveMode]="ctx.grid?.adaptiveMode"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 (open)="open(picker)"

package/esm2022/filtering/menu/date-filter-menu.component.mjs

@@ -101,6 +101,8 @@ export class DateFilterMenuComponent extends DateFilterComponent {
         <kendo-dropdownlist
             *ngIf="extra"
             kendoFilterMenuDropDown
+            [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
+            [adaptiveMode]="ctx.grid?.adaptiveMode"
             [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             class="k-filter-and"
             [data]="logicOperators"
@@ -156,6 +158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-dropdownlist
             *ngIf="extra"
             kendoFilterMenuDropDown
+            [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
+            [adaptiveMode]="ctx.grid?.adaptiveMode"
             [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             class="k-filter-and"
             [data]="logicOperators"

package/esm2022/filtering/menu/filter-menu-container.component.mjs

@@ -13,16 +13,21 @@ import { ContextService } from '../../common/provider.service';
 import { FilterMenuHostDirective } from './filter-menu-host.directive';
 import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { AdaptiveGridService } from '../../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/provider.service";
 import * as i3 from "./menu-tabbing.service";
-import * as i4 from "@angular/forms";
+import * as i4 from "../../common/adaptiveness.service";
+import * as i5 from "@angular/forms";
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
     || operator === "isnotempty");
-const validFilters = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
+/**
+ * @hidden
+ */
+export const validFilters = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
 const trimFilters = filter => {
     filter.filters = filter.filters.filter(validFilters);
     return filter;
@@ -41,7 +46,10 @@ const findParent = (filters, field, parent) => {
         return acc;
     }, undefined);
 };
-const parentLogicOfDefault = (filter, field, def = "and") => {
+/**
+ * @hidden
+ */
+export const parentLogicOfDefault = (filter, field, def = "and") => {
     const parent = findParent(((filter || {}).filters || []), field);
     return isPresent(parent) ? parent.logic : def;
 };
@@ -53,6 +61,7 @@ export class FilterMenuContainerComponent {
     childService;
     ctx;
     cd;
+    adaptiveGridService;
     close = new EventEmitter();
     /**
      * The column with which the filter is associated.
@@ -100,12 +109,14 @@ export class FilterMenuContainerComponent {
     subscription;
     _templateContext = {};
     _filter;
-    constructor(parentService, childService, ctx, cd, menuTabbingService) {
+    constructor(parentService, childService, ctx, cd, menuTabbingService, adaptiveGridService) {
         this.parentService = parentService;
         this.childService = childService;
         this.ctx = ctx;
         this.cd = cd;
+        this.adaptiveGridService = adaptiveGridService;
         this.menuTabbingService = menuTabbingService;
+        this.adaptiveGridService.filterMenuContainer = this;
     }
     ngOnInit() {
         this.subscription = this.childService.changes.subscribe(filter => this._childFilter = filter);
@@ -113,7 +124,7 @@ export class FilterMenuContainerComponent {
     }
     ngAfterViewChecked() {
         if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
-            this.menuTabbingService.lastFocusable = this.resetButton.nativeElement;
+            this.menuTabbingService.lastFocusable = this.resetButton?.nativeElement;
         }
     }
     ngOnDestroy() {
@@ -175,7 +186,7 @@ export class FilterMenuContainerComponent {
     get filterText() {
         return this.ctx.localization.get("filterFilterButton");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
             FilterService,
             MenuTabbingService
@@ -202,7 +213,7 @@ export class FilterMenuContainerComponent {
                         </ng-template>
                     </ng-container>
                 </ng-container>
-                <div [ngClass]="actionsClass">
+                <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
@@ -216,7 +227,7 @@ export class FilterMenuContainerComponent {
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
             type: Component,
@@ -249,7 +260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </ng-template>
                     </ng-container>
                 </ng-container>
-                <div [ngClass]="actionsClass">
+                <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
                     <button #filterButton
                         type="submit"
                         class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
@@ -269,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.FilterService, decorators: [{
                     type: SkipSelf
-                }] }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3.MenuTabbingService }]; }, propDecorators: { close: [{
+                }] }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3.MenuTabbingService }, { type: i4.AdaptiveGridService }]; }, propDecorators: { close: [{
                 type: Output
             }], column: [{
                 type: Input