@firestitch/filter 12.11.2 → 12.11.3

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/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/cdk/portal'), require('@firestitch/chip'), require('@firestitch/label'), require('@firestitch/scroll'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/menu'), require('@firestitch/skeleton'), require('@firestitch/file'), require('@firestitch/popover'), 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/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@angular/cdk/portal', '@firestitch/chip', '@firestitch/label', '@firestitch/scroll', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/menu', '@firestitch/skeleton', '@firestitch/file', '@firestitch/popover', '@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.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.ng.cdk.portal, global.i2$1, global.i1$5, global.scroll, global.i4$1, global.i5, global.i3$4, global.i6$1, global.i4$3, global.i7$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, autocomplete, i4$2, chips, i2$2, portal, i2$1, i1$5, scroll, i4$1, i5, i3$4, i6$1, i4$3, i7$1, 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/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/cdk/portal'), require('@firestitch/chip'), require('@firestitch/label'), require('@firestitch/scroll'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/menu'), require('@firestitch/skeleton'), require('@firestitch/file'), require('@firestitch/popover'), require('@angular/cdk/layout'), require('@angular/cdk/overlay')) :
+    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/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@angular/cdk/portal', '@firestitch/chip', '@firestitch/label', '@firestitch/scroll', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/menu', '@firestitch/skeleton', '@firestitch/file', '@firestitch/popover', '@angular/cdk/layout', '@angular/cdk/overlay'], 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.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.ng.cdk.portal, global.i2$1, global.i1$6, global.scroll, global.i4$1, global.i5, global.i3$4, global.i6$1, global.i4$3, global.i7$1, global.ng.cdk.layout, global.ng.cdk.overlay));
+})(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, autocomplete, i4$2, chips, i2$2, portal, i2$1, i1$6, scroll, i4$1, i5, i3$4, i6$1, i4$3, i7$1, i1$5, i1$7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -39,14 +39,14 @@
     var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
+    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i4__namespace$3 = /*#__PURE__*/_interopNamespace(i4$3);
     var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
-    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
+    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$7);
 
     var QUERY_PARAM_DELIMITER = ':';
@@ -1059,6 +1059,51 @@
         return SimpleSelectItem;
     }(BaseSelectItem));
 
+    exports.ActionMode = void 0;
+    (function (ActionMode) {
+        ActionMode["Button"] = "button";
+        ActionMode["Menu"] = "menu";
+        ActionMode["File"] = "file";
+    })(exports.ActionMode || (exports.ActionMode = {}));
+
+    exports.ActionType = void 0;
+    (function (ActionType) {
+        ActionType["Basic"] = "basic";
+        ActionType["Raised"] = "raised";
+        ActionType["Icon"] = "icon";
+        ActionType["Fab"] = "fab";
+        ActionType["MiniFab"] = "mini-fab";
+        ActionType["Flat"] = "flat";
+        ActionType["Stroked"] = "stroked";
+    })(exports.ActionType || (exports.ActionType = {}));
+
+    exports.ButtonStyle = void 0;
+    (function (ButtonStyle) {
+        ButtonStyle["Basic"] = "basic";
+        ButtonStyle["Raised"] = "raised";
+        ButtonStyle["Icon"] = "icon";
+        ButtonStyle["Fab"] = "fab";
+        ButtonStyle["MiniFab"] = "mini-fab";
+        ButtonStyle["Flat"] = "flat";
+        ButtonStyle["Stroked"] = "stroked";
+    })(exports.ButtonStyle || (exports.ButtonStyle = {}));
+
+    exports.ItemDateMode = void 0;
+    (function (ItemDateMode) {
+        ItemDateMode["Calendar"] = "calendar";
+        ItemDateMode["ScrollMonthYear"] = "monthyear";
+        ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
+    })(exports.ItemDateMode || (exports.ItemDateMode = {}));
+
+    var PickerViewType;
+    (function (PickerViewType) {
+        PickerViewType["Date"] = "date";
+        PickerViewType["DateTime"] = "datetime";
+        PickerViewType["Time"] = "time";
+        PickerViewType["Week"] = "week";
+        PickerViewType["MonthRange"] = "monthrange";
+    })(PickerViewType || (PickerViewType = {}));
+
     var SORT_BY_FIELD = 'sortName';
     var SORT_DIRECTION_FIELD = 'sortDirection';
     var FsFilterConfig = /** @class */ (function () {
@@ -1116,7 +1161,7 @@
                 this.button.icon = 'tune';
             }
             if (this.button.style === undefined) {
-                this.button.style = 'raised';
+                this.button.style = exports.ButtonStyle.Raised;
             }
             if (this.button.color === undefined) {
                 this.button.color = 'default';
@@ -1551,13 +1596,6 @@
         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() {
@@ -3075,1481 +3113,1468 @@
 
     var FS_FILTER_CONFIG = new i0.InjectionToken('fs.filter-config');
 
-    var FILTER_DRAWER_DATA = new i0.InjectionToken('fs.filter-drawer-data');
-
-    var FILTER_DRAWER_OVERLAY = new i0.InjectionToken('fs.filter-drawer-overlay');
-
-    var BaseItemComponent = /** @class */ (function () {
-        function BaseItemComponent(_kvDiffers, _cd) {
-            this._kvDiffers = _kvDiffers;
-            this._cd = _cd;
-            this.inline = false;
-            this._destroy$ = new rxjs.Subject();
-            this._debouncer$ = new rxjs.Subject();
-            this._kvDiffer = this._kvDiffers.find(this.item || {}).create();
-            this.listenWithDebounce();
+    var ActionMenuItem = /** @class */ (function () {
+        function ActionMenuItem(config, _parent) {
+            if (config === void 0) { config = {}; }
+            this._parent = _parent;
+            this.items = [];
+            this._isGroup = false;
+            this._visible$ = new rxjs.BehaviorSubject(true);
+            this._disabled$ = new rxjs.BehaviorSubject(false);
+            this._init(config);
         }
-        Object.defineProperty(BaseItemComponent.prototype, "item", {
+        Object.defineProperty(ActionMenuItem.prototype, "isGroup", {
             get: function () {
-                return this._item;
+                return this._isGroup;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionMenuItem.prototype, "visible", {
+            get: function () {
+                return this._visible$.getValue();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionMenuItem.prototype, "visible$", {
+            get: function () {
+                return this._visible$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionMenuItem.prototype, "disabled", {
+            get: function () {
+                return this._disabled$.getValue();
             },
             set: function (value) {
-                this._item = value;
+                this._disabled$.next(value);
             },
             enumerable: false,
             configurable: true
         });
-        ;
-        BaseItemComponent.prototype.ngDoCheck = function () {
-            if (this._kvDiffer) {
-                var changes = this._kvDiffer.diff(this.item);
-                if (changes) {
-                    this._cd.detectChanges();
-                }
+        Object.defineProperty(ActionMenuItem.prototype, "disabled$", {
+            get: function () {
+                return this._disabled$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ActionMenuItem.prototype.updateVisibility = function () {
+            var visible = !!this._showFn ? this._showFn() : true;
+            if (!visible || !this.isGroup) {
+                this._visible$.next(visible);
+                return;
             }
+            var numberOfVisibleChildren = this.items
+                .reduce(function (acc, item) {
+                item.updateVisibility();
+                if (item.visible) {
+                    acc++;
+                }
+                return acc;
+            }, 0);
+            this._visible$.next(!!numberOfVisibleChildren);
         };
-        BaseItemComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.item) {
-                if (Array.isArray(this.item.label)) {
-                    this.label = this.item.label[0];
+        ActionMenuItem.prototype._init = function (config) {
+            var _this = this;
+            this.label = config.label;
+            this.icon = config.icon;
+            this._showFn = config.show;
+            if ('items' in config) {
+                this._isGroup = true;
+                if (Array.isArray(config.items)) {
+                    this.items = config
+                        .items
+                        .map(function (item) { return new ActionMenuItem(item, _this); });
                 }
-                else {
-                    this.label = this.item.label;
+                this.updateVisibility();
+            }
+            else {
+                this.click = config.click;
+                this.routerLink = config.link;
+                if (!this._parent) {
+                    this.updateVisibility();
                 }
             }
         };
-        BaseItemComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        BaseItemComponent.prototype.listenWithDebounce = function () {
-            var _this = this;
-            this._debouncer$
-                .pipe(operators.debounceTime(150), operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.item.valueChanged();
-            });
-        };
-        BaseItemComponent.prototype.itemChange = function () {
-            this._debouncer$.next();
-        };
-        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 });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'base-item',
-                        template: '',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], inline: [{
-                    type: i0.Input
-                }] } });
+        return ActionMenuItem;
+    }());
 
-    var FocusControllerService = /** @class */ (function () {
-        function FocusControllerService() {
-            this._focusOn = new rxjs.BehaviorSubject(null);
+    var Action = /** @class */ (function () {
+        function Action(filterConfig, actionConfig) {
+            if (actionConfig === void 0) { actionConfig = {}; }
+            this.primary = true;
+            this.isReorderAction = false;
+            this.classArray = [];
+            this.items = [];
+            this._visible$ = new rxjs.BehaviorSubject(true);
+            this._disabled$ = new rxjs.BehaviorSubject(false);
+            this._init(filterConfig, actionConfig);
         }
-        Object.defineProperty(FocusControllerService.prototype, "focusOn$", {
+        Object.defineProperty(Action.prototype, "visible", {
             get: function () {
-                return this._focusOn.asObservable();
+                return this._visible$.getValue();
             },
             enumerable: false,
             configurable: true
         });
-        FocusControllerService.prototype.click = function (item, type) {
-            if (type === void 0) { type = null; }
-            this._focusOn.next({ item: item, type: type });
-        };
-        FocusControllerService.prototype.listenFocusFor$ = function (targetItem, targetType) {
-            var _this = this;
-            if (targetType === void 0) { targetType = null; }
-            return this._focusOn
-                .pipe(operators.filter(function (event) { return !!event; }), operators.filter(function (_a) {
-                var item = _a.item, type = _a.type;
-                return targetItem === item && targetType === type;
-            }), operators.tap(function () { return _this.clearFocus(); }));
+        Object.defineProperty(Action.prototype, "visible$", {
+            get: function () {
+                return this._visible$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Action.prototype, "disabled", {
+            get: function () {
+                return this._disabled$.getValue();
+            },
+            set: function (value) {
+                this._disabled$.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Action.prototype, "disabled$", {
+            get: function () {
+                return this._disabled$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Action.prototype.updateVisibility = function () {
+            var visible = !!this._showFn ? this._showFn() : true;
+            if (!visible || this.mode !== exports.ActionMode.Menu) {
+                this._visible$.next(visible);
+                return;
+            }
+            var hasVisibleChildren = this.items.some(function (item) { return item.visible; });
+            this._visible$.next(hasVisibleChildren);
         };
-        FocusControllerService.prototype.clearFocus = function () {
-            this._focusOn.next(null);
+        Action.prototype.updateDisabledState = function () {
+            if (this._disabledFn) {
+                this.disabled = this._disabledFn();
+            }
         };
-        return FocusControllerService;
-    }());
-    FocusControllerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusControllerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FocusControllerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusControllerService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusControllerService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
-
-    var FocusToItemDirective = /** @class */ (function () {
-        function FocusToItemDirective(_el, _focusController, _targetSelect, _targetDate, _targetDateScroll, _targetDateRangeFrom, _targetDateRangeTo, _targetAutocomplete, _targetAutocompleteChips) {
-            this._el = _el;
-            this._focusController = _focusController;
-            this._targetSelect = _targetSelect;
-            this._targetDate = _targetDate;
-            this._targetDateScroll = _targetDateScroll;
-            this._targetDateRangeFrom = _targetDateRangeFrom;
-            this._targetDateRangeTo = _targetDateRangeTo;
-            this._targetAutocomplete = _targetAutocomplete;
-            this._targetAutocompleteChips = _targetAutocompleteChips;
-            this._destroy$ = new rxjs.Subject();
-        }
-        FocusToItemDirective.prototype.ngOnInit = function () {
-            var _this = this;
-            this._focusController
-                .listenFocusFor$(this._item, this._focusTargetType)
-                .pipe(operators.delay(500), operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this._focus();
-            });
-        };
-        FocusToItemDirective.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FocusToItemDirective.prototype._focus = function () {
-            switch (this._item.type) {
-                case exports.ItemType.Select:
-                    {
-                        this._targetSelect.open();
-                    }
-                    break;
-                case exports.ItemType.Text:
-                case exports.ItemType.Range:
-                    {
-                        this._el.nativeElement.focus();
-                    }
-                    break;
-                case exports.ItemType.Date:
+        Action.prototype._init = function (filterConfig, config) {
+            if (config === void 0) { config = {}; }
+            var _a, _b, _c, _d, _e, _f;
+            config.mode = (_a = config.mode) !== null && _a !== void 0 ? _a : exports.ActionMode.Button;
+            this.primary = (_b = config.primary) !== null && _b !== void 0 ? _b : true;
+            this.color = config.color;
+            this.tooltip = config.tooltip;
+            this.label = config.label;
+            this.mode = config.mode;
+            this.icon = config.icon;
+            this.iconPlacement = config.iconPlacement;
+            this._showFn = config.show;
+            this.tabIndex = (_c = config.tabIndex) !== null && _c !== void 0 ? _c : 0;
+            this.menu = config.menu;
+            if (!this.type) {
+                this.type = (config.type || ((_d = filterConfig.button) === null || _d === void 0 ? void 0 : _d.style) || exports.ActionType.Raised);
+                if (this.type === exports.ActionType.Stroked && this.primary) {
+                    this.type = exports.ActionType.Flat;
+                }
+            }
+            if (config.multiple !== undefined) {
+                this.multiple = config.multiple;
+            }
+            if (config.className) {
+                this.className = config.className;
+                this.classArray = this.className
+                    .split(' ');
+            }
+            if (this.primary) {
+                this.color = 'primary';
+            }
+            switch (config.mode) {
+                case exports.ActionMode.Button:
                     {
-                        if (this._item.mode === exports.ItemDateMode.Calendar) {
-                            this._targetDate.open();
-                        }
-                        else {
-                            this._targetDateScroll.open();
-                        }
+                        this.customize = config.customize;
+                        this.click = (_e = config.click) !== null && _e !== void 0 ? _e : (function () { });
+                        this._disabledFn = config.disabled;
+                        this.updateDisabledState();
                     }
                     break;
-                case exports.ItemType.DateRange:
+                case exports.ActionMode.Menu:
                     {
-                        if (this._focusTargetType === 'from') {
-                            this._targetDateRangeFrom.open();
-                        }
-                        else {
-                            this._targetDateRangeTo.open();
+                        if (config.items && Array.isArray(config.items)) {
+                            this.items = config.items.map(function (item) { return new ActionMenuItem(item); });
                         }
                     }
                     break;
-                case exports.ItemType.AutoComplete:
-                    {
-                        this._targetAutocomplete.focus();
-                    }
-                    break;
-                case exports.ItemType.AutoCompleteChips:
+                case exports.ActionMode.File:
                     {
-                        this._targetAutocompleteChips.focus();
+                        this.fileSelected = config.select;
+                        this.fileError = config.error;
+                        this.accept = config.accept;
+                        this.imageQuality = config.imageQuality;
+                        this.minWidth = config.minWidth;
+                        this.minHeight = config.minHeight;
+                        this.maxWidth = config.maxWidth;
+                        this.maxHeight = config.maxHeight;
+                        this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (function () { });
+                        this._disabledFn = config.disabled;
+                        this.updateDisabledState();
                     }
                     break;
             }
+            this.updateVisibility();
         };
-        return FocusToItemDirective;
-    }());
-    FocusToItemDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusToItemDirective, deps: [{ token: i0__namespace.ElementRef }, { token: FocusControllerService }, { token: i2__namespace.MatSelect, optional: true, self: true }, { token: i3__namespace$3.FsDatePickerComponent, optional: true, self: true }, { token: i3__namespace$3.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3__namespace$3.DateRangePickerFromComponent, optional: true, self: true }, { token: i3__namespace$3.DateRangePickerToComponent, optional: true, self: true }, { token: i4__namespace$1.FsAutocompleteComponent, optional: true, self: true }, { token: i5__namespace.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FocusToItemDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: { _item: ["fsFilterFocusTrigger", "_item"], _focusTargetType: ["focusTargetType", "_focusTargetType"] }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusToItemDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[fsFilterFocusTrigger]',
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: i0__namespace.ElementRef }, { type: FocusControllerService }, { type: i2__namespace.MatSelect, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }, { type: i3__namespace$3.FsDatePickerComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }, { type: i3__namespace$3.FsDateScrollPickerComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }, { type: i3__namespace$3.DateRangePickerFromComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }, { type: i3__namespace$3.DateRangePickerToComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }, { type: i4__namespace$1.FsAutocompleteComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }, { type: i5__namespace.FsAutocompleteChipsComponent, decorators: [{
-                            type: i0.Optional
-                        }, {
-                            type: i0.Self
-                        }] }];
-        }, propDecorators: { _item: [{
-                    type: i0.Input,
-                    args: ['fsFilterFocusTrigger']
-                }], _focusTargetType: [{
-                    type: i0.Input,
-                    args: ['focusTargetType']
-                }] } });
+        return Action;
+    }());
 
-    var TextComponent = /** @class */ (function (_super) {
-        __extends(TextComponent, _super);
-        function TextComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            _this.textControl = new i4.FormControl();
-            _this.destroy$ = new rxjs.Subject();
-            return _this;
+    var ActionsController = /** @class */ (function () {
+        function ActionsController(_breakpointObserver) {
+            this._breakpointObserver = _breakpointObserver;
+            this._visible$ = new rxjs.BehaviorSubject(false);
+            this._actions$ = new rxjs.BehaviorSubject([]);
+            this._menuActions$ = new rxjs.BehaviorSubject([]);
+            this._destroy$ = new rxjs.Subject();
+            this._mobileMedia = '(max-width: 799px)';
+            this._allActions = [];
+            this._listenMobileMedia();
         }
-        TextComponent.prototype.ngOnInit = function () {
-            this._listenControlValueChanges();
-            this._listenModelChanges();
+        Object.defineProperty(ActionsController.prototype, "menuActions", {
+            get: function () {
+                return this._menuActions$.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionsController.prototype, "actions", {
+            get: function () {
+                return this._actions$.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionsController.prototype, "actions$", {
+            get: function () {
+                return this._actions$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionsController.prototype, "menuActions$", {
+            get: function () {
+                return this._menuActions$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionsController.prototype, "visible$", {
+            get: function () {
+                return this._visible$.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActionsController.prototype, "mobileMode", {
+            get: function () {
+                return this._breakpointObserver.isMatched(this._mobileMedia);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ActionsController.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
         };
-        TextComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
+        ActionsController.prototype.setConfig = function (config) {
+            this._config = config;
+            this.initActions(config.actions);
         };
-        TextComponent.prototype._listenControlValueChanges = function () {
+        ActionsController.prototype.initActions = function (rawActions) {
             var _this = this;
-            this.textControl.valueChanges
-                .pipe(operators.distinctUntilChanged(), operators.debounceTime(200), operators.takeUntil(this.destroy$))
-                .subscribe(function (value) {
-                _this.item.model = value;
-            });
+            if (!rawActions || !Array.isArray(rawActions)) {
+                return;
+            }
+            this.show();
+            this._allActions = rawActions
+                .map(function (action) { return new Action(_this._config, action); });
+            if (this._reorderAction) {
+                this._allActions.unshift(this._reorderAction);
+            }
+            this._classifyActions();
         };
-        TextComponent.prototype._listenModelChanges = function () {
-            var _this = this;
-            this._item.value$
-                .pipe(operators.takeUntil(this.destroy$))
-                .subscribe(function () {
-                _this.textControl.setValue(_this.item.model, { emitEvent: false });
-            });
+        ActionsController.prototype.show = function () {
+            this._visible$.next(true);
         };
-        return TextComponent;
-    }(BaseItemComponent));
-    TextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextComponent, selector: "filter-item-text", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n  <input matInput [formControl]=\"textControl\" [fsFilterFocusTrigger]=\"item\">\n  <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n</mat-form-field>\n", styles: [""], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'filter-item-text',
-                        templateUrl: './text.component.html',
-                        styleUrls: ['./text.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
-
-    var FsFilterIsolateValues = /** @class */ (function () {
-        function FsFilterIsolateValues() {
-        }
-        FsFilterIsolateValues.prototype.transform = function (values, isolate) {
-            if (!isolate) {
-                return values;
+        ActionsController.prototype.hide = function () {
+            this._visible$.next(false);
+        };
+        ActionsController.prototype.addReorderAction = function (action) {
+            this._allActions.unshift(action);
+            action.isReorderAction = true;
+            this._classifyAction(action);
+            this._reorderAction = action;
+        };
+        ActionsController.prototype.clearActions = function () {
+            this._allActions = [];
+            this._setActions([]);
+            this._setKebabActions([]);
+        };
+        ActionsController.prototype.updateActionsVisibility = function () {
+            this._allActions.forEach(function (action) { return action.updateVisibility(); });
+            this._classifyActions();
+        };
+        ActionsController.prototype.updateDisabledState = function () {
+            this.actions.forEach(function (action) { return action.updateDisabledState(); });
+        };
+        ActionsController.prototype._setKebabActions = function (actions) {
+            this._menuActions$.next(actions);
+        };
+        ActionsController.prototype._setActions = function (actions) {
+            this._actions$.next(actions);
+        };
+        ActionsController.prototype._classifyActions = function () {
+            var kebabActions = [];
+            var actions = [];
+            var mobileMode = this.mobileMode;
+            this._allActions
+                .filter(function (action) {
+                return action.visible;
+            })
+                .forEach(function (action) {
+                if (action.menu !== false && (action.menu || mobileMode)) {
+                    kebabActions.push(action);
+                }
+                else {
+                    actions.push(action);
+                }
+            });
+            this._setKebabActions(kebabActions);
+            this._setActions(actions);
+        };
+        ActionsController.prototype._classifyAction = function (action) {
+            if (action.menu) {
+                this._setKebabActions(__spreadArray(__spreadArray([], __read(this.menuActions)), [action]));
             }
             else {
-                return values.filter(function (value) {
-                    return value.value !== isolate.value;
-                });
+                this._setActions(__spreadArray(__spreadArray([], __read(this.actions)), [action]));
             }
         };
-        return FsFilterIsolateValues;
+        ActionsController.prototype._listenMobileMedia = function () {
+            var _this = this;
+            this._breakpointObserver.observe(this._mobileMedia)
+                .pipe(operators.skip(1), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._classifyActions();
+            });
+        };
+        return ActionsController;
     }());
-    FsFilterIsolateValues.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    FsFilterIsolateValues.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, name: "fsFilterIsolateValues" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'fsFilterIsolateValues'
-                    }]
-            }] });
+    ActionsController.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsController, deps: [{ token: i1__namespace$5.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ActionsController.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsController });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsController, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace$5.BreakpointObserver }]; } });
 
-    var SelectMultipleComponent = /** @class */ (function () {
-        function SelectMultipleComponent(cd) {
-            this.cd = cd;
+    var FILTER_DRAWER_DATA = new i0.InjectionToken('fs.filter-drawer-data');
+
+    var FILTER_DRAWER_OVERLAY = new i0.InjectionToken('fs.filter-drawer-overlay');
+
+    var BaseItemComponent = /** @class */ (function () {
+        function BaseItemComponent(_kvDiffers, _cd) {
+            this._kvDiffers = _kvDiffers;
+            this._cd = _cd;
+            this.inline = false;
+            this._destroy$ = new rxjs.Subject();
+            this._debouncer$ = new rxjs.Subject();
+            this._kvDiffer = this._kvDiffers.find(this.item || {}).create();
+            this.listenWithDebounce();
         }
-        SelectMultipleComponent.prototype.changed = function () {
-            if (this.item.isolate) {
-                this.item.isolate.enabled = false;
-                if (this.item.multiple && Array.isArray(this.item.model)) {
-                    var index = this.item.model.indexOf(this.item.isolate.value);
-                    if (index > -1) {
-                        this.item.model.splice(index, 1);
-                    }
+        Object.defineProperty(BaseItemComponent.prototype, "item", {
+            get: function () {
+                return this._item;
+            },
+            set: function (value) {
+                this._item = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        BaseItemComponent.prototype.ngDoCheck = function () {
+            if (this._kvDiffer) {
+                var changes = this._kvDiffer.diff(this.item);
+                if (changes) {
+                    this._cd.detectChanges();
                 }
             }
         };
-        SelectMultipleComponent.prototype.close = function () {
-            this.select.close();
-        };
-        SelectMultipleComponent.prototype.isolateChange = function (filter) {
-            if (filter.isolate.enabled) {
-                filter.model = filter.multiple ? [filter.isolate.value] : filter.isolate.value;
-            }
-            else {
-                if (filter.multiple) {
-                    filter.model = filter.defaultValue ? filter.defaultValue : [];
+        BaseItemComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.item) {
+                if (Array.isArray(this.item.label)) {
+                    this.label = this.item.label[0];
                 }
                 else {
-                    filter.model = filter.defaultValue ? filter.defaultValue : null;
+                    this.label = this.item.label;
                 }
             }
         };
-        return SelectMultipleComponent;
-    }());
-    SelectMultipleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectMultipleComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectMultipleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0__namespace, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n      <mat-option\n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n          {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4__namespace$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectMultipleComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'filter-item-select-multiple',
-                        templateUrl: './multiple.component.html',
-                        styleUrls: ['./multiple.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], select: [{
-                    type: i0.ViewChild,
-                    args: ['select', { static: true }]
-                }] } });
-
-    var SelectSimpleComponent = /** @class */ (function () {
-        function SelectSimpleComponent(cd) {
-            this.cd = cd;
-        }
-        SelectSimpleComponent.prototype.changed = function () {
-            if (this.item.isolate) {
-                this.item.isolate.enabled = false;
-            }
+        BaseItemComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
         };
-        SelectSimpleComponent.prototype.isolateChange = function (filter) {
-            if (filter.isolate.enabled) {
-                filter.model = filter.isolate.value;
-            }
-            else {
-                filter.model = null;
-            }
+        BaseItemComponent.prototype.listenWithDebounce = function () {
+            var _this = this;
+            this._debouncer$
+                .pipe(operators.debounceTime(150), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.item.valueChanged();
+            });
         };
-        return SelectSimpleComponent;
-    }());
-    SelectSimpleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectSimpleComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectSimpleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0__namespace, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4__namespace$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectSimpleComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'filter-item-select-simple',
-                        templateUrl: './simple.component.html',
-                        styleUrls: ['./simple.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
-                    type: i0.Input
-                }], select: [{
-                    type: i0.ViewChild,
-                    args: ['select', { static: true }]
-                }] } });
-
-    var SelectGroupsComponent = /** @class */ (function () {
-        function SelectGroupsComponent(cd) {
-            this.cd = cd;
-        }
-        SelectGroupsComponent.prototype.compare = function (o1, o2) {
-            return o1 == o2;
+        BaseItemComponent.prototype.itemChange = function () {
+            this._debouncer$.next();
         };
-        return SelectGroupsComponent;
+        return BaseItemComponent;
     }());
-    SelectGroupsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectGroupsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectGroupsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    <ng-container *ngFor=\"let selectItem of item.values\">\n      <ng-container *ngIf=\"selectItem[item.children]; else simpleOption\">\n        <mat-optgroup [label]=\"selectItem.name\">\n          <mat-option *ngFor=\"let subItem of selectItem[item.children]\"\n                      [value]=\"subItem.value\"\n                      [ngStyle]=\"selectItem.style\">\n            {{ subItem.name }}\n          </mat-option>\n        </mat-optgroup>\n      </ng-container>\n\n      <ng-template #simpleOption>\n        <mat-option\n        [value]=\"selectItem.value\"\n        [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      </ng-template>\n    </ng-container>\n  </mat-select>\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i3__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectGroupsComponent, decorators: [{
+    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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'filter-item-select-groups',
-                        templateUrl: './groups.component.html',
+                        selector: 'base-item',
+                        template: '',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { select: [{
-                    type: i0.ViewChild,
-                    args: ['select', { static: true }]
-                }], item: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }], inline: [{
                     type: i0.Input
                 }] } });
 
-    var SelectComponent = /** @class */ (function (_super) {
-        __extends(SelectComponent, _super);
-        function SelectComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            // For case when we have multiple selection with __all option
-            // If _all has been selected than we must disable all other items
-            _this.allItemsOptionSelected = false;
-            return _this;
+    var FocusControllerService = /** @class */ (function () {
+        function FocusControllerService() {
+            this._focusOn = new rxjs.BehaviorSubject(null);
         }
-        Object.defineProperty(SelectComponent.prototype, "multipleSelectItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SelectComponent.prototype, "simpleSelectItem", {
+        Object.defineProperty(FocusControllerService.prototype, "focusOn$", {
             get: function () {
-                return this.item;
+                return this._focusOn.asObservable();
             },
             enumerable: false,
             configurable: true
         });
-        SelectComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.item) {
-                this.values$ = this.item.values$;
-            }
+        FocusControllerService.prototype.click = function (item, type) {
+            if (type === void 0) { type = null; }
+            this._focusOn.next({ item: item, type: type });
         };
-        SelectComponent.prototype.ngDoCheck = function () {
-            if (this._kvDiffer) {
-                var changes = this._kvDiffer.diff(this.item);
-                if (changes) {
-                    this._cd.markForCheck();
-                    if (this.selectedItem) {
-                        this.selectedItem.cd.markForCheck();
+        FocusControllerService.prototype.listenFocusFor$ = function (targetItem, targetType) {
+            var _this = this;
+            if (targetType === void 0) { targetType = null; }
+            return this._focusOn
+                .pipe(operators.filter(function (event) { return !!event; }), operators.filter(function (_a) {
+                var item = _a.item, type = _a.type;
+                return targetItem === item && targetType === type;
+            }), operators.tap(function () { return _this.clearFocus(); }));
+        };
+        FocusControllerService.prototype.clearFocus = function () {
+            this._focusOn.next(null);
+        };
+        return FocusControllerService;
+    }());
+    FocusControllerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusControllerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FocusControllerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusControllerService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusControllerService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return []; } });
+
+    var FocusToItemDirective = /** @class */ (function () {
+        function FocusToItemDirective(_el, _focusController, _targetSelect, _targetDate, _targetDateScroll, _targetDateRangeFrom, _targetDateRangeTo, _targetAutocomplete, _targetAutocompleteChips) {
+            this._el = _el;
+            this._focusController = _focusController;
+            this._targetSelect = _targetSelect;
+            this._targetDate = _targetDate;
+            this._targetDateScroll = _targetDateScroll;
+            this._targetDateRangeFrom = _targetDateRangeFrom;
+            this._targetDateRangeTo = _targetDateRangeTo;
+            this._targetAutocomplete = _targetAutocomplete;
+            this._targetAutocompleteChips = _targetAutocompleteChips;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FocusToItemDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            this._focusController
+                .listenFocusFor$(this._item, this._focusTargetType)
+                .pipe(operators.delay(500), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._focus();
+            });
+        };
+        FocusToItemDirective.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FocusToItemDirective.prototype._focus = function () {
+            switch (this._item.type) {
+                case exports.ItemType.Select:
+                    {
+                        this._targetSelect.open();
                     }
-                }
+                    break;
+                case exports.ItemType.Text:
+                case exports.ItemType.Range:
+                    {
+                        this._el.nativeElement.focus();
+                    }
+                    break;
+                case exports.ItemType.Date:
+                    {
+                        if (this._item.mode === exports.ItemDateMode.Calendar) {
+                            this._targetDate.open();
+                        }
+                        else {
+                            this._targetDateScroll.open();
+                        }
+                    }
+                    break;
+                case exports.ItemType.DateRange:
+                    {
+                        if (this._focusTargetType === 'from') {
+                            this._targetDateRangeFrom.open();
+                        }
+                        else {
+                            this._targetDateRangeTo.open();
+                        }
+                    }
+                    break;
+                case exports.ItemType.AutoComplete:
+                    {
+                        this._targetAutocomplete.focus();
+                    }
+                    break;
+                case exports.ItemType.AutoCompleteChips:
+                    {
+                        this._targetAutocompleteChips.focus();
+                    }
+                    break;
             }
         };
-        return SelectComponent;
-    }(BaseItemComponent));
-    SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }], 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: SelectComponent, decorators: [{
-                type: i0.Component,
+        return FocusToItemDirective;
+    }());
+    FocusToItemDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusToItemDirective, deps: [{ token: i0__namespace.ElementRef }, { token: FocusControllerService }, { token: i2__namespace.MatSelect, optional: true, self: true }, { token: i3__namespace$3.FsDatePickerComponent, optional: true, self: true }, { token: i3__namespace$3.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3__namespace$3.DateRangePickerFromComponent, optional: true, self: true }, { token: i3__namespace$3.DateRangePickerToComponent, optional: true, self: true }, { token: i4__namespace$1.FsAutocompleteComponent, optional: true, self: true }, { token: i5__namespace.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FocusToItemDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: { _item: ["fsFilterFocusTrigger", "_item"], _focusTargetType: ["focusTargetType", "_focusTargetType"] }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FocusToItemDirective, decorators: [{
+                type: i0.Directive,
                 args: [{
-                        selector: 'filter-item-select',
-                        templateUrl: './select.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        selector: '[fsFilterFocusTrigger]',
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { selectedItem: [{
-                    type: i0.ViewChild,
-                    args: ['selectItem']
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef }, { type: FocusControllerService }, { type: i2__namespace.MatSelect, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i3__namespace$3.FsDatePickerComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i3__namespace$3.FsDateScrollPickerComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i3__namespace$3.DateRangePickerFromComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i3__namespace$3.DateRangePickerToComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i4__namespace$1.FsAutocompleteComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }, { type: i5__namespace.FsAutocompleteChipsComponent, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Self
+                        }] }];
+        }, propDecorators: { _item: [{
+                    type: i0.Input,
+                    args: ['fsFilterFocusTrigger']
+                }], _focusTargetType: [{
+                    type: i0.Input,
+                    args: ['focusTargetType']
                 }] } });
 
-    var ChipsComponent = /** @class */ (function (_super) {
-        __extends(ChipsComponent, _super);
-        function ChipsComponent(_kvDiffers, _cd) {
+    var TextComponent = /** @class */ (function (_super) {
+        __extends(TextComponent, _super);
+        function TextComponent(_kvDiffers, _cd) {
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
+            _this.textControl = new i4.FormControl();
+            _this.destroy$ = new rxjs.Subject();
             return _this;
         }
-        ChipsComponent.prototype.modelChange = function () {
-            this.itemChange();
+        TextComponent.prototype.ngOnInit = function () {
+            this._listenControlValueChanges();
+            this._listenModelChanges();
         };
-        ChipsComponent.prototype.compareFn = function (modelValue, chipValue) {
-            return modelValue.value === chipValue.value;
+        TextComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
         };
-        return ChipsComponent;
-    }(BaseItemComponent));
-    ChipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChipsComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips [(ngModel)]=\"item.model\"\n              [compare]=\"compareFn\"\n              [multiple]=\"item.multiple\">\n      <fs-chip *ngFor=\"let value of item.values\"\n               [value]=\"value\"\n               [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], components: [{ type: i1__namespace$5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i1__namespace$5.FsLabelComponent, selector: "fs-label" }, { type: i2__namespace$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: i2__namespace$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChipsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'filter-item-chips',
-                        templateUrl: './chips.component.html',
-                        styleUrls: ['./chips.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
-
-    var RangeComponent = /** @class */ (function (_super) {
-        __extends(RangeComponent, _super);
-        function RangeComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            return _this;
-        }
-        RangeComponent.prototype.ngOnInit = function () {
-            this.listenChanges();
+        TextComponent.prototype._listenControlValueChanges = function () {
+            var _this = this;
+            this.textControl.valueChanges
+                .pipe(operators.distinctUntilChanged(), operators.debounceTime(200), operators.takeUntil(this.destroy$))
+                .subscribe(function (value) {
+                _this.item.model = value;
+            });
         };
-        RangeComponent.prototype.listenChanges = function () {
+        TextComponent.prototype._listenModelChanges = function () {
             var _this = this;
-            var fromListener = rxjs.fromEvent(this.from.nativeElement, 'keyup')
-                .pipe(operators.distinctUntilChanged());
-            var toListener = rxjs.fromEvent(this.to.nativeElement, 'keyup')
-                .pipe(operators.distinctUntilChanged());
-            rxjs.merge(fromListener, toListener)
-                .pipe(operators.takeUntil(this._destroy$))
+            this._item.value$
+                .pipe(operators.takeUntil(this.destroy$))
                 .subscribe(function () {
-                _this.itemChange();
+                _this.textControl.setValue(_this.item.model, { emitEvent: false });
             });
         };
-        return RangeComponent;
+        return TextComponent;
     }(BaseItemComponent));
-    RangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RangeComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"fs-row form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>{{item.label[0]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'from'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.min\"\n           #from>\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>{{item.label[1]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'to'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.max\"\n           #to>\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</div>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RangeComponent, decorators: [{
+    TextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextComponent, selector: "filter-item-text", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n  <input matInput [formControl]=\"textControl\" [fsFilterFocusTrigger]=\"item\">\n  <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n</mat-form-field>\n", styles: [""], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TextComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'filter-item-range',
-                        templateUrl: './range.component.html',
+                        selector: 'filter-item-text',
+                        templateUrl: './text.component.html',
+                        styleUrls: ['./text.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { from: [{
-                    type: i0.ViewChild,
-                    args: ['from', { static: true }]
-                }], to: [{
-                    type: i0.ViewChild,
-                    args: ['to', { static: true }]
-                }] } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var AutocompleteComponent = /** @class */ (function (_super) {
-        __extends(AutocompleteComponent, _super);
-        function AutocompleteComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            _this.displayWith = function (data) {
-                return data ? data.name : data;
-            };
-            _this.fetch = function (keyword) {
-                return _this.item.valuesFn(keyword);
-            };
-            return _this;
+    var FsFilterIsolateValues = /** @class */ (function () {
+        function FsFilterIsolateValues() {
         }
-        return AutocompleteComponent;
-    }(BaseItemComponent));
-    AutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompleteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4__namespace$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, decorators: [{
-                type: i0.Component,
+        FsFilterIsolateValues.prototype.transform = function (values, isolate) {
+            if (!isolate) {
+                return values;
+            }
+            else {
+                return values.filter(function (value) {
+                    return value.value !== isolate.value;
+                });
+            }
+        };
+        return FsFilterIsolateValues;
+    }());
+    FsFilterIsolateValues.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    FsFilterIsolateValues.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, name: "fsFilterIsolateValues" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterIsolateValues, decorators: [{
+                type: i0.Pipe,
                 args: [{
-                        selector: 'filter-item-autocomplete',
-                        templateUrl: './autocomplete.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        name: 'fsFilterIsolateValues'
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }] });
 
-    var AutocompletechipsComponent = /** @class */ (function (_super) {
-        __extends(AutocompletechipsComponent, _super);
-        function AutocompletechipsComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            _this.fetch = function (keyword) {
-                return _this.item.valuesFn(keyword);
-            };
-            return _this;
+    var SelectMultipleComponent = /** @class */ (function () {
+        function SelectMultipleComponent(cd) {
+            this.cd = cd;
         }
-        // SP-T1747
-        AutocompletechipsComponent.prototype.clicked = function () {
-            this.chipBackground = this.item.chipBackground;
-            this.chipColor = this.item.chipColor;
-            this.chipIcon = this.item.chipIcon;
-            this._cd.markForCheck();
-        };
-        AutocompletechipsComponent.prototype.addAutocompleteChipItem = function (event) {
-            if (event.data && this.item.model.indexOf(event.data.value) === -1) {
-                this.item.model.push(event.data);
-                this.itemChange();
+        SelectMultipleComponent.prototype.changed = function () {
+            if (this.item.isolate) {
+                this.item.isolate.enabled = false;
+                if (this.item.multiple && Array.isArray(this.item.model)) {
+                    var index = this.item.model.indexOf(this.item.isolate.value);
+                    if (index > -1) {
+                        this.item.model.splice(index, 1);
+                    }
+                }
             }
         };
-        AutocompletechipsComponent.prototype.removeAutocompleteChipItem = function (event) {
-            common.remove(this.item.model, { value: event.data.value });
-            this.itemChange();
-        };
-        AutocompletechipsComponent.prototype.clearAutocompleteChipItem = function () {
-            this.item.clear();
-            this.itemChange();
-        };
-        AutocompletechipsComponent.prototype.compareItems = function (item1, item2) {
-            return (item1 === null || item1 === void 0 ? void 0 : item1.value) === (item2 === null || item2 === void 0 ? void 0 : item2.value);
+        SelectMultipleComponent.prototype.close = function () {
+            this.select.close();
         };
-        return AutocompletechipsComponent;
-    }(BaseItemComponent));
-    AutocompletechipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompletechipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5__namespace.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'filter-item-autocompletechips',
-                        templateUrl: './autocompletechips.component.html',
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
-
-    var PickerViewType;
-    (function (PickerViewType) {
-        PickerViewType["Date"] = "date";
-        PickerViewType["DateTime"] = "datetime";
-        PickerViewType["Time"] = "time";
-        PickerViewType["Week"] = "week";
-        PickerViewType["MonthRange"] = "monthrange";
-    })(PickerViewType || (PickerViewType = {}));
-
-    var DateComponent = /** @class */ (function (_super) {
-        __extends(DateComponent, _super);
-        function DateComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            _this.viewType = PickerViewType.Date;
-            _this.itemDateMode = exports.ItemDateMode;
-            _this.showYear = true;
-            _this.showMonth = true;
-            _this.showDay = true;
-            return _this;
-        }
-        DateComponent.prototype.ngOnInit = function () {
-            if (this.item.type === exports.ItemType.DateTime) {
-                this.viewType = PickerViewType.DateTime;
+        SelectMultipleComponent.prototype.isolateChange = function (filter) {
+            if (filter.isolate.enabled) {
+                filter.model = filter.multiple ? [filter.isolate.value] : filter.isolate.value;
             }
             else {
-                this.viewType = PickerViewType.Date;
-            }
-            if (this.item.mode === exports.ItemDateMode.ScrollMonthYear) {
-                this.showDay = false;
+                if (filter.multiple) {
+                    filter.model = filter.defaultValue ? filter.defaultValue : [];
+                }
+                else {
+                    filter.model = filter.defaultValue ? filter.defaultValue : null;
+                }
             }
         };
-        return DateComponent;
-    }(BaseItemComponent));
-    DateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input matInput\n          fsDateScrollPicker\n           [fsFilterFocusTrigger]=\"item\"\n          [(ngModel)]=\"item.model\"\n          [maxYear]=\"item.maxYear\"\n          [showMonth]=\"showMonth\"\n          [showDay]=\"showDay\"\n          [showYear]=\"showYear\"\n          [clear]=\"item.clearAllowed\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3__namespace$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, decorators: [{
+        return SelectMultipleComponent;
+    }());
+    SelectMultipleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectMultipleComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectMultipleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0__namespace, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n      <mat-option\n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n          {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4__namespace$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectMultipleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'filter-item-date',
-                        templateUrl: './date.component.html',
+                        selector: 'filter-item-select-multiple',
+                        templateUrl: './multiple.component.html',
+                        styleUrls: ['./multiple.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }], select: [{
+                    type: i0.ViewChild,
+                    args: ['select', { static: true }]
+                }] } });
 
-    var DateRangeComponent = /** @class */ (function (_super) {
-        __extends(DateRangeComponent, _super);
-        function DateRangeComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            _this.viewType = PickerViewType.Date;
-            return _this;
+    var SelectSimpleComponent = /** @class */ (function () {
+        function SelectSimpleComponent(cd) {
+            this.cd = cd;
         }
-        DateRangeComponent.prototype.ngOnInit = function () {
-            if (this.item.type === exports.ItemType.DateTimeRange) {
-                this.viewType = PickerViewType.DateTime;
+        SelectSimpleComponent.prototype.changed = function () {
+            if (this.item.isolate) {
+                this.item.isolate.enabled = false;
+            }
+        };
+        SelectSimpleComponent.prototype.isolateChange = function (filter) {
+            if (filter.isolate.enabled) {
+                filter.model = filter.isolate.value;
             }
             else {
-                this.viewType = PickerViewType.Date;
+                filter.model = null;
             }
         };
-        return DateRangeComponent;
-    }(BaseItemComponent));
-    DateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateRangeComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3__namespace$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateRangeComponent, decorators: [{
+        return SelectSimpleComponent;
+    }());
+    SelectSimpleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectSimpleComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectSimpleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0__namespace, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4__namespace$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectSimpleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'filter-item-date-range',
-                        templateUrl: './date-range.component.html',
+                        selector: 'filter-item-select-simple',
+                        templateUrl: './simple.component.html',
+                        styleUrls: ['./simple.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }], select: [{
+                    type: i0.ViewChild,
+                    args: ['select', { static: true }]
+                }] } });
 
-    var WeekComponent = /** @class */ (function (_super) {
-        __extends(WeekComponent, _super);
-        function WeekComponent(_kvDiffers, _cd) {
-            var _this = _super.call(this, _kvDiffers, _cd) || this;
-            _this._kvDiffers = _kvDiffers;
-            _this._cd = _cd;
-            return _this;
+    var SelectGroupsComponent = /** @class */ (function () {
+        function SelectGroupsComponent(cd) {
+            this.cd = cd;
         }
-        WeekComponent.prototype.ngOnInit = function () { };
-        return WeekComponent;
-    }(BaseItemComponent));
-    WeekComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    WeekComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, decorators: [{
+        SelectGroupsComponent.prototype.compare = function (o1, o2) {
+            return o1 == o2;
+        };
+        return SelectGroupsComponent;
+    }());
+    SelectGroupsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectGroupsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectGroupsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    <ng-container *ngFor=\"let selectItem of item.values\">\n      <ng-container *ngIf=\"selectItem[item.children]; else simpleOption\">\n        <mat-optgroup [label]=\"selectItem.name\">\n          <mat-option *ngFor=\"let subItem of selectItem[item.children]\"\n                      [value]=\"subItem.value\"\n                      [ngStyle]=\"selectItem.style\">\n            {{ subItem.name }}\n          </mat-option>\n        </mat-optgroup>\n      </ng-container>\n\n      <ng-template #simpleOption>\n        <mat-option\n        [value]=\"selectItem.value\"\n        [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      </ng-template>\n    </ng-container>\n  </mat-select>\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3__namespace$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i3__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectGroupsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'filter-item-week',
-                        templateUrl: './week.component.html',
+                        selector: 'filter-item-select-groups',
+                        templateUrl: './groups.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { select: [{
+                    type: i0.ViewChild,
+                    args: ['select', { static: true }]
+                }], item: [{
+                    type: i0.Input
+                }] } });
 
-    var CheckboxComponent = /** @class */ (function (_super) {
-        __extends(CheckboxComponent, _super);
-        function CheckboxComponent(_kvDiffers, _cd) {
+    var SelectComponent = /** @class */ (function (_super) {
+        __extends(SelectComponent, _super);
+        function SelectComponent(_kvDiffers, _cd) {
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
+            // For case when we have multiple selection with __all option
+            // If _all has been selected than we must disable all other items
+            _this.allItemsOptionSelected = false;
             return _this;
         }
-        return CheckboxComponent;
-    }(BaseItemComponent));
-    CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0__namespace, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"], components: [{ type: i1__namespace$5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i4__namespace$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'filter-item-checkbox',
-                        templateUrl: './checkbox.component.html',
-                        styleUrls: ['checkbox.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
-
-    var FilterItemComponent = /** @class */ (function () {
-        function FilterItemComponent(_cdRef) {
-            this._cdRef = _cdRef;
-            this._destroy$ = new rxjs.Subject();
-            this.itemType = exports.ItemType;
-        }
-        Object.defineProperty(FilterItemComponent.prototype, "textItem", {
+        Object.defineProperty(SelectComponent.prototype, "multipleSelectItem", {
             get: function () {
                 return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(FilterItemComponent.prototype, "chipsItem", {
+        Object.defineProperty(SelectComponent.prototype, "simpleSelectItem", {
             get: function () {
                 return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(FilterItemComponent.prototype, "baseSelectItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "rangeItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "autocompleteItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "autocompleteChipsItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "dateItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "dateRangeItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "dateTimeItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "dateTimeRangeItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "weekItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterItemComponent.prototype, "checkboxItem", {
-            get: function () {
-                return this.item;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FilterItemComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.item.value$
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this._cdRef.markForCheck();
-            });
+        SelectComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.item) {
+                this.values$ = this.item.values$;
+            }
         };
-        FilterItemComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
+        SelectComponent.prototype.ngDoCheck = function () {
+            if (this._kvDiffer) {
+                var changes = this._kvDiffer.diff(this.item);
+                if (changes) {
+                    this._cd.markForCheck();
+                    if (this.selectedItem) {
+                        this.selectedItem.cd.markForCheck();
+                    }
+                }
+            }
         };
-        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 });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, decorators: [{
+        return SelectComponent;
+    }(BaseItemComponent));
+    SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }], 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: SelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'filter-item',
-                        templateUrl: './filter-item.component.html',
+                        selector: 'filter-item-select',
+                        templateUrl: './select.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
-                    type: i0.Input
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { selectedItem: [{
+                    type: i0.ViewChild,
+                    args: ['selectItem']
                 }] } });
 
-    var FsFilterDrawerActionsComponent = /** @class */ (function () {
-        function FsFilterDrawerActionsComponent(externalParams) {
-            this.externalParams = externalParams;
-            this._clear = new i0.EventEmitter();
-            this._done = new i0.EventEmitter();
+    var ChipsComponent = /** @class */ (function (_super) {
+        __extends(ChipsComponent, _super);
+        function ChipsComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            return _this;
         }
-        Object.defineProperty(FsFilterDrawerActionsComponent.prototype, "savedFilters", {
-            get: function () {
-                return this.externalParams.savedFiltersController;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FsFilterDrawerActionsComponent.prototype.done = function () {
-            this._done.emit();
-        };
-        FsFilterDrawerActionsComponent.prototype.clear = function () {
-            this._clear.emit();
+        ChipsComponent.prototype.modelChange = function () {
+            this.itemChange();
         };
-        FsFilterDrawerActionsComponent.prototype.saveFilters = function () {
-            this.externalParams
-                .savedFiltersController
-                .openSavedFilterEditDialog();
+        ChipsComponent.prototype.compareFn = function (modelValue, chipValue) {
+            return modelValue.value === chipValue.value;
         };
-        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 } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterDrawerActionsComponent, decorators: [{
+        return ChipsComponent;
+    }(BaseItemComponent));
+    ChipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChipsComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips [(ngModel)]=\"item.model\"\n              [compare]=\"compareFn\"\n              [multiple]=\"item.multiple\">\n      <fs-chip *ngFor=\"let value of item.values\"\n               [value]=\"value\"\n               [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], components: [{ type: i1__namespace$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i1__namespace$6.FsLabelComponent, selector: "fs-label" }, { type: i2__namespace$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: i2__namespace$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChipsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'fs-filter-drawer-actions',
-                        templateUrl: './filter-drawer-actions.component.html',
+                        selector: 'filter-item-chips',
+                        templateUrl: './chips.component.html',
+                        styleUrls: ['./chips.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: ExternalParamsController }]; }, propDecorators: { _clear: [{
-                    type: i0.Output,
-                    args: ['clear']
-                }], _done: [{
-                    type: i0.Output,
-                    args: ['done']
-                }] } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var FilterDrawerComponent = /** @class */ (function () {
-        function FilterDrawerComponent(externalParams, _cd, _itemsStore, overlayRef, 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.updateWindowWidth();
+    var RangeComponent = /** @class */ (function (_super) {
+        __extends(RangeComponent, _super);
+        function RangeComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            return _this;
         }
-        FilterDrawerComponent.prototype.updateWindowWidth = function () {
-            this.windowDesktop = window.innerWidth > 1200;
-        };
-        Object.defineProperty(FilterDrawerComponent.prototype, "items$", {
-            get: function () {
-                return this._itemsStore.visibleItems$;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterDrawerComponent.prototype, "sortItem", {
-            get: function () {
-                return this._itemsStore.sortByItem;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FilterDrawerComponent.prototype, "sortDirectionItem", {
-            get: function () {
-                return this._itemsStore.sortDirectionItem;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FilterDrawerComponent.prototype.clear = function () {
-            this._clear();
-            // this.overlayRef.detach();
-        };
-        FilterDrawerComponent.prototype.done = function () {
-            this._done();
-            this.overlayRef.detach();
+        RangeComponent.prototype.ngOnInit = function () {
+            this.listenChanges();
         };
-        FilterDrawerComponent.prototype.backdropClick = function () {
-            this.done();
+        RangeComponent.prototype.listenChanges = function () {
+            var _this = this;
+            var fromListener = rxjs.fromEvent(this.from.nativeElement, 'keyup')
+                .pipe(operators.distinctUntilChanged());
+            var toListener = rxjs.fromEvent(this.to.nativeElement, 'keyup')
+                .pipe(operators.distinctUntilChanged());
+            rxjs.merge(fromListener, toListener)
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.itemChange();
+            });
         };
-        return FilterDrawerComponent;
-    }());
-    FilterDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0__namespace, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item *ngFor=\"let filterItem of items$ | async\"\n                       class=\"filter-group\"\n                       [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortItem\">\n            </filter-item>\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions class=\"filter-actions\"\n                              *ngIf=\"(externalParams.pending$ | async) !== true\"\n                              (clear)=\"clear()\"\n                              (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6__namespace$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, decorators: [{
+        return RangeComponent;
+    }(BaseItemComponent));
+    RangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RangeComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"fs-row form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>{{item.label[0]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'from'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.min\"\n           #from>\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>{{item.label[1]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'to'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.max\"\n           #to>\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</div>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RangeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        templateUrl: './filter-drawer.component.html',
-                        styleUrls: ['filter-drawer.component.scss'],
-                        // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
+                        selector: 'filter-item-range',
+                        templateUrl: './range.component.html',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () {
-            return [{ type: ExternalParamsController }, { type: i0__namespace.ChangeDetectorRef }, { type: FsFilterItemsStore }, { type: i1__namespace$6.OverlayRef, decorators: [{
-                            type: i0.Inject,
-                            args: [FILTER_DRAWER_OVERLAY]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FILTER_DRAWER_DATA]
-                        }] }];
-        }, propDecorators: { updateWindowWidth: [{
-                    type: i0.HostListener,
-                    args: ['window:resize']
-                }], inline: [{
-                    type: i0.Input
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { from: [{
+                    type: i0.ViewChild,
+                    args: ['from', { static: true }]
+                }], to: [{
+                    type: i0.ViewChild,
+                    args: ['to', { static: true }]
                 }] } });
 
-    var FS_FILTER_META = new i0.InjectionToken('fs.filter.meta', {
-        providedIn: 'root',
-        factory: function () {
-            return {
-                openedFilters: 0,
+    var AutocompleteComponent = /** @class */ (function (_super) {
+        __extends(AutocompleteComponent, _super);
+        function AutocompleteComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            _this.displayWith = function (data) {
+                return data ? data.name : data;
             };
+            _this.fetch = function (keyword) {
+                return _this.item.valuesFn(keyword);
+            };
+            return _this;
         }
-    });
+        return AutocompleteComponent;
+    }(BaseItemComponent));
+    AutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AutocompleteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4__namespace$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'filter-item-autocomplete',
+                        templateUrl: './autocomplete.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var FsFilterOverlayService = /** @class */ (function () {
-        function FsFilterOverlayService(_injector, _filterMeta, _overlay, _focusController) {
-            this._injector = _injector;
-            this._filterMeta = _filterMeta;
-            this._overlay = _overlay;
-            this._focusController = _focusController;
-            this.detach$ = new rxjs.Subject();
-            this.attach$ = new rxjs.Subject();
-            this._destroy$ = new rxjs.Subject();
-            this._openWhenChipClicked();
+    var AutocompletechipsComponent = /** @class */ (function (_super) {
+        __extends(AutocompletechipsComponent, _super);
+        function AutocompletechipsComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            _this.fetch = function (keyword) {
+                return _this.item.valuesFn(keyword);
+            };
+            return _this;
         }
-        Object.defineProperty(FsFilterOverlayService.prototype, "isOpened", {
-            get: function () {
-                return !!this._overlayRef;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FsFilterOverlayService.prototype.setClearFn = function (fn) {
-            this._clearFn = fn;
-        };
-        FsFilterOverlayService.prototype.setDoneFn = function (fn) {
-            this._doneFn = fn;
+        // SP-T1747
+        AutocompletechipsComponent.prototype.clicked = function () {
+            this.chipBackground = this.item.chipBackground;
+            this.chipColor = this.item.chipColor;
+            this.chipIcon = this.item.chipIcon;
+            this._cd.markForCheck();
         };
-        FsFilterOverlayService.prototype.close = function () {
-            if (this._overlayRef) {
-                this._overlayRef.detach();
-                this._overlayRef = null;
-                this.removeFilterClass();
+        AutocompletechipsComponent.prototype.addAutocompleteChipItem = function (event) {
+            if (event.data && this.item.model.indexOf(event.data.value) === -1) {
+                this.item.model.push(event.data);
+                this.itemChange();
             }
         };
-        FsFilterOverlayService.prototype.open = function () {
-            var _this = this;
-            this._overlayRef = this._createOverlay();
-            this._overlayRef.backdropClick()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this._overlayRef.detach();
-            });
-            this._overlayRef.detachments()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.detach$.next();
-            });
-            this._overlayRef.attachments()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.attach$.next();
-            });
-            this.addFilterClass();
-            return this.openPortalPreview();
-        };
-        FsFilterOverlayService.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsFilterOverlayService.prototype._createOverlay = function () {
-            var overlayConfig = new i1$6.OverlayConfig({
-                hasBackdrop: true,
-                backdropClass: 'fs-filter-backdrop'
-            });
-            return this._overlay.create(overlayConfig);
+        AutocompletechipsComponent.prototype.removeAutocompleteChipItem = function (event) {
+            common.remove(this.item.model, { value: event.data.value });
+            this.itemChange();
         };
-        FsFilterOverlayService.prototype.openPortalPreview = function () {
-            var data = { done: this._doneFn, clear: this._clearFn };
-            var injector = this._createInjector(this._injector, data, this._overlayRef);
-            var containerPortal = new portal.ComponentPortal(FilterDrawerComponent, undefined, injector);
-            var containerRef = this._overlayRef.attach(containerPortal);
-            return containerRef.instance;
+        AutocompletechipsComponent.prototype.clearAutocompleteChipItem = function () {
+            this.item.clear();
+            this.itemChange();
         };
-        FsFilterOverlayService.prototype._createInjector = function (parentInjector, data, overlayRef) {
-            var injectionTokens = new WeakMap([
-                [FILTER_DRAWER_DATA, data],
-                [FILTER_DRAWER_OVERLAY, overlayRef],
-            ]);
-            return new portal.PortalInjector(parentInjector, injectionTokens);
+        AutocompletechipsComponent.prototype.compareItems = function (item1, item2) {
+            return (item1 === null || item1 === void 0 ? void 0 : item1.value) === (item2 === null || item2 === void 0 ? void 0 : item2.value);
         };
-        FsFilterOverlayService.prototype.removeFilterClass = function () {
-            this._filterMeta.openedFilters--;
-            if (this._filterMeta.openedFilters === 0) {
-                window.document.body.classList.remove('fs-filter-open');
+        return AutocompletechipsComponent;
+    }(BaseItemComponent));
+    AutocompletechipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AutocompletechipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5__namespace.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'filter-item-autocompletechips',
+                        templateUrl: './autocompletechips.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
+
+    var DateComponent = /** @class */ (function (_super) {
+        __extends(DateComponent, _super);
+        function DateComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            _this.viewType = PickerViewType.Date;
+            _this.itemDateMode = exports.ItemDateMode;
+            _this.showYear = true;
+            _this.showMonth = true;
+            _this.showDay = true;
+            return _this;
+        }
+        DateComponent.prototype.ngOnInit = function () {
+            if (this.item.type === exports.ItemType.DateTime) {
+                this.viewType = PickerViewType.DateTime;
             }
-        };
-        FsFilterOverlayService.prototype.addFilterClass = function () {
-            this._filterMeta.openedFilters++;
-            if (this._filterMeta.openedFilters === 1) {
-                window.document.body.classList.add('fs-filter-open');
+            else {
+                this.viewType = PickerViewType.Date;
+            }
+            if (this.item.mode === exports.ItemDateMode.ScrollMonthYear) {
+                this.showDay = false;
             }
         };
-        FsFilterOverlayService.prototype._openWhenChipClicked = function () {
-            var _this = this;
-            this._focusController.focusOn$
-                .pipe(operators.filter(function (v) { return !!v; }), operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                if (!_this.isOpened) {
-                    _this.open();
-                }
-            });
-        };
-        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.ɵ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: [{
-                            type: i0.Inject,
-                            args: [FS_FILTER_META]
-                        }] }, { type: i1__namespace$6.Overlay }, { type: FocusControllerService }];
-        } });
+        return DateComponent;
+    }(BaseItemComponent));
+    DateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input matInput\n          fsDateScrollPicker\n           [fsFilterFocusTrigger]=\"item\"\n          [(ngModel)]=\"item.model\"\n          [maxYear]=\"item.maxYear\"\n          [showMonth]=\"showMonth\"\n          [showDay]=\"showDay\"\n          [showYear]=\"showYear\"\n          [clear]=\"item.clearAllowed\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3__namespace$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'filter-item-date',
+                        templateUrl: './date.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var FilterStatusBarDirective = /** @class */ (function () {
-        function FilterStatusBarDirective() {
+    var DateRangeComponent = /** @class */ (function (_super) {
+        __extends(DateRangeComponent, _super);
+        function DateRangeComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            _this.viewType = PickerViewType.Date;
+            return _this;
         }
-        return FilterStatusBarDirective;
-    }());
-    FilterStatusBarDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FilterStatusBarDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]", ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, decorators: [{
-                type: i0.Directive,
+        DateRangeComponent.prototype.ngOnInit = function () {
+            if (this.item.type === exports.ItemType.DateTimeRange) {
+                this.viewType = PickerViewType.DateTime;
+            }
+            else {
+                this.viewType = PickerViewType.Date;
+            }
+        };
+        return DateRangeComponent;
+    }(BaseItemComponent));
+    DateRangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateRangeComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateRangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3__namespace$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DateRangeComponent, decorators: [{
+                type: i0.Component,
                 args: [{
-                        selector: '[fsFilterStatusBar]',
+                        selector: 'filter-item-date-range',
+                        templateUrl: './date-range.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }] });
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    exports.ActionType = void 0;
-    (function (ActionType) {
-        ActionType["Basic"] = "basic";
-        ActionType["Raised"] = "raised";
-        ActionType["Icon"] = "icon";
-        ActionType["Fab"] = "fab";
-        ActionType["MiniFab"] = "mini-fab";
-    })(exports.ActionType || (exports.ActionType = {}));
+    var WeekComponent = /** @class */ (function (_super) {
+        __extends(WeekComponent, _super);
+        function WeekComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            return _this;
+        }
+        WeekComponent.prototype.ngOnInit = function () { };
+        return WeekComponent;
+    }(BaseItemComponent));
+    WeekComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    WeekComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0__namespace, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3__namespace$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WeekComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'filter-item-week',
+                        templateUrl: './week.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    exports.ActionMode = void 0;
-    (function (ActionMode) {
-        ActionMode["Button"] = "button";
-        ActionMode["Menu"] = "menu";
-        ActionMode["File"] = "file";
-    })(exports.ActionMode || (exports.ActionMode = {}));
+    var CheckboxComponent = /** @class */ (function (_super) {
+        __extends(CheckboxComponent, _super);
+        function CheckboxComponent(_kvDiffers, _cd) {
+            var _this = _super.call(this, _kvDiffers, _cd) || this;
+            _this._kvDiffers = _kvDiffers;
+            _this._cd = _cd;
+            return _this;
+        }
+        return CheckboxComponent;
+    }(BaseItemComponent));
+    CheckboxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CheckboxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0__namespace, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"], components: [{ type: i1__namespace$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i4__namespace$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CheckboxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'filter-item-checkbox',
+                        templateUrl: './checkbox.component.html',
+                        styleUrls: ['checkbox.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
-    var ActionMenuItem = /** @class */ (function () {
-        function ActionMenuItem(config, _parent) {
-            if (config === void 0) { config = {}; }
-            this._parent = _parent;
-            this.items = [];
-            this._isGroup = false;
-            this._visible$ = new rxjs.BehaviorSubject(true);
-            this._disabled$ = new rxjs.BehaviorSubject(false);
-            this._init(config);
+    var FilterItemComponent = /** @class */ (function () {
+        function FilterItemComponent(_cdRef) {
+            this._cdRef = _cdRef;
+            this._destroy$ = new rxjs.Subject();
+            this.itemType = exports.ItemType;
         }
-        Object.defineProperty(ActionMenuItem.prototype, "isGroup", {
+        Object.defineProperty(FilterItemComponent.prototype, "textItem", {
             get: function () {
-                return this._isGroup;
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionMenuItem.prototype, "visible", {
+        Object.defineProperty(FilterItemComponent.prototype, "chipsItem", {
             get: function () {
-                return this._visible$.getValue();
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionMenuItem.prototype, "visible$", {
+        Object.defineProperty(FilterItemComponent.prototype, "baseSelectItem", {
             get: function () {
-                return this._visible$.asObservable();
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionMenuItem.prototype, "disabled", {
+        Object.defineProperty(FilterItemComponent.prototype, "rangeItem", {
             get: function () {
-                return this._disabled$.getValue();
+                return this.item;
             },
-            set: function (value) {
-                this._disabled$.next(value);
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "autocompleteItem", {
+            get: function () {
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionMenuItem.prototype, "disabled$", {
+        Object.defineProperty(FilterItemComponent.prototype, "autocompleteChipsItem", {
             get: function () {
-                return this._disabled$.asObservable();
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        ActionMenuItem.prototype.updateVisibility = function () {
-            var visible = !!this._showFn ? this._showFn() : true;
-            if (!visible || !this.isGroup) {
-                this._visible$.next(visible);
-                return;
-            }
-            var numberOfVisibleChildren = this.items
-                .reduce(function (acc, item) {
-                item.updateVisibility();
-                if (item.visible) {
-                    acc++;
-                }
-                return acc;
-            }, 0);
-            this._visible$.next(!!numberOfVisibleChildren);
-        };
-        ActionMenuItem.prototype._init = function (config) {
-            var _this = this;
-            this.label = config.label;
-            this.icon = config.icon;
-            this._showFn = config.show;
-            if ('items' in config) {
-                this._isGroup = true;
-                if (Array.isArray(config.items)) {
-                    this.items = config
-                        .items
-                        .map(function (item) { return new ActionMenuItem(item, _this); });
-                }
-                this.updateVisibility();
-            }
-            else {
-                this.click = config.click;
-                this.routerLink = config.link;
-                if (!this._parent) {
-                    this.updateVisibility();
-                }
-            }
-        };
-        return ActionMenuItem;
-    }());
-
-    var Action = /** @class */ (function () {
-        function Action(config) {
-            if (config === void 0) { config = {}; }
-            this.primary = true;
-            this.isReorderAction = false;
-            this.classArray = [];
-            this.items = [];
-            this._visible$ = new rxjs.BehaviorSubject(true);
-            this._disabled$ = new rxjs.BehaviorSubject(false);
-            this._init(config);
-        }
-        Object.defineProperty(Action.prototype, "visible", {
+        Object.defineProperty(FilterItemComponent.prototype, "dateItem", {
             get: function () {
-                return this._visible$.getValue();
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(Action.prototype, "visible$", {
+        Object.defineProperty(FilterItemComponent.prototype, "dateRangeItem", {
             get: function () {
-                return this._visible$.asObservable();
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(Action.prototype, "disabled", {
+        Object.defineProperty(FilterItemComponent.prototype, "dateTimeItem", {
             get: function () {
-                return this._disabled$.getValue();
+                return this.item;
             },
-            set: function (value) {
-                this._disabled$.next(value);
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateTimeRangeItem", {
+            get: function () {
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(Action.prototype, "disabled$", {
+        Object.defineProperty(FilterItemComponent.prototype, "weekItem", {
             get: function () {
-                return this._disabled$.asObservable();
+                return this.item;
             },
             enumerable: false,
             configurable: true
         });
-        Action.prototype.updateVisibility = function () {
-            var visible = !!this._showFn ? this._showFn() : true;
-            if (!visible || this.mode !== exports.ActionMode.Menu) {
-                this._visible$.next(visible);
-                return;
-            }
-            var hasVisibleChildren = this.items.some(function (item) { return item.visible; });
-            this._visible$.next(hasVisibleChildren);
+        Object.defineProperty(FilterItemComponent.prototype, "checkboxItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FilterItemComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.item.value$
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._cdRef.markForCheck();
+            });
         };
-        Action.prototype.updateDisabledState = function () {
-            if (this._disabledFn) {
-                this.disabled = this._disabledFn();
-            }
+        FilterItemComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
         };
-        Action.prototype._init = function (config) {
-            var _a, _b, _c, _d, _e, _f;
-            config.mode = (_a = config.mode) !== null && _a !== void 0 ? _a : exports.ActionMode.Button;
-            this.primary = (_b = config.primary) !== null && _b !== void 0 ? _b : true;
-            this.color = config.color;
-            this.type = (_c = config.type) !== null && _c !== void 0 ? _c : exports.ActionType.Raised;
-            this.tooltip = config.tooltip;
-            this.label = config.label;
-            this.mode = config.mode;
-            this.icon = config.icon;
-            this.iconPlacement = config.iconPlacement;
-            this._showFn = config.show;
-            this.tabIndex = (_d = config.tabIndex) !== null && _d !== void 0 ? _d : 0;
-            this.menu = config.menu;
-            if (config.multiple !== undefined) {
-                this.multiple = config.multiple;
-            }
-            if (config.className) {
-                this.className = config.className;
-                this.classArray = this.className
-                    .split(' ');
-            }
-            if (this.primary) {
-                this.color = 'primary';
-            }
-            switch (config.mode) {
-                case exports.ActionMode.Button:
-                    {
-                        this.customize = config.customize;
-                        this.click = (_e = config.click) !== null && _e !== void 0 ? _e : (function () { });
-                        this._disabledFn = config.disabled;
-                        this.updateDisabledState();
-                    }
-                    break;
-                case exports.ActionMode.Menu:
-                    {
-                        if (config.items && Array.isArray(config.items)) {
-                            this.items = config.items.map(function (item) { return new ActionMenuItem(item); });
-                        }
-                    }
-                    break;
-                case exports.ActionMode.File:
-                    {
-                        this.fileSelected = config.select;
-                        this.fileError = config.error;
-                        this.accept = config.accept;
-                        this.imageQuality = config.imageQuality;
-                        this.minWidth = config.minWidth;
-                        this.minHeight = config.minHeight;
-                        this.maxWidth = config.maxWidth;
-                        this.maxHeight = config.maxHeight;
-                        this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (function () { });
-                        this._disabledFn = config.disabled;
-                        this.updateDisabledState();
-                    }
-                    break;
-            }
-            this.updateVisibility();
+        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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'filter-item',
+                        templateUrl: './filter-item.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                    type: i0.Input
+                }] } });
+
+    var FsFilterDrawerActionsComponent = /** @class */ (function () {
+        function FsFilterDrawerActionsComponent(externalParams) {
+            this.externalParams = externalParams;
+            this._clear = new i0.EventEmitter();
+            this._done = new i0.EventEmitter();
+        }
+        Object.defineProperty(FsFilterDrawerActionsComponent.prototype, "savedFilters", {
+            get: function () {
+                return this.externalParams.savedFiltersController;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FsFilterDrawerActionsComponent.prototype.done = function () {
+            this._done.emit();
         };
-        return Action;
-    }());
+        FsFilterDrawerActionsComponent.prototype.clear = function () {
+            this._clear.emit();
+        };
+        FsFilterDrawerActionsComponent.prototype.saveFilters = function () {
+            this.externalParams
+                .savedFiltersController
+                .openSavedFilterEditDialog();
+        };
+        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 } });
+    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',
+                    }]
+            }], ctorParameters: function () { return [{ type: ExternalParamsController }]; }, propDecorators: { _clear: [{
+                    type: i0.Output,
+                    args: ['clear']
+                }], _done: [{
+                    type: i0.Output,
+                    args: ['done']
+                }] } });
 
-    var ActionsController = /** @class */ (function () {
-        function ActionsController(_breakpointObserver) {
-            this._breakpointObserver = _breakpointObserver;
-            this._visible$ = new rxjs.BehaviorSubject(false);
-            this._actions$ = new rxjs.BehaviorSubject([]);
-            this._menuActions$ = new rxjs.BehaviorSubject([]);
-            this._destroy$ = new rxjs.Subject();
-            this._mobileMedia = '(max-width: 799px)';
-            this._allActions = [];
-            this._listenMobileMedia();
+    var FilterDrawerComponent = /** @class */ (function () {
+        function FilterDrawerComponent(externalParams, _cd, _itemsStore, overlayRef, 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.updateWindowWidth();
         }
-        Object.defineProperty(ActionsController.prototype, "menuActions", {
-            get: function () {
-                return this._menuActions$.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ActionsController.prototype, "actions", {
-            get: function () {
-                return this._actions$.value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ActionsController.prototype, "actions$", {
+        FilterDrawerComponent.prototype.updateWindowWidth = function () {
+            this.windowDesktop = window.innerWidth > 1200;
+        };
+        Object.defineProperty(FilterDrawerComponent.prototype, "items$", {
             get: function () {
-                return this._actions$.asObservable();
+                return this._itemsStore.visibleItems$;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionsController.prototype, "menuActions$", {
+        Object.defineProperty(FilterDrawerComponent.prototype, "sortItem", {
             get: function () {
-                return this._menuActions$.asObservable();
+                return this._itemsStore.sortByItem;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionsController.prototype, "visible$", {
+        Object.defineProperty(FilterDrawerComponent.prototype, "sortDirectionItem", {
             get: function () {
-                return this._visible$.asObservable();
+                return this._itemsStore.sortDirectionItem;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActionsController.prototype, "mobileMode", {
+        FilterDrawerComponent.prototype.clear = function () {
+            this._clear();
+            // this.overlayRef.detach();
+        };
+        FilterDrawerComponent.prototype.done = function () {
+            this._done();
+            this.overlayRef.detach();
+        };
+        FilterDrawerComponent.prototype.backdropClick = function () {
+            this.done();
+        };
+        return FilterDrawerComponent;
+    }());
+    FilterDrawerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0__namespace.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FilterDrawerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0__namespace, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item *ngFor=\"let filterItem of items$ | async\"\n                       class=\"filter-group\"\n                       [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortItem\">\n            </filter-item>\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions class=\"filter-actions\"\n                              *ngIf=\"(externalParams.pending$ | async) !== true\"\n                              (clear)=\"clear()\"\n                              (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6__namespace$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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'],
+                        // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: ExternalParamsController }, { type: i0__namespace.ChangeDetectorRef }, { type: FsFilterItemsStore }, { type: i1__namespace$7.OverlayRef, decorators: [{
+                            type: i0.Inject,
+                            args: [FILTER_DRAWER_OVERLAY]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FILTER_DRAWER_DATA]
+                        }] }];
+        }, propDecorators: { updateWindowWidth: [{
+                    type: i0.HostListener,
+                    args: ['window:resize']
+                }], inline: [{
+                    type: i0.Input
+                }] } });
+
+    var FS_FILTER_META = new i0.InjectionToken('fs.filter.meta', {
+        providedIn: 'root',
+        factory: function () {
+            return {
+                openedFilters: 0,
+            };
+        }
+    });
+
+    var FsFilterOverlayService = /** @class */ (function () {
+        function FsFilterOverlayService(_injector, _filterMeta, _overlay, _focusController) {
+            this._injector = _injector;
+            this._filterMeta = _filterMeta;
+            this._overlay = _overlay;
+            this._focusController = _focusController;
+            this.detach$ = new rxjs.Subject();
+            this.attach$ = new rxjs.Subject();
+            this._destroy$ = new rxjs.Subject();
+            this._openWhenChipClicked();
+        }
+        Object.defineProperty(FsFilterOverlayService.prototype, "isOpened", {
             get: function () {
-                return this._breakpointObserver.isMatched(this._mobileMedia);
+                return !!this._overlayRef;
             },
             enumerable: false,
             configurable: true
         });
-        ActionsController.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ActionsController.prototype.initActions = function (rawActions) {
-            if (!rawActions || !Array.isArray(rawActions)) {
-                return;
-            }
-            this.show();
-            this._allActions = rawActions
-                .map(function (action) { return new Action(action); });
-            if (this._reorderAction) {
-                this._allActions.unshift(this._reorderAction);
-            }
-            this._classifyActions();
-        };
-        ActionsController.prototype.show = function () {
-            this._visible$.next(true);
-        };
-        ActionsController.prototype.hide = function () {
-            this._visible$.next(false);
+        FsFilterOverlayService.prototype.setClearFn = function (fn) {
+            this._clearFn = fn;
         };
-        ActionsController.prototype.addReorderAction = function (action) {
-            this._allActions.unshift(action);
-            action.isReorderAction = true;
-            this._classifyAction(action);
-            this._reorderAction = action;
+        FsFilterOverlayService.prototype.setDoneFn = function (fn) {
+            this._doneFn = fn;
         };
-        ActionsController.prototype.clearActions = function () {
-            this._allActions = [];
-            this._setActions([]);
-            this._setKebabActions([]);
+        FsFilterOverlayService.prototype.close = function () {
+            if (this._overlayRef) {
+                this._overlayRef.detach();
+                this._overlayRef = null;
+                this.removeFilterClass();
+            }
         };
-        ActionsController.prototype.updateActionsVisibility = function () {
-            this._allActions.forEach(function (action) { return action.updateVisibility(); });
-            this._classifyActions();
+        FsFilterOverlayService.prototype.open = function () {
+            var _this = this;
+            this._overlayRef = this._createOverlay();
+            this._overlayRef.backdropClick()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._overlayRef.detach();
+            });
+            this._overlayRef.detachments()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.detach$.next();
+            });
+            this._overlayRef.attachments()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.attach$.next();
+            });
+            this.addFilterClass();
+            return this.openPortalPreview();
         };
-        ActionsController.prototype.updateDisabledState = function () {
-            this.actions.forEach(function (action) { return action.updateDisabledState(); });
+        FsFilterOverlayService.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
         };
-        ActionsController.prototype._setKebabActions = function (actions) {
-            this._menuActions$.next(actions);
+        FsFilterOverlayService.prototype._createOverlay = function () {
+            var overlayConfig = new i1$7.OverlayConfig({
+                hasBackdrop: true,
+                backdropClass: 'fs-filter-backdrop'
+            });
+            return this._overlay.create(overlayConfig);
         };
-        ActionsController.prototype._setActions = function (actions) {
-            this._actions$.next(actions);
+        FsFilterOverlayService.prototype.openPortalPreview = function () {
+            var data = { done: this._doneFn, clear: this._clearFn };
+            var injector = this._createInjector(this._injector, data, this._overlayRef);
+            var containerPortal = new portal.ComponentPortal(FilterDrawerComponent, undefined, injector);
+            var containerRef = this._overlayRef.attach(containerPortal);
+            return containerRef.instance;
         };
-        ActionsController.prototype._classifyActions = function () {
-            var kebabActions = [];
-            var actions = [];
-            var mobileMode = this.mobileMode;
-            this._allActions
-                .filter(function (action) {
-                return action.visible;
-            })
-                .forEach(function (action) {
-                if (action.menu !== false && (action.menu || mobileMode)) {
-                    kebabActions.push(action);
-                }
-                else {
-                    actions.push(action);
-                }
-            });
-            this._setKebabActions(kebabActions);
-            this._setActions(actions);
+        FsFilterOverlayService.prototype._createInjector = function (parentInjector, data, overlayRef) {
+            var injectionTokens = new WeakMap([
+                [FILTER_DRAWER_DATA, data],
+                [FILTER_DRAWER_OVERLAY, overlayRef],
+            ]);
+            return new portal.PortalInjector(parentInjector, injectionTokens);
         };
-        ActionsController.prototype._classifyAction = function (action) {
-            if (action.menu) {
-                this._setKebabActions(__spreadArray(__spreadArray([], __read(this.menuActions)), [action]));
+        FsFilterOverlayService.prototype.removeFilterClass = function () {
+            this._filterMeta.openedFilters--;
+            if (this._filterMeta.openedFilters === 0) {
+                window.document.body.classList.remove('fs-filter-open');
             }
-            else {
-                this._setActions(__spreadArray(__spreadArray([], __read(this.actions)), [action]));
+        };
+        FsFilterOverlayService.prototype.addFilterClass = function () {
+            this._filterMeta.openedFilters++;
+            if (this._filterMeta.openedFilters === 1) {
+                window.document.body.classList.add('fs-filter-open');
             }
         };
-        ActionsController.prototype._listenMobileMedia = function () {
+        FsFilterOverlayService.prototype._openWhenChipClicked = function () {
             var _this = this;
-            this._breakpointObserver.observe(this._mobileMedia)
-                .pipe(operators.skip(1), operators.takeUntil(this._destroy$))
+            this._focusController.focusOn$
+                .pipe(operators.filter(function (v) { return !!v; }), operators.takeUntil(this._destroy$))
                 .subscribe(function () {
-                _this._classifyActions();
+                if (!_this.isOpened) {
+                    _this.open();
+                }
             });
         };
-        return ActionsController;
+        return FsFilterOverlayService;
     }());
-    ActionsController.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsController, deps: [{ token: i1__namespace$7.BreakpointObserver }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ActionsController.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsController });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ActionsController, decorators: [{
+    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$7.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: i1__namespace$7.BreakpointObserver }]; } });
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_FILTER_META]
+                        }] }, { type: i1__namespace$7.Overlay }, { type: FocusControllerService }];
+        } });
+
+    var FilterStatusBarDirective = /** @class */ (function () {
+        function FilterStatusBarDirective() {
+        }
+        return FilterStatusBarDirective;
+    }());
+    FilterStatusBarDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FilterStatusBarDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]", ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterStatusBarDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[fsFilterStatusBar]',
+                    }]
+            }] });
 
     var FsFilterActionButtonComponent = /** @class */ (function () {
         function FsFilterActionButtonComponent() {
+            this.ActionType = exports.ActionType;
         }
         return FsFilterActionButtonComponent;
     }());
     FsFilterActionButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterActionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: { action: "action" }, host: { classAttribute: "action-button" }, ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"'basic'\"\n      mat-button\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button \n      type=\"button\"\n      *ngSwitchDefault\n      mat-raised-button\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"'icon'\"\n      mat-icon-button\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"'fab'\"\n      mat-fab\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"'mini-fab'\"\n      mat-mini-fab\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #withIcon>\n      <mat-icon *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n      {{action.label}}\n      <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n    </ng-template>\n  </ng-template>\n</ng-container>\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"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterActionButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: { action: "action" }, host: { classAttribute: "action-button" }, ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"action.type\">\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ActionType.Icon\"\n      mat-icon-button\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"ActionType.Fab\"\n      mat-fab\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"ActionType.MiniFab\"\n      mat-mini-fab\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [ngClass]=\"action.classArray\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <button \n      type=\"button\"\n      *ngSwitchDefault\n      mat-button\n      [ngClass]=\"{        \n        'mat-raised-button': action.type === 'raised',\n        'mat-flat-button': action.type === 'flat',\n        'mat-stroked-button': action.type === 'stroked',\n        'mat-button': action.type === 'basic',\n        'mat-icon-button': action.type === 'icon'\n      }\"\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [class]=\"action.classArray.join(' ')\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #withIcon>\n      <mat-icon *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n      {{action.label}}\n      <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n    </ng-template>\n  </ng-template>\n</ng-container>\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"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: FsFilterActionButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4591,7 +4616,7 @@
         return FsFilterActionsComponent;
     }());
     FsFilterActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0__namespace, template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template\n                    fs-menu-item\n                    [link]=\"subAction.routerLink?.link\"\n                    [queryParams]=\"subAction.routerLink?.queryParams\"\n                    [hidden]=\"!(subAction.visible$ | async)\"\n                    (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template\n                fs-menu-item\n                [link]=\"childAction.routerLink?.link\"\n                [queryParams]=\"childAction.routerLink?.queryParams\"\n                [hidden]=\"!(childAction.visible$ | async)\"\n                (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"action.accept || '*'\"\n          [multiple]=\"action.multiple\"\n          [minWidth]=\"action.minWidth\"\n          [minHeight]=\"action.minHeight\"\n          [imageWidth]=\"action.maxWidth\"\n          [imageHeight]=\"action.maxHeight\"\n          (select)=\"action.fileSelected($event)\"\n          (error)=\"action.fileError($event)\"\n          (clicked)=\"action.click($event)\"\n          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$3.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7__namespace$1.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0__namespace, template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template\n                    fs-menu-item\n                    [link]=\"subAction.routerLink?.link\"\n                    [queryParams]=\"subAction.routerLink?.queryParams\"\n                    [hidden]=\"!(subAction.visible$ | async)\"\n                    (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template\n                fs-menu-item\n                [link]=\"childAction.routerLink?.link\"\n                [queryParams]=\"childAction.routerLink?.queryParams\"\n                [hidden]=\"!(childAction.visible$ | async)\"\n                (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n          class=\"action-button\"\n          [accept]=\"action.accept || '*'\"\n          [multiple]=\"action.multiple\"\n          [minWidth]=\"action.minWidth\"\n          [minHeight]=\"action.minHeight\"\n          [imageWidth]=\"action.maxWidth\"\n          [imageHeight]=\"action.maxHeight\"\n          (select)=\"action.fileSelected($event)\"\n          (error)=\"action.fileError($event)\"\n          (clicked)=\"action.click($event)\"\n          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$3.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7__namespace$1.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], 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: FsFilterActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5281,7 +5306,7 @@
             }
             config = Object.assign(Object.assign({}, (this._defaultConfig || {})), config);
             this._config = new FsFilterConfig(config);
-            this._actions.initActions(this._config.actions);
+            this._actions.setConfig(this._config);
             this._filterItems.setConfig(this._config);
             this._externalParams.setConfig(this._config);
             this._syncSearchInputWithKeyword();
@@ -5419,7 +5444,7 @@
             FsFilterItemsStore,
             SavedFiltersController,
             ActionsController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\n        <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n          <mat-form-field floatLabel=\"never\">\n              <span matPrefix>\n                <mat-icon matPrefix>search</mat-icon>\n              </span>\n\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              [placeholder]=\"searchPlaceholder\"\n              name=\"filter-input\"\n              (click)=\"filterInputEvent($event)\"\n              class=\"filter-input\">\n\n            <div matSuffix *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <a\n                mat-icon-button                \n                (click)=\"clearSearchText($event)\"\n                class=\"clear\">\n                <mat-icon>clear</mat-icon>\n              </a>\n            </div>\n            <div matSuffix>\n              <a \n                  mat-icon-button\n                  (click)=\"reload($event)\"\n                  class=\"reload\"\n                  *ngIf=\"config.reload\">\n                <mat-icon>refresh</mat-icon>\n              </a>\n            </div>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\n    <div class=\"filter-actions\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n        <button\n            mat-button\n            class=\"filters-button\"\n            [ngClass]=\"{\n              'mat-raised-button': config.button.style == 'raised',\n              'mat-button': config.button.style == 'basic',\n              'mat-icon-button': config.button.style == 'icon'\n            }\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            type=\"button\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </button>\n      </ng-container>\n  \n      <fs-filter-actions\n        *ngIf=\"actionsVisible$ | async\"\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-container .filter-keyword .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix .mat-icon{font-size:22px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex;margin-top:3px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon{font-size:22px}.fs-filter .filter-container .filter-keyword .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i1__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\n        <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n          <mat-form-field [floatLabel]=\"'never'\" class=\"form-field-padless\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              name=\"filter-input\"\n              [placeholder]=\"searchPlaceholder\"\n              (click)=\"filterInputEvent($event)\"\n              class=\"filter-input\">\n\n            <div matSuffix *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <a\n                mat-icon-button                \n                (click)=\"clearSearchText($event)\"\n                class=\"clear\">\n                <mat-icon>clear</mat-icon>\n              </a>\n            </div>\n            <div matSuffix>\n              <a \n                  mat-icon-button\n                  (click)=\"reload($event)\"\n                  class=\"reload\"\n                  *ngIf=\"config.reload\">\n                <mat-icon>refresh</mat-icon>\n              </a>\n            </div>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\n    <div class=\"filter-actions\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n        <button\n            mat-button\n            class=\"filters-button\"\n            [ngClass]=\"{\n              'mat-raised-button': config.button.style === 'raised',\n              'mat-flat-button': config.button.style === 'flat',\n              'mat-stroked-button': config.button.style === 'stroked',\n              'mat-button': config.button.style === 'basic',\n              'mat-icon-button': config.button.style === 'icon'\n            }\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            type=\"button\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </button>\n      </ng-container>\n  \n      <fs-filter-actions\n        *ngIf=\"actionsVisible$ | async\"\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-container .filter-keyword .mat-form-field{height:100%;width:100%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .mat-form-field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:0}.fs-filter .filter-container .filter-keyword .mat-form-field.mat-form-field-appearance-legacy .mat-icon{font-size:22px;color:#5b5b5b}.fs-filter .filter-container .filter-keyword .mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix,.fs-filter .filter-container .filter-keyword .mat-form-field.mat-form-field-appearance-outline .mat-form-field-prefix{top:0}.fs-filter .filter-container .filter-keyword .mat-form-field-wrapper{height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button .mat-icon{display:inline}.fs-filter .filter-actions{display:flex;align-items:center}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i1__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5620,7 +5645,7 @@
             common.FsCommonModule,
             i1.FsStoreModule,
             i3.FsDatePickerModule,
-            i1$5.FsLabelModule,
+            i1$6.FsLabelModule,
             i4$1.FsAutocompleteModule,
             i5.FsAutocompleteChipsModule,
             scroll.FsScrollModule,
@@ -5651,7 +5676,7 @@
                 common.FsCommonModule,
                 i1.FsStoreModule,
                 i3.FsDatePickerModule,
-                i1$5.FsLabelModule,
+                i1$6.FsLabelModule,
                 i4$1.FsAutocompleteModule,
                 i5.FsAutocompleteChipsModule,
                 scroll.FsScrollModule,
@@ -5682,7 +5707,7 @@
                             common.FsCommonModule,
                             i1.FsStoreModule,
                             i3.FsDatePickerModule,
-                            i1$5.FsLabelModule,
+                            i1$6.FsLabelModule,
                             i4$1.FsAutocompleteModule,
                             i5.FsAutocompleteChipsModule,
                             scroll.FsScrollModule,