@progress/kendo-angular-grid 7.0.0-dev.202201261657 → 7.0.0-next.202204010918

package/esm2015/filtering/menu/date-filter-menu-input.component.js

@@ -0,0 +1,154 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { filter } from 'rxjs/operators';
+import { replaceMessagePlaceholder } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../../common/single-popup.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./filter-menu-input-wrapper.component";
+import * as i4 from "@progress/kendo-angular-dateinputs";
+import * as i5 from "../filter-input.directive";
+/**
+ * @hidden
+ */
+export class DateFilterMenuInputComponent {
+    constructor(popupService, localizationService) {
+        this.popupService = popupService;
+        this.localizationService = localizationService;
+        this.operators = [];
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    open(picker) {
+        this.subscription = this.popupService.onClose
+            .pipe(filter(() => picker.isActive))
+            .subscribe(e => e.preventDefault());
+    }
+    messageFor(key) {
+        return this.localizationService.get(key);
+    }
+    get columnLabel() {
+        const localizationMsg = this.localizationService.get('filterInputLabel') || '';
+        const columnName = this.column ? this.column.title || this.column.field : '';
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+}
+DateFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateFilterMenuInputComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", menuTabbingService: "menuTabbingService", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", activeView: "activeView", bottomView: "bottomView", topView: "topView", weekNumber: "weekNumber", isFirstDropDown: "isFirstDropDown" }, ngImport: i0, template: `
+        <kendo-grid-filter-menu-input-wrapper
+            [column]="column"
+            [filter]="filter"
+            [operators]="operators"
+            [defaultOperator]="operator"
+            [currentFilter]="currentFilter"
+            [filterService]="filterService"
+            [isFirstDropDown]="isFirstDropDown"
+            [menuTabbingService]="menuTabbingService"
+        >
+            <kendo-datepicker
+                #picker
+                kendoFilterInput
+                [columnLabel]="columnLabel"
+                [filterDelay]="0"
+                (open)="open(picker)"
+                [value]="currentFilter?.value"
+                [placeholder]="placeholder"
+                [formatPlaceholder]="formatPlaceholder"
+                [format]="format"
+                [min]="min"
+                [max]="max"
+                [activeView]="activeView"
+                [bottomView]="bottomView"
+                [topView]="topView"
+                [weekNumber]="weekNumber"
+            >
+                <kendo-datepicker-messages
+                    [toggle]="messageFor('filterDateToggle')"
+                    [today]="messageFor('filterDateToday')"
+                >
+                </kendo-datepicker-messages>
+            </kendo-datepicker>
+        </kendo-grid-filter-menu-input-wrapper>
+    `, isInline: true, components: [{ type: i3.FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i4.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i4.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-date-filter-menu-input',
+                    template: `
+        <kendo-grid-filter-menu-input-wrapper
+            [column]="column"
+            [filter]="filter"
+            [operators]="operators"
+            [defaultOperator]="operator"
+            [currentFilter]="currentFilter"
+            [filterService]="filterService"
+            [isFirstDropDown]="isFirstDropDown"
+            [menuTabbingService]="menuTabbingService"
+        >
+            <kendo-datepicker
+                #picker
+                kendoFilterInput
+                [columnLabel]="columnLabel"
+                [filterDelay]="0"
+                (open)="open(picker)"
+                [value]="currentFilter?.value"
+                [placeholder]="placeholder"
+                [formatPlaceholder]="formatPlaceholder"
+                [format]="format"
+                [min]="min"
+                [max]="max"
+                [activeView]="activeView"
+                [bottomView]="bottomView"
+                [topView]="topView"
+                [weekNumber]="weekNumber"
+            >
+                <kendo-datepicker-messages
+                    [toggle]="messageFor('filterDateToggle')"
+                    [today]="messageFor('filterDateToday')"
+                >
+                </kendo-datepicker-messages>
+            </kendo-datepicker>
+        </kendo-grid-filter-menu-input-wrapper>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }]; }, propDecorators: { operators: [{
+                type: Input
+            }], column: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], operator: [{
+                type: Input
+            }], currentFilter: [{
+                type: Input
+            }], filterService: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], formatPlaceholder: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], bottomView: [{
+                type: Input
+            }], topView: [{
+                type: Input
+            }], weekNumber: [{
+                type: Input
+            }], isFirstDropDown: [{
+                type: Input
+            }] } });

package/esm2015/filtering/menu/date-filter-menu.component.js

@@ -0,0 +1,194 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, HostBinding } from '@angular/core';
+import { DateFilterComponent } from '../date-filter.component';
+import { setFilter, logicOperators } from '../base-filter-cell.component';
+import { replaceMessagePlaceholder } from '../../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./date-filter-menu-input.component";
+import * as i3 from "@progress/kendo-angular-dropdowns";
+import * as i4 from "@angular/common";
+import * as i5 from "./filter-menu-dropdownlist.directive";
+/**
+ * Represents a date-filter menu component.
+ *
+ * @example
+ *  ```html-no-run
+ *      <kendo-grid-column field="OrderDate" title="Order Date">
+ *          <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *            <kendo-grid-date-filter-menu
+ *                [column]="column"
+ *                [filter]="filter"
+ *                [filterService]="filterService"
+ *                >
+ *            </kendo-grid-date-filter-menu>
+ *          </ng-template>
+ *      </kendo-grid-column>
+ *   ```
+ */
+export class DateFilterMenuComponent extends DateFilterComponent {
+    constructor(localization) {
+        super(null, localization);
+        this.logicOperators = logicOperators(this.localization);
+        /**
+         * The current menu filter.
+         * @type {CompositeFilterDescriptor}
+         */
+        this.filter = { filters: [], logic: "and" };
+        /**
+         * Determines if the inputs of second criteria will be displayed.
+         */
+        this.extra = true;
+    }
+    /**
+     * @hidden
+     */
+    get hostClasses() {
+        return false;
+    }
+    get firstFilter() {
+        return setFilter(0, this.filter, (this.column || {}).field, this.operator);
+    }
+    get secondFilter() {
+        return setFilter(1, this.filter, (this.column || {}).field, this.operator);
+    }
+    logicChange(value) {
+        this.filter.logic = value;
+    }
+    get filterMenuDropDownLabel() {
+        const localizationMsg = this.localization.get('filterMenuLogicDropDownLabel') || '';
+        const columnName = this.column ? this.column.title || this.column.field : '';
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+    localizationChange() {
+        this.logicOperators = logicOperators(this.localization);
+        super.localizationChange();
+    }
+}
+DateFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateFilterMenuComponent, selector: "kendo-grid-date-filter-menu", inputs: { column: "column", filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-date-filter-menu-input
+            [currentFilter]="firstFilter"
+            [operators]="operators"
+            [filterService]="filterService"
+            [column]="column"
+            [filter]="filter"
+            [activeView]="activeView"
+            [bottomView]="bottomView"
+            [topView]="topView"
+            [format]="format"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [weekNumber]="weekNumber"
+            [isFirstDropDown]="true"
+            [menuTabbingService]="menuTabbingService"
+            >
+        </kendo-grid-date-filter-menu-input>
+        <kendo-dropdownlist
+            *ngIf="extra"
+            kendoFilterMenuDropDown
+            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+            class="k-filter-and"
+            [data]="logicOperators"
+            [valuePrimitive]="true"
+            (valueChange)="logicChange($event)"
+            [value]="filter?.logic"
+            textField="text"
+            valueField="value">
+        </kendo-dropdownlist>
+        <kendo-grid-date-filter-menu-input
+            *ngIf="extra"
+            [operators]="operators"
+            [currentFilter]="secondFilter"
+            [filterService]="filterService"
+            [column]="column"
+            [filter]="filter"
+            [activeView]="activeView"
+            [bottomView]="bottomView"
+            [topView]="topView"
+            [format]="format"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [weekNumber]="weekNumber"
+            [menuTabbingService]="menuTabbingService"
+            >
+        </kendo-grid-date-filter-menu-input>
+    `, isInline: true, components: [{ type: i2.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"] }, { type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-date-filter-menu',
+                    template: `
+        <kendo-grid-date-filter-menu-input
+            [currentFilter]="firstFilter"
+            [operators]="operators"
+            [filterService]="filterService"
+            [column]="column"
+            [filter]="filter"
+            [activeView]="activeView"
+            [bottomView]="bottomView"
+            [topView]="topView"
+            [format]="format"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [weekNumber]="weekNumber"
+            [isFirstDropDown]="true"
+            [menuTabbingService]="menuTabbingService"
+            >
+        </kendo-grid-date-filter-menu-input>
+        <kendo-dropdownlist
+            *ngIf="extra"
+            kendoFilterMenuDropDown
+            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
+            class="k-filter-and"
+            [data]="logicOperators"
+            [valuePrimitive]="true"
+            (valueChange)="logicChange($event)"
+            [value]="filter?.logic"
+            textField="text"
+            valueField="value">
+        </kendo-dropdownlist>
+        <kendo-grid-date-filter-menu-input
+            *ngIf="extra"
+            [operators]="operators"
+            [currentFilter]="secondFilter"
+            [filterService]="filterService"
+            [column]="column"
+            [filter]="filter"
+            [activeView]="activeView"
+            [bottomView]="bottomView"
+            [topView]="topView"
+            [format]="format"
+            [formatPlaceholder]="formatPlaceholder"
+            [placeholder]="placeholder"
+            [min]="min"
+            [max]="max"
+            [weekNumber]="weekNumber"
+            [menuTabbingService]="menuTabbingService"
+            >
+        </kendo-grid-date-filter-menu-input>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-filtercell']
+            }], column: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], extra: [{
+                type: Input
+            }], filterService: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }] } });

package/esm2015/filtering/menu/filter-menu-container.component.js

@@ -0,0 +1,263 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { MenuTabbingService } from './menu-tabbing.service';
+import { Component, Input, SkipSelf, Output, EventEmitter, ViewChild } from '@angular/core';
+import { FilterService } from "../filter.service";
+import { removeFilter, filtersByField } from "../base-filter-cell.component";
+import { isPresent, isNullOrEmptyString } from "../../utils";
+import { cloneFilters } from '../../common/filter-descriptor-differ';
+import * as i0 from "@angular/core";
+import * as i1 from "../filter.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./menu-tabbing.service";
+import * as i4 from "@angular/forms";
+import * as i5 from "@angular/common";
+import * as i6 from "./filter-menu-host.directive";
+const isNoValueOperator = operator => (operator === "isnull"
+    || operator === "isnotnull"
+    || operator === "isempty"
+    || operator === "isnotempty");
+const validFilters = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
+const trimFilters = filter => {
+    filter.filters = filter.filters.filter(validFilters);
+    return filter;
+};
+const findParent = (filters, field, parent) => {
+    return filters.reduce((acc, filter) => {
+        if (acc) {
+            return acc;
+        }
+        if (filter.filters) {
+            return findParent(filter.filters, field, filter);
+        }
+        else if (filter.field === field) {
+            return parent;
+        }
+        return acc;
+    }, undefined);
+};
+const parentLogicOfDefault = (filter, field, def = "and") => {
+    const parent = findParent(((filter || {}).filters || []), field);
+    return isPresent(parent) ? parent.logic : def;
+};
+/**
+ * @hidden
+ */
+export class FilterMenuContainerComponent {
+    constructor(parentService, childService, localization, cd, menuTabbingService) {
+        this.parentService = parentService;
+        this.childService = childService;
+        this.localization = localization;
+        this.cd = cd;
+        this.close = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.actionsClass = 'k-action-buttons k-button-group';
+        this._templateContext = {};
+        this.menuTabbingService = menuTabbingService;
+    }
+    get filter() {
+        return this._filter;
+    }
+    /**
+     * The current root filter.
+     * @type {CompositeFilterDescriptor}
+     */
+    set filter(value) {
+        this._filter = cloneFilters(value);
+    }
+    get childFilter() {
+        if (!isPresent(this._childFilter)) {
+            this._childFilter = {
+                filters: filtersByField(this.filter, (this.column || {}).field),
+                logic: parentLogicOfDefault(this.filter, (this.column || {}).field)
+            };
+        }
+        return this._childFilter;
+    }
+    ngOnInit() {
+        this.subscription = this.childService.changes.subscribe(filter => this._childFilter = filter);
+        this.subscription.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+    }
+    ngAfterViewChecked() {
+        if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
+            this.menuTabbingService.lastFocusable = this.disabled ?
+                this.resetButton.nativeElement : this.filterButton.nativeElement;
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        this.menuTabbingService.lastFocusable = undefined;
+    }
+    get disabled() {
+        return !this.childFilter.filters.some(validFilters);
+    }
+    get templateContext() {
+        this._templateContext.column = this.column;
+        this._templateContext.filter = this.childFilter;
+        this._templateContext.filterService = this.childService;
+        this._templateContext["$implicit"] = this.childFilter;
+        return this._templateContext;
+    }
+    get hasTemplate() {
+        return isPresent(this.column) && isPresent(this.column.filterMenuTemplateRef);
+    }
+    submit() {
+        const filter = trimFilters(this.childFilter);
+        if (filter.filters.length) {
+            const root = this.filter || {
+                filters: [],
+                logic: "and"
+            };
+            removeFilter(root, this.column.field);
+            root.filters.push(filter);
+            this.parentService.filter(root);
+        }
+        this.close.emit();
+        return false;
+    }
+    reset() {
+        const root = this.filter || {
+            filters: [],
+            logic: "and"
+        };
+        removeFilter(root, this.column.field);
+        this.parentService.filter(root);
+        this.close.emit();
+    }
+    onTab(e, buttonType) {
+        if (this.menuTabbingService.firstFocusable && (!this.menuTabbingService.isColumnMenu || this.isLast)) {
+            e.preventDefault();
+            if (buttonType === 'reset') {
+                // eslint-disable-next-line no-unused-expressions
+                this.disabled ? this.menuTabbingService.firstFocusable.focus() : this.filterButton.nativeElement.focus();
+            }
+            else {
+                this.menuTabbingService.firstFocusable.focus();
+            }
+        }
+    }
+    get clearText() {
+        return this.localization.get("filterClearButton");
+    }
+    get filterText() {
+        return this.localization.get("filterFilterButton");
+    }
+}
+FilterMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
+FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuContainerComponent, 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
+    ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <ng-container [ngSwitch]="hasTemplate">
+                    <ng-container *ngSwitchCase="false">
+                        <ng-container
+                            kendoFilterMenuHost
+                            [filterService]="childService"
+                            [column]="column"
+                            [filter]="childFilter"
+                            [menuTabbingService]="menuTabbingService">
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="true">
+                        <ng-template
+                            *ngIf="column.filterMenuTemplateRef"
+                            [ngTemplateOutlet]="column.filterMenuTemplateRef"
+                            [ngTemplateOutletContext]="templateContext"
+                            >
+                        </ng-template>
+                    </ng-container>
+                </ng-container>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
+                    <button #filterButton
+                        type="submit"
+                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [disabled]="disabled"
+                        (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                </div>
+            </div>
+        </form>
+    `, isInline: true, directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        FilterService,
+                        MenuTabbingService
+                    ],
+                    selector: 'kendo-grid-filter-menu-container',
+                    template: `
+        <form (submit)="submit()" (reset)="reset()"
+            class="k-filter-menu k-group k-reset k-state-border-up">
+            <div class="k-filter-menu-container">
+                <ng-container [ngSwitch]="hasTemplate">
+                    <ng-container *ngSwitchCase="false">
+                        <ng-container
+                            kendoFilterMenuHost
+                            [filterService]="childService"
+                            [column]="column"
+                            [filter]="childFilter"
+                            [menuTabbingService]="menuTabbingService">
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="true">
+                        <ng-template
+                            *ngIf="column.filterMenuTemplateRef"
+                            [ngTemplateOutlet]="column.filterMenuTemplateRef"
+                            [ngTemplateOutletContext]="templateContext"
+                            >
+                        </ng-template>
+                    </ng-container>
+                </ng-container>
+                <div [ngClass]="actionsClass">
+                    <button
+                        #resetButton
+                        type="reset"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
+                    <button #filterButton
+                        type="submit"
+                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [disabled]="disabled"
+                        (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
+                </div>
+            </div>
+        </form>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService, decorators: [{
+                    type: SkipSelf
+                }] }, { type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i3.MenuTabbingService }]; }, propDecorators: { close: [{
+                type: Output
+            }], column: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], actionsClass: [{
+                type: Input
+            }], resetButton: [{
+                type: ViewChild,
+                args: ['resetButton', { static: false }]
+            }], filterButton: [{
+                type: ViewChild,
+                args: ['filterButton', { static: false }]
+            }] } });

package/esm2015/filtering/menu/filter-menu-dropdownlist.directive.js

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+/**
+ * @hidden
+ */
+export class FilterMenuDropDownListDirective {
+    constructor(host) {
+        this.host = host;
+        this.keydownHandler = (e) => {
+            if (e.keyCode === Keys.Escape && this.host.isOpen) {
+                e.stopPropagation();
+                this.host.toggle(false);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        const wrapperElement = this.host.wrapper.nativeElement;
+        wrapperElement.setAttribute('aria-label', this.filterMenuDropDownLabel);
+        wrapperElement.addEventListener('keydown', this.keydownHandler, true);
+    }
+    ngOnDestroy() {
+        this.host.wrapper.nativeElement.removeEventListener('keydown', this.keydownHandler);
+    }
+}
+FilterMenuDropDownListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuDropDownListDirective, deps: [{ token: i1.DropDownListComponent }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuDropDownListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: { filterMenuDropDownLabel: "filterMenuDropDownLabel" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuDropDownListDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoFilterMenuDropDown]' }]
+        }], ctorParameters: function () { return [{ type: i1.DropDownListComponent }]; }, propDecorators: { filterMenuDropDownLabel: [{
+                type: Input
+            }] } });