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

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NavigationService } from './../../navigation/navigation.service';
-import { ChangeDetectorRef, Component, ElementRef, Input, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
 import { FilterService } from "../filter.service";
 import { ColumnComponent } from '../../columns/column.component';
 import { SinglePopupService } from '../../common/single-popup.service';
@@ -14,12 +14,14 @@ import { ContextService } from '../../common/provider.service';
 import { IdService } from '../../common/id.service';
 import { FilterMenuContainerComponent } from './filter-menu-container.component';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { AdaptiveGridService } from '../../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/single-popup.service";
 import * as i3 from "../../common/provider.service";
 import * as i4 from "./../../navigation/navigation.service";
-import * as i5 from "../../common/id.service";
+import * as i5 from "../../common/adaptiveness.service";
+import * as i6 from "../../common/id.service";
 let id = 0;
 const getId = (gridId) => `${gridId}-filter-menu-${id++}`;
 /**
@@ -32,6 +34,8 @@ export class FilterMenuComponent {
     navigationService;
     renderer;
     cdr;
+    adaptiveGridService;
+    zone;
     idService;
     filterIcon = filterIcon;
     /**
@@ -49,13 +53,15 @@ export class FilterMenuComponent {
     tabIndex = '-1';
     popupRef;
     popupSubs;
-    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, idService) {
+    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, adaptiveGridService, zone, idService) {
         this.filterService = filterService;
         this.popupService = popupService;
         this.ctx = ctx;
         this.navigationService = navigationService;
         this.renderer = renderer;
         this.cdr = cdr;
+        this.adaptiveGridService = adaptiveGridService;
+        this.zone = zone;
         this.idService = idService;
     }
     ngOnDestroy() {
@@ -79,32 +85,41 @@ export class FilterMenuComponent {
         return this.navigationService.tableEnabled;
     }
     toggle(anchor, template) {
-        this.popupRef = this.popupService.open(anchor, template, this.popupRef);
-        // Needed as changes to 'popupRef' 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.close();
-                this.updateAria(ariaRoot);
-            });
-            this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
-                this.popupRef = null;
-                this.updateAria(ariaRoot);
-            }));
-            const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-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.filterLabel);
-                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
-                ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+        if (this.ctx.grid?.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
+            if (!this.ctx.grid.isActionSheetExpanded) {
+                this.adaptiveGridService.viewType = 'filterMenu';
+                this.adaptiveGridService.column = this.column;
+                this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
             }
         }
         else {
-            this.focusRoot();
+            this.popupRef = this.popupService.open(anchor, template, this.popupRef);
+            // Needed as changes to 'popupRef' 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.close();
+                    this.updateAria(ariaRoot);
+                });
+                this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
+                    this.popupRef = null;
+                    this.updateAria(ariaRoot);
+                }));
+                const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-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.filterLabel);
+                    ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
+                    ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
+                }
+            }
+            else {
+                this.focusRoot();
+            }
         }
         return false;
     }
@@ -126,7 +141,7 @@ export class FilterMenuComponent {
     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: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.AdaptiveGridService }, { token: i0.NgZone }, { token: i6.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuComponent, isStandalone: true, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
@@ -183,9 +198,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
     `,
                     standalone: true,
-                    imports: [IconWrapperComponent, FilterMenuContainerComponent]
+                    imports: [IconWrapperComponent, FilterMenuContainerComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.IdService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.AdaptiveGridService }, { type: i0.NgZone }, { type: i6.IdService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { column: [{
                 type: Input

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

@@ -94,6 +94,7 @@ export class NumericFilterMenuInputComponent {
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [autoCorrect]="true"
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [value]="currentFilter?.value"
                 [format]="format"
                 [decimals]="decimals"
@@ -129,6 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [autoCorrect]="true"
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [value]="currentFilter?.value"
                 [format]="format"
                 [decimals]="decimals"

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

@@ -116,6 +116,9 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
         <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"
@@ -141,7 +144,7 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
             [menuTabbingService]="menuTabbingService"
             [placeholder]="extraPlaceholder">
         </kendo-grid-numeric-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format", "placeholder"] }, { 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: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format", "placeholder"] }, { 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: NumericFilterMenuComponent, decorators: [{
             type: Component,
@@ -168,6 +171,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/string-filter-menu-input.component.mjs

@@ -51,6 +51,7 @@ export class StringFilterMenuInputComponent {
             <kendo-textbox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [filterDelay]="0"
                 [placeholder]="placeholder"
                 [ngModel]="currentFilter?.value ?? null">
@@ -75,6 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-textbox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
+                [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [filterDelay]="0"
                 [placeholder]="placeholder"
                 [ngModel]="currentFilter?.value ?? null">

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

@@ -32,7 +32,8 @@ import * as i1 from "../../common/provider.service";
  * ```
  */
 export class StringFilterMenuComponent extends StringFilterComponent {
-    logicOperators = logicOperators(this.ctx.localization);
+    ctx;
+    logicOperators = [];
     /**
      * @hidden
      */
@@ -69,6 +70,8 @@ export class StringFilterMenuComponent extends StringFilterComponent {
     menuTabbingService;
     constructor(ctx) {
         super(null, ctx);
+        this.ctx = ctx;
+        this.logicOperators = logicOperators(this.ctx.localization);
     }
     get firstFilter() {
         return setFilter(0, this.filter, (this.column || {}).field, this.operator);
@@ -103,6 +106,9 @@ export class StringFilterMenuComponent extends StringFilterComponent {
         <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"
@@ -121,7 +127,7 @@ export class StringFilterMenuComponent extends StringFilterComponent {
             [placeholder]="extraPlaceholder"
             [menuTabbingService]="menuTabbingService">
         </kendo-grid-string-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { 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: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { 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: StringFilterMenuComponent, decorators: [{
             type: Component,
@@ -141,6 +147,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"