@firestitch/filter 18.0.3 → 18.0.5

package/fesm2022/firestitch-filter.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, ViewChild, Pipe, HostListener, ElementRef, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, ViewChild, Pipe, HostListener, inject, ElementRef, ContentChild, HostBinding, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, fromEvent, merge, interval } from 'rxjs';
 import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, mapTo, startWith, map, delay, skip } from 'rxjs/operators';
 import { filter, isArrayEqual, list, isEmpty, getNormalizedPath, remove, FsCommonModule } from '@firestitch/common';
@@ -37,7 +37,7 @@ import * as i6$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i2$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
 import * as i12 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -64,6 +64,7 @@ import * as i5$2 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$4 from '@angular/cdk/layout';
 import * as i3$5 from '@firestitch/html';
 
@@ -137,15 +138,15 @@ class BaseItem {
     change;
     init;
     _type;
-    _model;
+    _model = undefined;
     _pendingValues = false;
     _pendingDefaultValue = false;
     _initializedValues = false;
+    _valuesFn;
     _loading$ = new BehaviorSubject(false);
     _value$ = new BehaviorSubject(null);
     _valueChange$ = new Subject();
     _values$ = new BehaviorSubject(null);
-    _valuesFn;
     _destroy$ = new Subject();
     _clear$ = new Subject();
     constructor(itemConfig, _additionalConfig, _filter) {
@@ -242,9 +243,6 @@ class BaseItem {
     set loading(value) {
         this._loading$.next(value);
     }
-    get _initialized() {
-        return !this._pendingDefaultValue && !this._pendingValues && this._initializedValues;
-    }
     valueChanged() {
         this._value$.next(this.value);
         if (this.change) {
@@ -325,9 +323,6 @@ class BaseItem {
         this._clear$.next(defaultValue);
         this._clearValue(defaultValue);
     }
-    getChipsContent(type) {
-        return '';
-    }
     destroy() {
         this._destroy$.next(null);
         this._destroy$.complete();
@@ -345,10 +340,10 @@ class BaseItem {
         else {
             this.defaultValue = item.default;
         }
-        this.change = item.change;
-        this.init = item.init || ((_) => {
+        this.init = item.init || (() => {
             //
         });
+        this.change = item.change;
         this.hide = item.hide;
         this.showClear = item.clear ?? true;
         this.persistanceDisabled = item.disablePersist ?? false;
@@ -369,6 +364,9 @@ class BaseItem {
     _clearValue(defaultValue = undefined) {
         this.model = defaultValue ?? undefined;
     }
+    get _initialized() {
+        return !this._pendingDefaultValue && !this._pendingValues && this._initializedValues;
+    }
 }
 
 class BaseSelectItem extends BaseItem {
@@ -821,7 +819,9 @@ class WeekItem extends BaseItem {
     getChipsContent(type = null) {
         return formatPeriodObject(this.value);
     }
-    _validateModel() { }
+    _validateModel() {
+        //
+    }
     _setModel(value) {
         if (value) {
             value.from = parseDate(value.from);
@@ -1069,19 +1069,22 @@ class AutocompleteItem extends BaseAutocompleteItem {
 }
 
 class CheckboxItem extends BaseItem {
-    checked;
-    unchecked;
-    static create(config, filter) {
-        return new CheckboxItem(config, null, filter);
+    _checked;
+    _unchecked;
+    constructor(config, _additionalConfig, filter) {
+        super(config, null, filter);
+        this.defaultValue = config.default === undefined ? this._unchecked : toString(this.defaultValue);
+        this._checked = config.checked ? toString(config.checked) : true;
+        this._unchecked = config.unchecked ? toString(config.unchecked) : false;
     }
     get isTypeCheckbox() {
         return true;
     }
     get isChipVisible() {
-        return this.value === this.checked;
+        return this.value === this._checked;
     }
     get value() {
-        const value = this.model ? this.checked : this.unchecked;
+        const value = this.model ? this._checked || 'true' : this._unchecked;
         if (!value) {
             return undefined;
         }
@@ -1100,17 +1103,9 @@ class CheckboxItem extends BaseItem {
     _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;
+        if (this.model === undefined && this.defaultValue !== undefined) {
+            this._model = this._checked === this.defaultValue;
         }
     }
     _clearValue(defaultValue = undefined) {
@@ -1278,6 +1273,9 @@ class DateTimeItem extends BaseDateItem {
     static create(config, filter) {
         return new DateTimeItem(config, null, filter);
     }
+    getChipsContent() {
+        return null;
+    }
     _clearValue(defaultValue = undefined) {
         this.model = defaultValue ?? undefined;
     }
@@ -1438,7 +1436,7 @@ function createFilterItem(item, config, filter) {
             return AutocompleteChipsItem.create(item, filter);
         }
         case ItemType.Checkbox: {
-            return CheckboxItem.create(item, filter);
+            return new CheckboxItem(item, null, filter);
         }
         case ItemType.Keyword:
         case ItemType.Text: {
@@ -1486,8 +1484,8 @@ var PickerViewType;
     PickerViewType["MonthRange"] = "monthrange";
 })(PickerViewType || (PickerViewType = {}));
 
-const SORT_BY_FIELD = 'sortName';
-const SORT_DIRECTION_FIELD = 'sortDirection';
+const SortByField = 'sortName';
+const SortDirectionField = 'sortDirection';
 class FsFilterConfig {
     load = true;
     persist = false;
@@ -1497,7 +1495,6 @@ class FsFilterConfig {
     chips = false;
     sortValues = null;
     sort = null;
-    // public sortDirection = null;
     queryParam = false;
     init;
     change;
@@ -1550,7 +1547,7 @@ class FsFilterConfig {
             this.button.label = 'Filters';
         }
         if (this.button.icon === undefined) {
-            this.button.icon = 'filter_alt';
+            this.button.icon = 'filterOutline';
         }
         if (this.button.style === undefined) {
             this.button.style = ButtonStyle.Raised;
@@ -1570,9 +1567,8 @@ class FsFilterItemsStore {
     keywordItem = null;
     filter;
     _ready$ = new BehaviorSubject(false);
-    _items = [];
     _visibleItems$ = new BehaviorSubject([]);
-    _itemsByName = new Map();
+    _items = new Map();
     _itemsValuesLoaded = false;
     _hasKeyword = false;
     _config;
@@ -1582,10 +1578,10 @@ class FsFilterItemsStore {
         this._lazyInit();
     }
     get items() {
-        return this._items;
+        return Array.from(this._items.values());
     }
     get itemNames() {
-        return this._items.map((item) => item.name);
+        return this.items.map((item) => item.name);
     }
     get visibleItems() {
         return this._visibleItems$.getValue();
@@ -1611,12 +1607,11 @@ class FsFilterItemsStore {
         this._destroy$.complete();
     }
     setConfig(config) {
-        this._itemsByName.clear();
         this._config = config;
         this.initItems(config.items);
     }
     getItemByName(name) {
-        return this._itemsByName.get(name);
+        return this._items.get(name);
     }
     initItems(items) {
         this._itemsValuesLoaded = false;
@@ -1738,7 +1733,7 @@ class FsFilterItemsStore {
         });
         if (onlyPresented) {
             return pickBy(params, (val) => {
-                return val !== void 0;
+                return val !== undefined;
             });
         }
         return params;
@@ -1785,7 +1780,7 @@ class FsFilterItemsStore {
             .forEach((item) => item.destroy());
         this.sortByItem?.destroy();
         this.sortDirectionItem?.destroy();
-        this._items = [];
+        this._items.clear();
         this.sortByItem = null;
         this.sortDirectionItem = null;
     }
@@ -1803,25 +1798,22 @@ class FsFilterItemsStore {
             .filter((item) => !item.isTypeKeyword && !item.hide);
     }
     _createItems(items) {
-        this._items = items
+        this._items = new Map(items
             .filter((item) => !item.disable)
             .filter((item) => {
-            if (this._itemsByName.has(item.name)) {
+            if (this._items.has(item.name)) {
                 throw Error('Filter init error. Items name must be unique.');
             }
-            else {
-                this._itemsByName.set(item.name, null);
-                return true;
-            }
+            return true;
         })
             .map((item) => {
             const filterItem = createFilterItem(item, { case: this._config.case }, this.filter);
             if (filterItem.type === ItemType.Keyword) {
                 this._hasKeyword = true;
             }
-            this._itemsByName.set(item.name, filterItem);
-            return filterItem;
-        });
+            this._items.set(item.name, filterItem);
+            return [item.name, filterItem];
+        }));
         this._createSortingItems();
     }
     _subscribeToItemsChanges() {
@@ -1863,7 +1855,7 @@ class FsFilterItemsStore {
     _createSortingItems() {
         if (this._config.sortValues?.length > 0) {
             const sortByItem = {
-                name: SORT_BY_FIELD,
+                name: SortByField,
                 type: ItemType.Select,
                 label: 'Sort by',
                 values: this._config.sortValues,
@@ -1873,7 +1865,7 @@ class FsFilterItemsStore {
             }
             this.sortByItem = new SimpleSelectItem(sortByItem, null, this.filter);
             const sortDirectionItem = {
-                name: SORT_DIRECTION_FIELD,
+                name: SortDirectionField,
                 type: ItemType.Select,
                 label: 'Sort direction',
                 values: [
@@ -1899,13 +1891,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-const FILTER_STORE_KEY = 'fs-filter-persist';
 class PersistanceParamsController extends FsPersistanceStore {
     _location;
     _itemsStore;
     _dialogRef;
     _drawerRef;
-    STORE_KEY = FILTER_STORE_KEY;
     _paramsCase;
     constructor(_store, _route, _location, _itemsStore, _dialogRef, _drawerRef) {
         super(_store, _route);
@@ -2677,30 +2667,20 @@ class FsFilterChipContentComponent {
             if (this.item.chipLabel === '') {
                 return `${result}`;
             }
-            else {
-                if (Array.isArray(this.item.chipLabel)) {
-                    const label = getLabelFromArray(this.item.chipLabel, this.type);
-                    return `${label}: ${result}`;
-                }
-                else {
-                    return `${this.item.chipLabel}: ${result}`;
-                }
-            }
-        }
-        else {
-            if (Array.isArray(this.item.label)) {
-                const label = getLabelFromArray(this.item.label, this.type);
+            if (Array.isArray(this.item.chipLabel)) {
+                const label = getLabelFromArray(this.item.chipLabel, this.type);
                 return `${label}: ${result}`;
             }
-            else {
-                if (this.item.isTypeCheckbox) {
-                    return result;
-                }
-                else {
-                    return `${this.item.label}: ${result}`;
-                }
-            }
+            return `${this.item.chipLabel}: ${result}`;
         }
+        if (Array.isArray(this.item.label)) {
+            const label = getLabelFromArray(this.item.label, this.type);
+            return `${label}: ${result}`;
+        }
+        if (this.item.isTypeCheckbox) {
+            return result;
+        }
+        return `${this.item.label}: ${result}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipContentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: { item: "item", type: "type" }, ngImport: i0, template: "{{ content }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -2720,9 +2700,7 @@ function getLabelFromArray(labelArr, type) {
     else if (type === 'to' && labelArr[1]) {
         return `${labelArr[1]}`;
     }
-    else {
-        return '';
-    }
+    return '';
 }
 
 class FocusControllerService {
@@ -2833,11 +2811,11 @@ class FsFilterChipsComponent {
     filters;
     ItemType = ItemType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of filters\">\n  <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of filters\">\n  <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of filters\">\n  <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  </ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of filters\">\n  <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  </ng-container>\n</ng-container>" }]
         }], propDecorators: { filters: [{
                 type: Input
             }] } });
@@ -2890,6 +2868,12 @@ class BaseItemComponent {
         this._kvDiffer = this._kvDiffers.find(this.item || {}).create();
         this.listenWithDebounce();
     }
+    get destroy$() {
+        return this._destroy$.asObservable();
+    }
+    destroy() {
+        return this._destroy$.asObservable();
+    }
     ngDoCheck() {
         if (this._kvDiffer) {
             const changes = this._kvDiffer.diff(this.item);
@@ -3113,19 +3097,14 @@ class SelectSimpleComponent {
         }
     }
     isolateChange(filter) {
-        if (filter.isolate.enabled) {
-            filter.model = filter.isolate.value;
-        }
-        else {
-            filter.model = null;
-        }
+        filter.model = filter.isolate.enabled ? filter.isolate.value : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectSimpleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n      #select\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"item.model\"\n      (ngModelChange)=\"changed()\">\n    <mat-option \n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectSimpleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-select-simple', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"] }]
+            args: [{ selector: 'filter-item-select-simple', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n      #select\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"item.model\"\n      (ngModelChange)=\"changed()\">\n    <mat-option \n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
                 type: Input
             }], select: [{
@@ -3252,7 +3231,6 @@ class TextComponent extends BaseItemComponent {
     _kvDiffers;
     _cd;
     textControl = new UntypedFormControl();
-    destroy$ = new Subject();
     constructor(_kvDiffers, _cd) {
         super(_kvDiffers, _cd);
         this._kvDiffers = _kvDiffers;
@@ -3262,10 +3240,6 @@ class TextComponent extends BaseItemComponent {
         this._listenControlValueChanges();
         this._listenModelChanges();
     }
-    ngOnDestroy() {
-        this.destroy$.next(null);
-        this.destroy$.complete();
-    }
     _listenControlValueChanges() {
         this.textControl.valueChanges
             .pipe(distinctUntilChanged(), debounceTime(200), takeUntil(this.destroy$))
@@ -3324,7 +3298,7 @@ class RangeComponent extends BaseItemComponent {
         const toListener = fromEvent(this.to.nativeElement, 'keyup')
             .pipe(distinctUntilChanged());
         merge(fromListener, toListener)
-            .pipe(takeUntil(this._destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             this.itemChange();
         });
@@ -3394,7 +3368,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         return item1?.value === item2?.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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  [allowText]=\"false\"\n  [label]=\"label\"\n  [size]=\"'small'\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"item.chipColor\"\n  [chipIconColor]=\"item.chipIcon\"\n  [chipBackground]=\"item.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>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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  [allowText]=\"false\"\n  [label]=\"label\"\n  [size]=\"'small'\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"item.chipColor\"\n  [chipIconColor]=\"item.chipIcon\"\n  [chipBackground]=\"item.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>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
@@ -3415,22 +3389,17 @@ class DateComponent extends BaseItemComponent {
         this._cd = _cd;
     }
     ngOnInit() {
-        if (this.item.type === ItemType.DateTime) {
-            this.viewType = PickerViewType.DateTime;
-        }
-        else {
-            this.viewType = PickerViewType.Date;
-        }
+        this.viewType = this.item.type === ItemType.DateTime ? PickerViewType.DateTime : PickerViewType.Date;
         if (this.item.mode === ItemDateMode.ScrollMonthYear) {
             this.showDay = false;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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         [placeholder]=\"item.label\"\n         [clear]=\"item.showClear\"\n         [name]=\"item.name\">\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          [placeholder]=\"item.label\"\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-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$4.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i3$4.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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\n    matInput\n    fsDatePicker\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [maxYear]=\"item.maxYear\"\n    [view]=\"viewType\"\n    [placeholder]=\"item.label\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input \n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\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-form-field>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$4.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i3$4.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-date', changeDetection: ChangeDetectionStrategy.OnPush, 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         [placeholder]=\"item.label\"\n         [clear]=\"item.showClear\"\n         [name]=\"item.name\">\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          [placeholder]=\"item.label\"\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-form-field>\n</ng-template>\n" }]
+            args: [{ selector: 'filter-item-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input\n    matInput\n    fsDatePicker\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [maxYear]=\"item.maxYear\"\n    [view]=\"viewType\"\n    [placeholder]=\"item.label\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input \n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\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-form-field>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
 
 class DateRangeComponent extends BaseItemComponent {
@@ -3467,11 +3436,11 @@ class CheckboxComponent extends BaseItemComponent {
         this._cd = _cd;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0, template: "<fs-label-field>\n  <mat-checkbox \n      [(ngModel)]=\"item.model\" \n      [name]=\"item.name\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>", styles: ["fs-label-field{margin:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"] }]
+            args: [{ selector: 'filter-item-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-label-field>\n  <mat-checkbox \n      [(ngModel)]=\"item.model\" \n      [name]=\"item.name\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>", styles: ["fs-label-field{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
 
 class FilterItemComponent {
@@ -3584,11 +3553,11 @@ class FilterDrawerComponent {
         this.done();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }, { token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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>filter_alt</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: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}: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:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height: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,.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;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { kind: "component", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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 svgIcon=\"filterOutline\"></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: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}: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:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height: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,.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;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { kind: "component", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDrawerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>filter_alt</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: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}: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:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height: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,.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;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon svgIcon=\"filterOutline\"></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: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}: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:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height: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,.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;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.OverlayRef, decorators: [{
                     type: Inject,
                     args: [FILTER_DRAWER_OVERLAY]
@@ -3874,7 +3843,6 @@ class FilterComponent {
     _filterItems;
     _actions;
     _savedFiltersController;
-    _externalParamsController;
     set setConfig(config) {
         this._initFilterWithConfig(config);
     }
@@ -3905,7 +3873,7 @@ class FilterComponent {
     _hasFilterChips$ = new BehaviorSubject(false);
     _keyword$ = new Subject();
     _destroy$ = new Subject();
-    constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions, _savedFiltersController, _externalParamsController) {
+    constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions, _savedFiltersController) {
         this._defaultConfig = _defaultConfig;
         this._filterOverlay = _filterOverlay;
         this._zone = _zone;
@@ -3913,10 +3881,13 @@ class FilterComponent {
         this._filterItems = _filterItems;
         this._actions = _actions;
         this._savedFiltersController = _savedFiltersController;
-        this._externalParamsController = _externalParamsController;
         this._filterItems.filter = this;
         this._listenWhenFilterReady();
         this._updateWindowWidth();
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+        const filterAlt = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>';
+        iconRegistry.addSvgIconLiteral('filterOutline', sanitizer.bypassSecurityTrustHtml(filterAlt));
         this._filterOverlay.attach$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
@@ -4390,8 +4361,8 @@ class FilterComponent {
         });
         this._hasFilterChips$.next(hasFilterChips);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: SavedFiltersController }, { token: ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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,
             PersistanceParamsController,
@@ -4400,7 +4371,7 @@ class FilterComponent {
             FsFilterItemsStore,
             SavedFiltersController,
             ActionsController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </a>\n      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i12.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: i14.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if(config.button.icon) { \n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i12.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: i14.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -4413,13 +4384,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFilterItemsStore,
                         SavedFiltersController,
                         ActionsController,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </a>\n      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if(config.button.icon) { \n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
         }], ctorParameters: () => [{ type: FsFilterConfig, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [FS_FILTER_CONFIG]
-                }] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: SavedFiltersController }, { type: ExternalParamsController }], propDecorators: { setConfig: [{
+                }] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: SavedFiltersController }], propDecorators: { setConfig: [{
                 type: Input,
                 args: ['config']
             }], setFilter: [{