@firestitch/filter 18.2.21 → 18.2.23

package/fesm2022/firestitch-filter.mjs

@@ -24,9 +24,9 @@ import * as i6 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import * as i1$2 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
-import { isFunction, clone, toString, isObject } from 'lodash-es';
-import { iso8601, format } from '@firestitch/date';
+import { isObject, isFunction, clone, toString } from 'lodash-es';
 import { isDate, isValid, parseISO } from 'date-fns';
+import { iso8601, format } from '@firestitch/date';
 import * as i3$2 from '@firestitch/datepicker';
 import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -640,6 +640,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+function objectsAreEquals(obj1, obj2) {
+    const oldKeys = Object.keys(obj1);
+    const currKeys = Object.keys(obj2);
+    if (oldKeys.length !== currKeys.length) {
+        return false;
+    }
+    for (const key in obj1) {
+        if (obj1.hasOwnProperty(key)) {
+            const oldItem = obj1[key];
+            const currItem = obj2[key];
+            const isArrays = Array.isArray(oldItem) && Array.isArray(currItem);
+            const isObjects = isObject(oldItem) && isObject(currItem);
+            if (isArrays && !arraysAreEquals(oldItem, currItem)) {
+                return false;
+            }
+            else if (isObjects && !objectsAreEquals(oldItem, currItem)) {
+                return false;
+            }
+            else if (!isArrays && !isObjects && oldItem !== currItem) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+function arraysAreEquals(arr1, arr2) {
+    if (arr1?.length !== arr2.length) {
+        return false;
+    }
+    for (const el of arr1) {
+        if (arr2.indexOf(el) === -1) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function encodeQueryParam(value) {
+    return value
+        .replace(/,/g, '\\,')
+        .replace(/:/g, '\\:');
+}
+
+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;
+}
+
+function getRangeName(name, range) {
+    return name.concat(range.charAt(0).toUpperCase()).concat(range.slice(1));
+}
+
+function parseDate(value) {
+    if (value && (!isDate(value) || !isValid(value))) {
+        return parseISO(value);
+    }
+    return value;
+}
+
+function filterToQueryParam(value, name) {
+    return `${encodeURIComponent(value)}:${encodeURIComponent(name)}`;
+}
+function filterFromQueryParam(param) {
+    const parts = param.split(/(?<!\\):/);
+    return [decodeURIComponent(parts[0]), decodeURIComponent(parts[1])];
+}
+
+function parseItemValueFromStored(item, params) {
+    const param = params[item.name];
+    switch (item.type) {
+        case ItemType.Range: {
+            const min = params[getRangeName(item.name, 'min')];
+            const max = params[getRangeName(item.name, 'max')];
+            return { min: min, max: max };
+        }
+        case ItemType.DateRange:
+        case ItemType.DateTimeRange: {
+            const from = params[getRangeName(item.name, 'from')];
+            const to = params[getRangeName(item.name, 'to')];
+            return { from: from, to: to };
+        }
+        case ItemType.Week: {
+            const from = params[getRangeName(item.name, 'from')];
+            const to = params[getRangeName(item.name, 'to')];
+            const period = params[`${item.name}Period`];
+            return { from, to, period };
+        }
+        case ItemType.Select: {
+            return itemTypeSelect(item, param);
+        }
+        case ItemType.Checkbox: {
+            return param === 'true' || param === true;
+        }
+        case ItemType.AutoComplete: {
+            const filterParts = filterFromQueryParam(param);
+            return {
+                name: filterParts[1],
+                value: 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]
+                        .replace(/\\,/g, ',')
+                        .replace(/\\:/g, ':'),
+                    value: chipParts[0],
+                });
+                return arry;
+            }, []);
+        }
+        default: {
+            return param;
+        }
+    }
+}
+function itemTypeSelect(item, param) {
+    if (!param) {
+        return [];
+    }
+    const values = param.split(',');
+    if (item.isolate) {
+        const isolatedValue = item.isolateValues;
+        item.isolate = arraysHaveSameElements(isolatedValue, values);
+        return item.isolate
+            ? isolatedValue
+            : values;
+    }
+    return values;
+}
+function arraysHaveSameElements(arr1, arr2) {
+    arr1 = [...arr1].sort();
+    arr2 = [...arr2].sort();
+    return arr1.some((item) => {
+        return arr2.includes(item);
+    });
+}
+
 class BaseItem {
     _additionalConfig;
     _filter;
@@ -850,101 +999,380 @@ class BaseItem {
     }
 }
 
-class BaseAutocompleteItem extends BaseItem {
-    _additionalConfig;
-    _filter;
-    search;
-    get valuesFn() {
-        return this._valuesFn;
+class BaseDateRangeItem extends BaseItem {
+    get isTypeDateRange() {
+        return this.type === ItemType.DateRange;
     }
-    constructor(itemConfig, _additionalConfig, _filter) {
-        super(itemConfig, _additionalConfig, _filter);
-        this._additionalConfig = _additionalConfig;
-        this._filter = _filter;
-        this.fetchOnFocus = itemConfig.fetchOnFocus ?? true;
+    get isTypeDateTimeRange() {
+        return this.type === ItemType.DateTimeRange;
     }
-}
-
-class AutocompleteChipsItem extends BaseAutocompleteItem {
-    _additionalConfig;
-    _filter;
-    constructor(itemConfig, _additionalConfig, _filter) {
-        super(itemConfig, _additionalConfig, _filter);
-        this._additionalConfig = _additionalConfig;
-        this._filter = _filter;
-        this.chipImage = itemConfig.chipImage ?? 'image';
-        this.chipIcon = itemConfig.chipIcon;
-        this.chipIconColor = itemConfig.chipIconColor;
-        this.chipColor = itemConfig.chipColor;
-        this.chipBackground = itemConfig.chipBackground;
-        this.chipClass = itemConfig.chipClass;
-        this.panelActions = itemConfig.panelActions || [];
+    get hasValue() {
+        return this.value?.from instanceof Date || this.value?.to instanceof Date;
     }
-    static create(config, filter) {
-        return new AutocompleteChipsItem(config, null, filter);
+    setValue(value, emitChange = true) {
+        let from = value?.from;
+        let to = value?.to;
+        if (value) {
+            if (from && (!isDate(from) || !isValid(from))) {
+                from = parseISO(from);
+            }
+            if (to && (!isDate(to) || !isValid(to))) {
+                to = parseISO(to);
+            }
+        }
+        super.setValue({ from, to }, emitChange);
     }
     get queryParam() {
         if (!this.hasValue) {
             return {};
         }
-        return {
-            [this.name]: this.value
-                .map((item) => `${item.value}:${item.name}`)
-                .join(','),
-        };
+        const value = {};
+        const paramFromName = getRangeName(this.name, 'from');
+        const paramToName = getRangeName(this.name, 'to');
+        if (this.value.from) {
+            value[paramFromName] = iso8601(this.value.from);
+        }
+        if (this.value.to) {
+            value[paramToName] = iso8601(this.value.to);
+        }
+        return value;
     }
     get query() {
         if (!this.hasValue) {
             return {};
         }
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        if (Array.isArray(value)) {
-            params[this.name] = value
-                .filter((item) => !!item.value)
-                .map((item) => item.value)
-                .join(',');
+        const value = {};
+        const paramFromName = getRangeName(this.name, 'from');
+        const paramToName = getRangeName(this.name, 'to');
+        if (this.value.from) {
+            value[paramFromName] = this.value.from;
         }
-        else {
-            params[name] = value;
+        if (this.value.to) {
+            value[paramToName] = this.value.to;
         }
-        return params;
+        return value;
     }
     get chips() {
-        return this.hasValue ? [
-            {
-                value: super.value
-                    .reduce((acc, i) => {
-                    acc.push((`${i.name}`).trim());
-                    return acc;
-                }, [])
-                    .join(', '),
-                label: this.label,
-            },
-        ] : [];
-    }
-    get hasValue() {
-        return Array.isArray(super.value) && super.value.length > 0;
+        const dateFormat = this.type === ItemType.DateRange ? 'date' : 'date-time';
+        const chips = [];
+        if (this.value?.from) {
+            chips.push({
+                name: 'from',
+                value: format(this.value.from, dateFormat),
+                label: this.label[0],
+            });
+        }
+        if (this.value?.to) {
+            chips.push({
+                name: 'to',
+                value: format(this.value.to, dateFormat),
+                label: this.label[1],
+            });
+        }
+        return chips;
     }
-    setValue(value, emitChange = true) {
-        super.setValue(Array.isArray(value) ? value : [], emitChange);
+    clear(name = null) {
+        if (name === 'from') {
+            delete this.value.from;
+            if (this.defaultValue?.from) {
+                this.value.from = this.defaultValue.from;
+            }
+            this.value = { ...this.value };
+        }
+        else if (name === 'to') {
+            delete this.value.to;
+            if (this.defaultValue?.to) {
+                this.value.to = this.defaultValue.to;
+            }
+            this.value = { ...this.value };
+        }
+        else {
+            this.value = this.defaultValue ? { ...this.defaultValue } : {};
+        }
     }
 }
 
-class AutocompleteItem extends BaseAutocompleteItem {
+class DateRangeItem extends BaseDateRangeItem {
     static create(config, filter) {
-        return new AutocompleteItem(config, null, filter);
+        return new DateRangeItem(config, null, filter);
     }
-    get value() {
-        let value = clone(super.value);
-        if (!super.value || super.value.value === undefined) {
-            return undefined;
-        }
-        value = super.value.value;
-        return value;
+}
+
+class DateTimeRangeItem extends BaseDateRangeItem {
+    static create(config, filter) {
+        return new DateTimeRangeItem(config, null, filter);
     }
-    get query() {
+}
+
+class RangeItem extends BaseItem {
+    _additionalConfig;
+    _filter;
+    constructor(itemConfig, _additionalConfig, _filter) {
+        super(itemConfig, _additionalConfig, _filter);
+        this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
+        this.options = itemConfig.options;
+        this.prefix = itemConfig.prefix;
+        this.suffix = itemConfig.suffix;
+    }
+    static create(config, additionalConfig, filter) {
+        return new RangeItem(config, additionalConfig, filter);
+    }
+    get query() {
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        const paramMinName = getRangeName(name, 'min');
+        const paramMaxName = getRangeName(name, 'max');
+        if (isObject(value)) {
+            params[paramMinName] = value.min || undefined;
+            params[paramMaxName] = value.max || undefined;
+        }
+        else {
+            params[paramMinName] = undefined;
+            params[paramMaxName] = undefined;
+        }
+        return params;
+    }
+    get chips() {
+        const chips = [];
+        if (this.value.min) {
+            chips.push({
+                name: 'min',
+                label: this.label[0],
+                value: this.value.min,
+            });
+        }
+        if (this.value.max) {
+            chips.push({
+                name: 'max',
+                label: this.label[1],
+                value: this.value.max,
+            });
+        }
+        return chips;
+    }
+    clear(name = null) {
+        let value = this.value;
+        if (name === 'min') {
+            value.min = this.defaultValue?.min;
+        }
+        else if (name === 'max') {
+            value.max = this.defaultValue?.max;
+        }
+        else {
+            value = this.defaultValue ? { ...this.defaultValue } : {};
+        }
+        this.value = { ...value };
+    }
+    get hasValue() {
+        return this.value?.min !== undefined || super.value?.max !== undefined;
+    }
+    setValue(value, emitChange = true) {
+        super.setValue({
+            min: value?.min,
+            max: value?.max,
+        }, emitChange);
+    }
+    init(value) {
+        return super.init(value)
+            .pipe(tap$1(() => {
+            if (!this.label) {
+                this.label = ['Min', 'Max'];
+            }
+            if (!this.value) {
+                this.value = this.defaultValue || {};
+            }
+        }));
+    }
+}
+
+class WeekItem extends BaseItem {
+    _additionalConfig;
+    _filter;
+    constructor(itemConfig, _additionalConfig, _filter) {
+        super(itemConfig, _additionalConfig, _filter);
+        this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
+        this.seedDate = itemConfig.seedDate;
+    }
+    static create(config, filter) {
+        return new WeekItem(config, null, filter);
+    }
+    setValue(value, emitChange = true) {
+        if (value) {
+            value.from = parseDate(value.from);
+            value.to = parseDate(value.to);
+            value.period = parseInt(value.period, 10) || undefined;
+        }
+        super.setValue(value, emitChange);
+    }
+    get query() {
+        const value = this.value;
+        const name = this.name;
+        const paramFromName = getRangeName(name, 'from');
+        const paramToName = getRangeName(name, 'to');
+        const paramPeriodName = `${name}Period`;
+        return {
+            [paramFromName]: value?.from || undefined,
+            [paramToName]: value?.to || undefined,
+            [paramPeriodName]: value?.period || undefined,
+        };
+    }
+    get chips() {
+        if (!this.hasValue) {
+            return [];
+        }
+        return [
+            {
+                value: formatPeriodObject(this.value),
+                label: this.label,
+            },
+        ];
+    }
+}
+
+/**
+ * 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) {
+    const result = {};
+    Object.keys(params)
+        .forEach((name) => {
+        const item = findItemWidthName(items, name);
+        if (item) {
+            result[item.name] = parseItemValueFromStored(item, params);
+        }
+    });
+    return result;
+}
+function findItemWidthName(items, name) {
+    return items
+        .find((filterItem) => {
+        if (filterItem instanceof RangeItem) {
+            return name === getRangeName(filterItem.name, 'min') ||
+                name === getRangeName(filterItem.name, 'max') ||
+                name === filterItem.name;
+        }
+        else if (filterItem instanceof DateRangeItem || filterItem instanceof DateTimeRangeItem) {
+            return name === getRangeName(filterItem.name, 'from') ||
+                name === getRangeName(filterItem.name, 'to');
+        }
+        else if (filterItem instanceof WeekItem) {
+            return name === getRangeName(filterItem.name, 'from')
+                || name === getRangeName(filterItem.name, 'to')
+                || name === `${filterItem.name}Period`;
+        }
+        return filterItem.name === name;
+    });
+}
+
+class BaseAutocompleteItem extends BaseItem {
+    _additionalConfig;
+    _filter;
+    search;
+    get valuesFn() {
+        return this._valuesFn;
+    }
+    constructor(itemConfig, _additionalConfig, _filter) {
+        super(itemConfig, _additionalConfig, _filter);
+        this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
+        this.fetchOnFocus = itemConfig.fetchOnFocus ?? true;
+    }
+}
+
+class AutocompleteChipsItem extends BaseAutocompleteItem {
+    _additionalConfig;
+    _filter;
+    constructor(itemConfig, _additionalConfig, _filter) {
+        super(itemConfig, _additionalConfig, _filter);
+        this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
+        this.chipImage = itemConfig.chipImage ?? 'image';
+        this.chipIcon = itemConfig.chipIcon;
+        this.chipIconColor = itemConfig.chipIconColor;
+        this.chipColor = itemConfig.chipColor;
+        this.chipBackground = itemConfig.chipBackground;
+        this.chipClass = itemConfig.chipClass;
+        this.panelActions = itemConfig.panelActions || [];
+    }
+    static create(config, filter) {
+        return new AutocompleteChipsItem(config, null, filter);
+    }
+    get queryParam() {
+        if (!this.hasValue) {
+            return {};
+        }
+        return {
+            [this.name]: this.value
+                .filter((item) => !!item.value)
+                .map((item) => {
+                return `${item.value}:${encodeQueryParam(item.name)}`;
+            })
+                .join(','),
+        };
+    }
+    get query() {
+        if (!this.hasValue) {
+            return {};
+        }
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        if (Array.isArray(value)) {
+            params[this.name] = value
+                .filter((item) => !!item.value)
+                .map((item) => item.value)
+                .join(',');
+        }
+        else {
+            params[name] = value;
+        }
+        return params;
+    }
+    get chips() {
+        return this.hasValue ? [
+            {
+                value: super.value
+                    .reduce((acc, i) => {
+                    acc.push((`${i.name}`).trim());
+                    return acc;
+                }, [])
+                    .join(', '),
+                label: this.label,
+            },
+        ] : [];
+    }
+    get hasValue() {
+        return Array.isArray(super.value) && super.value.length > 0;
+    }
+    setValue(value, emitChange = true) {
+        super.setValue(Array.isArray(value) ? value : [], emitChange);
+    }
+}
+
+class AutocompleteItem extends BaseAutocompleteItem {
+    static create(config, filter) {
+        return new AutocompleteItem(config, null, filter);
+    }
+    get value() {
+        let value = clone(super.value);
+        if (!super.value || super.value.value === undefined) {
+            return undefined;
+        }
+        value = super.value.value;
+        return value;
+    }
+    get query() {
         const value = this.value;
         const name = this.name;
         const params = {};
@@ -972,12 +1400,6 @@ class CheckboxItem extends BaseItem {
         this._unchecked = itemConfig.unchecked ? toString(itemConfig.unchecked) : undefined;
         this.defaultValue = itemConfig.default;
     }
-    init(value) {
-        return super.init(value)
-            .pipe(tap(() => {
-            this.value = value === 'true' || value === true;
-        }));
-    }
     get checked() {
         return this._checked;
     }
@@ -1011,7 +1433,7 @@ class CheckboxItem extends BaseItem {
             return {};
         }
         return {
-            [this.name]: this.checked,
+            [this.name]: 'true',
         };
     }
     clear() {
@@ -1040,7 +1462,7 @@ class ChipsItem extends BaseItem {
         }
         return {
             [this.name]: this.value
-                .map((item) => `${item.value}:${item.name}`)
+                .map((item) => `${item.value}:${encodeQueryParam(item.name)}`)
                 .join(','),
         };
     }
@@ -1085,247 +1507,55 @@ class BaseDateItem extends BaseItem {
     constructor(itemConfig, _additionalConfig, _filter) {
         super(itemConfig, _additionalConfig, _filter);
         this._additionalConfig = _additionalConfig;
-        this._filter = _filter;
-        this.maxYear = itemConfig.maxYear;
-        this.mode = itemConfig.mode || ItemDateMode.Calendar;
-    }
-    setValue(value, emitChange = true) {
-        if (value) {
-            if (!isDate(value) || !isValid(value)) {
-                value = parseISO(value);
-            }
-        }
-        super.setValue(value, emitChange);
-    }
-}
-
-class DateItem extends BaseDateItem {
-    static create(config, filter) {
-        return new DateItem(config, null, filter);
-    }
-    get queryParam() {
-        if (!this.hasValue) {
-            return {};
-        }
-        return {
-            [this.name]: iso8601(super.value),
-        };
-    }
-    get chips() {
-        if (!this.hasValue) {
-            return [];
-        }
-        let dateFormat = 'date';
-        if (this.mode === ItemDateMode.ScrollMonthYear) {
-            dateFormat = 'full-date-dayless';
-        }
-        return [
-            {
-                value: format(super.value, dateFormat),
-                label: this.label,
-            },
-        ];
-    }
-}
-
-function getRangeName(name, range) {
-    return name.concat(range.charAt(0).toUpperCase()).concat(range.slice(1));
-}
-
-class BaseDateRangeItem extends BaseItem {
-    get isTypeDateRange() {
-        return this.type === ItemType.DateRange;
-    }
-    get isTypeDateTimeRange() {
-        return this.type === ItemType.DateTimeRange;
-    }
-    get hasValue() {
-        return this.value?.from instanceof Date || this.value?.to instanceof Date;
-    }
-    setValue(value, emitChange = true) {
-        let from = value?.from;
-        let to = value?.to;
-        if (value) {
-            if (from && (!isDate(from) || !isValid(from))) {
-                from = parseISO(from);
-            }
-            if (to && (!isDate(to) || !isValid(to))) {
-                to = parseISO(to);
-            }
-        }
-        super.setValue({ from, to }, emitChange);
-    }
-    get queryParam() {
-        if (!this.hasValue) {
-            return {};
-        }
-        const value = {};
-        const paramFromName = getRangeName(this.name, 'from');
-        const paramToName = getRangeName(this.name, 'to');
-        if (this.value.from) {
-            value[paramFromName] = iso8601(this.value.from);
-        }
-        if (this.value.to) {
-            value[paramToName] = iso8601(this.value.to);
-        }
-        return value;
-    }
-    get query() {
-        if (!this.hasValue) {
-            return {};
-        }
-        const value = {};
-        const paramFromName = getRangeName(this.name, 'from');
-        const paramToName = getRangeName(this.name, 'to');
-        if (this.value.from) {
-            value[paramFromName] = this.value.from;
-        }
-        if (this.value.to) {
-            value[paramToName] = this.value.to;
-        }
-        return value;
-    }
-    get chips() {
-        const dateFormat = this.type === ItemType.DateRange ? 'date' : 'date-time';
-        const chips = [];
-        if (this.value?.from) {
-            chips.push({
-                name: 'from',
-                value: format(this.value.from, dateFormat),
-                label: this.label[0],
-            });
-        }
-        if (this.value?.to) {
-            chips.push({
-                name: 'to',
-                value: format(this.value.to, dateFormat),
-                label: this.label[1],
-            });
-        }
-        return chips;
-    }
-    clear(name = null) {
-        if (name === 'from') {
-            delete this.value.from;
-            if (this.defaultValue?.from) {
-                this.value.from = this.defaultValue.from;
-            }
-            this.value = { ...this.value };
-        }
-        else if (name === 'to') {
-            delete this.value.to;
-            if (this.defaultValue?.to) {
-                this.value.to = this.defaultValue.to;
-            }
-            this.value = { ...this.value };
-        }
-        else {
-            this.value = this.defaultValue ? { ...this.defaultValue } : {};
-        }
-    }
-}
-
-class DateRangeItem extends BaseDateRangeItem {
-    static create(config, filter) {
-        return new DateRangeItem(config, null, filter);
-    }
-}
-
-class DateTimeItem extends BaseDateItem {
-    static create(config, filter) {
-        return new DateTimeItem(config, null, filter);
-    }
-    get chips() {
-        return [];
-    }
-}
-
-class DateTimeRangeItem extends BaseDateRangeItem {
-    static create(config, filter) {
-        return new DateTimeRangeItem(config, null, filter);
-    }
-}
-
-class RangeItem extends BaseItem {
-    _additionalConfig;
-    _filter;
-    constructor(itemConfig, _additionalConfig, _filter) {
-        super(itemConfig, _additionalConfig, _filter);
-        this._additionalConfig = _additionalConfig;
-        this._filter = _filter;
-        this.options = itemConfig.options;
-        this.prefix = itemConfig.prefix;
-        this.suffix = itemConfig.suffix;
-    }
-    static create(config, additionalConfig, filter) {
-        return new RangeItem(config, additionalConfig, filter);
-    }
-    get query() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        const paramMinName = getRangeName(name, 'min');
-        const paramMaxName = getRangeName(name, 'max');
-        if (isObject(value)) {
-            params[paramMinName] = value.min || undefined;
-            params[paramMaxName] = value.max || undefined;
-        }
-        else {
-            params[paramMinName] = undefined;
-            params[paramMaxName] = undefined;
-        }
-        return params;
+        this._filter = _filter;
+        this.maxYear = itemConfig.maxYear;
+        this.mode = itemConfig.mode || ItemDateMode.Calendar;
     }
-    get chips() {
-        const chips = [];
-        if (this.value.min) {
-            chips.push({
-                name: 'min',
-                label: this.label[0],
-                value: this.value.min,
-            });
-        }
-        if (this.value.max) {
-            chips.push({
-                name: 'max',
-                label: this.label[1],
-                value: this.value.max,
-            });
+    setValue(value, emitChange = true) {
+        if (value) {
+            if (!isDate(value) || !isValid(value)) {
+                value = parseISO(value);
+            }
         }
-        return chips;
+        super.setValue(value, emitChange);
     }
-    clear(name = null) {
-        let value = this.value;
-        if (name === 'min') {
-            value.min = this.defaultValue?.min;
+}
+
+class DateItem extends BaseDateItem {
+    static create(config, filter) {
+        return new DateItem(config, null, filter);
+    }
+    get queryParam() {
+        if (!this.hasValue) {
+            return {};
         }
-        else if (name === 'max') {
-            value.max = this.defaultValue?.max;
+        return {
+            [this.name]: iso8601(super.value),
+        };
+    }
+    get chips() {
+        if (!this.hasValue) {
+            return [];
         }
-        else {
-            value = this.defaultValue ? { ...this.defaultValue } : {};
+        let dateFormat = 'date';
+        if (this.mode === ItemDateMode.ScrollMonthYear) {
+            dateFormat = 'full-date-dayless';
         }
-        this.value = { ...value };
-    }
-    get hasValue() {
-        return this.value?.min !== undefined || super.value?.max !== undefined;
+        return [
+            {
+                value: format(super.value, dateFormat),
+                label: this.label,
+            },
+        ];
     }
-    setValue(value, emitChange = true) {
-        super.setValue({
-            min: value?.min,
-            max: value?.max,
-        }, emitChange);
+}
+
+class DateTimeItem extends BaseDateItem {
+    static create(config, filter) {
+        return new DateTimeItem(config, null, filter);
     }
-    init(value) {
-        return super.init(value)
-            .pipe(tap$1(() => {
-            if (!this.label) {
-                this.label = ['Min', 'Max'];
-            }
-            if (!this.value) {
-                this.value = this.defaultValue || {};
-            }
-        }));
+    get chips() {
+        return [];
     }
 }
 
@@ -1456,58 +1686,6 @@ class TextItem extends BaseItem {
     }
 }
 
-function parseDate(value) {
-    if (value && (!isDate(value) || !isValid(value))) {
-        return parseISO(value);
-    }
-    return value;
-}
-
-class WeekItem extends BaseItem {
-    _additionalConfig;
-    _filter;
-    constructor(itemConfig, _additionalConfig, _filter) {
-        super(itemConfig, _additionalConfig, _filter);
-        this._additionalConfig = _additionalConfig;
-        this._filter = _filter;
-        this.seedDate = itemConfig.seedDate;
-    }
-    static create(config, filter) {
-        return new WeekItem(config, null, filter);
-    }
-    setValue(value, emitChange = true) {
-        if (value) {
-            value.from = parseDate(value.from);
-            value.to = parseDate(value.to);
-            value.period = parseInt(value.period, 10) || undefined;
-        }
-        super.setValue(value, emitChange);
-    }
-    get query() {
-        const value = this.value;
-        const name = this.name;
-        const paramFromName = getRangeName(name, 'from');
-        const paramToName = getRangeName(name, 'to');
-        const paramPeriodName = `${name}Period`;
-        return {
-            [paramFromName]: value?.from || undefined,
-            [paramToName]: value?.to || undefined,
-            [paramPeriodName]: value?.period || undefined,
-        };
-    }
-    get chips() {
-        if (!this.hasValue) {
-            return [];
-        }
-        return [
-            {
-                value: formatPeriodObject(this.value),
-                label: this.label,
-            },
-        ];
-    }
-}
-
 function createFilterItem(item, config, filter) {
     switch (item.type) {
         case ItemType.Select: {
@@ -1668,131 +1846,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
-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 parseItemValueFromStored(item, params) {
-    const param = params[item.name];
-    switch (item.type) {
-        case ItemType.Range: {
-            const min = params[getRangeName(item.name, 'min')];
-            const max = params[getRangeName(item.name, 'max')];
-            return { min: min, max: max };
-        }
-        case ItemType.DateRange:
-        case ItemType.DateTimeRange: {
-            const from = params[getRangeName(item.name, 'from')];
-            const to = params[getRangeName(item.name, 'to')];
-            return { from: from, to: to };
-        }
-        case ItemType.Week: {
-            const from = params[getRangeName(item.name, 'from')];
-            const to = params[getRangeName(item.name, 'to')];
-            const period = params[`${item.name}Period`];
-            return { from, to, period };
-        }
-        case ItemType.Select: {
-            return itemTypeSelect(item, param);
-        }
-        case ItemType.Checkbox: {
-            return param === 'true' || param === true;
-        }
-        case ItemType.AutoComplete: {
-            const filterParts = filterFromQueryParam(param);
-            return {
-                name: filterParts[1],
-                value: 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: chipParts[0],
-                });
-                return arry;
-            }, []);
-        }
-        default: {
-            return param;
-        }
-    }
-}
-function itemTypeSelect(item, param) {
-    if (!param) {
-        return [];
-    }
-    const values = param.split(',');
-    if (item.isolate) {
-        const isolatedValue = item.isolateValues;
-        item.isolate = arraysHaveSameElements(isolatedValue, values);
-        return item.isolate
-            ? isolatedValue
-            : values;
-    }
-    return values;
-}
-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) {
-    const result = {};
-    Object.keys(params)
-        .forEach((name) => {
-        const item = findItemWidthName(items, name);
-        if (item) {
-            result[item.name] = parseItemValueFromStored(item, params);
-        }
-    });
-    return result;
-}
-function findItemWidthName(items, name) {
-    return items
-        .find((filterItem) => {
-        if (filterItem instanceof RangeItem) {
-            return name === getRangeName(filterItem.name, 'min') ||
-                name === getRangeName(filterItem.name, 'max') ||
-                name === filterItem.name;
-        }
-        else if (filterItem instanceof DateRangeItem || filterItem instanceof DateTimeRangeItem) {
-            return name === getRangeName(filterItem.name, 'from') ||
-                name === getRangeName(filterItem.name, 'to');
-        }
-        else if (filterItem instanceof WeekItem) {
-            return name === getRangeName(filterItem.name, 'from')
-                || name === getRangeName(filterItem.name, 'to')
-                || name === `${filterItem.name}Period`;
-        }
-        return filterItem.name === name;
-    });
-}
-
 class SortController {
     _name = null;
     _direction = null;
@@ -1903,11 +1956,12 @@ class QueryParamController {
         const url = new URL(window.location.href);
         Object.keys(data)
             .forEach((name) => {
-            if (data[name] === undefined || data[name] === null) {
+            const value = data[name];
+            if (value === undefined || value === null) {
                 url.searchParams.delete(name);
             }
             else {
-                url.searchParams.set(name, data[name]);
+                url.searchParams.set(name, value);
             }
         });
         history.replaceState({}, null, url.pathname + decodeURIComponent(url.search));
@@ -4110,5 +4164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionMode, AutocompleteChipsItem, AutocompleteItem, BaseItem, ButtonStyle, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, ItemDateMode, ItemType, MenuActionMode, QUERY_PARAM_DELIMITER, RangeItem, SavedFilterController, SelectItem, TextItem, filterFromQueryParam, filterToQueryParam };
+export { ActionMode, AutocompleteChipsItem, AutocompleteItem, BaseItem, ButtonStyle, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, ItemDateMode, ItemType, MenuActionMode, RangeItem, SavedFilterController, SelectItem, TextItem, filterFromQueryParam, filterToQueryParam };
 //# sourceMappingURL=firestitch-filter.mjs.map