@progress/kendo-angular-filter 1.0.0 → 2.0.0-dev.202204131933

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/{dist/es2015 → esm2015}/filter-expression.component.js

@@ -2,15 +2,24 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { FilterService } from './filter.service';
+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
  */
-let FilterExpressionComponent = class FilterExpressionComponent {
+export class FilterExpressionComponent {
     constructor(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
@@ -110,23 +119,55 @@ let FilterExpressionComponent = class FilterExpressionComponent {
             }
         }
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Number)
-], FilterExpressionComponent.prototype, "index", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], FilterExpressionComponent.prototype, "currentItem", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FilterExpressionComponent.prototype, "valueChange", void 0);
-FilterExpressionComponent = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-filter-expression',
-        template: `
+}
+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", "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">
@@ -168,7 +209,11 @@ FilterExpressionComponent = tslib_1.__decorate([
             </div>
         </div>
   `
-    }),
-    tslib_1.__metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
-], FilterExpressionComponent);
-export { FilterExpressionComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
+                type: Input
+            }], currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2015/filter-group.component.js

@@ -0,0 +1,206 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { localizeOperators, logicOperators } 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 "./filter-expression.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class FilterGroupComponent {
+    constructor(filterService, localization, cdr) {
+        this.filterService = filterService;
+        this.localization = localization;
+        this.cdr = cdr;
+        this.index = 0;
+        this.currentItem = {
+            logic: 'or',
+            filters: []
+        };
+        this.valueChange = new EventEmitter();
+        this.operators = [];
+    }
+    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);
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    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.valueChange.emit();
+    }
+}
+FilterGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: { index: "index", currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+        <div class="k-filter-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')">
+          <div class="k-toolbar">
+            <div class="k-filter-toolbar-item">
+              <div class="k-widget k-button-group" role="group">
+              <button
+                    *ngFor="let operator of operators"
+                    kendoButton
+                    [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
+                    [selected]="currentItem.logic === operator.value"
+                    [title]="operator.text"
+                    (click)="selectedChange(operator.value)"
+                    >
+                    {{operator.text}}
+                  </button>
+              </div>
+            </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                [title]="messageFor('addFilter')"
+                icon="filter-add-expression"
+                (click)="addFilterExpression()">
+                {{messageFor('addFilter')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                [title]="messageFor('addGroup')"
+                icon="filter-add-group"
+                (click)="addFilterGroup()">
+                {{messageFor('addGroup')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                icon="close"
+                fillMode="flat"
+                [title]="messageFor('remove')"
+                (click)="removeFilterGroup()">
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ul class="k-filter-lines" *ngIf="currentItem.filters">
+        <ng-container *ngFor="let item of currentItem.filters; let i = index;">
+          <li class="k-filter-item" *ngIf="!item['filters']">
+            <kendo-filter-expression (valueChange)="valueChange.emit()" [currentItem]="item" [index]="i">
+            </kendo-filter-expression>
+          </li>
+          <li class="k-filter-item" *ngIf="item['filters']">
+            <kendo-filter-group
+                (valueChange)="valueChange.emit()"
+                [currentItem]="item"
+                [index]="i"
+                >
+            </kendo-filter-group>
+          </li>
+        </ng-container>
+      </ul>
+  `, isInline: true, components: [{ type: i3.FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["index", "currentItem"], outputs: ["valueChange"] }, { type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter-group',
+                    template: `
+        <div class="k-filter-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')">
+          <div class="k-toolbar">
+            <div class="k-filter-toolbar-item">
+              <div class="k-widget k-button-group" role="group">
+              <button
+                    *ngFor="let operator of operators"
+                    kendoButton
+                    [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
+                    [selected]="currentItem.logic === operator.value"
+                    [title]="operator.text"
+                    (click)="selectedChange(operator.value)"
+                    >
+                    {{operator.text}}
+                  </button>
+              </div>
+            </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                [title]="messageFor('addFilter')"
+                icon="filter-add-expression"
+                (click)="addFilterExpression()">
+                {{messageFor('addFilter')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                [title]="messageFor('addGroup')"
+                icon="filter-add-group"
+                (click)="addFilterGroup()">
+                {{messageFor('addGroup')}}
+            </button>
+          </div>
+          <div class="k-filter-toolbar-item">
+            <button
+                kendoButton
+                icon="close"
+                fillMode="flat"
+                [title]="messageFor('remove')"
+                (click)="removeFilterGroup()">
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <ul class="k-filter-lines" *ngIf="currentItem.filters">
+        <ng-container *ngFor="let item of currentItem.filters; let i = index;">
+          <li class="k-filter-item" *ngIf="!item['filters']">
+            <kendo-filter-expression (valueChange)="valueChange.emit()" [currentItem]="item" [index]="i">
+            </kendo-filter-expression>
+          </li>
+          <li class="k-filter-item" *ngIf="item['filters']">
+            <kendo-filter-group
+                (valueChange)="valueChange.emit()"
+                [currentItem]="item"
+                [index]="i"
+                >
+            </kendo-filter-group>
+          </li>
+        </ng-container>
+      </ul>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
+                type: Input
+            }], currentItem: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });

package/{dist/es2015 → esm2015}/filter.component.js

@@ -2,14 +2,16 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
 import { Component, Input, Output, EventEmitter, HostBinding, isDevMode } from '@angular/core';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterService } from './filter.service';
 import { isArray } from './util';
-import { ChangeDetectorRef } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
+import * as i0 from "@angular/core";
+import * as i1 from "./filter.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./filter-group.component";
+import * as i4 from "./localization/localized-messages.directive";
 /**
  * Represents the [Kendo UI Filter component for Angular]({% slug overview_filter %}).
  * The Filter component can be used to apply any user defined filter criteria.
@@ -42,7 +44,7 @@ import { packageMetadata } from './package-metadata';
  *  }
  * ```
  */
-let FilterComponent = class FilterComponent {
+export class FilterComponent {
     constructor(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
@@ -141,29 +143,139 @@ let FilterComponent = class FilterComponent {
             }
         });
     }
-};
-tslib_1.__decorate([
-    HostBinding('attr.dir'),
-    tslib_1.__metadata("design:type", String)
-], FilterComponent.prototype, "direction", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array),
-    tslib_1.__metadata("design:paramtypes", [Array])
-], FilterComponent.prototype, "filters", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object),
-    tslib_1.__metadata("design:paramtypes", [Object])
-], FilterComponent.prototype, "value", null);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], FilterComponent.prototype, "valueChange", void 0);
-FilterComponent = tslib_1.__decorate([
-    Component({
-        selector: 'kendo-filter',
-        template: `
+}
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterComponent, selector: "kendo-filter", inputs: { filters: "filters", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [FilterService], 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-filterAriaLabel="kendo.filter.filterAriaLabel|The text of the filter row aria label"
+            filterAriaLabel="filter"
+
+            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter toolbar aria label"
+            filterToolbarAriaLabel="filter settings"
+            >
+        </ng-container>
+        <div class="k-widget k-filter" [attr.dir]="direction">
+            <ul class='k-filter-container'>
+                <li class='k-filter-group-main'>
+                    <kendo-filter-group
+                        [currentItem]="getCurrentFilter()"
+                        (valueChange)="onValueChange()"
+                        >
+                    </kendo-filter-group>
+                </li>
+            </ul>
+        </div>
+`, isInline: true, components: [{ type: i3.FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-filter',
+                    template: `
         <ng-container kendoFilterLocalizedMessages
             i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
             editorDateTodayText="Today"
@@ -289,10 +401,15 @@ FilterComponent = tslib_1.__decorate([
             </ul>
         </div>
 `,
-        providers: [FilterService]
-    }),
-    tslib_1.__metadata("design:paramtypes", [FilterService,
-        LocalizationService,
-        ChangeDetectorRef])
-], FilterComponent);
-export { FilterComponent };
+                    providers: [FilterService]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], filters: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });