@firestitch/filter 12.11.7 → 12.12.1

package/fesm2015/firestitch-filter.js

@@ -2,12 +2,8 @@ import * as i0 from '@angular/core';
 import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, InjectionToken, Input, Directive, Self, Pipe, ViewChild, EventEmitter, Output, HostListener, TemplateRef, ViewEncapsulation, ContentChild, HostBinding, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, isObservable, forkJoin, of, fromEvent, merge, timer, combineLatest } from 'rxjs';
 import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, skip, delay, mapTo, startWith, map } from 'rxjs/operators';
+import { filter, isArrayEqual, list, isEmpty, getNormalizedPath, remove, FsCommonModule } from '@firestitch/common';
 import { isFunction, isObject, clone, isString, toString, pickBy } from 'lodash-es';
-import { filter, isArrayEqual, isEmpty, getNormalizedPath, list, remove, FsCommonModule } from '@firestitch/common';
-import { simpleFormat, format } from '@firestitch/date';
-import { parseISO, isValid, isDate } from 'date-fns';
-import * as i3$3 from '@firestitch/datepicker';
-import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -17,6 +13,10 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@firestitch/drawer';
 import * as i1 from '@firestitch/store';
 import { FsPersistanceStore, FsStoreModule, FsStore } from '@firestitch/store';
+import { simpleFormat, format } from '@firestitch/date';
+import { parseISO, isValid, isDate } from 'date-fns';
+import * as i3$3 from '@firestitch/datepicker';
+import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
 import * as i1$3 from '@angular/material/form-field';
 import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -57,6 +57,16 @@ import * as i1$5 from '@angular/cdk/layout';
 import * as i1$7 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 
+const QUERY_PARAM_DELIMITER = ':';
+
+function filterToQueryParam(value, name) {
+    return `${encodeURIComponent(value)}${QUERY_PARAM_DELIMITER}${encodeURIComponent(name)}`;
+}
+function filterFromQueryParam(param) {
+    const parts = param.split(QUERY_PARAM_DELIMITER);
+    return [decodeURIComponent(parts[0]), decodeURIComponent(parts[1])];
+}
+
 var ItemType;
 (function (ItemType) {
     ItemType["Text"] = "text";
@@ -74,23 +84,9 @@ var ItemType;
     ItemType["Keyword"] = "keyword";
 })(ItemType || (ItemType = {}));
 
-function findValue(values, value, children) {
-    for (let i = 0; i < values.length; i++) {
-        const val = values[i];
-        if (val[children]) {
-            return findValue(val[children], value, children);
-        }
-        if (val.value === value) {
-            return val;
-        }
-    }
-    return undefined;
-}
-
 class BaseItem {
     constructor(itemConfig, _additionalConfig) {
         this._additionalConfig = _additionalConfig;
-        // protected _initialized = false;
         this._pendingValues = false;
         this._pendingDefaultValue = false;
         this._loading$ = new BehaviorSubject(false);
@@ -296,8 +292,9 @@ class BaseItem {
             this.defaultValue = item.default;
         }
         this.change = item.change;
+        this.init = item.init || ((item) => { });
         this.hide = item.hide;
-        this.clearAllowed = (_a = item.clear) !== null && _a !== void 0 ? _a : true;
+        this.showClear = (_a = item.clear) !== null && _a !== void 0 ? _a : true;
         this.persistanceDisabled = (_b = item.disablePersist) !== null && _b !== void 0 ? _b : false;
         this.queryParamsDisabled = (_c = item.disableQueryParams) !== null && _c !== void 0 ? _c : false;
         if (isFunction(item.values)) {
@@ -312,7 +309,7 @@ class BaseItem {
         var _a;
         const model = (_a = this.persistedValue) !== null && _a !== void 0 ? _a : this.defaultValue;
         if (model !== undefined) {
-            this.model = model;
+            this._setModel(model);
         }
     }
     _clearValue(defaultValue = undefined) {
@@ -353,183 +350,6 @@ class BaseSelectItem extends BaseItem {
     }
 }
 
-class SimpleSelectItem extends BaseSelectItem {
-    constructor(itemConfig, _persistedValues) {
-        super(itemConfig, _persistedValues);
-    }
-    get value() {
-        let value = this.model;
-        if (value == '__all' || value === undefined) {
-            value = undefined;
-        }
-        return value;
-    }
-    getChipsContent(type = null) {
-        if (this.children) {
-            const itemValue = findValue(this.values, this.model, this.children);
-            return itemValue && itemValue.name;
-        }
-        else {
-            const itemValue = this.values.find((val) => val.value === this.model);
-            if (itemValue) {
-                return itemValue.name;
-            }
-            else if (this.isolate) {
-                return this.isolate.label;
-            }
-        }
-    }
-    get isChipVisible() {
-        return this.model !== '__all' && this.model !== undefined;
-    }
-    _init() {
-        super._init();
-        if (this.model === undefined && this.defaultValue === undefined) {
-            this._model = '__all';
-        }
-    }
-    get isolateOptionNotSelected() {
-        const modelValue = this.model;
-        const isolate = this.isolate;
-        return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
-    }
-    _setModel(value) {
-        if (value) {
-            if (!isNaN(value)) {
-                value = +value;
-            }
-        }
-        super._setModel(value);
-    }
-    _validateModel() {
-        const item = this.values.find(value => {
-            return value.value == this.model;
-        });
-        const value = item ? item.value : '__all';
-        if (this._model !== value) {
-            this.model = value;
-        }
-    }
-    _clearValue(defaultValue = undefined) {
-        super._clearValue(defaultValue);
-        const value = Array.isArray(this.values) && this.values.some((val) => val.value === '__all')
-            ? '__all'
-            : undefined;
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
-    }
-}
-
-var ActionMode;
-(function (ActionMode) {
-    ActionMode["Button"] = "button";
-    ActionMode["Menu"] = "menu";
-    ActionMode["File"] = "file";
-})(ActionMode || (ActionMode = {}));
-
-var ActionType;
-(function (ActionType) {
-    ActionType["Basic"] = "basic";
-    ActionType["Raised"] = "raised";
-    ActionType["Icon"] = "icon";
-    ActionType["Fab"] = "fab";
-    ActionType["MiniFab"] = "mini-fab";
-    ActionType["Flat"] = "flat";
-    ActionType["Stroked"] = "stroked";
-})(ActionType || (ActionType = {}));
-
-var ButtonStyle;
-(function (ButtonStyle) {
-    ButtonStyle["Basic"] = "basic";
-    ButtonStyle["Raised"] = "raised";
-    ButtonStyle["Icon"] = "icon";
-    ButtonStyle["Fab"] = "fab";
-    ButtonStyle["MiniFab"] = "mini-fab";
-    ButtonStyle["Flat"] = "flat";
-    ButtonStyle["Stroked"] = "stroked";
-})(ButtonStyle || (ButtonStyle = {}));
-
-var ItemDateMode;
-(function (ItemDateMode) {
-    ItemDateMode["Calendar"] = "calendar";
-    ItemDateMode["ScrollMonthYear"] = "monthyear";
-    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
-})(ItemDateMode || (ItemDateMode = {}));
-
-var PickerViewType;
-(function (PickerViewType) {
-    PickerViewType["Date"] = "date";
-    PickerViewType["DateTime"] = "datetime";
-    PickerViewType["Time"] = "time";
-    PickerViewType["Week"] = "week";
-    PickerViewType["MonthRange"] = "monthrange";
-})(PickerViewType || (PickerViewType = {}));
-
-const SORT_BY_FIELD = 'sortName';
-const SORT_DIRECTION_FIELD = 'sortDirection';
-class FsFilterConfig {
-    constructor(data = {}) {
-        this.load = true;
-        this.persist = false;
-        this.inline = false;
-        this.autofocus = false;
-        this.chips = false;
-        this.sortValues = null;
-        this.sort = null;
-        // public sortDirection = null;
-        this.queryParam = false;
-        this.case = 'camel';
-        this._init(data);
-    }
-    _init(data = {}) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        this.load = (_a = data.load) !== null && _a !== void 0 ? _a : true;
-        this.persist = data.persist;
-        this.savedFilters = data.savedFilters;
-        this.inline = (_b = data.inline) !== null && _b !== void 0 ? _b : false;
-        this.autofocus = (_c = data.autofocus) !== null && _c !== void 0 ? _c : false;
-        this.chips = (_d = data.chips) !== null && _d !== void 0 ? _d : false;
-        this.sortValues = data.sorts;
-        this.sort = data.sort;
-        this.queryParam = (_e = data.queryParam) !== null && _e !== void 0 ? _e : false;
-        this.init = data.init;
-        this.change = data.change;
-        this.reload = data.reload;
-        this.clear = data.clear;
-        this.sortChange = data.sortChange;
-        this.case = (_f = data.case) !== null && _f !== void 0 ? _f : 'camel';
-        this.reloadWhenConfigChanged = data.reloadWhenConfigChanged;
-        this.button = data.button;
-        this.items = data.items;
-        this.actions = data.actions;
-        this.case = (_g = data.case) !== null && _g !== void 0 ? _g : 'camel';
-        if (this.persist) {
-            if (typeof this.persist === 'object') {
-                if (this.persist.name) {
-                    this.namespace = this.persist.name;
-                }
-            }
-        }
-        if (!this.button) {
-            this.button = {};
-        }
-        if (this.button.label === undefined) {
-            this.button.label = 'Filters';
-        }
-        if (this.button.icon === undefined) {
-            this.button.icon = 'tune';
-        }
-        if (this.button.style === undefined) {
-            this.button.style = ButtonStyle.Raised;
-        }
-        if (this.button.color === undefined) {
-            this.button.color = 'default';
-        }
-        if (this.clear === undefined) {
-            this.clear = () => { };
-        }
-    }
-}
-
 function objectsAreEquals(obj1, obj2) {
     const oldKeys = Object.keys(obj1);
     const currKeys = Object.keys(obj2);
@@ -654,111 +474,45 @@ class MultipleSelectItem extends BaseSelectItem {
     }
 }
 
-class SelectItem {
-    static create(config) {
-        if (config.multiple) {
-            return new MultipleSelectItem(config, null);
+function buildQueryParams(flattenedParams, items) {
+    items.forEach(filterItem => {
+        if (filterItem instanceof MultipleSelectItem && filterItem.isolate) {
+            if (filterItem.multiple && filterItem.value) {
+                const isolated = list(filterItem.values, 'value').sort();
+                const value = filterItem.value.sort();
+                if (arraysAreEquals(value, isolated)) {
+                    flattenedParams[filterItem.name] = null;
+                }
+            }
         }
-        else {
-            return new SimpleSelectItem(config, null);
+        if (filterItem.isTypeAutocomplete) {
+            if (isObject(filterItem.model)) {
+                flattenedParams[filterItem.name] = filterToQueryParam(filterItem.model.value, filterItem.model.name);
+            }
         }
-    }
+        else if (filterItem.isTypeAutocompleteChips || filterItem.isTypeChips) {
+            if (Array.isArray(filterItem.model) && filterItem.model.length) {
+                flattenedParams[filterItem.name] = filterItem.model.map((item) => {
+                    return filterToQueryParam(item.value, item.name);
+                }).join(',');
+            }
+        }
+    });
+    return flattenedParams;
 }
 
-class ChipsItem extends BaseItem {
-    static create(config) {
-        return new ChipsItem(config, null);
+function getRangeName(configCase, name, range) {
+    if (configCase === 'snake') {
+        return name.concat('_').concat(range);
     }
-    get isTypeChips() {
-        return true;
-    }
-    get value() {
-        const value = clone(this.model);
-        if (Array.isArray(value) && value.length === 0) {
-            return undefined;
-        }
-        return value;
-    }
-    get isChipVisible() {
-        return !!this.value;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        return {
-            [name]: value
-        };
-    }
-    get persistanceObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        if (Array.isArray(value)) {
-            params[name] = value.join(',');
-        }
-        else {
-            params[name] = undefined;
-        }
-        return params;
-    }
-    getChipsContent() {
-        return this.model
-            .reduce((acc, i) => {
-            acc.push(i.name);
-            return acc;
-        }, [])
-            .join(', ');
-    }
-    _validateModel() { }
-    _setModel(value) {
-        if (Array.isArray(value)) {
-            value = value.map((val) => {
-                if (isNaN(val)) {
-                    return val;
-                }
-                else {
-                    return +val;
-                }
-            });
-        }
-        this._model = value;
-    }
-    _parseConfig(item) {
-        this.multiple = item.multiple;
-        super._parseConfig(item);
-    }
-    _init() {
-        if (!Array.isArray(this.values)) {
-            this.values = [];
-        }
-        if (this.model && Array.isArray(this.model) && this.values.length) {
-            if (Number.isInteger(this.model[0])) {
-                this._model = this.model.map((id) => {
-                    return this.values.find((value) => value.value === id);
-                });
-            }
-        }
-        if (this.model === undefined) {
-            this._model = [];
-        }
-    }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
-    }
-}
-
-function getRangeName(configCase, name, range) {
-    if (configCase === 'snake') {
-        return name.concat('_').concat(range);
-    }
-    if (configCase === 'camel') {
-        return name.concat(range.charAt(0).toUpperCase()).concat(range.slice(1));
-    }
-}
-
-class RangeItem extends BaseItem {
-    static create(config, additionalConfig) {
-        return new RangeItem(config, additionalConfig);
+    if (configCase === 'camel') {
+        return name.concat(range.charAt(0).toUpperCase()).concat(range.slice(1));
+    }
+}
+
+class RangeItem extends BaseItem {
+    static create(config, additionalConfig) {
+        return new RangeItem(config, additionalConfig);
     }
     get value() {
         let value = clone(this.model);
@@ -915,73 +669,477 @@ class BaseDateRangeItem extends BaseItem {
             return `${format(to, formatTo)}`;
         }
     }
-    clearDateRange(type = null, defaultValue = undefined) {
-        if (type === 'from') {
-            delete this.model.from;
-            if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.from) {
-                this.model.from = defaultValue.from;
-            }
-            this.model = Object.assign({}, this.model);
-        }
-        else if (type === 'to') {
-            delete this.model.to;
-            if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.to) {
-                this.model.to = defaultValue.to;
-            }
-            this.model = Object.assign({}, this.model);
+    clearDateRange(type = null, defaultValue = undefined) {
+        if (type === 'from') {
+            delete this.model.from;
+            if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.from) {
+                this.model.from = defaultValue.from;
+            }
+            this.model = Object.assign({}, this.model);
+        }
+        else if (type === 'to') {
+            delete this.model.to;
+            if (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.to) {
+                this.model.to = defaultValue.to;
+            }
+            this.model = Object.assign({}, this.model);
+        }
+        else {
+            if (defaultValue) {
+                this.model = Object.assign({}, defaultValue);
+            }
+            else {
+                this.model = {};
+            }
+        }
+    }
+    _validateModel() {
+    }
+    _setModel(value) {
+        if (value) {
+            if (value.from && (!isDate(value.from) || !isValid(value.from))) {
+                value.from = parseISO(value.from);
+            }
+            if (value.to && (!isDate(value.to) || !isValid(value.to))) {
+                value.to = parseISO(value.to);
+            }
+        }
+        super._setModel(value);
+    }
+    _parseConfig(item) {
+        var _a, _b;
+        this.case = (_b = (_a = this._additionalConfig) === null || _a === void 0 ? void 0 : _a.case) !== null && _b !== void 0 ? _b : 'camel';
+        super._parseConfig(item);
+    }
+    _init() {
+        if (!this.label) {
+            this.label = ['Date From', 'Date To'];
+        }
+        if (!this.model) {
+            this.model = this.defaultValue || {};
+        }
+    }
+    _clearValue(defaultValue = undefined) {
+        var _a;
+        this.model = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : {};
+    }
+}
+
+class DateRangeItem extends BaseDateRangeItem {
+    static create(config) {
+        return new DateRangeItem(config, null);
+    }
+}
+
+class DateTimeRangeItem extends BaseDateRangeItem {
+    static create(config) {
+        return new DateTimeRangeItem(config, null);
+    }
+}
+
+function tryConvertToNumber(val) {
+    return isNaN(val)
+        ? val
+        : +val;
+}
+
+function parseItemValueFromStored(item, params, paramCase) {
+    const param = params[item.name];
+    switch (item.type) {
+        case ItemType.Range: {
+            const min = params[getRangeName(paramCase, item.name, 'min')];
+            const max = params[getRangeName(paramCase, item.name, 'max')];
+            return { min: min, max: max };
+        }
+        case ItemType.DateRange:
+        case ItemType.DateTimeRange: {
+            const from = params[getRangeName(item.case, item.name, 'from')];
+            const to = params[getRangeName(item.case, item.name, 'to')];
+            return { from: from, to: to };
+        }
+        case ItemType.Week: {
+            const from = params[getRangeName('camel', item.name, 'from')];
+            const to = params[getRangeName('camel', item.name, 'to')];
+            const period = params[`${item.name}Period`];
+            return { from, to, period };
+        }
+        case ItemType.Select: {
+            if (item.multiple && !!param) {
+                const values = param.split(',');
+                if (item.isolate) {
+                    const isolatedValue = Array.isArray(item.isolate.value)
+                        ? item.isolate.value
+                        : [item.isolate.value];
+                    item.isolate.enabled = arraysHaveSameElements(isolatedValue, values);
+                    return item.isolate.enabled
+                        ? isolatedValue
+                        : values;
+                }
+                return values;
+            }
+            else {
+                return param;
+            }
+        }
+        case ItemType.Checkbox: {
+            if (param === 'true') {
+                return true === item.checked;
+            }
+            else {
+                return param === item.checked;
+            }
+        }
+        case ItemType.AutoComplete: {
+            const filterParts = filterFromQueryParam(param);
+            return {
+                name: filterParts[1],
+                value: tryConvertToNumber(filterParts[0])
+            };
+        }
+        case ItemType.AutoCompleteChips:
+        case ItemType.Chips: {
+            const filterParts = param.split(',');
+            return filterParts.reduce((arry, value) => {
+                const chipParts = filterFromQueryParam(value);
+                arry.push({
+                    name: chipParts[1],
+                    value: tryConvertToNumber(chipParts[0]),
+                });
+                return arry;
+            }, []);
+        }
+        default: {
+            return param;
+        }
+    }
+}
+function arraysHaveSameElements(arr1, arr2) {
+    arr1 = [...arr1].sort();
+    arr2 = [...arr2].sort();
+    return arr1.some((item) => {
+        return arr2.includes(item);
+    });
+}
+
+function parseDate(value) {
+    if (value && (!isDate(value) || !isValid(value))) {
+        return parseISO(value);
+    }
+    return value;
+}
+
+class WeekItem extends BaseItem {
+    static create(config) {
+        return new WeekItem(config, null);
+    }
+    get value() {
+        let value = clone(this.model);
+        if (!isObject(this.model) ||
+            (isEmpty(this.model.from, { zero: true }) && isEmpty(this.model.to, { zero: true }))) {
+            value = undefined;
+        }
+        if (isEmpty(value, { zero: true })) {
+            return undefined;
+        }
+        let from = value.from;
+        let to = value.to;
+        const period = value.period;
+        value = {};
+        if (from) {
+            if (isString(from)) {
+                from = parseISO(from);
+            }
+            if (isValid(from) && isDate(from)) {
+                value.from = from;
+            }
+        }
+        if (to) {
+            if (isString(to)) {
+                to = parseISO(to);
+            }
+            if (isValid(to) && isDate(to)) {
+                value.to = to;
+            }
+        }
+        if (period) {
+            if (isString(period)) {
+                value.period = parseInt(period, 10);
+            }
+            else {
+                value.period = period;
+            }
+        }
+        return value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const paramFromName = getRangeName('camel', name, 'from');
+        const paramToName = getRangeName('camel', name, 'to');
+        const paramPeriodName = `${name}Period`;
+        return {
+            [paramFromName]: (value === null || value === void 0 ? void 0 : value.from) || undefined,
+            [paramToName]: (value === null || value === void 0 ? void 0 : value.to) || undefined,
+            [paramPeriodName]: (value === null || value === void 0 ? void 0 : value.period) || undefined,
+        };
+    }
+    get persistanceObject() {
+        const query = this.queryObject;
+        const name = this.name;
+        const paramFromName = getRangeName('camel', name, 'from');
+        const paramFromValue = query[paramFromName] && simpleFormat(query[paramFromName]) || query[paramFromName];
+        const paramToName = getRangeName('camel', name, 'to');
+        const paramToValue = query[paramToName] && simpleFormat(query[paramToName]) || query[paramToName];
+        const paramPeriodName = `${name}Period`;
+        return {
+            [paramFromName]: paramFromValue,
+            [paramToName]: paramToValue,
+            [paramPeriodName]: query[paramPeriodName],
+        };
+    }
+    getChipsContent(type = null) {
+        return formatPeriodObject(this.value);
+    }
+    _validateModel() { }
+    _setModel(value) {
+        if (value) {
+            value.from = parseDate(value.from);
+            value.to = parseDate(value.to);
+            value.period = parseInt(value.period, 10) || undefined;
+        }
+        super._setModel(value);
+    }
+    _parseConfig(item) {
+        super._parseConfig(item);
+        this.seedDate = item.seedDate;
+    }
+    _init() { }
+    _clearValue(defaultValue = undefined) {
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
+    }
+}
+
+/**
+ * We need this function because when we store persisted/query/remote filter values
+ * it stores with different format, ex.: Range will be stored as RangeFrom && RangeTo
+ * and in this case we don't know how to restroe those values.
+ *
+ * This function do convertation for those kinds of stored values
+ *
+ * @param params
+ * @param items
+ * @param paramsCase
+ */
+function restoreItems(params, items, paramsCase) {
+    const result = {};
+    Object.keys(params)
+        .forEach((name) => {
+        const item = findItemWidthName(items, name);
+        if (item) {
+            result[item.name] = parseItemValueFromStored(item, params, paramsCase);
+        }
+    });
+    return result;
+}
+function findItemWidthName(items, name) {
+    return items
+        .find((filterItem) => {
+        if (filterItem instanceof RangeItem) {
+            return name === getRangeName(filterItem.case, filterItem.name, 'min') ||
+                name === getRangeName(filterItem.case, filterItem.name, 'max') ||
+                name === filterItem.name;
+        }
+        else if (filterItem instanceof DateRangeItem || filterItem instanceof DateTimeRangeItem) {
+            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;
+    });
+}
+
+function findValue(values, value, children) {
+    for (let i = 0; i < values.length; i++) {
+        const val = values[i];
+        if (val[children]) {
+            return findValue(val[children], value, children);
+        }
+        if (val.value === value) {
+            return val;
+        }
+    }
+    return undefined;
+}
+
+class SimpleSelectItem extends BaseSelectItem {
+    constructor(itemConfig, _persistedValues) {
+        super(itemConfig, _persistedValues);
+    }
+    get value() {
+        let value = this.model;
+        if (value == '__all' || value === undefined) {
+            value = undefined;
+        }
+        return value;
+    }
+    getChipsContent(type = null) {
+        if (this.children) {
+            const itemValue = findValue(this.values, this.model, this.children);
+            return itemValue && itemValue.name;
+        }
+        else {
+            const itemValue = this.values.find((val) => val.value === this.model);
+            if (itemValue) {
+                return itemValue.name;
+            }
+            else if (this.isolate) {
+                return this.isolate.label;
+            }
+        }
+    }
+    get isChipVisible() {
+        return this.model !== '__all' && this.model !== undefined;
+    }
+    _init() {
+        super._init();
+        if (this.model === undefined && this.defaultValue === undefined) {
+            this._model = '__all';
+        }
+    }
+    get isolateOptionNotSelected() {
+        const modelValue = this.model;
+        const isolate = this.isolate;
+        return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
+    }
+    _setModel(value) {
+        if (value) {
+            if (!isNaN(value)) {
+                value = +value;
+            }
+        }
+        super._setModel(value);
+    }
+    _validateModel() {
+        const item = this.values.find(value => {
+            return value.value == this.model;
+        });
+        const value = item ? item.value : '__all';
+        if (this._model !== value) {
+            this.model = value;
+        }
+    }
+    _clearValue(defaultValue = undefined) {
+        super._clearValue(defaultValue);
+        const value = Array.isArray(this.values) && this.values.some((val) => val.value === '__all')
+            ? '__all'
+            : undefined;
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    }
+}
+
+class SelectItem {
+    static create(config) {
+        if (config.multiple) {
+            return new MultipleSelectItem(config, null);
+        }
+        else {
+            return new SimpleSelectItem(config, null);
+        }
+    }
+}
+
+class ChipsItem extends BaseItem {
+    static create(config) {
+        return new ChipsItem(config, null);
+    }
+    get isTypeChips() {
+        return true;
+    }
+    get value() {
+        const value = clone(this.model);
+        if (Array.isArray(value) && value.length === 0) {
+            return undefined;
+        }
+        return value;
+    }
+    get isChipVisible() {
+        return !!this.value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        return {
+            [name]: value
+        };
+    }
+    get persistanceObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        if (Array.isArray(value)) {
+            params[name] = value.join(',');
         }
         else {
-            if (defaultValue) {
-                this.model = Object.assign({}, defaultValue);
-            }
-            else {
-                this.model = {};
-            }
+            params[name] = undefined;
         }
+        return params;
     }
-    _validateModel() {
+    getChipsContent() {
+        return this.model
+            .reduce((acc, i) => {
+            acc.push(i.name);
+            return acc;
+        }, [])
+            .join(', ');
     }
+    _validateModel() { }
     _setModel(value) {
-        if (value) {
-            if (value.from && (!isDate(value.from) || !isValid(value.from))) {
-                value.from = parseISO(value.from);
-            }
-            if (value.to && (!isDate(value.to) || !isValid(value.to))) {
-                value.to = parseISO(value.to);
-            }
+        if (Array.isArray(value)) {
+            value = value.map((val) => {
+                if (isNaN(val)) {
+                    return val;
+                }
+                else {
+                    return +val;
+                }
+            });
         }
-        super._setModel(value);
+        this._model = value;
     }
     _parseConfig(item) {
-        var _a, _b;
-        this.case = (_b = (_a = this._additionalConfig) === null || _a === void 0 ? void 0 : _a.case) !== null && _b !== void 0 ? _b : 'camel';
+        this.multiple = item.multiple;
         super._parseConfig(item);
     }
     _init() {
-        if (!this.label) {
-            this.label = ['Date From', 'Date To'];
+        if (!Array.isArray(this.values)) {
+            this.values = [];
         }
-        if (!this.model) {
-            this.model = this.defaultValue || {};
+        if (this.model && Array.isArray(this.model) && this.values.length) {
+            if (Number.isInteger(this.model[0])) {
+                this._model = this.model.map((id) => {
+                    return this.values.find((value) => value.value === id);
+                });
+            }
+        }
+        if (this.model === undefined) {
+            this._model = [];
         }
     }
     _clearValue(defaultValue = undefined) {
-        var _a;
-        this.model = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : {};
-    }
-}
-
-class DateRangeItem extends BaseDateRangeItem {
-    static create(config) {
-        return new DateRangeItem(config, null);
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
     }
 }
 
-class DateTimeRangeItem extends BaseDateRangeItem {
-    static create(config) {
-        return new DateTimeRangeItem(config, null);
-    }
-}
+var ItemDateMode;
+(function (ItemDateMode) {
+    ItemDateMode["Calendar"] = "calendar";
+    ItemDateMode["ScrollMonthYear"] = "monthyear";
+    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
+})(ItemDateMode || (ItemDateMode = {}));
 
 class BaseDateItem extends BaseItem {
     get value() {
@@ -1228,142 +1386,148 @@ class TextItem extends BaseItem {
     }
 }
 
-function parseDate(value) {
-    if (value && (!isDate(value) || !isValid(value))) {
-        return parseISO(value);
-    }
-    return value;
-}
-
-class WeekItem extends BaseItem {
-    static create(config) {
-        return new WeekItem(config, null);
-    }
-    get value() {
-        let value = clone(this.model);
-        if (!isObject(this.model) ||
-            (isEmpty(this.model.from, { zero: true }) && isEmpty(this.model.to, { zero: true }))) {
-            value = undefined;
+function createFilterItem(item, config) {
+    switch (item.type) {
+        case ItemType.Select: {
+            return SelectItem.create(item);
         }
-        if (isEmpty(value, { zero: true })) {
-            return undefined;
+        case ItemType.Chips: {
+            return ChipsItem.create(item);
         }
-        let from = value.from;
-        let to = value.to;
-        const period = value.period;
-        value = {};
-        if (from) {
-            if (isString(from)) {
-                from = parseISO(from);
-            }
-            if (isValid(from) && isDate(from)) {
-                value.from = from;
-            }
+        case ItemType.Range: {
+            return RangeItem.create(item, config);
         }
-        if (to) {
-            if (isString(to)) {
-                to = parseISO(to);
-            }
-            if (isValid(to) && isDate(to)) {
-                value.to = to;
-            }
+        case ItemType.DateRange: {
+            return DateRangeItem.create(item);
         }
-        if (period) {
-            if (isString(period)) {
-                value.period = parseInt(period, 10);
-            }
-            else {
-                value.period = period;
-            }
+        case ItemType.DateTimeRange: {
+            return DateTimeRangeItem.create(item);
         }
-        return value;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const paramFromName = getRangeName('camel', name, 'from');
-        const paramToName = getRangeName('camel', name, 'to');
-        const paramPeriodName = `${name}Period`;
-        return {
-            [paramFromName]: (value === null || value === void 0 ? void 0 : value.from) || undefined,
-            [paramToName]: (value === null || value === void 0 ? void 0 : value.to) || undefined,
-            [paramPeriodName]: (value === null || value === void 0 ? void 0 : value.period) || undefined,
-        };
-    }
-    get persistanceObject() {
-        const query = this.queryObject;
-        const name = this.name;
-        const paramFromName = getRangeName('camel', name, 'from');
-        const paramFromValue = query[paramFromName] && simpleFormat(query[paramFromName]) || query[paramFromName];
-        const paramToName = getRangeName('camel', name, 'to');
-        const paramToValue = query[paramToName] && simpleFormat(query[paramToName]) || query[paramToName];
-        const paramPeriodName = `${name}Period`;
-        return {
-            [paramFromName]: paramFromValue,
-            [paramToName]: paramToValue,
-            [paramPeriodName]: query[paramPeriodName],
-        };
-    }
-    getChipsContent(type = null) {
-        return formatPeriodObject(this.value);
-    }
-    _validateModel() { }
-    _setModel(value) {
-        if (value) {
-            value.from = parseDate(value.from);
-            value.to = parseDate(value.to);
-            value.period = parseInt(value.period, 10) || undefined;
+        case ItemType.Date: {
+            return DateItem.create(item);
+        }
+        case ItemType.Week: {
+            return WeekItem.create(item);
+        }
+        case ItemType.DateTime: {
+            return DateTimeItem.create(item);
+        }
+        case ItemType.AutoComplete: {
+            return AutocompleteItem.create(item);
+        }
+        case ItemType.AutoCompleteChips: {
+            return AutocompleteChipsItem.create(item);
+        }
+        case ItemType.Checkbox: {
+            return CheckboxItem.create(item);
+        }
+        case ItemType.Keyword:
+        case ItemType.Text: {
+            return TextItem.create(item);
         }
-        super._setModel(value);
-    }
-    _parseConfig(item) {
-        super._parseConfig(item);
-        this.seedDate = item.seedDate;
-    }
-    _init() { }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
     }
 }
 
-function createFilterItem(item, config) {
-    switch (item.type) {
-        case ItemType.Select: {
-            return SelectItem.create(item);
-        }
-        case ItemType.Chips: {
-            return ChipsItem.create(item);
-        }
-        case ItemType.Range: {
-            return RangeItem.create(item, config);
-        }
-        case ItemType.DateRange: {
-            return DateRangeItem.create(item);
-        }
-        case ItemType.DateTimeRange: {
-            return DateTimeRangeItem.create(item);
-        }
-        case ItemType.Date: {
-            return DateItem.create(item);
+var ActionMode;
+(function (ActionMode) {
+    ActionMode["Button"] = "button";
+    ActionMode["Menu"] = "menu";
+    ActionMode["File"] = "file";
+})(ActionMode || (ActionMode = {}));
+
+var ActionType;
+(function (ActionType) {
+    ActionType["Basic"] = "basic";
+    ActionType["Raised"] = "raised";
+    ActionType["Icon"] = "icon";
+    ActionType["Fab"] = "fab";
+    ActionType["MiniFab"] = "mini-fab";
+    ActionType["Flat"] = "flat";
+    ActionType["Stroked"] = "stroked";
+})(ActionType || (ActionType = {}));
+
+var ButtonStyle;
+(function (ButtonStyle) {
+    ButtonStyle["Basic"] = "basic";
+    ButtonStyle["Raised"] = "raised";
+    ButtonStyle["Icon"] = "icon";
+    ButtonStyle["Fab"] = "fab";
+    ButtonStyle["MiniFab"] = "mini-fab";
+    ButtonStyle["Flat"] = "flat";
+    ButtonStyle["Stroked"] = "stroked";
+})(ButtonStyle || (ButtonStyle = {}));
+
+var PickerViewType;
+(function (PickerViewType) {
+    PickerViewType["Date"] = "date";
+    PickerViewType["DateTime"] = "datetime";
+    PickerViewType["Time"] = "time";
+    PickerViewType["Week"] = "week";
+    PickerViewType["MonthRange"] = "monthrange";
+})(PickerViewType || (PickerViewType = {}));
+
+const SORT_BY_FIELD = 'sortName';
+const SORT_DIRECTION_FIELD = 'sortDirection';
+class FsFilterConfig {
+    constructor(data = {}) {
+        this.load = true;
+        this.persist = false;
+        this.inline = false;
+        this.autofocus = false;
+        this.chips = false;
+        this.sortValues = null;
+        this.sort = null;
+        // public sortDirection = null;
+        this.queryParam = false;
+        this.case = 'camel';
+        this._init(data);
+    }
+    _init(data = {}) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.load = (_a = data.load) !== null && _a !== void 0 ? _a : true;
+        this.persist = data.persist;
+        this.savedFilters = data.savedFilters;
+        this.inline = (_b = data.inline) !== null && _b !== void 0 ? _b : false;
+        this.autofocus = (_c = data.autofocus) !== null && _c !== void 0 ? _c : false;
+        this.chips = (_d = data.chips) !== null && _d !== void 0 ? _d : false;
+        this.sortValues = data.sorts;
+        this.sort = data.sort;
+        this.queryParam = (_e = data.queryParam) !== null && _e !== void 0 ? _e : false;
+        this.init = data.init;
+        this.change = data.change;
+        this.reload = data.reload;
+        this.clear = data.clear;
+        this.sortChange = data.sortChange;
+        this.case = (_f = data.case) !== null && _f !== void 0 ? _f : 'camel';
+        this.reloadWhenConfigChanged = data.reloadWhenConfigChanged;
+        this.button = data.button;
+        this.items = data.items;
+        this.actions = data.actions;
+        this.case = (_g = data.case) !== null && _g !== void 0 ? _g : 'camel';
+        if (this.persist) {
+            if (typeof this.persist === 'object') {
+                if (this.persist.name) {
+                    this.namespace = this.persist.name;
+                }
+            }
         }
-        case ItemType.Week: {
-            return WeekItem.create(item);
+        if (!this.button) {
+            this.button = {};
         }
-        case ItemType.DateTime: {
-            return DateTimeItem.create(item);
+        if (this.button.label === undefined) {
+            this.button.label = 'Filters';
         }
-        case ItemType.AutoComplete: {
-            return AutocompleteItem.create(item);
+        if (this.button.icon === undefined) {
+            this.button.icon = 'tune';
         }
-        case ItemType.AutoCompleteChips: {
-            return AutocompleteChipsItem.create(item);
+        if (this.button.style === undefined) {
+            this.button.style = ButtonStyle.Raised;
         }
-        case ItemType.Checkbox: {
-            return CheckboxItem.create(item);
+        if (this.button.color === undefined) {
+            this.button.color = 'default';
         }
-        case ItemType.Keyword:
-        case ItemType.Text: {
-            return TextItem.create(item);
+        if (this.clear === undefined) {
+            this.clear = () => { };
         }
     }
 }
@@ -1541,7 +1705,15 @@ class FsFilterItemsStore {
         }
         return params;
     }
-    initItemValues(p) {
+    init(p) {
+        this._ready$
+            .pipe(take(1), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.items
+                .forEach((item) => {
+                item.init(item);
+            });
+        });
         this.items
             .forEach((item) => {
             item.initValues(p[item.name]);
@@ -1594,7 +1766,7 @@ class FsFilterItemsStore {
             this.loadAsyncValues();
         }
     }
-    updateVisibleItems() {
+    updateItemsVisiblity() {
         this.visibleItems = this.items
             .filter((item) => !item.isTypeKeyword && !item.hide);
     }
@@ -1647,7 +1819,7 @@ class FsFilterItemsStore {
         this.ready$
             .pipe(filter$1((state) => state), takeUntil(this._destroy$))
             .subscribe(() => {
-            this.updateVisibleItems();
+            this.updateItemsVisiblity();
             this._setKeywordItem();
         });
     }
@@ -1697,143 +1869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-const QUERY_PARAM_DELIMITER = ':';
-
-function filterToQueryParam(value, name) {
-    return `${encodeURIComponent(value)}${QUERY_PARAM_DELIMITER}${encodeURIComponent(name)}`;
-}
-function filterFromQueryParam(param) {
-    const parts = param.split(QUERY_PARAM_DELIMITER);
-    return [decodeURIComponent(parts[0]), decodeURIComponent(parts[1])];
-}
-
-function tryConvertToNumber(val) {
-    return isNaN(val)
-        ? val
-        : +val;
-}
-
-function parseItemValueFromStored(item, params, paramCase) {
-    const param = params[item.name];
-    switch (item.type) {
-        case ItemType.Range: {
-            const min = params[getRangeName(paramCase, item.name, 'min')];
-            const max = params[getRangeName(paramCase, item.name, 'max')];
-            return { min: min, max: max };
-        }
-        case ItemType.DateRange:
-        case ItemType.DateTimeRange: {
-            const from = params[getRangeName(item.case, item.name, 'from')];
-            const to = params[getRangeName(item.case, item.name, 'to')];
-            return { from: from, to: to };
-        }
-        case ItemType.Week: {
-            const from = params[getRangeName('camel', item.name, 'from')];
-            const to = params[getRangeName('camel', item.name, 'to')];
-            const period = params[`${item.name}Period`];
-            return { from, to, period };
-        }
-        case ItemType.Select: {
-            if (item.multiple && !!param) {
-                const values = param.split(',');
-                if (item.isolate) {
-                    const isolatedValue = Array.isArray(item.isolate.value)
-                        ? item.isolate.value
-                        : [item.isolate.value];
-                    item.isolate.enabled = arraysHaveSameElements(isolatedValue, values);
-                    return item.isolate.enabled
-                        ? isolatedValue
-                        : values;
-                }
-                return values;
-            }
-            else {
-                return param;
-            }
-        }
-        case ItemType.Checkbox: {
-            if (param === 'true') {
-                return true === item.checked;
-            }
-            else {
-                return param === item.checked;
-            }
-        }
-        case ItemType.AutoComplete: {
-            const filterParts = filterFromQueryParam(param);
-            return {
-                name: filterParts[1],
-                value: tryConvertToNumber(filterParts[0])
-            };
-        }
-        case ItemType.AutoCompleteChips:
-        case ItemType.Chips: {
-            const filterParts = param.split(',');
-            return filterParts.reduce((arry, value) => {
-                const chipParts = filterFromQueryParam(value);
-                arry.push({
-                    name: chipParts[1],
-                    value: tryConvertToNumber(chipParts[0]),
-                });
-                return arry;
-            }, []);
-        }
-        default: {
-            return param;
-        }
-    }
-}
-function arraysHaveSameElements(arr1, arr2) {
-    arr1 = [...arr1].sort();
-    arr2 = [...arr2].sort();
-    return arr1.some((item) => {
-        return arr2.includes(item);
-    });
-}
-
-/**
- * We need this function because when we store persisted/query/remote filter values
- * it stores with different format, ex.: Range will be stored as RangeFrom && RangeTo
- * and in this case we don't know how to restroe those values.
- *
- * This function do convertation for those kinds of stored values
- *
- * @param params
- * @param items
- * @param paramsCase
- */
-function restoreItems(params, items, paramsCase) {
-    const result = {};
-    Object.keys(params)
-        .forEach((name) => {
-        const item = findItemWidthName(items, name);
-        if (item) {
-            result[item.name] = parseItemValueFromStored(item, params, paramsCase);
-        }
-    });
-    return result;
-}
-function findItemWidthName(items, name) {
-    return items
-        .find((filterItem) => {
-        if (filterItem instanceof RangeItem) {
-            return name === getRangeName(filterItem.case, filterItem.name, 'min') ||
-                name === getRangeName(filterItem.case, filterItem.name, 'max') ||
-                name === filterItem.name;
-        }
-        else if (filterItem instanceof DateRangeItem || filterItem instanceof DateTimeRangeItem) {
-            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;
-    });
-}
-
 const FILTER_STORE_KEY = 'fs-filter-persist';
 class PersistanceParamsController extends FsPersistanceStore {
     constructor(_store, _route, _location, _itemsStore, _dialogRef, _drawerRef) {
@@ -1974,33 +2009,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1$2.MatDialogRef }]; } });
 
-function buildQueryParams(flattenedParams, items) {
-    items.forEach(filterItem => {
-        if (filterItem instanceof MultipleSelectItem && filterItem.isolate) {
-            if (filterItem.multiple && filterItem.value) {
-                const isolated = list(filterItem.values, 'value').sort();
-                const value = filterItem.value.sort();
-                if (arraysAreEquals(value, isolated)) {
-                    flattenedParams[filterItem.name] = null;
-                }
-            }
-        }
-        if (filterItem.isTypeAutocomplete) {
-            if (isObject(filterItem.model)) {
-                flattenedParams[filterItem.name] = filterToQueryParam(filterItem.model.value, filterItem.model.name);
-            }
-        }
-        else if (filterItem.isTypeAutocompleteChips || filterItem.isTypeChips) {
-            if (Array.isArray(filterItem.model) && filterItem.model.length) {
-                flattenedParams[filterItem.name] = filterItem.model.map((item) => {
-                    return filterToQueryParam(item.value, item.name);
-                }).join(',');
-            }
-        }
-    });
-    return flattenedParams;
-}
-
 class SavedFiltersController {
     constructor(_itemsStore, _dialog) {
         this._itemsStore = _itemsStore;
@@ -2234,7 +2242,7 @@ class ExternalParamsController {
         this._listenItemsChange();
     }
     _initItemsValues() {
-        this._itemsStore.initItemValues(this.params);
+        this._itemsStore.init(this.params);
         this._saveQueryParams();
         this._savePersistedParams();
     }
@@ -3102,7 +3110,7 @@ class AutocompleteComponent extends BaseItemComponent {
     }
 }
 AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.model\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4$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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -3147,7 +3155,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
     }
 }
 AutocompletechipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompletechipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutocompletechipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.showClear\"\n  [removable]=\"item.showClear\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3181,7 +3189,7 @@ class DateComponent extends BaseItemComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, 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.showClear\"\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.showClear\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{
@@ -3208,7 +3216,7 @@ class DateRangeComponent extends BaseItemComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, 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.showClear\"\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.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -3227,7 +3235,7 @@ class WeekComponent extends BaseItemComponent {
     ngOnInit() { }
 }
 WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, 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$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, 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.showClear\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, decorators: [{
             type: Component,
             args: [{
@@ -3399,7 +3407,7 @@ class FilterDrawerComponent {
     }
 }
 FilterDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item *ngFor=\"let filterItem of items$ | async\"\n                       class=\"filter-group\"\n                       [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortItem\">\n            </filter-item>\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions class=\"filter-actions\"\n                              *ngIf=\"(externalParams.pending$ | async) !== true\"\n                              (clear)=\"clear()\"\n                              (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3747,7 +3755,7 @@ class FsFilterChipComponent {
     }
 }
 FsFilterChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
-FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n      *ngIf=\"item.model?.min || item.model?.from\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\n  <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n    </ng-container>\n\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f}\n"], components: [{ type: i2$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }, { type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n      *ngIf=\"item.model?.min || item.model?.from\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\n  <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n    </ng-container>\n\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f}\n"], components: [{ type: i2$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }, { type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipComponent, decorators: [{
             type: Component,
             args: [{
@@ -4007,7 +4015,7 @@ class FilterComponent {
         const item = this.getItem(name);
         if (item) {
             item.hide = false;
-            this._filterItems.updateVisibleItems();
+            this._filterItems.updateItemsVisiblity();
         }
     }
     hideItem(name) {
@@ -4016,7 +4024,7 @@ class FilterComponent {
             return;
         }
         item.hide = true;
-        this._filterItems.updateVisibleItems();
+        this._filterItems.updateItemsVisiblity();
     }
     clearItem(name) {
         const item = this.getItem(name);
@@ -4033,7 +4041,7 @@ class FilterComponent {
         }
         item.label = (_a = params.label) !== null && _a !== void 0 ? _a : item.label;
         item.chipLabel = (_b = params.chipLabel) !== null && _b !== void 0 ? _b : item.chipLabel;
-        this._filterItems.updateVisibleItems();
+        this._filterItems.updateItemsVisiblity();
     }
     getItemValueChange$(name) {
         const item = this.items.find((i) => i.name === name);