@firestitch/filter 12.12.13 → 12.13.0

package/bundles/firestitch-filter.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('lodash-es'), require('@firestitch/date'), require('date-fns'), require('@firestitch/datepicker'), require('@firestitch/store'), require('@angular/router'), require('@angular/common'), require('@angular/material/dialog'), require('@firestitch/drawer'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/forms'), require('@firestitch/form'), require('@angular/material/input'), require('@angular/cdk/portal'), require('@angular/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/chip'), require('@firestitch/file'), require('@firestitch/label'), require('@firestitch/menu'), require('@firestitch/popover'), require('@firestitch/scroll'), require('@firestitch/skeleton'), require('@firestitch/clear'), require('@angular/cdk/overlay'), require('@angular/cdk/layout')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'lodash-es', '@firestitch/date', 'date-fns', '@firestitch/datepicker', '@firestitch/store', '@angular/router', '@angular/common', '@angular/material/dialog', '@firestitch/drawer', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@angular/material/button', '@angular/forms', '@firestitch/form', '@angular/material/input', '@angular/cdk/portal', '@angular/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/chip', '@firestitch/file', '@firestitch/label', '@firestitch/menu', '@firestitch/popover', '@firestitch/scroll', '@firestitch/skeleton', '@firestitch/clear', '@angular/cdk/overlay', '@angular/cdk/layout'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.filter = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.common, global.lodashEs, global.date, global.dateFns, global.i3, global.i1, global.ng.router, global.ng.common, global.ng.material.dialog, global.i6, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.ng.material.button, global.ng.forms, global.i7, global.ng.material.input, global.ng.cdk.portal, global.ng.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.i4$2, global.i5, global.i2$2, global.i4$1, global.i1$5, global.i3$4, global.i7$1, global.scroll, global.i6$1, global.i8, global.ng.cdk.overlay, global.ng.cdk.layout));
-})(this, (function (exports, i0, rxjs, operators, common, lodashEs, date, dateFns, i3, i1, i1$1, i3$1, i1$2, i6, i1$3, i2, i3$2, i1$4, i4, i7, i3$3, portal, autocomplete, i4$3, chips, i2$1, i4$2, i5, i2$2, i4$1, i1$5, i3$4, i7$1, scroll, i6$1, i8, i1$6, i1$7) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('lodash-es'), require('@firestitch/date'), require('date-fns'), require('@firestitch/datepicker'), require('@firestitch/store'), require('@angular/router'), require('@angular/common'), require('@angular/material/dialog'), require('@firestitch/drawer'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/forms'), require('@firestitch/form'), require('@angular/material/input'), require('@angular/cdk/portal'), require('@angular/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/chip'), require('@firestitch/clear'), require('@firestitch/file'), require('@firestitch/label'), require('@firestitch/menu'), require('@firestitch/popover'), require('@firestitch/scroll'), require('@firestitch/skeleton'), require('@angular/cdk/overlay'), require('@angular/cdk/layout')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'lodash-es', '@firestitch/date', 'date-fns', '@firestitch/datepicker', '@firestitch/store', '@angular/router', '@angular/common', '@angular/material/dialog', '@firestitch/drawer', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@angular/material/button', '@angular/forms', '@firestitch/form', '@angular/material/input', '@angular/cdk/portal', '@angular/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/chip', '@firestitch/clear', '@firestitch/file', '@firestitch/label', '@firestitch/menu', '@firestitch/popover', '@firestitch/scroll', '@firestitch/skeleton', '@angular/cdk/overlay', '@angular/cdk/layout'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.filter = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.common, global.lodashEs, global.date, global.dateFns, global.i3, global.i1, global.ng.router, global.ng.common, global.ng.material.dialog, global.i6, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.ng.material.button, global.ng.forms, global.i7, global.ng.material.input, global.ng.cdk.portal, global.ng.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.i4$2, global.i5, global.i2$2, global.i8, global.i4$1, global.i1$5, global.i3$4, global.i7$1, global.scroll, global.i6$1, global.ng.cdk.overlay, global.ng.cdk.layout));
+})(this, (function (exports, i0, rxjs, operators, common, lodashEs, date, dateFns, i3, i1, i1$1, i3$1, i1$2, i6, i1$3, i2, i3$2, i1$4, i4, i7, i3$3, portal, autocomplete, i4$3, chips, i2$1, i4$2, i5, i2$2, i8, i4$1, i1$5, i3$4, i7$1, scroll, i6$1, i1$6, i1$7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -41,12 +41,12 @@
     var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$4);
     var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
-    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
     var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$7);
 
@@ -378,6 +378,54 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    function objectsAreEquals(obj1, obj2) {
+        var oldKeys = Object.keys(obj1);
+        var currKeys = Object.keys(obj2);
+        if (oldKeys.length !== currKeys.length) {
+            return false;
+        }
+        for (var key in obj1) {
+            if (obj1.hasOwnProperty(key)) {
+                var oldItem = obj1[key];
+                var currItem = obj2[key];
+                var isArrays = Array.isArray(oldItem) && Array.isArray(currItem);
+                var isObjects = lodashEs.isObject(oldItem) && lodashEs.isObject(currItem);
+                if (isArrays && !arraysAreEquals(oldItem, currItem)) {
+                    return false;
+                }
+                else if (isObjects && !objectsAreEquals(oldItem, currItem)) {
+                    return false;
+                }
+                else if (!isArrays && !isObjects && oldItem !== currItem) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    function arraysAreEquals(arr1, arr2) {
+        var e_1, _a;
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        try {
+            for (var arr1_1 = __values(arr1), arr1_1_1 = arr1_1.next(); !arr1_1_1.done; arr1_1_1 = arr1_1.next()) {
+                var el = arr1_1_1.value;
+                if (arr2.indexOf(el) === -1) {
+                    return false;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (arr1_1_1 && !arr1_1_1.done && (_a = arr1_1.return)) _a.call(arr1_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return true;
+    }
+
     exports.ItemType = void 0;
     (function (ItemType) {
         ItemType["Text"] = "text";
@@ -646,13 +694,13 @@
                 _this._pendingDefaultValue = false;
             }));
         };
-        BaseItem.prototype.initValues = function (persistedValue) {
+        BaseItem.prototype.initValues = function (filter, 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();
+                var valuesResult = this._valuesFn(null, filter);
                 if (rxjs.isObservable(valuesResult)) {
                     this._pendingValues = true;
                 }
@@ -668,12 +716,12 @@
                 // this._initialized = true;
             }
         };
-        BaseItem.prototype.loadAsyncValues = function (reload) {
+        BaseItem.prototype.loadAsyncValues = function (filter, reload) {
             var _this = this;
             if (reload === void 0) { reload = true; }
             if (reload || (!this.loading && this.hasPendingValues)) {
                 this.loading = true;
-                this._valuesFn()
+                this._valuesFn(null, filter)
                     .pipe(operators.take(1), operators.takeUntil(this._destroy$))
                     .subscribe(function (values) {
                     _this.values = values;
@@ -693,7 +741,6 @@
             this._clear$.next(defaultValue);
             this._clearValue(defaultValue);
         };
-        ;
         BaseItem.prototype.getChipsContent = function (type) {
             return '';
         };
@@ -728,7 +775,6 @@
                 this.values = item.values;
             }
         };
-        ;
         BaseItem.prototype._initDefaultModel = function () {
             var _a;
             var model = (_a = this.persistedValue) !== null && _a !== void 0 ? _a : this.defaultValue;
@@ -783,54 +829,6 @@
         return BaseSelectItem;
     }(BaseItem));
 
-    function objectsAreEquals(obj1, obj2) {
-        var oldKeys = Object.keys(obj1);
-        var currKeys = Object.keys(obj2);
-        if (oldKeys.length !== currKeys.length) {
-            return false;
-        }
-        for (var key in obj1) {
-            if (obj1.hasOwnProperty(key)) {
-                var oldItem = obj1[key];
-                var currItem = obj2[key];
-                var isArrays = Array.isArray(oldItem) && Array.isArray(currItem);
-                var isObjects = lodashEs.isObject(oldItem) && lodashEs.isObject(currItem);
-                if (isArrays && !arraysAreEquals(oldItem, currItem)) {
-                    return false;
-                }
-                else if (isObjects && !objectsAreEquals(oldItem, currItem)) {
-                    return false;
-                }
-                else if (!isArrays && !isObjects && oldItem !== currItem) {
-                    return false;
-                }
-            }
-        }
-        return true;
-    }
-    function arraysAreEquals(arr1, arr2) {
-        var e_1, _a;
-        if (arr1.length !== arr2.length) {
-            return false;
-        }
-        try {
-            for (var arr1_1 = __values(arr1), arr1_1_1 = arr1_1.next(); !arr1_1_1.done; arr1_1_1 = arr1_1.next()) {
-                var el = arr1_1_1.value;
-                if (arr2.indexOf(el) === -1) {
-                    return false;
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (arr1_1_1 && !arr1_1_1.done && (_a = arr1_1.return)) _a.call(arr1_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return true;
-    }
-
     var MultipleSelectItem = /** @class */ (function (_super) {
         __extends(MultipleSelectItem, _super);
         function MultipleSelectItem(itemConfig, _persistedValues) {
@@ -910,9 +908,7 @@
                     if (isNaN(val)) {
                         return val;
                     }
-                    else {
-                        return +val;
-                    }
+                    return +val;
                 });
             }
             _super.prototype._setModel.call(this, value);
@@ -996,17 +992,15 @@
             var _this = this;
             if (type === void 0) { type = null; }
             if (this.children) {
-                var itemValue = findValue(this.values, this.model, this.children);
-                return itemValue && itemValue.name;
+                var itemValue_1 = findValue(this.values, this.model, this.children);
+                return itemValue_1 && itemValue_1.name;
             }
-            else {
-                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;
-                }
+            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", {
@@ -1602,6 +1596,7 @@
             configurable: true
         });
         BaseAutocompleteItem.prototype._validateModel = function () {
+            //
         };
         BaseAutocompleteItem.prototype._parseConfig = function (item) {
             var _a;
@@ -2223,9 +2218,10 @@
             (_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(); });
+                .forEach(function (item) { return item.loadAsyncValues(_this.filter); });
         };
         FsFilterItemsStore.prototype.loadAsyncDefaults = function () {
             var _this = this;
@@ -2246,7 +2242,7 @@
                 rxjs.forkJoin(__spreadArray(__spreadArray([], __read(defaultValuesToBeLoaded
                     .map(function (item) { return item.loadDefaultValue(); }))), __read(valuesToBeLoaded
                     .map(function (item) {
-                    item.loadAsyncValues();
+                    item.loadAsyncValues(_this.filter);
                     return item.loading$
                         .pipe();
                 }))))
@@ -2310,9 +2306,10 @@
             return params;
         };
         FsFilterItemsStore.prototype.init = function (p) {
+            var _this = this;
             this.items
                 .forEach(function (item) {
-                item.initValues(p[item.name]);
+                item.initValues(_this.filter, p[item.name]);
             });
             this._initSortingItems(p);
             this.loadAsyncDefaults();
@@ -2424,8 +2421,8 @@
         };
         FsFilterItemsStore.prototype._initSortingItems = function (p) {
             if (this.sortByItem && this.sortDirectionItem) {
-                this.sortByItem.initValues(p[this.sortByItem.name]);
-                this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
+                this.sortByItem.initValues(this.filter, p[this.sortByItem.name]);
+                this.sortDirectionItem.initValues(this.filter, p[this.sortDirectionItem.name]);
             }
         };
         FsFilterItemsStore.prototype._createSortingItems = function () {
@@ -2435,7 +2432,7 @@
                     name: SORT_BY_FIELD,
                     type: exports.ItemType.Select,
                     label: 'Sort By',
-                    values: this._config.sortValues
+                    values: this._config.sortValues,
                 };
                 if (this._config.sort && this._config.sort.value) {
                     sortByItem.default = this._config.sort.value;
@@ -2447,8 +2444,8 @@
                     label: 'Sort Direction',
                     values: [
                         { name: 'Ascending', value: 'asc' },
-                        { name: 'Descending', value: 'desc' }
-                    ]
+                        { name: 'Descending', value: 'desc' },
+                    ],
                 };
                 if (this._config.sort && this._config.sort.direction) {
                     sortDirectionItem.default = this._config.sort.direction;
@@ -3113,8 +3110,6 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: PersistanceParamsController }, { type: QueryParamsController }, { type: SavedFiltersController }]; } });
 
-    var FS_FILTER_CONFIG = new i0.InjectionToken('fs.filter-config');
-
     var FsFilterActionButtonComponent = /** @class */ (function () {
         function FsFilterActionButtonComponent() {
             this.ActionType = exports.ActionType;
@@ -3311,7 +3306,7 @@
             this.listenValueChangesForRanges();
             this._updateVisibility();
             if (this.item.hasPendingValues) {
-                this.item.loadAsyncValues(false);
+                this.item.loadAsyncValues(null, false);
                 this.item.values$
                     .pipe(operators.take(2), operators.takeUntil(this._destroy$))
                     .subscribe(function () {
@@ -3356,7 +3351,7 @@
         FsFilterChipComponent.prototype._initDelayRender = function () {
             this.chipDelayedRender$ = rxjs.combineLatest([
                 this.item.values$,
-                this._chipRenderTimer$.pipe(operators.startWith(false))
+                this._chipRenderTimer$.pipe(operators.startWith(false)),
             ])
                 .pipe(operators.map(function (_a) {
                 var _b = __read(_a, 2), values = _b[0], timerValue = _b[1];
@@ -3466,7 +3461,6 @@
             enumerable: false,
             configurable: true
         });
-        ;
         BaseItemComponent.prototype.ngDoCheck = function () {
             if (this._kvDiffer) {
                 var changes = this._kvDiffer.diff(this.item);
@@ -3477,12 +3471,7 @@
         };
         BaseItemComponent.prototype.ngOnChanges = function (changes) {
             if (changes.item) {
-                if (Array.isArray(this.item.label)) {
-                    this.label = this.item.label[0];
-                }
-                else {
-                    this.label = this.item.label;
-                }
+                this.label = Array.isArray(this.item.label) ? this.item.label[0] : this.item.label;
             }
         };
         BaseItemComponent.prototype.ngOnDestroy = function () {
@@ -3503,7 +3492,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" }, 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", filter: "filter" }, 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: [{
@@ -3515,6 +3504,8 @@
                     type: i0.Input
                 }], inline: [{
                     type: i0.Input
+                }], filter: [{
+                    type: i0.Input
                 }] } });
 
     var FocusToItemDirective = /** @class */ (function () {
@@ -3690,11 +3681,9 @@
             if (!isolate) {
                 return values;
             }
-            else {
-                return values.filter(function (value) {
-                    return value.value !== isolate.value;
-                });
-            }
+            return values.filter(function (value) {
+                return value.value !== isolate.value;
+            });
         };
         return FsFilterIsolateValues;
     }());
@@ -3703,7 +3692,7 @@
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, decorators: [{
                 type: i0.Pipe,
                 args: [{
-                        name: 'fsFilterIsolateValues'
+                        name: 'fsFilterIsolateValues',
                     }]
             }] });
 
@@ -3955,7 +3944,7 @@
                 return data ? data.name : data;
             };
             _this.fetch = function (keyword) {
-                return _this.item.valuesFn(keyword);
+                return _this.item.valuesFn(keyword, _this.filter);
             };
             return _this;
         }
@@ -3979,7 +3968,7 @@
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
             _this.fetch = function (keyword) {
-                return _this.item.valuesFn(keyword);
+                return _this.item.valuesFn(keyword, _this.filter);
             };
             return _this;
         }
@@ -4134,8 +4123,8 @@
     var FilterItemComponent = /** @class */ (function () {
         function FilterItemComponent(_cdRef) {
             this._cdRef = _cdRef;
-            this._destroy$ = new rxjs.Subject();
             this.itemType = exports.ItemType;
+            this._destroy$ = new rxjs.Subject();
         }
         Object.defineProperty(FilterItemComponent.prototype, "textItem", {
             get: function () {
@@ -4236,7 +4225,7 @@
         return FilterItemComponent;
     }());
     FilterItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"autocompleteItem\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"autocompleteChipsItem\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4246,20 +4235,23 @@
                     }]
             }], 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(externalParams, _cd, _itemsStore, _overlayRef, _data) {
             this.externalParams = externalParams;
             this._cd = _cd;
             this._itemsStore = _itemsStore;
-            this.overlayRef = overlayRef;
-            this.data = data;
+            this._overlayRef = _overlayRef;
+            this._data = _data;
             this.inline = false;
             this.windowDesktop = false;
             this._itemsStore.prepareItems();
-            this._clear = data.clear;
-            this._done = data.done;
+            this._clear = _data.clear;
+            this._done = _data.done;
+            this.filter = _data.filter;
             this.updateWindowWidth();
         }
         FilterDrawerComponent.prototype.updateWindowWidth = function () {
@@ -4292,7 +4284,7 @@
         };
         FilterDrawerComponent.prototype.done = function () {
             this._done();
-            this.overlayRef.detach();
+            this._overlayRef.detach();
         };
         FilterDrawerComponent.prototype.backdropClick = function () {
             this.done();
@@ -4300,12 +4292,12 @@
         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-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 });
+    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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         templateUrl: './filter-drawer.component.html',
-                        styleUrls: ['filter-drawer.component.scss'],
+                        styleUrls: ['./filter-drawer.component.scss'],
                         // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
@@ -4317,11 +4309,11 @@
                             type: i0.Inject,
                             args: [FILTER_DRAWER_DATA]
                         }] }];
-        }, propDecorators: { updateWindowWidth: [{
+        }, propDecorators: { inline: [{
+                    type: i0.Input
+                }], updateWindowWidth: [{
                     type: i0.HostListener,
                     args: ['window:resize']
-                }], inline: [{
-                    type: i0.Input
                 }] } });
 
     var ActionMenuItem = /** @class */ (function () {
@@ -4694,9 +4686,9 @@
     });
 
     var FsFilterOverlayService = /** @class */ (function () {
-        function FsFilterOverlayService(_injector, _filterMeta, _overlay, _focusController) {
-            this._injector = _injector;
+        function FsFilterOverlayService(_filterMeta, _injector, _overlay, _focusController) {
             this._filterMeta = _filterMeta;
+            this._injector = _injector;
             this._overlay = _overlay;
             this._focusController = _focusController;
             this.detach$ = new rxjs.Subject();
@@ -4721,7 +4713,7 @@
             if (this._overlayRef) {
                 this._overlayRef.detach();
                 this._overlayRef = null;
-                this.removeFilterClass();
+                this._removeFilterClass();
             }
         };
         FsFilterOverlayService.prototype.open = function () {
@@ -4742,8 +4734,8 @@
                 .subscribe(function () {
                 _this.attach$.next();
             });
-            this.addFilterClass();
-            return this.openPortalPreview();
+            this._addFilterClass();
+            return this._openPortalPreview();
         };
         FsFilterOverlayService.prototype.ngOnDestroy = function () {
             this._destroy$.next();
@@ -4752,12 +4744,16 @@
         FsFilterOverlayService.prototype._createOverlay = function () {
             var overlayConfig = new i1$6.OverlayConfig({
                 hasBackdrop: true,
-                backdropClass: 'fs-filter-backdrop'
+                backdropClass: 'fs-filter-backdrop',
             });
             return this._overlay.create(overlayConfig);
         };
-        FsFilterOverlayService.prototype.openPortalPreview = function () {
-            var data = { done: this._doneFn, clear: this._clearFn };
+        FsFilterOverlayService.prototype._openPortalPreview = function () {
+            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);
             var containerRef = this._overlayRef.attach(containerPortal);
@@ -4770,13 +4766,13 @@
             ]);
             return new portal.PortalInjector(parentInjector, injectionTokens);
         };
-        FsFilterOverlayService.prototype.removeFilterClass = function () {
+        FsFilterOverlayService.prototype._removeFilterClass = function () {
             this._filterMeta.openedFilters--;
             if (this._filterMeta.openedFilters === 0) {
                 window.document.body.classList.remove('fs-filter-open');
             }
         };
-        FsFilterOverlayService.prototype.addFilterClass = function () {
+        FsFilterOverlayService.prototype._addFilterClass = function () {
             this._filterMeta.openedFilters++;
             if (this._filterMeta.openedFilters === 1) {
                 window.document.body.classList.add('fs-filter-open');
@@ -4794,15 +4790,15 @@
         };
         return FsFilterOverlayService;
     }());
-    FsFilterOverlayService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterOverlayService, deps: [{ token: i0__namespace.Injector }, { token: FS_FILTER_META }, { token: i1__namespace$6.Overlay }, { token: FocusControllerService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FsFilterOverlayService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterOverlayService, deps: [{ token: FS_FILTER_META }, { token: i0__namespace.Injector }, { token: i1__namespace$6.Overlay }, { token: FocusControllerService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     FsFilterOverlayService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterOverlayService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterOverlayService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+            return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [FS_FILTER_META]
-                        }] }, { type: i1__namespace$6.Overlay }, { type: FocusControllerService }];
+                        }] }, { type: i0__namespace.Injector }, { type: i1__namespace$6.Overlay }, { type: FocusControllerService }];
         } });
 
     var FilterStatusBarDirective = /** @class */ (function () {
@@ -4820,6 +4816,8 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }]; } });
 
+    var FS_FILTER_CONFIG = new i0.InjectionToken('fs.filter-config');
+
     var FilterComponent = /** @class */ (function () {
         function FilterComponent(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions) {
             var _this = this;
@@ -4845,6 +4843,8 @@
             this._hasFilterChips$ = new rxjs.BehaviorSubject(false);
             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$
@@ -5146,9 +5146,7 @@
                     return item.model;
                 }));
             }
-            else {
-                return null;
-            }
+            return null;
         };
         FilterComponent.prototype.changeVisibility = function (state) {
             if (state === this.showFilterMenu) {
@@ -5236,6 +5234,7 @@
         };
         /**
          * Update filter actions config
+         *
          * @param actions
          */
         FilterComponent.prototype.updateActions = function (actions) {
@@ -5284,6 +5283,9 @@
             this._externalParams.initItems();
             this._syncSearchInputWithKeyword();
         };
+        FilterComponent.prototype.keywordChange = function (keyword) {
+            this._keyword$.next(keyword);
+        };
         FilterComponent.prototype._initFilterWithConfig = function (config) {
             if (this.config) {
                 this._filterItems.destroyItems();
@@ -5328,9 +5330,6 @@
                 });
             });
         };
-        FilterComponent.prototype.keywordChange = function (keyword) {
-            this._keyword$.next(keyword);
-        };
         FilterComponent.prototype._listenInputChanges = function () {
             var _this = this;
             this._keyword$
@@ -5542,8 +5541,13 @@
             return {
                 ngModule: FsFilterModule,
                 providers: [
-                    { provide: FS_FILTER_CONFIG, useValue: config || {} }
-                ]
+                    {
+                        provide: FS_FILTER_CONFIG,
+                        useValue: Object.assign({ button: {
+                                label: '',
+                            } }, config),
+                    },
+                ],
             };
         };
         return FsFilterModule;
@@ -5712,9 +5716,6 @@
                             FilterStatusBarDirective,
                             FsSavedFiltersMenuComponent,
                         ],
-                        entryComponents: [
-                            FilterDrawerComponent
-                        ]
                     }]
             }] });