@firestitch/filter 12.0.6 → 12.1.2

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('date-fns'), require('lodash-es'), require('tsmodels'), require('@firestitch/date'), 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('@angular/flex-layout'), require('@firestitch/datepicker'), require('@firestitch/chip'), require('@firestitch/label'), require('@firestitch/scroll'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/mask'), require('@firestitch/menu'), require('@firestitch/skeleton'), require('@angular/cdk/overlay'), require('@angular/flex-layout/extended'), require('@angular/flex-layout/flex'), require('@angular/cdk/layout'), require('@firestitch/file')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'date-fns', 'lodash-es', 'tsmodels', '@firestitch/date', '@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', '@angular/flex-layout', '@firestitch/datepicker', '@firestitch/chip', '@firestitch/label', '@firestitch/scroll', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/mask', '@firestitch/menu', '@firestitch/skeleton', '@angular/cdk/overlay', '@angular/flex-layout/extended', '@angular/flex-layout/flex', '@angular/cdk/layout', '@firestitch/file'], 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.dateFns, global.lodashEs, global.tsmodels, global.date, 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.ng.flexLayout, global.i3$2, global.i2$1, global.i1$5, global.scroll, global.i4$1, global.i5$1, global.i6$2, global.i3$3, global.i6$3, global.ng.cdk.overlay, global.ng.flexLayout.extended, global.ng.flexLayout.flex, global.ng.cdk.layout, global.i4$3));
-})(this, (function (exports, i0, rxjs, operators, common, dateFns, lodashEs, tsmodels, date, i1, i1$1, i3, i1$2, i6, i1$3, i2, i3$1, i1$4, i5, i7, i4, autocomplete, i4$2, chips, i2$3, portal, flexLayout, i3$2, i2$1, i1$5, scroll, i4$1, i5$1, i6$2, i3$3, i6$3, i1$6, i6$1, i2$2, i1$7, i4$3) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('date-fns'), require('lodash-es'), require('tsmodels'), require('@firestitch/date'), 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('@angular/flex-layout'), require('@firestitch/chip'), require('@firestitch/label'), require('@firestitch/scroll'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/mask'), require('@firestitch/menu'), require('@firestitch/skeleton'), require('@firestitch/file'), require('@angular/cdk/overlay'), require('@angular/flex-layout/extended'), require('@angular/flex-layout/flex'), require('@angular/cdk/layout')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'date-fns', 'lodash-es', 'tsmodels', '@firestitch/date', '@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', '@angular/flex-layout', '@firestitch/chip', '@firestitch/label', '@firestitch/scroll', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/mask', '@firestitch/menu', '@firestitch/skeleton', '@firestitch/file', '@angular/cdk/overlay', '@angular/flex-layout/extended', '@angular/flex-layout/flex', '@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.dateFns, global.lodashEs, global.tsmodels, global.date, 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.ng.flexLayout, global.i2$1, global.i1$5, global.scroll, global.i4$1, global.i5, global.i6$2, global.i3$4, global.i6$3, global.i4$3, global.ng.cdk.overlay, global.ng.flexLayout.extended, global.ng.flexLayout.flex, global.ng.cdk.layout));
+})(this, (function (exports, i0, rxjs, operators, common, dateFns, lodashEs, tsmodels, date, 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$3, portal, flexLayout, i2$1, i1$5, scroll, i4$1, i5, i6$2, i3$4, i6$3, i4$3, i1$6, i6$1, i2$2, i1$7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,33 +23,33 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$2);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$3);
     var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
-    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
-    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
+    var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
     var i6__namespace$3 = /*#__PURE__*/_interopNamespace(i6$3);
+    var i4__namespace$3 = /*#__PURE__*/_interopNamespace(i4$3);
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$7);
-    var i4__namespace$3 = /*#__PURE__*/_interopNamespace(i4$3);
 
     var QUERY_PARAM_DELIMITER = ':';
 
@@ -387,6 +387,7 @@
         ItemType["Date"] = "date";
         ItemType["DateTime"] = "datetime";
         ItemType["DateRange"] = "daterange";
+        ItemType["Week"] = "week";
         ItemType["DateTimeRange"] = "datetimerange";
         ItemType["AutoComplete"] = "autocomplete";
         ItemType["AutoCompleteChips"] = "autocompletechips";
@@ -975,8 +976,8 @@
         return SimpleSelectItem;
     }(BaseSelectItem));
 
-    var SORT_BY_FIELD = 'system_sort_by';
-    var SORT_DIRECTION_FIELD = 'system_sort_direction';
+    var SORT_BY_FIELD = 'sortName';
+    var SORT_DIRECTION_FIELD = 'sortDirection';
     var FsFilterConfig = /** @class */ (function (_super) {
         __extends(FsFilterConfig, _super);
         function FsFilterConfig(data) {
@@ -1895,6 +1896,123 @@
         return TextItem;
     }(BaseItem));
 
+    function parseDate(value) {
+        if (value && (!dateFns.isDate(value) || !dateFns.isValid(value))) {
+            return dateFns.parseISO(value);
+        }
+        return value;
+    }
+
+    var WeekItem = /** @class */ (function (_super) {
+        __extends(WeekItem, _super);
+        function WeekItem() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        WeekItem.create = function (config) {
+            return new WeekItem(config, null);
+        };
+        Object.defineProperty(WeekItem.prototype, "value", {
+            get: function () {
+                var value = lodashEs.clone(this.model);
+                if (!lodashEs.isObject(this.model) ||
+                    (common.isEmpty(this.model.from, { zero: true }) && common.isEmpty(this.model.to, { zero: true }))) {
+                    value = null;
+                }
+                if (common.isEmpty(value, { zero: true })) {
+                    return null;
+                }
+                var from = value.from;
+                var to = value.to;
+                var period = value.period;
+                value = {};
+                if (from) {
+                    if (lodashEs.isString(from)) {
+                        from = dateFns.parseISO(from);
+                    }
+                    if (dateFns.isValid(from) && dateFns.isDate(from)) {
+                        value.from = from;
+                    }
+                }
+                if (to) {
+                    if (lodashEs.isString(to)) {
+                        to = dateFns.parseISO(to);
+                    }
+                    if (dateFns.isValid(to) && dateFns.isDate(to)) {
+                        value.to = to;
+                    }
+                }
+                if (period) {
+                    if (lodashEs.isString(period)) {
+                        value.period = parseInt(period, 10);
+                    }
+                    else {
+                        value.period = period;
+                    }
+                }
+                return value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(WeekItem.prototype, "queryObject", {
+            get: function () {
+                var _a;
+                var value = this.value;
+                var name = this.name;
+                var paramFromName = getRangeName('camel', name, 'from');
+                var paramToName = getRangeName('camel', name, 'to');
+                var paramPeriodName = name + "Period";
+                return _a = {},
+                    _a[paramFromName] = (value === null || value === void 0 ? void 0 : value.from) || null,
+                    _a[paramToName] = (value === null || value === void 0 ? void 0 : value.to) || null,
+                    _a[paramPeriodName] = (value === null || value === void 0 ? void 0 : value.period) || null,
+                    _a;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(WeekItem.prototype, "persistanceObject", {
+            get: function () {
+                var _a;
+                var query = this.queryObject;
+                var name = this.name;
+                var paramFromName = getRangeName('camel', name, 'from');
+                var paramFromValue = query[paramFromName] && date.simpleFormat(query[paramFromName]) || query[paramFromName];
+                var paramToName = getRangeName('camel', name, 'to');
+                var paramToValue = query[paramToName] && date.simpleFormat(query[paramToName]) || query[paramToName];
+                var paramPeriodName = name + "Period";
+                return _a = {},
+                    _a[paramFromName] = paramFromValue,
+                    _a[paramToName] = paramToValue,
+                    _a[paramPeriodName] = query[paramPeriodName],
+                    _a;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        WeekItem.prototype.getChipsContent = function (type) {
+            if (type === void 0) { type = null; }
+            return i3.formatPeriodObject(this.value);
+        };
+        WeekItem.prototype._validateModel = function () { };
+        WeekItem.prototype._setModel = function (value) {
+            value.from = parseDate(value.from);
+            value.to = parseDate(value.to);
+            value.period = parseInt(value.period, 10) || null;
+            _super.prototype._setModel.call(this, value);
+        };
+        WeekItem.prototype._parseConfig = function (item) {
+            _super.prototype._parseConfig.call(this, item);
+            this.seedDate = item.seedDate;
+        };
+        WeekItem.prototype._init = function () { };
+        WeekItem.prototype._clearValue = function (defaultValue) {
+            if (defaultValue === void 0) { defaultValue = undefined; }
+            this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : {};
+        };
+        return WeekItem;
+    }(BaseItem));
+
     function createFilterItem(item, config) {
         switch (item.type) {
             case exports.ItemType.Select: {
@@ -1915,6 +2033,9 @@
             case exports.ItemType.Date: {
                 return DateItem.create(item);
             }
+            case exports.ItemType.Week: {
+                return WeekItem.create(item);
+            }
             case exports.ItemType.DateTime: {
                 return DateTimeItem.create(item);
             }
@@ -2123,7 +2244,7 @@
                 .forEach(function (item) {
                 item.initValues(p[item.name]);
             });
-            this._createSortingItems(p);
+            this._initSortingItems(p);
             this.loadAsyncDefaults();
             this._subscribeToItemsChanges();
         };
@@ -2196,6 +2317,7 @@
                 _this._itemsByName.set(item.name, filterItem);
                 return filterItem;
             });
+            this._createSortingItems();
         };
         FsFilterItemsStore.prototype._subscribeToItemsChanges = function () {
             var _this = this;
@@ -2230,7 +2352,13 @@
                 _this._setKeywordItem();
             });
         };
-        FsFilterItemsStore.prototype._createSortingItems = function (p) {
+        FsFilterItemsStore.prototype._initSortingItems = function (p) {
+            if (this.sortByItem && this.sortDirectionItem) {
+                this.sortByItem.initValues(p[this.sortByItem.name]);
+                this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
+            }
+        };
+        FsFilterItemsStore.prototype._createSortingItems = function () {
             var _a;
             if (((_a = this._config.sortValues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                 var sortByItem = {
@@ -2243,7 +2371,6 @@
                     sortByItem.default = this._config.sort.value;
                 }
                 this.sortByItem = new SimpleSelectItem(sortByItem, null);
-                this.sortByItem.initValues(p[this.sortByItem.name]);
                 var sortDirectionItem = {
                     name: SORT_DIRECTION_FIELD,
                     type: exports.ItemType.Select,
@@ -2257,7 +2384,6 @@
                     sortDirectionItem.default = this._config.sort.direction;
                 }
                 this.sortDirectionItem = new SimpleSelectItem(sortDirectionItem, null);
-                this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
             }
         };
         FsFilterItemsStore.prototype._setKeywordItem = function () {
@@ -2293,6 +2419,12 @@
                 var to = params[getRangeName(item.case, item.name, 'to')];
                 return { from: from, to: to };
             }
+            case exports.ItemType.Week: {
+                var from = params[getRangeName('camel', item.name, 'from')];
+                var to = params[getRangeName('camel', item.name, 'to')];
+                var period = params[item.name + "Period"];
+                return { from: from, to: to, period: period };
+            }
             case exports.ItemType.Select: {
                 if (item.multiple && !!param) {
                     var values = param.split(',');
@@ -2385,6 +2517,11 @@
                 return name === getRangeName(filterItem.case, filterItem.name, 'from') ||
                     name === getRangeName(filterItem.case, filterItem.name, 'to');
             }
+            else if (filterItem instanceof WeekItem) {
+                return name === getRangeName('camel', filterItem.name, 'from')
+                    || name === getRangeName('camel', filterItem.name, 'to')
+                    || name === filterItem.name + "Period";
+            }
             return filterItem.name === name;
         });
     }
@@ -2417,7 +2554,10 @@
         PersistanceParamsController.prototype.restore = function () {
             _super.prototype.restore.call(this);
             if (this._value) {
-                this._value.data = restoreItems(this._value.data, this._itemsStore.items, this._paramsCase);
+                this._value.data = restoreItems(this._value.data, __spreadArray(__spreadArray([], __read(this._itemsStore.items)), [
+                    this._itemsStore.sortByItem,
+                    this._itemsStore.sortDirectionItem,
+                ]), this._paramsCase);
             }
         };
         return PersistanceParamsController;
@@ -2478,7 +2618,10 @@
          * Parse query and update filter values
          */
         QueryParamsController.prototype.fetchFromQueryParams = function () {
-            this._fetchedParams = restoreItems(this._route.snapshot.queryParams, this._itemsStore.items, this._paramsCase);
+            this._fetchedParams = restoreItems(this._route.snapshot.queryParams, __spreadArray(__spreadArray([], __read(this._itemsStore.items)), [
+                this._itemsStore.sortByItem,
+                this._itemsStore.sortDirectionItem,
+            ]), this._paramsCase);
         };
         return QueryParamsController;
     }());
@@ -2519,7 +2662,7 @@
         return FsFilterSavedFilterEditComponent;
     }());
     FsFilterSavedFilterEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterSavedFilterEditComponent, deps: [{ token: i1$2.MAT_DIALOG_DATA }, { token: i1__namespace$2.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterSavedFilterEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterSavedFilterEditComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <h1 mat-dialog-title>\n    Save Filter\n  </h1>\n  <div mat-dialog-content>\n    <mat-form-field>\n      <mat-label>Save as</mat-label>\n      <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n        <mat-option value=\"new\">New filter</mat-option>\n        <mat-optgroup label=\"Saved filters:\">\n          <ng-container *ngFor=\"let filter of savedFilters\">\n            <mat-option [value]=\"filter\">{{ filter.name }}</mat-option>\n          </ng-container>\n        </mat-optgroup>\n      </mat-select>\n    </mat-form-field>\n    <br>\n    <mat-form-field *ngIf=\"saveAsFilter === 'new'\">\n      <mat-label>Name</mat-label>\n      <input matInput name=\"filter-name\" [(ngModel)]=\"savedFilterName\" required>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button\n            type=\"submit\"\n            color=\"primary\">\n      {{ saveAsFilter === 'new' ? 'Create' : 'Save' }}\n    </button>\n\n    <button mat-button\n            type=\"button\"\n            [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </div>\n</form>\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: i3__namespace$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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: i4__namespace.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: i5__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: i5__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1__namespace$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i7__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1__namespace$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterSavedFilterEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterSavedFilterEditComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <h1 mat-dialog-title>\n    Save Filter\n  </h1>\n  <div mat-dialog-content>\n    <mat-form-field>\n      <mat-label>Save as</mat-label>\n      <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n        <mat-option value=\"new\">New filter</mat-option>\n        <mat-optgroup label=\"Saved filters:\">\n          <ng-container *ngFor=\"let filter of savedFilters\">\n            <mat-option [value]=\"filter\">{{ filter.name }}</mat-option>\n          </ng-container>\n        </mat-optgroup>\n      </mat-select>\n    </mat-form-field>\n    <br>\n    <mat-form-field *ngIf=\"saveAsFilter === 'new'\">\n      <mat-label>Name</mat-label>\n      <input matInput name=\"filter-name\" [(ngModel)]=\"savedFilterName\" required>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button\n            type=\"submit\"\n            color=\"primary\">\n      {{ saveAsFilter === 'new' ? 'Create' : 'Save' }}\n    </button>\n\n    <button mat-button\n            type=\"button\"\n            [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </div>\n</form>\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: i3__namespace$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { 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: 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: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { 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$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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1__namespace$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i7__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1__namespace$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterSavedFilterEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3117,7 +3260,7 @@
         };
         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$2.FsDatePickerComponent, optional: true, self: true }, { token: i3__namespace$2.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3__namespace$2.DateRangePickerFromComponent, optional: true, self: true }, { token: i3__namespace$2.DateRangePickerToComponent, optional: true, self: true }, { token: i4__namespace$1.FsAutocompleteComponent, optional: true, self: true }, { token: i5__namespace$1.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    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,
@@ -3129,19 +3272,19 @@
                             type: i0.Optional
                         }, {
                             type: i0.Self
-                        }] }, { type: i3__namespace$2.FsDatePickerComponent, decorators: [{
+                        }] }, { type: i3__namespace$3.FsDatePickerComponent, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
-                        }] }, { type: i3__namespace$2.FsDateScrollPickerComponent, decorators: [{
+                        }] }, { type: i3__namespace$3.FsDateScrollPickerComponent, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
-                        }] }, { type: i3__namespace$2.DateRangePickerFromComponent, decorators: [{
+                        }] }, { type: i3__namespace$3.DateRangePickerFromComponent, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
-                        }] }, { type: i3__namespace$2.DateRangePickerToComponent, decorators: [{
+                        }] }, { type: i3__namespace$3.DateRangePickerToComponent, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
@@ -3149,7 +3292,7 @@
                             type: i0.Optional
                         }, {
                             type: i0.Self
-                        }] }, { type: i5__namespace$1.FsAutocompleteChipsComponent, decorators: [{
+                        }] }, { type: i5__namespace.FsAutocompleteChipsComponent, decorators: [{
                             type: i0.Optional
                         }, {
                             type: i0.Self
@@ -3168,7 +3311,7 @@
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
-            _this.textControl = new i5.FormControl();
+            _this.textControl = new i4.FormControl();
             _this.destroy$ = new rxjs.Subject();
             return _this;
         }
@@ -3199,7 +3342,7 @@
         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: i4__namespace.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: i5__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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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: [{
@@ -3268,7 +3411,7 @@
         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: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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: [{
@@ -3304,7 +3447,7 @@
         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: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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: [{
@@ -3330,7 +3473,7 @@
         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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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"] }, { type: i6__namespace$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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"] }, { type: i6__namespace$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], 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: [{
@@ -3400,7 +3543,7 @@
         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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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: [{
@@ -3437,7 +3580,7 @@
         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: "<span fxLayout=\"row\">\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           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #from\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n  <div class=\"spacer\"></div>\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           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #to\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</span>\n", styles: [".spacer{width:15px}mat-form-field{min-width:initial;display:flex;width:auto}mat-form-field ::ng-deep .mat-form-field-infix{width:auto}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { 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: i4__namespace.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: i5__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: i6__namespace$2.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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: "<span fxLayout=\"row\">\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           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #from\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n  <div class=\"spacer\"></div>\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           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #to\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</span>\n", styles: [".spacer{width:15px}mat-form-field{min-width:initial;display:flex;width:auto}mat-form-field ::ng-deep .mat-form-field-infix{width:auto}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2__namespace$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { 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: i6__namespace$2.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { 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: [{
@@ -3471,7 +3614,7 @@
         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]=\"item.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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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]=\"item.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: [{
@@ -3519,7 +3662,7 @@
         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]=\"item.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  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$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "invalidTextMessage", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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]=\"item.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  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", "invalidTextMessage", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "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: [{
@@ -3556,7 +3699,7 @@
         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$2.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "minutes", "format"], outputs: ["change"] }, { type: i3__namespace$2.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "showMonth", "showYear", "showDay", "maxDate"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i4__namespace.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: i5__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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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 });
+    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: [{
@@ -3586,7 +3729,7 @@
         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$2.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3__namespace$2.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i4__namespace.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: i5__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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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: [{
@@ -3596,6 +3739,28 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
+    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 }]; } });
+
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
         function CheckboxComponent(_kvDiffers, _cd) {
@@ -3607,7 +3772,7 @@
         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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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: [{
@@ -3639,7 +3804,7 @@
         return FilterItemComponent;
     }());
     FilterItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"item\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"item\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"item\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"item\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"item\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"item\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"item\">\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: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"item\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"item\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"item\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"item\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"item\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"item\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"item\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"item\">\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: [{
@@ -4295,7 +4460,7 @@
         return FsFilterActionKebabActionsComponent;
     }());
     FsFilterActionKebabActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionKebabActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterActionKebabActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0__namespace, template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template 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 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             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\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            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n", styles: [".menu-button{width:36px;height:36px;line-height:36px}\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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { 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"] }], directives: [{ type: i3__namespace$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { 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: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3__namespace$3.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterActionKebabActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0__namespace, template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template 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 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             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\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            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n", styles: [".menu-button{width:36px;height:36px;line-height:36px}\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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { 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"] }], directives: [{ type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { 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: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3__namespace$4.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], 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: FsFilterActionKebabActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4316,7 +4481,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\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></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      </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 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 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        <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 [kebabActions]=\"kebabActions\"></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$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2__namespace$3.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: i3__namespace$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], 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\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></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      </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 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 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        <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 [kebabActions]=\"kebabActions\"></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$3.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: 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]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], 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: [{
@@ -4505,7 +4670,7 @@
         return FsFilterChipsComponent;
     }());
     FsFilterChipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterChipsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterChipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0__namespace, template: "<fs-chips [(ngModel)]=\"chips\">\n  <ng-container *ngFor=\"let item of filters\">\n    <ng-container *ngIf=\"(item.value$ | async) !== null\">\n      <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n    </ng-container>\n  </ng-container>\n</fs-chips>\n", styles: [""], components: [{ type: i2__namespace$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }], directives: [{ type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__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"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterChipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0__namespace, template: "<fs-chips [(ngModel)]=\"chips\">\n  <ng-container *ngFor=\"let item of filters\">\n    <ng-container *ngIf=\"(item.value$ | async) !== null\">\n      <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n    </ng-container>\n  </ng-container>\n</fs-chips>\n", styles: [""], components: [{ type: i2__namespace$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }], 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"] }, { 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: FsFilterChipsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4535,7 +4700,7 @@
             this.showFilterMenu = false;
             this.windowDesktop = false;
             this.fsFilterClass = true;
-            this.searchText = new i5.FormControl();
+            this.searchText = new i4.FormControl();
             this.searchPlaceholder = 'Search';
             this._config = null;
             this._filtersBtnVisible$ = new rxjs.BehaviorSubject(true);
@@ -5122,7 +5287,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: i4.MatInput }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"hasKeyword; else noKeywordFilter\">\n  <div class=\"filter-search-container\">\n    <div class=\"filter-input-field\">\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          <a matSuffix\n             *ngIf=\"searchText.value && showFilterInput && config.clear\"\n             (click)=\"clearSearchText($event)\"\n             href=\"javascript:void(0)\"\n             class=\"clear\">\n            <mat-icon>clear</mat-icon>\n          </a>\n\n          <a matSuffix\n             (click)=\"reload($event)\"\n             class=\"reload\"\n             *ngIf=\"config.reload\">\n            <mat-icon>refresh</mat-icon>\n          </a>\n        </mat-form-field>\n      </form>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n  <div class=\"status-actions\" *ngIf=\"keywordVisible$ | async\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noKeywordFilter>\n  <div class=\"filter-searchless-container\">\n    <div class=\"status-actions\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n</ng-template>\n\n\n<ng-template #filterActions>\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</ng-template>\n\n<ng-template #filterChips>\n  <fs-filter-chips\n    *ngIf=\"config.chips && hasFilterChips$ | async\"\n    class=\"filter-chips\"\n    [filters]=\"items\">\n  </fs-filter-chips>\n</ng-template>\n\n<ng-template #statusBarContainer>\n  <div class=\"status-bar\" *ngIf=\"statusBar\">\n    <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n  </div>\n</ng-template>\n", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .status-bar{overflow:hidden;text-overflow:ellipsis;line-height:17px;margin:4px 0}.fs-filter .filter-chips{display:block}.fs-filter .filter-searchless-container{display:flex}.fs-filter .filter-searchless-container .status-actions{flex-grow:1}.fs-filter .filter-searchless-container .status-actions>*:first-child{margin-top:0}.fs-filter fs-filter-chips{margin:5px 0}.fs-filter .filter-search-container{flex-direction:row;box-sizing:border-box;display:flex;flex:1 1 0;position:relative}.fs-filter .filter-search-container .search{top:8px;position:absolute;margin-left:1px;left:0}.fs-filter .filter-search-container .search mat-icon{transform:scale(.9)}.fs-filter .filter-search-container form{width:100%;height:100%}.fs-filter .filter-search-container .filter-input-field{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-search-container .filter-input-field .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix{align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a{display:flex;cursor:pointer;color:initial}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a:hover{color:inherit}.fs-filter .filter-search-container .filter-input-field .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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__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: i4__namespace.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: i5__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: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], 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 *ngIf=\"hasKeyword; else noKeywordFilter\">\n  <div class=\"filter-search-container\">\n    <div class=\"filter-input-field\">\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          <a matSuffix\n             *ngIf=\"searchText.value && showFilterInput && config.clear\"\n             (click)=\"clearSearchText($event)\"\n             href=\"javascript:void(0)\"\n             class=\"clear\">\n            <mat-icon>clear</mat-icon>\n          </a>\n\n          <a matSuffix\n             (click)=\"reload($event)\"\n             class=\"reload\"\n             *ngIf=\"config.reload\">\n            <mat-icon>refresh</mat-icon>\n          </a>\n        </mat-form-field>\n      </form>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n  <div class=\"status-actions\" *ngIf=\"keywordVisible$ | async\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noKeywordFilter>\n  <div class=\"filter-searchless-container\">\n    <div class=\"status-actions\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n</ng-template>\n\n\n<ng-template #filterActions>\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</ng-template>\n\n<ng-template #filterChips>\n  <fs-filter-chips\n    *ngIf=\"config.chips && hasFilterChips$ | async\"\n    class=\"filter-chips\"\n    [filters]=\"items\">\n  </fs-filter-chips>\n</ng-template>\n\n<ng-template #statusBarContainer>\n  <div class=\"status-bar\" *ngIf=\"statusBar\">\n    <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n  </div>\n</ng-template>\n", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .status-bar{overflow:hidden;text-overflow:ellipsis;line-height:17px;margin:4px 0}.fs-filter .filter-chips{display:block}.fs-filter .filter-searchless-container{display:flex}.fs-filter .filter-searchless-container .status-actions{flex-grow:1}.fs-filter .filter-searchless-container .status-actions>*:first-child{margin-top:0}.fs-filter fs-filter-chips{margin:5px 0}.fs-filter .filter-search-container{flex-direction:row;box-sizing:border-box;display:flex;flex:1 1 0;position:relative}.fs-filter .filter-search-container .search{top:8px;position:absolute;margin-left:1px;left:0}.fs-filter .filter-search-container .search mat-icon{transform:scale(.9)}.fs-filter .filter-search-container form{width:100%;height:100%}.fs-filter .filter-search-container .filter-input-field{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-search-container .filter-input-field .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix{align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a{display:flex;cursor:pointer;color:initial}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a:hover{color:inherit}.fs-filter .filter-search-container .filter-input-field .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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], 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: [{
@@ -5173,7 +5338,7 @@
                     args: ['searchTextInput']
                 }], searchTextMatInput: [{
                     type: i0.ViewChild,
-                    args: ['searchTextInput', { read: i4.MatInput }]
+                    args: ['searchTextInput', { read: i3$3.MatInput }]
                 }], showFilterMenu: [{
                     type: i0.HostBinding,
                     args: ['class.filters-open']
@@ -5240,7 +5405,7 @@
         return FsSavedFiltersMenuComponent;
     }());
     FsSavedFiltersMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsSavedFiltersMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { select: "select", clear: "clear", manage: "manage" }, ngImport: i0__namespace, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3__namespace$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsSavedFiltersMenuComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { select: "select", clear: "clear", manage: "manage" }, ngImport: i0__namespace, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ 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]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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: FsSavedFiltersMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5284,6 +5449,7 @@
             SelectMultipleComponent,
             ChipsComponent,
             TextComponent,
+            WeekComponent,
             RangeComponent,
             AutocompleteComponent,
             AutocompletechipsComponent,
@@ -5303,12 +5469,12 @@
             FilterStatusBarDirective,
             FocusToItemDirective,
             // Pipes
-            FsFilterIsolateValues], imports: [i3.CommonModule,
+            FsFilterIsolateValues], imports: [i3$1.CommonModule,
             i1$1.RouterModule,
-            i5.FormsModule,
-            i5.ReactiveFormsModule,
+            i4.FormsModule,
+            i4.ReactiveFormsModule,
             i2$3.MatIconModule,
-            i4.MatInputModule,
+            i3$3.MatInputModule,
             i2.MatSelectModule,
             chips.MatChipsModule,
             i4$2.MatCheckboxModule,
@@ -5319,14 +5485,14 @@
             i2$1.FsChipModule,
             common.FsCommonModule,
             i1.FsStoreModule,
-            i3$2.FsDatePickerModule,
+            i3.FsDatePickerModule,
             i1$5.FsLabelModule,
             i4$1.FsAutocompleteModule,
-            i5$1.FsAutocompleteChipsModule,
+            i5.FsAutocompleteChipsModule,
             scroll.FsScrollModule,
             portal.PortalModule,
             i6$2.FsMaskModule,
-            i3$3.FsMenuModule,
+            i3$4.FsMenuModule,
             i6$3.FsSkeletonModule,
             i7.FsFormModule,
             i4$3.FsFileModule], exports: [FilterComponent,
@@ -5335,12 +5501,12 @@
     FsFilterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterModule, providers: [
             i1.FsStore,
         ], imports: [[
-                i3.CommonModule,
+                i3$1.CommonModule,
                 i1$1.RouterModule,
-                i5.FormsModule,
-                i5.ReactiveFormsModule,
+                i4.FormsModule,
+                i4.ReactiveFormsModule,
                 i2$3.MatIconModule,
-                i4.MatInputModule,
+                i3$3.MatInputModule,
                 i2.MatSelectModule,
                 chips.MatChipsModule,
                 i4$2.MatCheckboxModule,
@@ -5351,14 +5517,14 @@
                 i2$1.FsChipModule,
                 common.FsCommonModule,
                 i1.FsStoreModule,
-                i3$2.FsDatePickerModule,
+                i3.FsDatePickerModule,
                 i1$5.FsLabelModule,
                 i4$1.FsAutocompleteModule,
-                i5$1.FsAutocompleteChipsModule,
+                i5.FsAutocompleteChipsModule,
                 scroll.FsScrollModule,
                 portal.PortalModule,
                 i6$2.FsMaskModule,
-                i3$3.FsMenuModule,
+                i3$4.FsMenuModule,
                 i6$3.FsSkeletonModule,
                 i7.FsFormModule,
                 i4$3.FsFileModule,
@@ -5367,12 +5533,12 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i3.CommonModule,
+                            i3$1.CommonModule,
                             i1$1.RouterModule,
-                            i5.FormsModule,
-                            i5.ReactiveFormsModule,
+                            i4.FormsModule,
+                            i4.ReactiveFormsModule,
                             i2$3.MatIconModule,
-                            i4.MatInputModule,
+                            i3$3.MatInputModule,
                             i2.MatSelectModule,
                             chips.MatChipsModule,
                             i4$2.MatCheckboxModule,
@@ -5383,14 +5549,14 @@
                             i2$1.FsChipModule,
                             common.FsCommonModule,
                             i1.FsStoreModule,
-                            i3$2.FsDatePickerModule,
+                            i3.FsDatePickerModule,
                             i1$5.FsLabelModule,
                             i4$1.FsAutocompleteModule,
-                            i5$1.FsAutocompleteChipsModule,
+                            i5.FsAutocompleteChipsModule,
                             scroll.FsScrollModule,
                             portal.PortalModule,
                             i6$2.FsMaskModule,
-                            i3$3.FsMenuModule,
+                            i3$4.FsMenuModule,
                             i6$3.FsSkeletonModule,
                             i7.FsFormModule,
                             i4$3.FsFileModule,
@@ -5406,6 +5572,7 @@
                             SelectMultipleComponent,
                             ChipsComponent,
                             TextComponent,
+                            WeekComponent,
                             RangeComponent,
                             AutocompleteComponent,
                             AutocompletechipsComponent,