@firestitch/filter 12.9.2 → 12.10.1

package/app/components/filters-item/base-item/base-item.component.d.ts

@@ -1,13 +1,14 @@
-import { ChangeDetectorRef, DoCheck, KeyValueDiffer, KeyValueDiffers, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, DoCheck, KeyValueDiffer, KeyValueDiffers, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import { BaseItem } from '../../../models/items/base-item';
 import { IFilterConfigItem } from '../../../interfaces/config.interface';
 import * as i0 from "@angular/core";
-export declare class BaseItemComponent<T extends BaseItem<IFilterConfigItem>> implements DoCheck, OnDestroy {
+export declare class BaseItemComponent<T extends BaseItem<IFilterConfigItem>> implements DoCheck, OnChanges, OnDestroy {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
     set item(value: T);
     inline: boolean;
+    label: string;
     protected _item: T;
     protected _kvDiffer: KeyValueDiffer<string, any>;
     protected _destroy$: Subject<unknown>;
@@ -15,6 +16,7 @@ export declare class BaseItemComponent<T extends BaseItem<IFilterConfigItem>> im
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
     get item(): T;
     ngDoCheck(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     listenWithDebounce(): void;
     itemChange(): void;

package/app/components/filters-item/date/date.component.d.ts

@@ -3,11 +3,12 @@ import { BaseItemComponent } from '../base-item/base-item.component';
 import { ItemDateMode } from '../../../enums/item-date-mode.enum';
 import { DateItem } from '../../../models/items/date-item';
 import { DateTimeItem } from '../../../models/items/date-time-item';
+import { PickerViewType } from '../../../enums/picker-view-type.enum';
 import * as i0 from "@angular/core";
 export declare class DateComponent extends BaseItemComponent<DateItem | DateTimeItem> implements OnInit {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
-    viewType: string;
+    viewType: PickerViewType;
     itemDateMode: typeof ItemDateMode;
     showYear: boolean;
     showMonth: boolean;

package/app/components/filters-item/date-range/date-range.component.d.ts

@@ -2,11 +2,12 @@ import { ChangeDetectorRef, KeyValueDiffers, OnInit } from '@angular/core';
 import { BaseItemComponent } from '../base-item/base-item.component';
 import { DateRangeItem } from '../../../models/items/date-range-item';
 import { DateTimeRangeItem } from '../../../models/items/date-time-range-item';
+import { PickerViewType } from '../../../enums/picker-view-type.enum';
 import * as i0 from "@angular/core";
 export declare class DateRangeComponent extends BaseItemComponent<DateRangeItem | DateTimeRangeItem> implements OnInit {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
-    viewType: string;
+    viewType: PickerViewType;
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangeComponent, never>;

package/app/components/filters-item/filter-item.component.d.ts

@@ -1,10 +1,34 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { ItemType } from '../../enums/item-type.enum';
 import { BaseItem } from '../../models/items/base-item';
+import { ChipsItem } from '../../models/items/chips-item';
+import { RangeItem } from '../../models/items/range-item';
+import { TextItem } from '../../models/items/text-item';
+import { AutocompleteItem } from '../../models/items/autocomplete-item';
+import { AutocompleteChipsItem } from '../../models/items/autocomplete-chips-item';
+import { DateItem } from '../../models/items/date-item';
+import { DateTimeItem } from '../../models/items/date-time-item';
+import { DateRangeItem } from '../../models/items/date-range-item';
+import { DateTimeRangeItem } from '../../models/items/date-time-range-item';
+import { WeekItem } from '../../models/items/week-item';
+import { CheckboxItem } from '../../models/items/checkbox-item';
+import { BaseSelectItem } from '../../models/items/select/base-select-item';
 import * as i0 from "@angular/core";
 export declare class FilterItemComponent implements OnInit, OnDestroy {
     private _cdRef;
     item: BaseItem<any>;
+    get textItem(): TextItem;
+    get chipsItem(): ChipsItem;
+    get baseSelectItem(): BaseSelectItem;
+    get rangeItem(): RangeItem;
+    get autocompleteItem(): AutocompleteItem;
+    get autocompleteChipsItem(): AutocompleteChipsItem;
+    get dateItem(): DateItem;
+    get dateRangeItem(): DateRangeItem;
+    get dateTimeItem(): DateTimeItem;
+    get dateTimeRangeItem(): DateTimeRangeItem;
+    get weekItem(): WeekItem;
+    get checkboxItem(): CheckboxItem;
     private _destroy$;
     constructor(_cdRef: ChangeDetectorRef);
     ngOnInit(): void;

package/app/components/filters-item/select/select.component.d.ts

@@ -1,15 +1,22 @@
-import { ChangeDetectorRef, KeyValueDiffers, DoCheck } from '@angular/core';
+import { ChangeDetectorRef, KeyValueDiffers, DoCheck, SimpleChanges } from '@angular/core';
+import { Observable } from 'rxjs';
 import { BaseItemComponent } from '../base-item/base-item.component';
 import { SelectSimpleComponent } from './simple/simple.component';
 import { SelectMultipleComponent } from './multiple/multiple.component';
 import { BaseSelectItem } from '../../../models/items/select/base-select-item';
+import { MultipleSelectItem } from '../../../models/items/select/multiple-select-item';
+import { SimpleSelectItem } from '../../../models/items/select/simple-select-item';
 import * as i0 from "@angular/core";
 export declare class SelectComponent extends BaseItemComponent<BaseSelectItem> implements DoCheck {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
     selectedItem: SelectSimpleComponent | SelectMultipleComponent;
     allItemsOptionSelected: boolean;
+    get multipleSelectItem(): MultipleSelectItem;
+    get simpleSelectItem(): SimpleSelectItem;
+    values$: Observable<unknown[]>;
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
     ngDoCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "filter-item-select", never, {}, {}, never, never>;

package/app/enums/picker-view-type.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum PickerViewType {
+    Date = "date",
+    DateTime = "datetime",
+    Time = "time",
+    Week = "week",
+    MonthRange = "monthrange"
+}

package/app/models/items/select/simple-select-item.d.ts

@@ -6,6 +6,7 @@ export declare class SimpleSelectItem extends BaseSelectItem {
     getChipsContent(type?: any): string;
     get isChipVisible(): boolean;
     protected _init(): void;
+    protected get isolateOptionNotSelected(): boolean;
     protected _setModel(value: any): void;
     protected _validateModel(): void;
     protected _clearValue(defaultValue?: unknown): void;

package/bundles/firestitch-filter.umd.js

@@ -1021,6 +1021,15 @@
                 this._model = '__all';
             }
         };
+        Object.defineProperty(SimpleSelectItem.prototype, "isolateOptionNotSelected", {
+            get: function () {
+                var modelValue = this.model;
+                var isolate = this.isolate;
+                return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         SimpleSelectItem.prototype._setModel = function (value) {
             if (value) {
                 if (!isNaN(value)) {
@@ -3099,6 +3108,16 @@
                 }
             }
         };
+        BaseItemComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.item) {
+                if (Array.isArray(this.item.label)) {
+                    this.label = this.item.label[0];
+                }
+                else {
+                    this.label = this.item.label;
+                }
+            }
+        };
         BaseItemComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
@@ -3117,7 +3136,7 @@
         return BaseItemComponent;
     }());
     BaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    BaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3478,6 +3497,25 @@
             _this.allItemsOptionSelected = false;
             return _this;
         }
+        Object.defineProperty(SelectComponent.prototype, "multipleSelectItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SelectComponent.prototype, "simpleSelectItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SelectComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.item) {
+                this.values$ = this.item.values$;
+            }
+        };
         SelectComponent.prototype.ngDoCheck = function () {
             if (this._kvDiffer) {
                 var changes = this._kvDiffer.diff(this.item);
@@ -3492,7 +3530,7 @@
         return SelectComponent;
     }(BaseItemComponent));
     SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(item.values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3592,7 +3630,7 @@
         return AutocompleteComponent;
     }(BaseItemComponent));
     AutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompleteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"item.label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4__namespace$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    AutocompleteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4__namespace$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3640,7 +3678,7 @@
         return AutocompletechipsComponent;
     }(BaseItemComponent));
     AutocompletechipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompletechipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"item.label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5__namespace.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    AutocompletechipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5__namespace.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3650,13 +3688,22 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
+    var PickerViewType;
+    (function (PickerViewType) {
+        PickerViewType["Date"] = "date";
+        PickerViewType["DateTime"] = "datetime";
+        PickerViewType["Time"] = "time";
+        PickerViewType["Week"] = "week";
+        PickerViewType["MonthRange"] = "monthrange";
+    })(PickerViewType || (PickerViewType = {}));
+
     var DateComponent = /** @class */ (function (_super) {
         __extends(DateComponent, _super);
         function DateComponent(_kvDiffers, _cd) {
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
-            _this.viewType = 'date';
+            _this.viewType = PickerViewType.Date;
             _this.itemDateMode = exports.ItemDateMode;
             _this.showYear = true;
             _this.showMonth = true;
@@ -3665,10 +3712,10 @@
         }
         DateComponent.prototype.ngOnInit = function () {
             if (this.item.type === exports.ItemType.DateTime) {
-                this.viewType = 'datetime';
+                this.viewType = PickerViewType.DateTime;
             }
             else {
-                this.viewType = 'date';
+                this.viewType = PickerViewType.Date;
             }
             if (this.item.mode === exports.ItemDateMode.ScrollMonthYear) {
                 this.showDay = false;
@@ -3677,7 +3724,7 @@
         return DateComponent;
     }(BaseItemComponent));
     DateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input matInput\n          fsDateScrollPicker\n           [fsFilterFocusTrigger]=\"item\"\n          [(ngModel)]=\"item.model\"\n          [maxYear]=\"item.maxYear\"\n          [showMonth]=\"showMonth\"\n          [showDay]=\"showDay\"\n          [showYear]=\"showYear\"\n          [clear]=\"item.clearAllowed\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3__namespace$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    DateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input matInput\n          fsDateScrollPicker\n           [fsFilterFocusTrigger]=\"item\"\n          [(ngModel)]=\"item.model\"\n          [maxYear]=\"item.maxYear\"\n          [showMonth]=\"showMonth\"\n          [showDay]=\"showDay\"\n          [showYear]=\"showYear\"\n          [clear]=\"item.clearAllowed\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "weekStartsOn"], outputs: ["change"] }, { type: i3__namespace$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3693,15 +3740,15 @@
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
-            _this.viewType = 'date';
+            _this.viewType = PickerViewType.Date;
             return _this;
         }
         DateRangeComponent.prototype.ngOnInit = function () {
             if (this.item.type === exports.ItemType.DateTimeRange) {
-                this.viewType = 'datetime';
+                this.viewType = PickerViewType.DateTime;
             }
             else {
-                this.viewType = 'date';
+                this.viewType = PickerViewType.Date;
             }
         };
         return DateRangeComponent;
@@ -3729,7 +3776,7 @@
         return WeekComponent;
     }(BaseItemComponent));
     WeekComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    WeekComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    WeekComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view", "weekStartsOn"], outputs: ["change"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3767,6 +3814,90 @@
             this._destroy$ = new rxjs.Subject();
             this.itemType = exports.ItemType;
         }
+        Object.defineProperty(FilterItemComponent.prototype, "textItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "chipsItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "baseSelectItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "rangeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "autocompleteItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "autocompleteChipsItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateRangeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateTimeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateTimeRangeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "weekItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "checkboxItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
         FilterItemComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.item.value$
@@ -3782,7 +3913,7 @@
         return FilterItemComponent;
     }());
     FilterItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"item\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"item\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"item\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"item\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"item\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"item\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"item\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"item\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"autocompleteItem\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"autocompleteChipsItem\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5263,7 +5394,7 @@
             FsFilterItemsStore,
             SavedFiltersController,
             ActionsController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\n        <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n          <mat-form-field floatLabel=\"never\">\n              <span matPrefix>\n                <mat-icon matPrefix>search</mat-icon>\n              </span>\n\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              [placeholder]=\"searchPlaceholder\"\n              name=\"filter-input\"\n              (click)=\"filterInputEvent($event)\"\n              class=\"filter-input\">\n\n            <a matSuffix\n              *ngIf=\"searchText.value && showFilterInput && config.clear\"\n              (click)=\"clearSearchText($event)\"\n              href=\"javascript:void(0)\"\n              class=\"clear\">\n              <mat-icon>clear</mat-icon>\n            </a>\n\n            <a matSuffix\n              (click)=\"reload($event)\"\n              class=\"reload\"\n              *ngIf=\"config.reload\">\n              <mat-icon>refresh</mat-icon>\n            </a>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\n    <div class=\"filter-actions\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n        <button\n            mat-button\n            class=\"filters-button\"\n            [ngClass]=\"{\n              'mat-raised-button': config.button.style == 'raised',\n              'mat-button': config.button.style == 'basic',\n              'mat-icon-button': config.button.style == 'icon'\n            }\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            type=\"button\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </button>\n      </ng-container>\n  \n      <fs-filter-actions\n        *ngIf=\"actionsVisible$ | async\"\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container .search{top:8px;position:absolute;margin-left:1px;left:0}.fs-filter .filter-container .search mat-icon{transform:scale(.9)}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-container .filter-keyword .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix mat-icon,.fs-filter .filter-container .filter-keyword .mat-form-field-prefix a,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix mat-icon,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix a{display:flex;cursor:pointer;color:initial}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix mat-icon:hover,.fs-filter .filter-container .filter-keyword .mat-form-field-prefix a:hover,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix mat-icon:hover,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix a:hover{color:inherit}.fs-filter .filter-container .filter-keyword .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\n        <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n          <mat-form-field floatLabel=\"never\">\n              <span matPrefix>\n                <mat-icon matPrefix>search</mat-icon>\n              </span>\n\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              [placeholder]=\"searchPlaceholder\"\n              name=\"filter-input\"\n              (click)=\"filterInputEvent($event)\"\n              class=\"filter-input\">\n\n            <a matSuffix\n              *ngIf=\"searchText.value && showFilterInput && config.clear\"\n              (click)=\"clearSearchText($event)\"\n              href=\"javascript:void(0)\"\n              class=\"clear\">\n              <mat-icon>clear</mat-icon>\n            </a>\n\n            <a matSuffix\n              (click)=\"reload($event)\"\n              class=\"reload\"\n              *ngIf=\"config.reload\">\n              <mat-icon>refresh</mat-icon>\n            </a>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\n    <div class=\"filter-actions\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n        <button\n            mat-button\n            class=\"filters-button\"\n            [ngClass]=\"{\n              'mat-raised-button': config.button.style == 'raised',\n              'mat-button': config.button.style == 'basic',\n              'mat-icon-button': config.button.style == 'icon'\n            }\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            type=\"button\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </button>\n      </ng-container>\n  \n      <fs-filter-actions\n        *ngIf=\"actionsVisible$ | async\"\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container .search{top:8px;position:absolute;margin-left:1px;left:0}.fs-filter .filter-container .search mat-icon{transform:scale(.9)}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-container .filter-keyword .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix mat-icon,.fs-filter .filter-container .filter-keyword .mat-form-field-prefix a,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix mat-icon,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix a{display:flex;cursor:pointer;color:initial}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix mat-icon:hover,.fs-filter .filter-container .filter-keyword .mat-form-field-prefix a:hover,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix mat-icon:hover,.fs-filter .filter-container .filter-keyword .mat-form-field-suffix a:hover{color:inherit}.fs-filter .filter-container .filter-keyword .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterComponent, decorators: [{
                 type: i0.Component,
                 args: [{