@firestitch/filter 12.11.6 → 12.12.0

package/app/helpers/create-filter-item.d.ts

@@ -10,4 +10,4 @@ import { AutocompleteChipsItem } from '../models/items/autocomplete-chips-item';
 import { CheckboxItem } from '../models/items/checkbox-item';
 import { TextItem } from '../models/items/text-item';
 import { WeekItem } from '../models/items/week-item';
-export declare function createFilterItem(item: IFilterConfigItem, config: any): import("../models/items/select/simple-select-item").SimpleSelectItem | import("../models/items/select/multiple-select-item").MultipleSelectItem | ChipsItem | RangeItem | DateRangeItem | DateTimeRangeItem | DateItem | DateTimeItem | AutocompleteItem | AutocompleteChipsItem | CheckboxItem | TextItem | WeekItem;
+export declare function createFilterItem(item: IFilterConfigItem, config: any): import("../models/items/select/multiple-select-item").MultipleSelectItem | import("../models/items/select/simple-select-item").SimpleSelectItem | ChipsItem | RangeItem | DateRangeItem | DateTimeRangeItem | DateItem | DateTimeItem | AutocompleteItem | AutocompleteChipsItem | CheckboxItem | TextItem | WeekItem;

package/app/interfaces/items/base.interface.d.ts

@@ -20,6 +20,7 @@ export interface IFilterConfigBaseItem<T = DefaultItemType, U = string> {
     primary?: boolean;
     default?: unknown;
     change?: (item: BaseItem<any>) => void;
+    init?: (item: BaseItem<any>) => void;
     clear?: boolean;
     disablePersist?: boolean;
     disableQueryParams?: boolean;

package/app/models/items/base-item.d.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { IFilterConfigItem } from '../../interfaces/config.interface';
 import { IFilterDefaultFn } from '../../interfaces/items/base.interface';
 import { IFilterItemDefaultRange } from '../../interfaces/items/range.interface';
-import { IFilterConfigItem } from '../../interfaces/config.interface';
 export declare abstract class BaseItem<T extends IFilterConfigItem> {
     protected _additionalConfig: unknown;
     name: string;
@@ -11,10 +11,11 @@ export declare abstract class BaseItem<T extends IFilterConfigItem> {
     defaultValue: any | IFilterItemDefaultRange;
     defaultValueFn: IFilterDefaultFn<unknown>;
     persistedValue: unknown;
-    clearAllowed: boolean;
+    showClear: boolean;
     persistanceDisabled: boolean;
     queryParamsDisabled: boolean;
     change: (item: BaseItem<T>) => void;
+    init: (item: BaseItem<T>) => void;
     protected readonly _type: T['type'];
     protected _model: any;
     protected _pendingValues: boolean;

package/app/services/items-store.service.d.ts

@@ -1,10 +1,10 @@
 import { OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
 import { FilterSort, IFilterConfigItem } from '../interfaces/config.interface';
-import { BaseItem } from '../models/items/base-item';
+import { IFilterExternalParams } from '../interfaces/external-params.interface';
 import { ISortingChangeEvent } from '../interfaces/filter.interface';
+import { BaseItem } from '../models/items/base-item';
 import { TextItem } from '../models/items/text-item';
-import { IFilterExternalParams } from '../interfaces/external-params.interface';
 import * as i0 from "@angular/core";
 interface IValueAsQuery {
     onlyPresented?: boolean;
@@ -52,7 +52,7 @@ export declare class FsFilterItemsStore implements OnDestroy {
      * Some items might need to load async values before they will be shown
      */
     prepareItems(): void;
-    updateVisibleItems(): void;
+    updateItemsVisiblity(): void;
     private _createItems;
     private _subscribeToItemsChanges;
     private _lazyInit;

package/bundles/firestitch-filter.umd.js

@@ -397,7 +397,6 @@
     var BaseItem = /** @class */ (function () {
         function BaseItem(itemConfig, _additionalConfig) {
             this._additionalConfig = _additionalConfig;
-            // protected _initialized = false;
             this._pendingValues = false;
             this._pendingDefaultValue = false;
             this._loading$ = new rxjs.BehaviorSubject(false);
@@ -716,8 +715,9 @@
                 this.defaultValue = item.default;
             }
             this.change = item.change;
+            this.init = item.init || (function (item) { });
             this.hide = item.hide;
-            this.clearAllowed = (_a = item.clear) !== null && _a !== void 0 ? _a : true;
+            this.showClear = (_a = item.clear) !== null && _a !== void 0 ? _a : true;
             this.persistanceDisabled = (_b = item.disablePersist) !== null && _b !== void 0 ? _b : false;
             this.queryParamsDisabled = (_c = item.disableQueryParams) !== null && _c !== void 0 ? _c : false;
             if (lodashEs.isFunction(item.values)) {
@@ -732,7 +732,7 @@
             var _a;
             var model = (_a = this.persistedValue) !== null && _a !== void 0 ? _a : this.defaultValue;
             if (model !== undefined) {
-                this.model = model;
+                this._setModel(model);
             }
         };
         BaseItem.prototype._clearValue = function (defaultValue) {
@@ -1059,120 +1059,6 @@
         return SimpleSelectItem;
     }(BaseSelectItem));
 
-    exports.ActionMode = void 0;
-    (function (ActionMode) {
-        ActionMode["Button"] = "button";
-        ActionMode["Menu"] = "menu";
-        ActionMode["File"] = "file";
-    })(exports.ActionMode || (exports.ActionMode = {}));
-
-    exports.ActionType = void 0;
-    (function (ActionType) {
-        ActionType["Basic"] = "basic";
-        ActionType["Raised"] = "raised";
-        ActionType["Icon"] = "icon";
-        ActionType["Fab"] = "fab";
-        ActionType["MiniFab"] = "mini-fab";
-        ActionType["Flat"] = "flat";
-        ActionType["Stroked"] = "stroked";
-    })(exports.ActionType || (exports.ActionType = {}));
-
-    exports.ButtonStyle = void 0;
-    (function (ButtonStyle) {
-        ButtonStyle["Basic"] = "basic";
-        ButtonStyle["Raised"] = "raised";
-        ButtonStyle["Icon"] = "icon";
-        ButtonStyle["Fab"] = "fab";
-        ButtonStyle["MiniFab"] = "mini-fab";
-        ButtonStyle["Flat"] = "flat";
-        ButtonStyle["Stroked"] = "stroked";
-    })(exports.ButtonStyle || (exports.ButtonStyle = {}));
-
-    exports.ItemDateMode = void 0;
-    (function (ItemDateMode) {
-        ItemDateMode["Calendar"] = "calendar";
-        ItemDateMode["ScrollMonthYear"] = "monthyear";
-        ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
-    })(exports.ItemDateMode || (exports.ItemDateMode = {}));
-
-    var PickerViewType;
-    (function (PickerViewType) {
-        PickerViewType["Date"] = "date";
-        PickerViewType["DateTime"] = "datetime";
-        PickerViewType["Time"] = "time";
-        PickerViewType["Week"] = "week";
-        PickerViewType["MonthRange"] = "monthrange";
-    })(PickerViewType || (PickerViewType = {}));
-
-    var SORT_BY_FIELD = 'sortName';
-    var SORT_DIRECTION_FIELD = 'sortDirection';
-    var FsFilterConfig = /** @class */ (function () {
-        function FsFilterConfig(data) {
-            if (data === void 0) { data = {}; }
-            this.load = true;
-            this.persist = false;
-            this.inline = false;
-            this.autofocus = false;
-            this.chips = false;
-            this.sortValues = null;
-            this.sort = null;
-            // public sortDirection = null;
-            this.queryParam = false;
-            this.case = 'camel';
-            this._init(data);
-        }
-        FsFilterConfig.prototype._init = function (data) {
-            if (data === void 0) { data = {}; }
-            var _a, _b, _c, _d, _e, _f, _g;
-            this.load = (_a = data.load) !== null && _a !== void 0 ? _a : true;
-            this.persist = data.persist;
-            this.savedFilters = data.savedFilters;
-            this.inline = (_b = data.inline) !== null && _b !== void 0 ? _b : false;
-            this.autofocus = (_c = data.autofocus) !== null && _c !== void 0 ? _c : false;
-            this.chips = (_d = data.chips) !== null && _d !== void 0 ? _d : false;
-            this.sortValues = data.sorts;
-            this.sort = data.sort;
-            this.queryParam = (_e = data.queryParam) !== null && _e !== void 0 ? _e : false;
-            this.init = data.init;
-            this.change = data.change;
-            this.reload = data.reload;
-            this.clear = data.clear;
-            this.sortChange = data.sortChange;
-            this.case = (_f = data.case) !== null && _f !== void 0 ? _f : 'camel';
-            this.reloadWhenConfigChanged = data.reloadWhenConfigChanged;
-            this.button = data.button;
-            this.items = data.items;
-            this.actions = data.actions;
-            this.case = (_g = data.case) !== null && _g !== void 0 ? _g : 'camel';
-            if (this.persist) {
-                if (typeof this.persist === 'object') {
-                    if (this.persist.name) {
-                        this.namespace = this.persist.name;
-                    }
-                }
-            }
-            if (!this.button) {
-                this.button = {};
-            }
-            if (this.button.label === undefined) {
-                this.button.label = 'Filters';
-            }
-            if (this.button.icon === undefined) {
-                this.button.icon = 'tune';
-            }
-            if (this.button.style === undefined) {
-                this.button.style = exports.ButtonStyle.Raised;
-            }
-            if (this.button.color === undefined) {
-                this.button.color = 'default';
-            }
-            if (this.clear === undefined) {
-                this.clear = function () { };
-            }
-        };
-        return FsFilterConfig;
-    }());
-
     var SelectItem = /** @class */ (function () {
         function SelectItem() {
         }
@@ -1596,6 +1482,13 @@
         return DateTimeRangeItem;
     }(BaseDateRangeItem));
 
+    exports.ItemDateMode = void 0;
+    (function (ItemDateMode) {
+        ItemDateMode["Calendar"] = "calendar";
+        ItemDateMode["ScrollMonthYear"] = "monthyear";
+        ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
+    })(exports.ItemDateMode || (exports.ItemDateMode = {}));
+
     var BaseDateItem = /** @class */ (function (_super) {
         __extends(BaseDateItem, _super);
         function BaseDateItem() {
@@ -2111,6 +2004,113 @@
         }
     }
 
+    exports.ActionMode = void 0;
+    (function (ActionMode) {
+        ActionMode["Button"] = "button";
+        ActionMode["Menu"] = "menu";
+        ActionMode["File"] = "file";
+    })(exports.ActionMode || (exports.ActionMode = {}));
+
+    exports.ActionType = void 0;
+    (function (ActionType) {
+        ActionType["Basic"] = "basic";
+        ActionType["Raised"] = "raised";
+        ActionType["Icon"] = "icon";
+        ActionType["Fab"] = "fab";
+        ActionType["MiniFab"] = "mini-fab";
+        ActionType["Flat"] = "flat";
+        ActionType["Stroked"] = "stroked";
+    })(exports.ActionType || (exports.ActionType = {}));
+
+    exports.ButtonStyle = void 0;
+    (function (ButtonStyle) {
+        ButtonStyle["Basic"] = "basic";
+        ButtonStyle["Raised"] = "raised";
+        ButtonStyle["Icon"] = "icon";
+        ButtonStyle["Fab"] = "fab";
+        ButtonStyle["MiniFab"] = "mini-fab";
+        ButtonStyle["Flat"] = "flat";
+        ButtonStyle["Stroked"] = "stroked";
+    })(exports.ButtonStyle || (exports.ButtonStyle = {}));
+
+    var PickerViewType;
+    (function (PickerViewType) {
+        PickerViewType["Date"] = "date";
+        PickerViewType["DateTime"] = "datetime";
+        PickerViewType["Time"] = "time";
+        PickerViewType["Week"] = "week";
+        PickerViewType["MonthRange"] = "monthrange";
+    })(PickerViewType || (PickerViewType = {}));
+
+    var SORT_BY_FIELD = 'sortName';
+    var SORT_DIRECTION_FIELD = 'sortDirection';
+    var FsFilterConfig = /** @class */ (function () {
+        function FsFilterConfig(data) {
+            if (data === void 0) { data = {}; }
+            this.load = true;
+            this.persist = false;
+            this.inline = false;
+            this.autofocus = false;
+            this.chips = false;
+            this.sortValues = null;
+            this.sort = null;
+            // public sortDirection = null;
+            this.queryParam = false;
+            this.case = 'camel';
+            this._init(data);
+        }
+        FsFilterConfig.prototype._init = function (data) {
+            if (data === void 0) { data = {}; }
+            var _a, _b, _c, _d, _e, _f, _g;
+            this.load = (_a = data.load) !== null && _a !== void 0 ? _a : true;
+            this.persist = data.persist;
+            this.savedFilters = data.savedFilters;
+            this.inline = (_b = data.inline) !== null && _b !== void 0 ? _b : false;
+            this.autofocus = (_c = data.autofocus) !== null && _c !== void 0 ? _c : false;
+            this.chips = (_d = data.chips) !== null && _d !== void 0 ? _d : false;
+            this.sortValues = data.sorts;
+            this.sort = data.sort;
+            this.queryParam = (_e = data.queryParam) !== null && _e !== void 0 ? _e : false;
+            this.init = data.init;
+            this.change = data.change;
+            this.reload = data.reload;
+            this.clear = data.clear;
+            this.sortChange = data.sortChange;
+            this.case = (_f = data.case) !== null && _f !== void 0 ? _f : 'camel';
+            this.reloadWhenConfigChanged = data.reloadWhenConfigChanged;
+            this.button = data.button;
+            this.items = data.items;
+            this.actions = data.actions;
+            this.case = (_g = data.case) !== null && _g !== void 0 ? _g : 'camel';
+            if (this.persist) {
+                if (typeof this.persist === 'object') {
+                    if (this.persist.name) {
+                        this.namespace = this.persist.name;
+                    }
+                }
+            }
+            if (!this.button) {
+                this.button = {};
+            }
+            if (this.button.label === undefined) {
+                this.button.label = 'Filters';
+            }
+            if (this.button.icon === undefined) {
+                this.button.icon = 'tune';
+            }
+            if (this.button.style === undefined) {
+                this.button.style = exports.ButtonStyle.Raised;
+            }
+            if (this.button.color === undefined) {
+                this.button.color = 'default';
+            }
+            if (this.clear === undefined) {
+                this.clear = function () { };
+            }
+        };
+        return FsFilterConfig;
+    }());
+
     var FsFilterItemsStore = /** @class */ (function () {
         function FsFilterItemsStore() {
             this.sortByItem = null;
@@ -2316,6 +2316,10 @@
             this._initSortingItems(p);
             this.loadAsyncDefaults();
             this._subscribeToItemsChanges();
+            this.items
+                .forEach(function (item) {
+                item.init(item);
+            });
         };
         FsFilterItemsStore.prototype.updateItemsWithValues = function (values) {
             this.items
@@ -2361,7 +2365,7 @@
                 this.loadAsyncValues();
             }
         };
-        FsFilterItemsStore.prototype.updateVisibleItems = function () {
+        FsFilterItemsStore.prototype.updateItemsVisiblity = function () {
             this.visibleItems = this.items
                 .filter(function (item) { return !item.isTypeKeyword && !item.hide; });
         };
@@ -2417,7 +2421,7 @@
             this.ready$
                 .pipe(operators.filter(function (state) { return state; }), operators.takeUntil(this._destroy$))
                 .subscribe(function () {
-                _this.updateVisibleItems();
+                _this.updateItemsVisiblity();
                 _this._setKeywordItem();
             });
         };
@@ -4028,7 +4032,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]=\"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.showClear\"\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: [{
@@ -4076,7 +4080,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]=\"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.showClear\"\n  [removable]=\"item.showClear\"\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: [{
@@ -4113,7 +4117,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.showClear\"\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.showClear\"\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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4143,7 +4147,7 @@
         return DateRangeComponent;
     }(BaseItemComponent));
     DateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateRangeComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_to\">\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.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3__namespace$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], 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"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    DateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\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.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3__namespace$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], 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"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateRangeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4165,7 +4169,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.showClear\"\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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4408,7 +4412,7 @@
         return FilterDrawerComponent;
     }());
     FilterDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0__namespace, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item *ngFor=\"let filterItem of items$ | async\"\n                       class=\"filter-group\"\n                       [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortItem\">\n            </filter-item>\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions class=\"filter-actions\"\n                              *ngIf=\"(externalParams.pending$ | async) !== true\"\n                              (clear)=\"clear()\"\n                              (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6__namespace$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FilterDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0__namespace, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6__namespace$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: FilterDrawerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4783,7 +4787,7 @@
         return FsFilterChipComponent;
     }());
     FsFilterChipComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterChipComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: FocusControllerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterChipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n      *ngIf=\"item.model?.min || item.model?.from\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\n  <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n    </ng-container>\n\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f}\n"], components: [{ type: i2__namespace$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }, { type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterChipComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n      *ngIf=\"item.model?.min || item.model?.from\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\n  <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n    </ng-container>\n\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f}\n"], components: [{ type: i2__namespace$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }, { type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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: FsFilterChipComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5125,7 +5129,7 @@
             var item = this.getItem(name);
             if (item) {
                 item.hide = false;
-                this._filterItems.updateVisibleItems();
+                this._filterItems.updateItemsVisiblity();
             }
         };
         FilterComponent.prototype.hideItem = function (name) {
@@ -5134,7 +5138,7 @@
                 return;
             }
             item.hide = true;
-            this._filterItems.updateVisibleItems();
+            this._filterItems.updateItemsVisiblity();
         };
         FilterComponent.prototype.clearItem = function (name) {
             var item = this.getItem(name);
@@ -5151,7 +5155,7 @@
             }
             item.label = (_a = params.label) !== null && _a !== void 0 ? _a : item.label;
             item.chipLabel = (_b = params.chipLabel) !== null && _b !== void 0 ? _b : item.chipLabel;
-            this._filterItems.updateVisibleItems();
+            this._filterItems.updateItemsVisiblity();
         };
         FilterComponent.prototype.getItemValueChange$ = function (name) {
             var item = this.items.find(function (i) { return i.name === name; });
@@ -5444,7 +5448,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'\" class=\"form-field-padless\" ngClass=\"search\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              name=\"filter-input\"\n              [placeholder]=\"searchPlaceholder\"\n              (click)=\"filterInputEvent($event)\">\n\n            <div matSuffix *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <a\n                mat-icon-button                \n                (click)=\"clearSearchText($event)\"\n                class=\"clear\">\n                <mat-icon>clear</mat-icon>\n              </a>\n            </div>\n            <div matSuffix>\n              <a \n                  mat-icon-button\n                  (click)=\"reload($event)\"\n                  class=\"reload\"\n                  *ngIf=\"config.reload\">\n                <mat-icon>refresh</mat-icon>\n              </a>\n            </div>\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-flat-button': config.button.style === 'flat',\n              'mat-stroked-button': config.button.style === 'stroked',\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 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;min-width:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field{height:100%;max-width:100%}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-focused .mat-icon{color:inherit}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline{background:#fff;border-radius:5px}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix,.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline .mat-form-field-prefix{top:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .search.mat-form-field .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-container .filter-keyword .mat-form-field-wrapper{height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button .mat-icon{display:inline}.fs-filter .filter-actions{display:flex;align-items:center}@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.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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'\" class=\"form-field-padless\" ngClass=\"search\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              name=\"filter-input\"\n              [placeholder]=\"searchPlaceholder\"\n              (click)=\"filterInputEvent($event)\">\n\n            <div matSuffix *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <a\n                mat-icon-button                \n                (click)=\"clearSearchText($event)\"\n                class=\"clear\">\n                <mat-icon>clear</mat-icon>\n              </a>\n            </div>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\n    <div class=\"filter-actions\">\n      <a \n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"reload\"\n          *ngIf=\"config.reload\">\n        <mat-icon>refresh</mat-icon>\n      </a>\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' && config.button.label,\n              'mat-flat-button': config.button.style === 'flat' && config.button.label,\n              'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n              'mat-button': config.button.style === 'basic' && config.button.label,\n              'mat-icon-button': config.button.style === 'icon' || !config.button.label  \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 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;min-width:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field{height:100%;max-width:100%}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-focused .mat-icon{color:inherit}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline{background:#fff;border-radius:5px}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix,.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline .mat-form-field-prefix{top:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .search.mat-form-field .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-container .filter-keyword .mat-form-field-wrapper{height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button .mat-icon{display:inline}.fs-filter .filter-actions{display:flex;align-items:center}@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.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: [{