@progress/kendo-angular-filter 1.0.0-next.202203251456 → 1.0.0-next.202204011458

package/esm2015/editors/date-editor.component.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../filter.service";
+import * as i3 from "@progress/kendo-angular-dateinputs";
+import * as i4 from "../aria-label.directive";
+/**
+ * @hidden
+ */
+export class FilterDateEditorComponent {
+    constructor(localization, filterService) {
+        this.localization = localization;
+        this.filterService = filterService;
+        this.valueChange = new EventEmitter();
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    isDisabled() {
+        const isDisabled = this.filterService.isEditorDisabled;
+        if (isDisabled) {
+            this.currentItem.value = null;
+        }
+        return isDisabled;
+    }
+}
+FilterDateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDateEditorComponent, deps: [{ token: i1.LocalizationService }, { token: i2.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+FilterDateEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-datepicker
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            class="k-filter-toolbar-item k-filter-value"
+            [(value)]="currentItem.value"
+            (valueChange)="valueChange.emit()"
+            [disabled]="isDisabled()">
+            <kendo-datepicker-messages
+                [toggle]="messageFor('editorDateToggleText')"
+                [today]="messageFor('editorDateTodayText')">
+            </kendo-datepicker-messages>
+        </kendo-datepicker>
+  `, isInline: true, components: [{ type: i3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i3.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: i4.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDateEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-date-editor',
+                    template: `
+        <kendo-datepicker
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            class="k-filter-toolbar-item k-filter-value"
+            [(value)]="currentItem.value"
+            (valueChange)="valueChange.emit()"
+            [disabled]="isDisabled()">
+            <kendo-datepicker-messages
+                [toggle]="messageFor('editorDateToggleText')"
+                [today]="messageFor('editorDateTodayText')">
+            </kendo-datepicker-messages>
+        </kendo-datepicker>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.FilterService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2015/editors/numeric-editor.component.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../filter.service";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "../aria-label.directive";
+/**
+ * @hidden
+ */
+export class FilterNumericEditorComponent {
+    constructor(localization, filterService) {
+        this.localization = localization;
+        this.filterService = filterService;
+        this.valueChange = new EventEmitter();
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    isDisabled() {
+        const isDisabled = this.filterService.isEditorDisabled;
+        if (isDisabled) {
+            this.currentItem.value = null;
+        }
+        return isDisabled;
+    }
+}
+FilterNumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterNumericEditorComponent, deps: [{ token: i1.LocalizationService }, { token: i2.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+FilterNumericEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-numerictextbox
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            class="k-filter-toolbar-item k-filter-value"
+            [(value)]="currentItem.value"
+            (valueChange)="valueChange.emit()"
+            [disabled]="isDisabled()">
+            <kendo-numerictextbox-messages
+                [increment]="messageFor('editorNumericIncrement')"
+                [decrement]="messageFor('editorNumericDecrement')">
+            </kendo-numerictextbox-messages>
+        </kendo-numerictextbox>
+  `, isInline: true, components: [{ type: i3.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: i3.NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }], directives: [{ type: i4.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterNumericEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-numeric-editor',
+                    template: `
+        <kendo-numerictextbox
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            class="k-filter-toolbar-item k-filter-value"
+            [(value)]="currentItem.value"
+            (valueChange)="valueChange.emit()"
+            [disabled]="isDisabled()">
+            <kendo-numerictextbox-messages
+                [increment]="messageFor('editorNumericIncrement')"
+                [decrement]="messageFor('editorNumericDecrement')">
+            </kendo-numerictextbox-messages>
+        </kendo-numerictextbox>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.FilterService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2015/editors/text-editor.component.js

@@ -0,0 +1,59 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../filter.service";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "../aria-label.directive";
+/**
+ * @hidden
+ */
+export class FilterTextEditorComponent {
+    constructor(localization, filterService) {
+        this.localization = localization;
+        this.filterService = filterService;
+        this.valueChange = new EventEmitter();
+    }
+    isDisabled() {
+        const isDisabled = this.filterService.isEditorDisabled;
+        if (isDisabled) {
+            this.currentItem.value = null;
+        }
+        return isDisabled;
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+}
+FilterTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterTextEditorComponent, deps: [{ token: i1.LocalizationService }, { token: i2.FilterService }], target: i0.ɵɵFactoryTarget.Component });
+FilterTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-textbox
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            class="k-filter-toolbar-item k-filter-value"
+            [(value)]="currentItem.value"
+            (valueChange)="valueChange.emit()"
+            [disabled]="isDisabled()">
+        </kendo-textbox>
+  `, isInline: true, components: [{ type: i3.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: i4.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-text-editor',
+                    template: `
+        <kendo-textbox
+            [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
+            class="k-filter-toolbar-item k-filter-value"
+            [(value)]="currentItem.value"
+            (valueChange)="valueChange.emit()"
+            [disabled]="isDisabled()">
+        </kendo-textbox>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.FilterService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2015/filter-expression-operators.component.js

@@ -0,0 +1,68 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { nullOperators } from './util';
+import * as i0 from "@angular/core";
+import * as i1 from "./filter.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-dropdowns";
+import * as i4 from "./aria-label.directive";
+/**
+ * @hidden
+ */
+export class FilterExpressionOperatorsComponent {
+    constructor(filterService, localization) {
+        this.filterService = filterService;
+        this.localization = localization;
+        this.valueChange = new EventEmitter();
+        this.operators = [];
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    operatorValueChange(value) {
+        this.valueChange.emit();
+        this.filterService.isEditorDisabled = nullOperators.indexOf(value) >= 0;
+    }
+}
+FilterExpressionOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionOperatorsComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <kendo-dropdownlist
+            [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
+            [data]="operators"
+            [title]="messageFor('filterExpressionOperators')"
+            [(value)]="currentItem.operator"
+            (valueChange)="operatorValueChange($event)"
+            [valuePrimitive]="true"
+            textField="text"
+            valueField="value"
+            >
+        </kendo-dropdownlist>
+  `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionOperatorsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-expression-operators',
+                    template: `
+        <kendo-dropdownlist
+            [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
+            [data]="operators"
+            [title]="messageFor('filterExpressionOperators')"
+            [(value)]="currentItem.operator"
+            (valueChange)="operatorValueChange($event)"
+            [valuePrimitive]="true"
+            textField="text"
+            valueField="value"
+            >
+        </kendo-dropdownlist>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }]; }, propDecorators: { currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], operators: [{
+                type: Input
+            }] } });

package/esm2015/filter-expression.component.js

@@ -0,0 +1,219 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { defaultDateOperators, defaultNumericOperators, defaultOperators, defaultStringOperators, getKeyByValue, isFilterEditor, localizeOperators } from './util';
+import * as i0 from "@angular/core";
+import * as i1 from "./filter.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-dropdowns";
+import * as i4 from "./filter-expression-operators.component";
+import * as i5 from "./editors/text-editor.component";
+import * as i6 from "./editors/numeric-editor.component";
+import * as i7 from "./editors/boolean-editor.component";
+import * as i8 from "./editors/date-editor.component";
+import * as i9 from "./aria-label.directive";
+import * as i10 from "@angular/common";
+import * as i11 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FilterExpressionComponent {
+    constructor(filterService, localization, cdr) {
+        this.filterService = filterService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.valueChange = new EventEmitter();
+        this.operators = [];
+        this.filters = [];
+        this.isBoolean = false;
+        this.isEditorDisabled = false;
+    }
+    ngOnInit() {
+        this.filters = this.filterService.filters;
+        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+        if (this.currentItem.field) {
+            this.setOperators(foundFilter);
+        }
+        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.localizationSubscription = this.localization.changes.subscribe(() => {
+            this.setOperators(foundFilter || defaultFilter);
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        if (this.localizationSubscription) {
+            this.localizationSubscription.unsubscribe();
+        }
+    }
+    normalizeOperators(filterEditor, operators) {
+        let 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;
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    getFilterExpressionByField(name) {
+        const foundFilter = this.filterService.filters.find(filter => filter.field === name);
+        if (foundFilter) {
+            return foundFilter;
+        }
+        return null;
+    }
+    filterValueChange(value) {
+        this.currentItem.value = null;
+        this.currentItem.field = value;
+        const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
+        this.setOperators(foundFilter);
+        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() {
+        let 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();
+    }
+    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;
+            if (!this.currentItem.operator) {
+                this.currentItem.operator = localizedOperators[0].value;
+            }
+        }
+        else {
+            this.operators = this.getDefaultOperators(filter.editor);
+            if (!this.currentItem.operator) {
+                this.currentItem.operator = this.operators[0].value;
+            }
+        }
+    }
+}
+FilterExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: { index: "index", currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <div class="k-filter-toolbar" role="group" [attr.aria-label]="messageFor('filterAriaLabel')">
+            <div class="k-toolbar">
+                <div class="k-filter-toolbar-item k-filter-field">
+                    <kendo-dropdownlist
+                        [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">
+                    <kendo-filter-expression-operators
+                        [currentItem]="currentItem"
+                        [operators]="operators"
+                        (valueChange)="valueChange.emit();">
+                    </kendo-filter-expression-operators>
+                </div>
+
+                <ng-container [ngSwitch]="getEditorType()">
+                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" (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" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                </ng-container>
+
+                <div class="k-filter-toolbar-item">
+                    <button
+                        kendoButton
+                        icon="close"
+                        fillMode="flat"
+                        [title]="messageFor('remove')"
+                        (click)="removeFilterExpression()">
+                    </button>
+                </div>
+            </div>
+        </div>
+  `, isInline: true, components: [{ type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4.FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "operators"], outputs: ["valueChange"] }, { type: i5.FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: i6.FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: i7.FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: i8.FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem"], outputs: ["valueChange"] }], directives: [{ type: i9.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-expression',
+                    template: `
+        <div class="k-filter-toolbar" role="group" [attr.aria-label]="messageFor('filterAriaLabel')">
+            <div class="k-toolbar">
+                <div class="k-filter-toolbar-item k-filter-field">
+                    <kendo-dropdownlist
+                        [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">
+                    <kendo-filter-expression-operators
+                        [currentItem]="currentItem"
+                        [operators]="operators"
+                        (valueChange)="valueChange.emit();">
+                    </kendo-filter-expression-operators>
+                </div>
+
+                <ng-container [ngSwitch]="getEditorType()">
+                    <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
+                    <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" (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" (valueChange)="valueChange.emit()"></kendo-filter-date-editor>
+                </ng-container>
+
+                <div class="k-filter-toolbar-item">
+                    <button
+                        kendoButton
+                        icon="close"
+                        fillMode="flat"
+                        [title]="messageFor('remove')"
+                        (click)="removeFilterExpression()">
+                    </button>
+                </div>
+            </div>
+        </div>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
+                type: Input
+            }], currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });