@firestitch/filter 12.13.1 → 12.13.2

package/fesm2015/firestitch-filter.js

@@ -124,8 +124,9 @@ var ItemType;
 })(ItemType || (ItemType = {}));
 
 class BaseItem {
-    constructor(itemConfig, _additionalConfig) {
+    constructor(itemConfig, _additionalConfig, _filter) {
         this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
         this._pendingValues = false;
         this._pendingDefaultValue = false;
         this._loading$ = new BehaviorSubject(false);
@@ -137,6 +138,9 @@ class BaseItem {
         this._type = itemConfig.type;
         this._parseConfig(itemConfig);
     }
+    get filter() {
+        return this._filter;
+    }
     ///
     get isTypeAutocomplete() {
         return this.type === ItemType.AutoComplete;
@@ -230,7 +234,7 @@ class BaseItem {
     valueChanged() {
         this._value$.next(this.value);
         if (this.change) {
-            this.change(this);
+            this.change(this, this._filter);
         }
         if (this.initialized) {
             this._valueChange$.next();
@@ -261,13 +265,13 @@ class BaseItem {
             this._pendingDefaultValue = false;
         }));
     }
-    initValues(filter, persistedValue) {
+    initValues(persistedValue) {
         // this._initialized = false;
         this.persistedValue = persistedValue;
         this._initDefaultModel();
         const isAutocomplete = this.type === ItemType.AutoComplete || this.type === ItemType.AutoCompleteChips;
         if (this._valuesFn && !isAutocomplete) {
-            const valuesResult = this._valuesFn(null, filter);
+            const valuesResult = this._valuesFn(null, this._filter);
             if (isObservable(valuesResult)) {
                 this._pendingValues = true;
             }
@@ -283,10 +287,10 @@ class BaseItem {
             // this._initialized = true;
         }
     }
-    loadAsyncValues(filter, reload = true) {
+    loadAsyncValues(reload = true) {
         if (reload || (!this.loading && this.hasPendingValues)) {
             this.loading = true;
-            this._valuesFn(null, filter)
+            this._valuesFn(null, this._filter)
                 .pipe(take(1), takeUntil(this._destroy$))
                 .subscribe((values) => {
                 this.values = values;
@@ -330,7 +334,9 @@ class BaseItem {
             this.defaultValue = item.default;
         }
         this.change = item.change;
-        this.init = item.init || ((item) => { });
+        this.init = item.init || ((_) => {
+            //
+        });
         this.hide = item.hide;
         this.showClear = (_a = item.clear) !== null && _a !== void 0 ? _a : true;
         this.persistanceDisabled = (_b = item.disablePersist) !== null && _b !== void 0 ? _b : false;
@@ -388,8 +394,8 @@ class BaseSelectItem extends BaseItem {
 }
 
 class MultipleSelectItem extends BaseSelectItem {
-    constructor(itemConfig, _persistedValues) {
-        super(itemConfig, _persistedValues);
+    constructor(itemConfig, _persistedValues, _filter) {
+        super(itemConfig, _persistedValues, _filter);
     }
     get value() {
         var _a;
@@ -459,7 +465,7 @@ class MultipleSelectItem extends BaseSelectItem {
     _validateModel() {
         const possibleValues = filter(this.model || [], (item) => {
             return this.values.find((value) => {
-                return value.value == item;
+                return value.value === item;
             });
         });
         if (!isArrayEqual(this.model, possibleValues)) {
@@ -509,8 +515,8 @@ function getRangeName(configCase, name, range) {
 }
 
 class RangeItem extends BaseItem {
-    static create(config, additionalConfig) {
-        return new RangeItem(config, additionalConfig);
+    static create(config, additionalConfig, filter) {
+        return new RangeItem(config, additionalConfig, filter);
     }
     get value() {
         let value = clone(this.model);
@@ -565,12 +571,7 @@ class RangeItem extends BaseItem {
             this.model = Object.assign({}, this.model);
         }
         else {
-            if (defaultValue) {
-                this.model = Object.assign({}, defaultValue);
-            }
-            else {
-                this.model = {};
-            }
+            this.model = defaultValue ? Object.assign({}, defaultValue) : {};
         }
     }
     _validateModel() {
@@ -724,14 +725,14 @@ class BaseDateRangeItem extends BaseItem {
 }
 
 class DateRangeItem extends BaseDateRangeItem {
-    static create(config) {
-        return new DateRangeItem(config, null);
+    static create(config, filter) {
+        return new DateRangeItem(config, null, filter);
     }
 }
 
 class DateTimeRangeItem extends BaseDateRangeItem {
-    static create(config) {
-        return new DateTimeRangeItem(config, null);
+    static create(config, filter) {
+        return new DateTimeRangeItem(config, null, filter);
     }
 }
 
@@ -827,8 +828,8 @@ function parseDate(value) {
 }
 
 class WeekItem extends BaseItem {
-    static create(config) {
-        return new WeekItem(config, null);
+    static create(config, filter) {
+        return new WeekItem(config, null, filter);
     }
     get value() {
         let value = clone(this.model);
@@ -860,12 +861,7 @@ class WeekItem extends BaseItem {
             }
         }
         if (period) {
-            if (isString(period)) {
-                value.period = parseInt(period, 10);
-            }
-            else {
-                value.period = period;
-            }
+            value.period = isString(period) ? parseInt(period, 10) : period;
         }
         return value;
     }
@@ -960,97 +956,162 @@ function findItemWidthName(items, name) {
     });
 }
 
-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;
-        }
+class BaseAutocompleteItem extends BaseItem {
+    get valuesFn() {
+        return this._valuesFn;
+    }
+    _validateModel() {
+        //
+    }
+    _parseConfig(item) {
+        var _a;
+        this.fetchOnFocus = (_a = item.fetchOnFocus) !== null && _a !== void 0 ? _a : true;
+        super._parseConfig(item);
     }
-    return undefined;
 }
 
-class SimpleSelectItem extends BaseSelectItem {
-    constructor(itemConfig, _persistedValues) {
-        super(itemConfig, _persistedValues);
+class AutocompleteChipsItem extends BaseAutocompleteItem {
+    static create(config, filter) {
+        return new AutocompleteChipsItem(config, null, filter);
     }
     get value() {
-        let value = this.model;
-        if (value == '__all' || value === undefined) {
-            value = undefined;
+        if (Array.isArray(this.model) && this.model.length === 0) {
+            return undefined;
         }
-        return value;
+        return clone(this.model);
     }
-    getChipsContent(type = null) {
-        if (this.children) {
-            const itemValue = findValue(this.values, this.model, this.children);
-            return itemValue && itemValue.name;
-        }
-        const itemValue = this.values.find((val) => val.value === this.model);
-        if (itemValue) {
-            return itemValue.name;
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        if (Array.isArray(value)) {
+            params[this.name] = value
+                .filter((item) => !!item.value)
+                .map((item) => item.value)
+                .join(',');
         }
-        else if (this.isolate) {
-            return this.isolate.label;
+        else {
+            params[name] = value;
         }
+        return params;
     }
     get isChipVisible() {
-        return this.model !== '__all' && this.model !== undefined;
+        return Array.isArray(this.model) && this.model.length > 0;
+    }
+    getChipsContent() {
+        return this.model
+            .reduce((acc, i) => {
+            acc.push(i.name);
+            return acc;
+        }, [])
+            .join(', ');
     }
     _init() {
-        super._init();
-        if (this.model === undefined && this.defaultValue === undefined) {
-            this._model = '__all';
+        if (this.model === undefined) {
+            this._model = [];
         }
     }
-    get isolateOptionNotSelected() {
-        const modelValue = this.model;
-        const isolate = this.isolate;
-        return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
+    _parseConfig(item) {
+        var _a;
+        this.chipImage = (_a = item.chipImage) !== null && _a !== void 0 ? _a : 'image';
+        this.chipIcon = item.chipIcon;
+        this.chipIconColor = item.chipIconColor;
+        this.chipColor = item.chipColor;
+        this.chipBackground = item.chipBackground;
+        this.chipClass = item.chipClass;
+        super._parseConfig(item);
+    }
+    _clearValue(defaultValue = undefined) {
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
+        this.search = '';
     }
     _setModel(value) {
-        if (value) {
-            if (!isNaN(value)) {
-                value = +value;
-            }
-        }
-        super._setModel(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;
+}
+
+class AutocompleteItem extends BaseAutocompleteItem {
+    static create(config, filter) {
+        return new AutocompleteItem(config, null, filter);
+    }
+    get value() {
+        let value = clone(this.model);
+        if (!this.model || this.model.value === undefined) {
+            return undefined;
         }
+        value = this.model.value;
+        return value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        params[name] = value;
+        return params;
+    }
+    getChipsContent() {
+        return this.model ? this.model.name : '';
+    }
+    _init() {
+        //
     }
     _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;
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
+        this.search = '';
     }
 }
 
-class SelectItem {
-    static create(config) {
-        if (config.multiple) {
-            return new MultipleSelectItem(config, null);
+class CheckboxItem extends BaseItem {
+    static create(config, filter) {
+        return new CheckboxItem(config, null, filter);
+    }
+    get isTypeCheckbox() {
+        return true;
+    }
+    get isChipVisible() {
+        return this.value === this.checked;
+    }
+    get value() {
+        const value = this.model ? this.checked : this.unchecked;
+        if (!value) {
+            return undefined;
         }
-        else {
-            return new SimpleSelectItem(config, null);
+        return value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        params[name] = this.model ? value : undefined;
+        return params;
+    }
+    getChipsContent(type = null) {
+        return this.label;
+    }
+    _validateModel() {
+        //
+    }
+    _parseConfig(item) {
+        this.checked = item.checked;
+        this.unchecked = item.unchecked;
+        this.checked = item.checked ? toString(item.checked) : true;
+        this.unchecked = item.unchecked ? toString(item.unchecked) : false;
+        this.defaultValue = item.default === undefined ? this.unchecked : toString(this.defaultValue);
+        super._parseConfig(item);
+    }
+    _init() {
+        if (this.model === undefined) {
+            this._model = this.checked === this.defaultValue;
         }
     }
+    _clearValue(defaultValue = undefined) {
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : false;
+    }
 }
 
 class ChipsItem extends BaseItem {
-    static create(config) {
-        return new ChipsItem(config, null);
+    static create(config, filter) {
+        return new ChipsItem(config, null, filter);
     }
     get isTypeChips() {
         return true;
@@ -1069,7 +1130,7 @@ class ChipsItem extends BaseItem {
         const value = this.value;
         const name = this.name;
         return {
-            [name]: value
+            [name]: value,
         };
     }
     get persistanceObject() {
@@ -1092,16 +1153,16 @@ class ChipsItem extends BaseItem {
         }, [])
             .join(', ');
     }
-    _validateModel() { }
+    _validateModel() {
+        //
+    }
     _setModel(value) {
         if (Array.isArray(value)) {
             value = value.map((val) => {
                 if (isNaN(val)) {
                     return val;
                 }
-                else {
-                    return +val;
-                }
+                return +val;
             });
         }
         this._model = value;
@@ -1181,12 +1242,12 @@ class BaseDateItem extends BaseItem {
 }
 
 class DateItem extends BaseDateItem {
-    static create(config) {
-        return new DateItem(config, null);
+    static create(config, filter) {
+        return new DateItem(config, null, filter);
     }
     getChipsContent(type = null) {
         let dateFormat = 'date';
-        if (this.mode == ItemDateMode.ScrollMonthYear) {
+        if (this.mode === ItemDateMode.ScrollMonthYear) {
             dateFormat = 'full-date-dayless';
         }
         return format(this.model, dateFormat);
@@ -1197,166 +1258,103 @@ class DateItem extends BaseDateItem {
 }
 
 class DateTimeItem extends BaseDateItem {
-    static create(config) {
-        return new DateTimeItem(config, null);
+    static create(config, filter) {
+        return new DateTimeItem(config, null, filter);
     }
     _clearValue(defaultValue = undefined) {
         this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
     }
 }
 
-class BaseAutocompleteItem extends BaseItem {
-    get valuesFn() {
-        return this._valuesFn;
-    }
-    _validateModel() {
-        //
-    }
-    _parseConfig(item) {
-        var _a;
-        this.fetchOnFocus = (_a = item.fetchOnFocus) !== null && _a !== void 0 ? _a : true;
-        super._parseConfig(item);
+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 AutocompleteItem extends BaseAutocompleteItem {
-    static create(config) {
-        return new AutocompleteItem(config, null);
+class SimpleSelectItem extends BaseSelectItem {
+    constructor(itemConfig, _persistedValues, _filter) {
+        super(itemConfig, _persistedValues, _filter);
     }
     get value() {
-        let value = clone(this.model);
-        if (!this.model || this.model.value === undefined) {
-            return undefined;
+        let value = this.model;
+        if (value === '__all' || value === undefined) {
+            value = undefined;
         }
-        value = this.model.value;
         return value;
     }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = value;
-        return params;
-    }
-    getChipsContent() {
-        return this.model ? this.model.name : '';
-    }
-    _init() { }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
-        this.search = '';
-    }
-}
-
-class AutocompleteChipsItem extends BaseAutocompleteItem {
-    static create(config) {
-        return new AutocompleteChipsItem(config, null);
-    }
-    get value() {
-        if (Array.isArray(this.model) && this.model.length === 0) {
-            return undefined;
+    getChipsContent(type = null) {
+        if (this.children) {
+            const itemValue = findValue(this.values, this.model, this.children);
+            return itemValue && itemValue.name;
         }
-        return clone(this.model);
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        if (Array.isArray(value)) {
-            params[this.name] = value
-                .filter((item) => !!item.value)
-                .map((item) => item.value)
-                .join(',');
+        const itemValue = this.values.find((val) => val.value === this.model);
+        if (itemValue) {
+            return itemValue.name;
         }
-        else {
-            params[name] = value;
+        else if (this.isolate) {
+            return this.isolate.label;
         }
-        return params;
     }
     get isChipVisible() {
-        return Array.isArray(this.model) && this.model.length > 0;
-    }
-    getChipsContent() {
-        return this.model
-            .reduce((acc, i) => {
-            acc.push(i.name);
-            return acc;
-        }, [])
-            .join(', ');
+        return this.model !== '__all' && this.model !== undefined;
     }
     _init() {
-        if (this.model === undefined) {
-            this._model = [];
+        super._init();
+        if (this.model === undefined && this.defaultValue === undefined) {
+            this._model = '__all';
         }
     }
-    _parseConfig(item) {
-        var _a;
-        this.chipImage = (_a = item.chipImage) !== null && _a !== void 0 ? _a : 'image';
-        this.chipIcon = item.chipIcon;
-        this.chipIconColor = item.chipIconColor;
-        this.chipColor = item.chipColor;
-        this.chipBackground = item.chipBackground;
-        this.chipClass = item.chipClass;
-        super._parseConfig(item);
-    }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
-        this.search = '';
+    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) {
-        super._setModel(value || []);
-    }
-}
-
-class CheckboxItem extends BaseItem {
-    static create(config) {
-        return new CheckboxItem(config, null);
-    }
-    get isTypeCheckbox() {
-        return true;
-    }
-    get isChipVisible() {
-        return this.value === this.checked;
-    }
-    get value() {
-        const value = this.model ? this.checked : this.unchecked;
-        if (!value) {
-            return undefined;
+        if (value) {
+            if (!isNaN(value)) {
+                value = +value;
+            }
         }
-        return value;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = this.model ? value : undefined;
-        return params;
-    }
-    getChipsContent(type = null) {
-        return this.label;
-    }
-    _validateModel() { }
-    _parseConfig(item) {
-        this.checked = item.checked;
-        this.unchecked = item.unchecked;
-        this.checked = item.checked ? toString(item.checked) : true;
-        this.unchecked = item.unchecked ? toString(item.unchecked) : false;
-        this.defaultValue = item.default === undefined ? this.unchecked : toString(this.defaultValue);
-        super._parseConfig(item);
+        super._setModel(value);
     }
-    _init() {
-        if (this.model === undefined) {
-            this._model = this.checked == this.defaultValue;
+    _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) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : false;
+        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, filter) {
+        if (config.multiple) {
+            return new MultipleSelectItem(config, null, filter);
+        }
+        return new SimpleSelectItem(config, null, filter);
     }
 }
 
 class TextItem extends BaseItem {
-    static create(config) {
-        return new TextItem(config, null);
+    static create(config, filter) {
+        return new TextItem(config, null, filter);
     }
     get value() {
         return !!this.model ? this.model : undefined;
@@ -1371,56 +1369,60 @@ class TextItem extends BaseItem {
     getChipsContent() {
         return this.model;
     }
-    _validateModel() { }
+    _validateModel() {
+        //
+    }
     _parseConfig(item) {
         this.prefix = item.prefix;
         this.suffix = item.suffix;
         super._parseConfig(item);
     }
-    _init() { }
+    _init() {
+        //
+    }
     _clearValue(defaultValue = undefined) {
         this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : '';
     }
 }
 
-function createFilterItem(item, config) {
+function createFilterItem(item, config, filter) {
     switch (item.type) {
         case ItemType.Select: {
-            return SelectItem.create(item);
+            return SelectItem.create(item, filter);
         }
         case ItemType.Chips: {
-            return ChipsItem.create(item);
+            return ChipsItem.create(item, filter);
         }
         case ItemType.Range: {
-            return RangeItem.create(item, config);
+            return RangeItem.create(item, config, filter);
         }
         case ItemType.DateRange: {
-            return DateRangeItem.create(item);
+            return DateRangeItem.create(item, filter);
         }
         case ItemType.DateTimeRange: {
-            return DateTimeRangeItem.create(item);
+            return DateTimeRangeItem.create(item, filter);
         }
         case ItemType.Date: {
-            return DateItem.create(item);
+            return DateItem.create(item, filter);
         }
         case ItemType.Week: {
-            return WeekItem.create(item);
+            return WeekItem.create(item, filter);
         }
         case ItemType.DateTime: {
-            return DateTimeItem.create(item);
+            return DateTimeItem.create(item, filter);
         }
         case ItemType.AutoComplete: {
-            return AutocompleteItem.create(item);
+            return AutocompleteItem.create(item, filter);
         }
         case ItemType.AutoCompleteChips: {
-            return AutocompleteChipsItem.create(item);
+            return AutocompleteChipsItem.create(item, filter);
         }
         case ItemType.Checkbox: {
-            return CheckboxItem.create(item);
+            return CheckboxItem.create(item, filter);
         }
         case ItemType.Keyword:
         case ItemType.Text: {
-            return TextItem.create(item);
+            return TextItem.create(item, filter);
         }
     }
 }
@@ -1618,7 +1620,7 @@ class FsFilterItemsStore {
     loadAsyncValues() {
         this.items
             .filter((item) => item.hasPendingValues)
-            .forEach((item) => item.loadAsyncValues(this.filter));
+            .forEach((item) => item.loadAsyncValues());
     }
     loadAsyncDefaults() {
         // default values can be asynchronous, and we must load them if there is no persisted value instead
@@ -1640,7 +1642,7 @@ class FsFilterItemsStore {
                     .map((item) => item.loadDefaultValue()),
                 ...valuesToBeLoaded
                     .map((item) => {
-                    item.loadAsyncValues(this.filter);
+                    item.loadAsyncValues();
                     return item.loading$
                         .pipe();
                 }),
@@ -1705,7 +1707,7 @@ class FsFilterItemsStore {
     init(p) {
         this.items
             .forEach((item) => {
-            item.initValues(this.filter, p[item.name]);
+            item.initValues(p[item.name]);
         });
         this._initSortingItems(p);
         this.loadAsyncDefaults();
@@ -1772,7 +1774,7 @@ class FsFilterItemsStore {
             }
         })
             .map((item) => {
-            const filterItem = createFilterItem(item, { case: this._config.case });
+            const filterItem = createFilterItem(item, { case: this._config.case }, this.filter);
             if (filterItem.type === ItemType.Keyword) {
                 this._hasKeyword = true;
             }
@@ -1814,8 +1816,8 @@ class FsFilterItemsStore {
     }
     _initSortingItems(p) {
         if (this.sortByItem && this.sortDirectionItem) {
-            this.sortByItem.initValues(this.filter, p[this.sortByItem.name]);
-            this.sortDirectionItem.initValues(this.filter, p[this.sortDirectionItem.name]);
+            this.sortByItem.initValues(p[this.sortByItem.name]);
+            this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
         }
     }
     _createSortingItems() {
@@ -1830,7 +1832,7 @@ class FsFilterItemsStore {
             if (this._config.sort && this._config.sort.value) {
                 sortByItem.default = this._config.sort.value;
             }
-            this.sortByItem = new SimpleSelectItem(sortByItem, null);
+            this.sortByItem = new SimpleSelectItem(sortByItem, null, this.filter);
             const sortDirectionItem = {
                 name: SORT_DIRECTION_FIELD,
                 type: ItemType.Select,
@@ -1843,7 +1845,7 @@ class FsFilterItemsStore {
             if (this._config.sort && this._config.sort.direction) {
                 sortDirectionItem.default = this._config.sort.direction;
             }
-            this.sortDirectionItem = new SimpleSelectItem(sortDirectionItem, null);
+            this.sortDirectionItem = new SimpleSelectItem(sortDirectionItem, null, this.filter);
         }
     }
     _setKeywordItem() {
@@ -2212,7 +2214,6 @@ class ExternalParamsController {
         this._savePersistedParams();
     }
     initItems() {
-        this._itemsStore.ready$;
         this._pending$.next(true);
         if (this._savedFilters.enabled) {
             this._savedFilters
@@ -2282,7 +2283,7 @@ class ExternalParamsController {
         const params = buildQueryParams(this._itemsStore.valuesAsQuery({
             onlyPresented: false,
             items: targetItems,
-            persisted: true
+            persisted: true,
         }), targetItems);
         this._queryParams.writeStateToQueryParams(params);
     }
@@ -2292,7 +2293,7 @@ class ExternalParamsController {
         const params = buildQueryParams(this._itemsStore.valuesAsQuery({
             onlyPresented: false,
             items: targetItems,
-            persisted: true
+            persisted: true,
         }), targetItems);
         this._persistanceStore.save(params);
     }
@@ -2653,7 +2654,7 @@ class FsFilterChipComponent {
         this.listenValueChangesForRanges();
         this._updateVisibility();
         if (this.item.hasPendingValues) {
-            this.item.loadAsyncValues(null, false);
+            this.item.loadAsyncValues(false);
             this.item.values$
                 .pipe(take(2), takeUntil(this._destroy$))
                 .subscribe(() => {
@@ -2758,12 +2759,13 @@ class FsFilterDrawerActionsComponent {
     }
 }
 FsFilterDrawerActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterDrawerActionsComponent, deps: [{ token: ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
-FsFilterDrawerActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: { _clear: "clear", _done: "done" }, ngImport: i0, template: "<button type=\"button\" mat-button color=\"primary\" (click)=\"done()\">Done</button>\n<button type=\"button\" mat-button (click)=\"clear()\">Clear</button>\n<ng-container *ngIf=\"savedFilters.enabled$ | async\">\n  <button type=\"button\" mat-button (click)=\"saveFilters()\">Save</button>\n</ng-container>\n\n", components: [{ type: i1$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"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
+FsFilterDrawerActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: { _clear: "clear", _done: "done" }, ngImport: i0, template: "<button type=\"button\" mat-button color=\"primary\" (click)=\"done()\">Done</button>\n<button type=\"button\" mat-button (click)=\"clear()\">Clear</button>\n<ng-container *ngIf=\"savedFilters.enabled$ | async\">\n  <button type=\"button\" mat-button (click)=\"saveFilters()\">Save</button>\n</ng-container>\n\n", components: [{ type: i1$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"] }], directives: [{ 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: FsFilterDrawerActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fs-filter-drawer-actions',
                     templateUrl: './filter-drawer-actions.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: ExternalParamsController }]; }, propDecorators: { _clear: [{
                 type: Output,
@@ -2822,7 +2824,7 @@ class BaseItemComponent {
     }
 }
 BaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2834,8 +2836,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], inline: [{
                 type: Input
-            }], filter: [{
-                type: Input
             }] } });
 
 class FocusToItemDirective {
@@ -3240,7 +3240,7 @@ class AutocompleteComponent extends BaseItemComponent {
             return data ? data.name : data;
         };
         this.fetch = (keyword) => {
-            return this.item.valuesFn(keyword, this.filter);
+            return this.item.valuesFn(keyword, this.item.filter);
         };
     }
 }
@@ -3261,7 +3261,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         this._kvDiffers = _kvDiffers;
         this._cd = _cd;
         this.fetch = (keyword) => {
-            return this.item.valuesFn(keyword, this.filter);
+            return this.item.valuesFn(keyword, this.item.filter);
         };
     }
     // SP-T1747
@@ -3454,7 +3454,7 @@ class FilterItemComponent {
     }
 }
 FilterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item", filter: "filter" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Text\"\n      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Select\"\n      [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Chips\"\n      [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range \n      class=\"interface interface-range\"\n      *ngSwitchCase=\"itemType.Range\"\n      [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.AutoComplete\"\n      [item]=\"autocompleteItem\"\n      [filter]=\"filter\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.AutoCompleteChips\"\n      [item]=\"autocompleteChipsItem\"\n      [filter]=\"filter\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.Date\"\n      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateTime\"\n      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateRange\"\n      [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateTimeRange\"\n      [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Week\"\n      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox \n      class=\"interface interface-checkbox\"\n      *ngSwitchCase=\"itemType.Checkbox\"\n      [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Text\"\n      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Select\"\n      [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Chips\"\n      [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range \n      class=\"interface interface-range\"\n      *ngSwitchCase=\"itemType.Range\"\n      [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.AutoComplete\"\n      [item]=\"autocompleteItem\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.AutoCompleteChips\"\n      [item]=\"autocompleteChipsItem\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.Date\"\n      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateTime\"\n      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateRange\"\n      [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateTimeRange\"\n      [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Week\"\n      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox \n      class=\"interface interface-checkbox\"\n      *ngSwitchCase=\"itemType.Checkbox\"\n      [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -3464,23 +3464,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
                 type: Input
-            }], filter: [{
-                type: Input
             }] } });
 
 class FilterDrawerComponent {
-    constructor(externalParams, _cd, _itemsStore, _overlayRef, _data) {
+    constructor(_overlayRef, _data, externalParams, _cd, _itemsStore) {
+        this._overlayRef = _overlayRef;
+        this._data = _data;
         this.externalParams = externalParams;
         this._cd = _cd;
         this._itemsStore = _itemsStore;
-        this._overlayRef = _overlayRef;
-        this._data = _data;
         this.inline = false;
         this.windowDesktop = false;
         this._itemsStore.prepareItems();
-        this._clear = _data.clear;
-        this._done = _data.done;
-        this.filter = _data.filter;
+        this._clear = this._data.clear;
+        this._done = this._data.done;
         this.updateWindowWidth();
     }
     updateWindowWidth() {
@@ -3507,8 +3504,8 @@ class FilterDrawerComponent {
         this.done();
     }
 }
-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 \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\"\n            [filter]=\"filter\">\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]=\"filter\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\"\n              [filter]=\"filter\">\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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item", "filter"] }, { 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }, { token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }], 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 \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$1.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: [{
@@ -3517,13 +3514,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: ExternalParamsController }, { type: i0.ChangeDetectorRef }, { type: FsFilterItemsStore }, { type: i1$6.OverlayRef, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$6.OverlayRef, decorators: [{
                     type: Inject,
                     args: [FILTER_DRAWER_OVERLAY]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FILTER_DRAWER_DATA]
-                }] }]; }, propDecorators: { inline: [{
+                }] }, { type: ExternalParamsController }, { type: i0.ChangeDetectorRef }, { type: FsFilterItemsStore }]; }, propDecorators: { inline: [{
                 type: Input
             }], updateWindowWidth: [{
                 type: HostListener,
@@ -3721,7 +3718,6 @@ class FsFilterOverlayService {
         const data = {
             done: this._doneFn,
             clear: this._clearFn,
-            filter: this.filter,
         };
         const injector = this._createInjector(this._injector, data, this._overlayRef);
         const containerPortal = new ComponentPortal(FilterDrawerComponent, undefined, injector);
@@ -3807,7 +3803,6 @@ class FilterComponent {
         this._keyword$ = new Subject();
         this._destroy$ = new Subject();
         this._filterItems.filter = this;
-        this._filterOverlay.filter = this;
         this._listenWhenFilterReady();
         this._updateWindowWidth();
         this._filterOverlay.attach$