@firestitch/filter 12.12.0 → 12.12.2

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";
@@ -464,176 +474,31 @@ class MultipleSelectItem extends BaseSelectItem {
     }
 }
 
-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;
+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;
+                }
             }
         }
-    }
-    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;
+        if (filterItem.isTypeAutocomplete) {
+            if (isObject(filterItem.model)) {
+                flattenedParams[filterItem.name] = filterToQueryParam(filterItem.model.value, filterItem.model.name);
             }
         }
-        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 {
-            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);
-                });
+        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(',');
             }
         }
-        if (this.model === undefined) {
-            this._model = [];
-        }
-    }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : [];
-    }
+    });
+    return flattenedParams;
 }
 
 function getRangeName(configCase, name, range) {
@@ -872,47 +737,444 @@ class DateTimeRangeItem extends BaseDateRangeItem {
     }
 }
 
-var ItemDateMode;
-(function (ItemDateMode) {
-    ItemDateMode["Calendar"] = "calendar";
-    ItemDateMode["ScrollMonthYear"] = "monthyear";
-    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
-})(ItemDateMode || (ItemDateMode = {}));
+function tryConvertToNumber(val) {
+    return isNaN(val)
+        ? val
+        : +val;
+}
 
-class BaseDateItem extends BaseItem {
-    get value() {
-        const value = clone(this.model);
-        if (!value || !isValid(value) || !isDate(value)) {
-            return undefined;
+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 };
         }
-        return value;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = value;
-        return params;
-    }
-    get persistanceObject() {
-        const value = this.queryObject[this.name];
-        return {
-            [this.name]: value ? simpleFormat(value) : undefined,
-        };
-    }
-    _validateModel() {
-    }
-    _setModel(value) {
-        if (value) {
-            if (!isDate(value) || !isValid(value)) {
-                value = parseISO(value);
-            }
+        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 };
         }
-        super._setModel(value);
-    }
-    _parseConfig(item) {
-        this.maxYear = item.maxYear;
-        this.mode = item.mode || ItemDateMode.Calendar;
+        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 {
+            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 : [];
+    }
+}
+
+var ItemDateMode;
+(function (ItemDateMode) {
+    ItemDateMode["Calendar"] = "calendar";
+    ItemDateMode["ScrollMonthYear"] = "monthyear";
+    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
+})(ItemDateMode || (ItemDateMode = {}));
+
+class BaseDateItem extends BaseItem {
+    get value() {
+        const value = clone(this.model);
+        if (!value || !isValid(value) || !isDate(value)) {
+            return undefined;
+        }
+        return value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        params[name] = value;
+        return params;
+    }
+    get persistanceObject() {
+        const value = this.queryObject[this.name];
+        return {
+            [this.name]: value ? simpleFormat(value) : undefined,
+        };
+    }
+    _validateModel() {
+    }
+    _setModel(value) {
+        if (value) {
+            if (!isDate(value) || !isValid(value)) {
+                value = parseISO(value);
+            }
+        }
+        super._setModel(value);
+    }
+    _parseConfig(item) {
+        this.maxYear = item.maxYear;
+        this.mode = item.mode || ItemDateMode.Calendar;
         super._parseConfig(item);
     }
     _init() {
@@ -1051,174 +1313,76 @@ class AutocompleteChipsItem extends BaseAutocompleteItem {
 
 class CheckboxItem extends BaseItem {
     static create(config) {
-        return new CheckboxItem(config, null);
-    }
-    get isTypeCheckbox() {
-        return true;
-    }
-    get isChipVisible() {
-        return this.value === this.checked;
-    }
-    get value() {
-        const value = this.model ? this.checked : this.unchecked;
-        if (!value) {
-            return undefined;
-        }
-        return value;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = this.model ? value : undefined;
-        return params;
-    }
-    getChipsContent(type = null) {
-        return this.label;
-    }
-    _validateModel() { }
-    _parseConfig(item) {
-        this.checked = item.checked;
-        this.unchecked = item.unchecked;
-        this.checked = item.checked ? toString(item.checked) : true;
-        this.unchecked = item.unchecked ? toString(item.unchecked) : false;
-        this.defaultValue = item.default === undefined ? this.unchecked : toString(this.defaultValue);
-        super._parseConfig(item);
-    }
-    _init() {
-        if (this.model === undefined) {
-            this._model = this.checked == this.defaultValue;
-        }
-    }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : false;
-    }
-}
-
-class TextItem extends BaseItem {
-    static create(config) {
-        return new TextItem(config, null);
-    }
-    get value() {
-        return !!this.model ? this.model : undefined;
-    }
-    get queryObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = value;
-        return params;
-    }
-    getChipsContent() {
-        return this.model;
-    }
-    _validateModel() { }
-    _parseConfig(item) {
-        this.prefix = item.prefix;
-        this.suffix = item.suffix;
-        super._parseConfig(item);
-    }
-    _init() { }
-    _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : '';
-    }
-}
-
-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 new CheckboxItem(config, null);
+    }
+    get isTypeCheckbox() {
+        return true;
+    }
+    get isChipVisible() {
+        return this.value === this.checked;
+    }
+    get value() {
+        const value = this.model ? this.checked : this.unchecked;
+        if (!value) {
+            return undefined;
         }
         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],
-        };
+        const params = {};
+        params[name] = this.model ? value : undefined;
+        return params;
     }
     getChipsContent(type = null) {
-        return formatPeriodObject(this.value);
+        return this.label;
     }
     _validateModel() { }
-    _setModel(value) {
-        if (value) {
-            value.from = parseDate(value.from);
-            value.to = parseDate(value.to);
-            value.period = parseInt(value.period, 10) || undefined;
+    _parseConfig(item) {
+        this.checked = item.checked;
+        this.unchecked = item.unchecked;
+        this.checked = item.checked ? toString(item.checked) : true;
+        this.unchecked = item.unchecked ? toString(item.unchecked) : false;
+        this.defaultValue = item.default === undefined ? this.unchecked : toString(this.defaultValue);
+        super._parseConfig(item);
+    }
+    _init() {
+        if (this.model === undefined) {
+            this._model = this.checked == this.defaultValue;
         }
-        super._setModel(value);
     }
+    _clearValue(defaultValue = undefined) {
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : false;
+    }
+}
+
+class TextItem extends BaseItem {
+    static create(config) {
+        return new TextItem(config, null);
+    }
+    get value() {
+        return !!this.model ? this.model : undefined;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        params[name] = value;
+        return params;
+    }
+    getChipsContent() {
+        return this.model;
+    }
+    _validateModel() { }
     _parseConfig(item) {
+        this.prefix = item.prefix;
+        this.suffix = item.suffix;
         super._parseConfig(item);
-        this.seedDate = item.seedDate;
     }
     _init() { }
     _clearValue(defaultValue = undefined) {
-        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : undefined;
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : '';
     }
 }
 
@@ -1541,7 +1705,7 @@ class FsFilterItemsStore {
         }
         return params;
     }
-    initItemValues(p) {
+    init(p) {
         this.items
             .forEach((item) => {
             item.initValues(p[item.name]);
@@ -1549,10 +1713,6 @@ class FsFilterItemsStore {
         this._initSortingItems(p);
         this.loadAsyncDefaults();
         this._subscribeToItemsChanges();
-        this.items
-            .forEach((item) => {
-            item.init(item);
-        });
     }
     updateItemsWithValues(values) {
         this.items
@@ -1701,143 +1861,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) {
@@ -1978,33 +2001,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;
@@ -2219,6 +2215,7 @@ class ExternalParamsController {
         this._savePersistedParams();
     }
     initItems() {
+        this._itemsStore.ready$;
         this._pending$.next(true);
         if (this._savedFilters.enabled) {
             this._savedFilters
@@ -2238,7 +2235,7 @@ class ExternalParamsController {
         this._listenItemsChange();
     }
     _initItemsValues() {
-        this._itemsStore.initItemValues(this.params);
+        this._itemsStore.init(this.params);
         this._saveQueryParams();
         this._savePersistedParams();
     }
@@ -3785,13 +3782,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 class FilterComponent {
-    constructor(_filterOverlay, _zone, _externalParams, _filterItems, _actions, _defaultConfig) {
+    constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions) {
+        this._defaultConfig = _defaultConfig;
         this._filterOverlay = _filterOverlay;
         this._zone = _zone;
         this._externalParams = _externalParams;
         this._filterItems = _filterItems;
         this._actions = _actions;
-        this._defaultConfig = _defaultConfig;
         this.showSortBy = true;
         this.showFilterInput = true;
         this.closed = new EventEmitter();
@@ -4079,6 +4076,13 @@ class FilterComponent {
             this.config.init(data, this._sort);
         }
         this._updateChipsVisibility();
+        // Waiting for external ViewChilds
+        setTimeout(() => {
+            this.items
+                .forEach((item) => {
+                item.init(item);
+            });
+        });
     }
     clear(event = null) {
         if (event) {
@@ -4307,7 +4311,7 @@ class FilterComponent {
         this._hasFilterChips$.next(hasFilterChips);
     }
 }
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, deps: [{ token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: FS_FILTER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }], target: i0.ɵɵFactoryTarget.Component });
 FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterComponent, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy", showFilterInput: "showFilterInput" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass", "class.has-keyword": "this.hasKeyword" } }, providers: [
         FsFilterOverlayService,
         ExternalParamsController,
@@ -4337,12 +4341,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: FsFilterConfig, decorators: [{
+        }], ctorParameters: function () { return [{ type: FsFilterConfig, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [FS_FILTER_CONFIG]
-                }] }]; }, propDecorators: { setConfig: [{
+                }] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }]; }, propDecorators: { setConfig: [{
                 type: Input,
                 args: ['config']
             }], setFilter: [{