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

package/esm2022/excel/excel-command-tool.directive.mjs

@@ -2,14 +2,16 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive } from '@angular/core';
+import { ChangeDetectorRef, Directive, NgZone } from '@angular/core';
 import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
-import { Subscription } from 'rxjs';
-import { fileExcelIcon } from '@progress/kendo-svg-icons';
 import { ExcelService } from './excel.service';
+import { ContextService } from '../common/provider.service';
+import { ToolbarToolBase } from '../common/toolbar-tool-base.directive';
+import { ToolbarToolName } from '../navigation/toolbar-tool-name';
 import * as i0 from "@angular/core";
 import * as i1 from "./excel.service";
 import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../common/provider.service";
 /**
  * Represents the `export-to-Excel` toolbar tool of the Grid.
  * You can apply this directive to any `kendo-toolbar-button` element inside a
@@ -30,22 +32,15 @@ import * as i2 from "@progress/kendo-angular-toolbar";
  * </kendo-grid>
  * ```
  */
-export class ExcelCommandToolbarDirective {
+export class ExcelCommandToolbarDirective extends ToolbarToolBase {
     excelService;
-    host;
-    clickSub = new Subscription();
-    constructor(excelService, host) {
+    constructor(excelService, host, ctx, zone, cdr) {
+        super(host, ToolbarToolName.excelExport, ctx, zone, cdr);
         this.excelService = excelService;
-        this.host = host;
     }
     ngOnInit() {
-        this.clickSub = this.host.click.subscribe(e => this.onClick(e));
+        super.ngOnInit();
         this.host.className = 'k-grid-excel';
-        this.host.svgIcon = fileExcelIcon;
-        this.host.icon = 'file-excel';
-    }
-    ngOnDestroy() {
-        this.clickSub.unsubscribe();
     }
     /**
      * @hidden
@@ -54,8 +49,8 @@ export class ExcelCommandToolbarDirective {
         e.preventDefault();
         this.excelService.exportClick.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: i1.ExcelService }, { token: i2.ToolBarButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExcelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridExcelTool]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, deps: [{ token: i1.ExcelService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ExcelCommandToolbarDirective, isStandalone: true, selector: "[kendoGridExcelTool]", usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelCommandToolbarDirective, decorators: [{
             type: Directive,
@@ -63,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridExcelTool]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i2.ToolBarButtonComponent }]; } });
+        }], ctorParameters: function () { return [{ type: i1.ExcelService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });

package/esm2022/filtering/cell/autocomplete-filter-cell.component.mjs

@@ -79,7 +79,7 @@ export class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "showStickyHeader", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoAutoComplete"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
             type: Component,

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

@@ -81,7 +81,7 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
                 [value]="currentFilter?.value">
             </kendo-dropdownlist>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
             type: Component,

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

@@ -94,7 +94,7 @@ export class DateFilterCellComponent extends DateFilterComponent {
                 ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,

package/esm2022/filtering/cell/filter-cell-operators.component.mjs

@@ -175,7 +175,7 @@ export class FilterCellOperatorsComponent {
             [size]="size"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)"></button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { 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"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,

package/esm2022/filtering/filter-input.directive.mjs

@@ -13,6 +13,7 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class FilterInputDirective {
+    ngZone;
     element;
     renderer;
     change = new EventEmitter();
@@ -31,12 +32,19 @@ export class FilterInputDirective {
     changeRequestsSubscription;
     unsubscribeEvents;
     constructor(valueAccessors, ngZone, element, renderer) {
+        this.ngZone = ngZone;
         this.element = element;
         this.renderer = renderer;
         this.accessor = valueAccessors[0];
         ngZone.runOutsideAngular(() => {
             const unsubscribeStart = renderer.listen(element.nativeElement, 'compositionstart', () => this.composing = true);
-            const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', () => this.composing = false);
+            const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', (event) => {
+                this.composing = false;
+                const value = event.target?.value;
+                this.filterDelay > 0 ?
+                    this.changeRequests.next(value) :
+                    this.change.emit(value);
+            });
             this.unsubscribeEvents = () => {
                 unsubscribeStart();
                 unsubscribeEnd();
@@ -63,7 +71,11 @@ export class FilterInputDirective {
     subscribeChanges() {
         this.changeRequestsSubscription = this.changeRequests
             .pipe(debounceTime(this.filterDelay), filter(() => !this.composing))
-            .subscribe(x => this.change.emit(x));
+            .subscribe((x) => {
+            this.ngZone.run(() => {
+                this.change.emit(x);
+            });
+        });
     }
     unsubscribeChanges() {
         if (this.changeRequestsSubscription) {

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

@@ -113,13 +113,14 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
                     kendoFilterMenuRadioButton
                     [columnLabel]="columnLabel"
                     #input
+                    [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (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"] }] });
@@ -135,13 +136,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     kendoFilterMenuRadioButton
                     [columnLabel]="columnLabel"
                     #input
+                    [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (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,8 @@ export class DateFilterMenuInputComponent {
             <kendo-datepicker
                 #picker
                 kendoFilterInput
+                [adaptiveMode]="ctx.grid?.adaptiveMode"
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 (open)="open(picker)"
@@ -95,7 +97,7 @@ export class DateFilterMenuInputComponent {
                 ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
             type: Component,
@@ -114,6 +116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-datepicker
                 #picker
                 kendoFilterInput
+                [adaptiveMode]="ctx.grid?.adaptiveMode"
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 (open)="open(picker)"

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

@@ -101,6 +101,9 @@ export class DateFilterMenuComponent extends DateFilterComponent {
         <kendo-dropdownlist
             *ngIf="extra"
             kendoFilterMenuDropDown
+            [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
+            [adaptiveMode]="ctx.grid?.adaptiveMode"
+            [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
             [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             class="k-filter-and"
             [data]="logicOperators"
@@ -128,7 +131,7 @@ export class DateFilterMenuComponent extends DateFilterComponent {
             [weekNumber]="weekNumber"
             [menuTabbingService]="menuTabbingService">
         </kendo-grid-date-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
             type: Component,
@@ -156,6 +159,9 @@ 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"
+            [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
             [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

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

@@ -10,36 +10,52 @@ import { FilterInputWrapperComponent } from "../filter-input-wrapper.component";
 import { replaceMessagePlaceholder } from '../../utils';
 import { ContextService } from '../../common/provider.service';
 import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
+import { AdaptiveGridService } from '../../common/adaptiveness.service';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/provider.service";
+import * as i2 from "../../common/adaptiveness.service";
 /**
  * @hidden
  */
 export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
     ctx;
+    adaptiveGridService;
     filterService;
     isFirstDropDown;
     menuTabbingService;
     firstOperatorDropDown;
     _currentFilter;
+    subs = new Subscription();
     /**
      * @hidden
      */
     get hostClasses() {
         return false;
     }
-    constructor(ctx) {
+    constructor(ctx, adaptiveGridService) {
         super(null);
         this.ctx = ctx;
+        this.adaptiveGridService = adaptiveGridService;
     }
     ngAfterViewInit() {
         const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService?.menuTabbingService;
         const isTabbedInterface = this.menuTabbingService?.isTabbedInterface;
         if (shouldFocusFirstFocusable && !isTabbedInterface) {
             this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
-            this.firstOperatorDropDown.focus();
+            if (this.ctx.grid?.isActionSheetExpanded) {
+                this.subs.add(this.adaptiveGridService.animationEnd.subscribe(() => {
+                    this.firstOperatorDropDown.focus();
+                }));
+            }
+            else {
+                this.firstOperatorDropDown.focus();
+            }
         }
     }
+    ngOnDestroy() {
+        this.subs?.unsubscribe();
+    }
     operatorChange(dataItem) {
         this.currentOperator = dataItem;
     }
@@ -85,10 +101,13 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
         const columnName = this.column ? this.column.title || this.column.field : '';
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }, { token: i2.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuInputWrapperComponent, isStandalone: true, selector: "kendo-grid-filter-menu-input-wrapper", inputs: { filterService: "filterService", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService", currentFilter: "currentFilter" }, viewQueries: [{ propertyName: "firstOperatorDropDown", first: true, predicate: DropDownListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <kendo-dropdownlist
             kendoFilterMenuDropDown
+            [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
+            [adaptiveMode]="ctx.grid?.adaptiveMode"
+            [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
             [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             [data]="operators"
             (valueChange)="operatorChange($event)"
@@ -99,7 +118,7 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
             (keydown.shift.tab)="onShiftTab($event)">
         </kendo-dropdownlist>
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
             type: Component,
@@ -108,6 +127,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <kendo-dropdownlist
             kendoFilterMenuDropDown
+            [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
+            [adaptiveMode]="ctx.grid?.adaptiveMode"
+            [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
             [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             [data]="operators"
             (valueChange)="operatorChange($event)"
@@ -122,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownListComponent, FilterMenuDropDownListDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { filterService: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.AdaptiveGridService }]; }, propDecorators: { filterService: [{
                 type: Input
             }], isFirstDropDown: [{
                 type: Input