@progress/kendo-angular-filter 2.3.1 → 11.0.0-develop.80

package/fesm2020/progress-kendo-angular-filter.mjs

@@ -0,0 +1,2222 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { Injectable, Directive, Component, Input, ContentChild, EventEmitter, Output, isDevMode, forwardRef, ViewChildren, HostListener, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import * as i1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i10 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i2 from '@progress/kendo-angular-dropdowns';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import * as i2$1 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i2$2 from '@progress/kendo-angular-dateinputs';
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+import * as i12 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { LabelModule } from '@progress/kendo-angular-label';
+
+/**
+ * @hidden
+ */
+class FilterService {
+    constructor() {
+        this.normalizedValue = { logic: 'and', filters: [] };
+        this.filters = [];
+    }
+    addFilterGroup(item) {
+        const filterGroup = { logic: 'and', filters: [] };
+        item.filters.push(filterGroup);
+    }
+    addFilterExpression(item) {
+        const filterExpression = { operator: 'eq', value: null, field: null };
+        item.filters.push(filterExpression);
+    }
+    remove(item, positionIndex, parentItem) {
+        if (!parentItem) {
+            parentItem = this.normalizedValue;
+        }
+        if (item === parentItem) {
+            parentItem.filters = [];
+            return;
+        }
+        const index = parentItem.filters.indexOf(item);
+        if (index >= 0 && index === positionIndex) {
+            parentItem.filters = parentItem.filters.filter((i) => i !== item);
+            return;
+        }
+        parentItem.filters.forEach((filter) => filter.filters && this.remove(item, positionIndex, filter));
+    }
+}
+FilterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FilterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @hidden
+ */
+const nullOperators = ["isnull", "isnotnull", "isempty", "isnotempty"];
+/**
+ * @hidden
+ */
+const numericOperators = [
+    { text: "Is equal to", value: "eq" },
+    { text: "Not equal to", value: "neq" },
+    { text: "Greater than or equal to", value: "gte" },
+    { text: "Greater than", value: "gt" },
+    { text: "Less than or equal to", value: "lte" },
+    { text: "Less than", value: "lt" },
+    { text: "Is null", value: "isnull" },
+    { text: "Is not null", value: "isnotnull" }
+];
+/**
+ * @hidden
+ */
+const stringOperators = [
+    { text: "Is equal to", value: "eq" },
+    { text: "Not equal to", value: "neq" },
+    { text: "Contains", value: "contains" },
+    { text: "Does not contain", value: "doesnotcontain" },
+    { text: "Starts with", value: "startswith" },
+    { text: "Ends with", value: "endswith" },
+    { text: "Is null", value: "isnull" },
+    { text: "Is not null", value: "isnotnull" },
+    { text: "Is empty", value: "isempty" },
+    { text: "Is not empty", value: "isnotempty" }
+];
+/**
+ * @hidden
+ */
+const booleanOperators = [
+    { text: "Is equal to", value: "eq" },
+    { text: "Is not equal to", value: "neq" }
+];
+/**
+ * @hidden
+ */
+const dateOperators = [
+    { text: "Is equal to", value: "eq" },
+    { text: "Not equal to", value: "neq" },
+    { text: "Greater than or equal to", value: "gte" },
+    { text: "Greater than", value: "gt" },
+    { text: "Less than or equal to", value: "lte" },
+    { text: "Less than", value: "lt" },
+    { text: "Is null", value: "isnull" },
+    { text: "Is not null", value: "isnotnull" }
+];
+/**
+ * @hidden
+ */
+const isArray = (value) => Array.isArray(value);
+/**
+ * @hidden
+ */
+const getKeyByValue = (object, value) => {
+    return Object.keys(object).find(key => object[key] === value);
+};
+/**
+ * @hidden
+ */
+const defaultStringOperators = {
+    "filterEqOperator": "eq",
+    "filterNotEqOperator": "neq",
+    "filterContainsOperator": "contains",
+    "filterNotContainsOperator": "doesnotcontain",
+    "filterStartsWithOperator": "startswith",
+    "filterEndsWithOperator": "endswith",
+    "filterIsNullOperator": "isnull",
+    "filterIsNotNullOperator": "isnotnull",
+    "filterIsEmptyOperator": "isempty",
+    "filterIsNotEmptyOperator": "isnotempty"
+};
+/**
+ * @hidden
+ */
+const defaultNumericOperators = {
+    "filterEqOperator": "eq",
+    "filterNotEqOperator": "neq",
+    "filterGteOperator": "gte",
+    "filterGtOperator": "gt",
+    "filterLteOperator": "lte",
+    "filterLtOperator": "lt",
+    "filterIsNullOperator": "isnull",
+    "filterIsNotNullOperator": "isnotnull"
+};
+/**
+ * @hidden
+ */
+const defaultDateOperators = {
+    "filterEqOperator": "eq",
+    "filterNotEqOperator": "neq",
+    "filterAfterOrEqualOperator": "gte",
+    "filterAfterOperator": "gt",
+    "filterBeforeOrEqualOperator": "lte",
+    "filterBeforeOperator": "lt",
+    "filterIsNullOperator": "isnull",
+    "filterIsNotNullOperator": "isnotnull"
+};
+/**
+ * @hidden
+ */
+const defaultOperators = {
+    "string": defaultStringOperators,
+    "number": defaultNumericOperators,
+    "date": defaultDateOperators
+};
+/**
+ * @hidden
+ */
+const logicOperators = {
+    "filterAndLogic": 'and',
+    "filterOrLogic": 'or'
+};
+/**
+ * @hidden
+ */
+const isFilterEditor = (editorType) => {
+    const supportedEditorTypes = ['string', 'number', 'boolean', 'date'];
+    return supportedEditorTypes.indexOf(editorType) >= 0;
+};
+/**
+ * @hidden
+ */
+const localizeOperators = operators => localization => Object.keys(operators).map(key => ({
+    text: localization.get(key),
+    value: operators[key]
+}));
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+class FilterItem {
+}
+FilterItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterItem, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FilterItem.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterItem });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterItem, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @hidden
+ */
+const selectors = {
+    andButton: `button.k-group-start`,
+    orButton: `button.k-group-end`,
+    addFilterButton: `button[icon="filter-add-expression"]`,
+    addGroupButton: `button[icon="filter-add-group"]`,
+    removeButton: `button[icon="x"]`,
+    filterFieldWrapper: `.k-filter-field`,
+    filterOperatorWrapper: `.k-filter-operator`,
+    filterValueEditorWrapper: `.k-filter-value`,
+    kendoDropDownListComponent: `kendo-dropdownlist`,
+    kendoInput: `.k-input`,
+    kendoInputInner: `.k-input-inner`,
+    inputElement: `input`,
+    textAreaElement: `textarea`,
+    kendoToolbar: `.k-toolbar`,
+    kendoButton: `.k-button`,
+    kendoFilterToolbarItem: `.k-filter-toolbar-item`
+};
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-filter',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1672394769,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
+class FilterValueEditorTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+FilterValueEditorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterValueEditorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FilterValueEditorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FilterValueEditorTemplateDirective, selector: "[kendoFilterValueEditorTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterValueEditorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFilterValueEditorTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the [Kendo UI Filter Field component for Angular]({% slug api_filter_filterfieldcomponent %}).
+ * The Filter Field component can be used to add Filter Expressions declaratively.
+ * @example
+ * ```ts
+ *   @Component({
+ *       selector: 'my-app',
+ *       template: `
+ *          <kendo-filter (valueChange)="onValueChange($event)">
+ *              <kendo-filter-field field="country" editor="string" [operators]="['neq', 'eq', 'contains']"></kendo-filter-field>
+ *              <kendo-filter-field field="budget" editor="number"></kendo-filter-field>
+ *              <kendo-filter-field field="discontinued" title="Discontinued" editor="boolean"></kendo-filter-field>
+ *              <kendo-filter-field field="ordered on" title="Ordered on" editor="date"></kendo-filter-field>
+ *          <kendo-filter>
+ *       `
+ *   })
+ *   export class AppComponent {
+ *      onValueChange(e: CompositeFilterDescriptor){
+ *          console.log(e)
+ *      }
+ *  }
+ * ```
+ */
+class FilterFieldComponent {
+    /**
+     * Specifies the `title` text that will be displayed by the user-defined filter.
+     * If the `title` isn't set, the value passed to `field` is used.
+     */
+    set title(_title) {
+        if (_title) {
+            this._title = _title;
+        }
+        else {
+            this._title = this.field;
+        }
+    }
+    get title() {
+        return this._title;
+    }
+}
+FilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterFieldComponent, selector: "kendo-filter-field", inputs: { field: "field", title: "title", editor: "editor", operators: "operators", editorFormat: "editorFormat" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: FilterValueEditorTemplateDirective, descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-field',
+                    template: ``
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], operators: [{
+                type: Input
+            }], editorFormat: [{
+                type: Input
+            }], editorTemplate: [{
+                type: ContentChild,
+                args: [FilterValueEditorTemplateDirective]
+            }] } });
+
+/**
+ * @hidden
+ */
+class NavigationService {
+    constructor(cdr, renderer) {
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.hierarchicalFilterItems = [];
+        this.flattenFilterItems = [];
+        this.currentToolbarItemIndex = 0;
+        this.currentToolbarItemChildrenIndex = 0;
+        this.isInnerNavigationActivated = false;
+        this.isFilterExpressionComponentFocused = false;
+    }
+    processKeyDown(key, event) {
+        switch (key) {
+            case Keys.ArrowUp: {
+                event.preventDefault();
+                if (!this.isInnerNavigationActivated) {
+                    this.currentToolbarItemIndex > 0 ? this.currentToolbarItemIndex-- : this.currentToolbarItemIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            }
+            case Keys.ArrowDown: {
+                event.preventDefault();
+                if (!this.isInnerNavigationActivated) {
+                    this.currentToolbarItemIndex < this.flattenFilterItems.length - 1 ? this.currentToolbarItemIndex++ : this.currentToolbarItemIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            }
+            case Keys.Enter: {
+                const isEventTargetFilterToolbar = event.target.closest(selectors.kendoToolbar);
+                if (!this.isInnerNavigationActivated && isEventTargetFilterToolbar) {
+                    event.preventDefault();
+                    this.isInnerNavigationActivated = true;
+                    this.currentToolbarItemChildrenIndex = 0;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                const isEventTargetKendoFilterToolbarItem = event.target.closest(selectors.kendoFilterToolbarItem);
+                const isEventTargetButton = event.target.closest(selectors.kendoButton);
+                if (this.isInnerNavigationActivated &&
+                    !this.isFilterExpressionComponentFocused &&
+                    isEventTargetKendoFilterToolbarItem &&
+                    !isEventTargetButton) {
+                    event.preventDefault();
+                    this.isFilterExpressionComponentFocused = true;
+                    const focusableElement = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    const elementToFocus = focusableElement.querySelector(selectors.KendoDropDownListComponent) ||
+                        focusableElement.querySelector(selectors.kendoInputInner) ||
+                        focusableElement.querySelector(selectors.inputElement) ||
+                        focusableElement.querySelector(selectors.textAreaElement);
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            }
+            case Keys.Escape: {
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.isInnerNavigationActivated = false;
+                    this.currentToolbarItemChildrenIndex = 0;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                if (this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.isFilterExpressionComponentFocused = false;
+                    this.isInnerNavigationActivated = true;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            }
+            case Keys.ArrowRight: {
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.currentToolbarItemChildrenIndex < this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren.length - 1 ? this.currentToolbarItemChildrenIndex++ : this.currentToolbarItemChildrenIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            }
+            case Keys.ArrowLeft: {
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.currentToolbarItemChildrenIndex > 0 ? this.currentToolbarItemChildrenIndex-- : this.currentToolbarItemChildrenIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    focusCurrentElement(element, isOnMouseDown) {
+        this.renderer.setAttribute(this.currentlyFocusedElement, 'tabindex', '-1');
+        this.currentlyFocusedElement = element;
+        if (element) {
+            this.renderer.setAttribute(this.currentlyFocusedElement, 'tabindex', '0');
+            if (!isOnMouseDown) {
+                this.currentlyFocusedElement.focus();
+            }
+        }
+    }
+    flattenHierarchicalFilterItems(filterItems) {
+        filterItems.forEach((filterRow) => {
+            const flattenItem = { component: filterRow, isGroup: false, toolbarElement: filterRow.toolbarElement, focusableChildren: [] };
+            this.flattenFilterItems.push(flattenItem);
+            if ((filterRow['operators'] && filterRow['filterItems']?.length > 0)) {
+                this.setGroupItemChildren(flattenItem, filterRow);
+                this.flattenHierarchicalFilterItems(filterRow['filterItems']);
+            }
+            else if (filterRow['operators'] && filterRow['filterItems']?.length === 0) {
+                this.setGroupItemChildren(flattenItem, filterRow);
+            }
+            else {
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterFieldWrapper));
+                if (filterRow.toolbarElement.querySelector('.k-filter-operator')) {
+                    flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterOperatorWrapper));
+                }
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterValueEditorWrapper));
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.removeButton));
+            }
+        });
+    }
+    setGroupItemChildren(flattenItem, filterRow) {
+        flattenItem.isGroup = true;
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.andButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.orButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.addFilterButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.addGroupButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.removeButton));
+    }
+    setItemIndexes() {
+        this.flattenFilterItems.forEach((item, index) => {
+            item.component['itemNumber'] = index;
+        });
+        this.cdr.detectChanges();
+    }
+    reset(items) {
+        this.flattenFilterItems = [];
+        this.hierarchicalFilterItems = items;
+        this.flattenHierarchicalFilterItems(items);
+        this.setItemIndexes();
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ */
+const FilterErrorMessages = {
+    missingFilters: `Pass at least one user-defined filter through the [filters] input property or nest kendo-filter-field components. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`,
+    missingFilterForUsedField: (field) => `There is no user-defined filter with '${field}' field provided through the [filters] input property.`,
+    missingValueForBooleanField: (field) => `Provide a value for the boolean '${field}' user-defined filter as the operator is always set to 'eq'.`,
+    operatorBooleanField: (field) => `The operator of the boolean '${field}' user-defined filter is always set to 'eq'.`,
+    filterMissingUsedOperator: (field, operator) => `The user-defined filter with field '${field}' is missing the '${operator}' operator.`,
+    improperNumericEditorValue: (title) => `The provided value for the numeric editor of the '${title}' filter expression isn't one of a supported type string or NumberFormat. See http://www.telerik.com/kendo-angular-ui/components/filter/#editor-formats/`,
+    improperDateEditorValue: (title) => `The provided value for the date editor of the '${title}' filter expression isn't one of a supported type string or DateFormat. See http://www.telerik.com/kendo-angular-ui/components/filter/#editor-formats/`
+};
+
+/**
+ * @hidden
+ */
+class BaseFilterRowComponent {
+    constructor(element, navigationService, localization, renderer) {
+        this.element = element;
+        this.navigationService = navigationService;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.valueChange = new EventEmitter();
+    }
+    get toolbarElement() {
+        return this.element.nativeElement.querySelector('.k-toolbar');
+    }
+    onFocus() {
+        this.renderer.addClass(this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement, 'k-focus');
+        this.navigationService.isInnerNavigationActivated = false;
+    }
+    onBlur() {
+        this.renderer.removeClass(this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement, 'k-focus');
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onMouseDown(event) {
+        let elementToFocus;
+        const closestFilterToolbarItem = event.target.closest(selectors.kendoFilterToolbarItem);
+        const closestToolbarItem = event.target.closest(selectors.kendoToolbar);
+        if (closestFilterToolbarItem) {
+            const index = Array.from(closestToolbarItem.children).indexOf(closestFilterToolbarItem);
+            this.navigationService.currentToolbarItemChildrenIndex = index;
+            this.navigationService.isInnerNavigationActivated = true;
+            this.navigationService.isFilterExpressionComponentFocused = true;
+            const wrapperElement = this.navigationService.flattenFilterItems[this.itemNumber].focusableChildren[index];
+            elementToFocus = wrapperElement.querySelector(selectors.kendoDropDownListComponent) ||
+                wrapperElement.querySelector(selectors.kendoInput) ||
+                wrapperElement.querySelector(selectors.kendoInputInner) ||
+                wrapperElement.querySelector(selectors.inputElement) ||
+                wrapperElement.querySelector(selectors.textAreaElement);
+        }
+        else {
+            this.navigationService.currentToolbarItemChildrenIndex = 0;
+            this.navigationService.isInnerNavigationActivated = false;
+            this.navigationService.isFilterExpressionComponentFocused = false;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement;
+        }
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.focusCurrentElement(elementToFocus, true);
+    }
+}
+BaseFilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BaseFilterRowComponent, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+BaseFilterRowComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: BaseFilterRowComponent, inputs: { index: "index" }, outputs: { valueChange: "valueChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BaseFilterRowComponent, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class AriaLabelValueDirective {
+    constructor(hostElement, renderer) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        const target = this.hostElement.nativeElement.querySelector('input') || this.hostElement.nativeElement;
+        this.renderer.setAttribute(target, 'aria-label', this.ariaLabel);
+    }
+}
+AriaLabelValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AriaLabelValueDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AriaLabelValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: { ariaLabel: ["kendoAriaLabelValue", "ariaLabel"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AriaLabelValueDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kendoAriaLabelValue]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['kendoAriaLabelValue']
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterExpressionOperatorsComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.valueChange = new EventEmitter();
+        this.operators = [];
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    getOperator(operatorValue) {
+        return this.messageFor(getKeyByValue(defaultOperators[this.editorType], operatorValue));
+    }
+    operatorValueChange(value) {
+        this.valueChange.emit(value);
+    }
+}
+FilterExpressionOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterExpressionOperatorsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", editorType: "editorType", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-dropdownlist
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
+            [data]="operators"
+            [title]="messageFor('filterExpressionOperators')"
+            [(value)]="currentItem.operator"
+            (valueChange)="operatorValueChange($event)"
+            [valuePrimitive]="true"
+            textField="text"
+            valueField="value"
+        >
+            <ng-template kendoDropDownListValueTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
+        </kendo-dropdownlist>
+    `, isInline: true, components: [{ type: i2.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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { type: i2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterExpressionOperatorsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kendo-filter-expression-operators",
+                    template: `
+        <kendo-dropdownlist
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
+            [data]="operators"
+            [title]="messageFor('filterExpressionOperators')"
+            [(value)]="currentItem.operator"
+            (valueChange)="operatorValueChange($event)"
+            [valuePrimitive]="true"
+            textField="text"
+            valueField="value"
+        >
+            <ng-template kendoDropDownListValueTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                {{ getOperator(dataItem.value) }}
+            </ng-template>
+        </kendo-dropdownlist>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], editorType: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], operators: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterTextEditorComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.valueChange = new EventEmitter();
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
+}
+FilterTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterTextEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-textbox
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
+            [disabled]="isDisabled">
+        </kendo-textbox>
+  `, isInline: true, components: [{ type: i2$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-text-editor',
+                    template: `
+        <kendo-textbox
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
+            [disabled]="isDisabled">
+        </kendo-textbox>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterNumericEditorComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.valueChange = new EventEmitter();
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
+}
+FilterNumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterNumericEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterNumericEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled", format: "format" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-numerictextbox
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
+            [disabled]="isDisabled"
+            [format]="format">
+            <kendo-numerictextbox-messages
+                [increment]="messageFor('editorNumericIncrement')"
+                [decrement]="messageFor('editorNumericDecrement')">
+            </kendo-numerictextbox-messages>
+        </kendo-numerictextbox>
+  `, isInline: true, components: [{ type: i2$1.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$1.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterNumericEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-numeric-editor',
+                    template: `
+        <kendo-numerictextbox
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
+            [disabled]="isDisabled"
+            [format]="format">
+            <kendo-numerictextbox-messages
+                [increment]="messageFor('editorNumericIncrement')"
+                [decrement]="messageFor('editorNumericDecrement')">
+            </kendo-numerictextbox-messages>
+        </kendo-numerictextbox>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterBooleanEditorComponent {
+    constructor(localization, cdr) {
+        this.localization = localization;
+        this.cdr = cdr;
+        this.valueChange = new EventEmitter();
+        this.items = this.getValueItems();
+        this.defaultItem = this.getDefaultItem();
+    }
+    ngOnInit() {
+        this.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.defaultItem = this.getDefaultItem();
+            this.items = this.getValueItems();
+            this.cdr.detectChanges();
+        });
+    }
+    getDefaultItem() {
+        return { text: this.localization.get("filterBooleanAll"), value: null };
+    }
+    getValueItems() {
+        return [
+            { text: this.localization.get("filterIsTrue"), value: true },
+            { text: this.localization.get("filterIsFalse"), value: false }
+        ];
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
+}
+FilterBooleanEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterBooleanEditorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FilterBooleanEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    <kendo-dropdownlist
+        [tabindex]="-1"
+        [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+        [value]="currentItem.value"
+        (valueChange)="onValueChange($event)"
+        [data]="items"
+        [defaultItem]="defaultItem"
+        [valuePrimitive]="true"
+        textField="text"
+        valueField="value"
+        >
+    </kendo-dropdownlist>
+  `, isInline: true, components: [{ type: i2.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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterBooleanEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-boolean-editor',
+                    template: `
+    <kendo-dropdownlist
+        [tabindex]="-1"
+        [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+        [value]="currentItem.value"
+        (valueChange)="onValueChange($event)"
+        [data]="items"
+        [defaultItem]="defaultItem"
+        [valuePrimitive]="true"
+        textField="text"
+        valueField="value"
+        >
+    </kendo-dropdownlist>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterDateEditorComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.valueChange = new EventEmitter();
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
+}
+FilterDateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterDateEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterDateEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled", format: "format" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-datepicker
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
+            [disabled]="isDisabled"
+            [format]="format">
+            <kendo-datepicker-messages
+                [toggle]="messageFor('editorDateToggleText')"
+                [today]="messageFor('editorDateTodayText')">
+            </kendo-datepicker-messages>
+        </kendo-datepicker>
+  `, isInline: true, components: [{ type: i2$2.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "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: i2$2.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterDateEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-date-editor',
+                    template: `
+        <kendo-datepicker
+            [tabindex]="-1"
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
+            [disabled]="isDisabled"
+            [format]="format">
+            <kendo-datepicker-messages
+                [toggle]="messageFor('editorDateToggleText')"
+                [today]="messageFor('editorDateTodayText')">
+            </kendo-datepicker-messages>
+        </kendo-datepicker>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterExpressionComponent extends BaseFilterRowComponent {
+    constructor(filterService, cdr, element, navigationService, localization, renderer) {
+        super(element, navigationService, localization, renderer);
+        this.filterService = filterService;
+        this.cdr = cdr;
+        this.operators = [];
+        this.filters = [];
+        this.isBoolean = false;
+        this.isEditorDisabled = false;
+    }
+    get currentFilterExpression() {
+        return this.getFilterExpressionByField(this.currentItem.field);
+    }
+    get numericEditorFormat() {
+        const isSupportedFormat = typeof this.editorFormat !== 'string' && !this.isNumberFormat(this.editorFormat);
+        if (this.editorFormat && isSupportedFormat) {
+            console.warn(FilterErrorMessages.improperNumericEditorValue(this.currentFilterExpression.title));
+        }
+        return this.editorFormat;
+    }
+    get dateEditorFormat() {
+        const isSupportedFormat = typeof this.editorFormat !== 'string' && !this.isDateFormat(this.editorFormat);
+        if (this.editorFormat && isSupportedFormat) {
+            console.warn(FilterErrorMessages.improperDateEditorValue(this.currentFilterExpression.title));
+        }
+        return this.editorFormat;
+    }
+    isNumberFormat(obj) {
+        if (isDevMode() && obj &&
+            (obj['currency'] ||
+                obj['currencyDisplay'] ||
+                obj['maximumFractionDigits'] ||
+                obj['minimumIntegerDigits'] ||
+                obj['style'] ||
+                obj['useGrouping'])) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    isDateFormat(obj) {
+        if (isDevMode() && obj && obj['displayFormat'] && obj['inputFormat']) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    ngOnInit() {
+        this.isEditorDisabled = nullOperators.indexOf(this.currentItem.operator) >= 0;
+        this.filters = this.filterService.filters;
+        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+        if (this.currentItem.field) {
+            this.setOperators(foundFilter);
+        }
+        if (foundFilter?.editorFormat) {
+            this.editorFormat = foundFilter.editorFormat;
+        }
+        const defaultFilter = this.getFilterExpressionByField(this.filterService.filters[0].field);
+        if (!this.currentItem.field) {
+            this.currentItem.field = this.filterService.filters[0].field;
+            this.setOperators(defaultFilter);
+        }
+        this.setEditorTemplate();
+        this.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.setOperators(foundFilter || defaultFilter);
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    }
+    normalizeOperators(filterEditor, operators) {
+        const result = [];
+        for (let j = 0; j < operators.length; j++) {
+            if (isFilterEditor(filterEditor)) {
+                result.push({
+                    value: operators[j],
+                    text: this.localization.get(getKeyByValue(defaultOperators[filterEditor], operators[j]))
+                });
+            }
+        }
+        return result;
+    }
+    getFilterExpressionByField(name) {
+        const foundFilter = this.filterService.filters.find(filter => filter.field === name);
+        if (foundFilter) {
+            return foundFilter;
+        }
+        return null;
+    }
+    filterValueChange(value) {
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.currentToolbarItemChildrenIndex = 0;
+        this.currentItem.value = null;
+        this.currentItem.field = value;
+        this.setEditorTemplate();
+        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+        this.setOperators(foundFilter);
+        this.editorFormat = foundFilter.editorFormat;
+        this.valueChange.emit();
+    }
+    getDefaultOperators(operatorsType) {
+        switch (operatorsType) {
+            case 'string':
+                return localizeOperators(defaultStringOperators)(this.localization);
+            case 'number':
+                return localizeOperators(defaultNumericOperators)(this.localization);
+            case 'date':
+                return localizeOperators(defaultDateOperators)(this.localization);
+            default:
+                break;
+        }
+    }
+    getEditorType() {
+        const item = this.filterService.filters.find((filterExpression) => filterExpression.field === this.currentItem.field);
+        return item.editor;
+    }
+    removeFilterExpression() {
+        this.filterService.remove(this.currentItem, this.index);
+        this.valueChange.emit(true);
+    }
+    setOperators(filter) {
+        this.isBoolean = filter.editor === 'boolean';
+        if (this.isBoolean) {
+            return;
+        }
+        if (filter.operators) {
+            const localizedOperators = this.normalizeOperators(filter.editor, filter.operators);
+            this.operators = localizedOperators;
+        }
+        else {
+            this.operators = this.getDefaultOperators(filter.editor);
+        }
+        if (!this.currentItem.operator) {
+            this.currentItem.operator = this.operators[0].value;
+        }
+        const operatorDoesNotExist = !this.operators.find(operator => operator.value === this.currentItem.operator);
+        if (this.currentItem.operator && operatorDoesNotExist) {
+            this.currentItem.operator = this.operators[0].value;
+        }
+    }
+    onOperatorChange(value) {
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.currentToolbarItemChildrenIndex = 1;
+        this.valueChange.emit();
+        if (nullOperators.includes(value)) {
+            this.currentItem.value = null;
+            this.isEditorDisabled = true;
+        }
+        else {
+            this.isEditorDisabled = false;
+        }
+    }
+    setEditorTemplate() {
+        const filterExpression = this.filterService.filters.find((filter) => filter.field === this.currentItem.field);
+        this.editorTemplate = filterExpression.editorTemplate ? filterExpression.editorTemplate : null;
+    }
+}
+FilterExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: { currentItem: "currentItem" }, providers: [{
+            provide: FilterItem,
+            useExisting: forwardRef(() => FilterExpressionComponent)
+        }], usesInheritance: true, ngImport: i0, template: `
+        <div class="k-filter-toolbar">
+            <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (focus)="onFocus()" (focusout)="onBlur()" (mousedown)="onMouseDown($event)">
+                <div class="k-filter-toolbar-item k-filter-field k-toolbar-item" >
+                    <kendo-dropdownlist
+                        [tabindex]="-1"
+                        [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
+                        [title]="messageFor('filterExpressionFilters')"
+                        [data]="filters"
+                        textField="title"
+                        valueField="field"
+                        [value]="currentItem.field"
+                        [valuePrimitive]="true"
+                        (valueChange)="filterValueChange($event)">
+                    </kendo-dropdownlist>
+                </div>
+                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator k-toolbar-item" >
+                    <kendo-filter-expression-operators
+                        [currentItem]="currentItem"
+                        [operators]="operators"
+                        [editorType]="getEditorType()"
+                        (valueChange)="onOperatorChange($event);">
+                    </kendo-filter-expression-operators>
+                </div>
+
+                <div class="k-filter-toolbar-item k-filter-value k-toolbar-item">
+                    <ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
+                        <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                        <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
+                        <kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
+                        <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                    </ng-container>
+                    <ng-container *ngIf="editorTemplate">
+                        <ng-template
+                            [templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
+                        </ng-template>
+                    </ng-container>
+                </div>
+
+                <div class="k-filter-toolbar-item k-toolbar-item" >
+                    <button
+                        kendoButton
+                        tabindex="-1"
+                        icon="x"
+                        fillMode="flat"
+                        [title]="messageFor('remove')"
+                        (click)="removeFilterExpression()">
+                    </button>
+                </div>
+            </div>
+        </div>
+  `, isInline: true, components: [{ type: i2.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"] }, { type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i12.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterExpressionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{
+                            provide: FilterItem,
+                            useExisting: forwardRef(() => FilterExpressionComponent)
+                        }],
+                    selector: 'kendo-filter-expression',
+                    template: `
+        <div class="k-filter-toolbar">
+            <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (focus)="onFocus()" (focusout)="onBlur()" (mousedown)="onMouseDown($event)">
+                <div class="k-filter-toolbar-item k-filter-field k-toolbar-item" >
+                    <kendo-dropdownlist
+                        [tabindex]="-1"
+                        [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
+                        [title]="messageFor('filterExpressionFilters')"
+                        [data]="filters"
+                        textField="title"
+                        valueField="field"
+                        [value]="currentItem.field"
+                        [valuePrimitive]="true"
+                        (valueChange)="filterValueChange($event)">
+                    </kendo-dropdownlist>
+                </div>
+                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator k-toolbar-item" >
+                    <kendo-filter-expression-operators
+                        [currentItem]="currentItem"
+                        [operators]="operators"
+                        [editorType]="getEditorType()"
+                        (valueChange)="onOperatorChange($event);">
+                    </kendo-filter-expression-operators>
+                </div>
+
+                <div class="k-filter-toolbar-item k-filter-value k-toolbar-item">
+                    <ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
+                        <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                        <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
+                        <kendo-filter-boolean-editor *ngSwitchCase="'boolean'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-boolean-editor>
+                        <kendo-filter-date-editor *ngSwitchCase="'date'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="dateEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                    </ng-container>
+                    <ng-container *ngIf="editorTemplate">
+                        <ng-template
+                            [templateContext]="{templateRef: editorTemplate, $implicit: currentItem}">
+                        </ng-template>
+                    </ng-container>
+                </div>
+
+                <div class="k-filter-toolbar-item k-toolbar-item" >
+                    <button
+                        kendoButton
+                        tabindex="-1"
+                        icon="x"
+                        fillMode="flat"
+                        [title]="messageFor('remove')"
+                        (click)="removeFilterExpression()">
+                    </button>
+                </div>
+            </div>
+        </div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class FilterGroupComponent extends BaseFilterRowComponent {
+    constructor(filterService, cdr, element, navigationService, localization, renderer) {
+        super(element, navigationService, localization, renderer);
+        this.filterService = filterService;
+        this.cdr = cdr;
+        this.currentItem = {
+            logic: 'or',
+            filters: []
+        };
+        this.operators = [];
+    }
+    get filterItems() {
+        return this._filterItems.toArray();
+    }
+    ngOnInit() {
+        this.operators = this.getLogicOperators();
+        this.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.operators = this.getLogicOperators();
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    }
+    getLogicOperators() {
+        return localizeOperators(logicOperators)(this.localization);
+    }
+    getOperator(operatorValue) {
+        return this.messageFor(getKeyByValue(logicOperators, operatorValue));
+    }
+    selectedChange(logicOperator) {
+        if (this.currentItem.logic !== logicOperator) {
+            this.currentItem.logic = logicOperator;
+            this.valueChange.emit();
+        }
+    }
+    addFilterExpression() {
+        this.filterService.addFilterExpression(this.currentItem);
+        this.valueChange.emit();
+    }
+    addFilterGroup() {
+        this.filterService.addFilterGroup(this.currentItem);
+        this.valueChange.emit();
+    }
+    removeFilterGroup() {
+        this.filterService.remove(this.currentItem, this.index);
+        this.cdr.detectChanges();
+        this.valueChange.emit(true);
+    }
+    onMouseDown(event) {
+        let elementToFocus;
+        if (event.target.closest(selectors.kendoFilterToolbarItem)) {
+            let index = Array.from(event.target.closest(selectors.kendoToolbar).children).indexOf(event.target.closest(selectors.kendoFilterToolbarItem)) + 1;
+            if (event.target.closest(selectors.andButton)) {
+                index = 0;
+            }
+            if (event.target.closest(selectors.orButton)) {
+                index = 1;
+            }
+            this.navigationService.currentToolbarItemChildrenIndex = index;
+            this.navigationService.isInnerNavigationActivated = true;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].focusableChildren[index];
+        }
+        else {
+            this.navigationService.currentToolbarItemChildrenIndex = 0;
+            this.navigationService.isInnerNavigationActivated = false;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement;
+        }
+        this.navigationService.isFilterExpressionComponentFocused = false;
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.focusCurrentElement(elementToFocus, true);
+    }
+}
+FilterGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterGroupComponent, deps: [{ token: FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: { currentItem: "currentItem" }, providers: [{
+            provide: FilterItem,
+            useExisting: forwardRef(() => FilterGroupComponent)
+        }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="k-filter-toolbar">
+          <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (focus)="onFocus()" (focusout)="onBlur()" (mousedown)="onMouseDown($event)">
+            <div class="k-filter-toolbar-item">
+              <div class="k-widget k-button-group" role="group">
+                  <button
+                    tabindex="-1"
+                    *ngFor="let operator of operators"
+                    kendoButton
+                    [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
+                    [selected]="currentItem.logic === operator.value"
+                    [attr.aria-pressed]="currentItem.logic === operator.value"
+                    [title]="operator.text"
+                    (click)="selectedChange(operator.value)"
+                    >
+                    {{getOperator(operator.value)}}
+                  </button>
+              </div>
+            </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                tabindex="-1"
+                [title]="messageFor('addFilter')"
+                icon="filter-add-expression"
+                (click)="addFilterExpression()">
+                {{messageFor('addFilter')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                tabindex="-1"
+                [title]="messageFor('addGroup')"
+                icon="filter-add-group"
+                (click)="addFilterGroup()">
+                {{messageFor('addGroup')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                tabindex="-1"
+                icon="x"
+                fillMode="flat"
+                [title]="messageFor('remove')"
+                (click)="removeFilterGroup()">
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ul class="k-filter-lines" role="group" *ngIf="currentItem.filters">
+        <ng-container *ngFor="let item of currentItem.filters; let i = index;">
+          <li class="k-filter-item" role="treeitem" *ngIf="!item['filters']">
+            <kendo-filter-expression (valueChange)="valueChange.emit($event)" [currentItem]="item" [index]="i">
+            </kendo-filter-expression>
+          </li>
+          <li class="k-filter-item" role="treeitem" *ngIf="item['filters']">
+            <kendo-filter-group
+                (valueChange)="valueChange.emit($event)"
+                [currentItem]="item"
+                [index]="i"
+                >
+            </kendo-filter-group>
+          </li>
+        </ng-container>
+      </ul>
+  `, isInline: true, components: [{ type: i10.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }, { type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{
+                            provide: FilterItem,
+                            useExisting: forwardRef(() => FilterGroupComponent)
+                        }],
+                    selector: 'kendo-filter-group',
+                    template: `
+        <div class="k-filter-toolbar">
+          <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (focus)="onFocus()" (focusout)="onBlur()" (mousedown)="onMouseDown($event)">
+            <div class="k-filter-toolbar-item">
+              <div class="k-widget k-button-group" role="group">
+                  <button
+                    tabindex="-1"
+                    *ngFor="let operator of operators"
+                    kendoButton
+                    [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
+                    [selected]="currentItem.logic === operator.value"
+                    [attr.aria-pressed]="currentItem.logic === operator.value"
+                    [title]="operator.text"
+                    (click)="selectedChange(operator.value)"
+                    >
+                    {{getOperator(operator.value)}}
+                  </button>
+              </div>
+            </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                tabindex="-1"
+                [title]="messageFor('addFilter')"
+                icon="filter-add-expression"
+                (click)="addFilterExpression()">
+                {{messageFor('addFilter')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                tabindex="-1"
+                [title]="messageFor('addGroup')"
+                icon="filter-add-group"
+                (click)="addFilterGroup()">
+                {{messageFor('addGroup')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                tabindex="-1"
+                icon="x"
+                fillMode="flat"
+                [title]="messageFor('remove')"
+                (click)="removeFilterGroup()">
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ul class="k-filter-lines" role="group" *ngIf="currentItem.filters">
+        <ng-container *ngFor="let item of currentItem.filters; let i = index;">
+          <li class="k-filter-item" role="treeitem" *ngIf="!item['filters']">
+            <kendo-filter-expression (valueChange)="valueChange.emit($event)" [currentItem]="item" [index]="i">
+            </kendo-filter-expression>
+          </li>
+          <li class="k-filter-item" role="treeitem" *ngIf="item['filters']">
+            <kendo-filter-group
+                (valueChange)="valueChange.emit($event)"
+                [currentItem]="item"
+                [index]="i"
+                >
+            </kendo-filter-group>
+          </li>
+        </ng-container>
+      </ul>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { _filterItems: [{
+                type: ViewChildren,
+                args: [FilterItem]
+            }], currentItem: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "[kendoFilterMessages]", inputs: { filterExpressionOperators: "filterExpressionOperators", filterExpressionFilters: "filterExpressionFilters", remove: "remove", addGroup: "addGroup", addFilter: "addFilter", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", editorNumericDecrement: "editorNumericDecrement", editorNumericIncrement: "editorNumericIncrement", editorDateTodayText: "editorDateTodayText", editorDateToggleText: "editorDateToggleText", filterFieldAriaLabel: "filterFieldAriaLabel", filterOperatorAriaLabel: "filterOperatorAriaLabel", filterValueAriaLabel: "filterValueAriaLabel", filterToolbarAriaLabel: "filterToolbarAriaLabel", filterComponentAriaLabel: "filterComponentAriaLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFilterMessages]'
+                }]
+        }], propDecorators: { filterExpressionOperators: [{
+                type: Input
+            }], filterExpressionFilters: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }], addGroup: [{
+                type: Input
+            }], addFilter: [{
+                type: Input
+            }], filterAndLogic: [{
+                type: Input
+            }], filterOrLogic: [{
+                type: Input
+            }], filterEqOperator: [{
+                type: Input
+            }], filterNotEqOperator: [{
+                type: Input
+            }], filterIsNullOperator: [{
+                type: Input
+            }], filterIsNotNullOperator: [{
+                type: Input
+            }], filterIsEmptyOperator: [{
+                type: Input
+            }], filterIsNotEmptyOperator: [{
+                type: Input
+            }], filterStartsWithOperator: [{
+                type: Input
+            }], filterContainsOperator: [{
+                type: Input
+            }], filterNotContainsOperator: [{
+                type: Input
+            }], filterEndsWithOperator: [{
+                type: Input
+            }], filterGteOperator: [{
+                type: Input
+            }], filterGtOperator: [{
+                type: Input
+            }], filterLteOperator: [{
+                type: Input
+            }], filterLtOperator: [{
+                type: Input
+            }], filterIsTrue: [{
+                type: Input
+            }], filterIsFalse: [{
+                type: Input
+            }], filterBooleanAll: [{
+                type: Input
+            }], filterAfterOrEqualOperator: [{
+                type: Input
+            }], filterAfterOperator: [{
+                type: Input
+            }], filterBeforeOperator: [{
+                type: Input
+            }], filterBeforeOrEqualOperator: [{
+                type: Input
+            }], editorNumericDecrement: [{
+                type: Input
+            }], editorNumericIncrement: [{
+                type: Input
+            }], editorDateTodayText: [{
+                type: Input
+            }], editorDateToggleText: [{
+                type: Input
+            }], filterFieldAriaLabel: [{
+                type: Input
+            }], filterOperatorAriaLabel: [{
+                type: Input
+            }], filterValueAriaLabel: [{
+                type: Input
+            }], filterToolbarAriaLabel: [{
+                type: Input
+            }], filterComponentAriaLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoFilterLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * Represents the [Kendo UI Filter component for Angular]({% slug overview_filter %}).
+ * The Filter component can be used to apply any user defined filter criteria.
+ * @example
+ * ```ts
+ *   @Component({
+ *       selector: 'my-app',
+ *       template: `
+ *          <kendo-filter [filters]="filters" (valueChange)="onValueChange($event)"></kendo-filter>
+ *       `
+ *   })
+ *   export class AppComponent {
+ *
+ *      public filters: FilterExpression[] = [
+ *          {
+ *              name: 'country',
+ *              label: 'Country',
+ *              filter: 'string',
+ *              operators: ['eq', 'neq'],
+ *          },
+ *          {
+ *              name: 'budget',
+ *              filter: 'number'
+ *          }
+ *      ];
+ *
+ *      onValueChange(e: CompositeFilterDescriptor){
+ *          console.log(e)
+ *      }
+ *  }
+ * ```
+ */
+class FilterComponent {
+    constructor(filterService, localization, cdr, element, navigationService, renderer) {
+        this.filterService = filterService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.element = element;
+        this.navigationService = navigationService;
+        this.renderer = renderer;
+        /**
+         * Fires every time the Filter component value is updated.
+         * That is each time a Filter Group or Filter Expression is added, removed, or updated.
+         */
+        this.valueChange = new EventEmitter();
+        this._value = { filters: [], logic: 'and' };
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+    }
+    /**
+     * @hidden
+     */
+    focusout() {
+        setTimeout(() => {
+            if (!(document.activeElement.closest('.k-filter'))) {
+                this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '-1');
+                this.navigationService.currentlyFocusedElement = this.navigationService.flattenFilterItems[this.navigationService.currentToolbarItemIndex].toolbarElement;
+                this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '0');
+                this.navigationService.isInnerNavigationActivated = false;
+                this.navigationService.isFilterExpressionComponentFocused = false;
+            }
+        });
+    }
+    /**
+     * @hidden
+     */
+    onKeydown(event) {
+        const keyCode = event.keyCode;
+        const keys = [Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Enter,
+            Keys.Escape, Keys.Tab];
+        if (keys.indexOf(keyCode) > -1) {
+            this.navigationService.processKeyDown(keyCode, event);
+        }
+    }
+    /**
+     * Specifies the available user-defined filters. At least one filter should be provided.
+     */
+    set filters(_filters) {
+        if (_filters.length > 0) {
+            this.filterService.filters = _filters.map(filterExpression => {
+                const clonedFilter = Object.assign({}, filterExpression);
+                if (!clonedFilter.title) {
+                    clonedFilter.title = clonedFilter.field;
+                }
+                return clonedFilter;
+            });
+            this.setValue(this.value);
+        }
+    }
+    get filters() {
+        return this.filterService.filters;
+    }
+    /**
+     * Sets the initial `value` of the Filter component.
+     */
+    set value(value) {
+        const clonedValue = JSON.parse(JSON.stringify(value));
+        this._value = clonedValue;
+        if (this.filters.length > 0) {
+            this.setValue(this.value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    get filterItems() {
+        return this._filterItems.toArray();
+    }
+    get toolbarElement() {
+        return this.element.nativeElement.querySelector('.k-toolbar');
+    }
+    ngOnInit() {
+        this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+            this.cdr.detectChanges();
+        });
+    }
+    ngAfterViewInit() {
+        if (this.filterFields && this.filterFields.length > 0) {
+            this.filters = this.filterFields.map((filterField) => ({
+                ...filterField,
+                title: filterField.title,
+                editorTemplate: filterField.editorTemplate?.templateRef
+            }));
+        }
+        if (this.filters.length === 0) {
+            throw new Error(FilterErrorMessages.missingFilters);
+        }
+        this.navigationService.reset(this.filterItems);
+        if (!this.navigationService.currentlyFocusedElement) {
+            const firstElement = this.navigationService.flattenFilterItems[0].toolbarElement;
+            this.navigationService.currentlyFocusedElement = firstElement;
+            this.renderer.setAttribute(firstElement, 'tabindex', '0');
+        }
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    getCurrentFilter() {
+        return this.filterService.normalizedValue;
+    }
+    /**
+     * @hidden
+     */
+    onValueChange(isRemoveOperation) {
+        this.valueChange.emit(this.filterService.normalizedValue);
+        this.cdr.detectChanges();
+        this.navigationService.reset(this.filterItems);
+        if (isRemoveOperation) {
+            if (this.navigationService.currentToolbarItemIndex === this.navigationService.flattenFilterItems.length) {
+                this.navigationService.currentToolbarItemIndex -= 1;
+            }
+            this.navigationService.isInnerNavigationActivated = false;
+            this.navigationService.isFilterExpressionComponentFocused = false;
+            this.navigationService.currentlyFocusedElement = this.navigationService.flattenFilterItems[this.navigationService.currentToolbarItemIndex].toolbarElement;
+            this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '0');
+            this.renderer.addClass(this.navigationService.currentlyFocusedElement, 'k-focus');
+            this.navigationService.currentlyFocusedElement.focus();
+        }
+    }
+    normalizeFilter(filterDescriptor) {
+        const foundFilter = this.filterService.filters.find((filter) => filter.field === filterDescriptor.field);
+        if (isDevMode() && !foundFilter) {
+            throw new Error(FilterErrorMessages.missingFilterForUsedField(filterDescriptor.field));
+        }
+        if (isDevMode() && foundFilter.editor === 'boolean' && (!filterDescriptor.value && filterDescriptor.value !== false)) {
+            console.warn(FilterErrorMessages.missingValueForBooleanField(filterDescriptor.field));
+        }
+        if (isDevMode() && foundFilter.editor === 'boolean' && filterDescriptor.operator !== 'eq') {
+            console.warn(FilterErrorMessages.operatorBooleanField(filterDescriptor.field));
+        }
+        if (filterDescriptor.operator && foundFilter.operators && !foundFilter.operators.some(operator => operator === filterDescriptor.operator)) {
+            throw new Error(FilterErrorMessages.filterMissingUsedOperator(filterDescriptor.field, filterDescriptor.operator));
+        }
+        if (foundFilter.editor === 'boolean') {
+            filterDescriptor.operator = 'eq';
+        }
+        if (foundFilter.editor === 'date' && filterDescriptor.value) {
+            filterDescriptor.value = new Date(filterDescriptor.value);
+        }
+        if (!isPresent(filterDescriptor.value)) {
+            filterDescriptor.value = null;
+        }
+        if (nullOperators.indexOf(filterDescriptor.operator) >= 0) {
+            filterDescriptor.value = null;
+        }
+    }
+    setValue(items) {
+        this.normalizeValue(items);
+        this.filterService.normalizedValue = items;
+        this.cdr.detectChanges();
+    }
+    normalizeValue(items) {
+        if (!this.filterService.filters.length) {
+            return;
+        }
+        items.filters.forEach((item) => {
+            if (item.filters) {
+                this.normalizeValue(item);
+            }
+            else {
+                this.normalizeFilter(item);
+            }
+        });
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+}
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterComponent, selector: "kendo-filter", inputs: { filters: "filters", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusout($event)", "keydown": "onKeydown($event)" }, properties: { "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.filter'
+        },
+        FilterService,
+        NavigationService
+    ], queries: [{ propertyName: "filterFields", predicate: FilterFieldComponent }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], ngImport: i0, template: `
+        <ng-container kendoFilterLocalizedMessages
+            i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
+            editorDateTodayText="Today"
+
+            i18n-editorDateToggleText="kendo.filter.editorDateToggleText|The title of the Toggle button of the Date editor."
+            editorDateToggleText="Toggle calendar"
+
+            i18n-editorNumericDecrement="kendo.filter.editorNumericDecrement|The title of the Decrement button of the Numeric editor"
+            editorNumericDecrement="Decrement"
+
+            i18n-editorNumericIncrement="kendo.filter.editorNumericIncrement|The title of the Increment button of the Numeric editor"
+            editorNumericIncrement="Increment"
+
+            i18n-filterExpressionOperators="kendo.filter.filterExpressionOperators|The text of the Filter Expression Operators drop down"
+            filterExpressionOperators="Operators"
+
+            i18n-filterExpressionFilters="kendo.filter.filterExpressionFilters|The text of the Filter Expression filters drop down"
+            filterExpressionFilters="Fields"
+
+            i18n-remove="kendo.filter.remove|The text of the Remove button"
+            remove="Remove"
+
+            i18n-addFilter="kendo.filter.addFilter|The text of the Add Filter button"
+            addFilter="Add Filter"
+
+            i18n-addGroup="kendo.filter.addGroup|The text of the Add Group button"
+            addGroup="Add Group"
+
+            i18n-filterAndLogic="kendo.filter.filterAndLogic|The text of the And filter logic"
+            filterAndLogic="And"
+
+            i18n-filterOrLogic="kendo.filter.filterOrLogic|The text of the Or filter logic"
+            filterOrLogic="Or"
+
+            i18n-filterEqOperator="kendo.filter.filterEqOperator|The text of the equal filter operator"
+            filterEqOperator="Is equal to"
+
+            i18n-filterNotEqOperator="kendo.filter.filterNotEqOperator|The text of the not equal filter operator"
+            filterNotEqOperator="Is not equal to"
+
+            i18n-filterIsNullOperator="kendo.filter.filterIsNullOperator|The text of the is null filter operator"
+            filterIsNullOperator="Is null"
+
+            i18n-filterIsNotNullOperator="kendo.filter.filterIsNotNullOperator|The text of the is not null filter operator"
+            filterIsNotNullOperator="Is not null"
+
+            i18n-filterIsEmptyOperator="kendo.filter.filterIsEmptyOperator|The text of the is empty filter operator"
+            filterIsEmptyOperator="Is empty"
+
+            i18n-filterIsNotEmptyOperator="kendo.filter.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+            filterIsNotEmptyOperator="Is not empty"
+
+            i18n-filterStartsWithOperator="kendo.filter.filterStartsWithOperator|The text of the starts with filter operator"
+            filterStartsWithOperator="Starts with"
+
+            i18n-filterContainsOperator="kendo.filter.filterContainsOperator|The text of the contains filter operator"
+            filterContainsOperator="Contains"
+
+            i18n-filterNotContainsOperator="kendo.filter.filterNotContainsOperator|The text of the does not contain filter operator"
+            filterNotContainsOperator="Does not contain"
+
+            i18n-filterEndsWithOperator="kendo.filter.filterEndsWithOperator|The text of the ends with filter operator"
+            filterEndsWithOperator="Ends with"
+
+            i18n-filterGteOperator="kendo.filter.filterGteOperator|The text of the greater than or equal filter operator"
+            filterGteOperator="Is greater than or equal to"
+
+            i18n-filterGtOperator="kendo.filter.filterGtOperator|The text of the greater than filter operator"
+            filterGtOperator="Is greater than"
+
+            i18n-filterLteOperator="kendo.filter.filterLteOperator|The text of the less than or equal filter operator"
+            filterLteOperator="Is less than or equal to"
+
+            i18n-filterLtOperator="kendo.filter.filterLtOperator|The text of the less than filter operator"
+            filterLtOperator="Is less than"
+
+            i18n-filterIsTrue="kendo.filter.filterIsTrue|The text of the IsTrue boolean filter option"
+            filterIsTrue="Is True"
+
+            i18n-filterIsFalse="kendo.filter.filterIsFalse|The text of the IsFalse boolean filter option"
+            filterIsFalse="Is False"
+
+            i18n-filterBooleanAll="kendo.filter.filterBooleanAll|The text of the (All) boolean filter option"
+            filterBooleanAll="(All)"
+
+            i18n-filterAfterOrEqualOperator="kendo.filter.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
+            filterAfterOrEqualOperator="Is after or equal to"
+
+            i18n-filterAfterOperator="kendo.filter.filterAfterOperator|The text of the after date filter operator"
+            filterAfterOperator="Is after"
+
+            i18n-filterBeforeOperator="kendo.filter.filterBeforeOperator|The text of the before date filter operator"
+            filterBeforeOperator="Is before"
+
+            i18n-filterBeforeOrEqualOperator="kendo.filter.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
+            filterBeforeOrEqualOperator="Is before or equal to"
+
+            i18n-filterFieldAriaLabel="kendo.filter.filterFieldAriaLabel|The text of the filter field aria label"
+            filterFieldAriaLabel="field"
+
+            i18n-filterOperatorAriaLabel="kendo.filter.filterOperatorAriaLabel|The text of the filter operator aria label"
+            filterOperatorAriaLabel="operator"
+
+            i18n-filterValueAriaLabel="kendo.filter.filterValueAriaLabel|The text of the filter value aria label"
+            filterValueAriaLabel="value"
+
+            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter row aria label"
+            filterToolbarAriaLabel="filter row settings"
+
+            i18n-filterComponentAriaLabel="kendo.filter.filterComponentAriaLabel|The text of the filter component aria label"
+            filterComponentAriaLabel="filter component"
+            >
+        </ng-container>
+        <div class="k-widget k-filter" [attr.dir]="direction">
+            <ul class='k-filter-container' role="tree" [attr.aria-label]="messageFor('filterComponentAriaLabel')">
+                <li class='k-filter-group-main' role="treeitem">
+                    <kendo-filter-group
+                        [currentItem]="getCurrentFilter()"
+                        (valueChange)="onValueChange($event)"
+                        >
+                    </kendo-filter-group>
+                </li>
+            </ul>
+        </div>
+    `, isInline: true, components: [{ type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.filter'
+                        },
+                        FilterService,
+                        NavigationService
+                    ],
+                    selector: 'kendo-filter',
+                    template: `
+        <ng-container kendoFilterLocalizedMessages
+            i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
+            editorDateTodayText="Today"
+
+            i18n-editorDateToggleText="kendo.filter.editorDateToggleText|The title of the Toggle button of the Date editor."
+            editorDateToggleText="Toggle calendar"
+
+            i18n-editorNumericDecrement="kendo.filter.editorNumericDecrement|The title of the Decrement button of the Numeric editor"
+            editorNumericDecrement="Decrement"
+
+            i18n-editorNumericIncrement="kendo.filter.editorNumericIncrement|The title of the Increment button of the Numeric editor"
+            editorNumericIncrement="Increment"
+
+            i18n-filterExpressionOperators="kendo.filter.filterExpressionOperators|The text of the Filter Expression Operators drop down"
+            filterExpressionOperators="Operators"
+
+            i18n-filterExpressionFilters="kendo.filter.filterExpressionFilters|The text of the Filter Expression filters drop down"
+            filterExpressionFilters="Fields"
+
+            i18n-remove="kendo.filter.remove|The text of the Remove button"
+            remove="Remove"
+
+            i18n-addFilter="kendo.filter.addFilter|The text of the Add Filter button"
+            addFilter="Add Filter"
+
+            i18n-addGroup="kendo.filter.addGroup|The text of the Add Group button"
+            addGroup="Add Group"
+
+            i18n-filterAndLogic="kendo.filter.filterAndLogic|The text of the And filter logic"
+            filterAndLogic="And"
+
+            i18n-filterOrLogic="kendo.filter.filterOrLogic|The text of the Or filter logic"
+            filterOrLogic="Or"
+
+            i18n-filterEqOperator="kendo.filter.filterEqOperator|The text of the equal filter operator"
+            filterEqOperator="Is equal to"
+
+            i18n-filterNotEqOperator="kendo.filter.filterNotEqOperator|The text of the not equal filter operator"
+            filterNotEqOperator="Is not equal to"
+
+            i18n-filterIsNullOperator="kendo.filter.filterIsNullOperator|The text of the is null filter operator"
+            filterIsNullOperator="Is null"
+
+            i18n-filterIsNotNullOperator="kendo.filter.filterIsNotNullOperator|The text of the is not null filter operator"
+            filterIsNotNullOperator="Is not null"
+
+            i18n-filterIsEmptyOperator="kendo.filter.filterIsEmptyOperator|The text of the is empty filter operator"
+            filterIsEmptyOperator="Is empty"
+
+            i18n-filterIsNotEmptyOperator="kendo.filter.filterIsNotEmptyOperator|The text of the is not empty filter operator"
+            filterIsNotEmptyOperator="Is not empty"
+
+            i18n-filterStartsWithOperator="kendo.filter.filterStartsWithOperator|The text of the starts with filter operator"
+            filterStartsWithOperator="Starts with"
+
+            i18n-filterContainsOperator="kendo.filter.filterContainsOperator|The text of the contains filter operator"
+            filterContainsOperator="Contains"
+
+            i18n-filterNotContainsOperator="kendo.filter.filterNotContainsOperator|The text of the does not contain filter operator"
+            filterNotContainsOperator="Does not contain"
+
+            i18n-filterEndsWithOperator="kendo.filter.filterEndsWithOperator|The text of the ends with filter operator"
+            filterEndsWithOperator="Ends with"
+
+            i18n-filterGteOperator="kendo.filter.filterGteOperator|The text of the greater than or equal filter operator"
+            filterGteOperator="Is greater than or equal to"
+
+            i18n-filterGtOperator="kendo.filter.filterGtOperator|The text of the greater than filter operator"
+            filterGtOperator="Is greater than"
+
+            i18n-filterLteOperator="kendo.filter.filterLteOperator|The text of the less than or equal filter operator"
+            filterLteOperator="Is less than or equal to"
+
+            i18n-filterLtOperator="kendo.filter.filterLtOperator|The text of the less than filter operator"
+            filterLtOperator="Is less than"
+
+            i18n-filterIsTrue="kendo.filter.filterIsTrue|The text of the IsTrue boolean filter option"
+            filterIsTrue="Is True"
+
+            i18n-filterIsFalse="kendo.filter.filterIsFalse|The text of the IsFalse boolean filter option"
+            filterIsFalse="Is False"
+
+            i18n-filterBooleanAll="kendo.filter.filterBooleanAll|The text of the (All) boolean filter option"
+            filterBooleanAll="(All)"
+
+            i18n-filterAfterOrEqualOperator="kendo.filter.filterAfterOrEqualOperator|The text of the after or equal date filter operator"
+            filterAfterOrEqualOperator="Is after or equal to"
+
+            i18n-filterAfterOperator="kendo.filter.filterAfterOperator|The text of the after date filter operator"
+            filterAfterOperator="Is after"
+
+            i18n-filterBeforeOperator="kendo.filter.filterBeforeOperator|The text of the before date filter operator"
+            filterBeforeOperator="Is before"
+
+            i18n-filterBeforeOrEqualOperator="kendo.filter.filterBeforeOrEqualOperator|The text of the before or equal date filter operator"
+            filterBeforeOrEqualOperator="Is before or equal to"
+
+            i18n-filterFieldAriaLabel="kendo.filter.filterFieldAriaLabel|The text of the filter field aria label"
+            filterFieldAriaLabel="field"
+
+            i18n-filterOperatorAriaLabel="kendo.filter.filterOperatorAriaLabel|The text of the filter operator aria label"
+            filterOperatorAriaLabel="operator"
+
+            i18n-filterValueAriaLabel="kendo.filter.filterValueAriaLabel|The text of the filter value aria label"
+            filterValueAriaLabel="value"
+
+            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter row aria label"
+            filterToolbarAriaLabel="filter row settings"
+
+            i18n-filterComponentAriaLabel="kendo.filter.filterComponentAriaLabel|The text of the filter component aria label"
+            filterComponentAriaLabel="filter component"
+            >
+        </ng-container>
+        <div class="k-widget k-filter" [attr.dir]="direction">
+            <ul class='k-filter-container' role="tree" [attr.aria-label]="messageFor('filterComponentAriaLabel')">
+                <li class='k-filter-group-main' role="treeitem">
+                    <kendo-filter-group
+                        [currentItem]="getCurrentFilter()"
+                        (valueChange)="onValueChange($event)"
+                        >
+                    </kendo-filter-group>
+                </li>
+            </ul>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { focusout: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], filters: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], filterFields: [{
+                type: ContentChildren,
+                args: [FilterFieldComponent]
+            }], _filterItems: [{
+                type: ViewChildren,
+                args: [FilterItem]
+            }] } });
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_filter %}#toc-localization)).
+ */
+class CustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-filter-messages", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-filter-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const importedModules = [
+    CommonModule,
+    InputsModule,
+    LabelModule,
+    DropDownsModule,
+    ButtonsModule,
+    DateInputsModule
+];
+/**
+ * @hidden
+ */
+class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [CommonModule,
+        InputsModule,
+        LabelModule,
+        DropDownsModule,
+        ButtonsModule,
+        DateInputsModule], exports: [CommonModule,
+        InputsModule,
+        LabelModule,
+        DropDownsModule,
+        ButtonsModule,
+        DateInputsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[...importedModules], CommonModule,
+        InputsModule,
+        LabelModule,
+        DropDownsModule,
+        ButtonsModule,
+        DateInputsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...importedModules],
+                    exports: [...importedModules]
+                }]
+        }] });
+
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Filter component.
+ *
+ * @example
+ *
+ * ```
+ * // Import the Filter module
+ * import { FilterModule } from '@progress/kendo-angular-filter';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, FilterModule], // import Filter module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule { }
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class FilterModule {
+}
+FilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterModule, declarations: [FilterComponent,
+        FilterNumericEditorComponent,
+        FilterTextEditorComponent,
+        FilterExpressionComponent,
+        FilterGroupComponent,
+        FilterExpressionOperatorsComponent,
+        FilterBooleanEditorComponent,
+        FilterDateEditorComponent,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent,
+        AriaLabelValueDirective,
+        FilterFieldComponent,
+        FilterValueEditorTemplateDirective], imports: [SharedModule], exports: [FilterComponent,
+        FilterNumericEditorComponent,
+        FilterTextEditorComponent,
+        FilterExpressionComponent,
+        FilterGroupComponent,
+        FilterExpressionOperatorsComponent,
+        FilterBooleanEditorComponent,
+        FilterDateEditorComponent,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent,
+        AriaLabelValueDirective,
+        FilterFieldComponent,
+        FilterValueEditorTemplateDirective] });
+FilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterModule, imports: [[SharedModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule],
+                    declarations: [FilterComponent,
+                        FilterNumericEditorComponent,
+                        FilterTextEditorComponent,
+                        FilterExpressionComponent,
+                        FilterGroupComponent,
+                        FilterExpressionOperatorsComponent,
+                        FilterBooleanEditorComponent,
+                        FilterDateEditorComponent,
+                        LocalizedMessagesDirective,
+                        CustomMessagesComponent,
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective
+                    ],
+                    exports: [FilterComponent,
+                        FilterNumericEditorComponent,
+                        FilterTextEditorComponent,
+                        FilterExpressionComponent,
+                        FilterGroupComponent,
+                        FilterExpressionOperatorsComponent,
+                        FilterBooleanEditorComponent,
+                        FilterDateEditorComponent,
+                        LocalizedMessagesDirective,
+                        CustomMessagesComponent,
+                        AriaLabelValueDirective,
+                        FilterFieldComponent,
+                        FilterValueEditorTemplateDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AriaLabelValueDirective, CustomMessagesComponent, FilterBooleanEditorComponent, FilterComponent, FilterDateEditorComponent, FilterExpressionComponent, FilterExpressionOperatorsComponent, FilterFieldComponent, FilterGroupComponent, FilterModule, FilterNumericEditorComponent, FilterTextEditorComponent, FilterValueEditorTemplateDirective, LocalizedMessagesDirective };
+