@firestitch/filter 12.13.1 → 12.13.2

package/bundles/firestitch-filter.umd.js

@@ -444,8 +444,9 @@
     })(exports.ItemType || (exports.ItemType = {}));
 
     var BaseItem = /** @class */ (function () {
-        function BaseItem(itemConfig, _additionalConfig) {
+        function BaseItem(itemConfig, _additionalConfig, _filter) {
             this._additionalConfig = _additionalConfig;
+            this._filter = _filter;
             this._pendingValues = false;
             this._pendingDefaultValue = false;
             this._loading$ = new rxjs.BehaviorSubject(false);
@@ -457,6 +458,13 @@
             this._type = itemConfig.type;
             this._parseConfig(itemConfig);
         }
+        Object.defineProperty(BaseItem.prototype, "filter", {
+            get: function () {
+                return this._filter;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(BaseItem.prototype, "isTypeAutocomplete", {
             ///
             get: function () {
@@ -654,7 +662,7 @@
         BaseItem.prototype.valueChanged = function () {
             this._value$.next(this.value);
             if (this.change) {
-                this.change(this);
+                this.change(this, this._filter);
             }
             if (this.initialized) {
                 this._valueChange$.next();
@@ -694,13 +702,13 @@
                 _this._pendingDefaultValue = false;
             }));
         };
-        BaseItem.prototype.initValues = function (filter, persistedValue) {
+        BaseItem.prototype.initValues = function (persistedValue) {
             // this._initialized = false;
             this.persistedValue = persistedValue;
             this._initDefaultModel();
             var isAutocomplete = this.type === exports.ItemType.AutoComplete || this.type === exports.ItemType.AutoCompleteChips;
             if (this._valuesFn && !isAutocomplete) {
-                var valuesResult = this._valuesFn(null, filter);
+                var valuesResult = this._valuesFn(null, this._filter);
                 if (rxjs.isObservable(valuesResult)) {
                     this._pendingValues = true;
                 }
@@ -716,12 +724,12 @@
                 // this._initialized = true;
             }
         };
-        BaseItem.prototype.loadAsyncValues = function (filter, reload) {
+        BaseItem.prototype.loadAsyncValues = function (reload) {
             var _this = this;
             if (reload === void 0) { reload = true; }
             if (reload || (!this.loading && this.hasPendingValues)) {
                 this.loading = true;
-                this._valuesFn(null, filter)
+                this._valuesFn(null, this._filter)
                     .pipe(operators.take(1), operators.takeUntil(this._destroy$))
                     .subscribe(function (values) {
                     _this.values = values;
@@ -763,7 +771,9 @@
                 this.defaultValue = item.default;
             }
             this.change = item.change;
-            this.init = item.init || (function (item) { });
+            this.init = item.init || (function (_) {
+                //
+            });
             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;
@@ -831,8 +841,8 @@
 
     var MultipleSelectItem = /** @class */ (function (_super) {
         __extends(MultipleSelectItem, _super);
-        function MultipleSelectItem(itemConfig, _persistedValues) {
-            return _super.call(this, itemConfig, _persistedValues) || this;
+        function MultipleSelectItem(itemConfig, _persistedValues, _filter) {
+            return _super.call(this, itemConfig, _persistedValues, _filter) || this;
         }
         Object.defineProperty(MultipleSelectItem.prototype, "value", {
             get: function () {
@@ -917,7 +927,7 @@
             var _this = this;
             var possibleValues = common.filter(this.model || [], function (item) {
                 return _this.values.find(function (value) {
-                    return value.value == item;
+                    return value.value === item;
                 });
             });
             if (!common.isArrayEqual(this.model, possibleValues)) {
@@ -959,177 +969,74 @@
         return flattenedParams;
     }
 
-    function findValue(values, value, children) {
-        for (var i = 0; i < values.length; i++) {
-            var val = values[i];
-            if (val[children]) {
-                return findValue(val[children], value, children);
-            }
-            if (val.value === value) {
-                return val;
-            }
-        }
-        return undefined;
-    }
-
-    var SimpleSelectItem = /** @class */ (function (_super) {
-        __extends(SimpleSelectItem, _super);
-        function SimpleSelectItem(itemConfig, _persistedValues) {
-            return _super.call(this, itemConfig, _persistedValues) || this;
+    var BaseAutocompleteItem = /** @class */ (function (_super) {
+        __extends(BaseAutocompleteItem, _super);
+        function BaseAutocompleteItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        Object.defineProperty(SimpleSelectItem.prototype, "value", {
-            get: function () {
-                var value = this.model;
-                if (value == '__all' || value === undefined) {
-                    value = undefined;
-                }
-                return value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SimpleSelectItem.prototype.getChipsContent = function (type) {
-            var _this = this;
-            if (type === void 0) { type = null; }
-            if (this.children) {
-                var itemValue_1 = findValue(this.values, this.model, this.children);
-                return itemValue_1 && itemValue_1.name;
-            }
-            var itemValue = this.values.find(function (val) { return val.value === _this.model; });
-            if (itemValue) {
-                return itemValue.name;
-            }
-            else if (this.isolate) {
-                return this.isolate.label;
-            }
-        };
-        Object.defineProperty(SimpleSelectItem.prototype, "isChipVisible", {
-            get: function () {
-                return this.model !== '__all' && this.model !== undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SimpleSelectItem.prototype._init = function () {
-            _super.prototype._init.call(this);
-            if (this.model === undefined && this.defaultValue === undefined) {
-                this._model = '__all';
-            }
-        };
-        Object.defineProperty(SimpleSelectItem.prototype, "isolateOptionNotSelected", {
+        Object.defineProperty(BaseAutocompleteItem.prototype, "valuesFn", {
             get: function () {
-                var modelValue = this.model;
-                var isolate = this.isolate;
-                return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
+                return this._valuesFn;
             },
             enumerable: false,
             configurable: true
         });
-        SimpleSelectItem.prototype._setModel = function (value) {
-            if (value) {
-                if (!isNaN(value)) {
-                    value = +value;
-                }
-            }
-            _super.prototype._setModel.call(this, value);
-        };
-        SimpleSelectItem.prototype._validateModel = function () {
-            var _this = this;
-            var item = this.values.find(function (value) {
-                return value.value == _this.model;
-            });
-            var value = item ? item.value : '__all';
-            if (this._model !== value) {
-                this.model = value;
-            }
-        };
-        SimpleSelectItem.prototype._clearValue = function (defaultValue) {
-            if (defaultValue === void 0) { defaultValue = undefined; }
-            _super.prototype._clearValue.call(this, defaultValue);
-            var value = Array.isArray(this.values) && this.values.some(function (val) { return val.value === '__all'; })
-                ? '__all'
-                : undefined;
-            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+        BaseAutocompleteItem.prototype._validateModel = function () {
+            //
         };
-        return SimpleSelectItem;
-    }(BaseSelectItem));
-
-    var SelectItem = /** @class */ (function () {
-        function SelectItem() {
-        }
-        SelectItem.create = function (config) {
-            if (config.multiple) {
-                return new MultipleSelectItem(config, null);
-            }
-            else {
-                return new SimpleSelectItem(config, null);
-            }
+        BaseAutocompleteItem.prototype._parseConfig = function (item) {
+            var _a;
+            this.fetchOnFocus = (_a = item.fetchOnFocus) !== null && _a !== void 0 ? _a : true;
+            _super.prototype._parseConfig.call(this, item);
         };
-        return SelectItem;
-    }());
+        return BaseAutocompleteItem;
+    }(BaseItem));
 
-    var ChipsItem = /** @class */ (function (_super) {
-        __extends(ChipsItem, _super);
-        function ChipsItem() {
+    var AutocompleteChipsItem = /** @class */ (function (_super) {
+        __extends(AutocompleteChipsItem, _super);
+        function AutocompleteChipsItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        ChipsItem.create = function (config) {
-            return new ChipsItem(config, null);
+        AutocompleteChipsItem.create = function (config, filter) {
+            return new AutocompleteChipsItem(config, null, filter);
         };
-        Object.defineProperty(ChipsItem.prototype, "isTypeChips", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ChipsItem.prototype, "value", {
+        Object.defineProperty(AutocompleteChipsItem.prototype, "value", {
             get: function () {
-                var value = lodashEs.clone(this.model);
-                if (Array.isArray(value) && value.length === 0) {
+                if (Array.isArray(this.model) && this.model.length === 0) {
                     return undefined;
                 }
-                return value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ChipsItem.prototype, "isChipVisible", {
-            get: function () {
-                return !!this.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ChipsItem.prototype, "queryObject", {
-            get: function () {
-                var _a;
-                var value = this.value;
-                var name = this.name;
-                return _a = {},
-                    _a[name] = value,
-                    _a;
+                return lodashEs.clone(this.model);
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ChipsItem.prototype, "persistanceObject", {
+        Object.defineProperty(AutocompleteChipsItem.prototype, "queryObject", {
             get: function () {
                 var value = this.value;
                 var name = this.name;
                 var params = {};
                 if (Array.isArray(value)) {
-                    params[name] = value.join(',');
+                    params[this.name] = value
+                        .filter(function (item) { return !!item.value; })
+                        .map(function (item) { return item.value; })
+                        .join(',');
                 }
                 else {
-                    params[name] = undefined;
+                    params[name] = value;
                 }
                 return params;
             },
             enumerable: false,
             configurable: true
         });
-        ChipsItem.prototype.getChipsContent = function () {
+        Object.defineProperty(AutocompleteChipsItem.prototype, "isChipVisible", {
+            get: function () {
+                return Array.isArray(this.model) && this.model.length > 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AutocompleteChipsItem.prototype.getChipsContent = function () {
             return this.model
                 .reduce(function (acc, i) {
                 acc.push(i.name);
@@ -1137,160 +1044,358 @@
             }, [])
                 .join(', ');
         };
-        ChipsItem.prototype._validateModel = function () { };
-        ChipsItem.prototype._setModel = function (value) {
-            if (Array.isArray(value)) {
-                value = value.map(function (val) {
-                    if (isNaN(val)) {
-                        return val;
-                    }
-                    else {
-                        return +val;
-                    }
-                });
-            }
-            this._model = value;
-        };
-        ChipsItem.prototype._parseConfig = function (item) {
-            this.multiple = item.multiple;
-            _super.prototype._parseConfig.call(this, item);
-        };
-        ChipsItem.prototype._init = function () {
-            var _this = this;
-            if (!Array.isArray(this.values)) {
-                this.values = [];
-            }
-            if (this.model && Array.isArray(this.model) && this.values.length) {
-                if (Number.isInteger(this.model[0])) {
-                    this._model = this.model.map(function (id) {
-                        return _this.values.find(function (value) { return value.value === id; });
-                    });
-                }
-            }
+        AutocompleteChipsItem.prototype._init = function () {
             if (this.model === undefined) {
                 this._model = [];
             }
         };
-        ChipsItem.prototype._clearValue = function (defaultValue) {
+        AutocompleteChipsItem.prototype._parseConfig = function (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.prototype._parseConfig.call(this, item);
+        };
+        AutocompleteChipsItem.prototype._clearValue = function (defaultValue) {
             if (defaultValue === void 0) { defaultValue = undefined; }
             this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
+            this.search = '';
         };
-        return ChipsItem;
-    }(BaseItem));
-
-    function getRangeName(configCase, name, range) {
-        if (configCase === 'snake') {
-            return name.concat('_').concat(range);
-        }
-        if (configCase === 'camel') {
-            return name.concat(range.charAt(0).toUpperCase()).concat(range.slice(1));
-        }
-    }
+        AutocompleteChipsItem.prototype._setModel = function (value) {
+            _super.prototype._setModel.call(this, value || []);
+        };
+        return AutocompleteChipsItem;
+    }(BaseAutocompleteItem));
 
-    var RangeItem = /** @class */ (function (_super) {
-        __extends(RangeItem, _super);
-        function RangeItem() {
+    var AutocompleteItem = /** @class */ (function (_super) {
+        __extends(AutocompleteItem, _super);
+        function AutocompleteItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        RangeItem.create = function (config, additionalConfig) {
-            return new RangeItem(config, additionalConfig);
+        AutocompleteItem.create = function (config, filter) {
+            return new AutocompleteItem(config, null, filter);
         };
-        Object.defineProperty(RangeItem.prototype, "value", {
+        Object.defineProperty(AutocompleteItem.prototype, "value", {
             get: function () {
                 var value = lodashEs.clone(this.model);
-                if (!lodashEs.isObject(this.model) ||
-                    (common.isEmpty(this.model.max, { zero: true }) && common.isEmpty(this.model.min, { zero: true }))) {
-                    value = undefined;
+                if (!this.model || this.model.value === undefined) {
+                    return undefined;
                 }
+                value = this.model.value;
                 return value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(RangeItem.prototype, "queryObject", {
+        Object.defineProperty(AutocompleteItem.prototype, "queryObject", {
             get: function () {
                 var value = this.value;
                 var name = this.name;
                 var params = {};
-                var paramMinName = getRangeName(this.case, name, 'min');
-                var paramMaxName = getRangeName(this.case, name, 'max');
-                if (lodashEs.isObject(value)) {
-                    params[paramMinName] = value.min || undefined;
-                    params[paramMaxName] = value.max || undefined;
-                }
-                else {
-                    params[paramMinName] = undefined;
-                    params[paramMaxName] = undefined;
-                }
+                params[name] = value;
                 return params;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(RangeItem.prototype, "isChipVisible", {
+        AutocompleteItem.prototype.getChipsContent = function () {
+            return this.model ? this.model.name : '';
+        };
+        AutocompleteItem.prototype._init = function () {
+            //
+        };
+        AutocompleteItem.prototype._clearValue = function (defaultValue) {
+            if (defaultValue === void 0) { defaultValue = undefined; }
+            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
+            this.search = '';
+        };
+        return AutocompleteItem;
+    }(BaseAutocompleteItem));
+
+    var CheckboxItem = /** @class */ (function (_super) {
+        __extends(CheckboxItem, _super);
+        function CheckboxItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        CheckboxItem.create = function (config, filter) {
+            return new CheckboxItem(config, null, filter);
+        };
+        Object.defineProperty(CheckboxItem.prototype, "isTypeCheckbox", {
             get: function () {
-                return this.model && (this.model.min !== undefined || this.model.max !== undefined);
+                return true;
             },
             enumerable: false,
             configurable: true
         });
-        RangeItem.prototype.getChipsContent = function (type) {
-            if (type === 'from') {
-                var min = this.model.min;
-                return "" + min;
-            }
-            else if (type === 'to') {
-                var max = this.model.max;
-                return "" + max;
+        Object.defineProperty(CheckboxItem.prototype, "isChipVisible", {
+            get: function () {
+                return this.value === this.checked;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CheckboxItem.prototype, "value", {
+            get: function () {
+                var value = this.model ? this.checked : this.unchecked;
+                if (!value) {
+                    return undefined;
+                }
+                return value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CheckboxItem.prototype, "queryObject", {
+            get: function () {
+                var value = this.value;
+                var name = this.name;
+                var params = {};
+                params[name] = this.model ? value : undefined;
+                return params;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CheckboxItem.prototype.getChipsContent = function (type) {
+            if (type === void 0) { type = null; }
+            return this.label;
+        };
+        CheckboxItem.prototype._validateModel = function () {
+            //
+        };
+        CheckboxItem.prototype._parseConfig = function (item) {
+            this.checked = item.checked;
+            this.unchecked = item.unchecked;
+            this.checked = item.checked ? lodashEs.toString(item.checked) : true;
+            this.unchecked = item.unchecked ? lodashEs.toString(item.unchecked) : false;
+            this.defaultValue = item.default === undefined ? this.unchecked : lodashEs.toString(this.defaultValue);
+            _super.prototype._parseConfig.call(this, item);
+        };
+        CheckboxItem.prototype._init = function () {
+            if (this.model === undefined) {
+                this._model = this.checked === this.defaultValue;
             }
         };
-        RangeItem.prototype.clearRange = function (type, defaultValue) {
-            if (type === void 0) { type = null; }
+        CheckboxItem.prototype._clearValue = function (defaultValue) {
             if (defaultValue === void 0) { defaultValue = undefined; }
-            if (type === 'from') {
-                delete this.model.min;
-                if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.min) {
-                    this.model.min = defaultValue.min;
+            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : false;
+        };
+        return CheckboxItem;
+    }(BaseItem));
+
+    var ChipsItem = /** @class */ (function (_super) {
+        __extends(ChipsItem, _super);
+        function ChipsItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        ChipsItem.create = function (config, filter) {
+            return new ChipsItem(config, null, filter);
+        };
+        Object.defineProperty(ChipsItem.prototype, "isTypeChips", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChipsItem.prototype, "value", {
+            get: function () {
+                var value = lodashEs.clone(this.model);
+                if (Array.isArray(value) && value.length === 0) {
+                    return undefined;
                 }
-                this.model = Object.assign({}, this.model);
+                return value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChipsItem.prototype, "isChipVisible", {
+            get: function () {
+                return !!this.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChipsItem.prototype, "queryObject", {
+            get: function () {
+                var _a;
+                var value = this.value;
+                var name = this.name;
+                return _a = {},
+                    _a[name] = value,
+                    _a;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChipsItem.prototype, "persistanceObject", {
+            get: function () {
+                var value = this.value;
+                var name = this.name;
+                var params = {};
+                if (Array.isArray(value)) {
+                    params[name] = value.join(',');
+                }
+                else {
+                    params[name] = undefined;
+                }
+                return params;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ChipsItem.prototype.getChipsContent = function () {
+            return this.model
+                .reduce(function (acc, i) {
+                acc.push(i.name);
+                return acc;
+            }, [])
+                .join(', ');
+        };
+        ChipsItem.prototype._validateModel = function () {
+            //
+        };
+        ChipsItem.prototype._setModel = function (value) {
+            if (Array.isArray(value)) {
+                value = value.map(function (val) {
+                    if (isNaN(val)) {
+                        return val;
+                    }
+                    return +val;
+                });
             }
-            else if (type === 'to') {
-                delete this.model.max;
-                if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.max) {
-                    this.model.max = defaultValue.max;
+            this._model = value;
+        };
+        ChipsItem.prototype._parseConfig = function (item) {
+            this.multiple = item.multiple;
+            _super.prototype._parseConfig.call(this, item);
+        };
+        ChipsItem.prototype._init = function () {
+            var _this = this;
+            if (!Array.isArray(this.values)) {
+                this.values = [];
+            }
+            if (this.model && Array.isArray(this.model) && this.values.length) {
+                if (Number.isInteger(this.model[0])) {
+                    this._model = this.model.map(function (id) {
+                        return _this.values.find(function (value) { return value.value === id; });
+                    });
                 }
-                this.model = Object.assign({}, this.model);
             }
-            else {
-                if (defaultValue) {
-                    this.model = Object.assign({}, defaultValue);
+            if (this.model === undefined) {
+                this._model = [];
+            }
+        };
+        ChipsItem.prototype._clearValue = function (defaultValue) {
+            if (defaultValue === void 0) { defaultValue = undefined; }
+            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
+        };
+        return ChipsItem;
+    }(BaseItem));
+
+    exports.ItemDateMode = void 0;
+    (function (ItemDateMode) {
+        ItemDateMode["Calendar"] = "calendar";
+        ItemDateMode["ScrollMonthYear"] = "monthyear";
+        ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
+    })(exports.ItemDateMode || (exports.ItemDateMode = {}));
+
+    var BaseDateItem = /** @class */ (function (_super) {
+        __extends(BaseDateItem, _super);
+        function BaseDateItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Object.defineProperty(BaseDateItem.prototype, "value", {
+            get: function () {
+                var value = lodashEs.clone(this.model);
+                if (!value || !dateFns.isValid(value) || !dateFns.isDate(value)) {
+                    return undefined;
                 }
-                else {
-                    this.model = {};
+                return value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseDateItem.prototype, "queryObject", {
+            get: function () {
+                var value = this.value;
+                var name = this.name;
+                var params = {};
+                params[name] = value;
+                return params;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BaseDateItem.prototype, "persistanceObject", {
+            get: function () {
+                var _a;
+                var value = this.queryObject[this.name];
+                return _a = {},
+                    _a[this.name] = value ? date.simpleFormat(value) : undefined,
+                    _a;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BaseDateItem.prototype._validateModel = function () {
+        };
+        BaseDateItem.prototype._setModel = function (value) {
+            if (value) {
+                if (!dateFns.isDate(value) || !dateFns.isValid(value)) {
+                    value = dateFns.parseISO(value);
                 }
             }
+            _super.prototype._setModel.call(this, value);
         };
-        RangeItem.prototype._validateModel = function () {
-        };
-        RangeItem.prototype._parseConfig = function (item) {
-            var _a, _b;
-            this.options = item.options;
-            this.prefix = item.prefix;
-            this.suffix = item.suffix;
-            this.case = (_b = (_a = this._additionalConfig) === null || _a === void 0 ? void 0 : _a.case) !== null && _b !== void 0 ? _b : 'camel';
+        BaseDateItem.prototype._parseConfig = function (item) {
+            this.maxYear = item.maxYear;
+            this.mode = item.mode || exports.ItemDateMode.Calendar;
             _super.prototype._parseConfig.call(this, item);
         };
-        RangeItem.prototype._init = function () {
+        BaseDateItem.prototype._init = function () {
             if (!this.label) {
                 this.label = ['Min', 'Max'];
             }
-            if (!this.model) {
-                this.model = this.defaultValue || {};
-            }
         };
-        return RangeItem;
+        return BaseDateItem;
     }(BaseItem));
 
+    var DateItem = /** @class */ (function (_super) {
+        __extends(DateItem, _super);
+        function DateItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DateItem.create = function (config, filter) {
+            return new DateItem(config, null, filter);
+        };
+        DateItem.prototype.getChipsContent = function (type) {
+            if (type === void 0) { type = null; }
+            var dateFormat = 'date';
+            if (this.mode === exports.ItemDateMode.ScrollMonthYear) {
+                dateFormat = 'full-date-dayless';
+            }
+            return date.format(this.model, dateFormat);
+        };
+        DateItem.prototype._clearValue = function (defaultValue) {
+            if (defaultValue === void 0) { defaultValue = undefined; }
+            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
+        };
+        return DateItem;
+    }(BaseDateItem));
+
+    function getRangeName(configCase, name, range) {
+        if (configCase === 'snake') {
+            return name.concat('_').concat(range);
+        }
+        if (configCase === 'camel') {
+            return name.concat(range.charAt(0).toUpperCase()).concat(range.slice(1));
+        }
+    }
+
     var BaseDateRangeItem = /** @class */ (function (_super) {
         __extends(BaseDateRangeItem, _super);
         function BaseDateRangeItem() {
@@ -1460,349 +1565,251 @@
         function DateRangeItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        DateRangeItem.create = function (config) {
-            return new DateRangeItem(config, null);
+        DateRangeItem.create = function (config, filter) {
+            return new DateRangeItem(config, null, filter);
         };
         return DateRangeItem;
     }(BaseDateRangeItem));
 
-    var DateTimeRangeItem = /** @class */ (function (_super) {
-        __extends(DateTimeRangeItem, _super);
-        function DateTimeRangeItem() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        DateTimeRangeItem.create = function (config) {
-            return new DateTimeRangeItem(config, null);
-        };
-        return DateTimeRangeItem;
-    }(BaseDateRangeItem));
-
-    exports.ItemDateMode = void 0;
-    (function (ItemDateMode) {
-        ItemDateMode["Calendar"] = "calendar";
-        ItemDateMode["ScrollMonthYear"] = "monthyear";
-        ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
-    })(exports.ItemDateMode || (exports.ItemDateMode = {}));
-
-    var BaseDateItem = /** @class */ (function (_super) {
-        __extends(BaseDateItem, _super);
-        function BaseDateItem() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(BaseDateItem.prototype, "value", {
-            get: function () {
-                var value = lodashEs.clone(this.model);
-                if (!value || !dateFns.isValid(value) || !dateFns.isDate(value)) {
-                    return undefined;
-                }
-                return value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseDateItem.prototype, "queryObject", {
-            get: function () {
-                var value = this.value;
-                var name = this.name;
-                var params = {};
-                params[name] = value;
-                return params;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(BaseDateItem.prototype, "persistanceObject", {
-            get: function () {
-                var _a;
-                var value = this.queryObject[this.name];
-                return _a = {},
-                    _a[this.name] = value ? date.simpleFormat(value) : undefined,
-                    _a;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        BaseDateItem.prototype._validateModel = function () {
-        };
-        BaseDateItem.prototype._setModel = function (value) {
-            if (value) {
-                if (!dateFns.isDate(value) || !dateFns.isValid(value)) {
-                    value = dateFns.parseISO(value);
-                }
-            }
-            _super.prototype._setModel.call(this, value);
-        };
-        BaseDateItem.prototype._parseConfig = function (item) {
-            this.maxYear = item.maxYear;
-            this.mode = item.mode || exports.ItemDateMode.Calendar;
-            _super.prototype._parseConfig.call(this, item);
-        };
-        BaseDateItem.prototype._init = function () {
-            if (!this.label) {
-                this.label = ['Min', 'Max'];
-            }
-        };
-        return BaseDateItem;
-    }(BaseItem));
-
-    var DateItem = /** @class */ (function (_super) {
-        __extends(DateItem, _super);
-        function DateItem() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        DateItem.create = function (config) {
-            return new DateItem(config, null);
-        };
-        DateItem.prototype.getChipsContent = function (type) {
-            if (type === void 0) { type = null; }
-            var dateFormat = 'date';
-            if (this.mode == exports.ItemDateMode.ScrollMonthYear) {
-                dateFormat = 'full-date-dayless';
-            }
-            return date.format(this.model, dateFormat);
-        };
-        DateItem.prototype._clearValue = function (defaultValue) {
-            if (defaultValue === void 0) { defaultValue = undefined; }
-            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
-        };
-        return DateItem;
-    }(BaseDateItem));
-
     var DateTimeItem = /** @class */ (function (_super) {
         __extends(DateTimeItem, _super);
         function DateTimeItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        DateTimeItem.create = function (config) {
-            return new DateTimeItem(config, null);
+        DateTimeItem.create = function (config, filter) {
+            return new DateTimeItem(config, null, filter);
         };
         DateTimeItem.prototype._clearValue = function (defaultValue) {
             if (defaultValue === void 0) { defaultValue = undefined; }
             this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
         };
         return DateTimeItem;
-    }(BaseDateItem));
-
-    var BaseAutocompleteItem = /** @class */ (function (_super) {
-        __extends(BaseAutocompleteItem, _super);
-        function BaseAutocompleteItem() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Object.defineProperty(BaseAutocompleteItem.prototype, "valuesFn", {
-            get: function () {
-                return this._valuesFn;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        BaseAutocompleteItem.prototype._validateModel = function () {
-            //
-        };
-        BaseAutocompleteItem.prototype._parseConfig = function (item) {
-            var _a;
-            this.fetchOnFocus = (_a = item.fetchOnFocus) !== null && _a !== void 0 ? _a : true;
-            _super.prototype._parseConfig.call(this, item);
-        };
-        return BaseAutocompleteItem;
-    }(BaseItem));
-
-    var AutocompleteItem = /** @class */ (function (_super) {
-        __extends(AutocompleteItem, _super);
-        function AutocompleteItem() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        AutocompleteItem.create = function (config) {
-            return new AutocompleteItem(config, null);
-        };
-        Object.defineProperty(AutocompleteItem.prototype, "value", {
-            get: function () {
-                var value = lodashEs.clone(this.model);
-                if (!this.model || this.model.value === undefined) {
-                    return undefined;
-                }
-                value = this.model.value;
-                return value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AutocompleteItem.prototype, "queryObject", {
-            get: function () {
-                var value = this.value;
-                var name = this.name;
-                var params = {};
-                params[name] = value;
-                return params;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AutocompleteItem.prototype.getChipsContent = function () {
-            return this.model ? this.model.name : '';
-        };
-        AutocompleteItem.prototype._init = function () { };
-        AutocompleteItem.prototype._clearValue = function (defaultValue) {
-            if (defaultValue === void 0) { defaultValue = undefined; }
-            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
-            this.search = '';
+    }(BaseDateItem));
+
+    var DateTimeRangeItem = /** @class */ (function (_super) {
+        __extends(DateTimeRangeItem, _super);
+        function DateTimeRangeItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        DateTimeRangeItem.create = function (config, filter) {
+            return new DateTimeRangeItem(config, null, filter);
         };
-        return AutocompleteItem;
-    }(BaseAutocompleteItem));
+        return DateTimeRangeItem;
+    }(BaseDateRangeItem));
 
-    var AutocompleteChipsItem = /** @class */ (function (_super) {
-        __extends(AutocompleteChipsItem, _super);
-        function AutocompleteChipsItem() {
+    var RangeItem = /** @class */ (function (_super) {
+        __extends(RangeItem, _super);
+        function RangeItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        AutocompleteChipsItem.create = function (config) {
-            return new AutocompleteChipsItem(config, null);
+        RangeItem.create = function (config, additionalConfig, filter) {
+            return new RangeItem(config, additionalConfig, filter);
         };
-        Object.defineProperty(AutocompleteChipsItem.prototype, "value", {
+        Object.defineProperty(RangeItem.prototype, "value", {
             get: function () {
-                if (Array.isArray(this.model) && this.model.length === 0) {
-                    return undefined;
+                var value = lodashEs.clone(this.model);
+                if (!lodashEs.isObject(this.model) ||
+                    (common.isEmpty(this.model.max, { zero: true }) && common.isEmpty(this.model.min, { zero: true }))) {
+                    value = undefined;
                 }
-                return lodashEs.clone(this.model);
+                return value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AutocompleteChipsItem.prototype, "queryObject", {
+        Object.defineProperty(RangeItem.prototype, "queryObject", {
             get: function () {
                 var value = this.value;
                 var name = this.name;
                 var params = {};
-                if (Array.isArray(value)) {
-                    params[this.name] = value
-                        .filter(function (item) { return !!item.value; })
-                        .map(function (item) { return item.value; })
-                        .join(',');
+                var paramMinName = getRangeName(this.case, name, 'min');
+                var paramMaxName = getRangeName(this.case, name, 'max');
+                if (lodashEs.isObject(value)) {
+                    params[paramMinName] = value.min || undefined;
+                    params[paramMaxName] = value.max || undefined;
                 }
                 else {
-                    params[name] = value;
+                    params[paramMinName] = undefined;
+                    params[paramMaxName] = undefined;
                 }
                 return params;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(AutocompleteChipsItem.prototype, "isChipVisible", {
+        Object.defineProperty(RangeItem.prototype, "isChipVisible", {
             get: function () {
-                return Array.isArray(this.model) && this.model.length > 0;
+                return this.model && (this.model.min !== undefined || this.model.max !== undefined);
             },
             enumerable: false,
             configurable: true
         });
-        AutocompleteChipsItem.prototype.getChipsContent = function () {
-            return this.model
-                .reduce(function (acc, i) {
-                acc.push(i.name);
-                return acc;
-            }, [])
-                .join(', ');
+        RangeItem.prototype.getChipsContent = function (type) {
+            if (type === 'from') {
+                var min = this.model.min;
+                return "" + min;
+            }
+            else if (type === 'to') {
+                var max = this.model.max;
+                return "" + max;
+            }
         };
-        AutocompleteChipsItem.prototype._init = function () {
-            if (this.model === undefined) {
-                this._model = [];
+        RangeItem.prototype.clearRange = function (type, defaultValue) {
+            if (type === void 0) { type = null; }
+            if (defaultValue === void 0) { defaultValue = undefined; }
+            if (type === 'from') {
+                delete this.model.min;
+                if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.min) {
+                    this.model.min = defaultValue.min;
+                }
+                this.model = Object.assign({}, this.model);
+            }
+            else if (type === 'to') {
+                delete this.model.max;
+                if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.max) {
+                    this.model.max = defaultValue.max;
+                }
+                this.model = Object.assign({}, this.model);
+            }
+            else {
+                this.model = defaultValue ? Object.assign({}, defaultValue) : {};
             }
         };
-        AutocompleteChipsItem.prototype._parseConfig = function (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.prototype._parseConfig.call(this, item);
+        RangeItem.prototype._validateModel = function () {
         };
-        AutocompleteChipsItem.prototype._clearValue = function (defaultValue) {
-            if (defaultValue === void 0) { defaultValue = undefined; }
-            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
-            this.search = '';
+        RangeItem.prototype._parseConfig = function (item) {
+            var _a, _b;
+            this.options = item.options;
+            this.prefix = item.prefix;
+            this.suffix = item.suffix;
+            this.case = (_b = (_a = this._additionalConfig) === null || _a === void 0 ? void 0 : _a.case) !== null && _b !== void 0 ? _b : 'camel';
+            _super.prototype._parseConfig.call(this, item);
         };
-        AutocompleteChipsItem.prototype._setModel = function (value) {
-            _super.prototype._setModel.call(this, value || []);
+        RangeItem.prototype._init = function () {
+            if (!this.label) {
+                this.label = ['Min', 'Max'];
+            }
+            if (!this.model) {
+                this.model = this.defaultValue || {};
+            }
         };
-        return AutocompleteChipsItem;
-    }(BaseAutocompleteItem));
+        return RangeItem;
+    }(BaseItem));
 
-    var CheckboxItem = /** @class */ (function (_super) {
-        __extends(CheckboxItem, _super);
-        function CheckboxItem() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    function findValue(values, value, children) {
+        for (var i = 0; i < values.length; i++) {
+            var val = values[i];
+            if (val[children]) {
+                return findValue(val[children], value, children);
+            }
+            if (val.value === value) {
+                return val;
+            }
         }
-        CheckboxItem.create = function (config) {
-            return new CheckboxItem(config, null);
-        };
-        Object.defineProperty(CheckboxItem.prototype, "isTypeCheckbox", {
-            get: function () {
-                return true;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CheckboxItem.prototype, "isChipVisible", {
+        return undefined;
+    }
+
+    var SimpleSelectItem = /** @class */ (function (_super) {
+        __extends(SimpleSelectItem, _super);
+        function SimpleSelectItem(itemConfig, _persistedValues, _filter) {
+            return _super.call(this, itemConfig, _persistedValues, _filter) || this;
+        }
+        Object.defineProperty(SimpleSelectItem.prototype, "value", {
             get: function () {
-                return this.value === this.checked;
+                var value = this.model;
+                if (value === '__all' || value === undefined) {
+                    value = undefined;
+                }
+                return value;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxItem.prototype, "value", {
+        SimpleSelectItem.prototype.getChipsContent = function (type) {
+            var _this = this;
+            if (type === void 0) { type = null; }
+            if (this.children) {
+                var itemValue_1 = findValue(this.values, this.model, this.children);
+                return itemValue_1 && itemValue_1.name;
+            }
+            var itemValue = this.values.find(function (val) { return val.value === _this.model; });
+            if (itemValue) {
+                return itemValue.name;
+            }
+            else if (this.isolate) {
+                return this.isolate.label;
+            }
+        };
+        Object.defineProperty(SimpleSelectItem.prototype, "isChipVisible", {
             get: function () {
-                var value = this.model ? this.checked : this.unchecked;
-                if (!value) {
-                    return undefined;
-                }
-                return value;
+                return this.model !== '__all' && this.model !== undefined;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxItem.prototype, "queryObject", {
+        SimpleSelectItem.prototype._init = function () {
+            _super.prototype._init.call(this);
+            if (this.model === undefined && this.defaultValue === undefined) {
+                this._model = '__all';
+            }
+        };
+        Object.defineProperty(SimpleSelectItem.prototype, "isolateOptionNotSelected", {
             get: function () {
-                var value = this.value;
-                var name = this.name;
-                var params = {};
-                params[name] = this.model ? value : undefined;
-                return params;
+                var modelValue = this.model;
+                var isolate = this.isolate;
+                return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
             },
             enumerable: false,
             configurable: true
         });
-        CheckboxItem.prototype.getChipsContent = function (type) {
-            if (type === void 0) { type = null; }
-            return this.label;
-        };
-        CheckboxItem.prototype._validateModel = function () { };
-        CheckboxItem.prototype._parseConfig = function (item) {
-            this.checked = item.checked;
-            this.unchecked = item.unchecked;
-            this.checked = item.checked ? lodashEs.toString(item.checked) : true;
-            this.unchecked = item.unchecked ? lodashEs.toString(item.unchecked) : false;
-            this.defaultValue = item.default === undefined ? this.unchecked : lodashEs.toString(this.defaultValue);
-            _super.prototype._parseConfig.call(this, item);
+        SimpleSelectItem.prototype._setModel = function (value) {
+            if (value) {
+                if (!isNaN(value)) {
+                    value = +value;
+                }
+            }
+            _super.prototype._setModel.call(this, value);
         };
-        CheckboxItem.prototype._init = function () {
-            if (this.model === undefined) {
-                this._model = this.checked == this.defaultValue;
+        SimpleSelectItem.prototype._validateModel = function () {
+            var _this = this;
+            var item = this.values.find(function (value) {
+                return value.value == _this.model;
+            });
+            var value = item ? item.value : '__all';
+            if (this._model !== value) {
+                this.model = value;
             }
         };
-        CheckboxItem.prototype._clearValue = function (defaultValue) {
+        SimpleSelectItem.prototype._clearValue = function (defaultValue) {
             if (defaultValue === void 0) { defaultValue = undefined; }
-            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : false;
+            _super.prototype._clearValue.call(this, defaultValue);
+            var value = Array.isArray(this.values) && this.values.some(function (val) { return val.value === '__all'; })
+                ? '__all'
+                : undefined;
+            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
         };
-        return CheckboxItem;
-    }(BaseItem));
+        return SimpleSelectItem;
+    }(BaseSelectItem));
+
+    var SelectItem = /** @class */ (function () {
+        function SelectItem() {
+        }
+        SelectItem.create = function (config, filter) {
+            if (config.multiple) {
+                return new MultipleSelectItem(config, null, filter);
+            }
+            return new SimpleSelectItem(config, null, filter);
+        };
+        return SelectItem;
+    }());
 
     var TextItem = /** @class */ (function (_super) {
         __extends(TextItem, _super);
         function TextItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        TextItem.create = function (config) {
-            return new TextItem(config, null);
+        TextItem.create = function (config, filter) {
+            return new TextItem(config, null, filter);
         };
         Object.defineProperty(TextItem.prototype, "value", {
             get: function () {
@@ -1825,13 +1832,17 @@
         TextItem.prototype.getChipsContent = function () {
             return this.model;
         };
-        TextItem.prototype._validateModel = function () { };
+        TextItem.prototype._validateModel = function () {
+            //
+        };
         TextItem.prototype._parseConfig = function (item) {
             this.prefix = item.prefix;
             this.suffix = item.suffix;
             _super.prototype._parseConfig.call(this, item);
         };
-        TextItem.prototype._init = function () { };
+        TextItem.prototype._init = function () {
+            //
+        };
         TextItem.prototype._clearValue = function (defaultValue) {
             if (defaultValue === void 0) { defaultValue = undefined; }
             this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : '';
@@ -1851,8 +1862,8 @@
         function WeekItem() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        WeekItem.create = function (config) {
-            return new WeekItem(config, null);
+        WeekItem.create = function (config, filter) {
+            return new WeekItem(config, null, filter);
         };
         Object.defineProperty(WeekItem.prototype, "value", {
             get: function () {
@@ -1885,12 +1896,7 @@
                     }
                 }
                 if (period) {
-                    if (lodashEs.isString(period)) {
-                        value.period = parseInt(period, 10);
-                    }
-                    else {
-                        value.period = period;
-                    }
+                    value.period = lodashEs.isString(period) ? parseInt(period, 10) : period;
                 }
                 return value;
             },
@@ -1958,44 +1964,44 @@
         return WeekItem;
     }(BaseItem));
 
-    function createFilterItem(item, config) {
+    function createFilterItem(item, config, filter) {
         switch (item.type) {
             case exports.ItemType.Select: {
-                return SelectItem.create(item);
+                return SelectItem.create(item, filter);
             }
             case exports.ItemType.Chips: {
-                return ChipsItem.create(item);
+                return ChipsItem.create(item, filter);
             }
             case exports.ItemType.Range: {
-                return RangeItem.create(item, config);
+                return RangeItem.create(item, config, filter);
             }
             case exports.ItemType.DateRange: {
-                return DateRangeItem.create(item);
+                return DateRangeItem.create(item, filter);
             }
             case exports.ItemType.DateTimeRange: {
-                return DateTimeRangeItem.create(item);
+                return DateTimeRangeItem.create(item, filter);
             }
             case exports.ItemType.Date: {
-                return DateItem.create(item);
+                return DateItem.create(item, filter);
             }
             case exports.ItemType.Week: {
-                return WeekItem.create(item);
+                return WeekItem.create(item, filter);
             }
             case exports.ItemType.DateTime: {
-                return DateTimeItem.create(item);
+                return DateTimeItem.create(item, filter);
             }
             case exports.ItemType.AutoComplete: {
-                return AutocompleteItem.create(item);
+                return AutocompleteItem.create(item, filter);
             }
             case exports.ItemType.AutoCompleteChips: {
-                return AutocompleteChipsItem.create(item);
+                return AutocompleteChipsItem.create(item, filter);
             }
             case exports.ItemType.Checkbox: {
-                return CheckboxItem.create(item);
+                return CheckboxItem.create(item, filter);
             }
             case exports.ItemType.Keyword:
             case exports.ItemType.Text: {
-                return TextItem.create(item);
+                return TextItem.create(item, filter);
             }
         }
     }
@@ -2218,10 +2224,9 @@
             (_a = this.keywordItem) === null || _a === void 0 ? void 0 : _a.clear();
         };
         FsFilterItemsStore.prototype.loadAsyncValues = function () {
-            var _this = this;
             this.items
                 .filter(function (item) { return item.hasPendingValues; })
-                .forEach(function (item) { return item.loadAsyncValues(_this.filter); });
+                .forEach(function (item) { return item.loadAsyncValues(); });
         };
         FsFilterItemsStore.prototype.loadAsyncDefaults = function () {
             var _this = this;
@@ -2242,7 +2247,7 @@
                 rxjs.forkJoin(__spreadArray(__spreadArray([], __read(defaultValuesToBeLoaded
                     .map(function (item) { return item.loadDefaultValue(); }))), __read(valuesToBeLoaded
                     .map(function (item) {
-                    item.loadAsyncValues(_this.filter);
+                    item.loadAsyncValues();
                     return item.loading$
                         .pipe();
                 }))))
@@ -2306,10 +2311,9 @@
             return params;
         };
         FsFilterItemsStore.prototype.init = function (p) {
-            var _this = this;
             this.items
                 .forEach(function (item) {
-                item.initValues(_this.filter, p[item.name]);
+                item.initValues(p[item.name]);
             });
             this._initSortingItems(p);
             this.loadAsyncDefaults();
@@ -2377,7 +2381,7 @@
                 }
             })
                 .map(function (item) {
-                var filterItem = createFilterItem(item, { case: _this._config.case });
+                var filterItem = createFilterItem(item, { case: _this._config.case }, _this.filter);
                 if (filterItem.type === exports.ItemType.Keyword) {
                     _this._hasKeyword = true;
                 }
@@ -2421,8 +2425,8 @@
         };
         FsFilterItemsStore.prototype._initSortingItems = function (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]);
             }
         };
         FsFilterItemsStore.prototype._createSortingItems = function () {
@@ -2437,7 +2441,7 @@
                 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);
                 var sortDirectionItem = {
                     name: SORT_DIRECTION_FIELD,
                     type: exports.ItemType.Select,
@@ -2450,7 +2454,7 @@
                 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);
             }
         };
         FsFilterItemsStore.prototype._setKeywordItem = function () {
@@ -3016,7 +3020,6 @@
         };
         ExternalParamsController.prototype.initItems = function () {
             var _this = this;
-            this._itemsStore.ready$;
             this._pending$.next(true);
             if (this._savedFilters.enabled) {
                 this._savedFilters
@@ -3088,7 +3091,7 @@
             var params = buildQueryParams(this._itemsStore.valuesAsQuery({
                 onlyPresented: false,
                 items: targetItems,
-                persisted: true
+                persisted: true,
             }), targetItems);
             this._queryParams.writeStateToQueryParams(params);
         };
@@ -3098,7 +3101,7 @@
             var params = buildQueryParams(this._itemsStore.valuesAsQuery({
                 onlyPresented: false,
                 items: targetItems,
-                persisted: true
+                persisted: true,
             }), targetItems);
             this._persistanceStore.save(params);
         };
@@ -3306,7 +3309,7 @@
             this.listenValueChangesForRanges();
             this._updateVisibility();
             if (this.item.hasPendingValues) {
-                this.item.loadAsyncValues(null, false);
+                this.item.loadAsyncValues(false);
                 this.item.values$
                     .pipe(operators.take(2), operators.takeUntil(this._destroy$))
                     .subscribe(function () {
@@ -3422,12 +3425,13 @@
         return FsFilterDrawerActionsComponent;
     }());
     FsFilterDrawerActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterDrawerActionsComponent, deps: [{ token: ExternalParamsController }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterDrawerActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: { _clear: "clear", _done: "done" }, ngImport: i0__namespace, 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__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe } });
+    FsFilterDrawerActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: { _clear: "clear", _done: "done" }, ngImport: i0__namespace, 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__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterDrawerActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'fs-filter-drawer-actions',
                         templateUrl: './filter-drawer-actions.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: ExternalParamsController }]; }, propDecorators: { _clear: [{
                     type: i0.Output,
@@ -3492,7 +3496,7 @@
         return BaseItemComponent;
     }());
     BaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline", filter: "filter" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    BaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3504,8 +3508,6 @@
                     type: i0.Input
                 }], inline: [{
                     type: i0.Input
-                }], filter: [{
-                    type: i0.Input
                 }] } });
 
     var FocusToItemDirective = /** @class */ (function () {
@@ -3944,7 +3946,7 @@
                 return data ? data.name : data;
             };
             _this.fetch = function (keyword) {
-                return _this.item.valuesFn(keyword, _this.filter);
+                return _this.item.valuesFn(keyword, _this.item.filter);
             };
             return _this;
         }
@@ -3968,7 +3970,7 @@
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
             _this.fetch = function (keyword) {
-                return _this.item.valuesFn(keyword, _this.filter);
+                return _this.item.valuesFn(keyword, _this.item.filter);
             };
             return _this;
         }
@@ -4225,7 +4227,7 @@
         return FilterItemComponent;
     }());
     FilterItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item", filter: "filter" }, ngImport: i0__namespace, 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__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text \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__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4235,23 +4237,20 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
                     type: i0.Input
-                }], filter: [{
-                    type: i0.Input
                 }] } });
 
     var FilterDrawerComponent = /** @class */ (function () {
-        function FilterDrawerComponent(externalParams, _cd, _itemsStore, _overlayRef, _data) {
+        function FilterDrawerComponent(_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();
         }
         FilterDrawerComponent.prototype.updateWindowWidth = function () {
@@ -4291,8 +4290,8 @@
         };
         return FilterDrawerComponent;
     }());
-    FilterDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0__namespace, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \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__namespace$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__namespace$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FilterDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, deps: [{ token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }, { token: ExternalParamsController }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFilterItemsStore }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FilterDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0__namespace, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2__namespace$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__namespace$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4302,13 +4301,13 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
-            return [{ type: ExternalParamsController }, { type: i0__namespace.ChangeDetectorRef }, { type: FsFilterItemsStore }, { type: i1__namespace$6.OverlayRef, decorators: [{
+            return [{ type: i1__namespace$6.OverlayRef, decorators: [{
                             type: i0.Inject,
                             args: [FILTER_DRAWER_OVERLAY]
                         }] }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [FILTER_DRAWER_DATA]
-                        }] }];
+                        }] }, { type: ExternalParamsController }, { type: i0__namespace.ChangeDetectorRef }, { type: FsFilterItemsStore }];
         }, propDecorators: { inline: [{
                     type: i0.Input
                 }], updateWindowWidth: [{
@@ -4752,7 +4751,6 @@
             var data = {
                 done: this._doneFn,
                 clear: this._clearFn,
-                filter: this.filter,
             };
             var injector = this._createInjector(this._injector, data, this._overlayRef);
             var containerPortal = new portal.ComponentPortal(FilterDrawerComponent, undefined, injector);
@@ -4844,7 +4842,6 @@
             this._keyword$ = new rxjs.Subject();
             this._destroy$ = new rxjs.Subject();
             this._filterItems.filter = this;
-            this._filterOverlay.filter = this;
             this._listenWhenFilterReady();
             this._updateWindowWidth();
             this._filterOverlay.attach$