@firestitch/filter 12.11.7 → 12.12.0

package/fesm2015/firestitch-filter.js

@@ -74,23 +74,9 @@ var ItemType;
     ItemType["Keyword"] = "keyword";
 })(ItemType || (ItemType = {}));
 
-function findValue(values, value, children) {
-    for (let i = 0; i < values.length; i++) {
-        const val = values[i];
-        if (val[children]) {
-            return findValue(val[children], value, children);
-        }
-        if (val.value === value) {
-            return val;
-        }
-    }
-    return undefined;
-}
-
 class BaseItem {
     constructor(itemConfig, _additionalConfig) {
         this._additionalConfig = _additionalConfig;
-        // protected _initialized = false;
         this._pendingValues = false;
         this._pendingDefaultValue = false;
         this._loading$ = new BehaviorSubject(false);
@@ -296,8 +282,9 @@ class BaseItem {
             this.defaultValue = item.default;
         }
         this.change = item.change;
+        this.init = item.init || ((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 (isFunction(item.values)) {
@@ -312,7 +299,7 @@ class BaseItem {
         var _a;
         const model = (_a = this.persistedValue) !== null && _a !== void 0 ? _a : this.defaultValue;
         if (model !== undefined) {
-            this.model = model;
+            this._setModel(model);
         }
     }
     _clearValue(defaultValue = undefined) {
@@ -353,183 +340,6 @@ class BaseSelectItem extends BaseItem {
     }
 }
 
-class SimpleSelectItem extends BaseSelectItem {
-    constructor(itemConfig, _persistedValues) {
-        super(itemConfig, _persistedValues);
-    }
-    get value() {
-        let value = this.model;
-        if (value == '__all' || value === undefined) {
-            value = undefined;
-        }
-        return value;
-    }
-    getChipsContent(type = null) {
-        if (this.children) {
-            const itemValue = findValue(this.values, this.model, this.children);
-            return itemValue && itemValue.name;
-        }
-        else {
-            const itemValue = this.values.find((val) => val.value === this.model);
-            if (itemValue) {
-                return itemValue.name;
-            }
-            else if (this.isolate) {
-                return this.isolate.label;
-            }
-        }
-    }
-    get isChipVisible() {
-        return this.model !== '__all' && this.model !== undefined;
-    }
-    _init() {
-        super._init();
-        if (this.model === undefined && this.defaultValue === undefined) {
-            this._model = '__all';
-        }
-    }
-    get isolateOptionNotSelected() {
-        const modelValue = this.model;
-        const isolate = this.isolate;
-        return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
-    }
-    _setModel(value) {
-        if (value) {
-            if (!isNaN(value)) {
-                value = +value;
-            }
-        }
-        super._setModel(value);
-    }
-    _validateModel() {
-        const item = this.values.find(value => {
-            return value.value == this.model;
-        });
-        const value = item ? item.value : '__all';
-        if (this._model !== value) {
-            this.model = value;
-        }
-    }
-    _clearValue(defaultValue = undefined) {
-        super._clearValue(defaultValue);
-        const value = Array.isArray(this.values) && this.values.some((val) => val.value === '__all')
-            ? '__all'
-            : undefined;
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    }
-}
-
-var ActionMode;
-(function (ActionMode) {
-    ActionMode["Button"] = "button";
-    ActionMode["Menu"] = "menu";
-    ActionMode["File"] = "file";
-})(ActionMode || (ActionMode = {}));
-
-var ActionType;
-(function (ActionType) {
-    ActionType["Basic"] = "basic";
-    ActionType["Raised"] = "raised";
-    ActionType["Icon"] = "icon";
-    ActionType["Fab"] = "fab";
-    ActionType["MiniFab"] = "mini-fab";
-    ActionType["Flat"] = "flat";
-    ActionType["Stroked"] = "stroked";
-})(ActionType || (ActionType = {}));
-
-var ButtonStyle;
-(function (ButtonStyle) {
-    ButtonStyle["Basic"] = "basic";
-    ButtonStyle["Raised"] = "raised";
-    ButtonStyle["Icon"] = "icon";
-    ButtonStyle["Fab"] = "fab";
-    ButtonStyle["MiniFab"] = "mini-fab";
-    ButtonStyle["Flat"] = "flat";
-    ButtonStyle["Stroked"] = "stroked";
-})(ButtonStyle || (ButtonStyle = {}));
-
-var ItemDateMode;
-(function (ItemDateMode) {
-    ItemDateMode["Calendar"] = "calendar";
-    ItemDateMode["ScrollMonthYear"] = "monthyear";
-    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
-})(ItemDateMode || (ItemDateMode = {}));
-
-var PickerViewType;
-(function (PickerViewType) {
-    PickerViewType["Date"] = "date";
-    PickerViewType["DateTime"] = "datetime";
-    PickerViewType["Time"] = "time";
-    PickerViewType["Week"] = "week";
-    PickerViewType["MonthRange"] = "monthrange";
-})(PickerViewType || (PickerViewType = {}));
-
-const SORT_BY_FIELD = 'sortName';
-const SORT_DIRECTION_FIELD = 'sortDirection';
-class FsFilterConfig {
-    constructor(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);
-    }
-    _init(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 = ButtonStyle.Raised;
-        }
-        if (this.button.color === undefined) {
-            this.button.color = 'default';
-        }
-        if (this.clear === undefined) {
-            this.clear = () => { };
-        }
-    }
-}
-
 function objectsAreEquals(obj1, obj2) {
     const oldKeys = Object.keys(obj1);
     const currKeys = Object.keys(obj2);
@@ -654,6 +464,85 @@ class MultipleSelectItem extends BaseSelectItem {
     }
 }
 
+function findValue(values, value, children) {
+    for (let i = 0; i < values.length; i++) {
+        const val = values[i];
+        if (val[children]) {
+            return findValue(val[children], value, children);
+        }
+        if (val.value === value) {
+            return val;
+        }
+    }
+    return undefined;
+}
+
+class SimpleSelectItem extends BaseSelectItem {
+    constructor(itemConfig, _persistedValues) {
+        super(itemConfig, _persistedValues);
+    }
+    get value() {
+        let value = this.model;
+        if (value == '__all' || value === undefined) {
+            value = undefined;
+        }
+        return value;
+    }
+    getChipsContent(type = null) {
+        if (this.children) {
+            const itemValue = findValue(this.values, this.model, this.children);
+            return itemValue && itemValue.name;
+        }
+        else {
+            const itemValue = this.values.find((val) => val.value === this.model);
+            if (itemValue) {
+                return itemValue.name;
+            }
+            else if (this.isolate) {
+                return this.isolate.label;
+            }
+        }
+    }
+    get isChipVisible() {
+        return this.model !== '__all' && this.model !== undefined;
+    }
+    _init() {
+        super._init();
+        if (this.model === undefined && this.defaultValue === undefined) {
+            this._model = '__all';
+        }
+    }
+    get isolateOptionNotSelected() {
+        const modelValue = this.model;
+        const isolate = this.isolate;
+        return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
+    }
+    _setModel(value) {
+        if (value) {
+            if (!isNaN(value)) {
+                value = +value;
+            }
+        }
+        super._setModel(value);
+    }
+    _validateModel() {
+        const item = this.values.find(value => {
+            return value.value == this.model;
+        });
+        const value = item ? item.value : '__all';
+        if (this._model !== value) {
+            this.model = value;
+        }
+    }
+    _clearValue(defaultValue = undefined) {
+        super._clearValue(defaultValue);
+        const value = Array.isArray(this.values) && this.values.some((val) => val.value === '__all')
+            ? '__all'
+            : undefined;
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    }
+}
+
 class SelectItem {
     static create(config) {
         if (config.multiple) {
@@ -983,6 +872,13 @@ class DateTimeRangeItem extends BaseDateRangeItem {
     }
 }
 
+var ItemDateMode;
+(function (ItemDateMode) {
+    ItemDateMode["Calendar"] = "calendar";
+    ItemDateMode["ScrollMonthYear"] = "monthyear";
+    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
+})(ItemDateMode || (ItemDateMode = {}));
+
 class BaseDateItem extends BaseItem {
     get value() {
         const value = clone(this.model);
@@ -1368,6 +1264,110 @@ function createFilterItem(item, config) {
     }
 }
 
+var ActionMode;
+(function (ActionMode) {
+    ActionMode["Button"] = "button";
+    ActionMode["Menu"] = "menu";
+    ActionMode["File"] = "file";
+})(ActionMode || (ActionMode = {}));
+
+var ActionType;
+(function (ActionType) {
+    ActionType["Basic"] = "basic";
+    ActionType["Raised"] = "raised";
+    ActionType["Icon"] = "icon";
+    ActionType["Fab"] = "fab";
+    ActionType["MiniFab"] = "mini-fab";
+    ActionType["Flat"] = "flat";
+    ActionType["Stroked"] = "stroked";
+})(ActionType || (ActionType = {}));
+
+var ButtonStyle;
+(function (ButtonStyle) {
+    ButtonStyle["Basic"] = "basic";
+    ButtonStyle["Raised"] = "raised";
+    ButtonStyle["Icon"] = "icon";
+    ButtonStyle["Fab"] = "fab";
+    ButtonStyle["MiniFab"] = "mini-fab";
+    ButtonStyle["Flat"] = "flat";
+    ButtonStyle["Stroked"] = "stroked";
+})(ButtonStyle || (ButtonStyle = {}));
+
+var PickerViewType;
+(function (PickerViewType) {
+    PickerViewType["Date"] = "date";
+    PickerViewType["DateTime"] = "datetime";
+    PickerViewType["Time"] = "time";
+    PickerViewType["Week"] = "week";
+    PickerViewType["MonthRange"] = "monthrange";
+})(PickerViewType || (PickerViewType = {}));
+
+const SORT_BY_FIELD = 'sortName';
+const SORT_DIRECTION_FIELD = 'sortDirection';
+class FsFilterConfig {
+    constructor(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);
+    }
+    _init(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 = ButtonStyle.Raised;
+        }
+        if (this.button.color === undefined) {
+            this.button.color = 'default';
+        }
+        if (this.clear === undefined) {
+            this.clear = () => { };
+        }
+    }
+}
+
 class FsFilterItemsStore {
     constructor() {
         this.sortByItem = null;
@@ -1549,6 +1549,10 @@ class FsFilterItemsStore {
         this._initSortingItems(p);
         this.loadAsyncDefaults();
         this._subscribeToItemsChanges();
+        this.items
+            .forEach((item) => {
+            item.init(item);
+        });
     }
     updateItemsWithValues(values) {
         this.items
@@ -1594,7 +1598,7 @@ class FsFilterItemsStore {
             this.loadAsyncValues();
         }
     }
-    updateVisibleItems() {
+    updateItemsVisiblity() {
         this.visibleItems = this.items
             .filter((item) => !item.isTypeKeyword && !item.hide);
     }
@@ -1647,7 +1651,7 @@ class FsFilterItemsStore {
         this.ready$
             .pipe(filter$1((state) => state), takeUntil(this._destroy$))
             .subscribe(() => {
-            this.updateVisibleItems();
+            this.updateItemsVisiblity();
             this._setKeywordItem();
         });
     }
@@ -3102,7 +3106,7 @@ class AutocompleteComponent extends BaseItemComponent {
     }
 }
 AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, 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$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, 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$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -3147,7 +3151,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
     }
 }
 AutocompletechipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompletechipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutocompletechipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3181,7 +3185,7 @@ class DateComponent extends BaseItemComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{
@@ -3208,7 +3212,7 @@ class DateRangeComponent extends BaseItemComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -3227,7 +3231,7 @@ class WeekComponent extends BaseItemComponent {
     ngOnInit() { }
 }
 WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, decorators: [{
             type: Component,
             args: [{
@@ -3399,7 +3403,7 @@ class FilterDrawerComponent {
     }
 }
 FilterDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, 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$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$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, 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$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$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3747,7 +3751,7 @@ class FsFilterChipComponent {
     }
 }
 FsFilterChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
-FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, 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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, 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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipComponent, decorators: [{
             type: Component,
             args: [{
@@ -4007,7 +4011,7 @@ class FilterComponent {
         const item = this.getItem(name);
         if (item) {
             item.hide = false;
-            this._filterItems.updateVisibleItems();
+            this._filterItems.updateItemsVisiblity();
         }
     }
     hideItem(name) {
@@ -4016,7 +4020,7 @@ class FilterComponent {
             return;
         }
         item.hide = true;
-        this._filterItems.updateVisibleItems();
+        this._filterItems.updateItemsVisiblity();
     }
     clearItem(name) {
         const item = this.getItem(name);
@@ -4033,7 +4037,7 @@ class FilterComponent {
         }
         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();
     }
     getItemValueChange$(name) {
         const item = this.items.find((i) => i.name === name);