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

package/dist/es2015/editors/numeric-editor.component.js

@@ -0,0 +1,56 @@
+/**-----------------------------------------------------------------------------------------
+* 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, EventEmitter, Input, Output } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FilterService } from '../filter.service';
+/**
+ * @hidden
+ */
+let FilterNumericEditorComponent = 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;
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], FilterNumericEditorComponent.prototype, "currentItem", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], FilterNumericEditorComponent.prototype, "valueChange", void 0);
+FilterNumericEditorComponent = tslib_1.__decorate([
+    Component({
+        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>
+  `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService, FilterService])
+], FilterNumericEditorComponent);
+export { FilterNumericEditorComponent };

package/{editors → dist/es2015/editors}/text-editor.component.d.ts

@@ -6,7 +6,6 @@ import { EventEmitter } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterDescriptor } from '@progress/kendo-data-query';
 import { FilterService } from '../filter.service';
-import * as i0 from "@angular/core";
 /**
  * @hidden
  */
@@ -18,6 +17,4 @@ export declare class FilterTextEditorComponent {
     constructor(localization: LocalizationService, filterService: FilterService);
     isDisabled(): boolean;
     messageFor(key: string): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FilterTextEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterTextEditorComponent, "kendo-filter-text-editor", never, { "currentItem": "currentItem"; }, { "valueChange": "valueChange"; }, never, never>;
 }

package/dist/es2015/editors/text-editor.component.js

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* 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, EventEmitter, Input, Output } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FilterService } from '../filter.service';
+/**
+ * @hidden
+ */
+let FilterTextEditorComponent = 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);
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], FilterTextEditorComponent.prototype, "currentItem", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], FilterTextEditorComponent.prototype, "valueChange", void 0);
+FilterTextEditorComponent = tslib_1.__decorate([
+    Component({
+        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>
+  `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService, FilterService])
+], FilterTextEditorComponent);
+export { FilterTextEditorComponent };

package/{filter-expression-operators.component.d.ts → dist/es2015/filter-expression-operators.component.d.ts}

@@ -6,7 +6,6 @@ import { EventEmitter } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterDescriptor } from '@progress/kendo-data-query';
 import { FilterService } from './filter.service';
-import * as i0 from "@angular/core";
 /**
  * @hidden
  */
@@ -22,6 +21,4 @@ export declare class FilterExpressionOperatorsComponent {
     constructor(filterService: FilterService, localization: LocalizationService);
     messageFor(key: string): string;
     operatorValueChange(value: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FilterExpressionOperatorsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionOperatorsComponent, "kendo-filter-expression-operators", never, { "currentItem": "currentItem"; "operators": "operators"; }, { "valueChange": "valueChange"; }, never, never>;
 }

package/dist/es2015/filter-expression-operators.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 * as tslib_1 from "tslib";
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FilterService } from './filter.service';
+import { nullOperators } from './util';
+/**
+ * @hidden
+ */
+let FilterExpressionOperatorsComponent = 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;
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], FilterExpressionOperatorsComponent.prototype, "currentItem", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], FilterExpressionOperatorsComponent.prototype, "valueChange", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], FilterExpressionOperatorsComponent.prototype, "operators", void 0);
+FilterExpressionOperatorsComponent = tslib_1.__decorate([
+    Component({
+        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>
+  `
+    }),
+    tslib_1.__metadata("design:paramtypes", [FilterService, LocalizationService])
+], FilterExpressionOperatorsComponent);
+export { FilterExpressionOperatorsComponent };

package/{filter-expression.component.d.ts → dist/es2015/filter-expression.component.d.ts}

@@ -4,11 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { FilterDescriptor } from '@progress/kendo-data-query';
 import { FilterService } from './filter.service';
 import { FilterEditor, FilterExpression, FilterOperator } from './model/filter-expression';
-import * as i0 from "@angular/core";
 /**
  * @hidden
  */
@@ -16,7 +14,6 @@ export declare class FilterExpressionComponent implements OnInit, OnDestroy {
     private filterService;
     protected localization: LocalizationService;
     private cdr;
-    static ngAcceptInputType_currentItem: FilterDescriptor | CompositeFilterDescriptor;
     index: number;
     currentItem: FilterDescriptor;
     valueChange: EventEmitter<void>;
@@ -43,6 +40,4 @@ export declare class FilterExpressionComponent implements OnInit, OnDestroy {
     getEditorType(): FilterEditor;
     removeFilterExpression(): void;
     private setOperators;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FilterExpressionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterExpressionComponent, "kendo-filter-expression", never, { "index": "index"; "currentItem": "currentItem"; }, { "valueChange": "valueChange"; }, never, never>;
 }

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

@@ -2,24 +2,15 @@
 * 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 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 { 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 {
+let FilterExpressionComponent = class FilterExpressionComponent {
     constructor(filterService, localization, cdr) {
         this.filterService = filterService;
         this.localization = localization;
@@ -119,55 +110,23 @@ export class FilterExpressionComponent {
             }
         }
     }
-}
-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: `
+};
+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: `
         <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">
@@ -209,11 +168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </div>
         </div>
   `
-                }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
-                type: Input
-            }], currentItem: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
+    }),
+    tslib_1.__metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
+], FilterExpressionComponent);
+export { FilterExpressionComponent };

package/{filter-group.component.d.ts → dist/es2015/filter-group.component.d.ts}

@@ -4,10 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { FilterDescriptor } from '@progress/kendo-data-query';
 import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { FilterService } from './filter.service';
-import * as i0 from "@angular/core";
 /**
  * @hidden
  */
@@ -15,13 +13,12 @@ export declare class FilterGroupComponent implements OnInit, OnDestroy {
     private filterService;
     localization: LocalizationService;
     private cdr;
-    static ngAcceptInputType_currentItem: FilterDescriptor | CompositeFilterDescriptor;
     index: number;
     currentItem: CompositeFilterDescriptor;
     valueChange: EventEmitter<void>;
     operators: {
         text: string;
-        value: 'and' | 'or';
+        value: string;
     }[];
     private localizationSubscription;
     constructor(filterService: FilterService, localization: LocalizationService, cdr: ChangeDetectorRef);
@@ -29,13 +26,11 @@ export declare class FilterGroupComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     getLogicOperators(): {
         text: string;
-        value: 'and' | 'or';
+        value: string;
     }[];
     messageFor(key: string): string;
     selectedChange(logicOperator: 'or' | 'and'): void;
     addFilterExpression(): void;
     addFilterGroup(): void;
     removeFilterGroup(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FilterGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterGroupComponent, "kendo-filter-group", never, { "index": "index"; "currentItem": "currentItem"; }, { "valueChange": "valueChange"; }, never, never>;
 }

package/dist/es2015/filter-group.component.js

@@ -0,0 +1,145 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { localizeOperators, logicOperators } from './util';
+/**
+ * @hidden
+ */
+let FilterGroupComponent = 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();
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], FilterGroupComponent.prototype, "index", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], FilterGroupComponent.prototype, "currentItem", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], FilterGroupComponent.prototype, "valueChange", void 0);
+FilterGroupComponent = tslib_1.__decorate([
+    Component({
+        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>
+  `
+    }),
+    tslib_1.__metadata("design:paramtypes", [FilterService, LocalizationService, ChangeDetectorRef])
+], FilterGroupComponent);
+export { FilterGroupComponent };

package/{filter.component.d.ts → dist/es2015/filter.component.d.ts}

@@ -10,7 +10,6 @@ import { FilterExpression } from './model/filter-expression';
 import { Direction } from './util';
 import { ChangeDetectorRef } from '@angular/core';
 import { OnDestroy } from '@angular/core';
-import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Filter component for Angular]({% slug overview_filter %}).
  * The Filter component can be used to apply any user defined filter criteria.
@@ -51,13 +50,11 @@ export declare class FilterComponent implements OnInit, OnDestroy {
     /**
      * Specifies the available user-defined filters. At least one filter should be provided.
      */
-    set filters(_filters: FilterExpression[]);
-    get filters(): FilterExpression[];
+    filters: FilterExpression[];
     /**
      * Sets the initial `value` of the Filter component.
      */
-    set value(value: CompositeFilterDescriptor);
-    get value(): CompositeFilterDescriptor;
+    value: CompositeFilterDescriptor;
     /**
      * Fires every time the Filter component value is updated.
      * That is each time a Filter Group or Filter Expression is added, removed, or updated.
@@ -77,6 +74,4 @@ export declare class FilterComponent implements OnInit, OnDestroy {
     onValueChange(): void;
     private normalizeFilter;
     private normalizeValue;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FilterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "kendo-filter", never, { "filters": "filters"; "value": "value"; }, { "valueChange": "valueChange"; }, never, never>;
 }