@firestitch/filter 18.2.9 → 18.2.10

package/fesm2022/firestitch-filter.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, ChangeDetectionStrategy, Input, ChangeDetectorRef, HostBinding, EventEmitter, Output, InjectionToken, Injector, Directive, Optional, Self, Pipe, ViewChild, DestroyRef, HostListener, NgZone, ElementRef, ContentChild, NgModule } from '@angular/core';
+import { Injectable, inject, Component, ChangeDetectionStrategy, Input, ChangeDetectorRef, HostBinding, EventEmitter, Output, InjectionToken, Injector, Directive, Optional, Self, DestroyRef, NgZone, ElementRef, ContentChild, ViewChild, Pipe, HostListener, NgModule } from '@angular/core';
 import { FsPrompt } from '@firestitch/prompt';
-import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, tap as tap$1, fromEvent, merge, switchMap as switchMap$1, map as map$1, interval } from 'rxjs';
+import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, tap as tap$1, switchMap as switchMap$1, map as map$1, fromEvent, interval, merge } from 'rxjs';
 import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, mapTo, startWith, map, delay, skip } from 'rxjs/operators';
 import { isFunction, clone, toString, isObject, isString, pickBy } from 'lodash-es';
 import { isEmpty, filter, isArrayEqual, list, getNormalizedPath, remove } from '@firestitch/common';
@@ -31,9 +31,9 @@ import { FsFileModule } from '@firestitch/file';
 import * as i2$2 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
 import { FsMessage } from '@firestitch/message';
-import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatHint } from '@angular/material/form-field';
+import { MatFormField, MatPrefix, MatLabel, MatSuffix, MatHint } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
-import * as i3$2 from '@firestitch/skeleton';
+import * as i3$3 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
@@ -44,17 +44,17 @@ import * as i4 from '@firestitch/autocomplete';
 import { FsAutocompleteModule } from '@firestitch/autocomplete';
 import * as i1$3 from '@firestitch/autocomplete-chips';
 import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
-import { MatCheckbox } from '@angular/material/checkbox';
-import * as i1$4 from '@firestitch/label';
-import { FsLabelModule } from '@firestitch/label';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i1$6 from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/dialog';
 import { MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i3$3 from '@firestitch/clear';
+import * as i3$2 from '@firestitch/clear';
 import { FsClearModule } from '@firestitch/clear';
 import { DrawerRef } from '@firestitch/drawer';
-import * as i1$5 from '@angular/cdk/layout';
+import * as i1$4 from '@angular/cdk/layout';
+import * as i1$6 from '@firestitch/label';
+import { FsLabelModule } from '@firestitch/label';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 var ItemType;
 (function (ItemType) {
@@ -3257,1608 +3257,1613 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['focusTargetType']
             }] } });
 
-class TextComponent extends BaseItemComponent {
+class AutocompleteComponent extends BaseItemComponent {
     _kvDiffers;
     _cd;
-    textControl = new UntypedFormControl();
     constructor(_kvDiffers, _cd) {
         super(_kvDiffers, _cd);
         this._kvDiffers = _kvDiffers;
         this._cd = _cd;
     }
-    ngOnInit() {
-        this._listenControlValueChanges();
-        this._listenModelChanges();
-    }
-    _listenControlValueChanges() {
-        this.textControl.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(200), takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.item.model = value;
-        });
-    }
-    _listenModelChanges() {
-        this._item.value$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.textControl.setValue(this.item.model, { emitEvent: false });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextComponent, isStandalone: true, selector: "filter-item-text", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  @if (item.prefix) {\n    <span\n      matTextPrefix\n      [innerHtml]=\"item.prefix\">\n    </span>\n  }\n  <input\n    matInput\n    [formControl]=\"textControl\"\n    [fsFilterFocusTrigger]=\"item\">\n  @if (item.suffix) {\n    <span\n      matSuffix\n      [innerHtml]=\"item.suffix\">\n    </span>\n  }\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    displayWith = (data) => {
+        return data ? data.name : data;
+    };
+    fetch = (keyword) => {
+        return this.item.valuesFn(keyword, this.item.filter);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.model\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i4.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "displayWith", "placeholder", "fetchOnFocus", "readonly", "required", "disabled", "formFieldClass", "appearance", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared", "opened", "closed"] }, { kind: "directive", type: i4.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: TextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatPrefix,
-                        MatInput,
-                        FormsModule,
-                        ReactiveFormsModule,
+            args: [{ selector: 'filter-item-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsAutocompleteModule,
                         FocusToItemDirective,
-                        MatSuffix,
-                    ], template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  @if (item.prefix) {\n    <span\n      matTextPrefix\n      [innerHtml]=\"item.prefix\">\n    </span>\n  }\n  <input\n    matInput\n    [formControl]=\"textControl\"\n    [fsFilterFocusTrigger]=\"item\">\n  @if (item.suffix) {\n    <span\n      matSuffix\n      [innerHtml]=\"item.suffix\">\n    </span>\n  }\n</mat-form-field>" }]
+                        FormsModule,
+                        FsFormModule,
+                    ], template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.model\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n" }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
 
-class FsFilterIsolateValues {
-    transform(values, isolate) {
-        if (!isolate) {
-            return values;
-        }
-        return values.filter((value) => {
-            return value.value !== isolate.value;
-        });
+class ActionsController {
+    _breakpointObserver;
+    _visible$ = new BehaviorSubject(false);
+    _actions$ = new BehaviorSubject([]);
+    _menuActions$ = new BehaviorSubject([]);
+    _destroy$ = new Subject();
+    _config;
+    _mobileMedia = '(max-width: 799px)';
+    _allActions = [];
+    _reorderAction;
+    constructor(_breakpointObserver) {
+        this._breakpointObserver = _breakpointObserver;
+        this._listenMobileMedia();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, isStandalone: true, name: "fsFilterIsolateValues" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'fsFilterIsolateValues',
-                    standalone: true,
-                }]
-        }] });
-
-class SelectMultipleComponent {
-    _cd;
-    item;
-    select;
-    constructor(_cd) {
-        this._cd = _cd;
+    get menuActions() {
+        return this._menuActions$.value;
     }
-    changed() {
-        if (this.item.isolate) {
-            this.item.isolate.enabled = false;
-            if (this.item.multiple && Array.isArray(this.item.model)) {
-                const index = this.item.model.indexOf(this.item.isolate.value);
-                if (index > -1) {
-                    this.item.model.splice(index, 1);
-                }
-            }
-        }
+    get actions() {
+        return this._actions$.value;
     }
-    close() {
-        this.select.close();
+    get actions$() {
+        return this._actions$.asObservable();
     }
-    markForCheck() {
-        this._cd.markForCheck();
+    get menuActions$() {
+        return this._menuActions$.asObservable();
     }
-    isolateChange(filter) {
-        if (filter.isolate.enabled) {
-            filter.model = filter.multiple ? [filter.isolate.value] : filter.isolate.value;
+    get visible$() {
+        return this._visible$.asObservable();
+    }
+    get mobileMode() {
+        return this._breakpointObserver.isMatched(this._mobileMedia);
+    }
+    ngOnDestroy() {
+        this._destroy$.next(null);
+        this._destroy$.complete();
+    }
+    setConfig(config) {
+        this._config = config;
+        this.initActions(config.actions);
+    }
+    initActions(rawActions) {
+        if (!rawActions || !Array.isArray(rawActions)) {
+            return;
         }
-        else {
-            if (filter.multiple) {
-                filter.model = filter.defaultValue ? filter.defaultValue : [];
+        this.show();
+        this._allActions = rawActions
+            .map((action) => new Action(this._config, action));
+        if (this._reorderAction) {
+            this._allActions.unshift(this._reorderAction);
+        }
+        this._classifyActions();
+    }
+    show() {
+        this._visible$.next(true);
+    }
+    hide() {
+        this._visible$.next(false);
+    }
+    addReorderAction(action) {
+        this._allActions.unshift(action);
+        action.isReorderAction = true;
+        this._classifyAction(action);
+        this._reorderAction = action;
+    }
+    clearActions() {
+        this._allActions = [];
+        this._setActions([]);
+        this._setKebabActions([]);
+    }
+    updateActionsVisibility() {
+        this._allActions.forEach((action) => action.updateVisibility());
+        this._classifyActions();
+    }
+    updateDisabledState() {
+        this.actions.forEach((action) => action.updateDisabledState());
+    }
+    _setKebabActions(actions) {
+        this._menuActions$.next(actions);
+    }
+    _setActions(actions) {
+        this._actions$.next(actions);
+    }
+    _classifyActions() {
+        const kebabActions = [];
+        const actions = [];
+        const mobileMode = this.mobileMode;
+        this._allActions
+            .filter((action) => {
+            return action.visible;
+        })
+            .forEach((action) => {
+            if (action.menu !== false && (action.menu || mobileMode)) {
+                kebabActions.push(action);
             }
             else {
-                filter.model = filter.defaultValue ? filter.defaultValue : null;
+                actions.push(action);
             }
+        });
+        this._setKebabActions(kebabActions);
+        this._setActions(actions);
+    }
+    _classifyAction(action) {
+        if (action.menu) {
+            this._setKebabActions([...this.menuActions, action]);
+        }
+        else {
+            this._setActions([...this.actions, action]);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectMultipleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectMultipleComponent, isStandalone: true, selector: "filter-item-select-multiple", 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>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n        (change)=\"isolateChange(item)\"\n        [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">\n          {{ item.isolate.label }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: 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: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    _listenMobileMedia() {
+        this._breakpointObserver.observe(this._mobileMedia)
+            .pipe(skip(1), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._classifyActions();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsController, deps: [{ token: i1$4.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsController });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsController, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }] });
+
+const FilterIcon = '<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-240L161-745q-14-17-4-36t31-19h584q21 0 31 19t-4 36L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-276 240-304H240l240 304Zm0 0Z"/></svg>';
+
+class FsFilterSavedFilterChipsComponent {
+    savedFilter;
+    items = [];
+    _itemStore = inject(ItemStore);
+    ngOnInit() {
+        this.items = [...this._itemStore.items]
+            .filter((item) => !!this.savedFilter.filters[item.name])
+            .map((item) => {
+            item.setModel(this.savedFilter.filters[item.name]);
+            return item;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterChipsComponent, isStandalone: true, selector: "fs-saved-filter-chips", inputs: { savedFilter: "savedFilter" }, ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"], dependencies: [{ kind: "component", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item", "removable", "clickable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-select-multiple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        NgClass,
-                        MatLabel,
-                        MatSelect,
-                        FocusToItemDirective,
-                        FormsModule,
-                        FsFormModule,
-                        MatOption,
-                        MatHint,
-                        MatCheckbox,
-                        FsFilterIsolateValues,
-                    ], template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n        (change)=\"isolateChange(item)\"\n        [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">\n          {{ item.isolate.label }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
+            args: [{ selector: 'fs-saved-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsFilterChipComponent,
+                    ], template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"] }]
+        }], propDecorators: { savedFilter: [{
                 type: Input
-            }], select: [{
-                type: ViewChild,
-                args: ['select', { static: true }]
             }] } });
 
-class SelectSimpleComponent {
-    _cd;
-    item;
-    select;
-    constructor(_cd) {
-        this._cd = _cd;
-    }
-    changed() {
-        if (this.item.isolate) {
-            this.item.isolate.enabled = false;
-        }
+class FsFilterSavedFilterManageComponent {
+    savedFilters;
+    _savedFilterController = inject(SavedFilterController);
+    _cdRef = inject(ChangeDetectorRef);
+    _paramController = inject(ParamController);
+    _itemStore = inject(ItemStore);
+    _dialogRef = inject(MatDialogRef);
+    _filterOverlayService = inject(FsFilterOverlayService);
+    ngOnInit() {
+        this.savedFilters = this._savedFilterController.savedFilters;
     }
-    isolateChange(filter) {
-        filter.model = filter.isolate.enabled ? filter.isolate.value : null;
+    get items() {
+        return this._itemStore.items;
     }
-    markForCheck() {
-        this._cd.markForCheck();
+    get pluralLabelLower() {
+        return this._savedFilterController.pluralLabelLower;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectSimpleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectSimpleComponent, isStandalone: true, 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>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <mat-checkbox\n    (change)=\"isolateChange(item)\"\n    [(ngModel)]=\"item.isolate.enabled\">\n    <span class=\"checkbox-label\">\n      {{ item.isolate.label }}\n    </span>\n  </mat-checkbox>\n}", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: 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: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectSimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-select-simple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        NgClass,
-                        MatLabel,
-                        MatSelect,
-                        FocusToItemDirective,
-                        FormsModule,
-                        FsFormModule,
-                        MatOption,
-                        MatCheckbox,
-                        FsFilterIsolateValues,
-                    ], template: "<mat-form-field [ngClass]=\"{ isolate: !!item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <mat-checkbox\n    (change)=\"isolateChange(item)\"\n    [(ngModel)]=\"item.isolate.enabled\">\n    <span class=\"checkbox-label\">\n      {{ item.isolate.label }}\n    </span>\n  </mat-checkbox>\n}" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
-                type: Input
-            }], select: [{
-                type: ViewChild,
-                args: ['select', { static: true }]
-            }] } });
-
-class SelectGroupsComponent {
-    cd;
-    select;
-    item;
-    constructor(cd) {
-        this.cd = cd;
+    get sortable() {
+        return this._savedFilterController.orderable;
     }
-    compare(o1, o2) {
-        return o1 == o2;
+    selectFilter(savedFilter) {
+        this._savedFilterController.setActiveFilter(savedFilter);
+        this._filterOverlayService.open();
+        this._dialogRef.close();
     }
-    markForCheck() {
-        this.cd.markForCheck();
+    remove(savedFilter) {
+        this._savedFilterController.delete(savedFilter)
+            .subscribe(() => {
+            this.savedFilters = this._savedFilterController.savedFilters;
+            this._cdRef.markForCheck();
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectGroupsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectGroupsComponent, isStandalone: true, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    @for (selectItem of item.values; track selectItem) {\n      @if (selectItem[item.children]) {\n        <mat-optgroup [label]=\"selectItem.name\">\n          @for (subItem of selectItem[item.children]; track subItem) {\n            <mat-option\n              [value]=\"subItem.value\"\n              [ngStyle]=\"selectItem.style\">\n              {{ subItem.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option\n          [value]=\"selectItem.value\"\n          [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    order(savedFilters) {
+        this._savedFilterController.order(savedFilters)
+            .subscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterManageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterManageComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage {{ pluralLabelLower }}\n</h1>\n<div mat-dialog-content>\n  <table class=\"fs-list-table\">\n    <thead>\n      <tr>\n        <th>\n          Name\n        </th>\n        <th>\n          Filters\n        </th>\n        <th class=\"actions-column\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (savedFilter of savedFilters; track savedFilter.id) {\n        <tr>\n          <td>\n            <a (click)=\"selectFilter(savedFilter)\">\n              {{ savedFilter.name }}\n            </a>\n          </td>\n          <td>\n            <fs-saved-filter-chips [savedFilter]=\"savedFilter\"></fs-saved-filter-chips>\n          </td>\n          <td>\n            <fs-menu>\n              <ng-template\n                  fs-menu-item\n                  (click)=\"remove(savedFilter)\">\n                Delete\n              </ng-template>\n            </fs-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<div mat-dialog-actions>\n  <button\n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host ::ng-deep .mat-mdc-dialog-content{width:800px;max-width:100%}.actions-column{width:1%}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: FsFilterSavedFilterChipsComponent, selector: "fs-saved-filter-chips", inputs: ["savedFilter"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectGroupsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterManageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-select-groups', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatSelect,
-                        FocusToItemDirective,
-                        FormsModule,
-                        FsFormModule,
-                        MatOptgroup,
-                        MatOption,
-                        NgStyle,
-                    ], template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    @for (selectItem of item.values; track selectItem) {\n      @if (selectItem[item.children]) {\n        <mat-optgroup [label]=\"selectItem.name\">\n          @for (subItem of selectItem[item.children]; track subItem) {\n            <mat-option\n              [value]=\"subItem.value\"\n              [ngStyle]=\"selectItem.style\">\n              {{ subItem.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option\n          [value]=\"selectItem.value\"\n          [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { select: [{
-                type: ViewChild,
-                args: ['select', { static: true }]
-            }], item: [{
-                type: Input
-            }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatDialogModule,
+                        MatButton,
+                        FsFilterSavedFilterChipsComponent,
+                        FsMenuModule,
+                    ], template: "<h1 mat-dialog-title>\n  Manage {{ pluralLabelLower }}\n</h1>\n<div mat-dialog-content>\n  <table class=\"fs-list-table\">\n    <thead>\n      <tr>\n        <th>\n          Name\n        </th>\n        <th>\n          Filters\n        </th>\n        <th class=\"actions-column\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (savedFilter of savedFilters; track savedFilter.id) {\n        <tr>\n          <td>\n            <a (click)=\"selectFilter(savedFilter)\">\n              {{ savedFilter.name }}\n            </a>\n          </td>\n          <td>\n            <fs-saved-filter-chips [savedFilter]=\"savedFilter\"></fs-saved-filter-chips>\n          </td>\n          <td>\n            <fs-menu>\n              <ng-template\n                  fs-menu-item\n                  (click)=\"remove(savedFilter)\">\n                Delete\n              </ng-template>\n            </fs-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<div mat-dialog-actions>\n  <button\n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host ::ng-deep .mat-mdc-dialog-content{width:800px;max-width:100%}.actions-column{width:1%}\n"] }]
+        }] });
 
-class SelectComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    selectedItem;
-    // For case when we have multiple selection with __all option
-    // If _all has been selected than we must disable all other items
-    allItemsOptionSelected = false;
-    get multipleSelectItem() {
-        return this.item;
+class FsSavedFilterAutocompleteChipsComponent {
+    savedFiltersController;
+    selectedFilter;
+    _itemStore = inject(ItemStore);
+    _paramController = inject(ParamController);
+    _dialog = inject(MatDialog);
+    _destroyRef = inject(DestroyRef);
+    _injector = inject(Injector);
+    _cdRef = inject(ChangeDetectorRef);
+    _prompt = inject(FsPrompt);
+    _message = inject(FsMessage);
+    get filters$() {
+        return this.savedFiltersController.savedFilters$;
     }
-    get simpleSelectItem() {
-        return this.item;
+    get activeFilter$() {
+        return this.savedFiltersController.activeFilter$;
     }
-    values$;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get pluralLabelLower() {
+        return this.savedFiltersController.pluralLabelLower;
     }
-    ngOnChanges(changes) {
-        if (changes.item) {
-            this.values$ = this.item.values$;
-        }
+    get pluralLabel() {
+        return this.savedFiltersController.pluralLabel;
     }
-    ngDoCheck() {
-        if (this._kvDiffer) {
-            const changes = this._kvDiffer.diff(this.item);
-            if (changes) {
-                this._cd.markForCheck();
-                if (this.selectedItem) {
-                    this.selectedItem.markForCheck();
-                }
-            }
+    get labelIcon() {
+        return this.savedFiltersController.labelIcon;
+    }
+    compareWith = (o1, o2) => {
+        return o1?.id === o2?.id;
+    };
+    selectFilter(savedFilter) {
+        this.savedFiltersController.setActiveFilter(savedFilter);
+    }
+    selectedFilterChange(savedFilter) {
+        this.savedFiltersController.setActiveFilter(savedFilter);
+        if (!savedFilter) {
+            this._itemStore.filtersClear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ((item.loading$ | async)) {\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n} @else {\n  @if ((values$ | async)?.length) {\n    @if (item.multiple && !item.children) {\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    }\n    @if (!item.multiple && !item.children) {\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    }\n    @if (item.children) {\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    }\n  }\n}\n\n", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { kind: "component", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { kind: "component", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatSelect,
-                        SelectMultipleComponent,
-                        SelectSimpleComponent,
-                        SelectGroupsComponent,
-                        AsyncPipe,
-                    ], template: "@if ((item.loading$ | async)) {\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n} @else {\n  @if ((values$ | async)?.length) {\n    @if (item.multiple && !item.children) {\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    }\n    @if (!item.multiple && !item.children) {\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    }\n    @if (item.children) {\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    }\n  }\n}\n\n", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { selectedItem: [{
-                type: ViewChild,
-                args: ['selectItem']
-            }] } });
-
-class ChipsComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    ngOnInit() {
+        this.savedFiltersController.activeFilter$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((savedFilter) => {
+            this.selectedFilter = savedFilter;
+            this._cdRef.markForCheck();
+        });
     }
-    compareFn = (modelValue, chipValue) => {
-        return String(modelValue.value) === String(chipValue.value);
+    save() {
+        this.savedFiltersController
+            .save(this.selectedFilter)
+            .pipe(tap$1(() => {
+            this._message.success(`Saved ${this.savedFiltersController.singularLabel}`);
+        }))
+            .subscribe();
+    }
+    create() {
+        this.savedFiltersController.create()
+            .pipe(tap$1(() => {
+            this._message
+                .success(`Created ${this.savedFiltersController.singularLabel}`);
+        }))
+            .subscribe();
+    }
+    saveAs() {
+        this._prompt.input({
+            title: 'Save as new alert',
+            label: 'Name',
+            required: true,
+            commitLabel: 'Save',
+            dialogConfig: {
+                restoreFocus: false,
+            },
+        })
+            .pipe(switchMap$1((name) => {
+            const data = {
+                id: null,
+                name,
+            };
+            return this.savedFiltersController.save(data);
+        }), tap$1(() => {
+            this._message.success(`Saved ${this.savedFiltersController.singularLabel}`);
+        }))
+            .subscribe();
+    }
+    fetch = (query) => {
+        return this.savedFiltersController.savedFilters$
+            .pipe(map$1((filters) => filters
+            .filter((filter) => filter
+            .name.toLowerCase().includes(query.toLowerCase()))));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChipsComponent, isStandalone: true, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "@if (item.values?.length) {\n  <fs-label-field>\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      @for (value of item.values; track value) {\n        <fs-chip\n            [value]=\"value\"\n            [selectable]=\"true\">\n          {{ value.name }}\n        </fs-chip>\n      }\n    </fs-chips>\n  </fs-label-field>\n}\n@if (item.loading) {\n  {{ item.label }} loading...\n}", styles: ["fs-chip{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i1$4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i2$2.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple", "sortable", "selectable", "orientation", "width"] }, { kind: "component", type: i2$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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 });
+    manageFilters() {
+        this._dialog
+            .open(FsFilterSavedFilterManageComponent, {
+            injector: this._injector,
+            restoreFocus: false,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsSavedFilterAutocompleteChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsSavedFilterAutocompleteChipsComponent, isStandalone: true, selector: "fs-saved-filter-autocomplete-chips", inputs: { savedFiltersController: "savedFiltersController" }, ngImport: i0, template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [compareWith]=\"compareWith\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"], dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: i1$3.FsAutocompleteChipsPrefixDirective, selector: "[fsAutocompleteChipsPrefix]", inputs: ["icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsSavedFilterAutocompleteChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'filter-item-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsLabelModule,
-                        FsChipModule,
+            args: [{ selector: 'fs-saved-filter-autocomplete-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsAutocompleteChipsModule,
                         FormsModule,
-                        FsFormModule,
-                    ], template: "@if (item.values?.length) {\n  <fs-label-field>\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      @for (value of item.values; track value) {\n        <fs-chip\n            [value]=\"value\"\n            [selectable]=\"true\">\n          {{ value.name }}\n        </fs-chip>\n      }\n    </fs-chips>\n  </fs-label-field>\n}\n@if (item.loading) {\n  {{ item.label }} loading...\n}", styles: ["fs-chip{line-height:40px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+                    ], template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [compareWith]=\"compareWith\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"] }]
+        }], propDecorators: { savedFiltersController: [{
+                type: Input
+            }] } });
 
-class RangeComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    from;
-    to;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+class FilterStatusBarDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    ngOnInit() {
-        this.listenChanges();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FilterStatusBarDirective, isStandalone: true, selector: "[fsFilterStatusBar]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFilterStatusBar]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
+
+class FilterComponent {
+    set setConfig(config) {
+        this._initFilterWithConfig(config);
     }
-    listenChanges() {
-        const fromListener = fromEvent(this.from.nativeElement, 'keyup')
-            .pipe(distinctUntilChanged());
-        const toListener = fromEvent(this.to.nativeElement, 'keyup')
-            .pipe(distinctUntilChanged());
-        merge(fromListener, toListener)
-            .pipe(takeUntil(this.destroy$))
+    set setFilter(config) {
+        this._initFilterWithConfig(config);
+    }
+    showSortBy = true;
+    closed = new EventEmitter();
+    opened = new EventEmitter();
+    ready = new EventEmitter();
+    statusBar;
+    keywordMatInput;
+    reloadEl;
+    showFilterMenu = false;
+    windowDesktop = false;
+    fsFilterClass = true;
+    searchPlaceholder = 'Search';
+    keyword = '';
+    autoReload = true;
+    _config = null;
+    _sort;
+    _filtersBtnVisible$ = new BehaviorSubject(true);
+    _keywordVisible$ = new BehaviorSubject(false);
+    _hasFilterChips$ = new BehaviorSubject(false);
+    _keyword$ = new Subject();
+    _destroy$ = new Subject();
+    _dialogRef = inject(MatDialogRef, { optional: true });
+    _drawerRef = inject(DrawerRef, { optional: true });
+    _defaultConfig = inject(FS_FILTER_CONFIG, { optional: true });
+    _filterOverlay = inject(FsFilterOverlayService);
+    _zone = inject(NgZone);
+    _paramController = inject(ParamController);
+    _persistanceController = inject(PersistanceController);
+    _itemStore = inject(ItemStore);
+    _actions = inject(ActionsController);
+    _savedFilterController = inject(SavedFilterController);
+    constructor() {
+        this._itemStore.filter = this;
+        this._listenWhenFilterReady();
+        this._updateWindowWidth();
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+        iconRegistry.addSvgIconLiteral('filterOutline', sanitizer.bypassSecurityTrustHtml(FilterIcon));
+        this._filterOverlay.attach$
+            .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.itemChange();
+            this.showFilterMenu = true;
         });
+        this._filterOverlay.detach$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.showFilterMenu = false;
+        });
+        this._listenWindowResize();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RangeComponent, isStandalone: true, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'from'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.min\"\n      #from>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'to'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.max\"\n      #to>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-range', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatPrefix,
-                        MatInput,
-                        FormsModule,
-                        FocusToItemDirective,
-                        FsFormModule,
-                        MatSuffix,
-                    ], template: "<div class=\"form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'from'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.min\"\n      #from>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'to'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.max\"\n      #to>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { from: [{
-                type: ViewChild,
-                args: ['from', { static: true }]
-            }], to: [{
-                type: ViewChild,
-                args: ['to', { static: true }]
-            }] } });
-
-class AutocompleteComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get config() {
+        return this._config;
     }
-    displayWith = (data) => {
-        return data ? data.name : data;
-    };
-    fetch = (keyword) => {
-        return this.item.valuesFn(keyword, this.item.filter);
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.model\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i4.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "displayWith", "placeholder", "fetchOnFocus", "readonly", "required", "disabled", "formFieldClass", "appearance", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared", "opened", "closed"] }, { kind: "directive", type: i4.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsAutocompleteModule,
-                        FocusToItemDirective,
-                        FormsModule,
-                        FsFormModule,
-                    ], template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.model\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-
-class AutocompletechipsComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get filterParams() {
+        return this._itemStore.values();
     }
-    addAutocompleteChipItem(event) {
-        if (event.data && this.item.model.indexOf(event.data.value) === -1) {
-            this.item.model.push(event.data);
-            this.itemChange();
-        }
+    get inDialog() {
+        return !!this._dialogRef || !!this._drawerRef;
     }
-    removeAutocompleteChipItem(event) {
-        remove(this.item.model, { value: event.data.value });
-        this.itemChange();
+    get filterParamsQuery() {
+        return this._itemStore.valuesAsQuery();
     }
-    clearAutocompleteChipItem() {
-        this.item.clear();
-        this.itemChange();
+    get items() {
+        return this._itemStore.items;
     }
-    fetch = (keyword) => {
-        return this.item.valuesFn(keyword, this.item.filter);
-    };
-    compareItems(item1, item2) {
-        return item1?.value === item2?.value;
+    get visibleItems() {
+        return this._itemStore.visibleItems;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, 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\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"action.click()\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsAutocompleteChipsModule,
-                        FocusToItemDirective,
-                        FormsModule,
-                        FsFormModule,
-                    ], 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\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"action.click()\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-
-class DateComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    viewType = PickerViewType.Date;
-    itemDateMode = ItemDateMode;
-    showYear = true;
-    showMonth = true;
-    showDay = true;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get keywordItem() {
+        return this._itemStore.keywordItem;
     }
-    ngOnInit() {
-        this.viewType = this.item.type === ItemType.DateTime ? PickerViewType.DateTime : PickerViewType.Date;
-        if (this.item.mode === ItemDateMode.ScrollMonthYear) {
-            this.showDay = false;
-        }
+    get itemsReady$() {
+        return this._itemStore.ready$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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}", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i3$1.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: DateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-date', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatInput,
-                        FormsModule,
-                        FsDatePickerModule,
-                        FocusToItemDirective,
-                        FsFormModule,
-                    ], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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}" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-
-class DateRangeComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    viewType = PickerViewType.Date;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get hasFilterChips$() {
+        return this._hasFilterChips$.asObservable();
     }
-    ngOnInit() {
-        if (this.item.type === ItemType.DateTimeRange) {
-            this.viewType = PickerViewType.DateTime;
-        }
-        else {
-            this.viewType = PickerViewType.Date;
-        }
+    get hasVisibleItemOrSorting() {
+        return this.visibleItems.length > 0 || !!this._itemStore.sortByItem;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$1.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i3$1.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: DateRangeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-date-range', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatInput,
-                        FormsModule,
-                        FocusToItemDirective,
-                        FsDatePickerModule,
-                        FsFormModule,
-                    ], template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-
-class WeekComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-    }
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input \n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$1.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: WeekComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-week', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatFormField,
-                        MatLabel,
-                        MatInput,
-                        FormsModule,
-                        FsDatePickerModule,
-                        FocusToItemDirective,
-                        FsFormModule,
-                    ], template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input \n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>\n" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-
-class CheckboxComponent extends BaseItemComponent {
-    _kvDiffers;
-    _cd;
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", type: CheckboxComponent, isStandalone: true, 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 0 -12px -8px}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsLabelModule,
-                        MatCheckbox,
-                        FormsModule,
-                        FsFormModule,
-                    ], 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 0 -12px -8px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-
-class FilterItemComponent {
-    _cdRef;
-    item;
-    itemType = ItemType;
-    get textItem() {
-        return this.item;
-    }
-    get chipsItem() {
-        return this.item;
-    }
-    get baseSelectItem() {
-        return this.item;
+    get filtersBtnVisible$() {
+        return this._filtersBtnVisible$.asObservable();
     }
-    get rangeItem() {
-        return this.item;
+    get inlineToolbar$() {
+        return combineLatest({
+            keywordVisible: this._keywordVisible$.asObservable(),
+            activeFilter: of(this.savedFiltersController.enabled),
+        })
+            .pipe(map(({ keywordVisible, activeFilter }) => {
+            return !keywordVisible && !activeFilter;
+        }));
     }
-    get autocompleteItem() {
-        return this.item;
+    get notInlineToolbar$() {
+        return this.inlineToolbar$
+            .pipe(map((inline) => !inline));
     }
-    get autocompleteChipsItem() {
-        return this.item;
+    get keywordVisible$() {
+        return this._keywordVisible$.asObservable();
     }
-    get dateItem() {
-        return this.item;
+    get actionsVisible$() {
+        return this._actions.visible$;
     }
-    get dateRangeItem() {
-        return this.item;
+    get actions$() {
+        return this._actions.actions$;
     }
-    get dateTimeItem() {
-        return this.item;
+    get menuActions$() {
+        return this._actions.menuActions$;
     }
-    get dateTimeRangeItem() {
-        return this.item;
+    set activeSavedFilter(savedFilter) {
+        this._savedFilterController.setActiveFilter(savedFilter);
     }
-    get weekItem() {
-        return this.item;
+    get activeSavedFilter() {
+        return this._savedFilterController.activeFilter;
     }
-    get checkboxItem() {
-        return this.item;
+    get savedFilters() {
+        return this._savedFilterController.savedFilters;
     }
-    _destroy$ = new Subject();
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
+    get savedFiltersController() {
+        return this._savedFilterController;
     }
     ngOnInit() {
-        this.item.value$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._cdRef.markForCheck();
-        });
+        this._initAutoFocus();
+        this._initAutoReload();
+        this._listenInputChanges();
+        this._listenInternalItemsChange();
+        this._initKeywordVisibility();
+        this._initOverlay();
     }
     ngOnDestroy() {
+        this._destroyFilterDrawer();
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterItemComponent, isStandalone: true, selector: "filter-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  @switch (item.type) {\n    @case (itemType.Text) {\n      <filter-item-text\n        class=\"interface\"\n        [item]=\"textItem\">\n      </filter-item-text>\n    }\n    @case (itemType.Select) {\n      <filter-item-select\n        class=\"interface\"\n        [item]=\"baseSelectItem\">\n      </filter-item-select>\n    }\n    @case (itemType.Chips) {\n      <filter-item-chips\n        class=\"interface\"\n        [item]=\"chipsItem\">\n      </filter-item-chips>\n    }\n    @case (itemType.Range) {\n      <filter-item-range\n        class=\"interface interface-range\"\n        [item]=\"rangeItem\">\n      </filter-item-range>\n    }\n    @case (itemType.AutoComplete) {\n      <filter-item-autocomplete\n        class=\"interface\"\n        [item]=\"autocompleteItem\">\n      </filter-item-autocomplete>\n    }\n    @case (itemType.AutoCompleteChips) {\n      <filter-item-autocompletechips\n        class=\"interface\"\n        [item]=\"autocompleteChipsItem\">\n      </filter-item-autocompletechips>\n    }\n    @case (itemType.Date) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateTime) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateTimeItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.DateTimeRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateTimeRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.Week) {\n      <filter-item-week\n        class=\"interface\"\n        [item]=\"weekItem\">\n      </filter-item-week>\n    }\n    @case (itemType.Checkbox) {\n      <filter-item-checkbox\n        class=\"interface interface-checkbox\"\n        [item]=\"checkboxItem\">\n      </filter-item-checkbox>\n    }\n  }\n\n</div>\n", styles: [":host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "filter-item-text" }, { kind: "component", type: SelectComponent, selector: "filter-item-select" }, { kind: "component", type: ChipsComponent, selector: "filter-item-chips" }, { kind: "component", type: RangeComponent, selector: "filter-item-range" }, { kind: "component", type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { kind: "component", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { kind: "component", type: DateComponent, selector: "filter-item-date" }, { kind: "component", type: DateRangeComponent, selector: "filter-item-date-range" }, { kind: "component", type: WeekComponent, selector: "filter-item-week" }, { kind: "component", type: CheckboxComponent, selector: "filter-item-checkbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'filter-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        TextComponent,
-                        SelectComponent,
-                        ChipsComponent,
-                        RangeComponent,
-                        AutocompleteComponent,
-                        AutocompletechipsComponent,
-                        DateComponent,
-                        DateRangeComponent,
-                        WeekComponent,
-                        CheckboxComponent,
-                    ], template: "<div class=\"filter filter-{{ item.type }}\">\n\n  @switch (item.type) {\n    @case (itemType.Text) {\n      <filter-item-text\n        class=\"interface\"\n        [item]=\"textItem\">\n      </filter-item-text>\n    }\n    @case (itemType.Select) {\n      <filter-item-select\n        class=\"interface\"\n        [item]=\"baseSelectItem\">\n      </filter-item-select>\n    }\n    @case (itemType.Chips) {\n      <filter-item-chips\n        class=\"interface\"\n        [item]=\"chipsItem\">\n      </filter-item-chips>\n    }\n    @case (itemType.Range) {\n      <filter-item-range\n        class=\"interface interface-range\"\n        [item]=\"rangeItem\">\n      </filter-item-range>\n    }\n    @case (itemType.AutoComplete) {\n      <filter-item-autocomplete\n        class=\"interface\"\n        [item]=\"autocompleteItem\">\n      </filter-item-autocomplete>\n    }\n    @case (itemType.AutoCompleteChips) {\n      <filter-item-autocompletechips\n        class=\"interface\"\n        [item]=\"autocompleteChipsItem\">\n      </filter-item-autocompletechips>\n    }\n    @case (itemType.Date) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateTime) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateTimeItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.DateTimeRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateTimeRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.Week) {\n      <filter-item-week\n        class=\"interface\"\n        [item]=\"weekItem\">\n      </filter-item-week>\n    }\n    @case (itemType.Checkbox) {\n      <filter-item-checkbox\n        class=\"interface interface-checkbox\"\n        [item]=\"checkboxItem\">\n      </filter-item-checkbox>\n    }\n  }\n\n</div>\n", styles: [":host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
-                type: Input
-            }] } });
-
-class FilterDrawerComponent {
-    inline = false;
-    windowDesktop = false;
-    savedFilterName = '';
-    _clear;
-    _done;
-    _destroyRef = inject(DestroyRef);
-    _savedFilterController = inject(SavedFilterController);
-    _message = inject(FsMessage);
-    _itemStore = inject(ItemStore);
-    _overlayRef = inject(FILTER_DRAWER_OVERLAY);
-    _data = inject(FILTER_DRAWER_DATA);
-    _paramController = inject(ParamController);
-    constructor() {
-        this._itemStore.prepareItems();
-        this._clear = this._data.clear;
-        this._done = this._data.done;
-        this.updateWindowWidth();
+    focus() {
+        this.keywordMatInput?.focus();
     }
-    updateWindowWidth() {
-        this.windowDesktop = window.innerWidth > 1200;
+    updateSort(sort) {
+        this._itemStore.updateSort(sort);
     }
-    get items$() {
-        return this._itemStore.visibleItems$;
+    /**
+     *
+     * Do update value of some field
+     *
+     * @param values - values for update
+     *
+     * To update text value just pass new text value
+     *
+     * public updateSelectValue(val) {
+     *   this.filterEl.updateValues({ keyword: val });
+     * }
+     *
+     * To update select or observable select you could pass suitable value
+     *
+     * public updateSelectValue(val: number) {
+     *   this.filterEl.updateValues({ simple_select: val }, { observable_select: val });
+     * }
+     *
+     * To update checkbox value just pass true/false as value
+     *
+     * public updateCheckox(val: boolean) {
+     *   this.filterEl.updateValues({ checkbox: val });
+     * }
+     *
+     * To update range value just pass object with min&max object or just with one of targets
+     *
+     * Ex.: { min: 10, max 15 }, { min: 5 }, { max 5 }
+     *
+     * public updateRange(val) {
+     *   this.filterEl.updateValues({ range: val });
+     * }
+     *
+     * To update autocomplete just pass object with name/value fields
+     *
+     * Ex.: { name: 'John Doe', value: 1 }
+     *
+     * public updateAutocomplete(val) {
+     *   this.filterEl.updateValues({ autocomplete_user_id: val });
+     * }
+     *
+     * To update autocompletechips just pass:
+     *
+     * 1) object with name/value fields - will be appended to existing set of values
+     *
+     * { name: 'John Doe', value: 1 }
+     *
+     * 2) array of objects - will be appended to existing set of values
+     *
+     * [{ name: 'John Doe', value: 1 }, { name: 'Darya Filipova', value: 2 }]
+     *
+     * 3) null - clear existing set of values
+     *
+     * public updateAutocomplete(val) {
+     *   this.filterEl.updateValues({ autocompletechips_user_id: val });
+     * }
+     *
+     */
+    updateValues(values) {
+        Object.keys(values).forEach((key) => {
+            const filterItem = this.items
+                .find((item) => item.name === key);
+            if (!filterItem) {
+                return;
+            }
+            filterItem.model = values[key];
+        });
     }
-    get paramCointroller() {
-        return this._paramController;
+    hide() {
+        this.changeVisibility(false);
     }
-    get savedFiltersController() {
-        return this._savedFilterController;
+    show() {
+        this.changeVisibility(true);
     }
-    ngOnInit() {
-        this._savedFilterController.activeFilter$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((activeFilter) => {
-            this.savedFilterName = activeFilter?.name || '';
-        });
+    changeVisibilityClick(value, event = null) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.changeVisibility(value);
     }
-    clear() {
-        this._clear();
+    get itemValues() {
+        return this.items
+            .map((item) => item.value);
     }
-    done() {
-        this._done();
-        this._overlayRef.detach();
+    get nonEmptyItemValues() {
+        return this.items
+            .filter((item) => item.value !== undefined)
+            .map((item) => item.value);
     }
-    backdropClick() {
-        this.done();
+    get hasItemValues() {
+        return this.items
+            .some((item) => item.value !== undefined);
     }
-    saveSavedFilter = () => {
-        return this._savedFilterController
-            .save({ name: this.savedFilterName })
-            .pipe(tap$1((savedFilter) => {
-            this._savedFilterController.setActiveFilter(savedFilter);
-            this._message
-                .success(`Saved ${this._savedFilterController.singularLabel}`, {
-                positionClass: 'toast-bottom-left',
-            });
-        }));
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterDrawerComponent, isStandalone: true, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"saveSavedFilter\"\n    [dirtySubmitButton]=\"false\">\n  <div class=\"filters\">\n    <div class=\"filters-wrap\">\n      @if (savedFiltersController.activeFilter$ | async) {\n        <div class=\"filter-heading\">\n          <mat-icon>\n            {{ savedFiltersController.labelIcon }}\n          </mat-icon>\n          <span class=\"text\">\n            {{ savedFiltersController.singularLabel }}\n          </span>\n        </div>\n        <div class=\"filter-name\">\n          <mat-form-field>\n            <mat-label>\n              {{ savedFiltersController.singularLabel }} name\n            </mat-label>\n            <input\n              matInput\n              required\n              [(ngModel)]=\"savedFilterName\"\n              name=\"savedFilterName\">\n          </mat-form-field>\n          <hr>\n          <br>\n        </div>\n      } @else {\n        <div class=\"filter-heading\">\n          <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          <span class=\"text\">\n            Filters\n          </span>\n        </div>\n      }\n      <div class=\"overflow-shadow filter-items\">\n        <div class=\"overflow-shadow-content\">\n          <ng-container *fsSkeleton=\"(paramCointroller.pending$ | async) !== true\">\n            @for (filterItem of items$ | async; track filterItem) {\n              <filter-item\n                class=\"filter-group\"\n                [item]=\"filterItem\">\n              </filter-item>\n            }\n          </ng-container>\n        </div>\n      </div>\n      @if ((paramCointroller.pending$ | async) !== true) {\n        <fs-filter-drawer-actions\n          [savedFiltersController]=\"savedFiltersController\"\n          class=\"filter-actions\"\n          (clear)=\"clear()\"\n          (done)=\"done()\">\n        </fs-filter-drawer-actions>\n      }\n    </div>\n  </div>\n  @if (!windowDesktop) {\n    <div\n      class=\"backdrop\"\n      (click)=\"backdropClick()\">\n    </div>\n  }\n</form>", 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}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}:host ::ng-deep mat-form-field{width:100%}.filter-heading{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 25px 20px}.filter-heading mat-icon{margin-right:8px;font-size:24px;line-height:24px}.filter-heading .text{font-weight:400;font-size:19px}.filter-name{padding:0 25px}.filter-name hr{border-color:#a4a4a4;border-top:0;border-left:0;border-right:0}.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:calc(env(safe-area-inset-top) + 20px);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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i3$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", inputs: ["savedFiltersController"], outputs: ["clear", "done"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FormsModule,
-                        FsFormModule,
-                        MatIcon,
-                        MatFormField,
-                        MatLabel,
-                        MatInput,
-                        FsSkeletonModule,
-                        FilterItemComponent,
-                        FsFilterDrawerActionsComponent,
-                        AsyncPipe,
-                    ], template: "<form\n    fsForm\n    [submit]=\"saveSavedFilter\"\n    [dirtySubmitButton]=\"false\">\n  <div class=\"filters\">\n    <div class=\"filters-wrap\">\n      @if (savedFiltersController.activeFilter$ | async) {\n        <div class=\"filter-heading\">\n          <mat-icon>\n            {{ savedFiltersController.labelIcon }}\n          </mat-icon>\n          <span class=\"text\">\n            {{ savedFiltersController.singularLabel }}\n          </span>\n        </div>\n        <div class=\"filter-name\">\n          <mat-form-field>\n            <mat-label>\n              {{ savedFiltersController.singularLabel }} name\n            </mat-label>\n            <input\n              matInput\n              required\n              [(ngModel)]=\"savedFilterName\"\n              name=\"savedFilterName\">\n          </mat-form-field>\n          <hr>\n          <br>\n        </div>\n      } @else {\n        <div class=\"filter-heading\">\n          <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          <span class=\"text\">\n            Filters\n          </span>\n        </div>\n      }\n      <div class=\"overflow-shadow filter-items\">\n        <div class=\"overflow-shadow-content\">\n          <ng-container *fsSkeleton=\"(paramCointroller.pending$ | async) !== true\">\n            @for (filterItem of items$ | async; track filterItem) {\n              <filter-item\n                class=\"filter-group\"\n                [item]=\"filterItem\">\n              </filter-item>\n            }\n          </ng-container>\n        </div>\n      </div>\n      @if ((paramCointroller.pending$ | async) !== true) {\n        <fs-filter-drawer-actions\n          [savedFiltersController]=\"savedFiltersController\"\n          class=\"filter-actions\"\n          (clear)=\"clear()\"\n          (done)=\"done()\">\n        </fs-filter-drawer-actions>\n      }\n    </div>\n  </div>\n  @if (!windowDesktop) {\n    <div\n      class=\"backdrop\"\n      (click)=\"backdropClick()\">\n    </div>\n  }\n</form>", 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}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}:host ::ng-deep mat-form-field{width:100%}.filter-heading{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 25px 20px}.filter-heading mat-icon{margin-right:8px;font-size:24px;line-height:24px}.filter-heading .text{font-weight:400;font-size:19px}.filter-name{padding:0 25px}.filter-name hr{border-color:#a4a4a4;border-top:0;border-left:0;border-right:0}.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:calc(env(safe-area-inset-top) + 20px);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: () => [], propDecorators: { inline: [{
-                type: Input
-            }], updateWindowWidth: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-class ActionsController {
-    _breakpointObserver;
-    _visible$ = new BehaviorSubject(false);
-    _actions$ = new BehaviorSubject([]);
-    _menuActions$ = new BehaviorSubject([]);
-    _destroy$ = new Subject();
-    _config;
-    _mobileMedia = '(max-width: 799px)';
-    _allActions = [];
-    _reorderAction;
-    constructor(_breakpointObserver) {
-        this._breakpointObserver = _breakpointObserver;
-        this._listenMobileMedia();
+    getItemValue(name) {
+        const item = this.items
+            .find((_item) => _item.name === name);
+        return item?.value;
     }
-    get menuActions() {
-        return this._menuActions$.value;
+    showItem(name) {
+        const item = this.getItem(name);
+        if (item) {
+            item.hide = false;
+            this._itemStore.updateItemsVisiblity();
+        }
     }
-    get actions() {
-        return this._actions$.value;
+    hideItem(name) {
+        const item = this.getItem(name);
+        if (!item) {
+            return;
+        }
+        item.hide = true;
+        this._itemStore.updateItemsVisiblity();
     }
-    get actions$() {
-        return this._actions$.asObservable();
+    clearItem(name) {
+        const item = this.getItem(name);
+        if (!item) {
+            return;
+        }
+        item.clear();
     }
-    get menuActions$() {
-        return this._menuActions$.asObservable();
+    updateItemConfig(name, params) {
+        const item = this.getItem(name);
+        if (!item) {
+            return;
+        }
+        item.label = params.label ?? item.label;
+        item.chipLabel = params.chipLabel ?? item.chipLabel;
+        this._itemStore.updateItemsVisiblity();
     }
-    get visible$() {
-        return this._visible$.asObservable();
+    getItemValueChange$(name) {
+        const item = this.items.find((i) => i.name === name);
+        if (item) {
+            return item.value$
+                .pipe(map(() => {
+                return item.model;
+            }));
+        }
+        return null;
     }
-    get mobileMode() {
-        return this._breakpointObserver.isMatched(this._mobileMedia);
+    changeVisibility(state) {
+        if (state === this.showFilterMenu) {
+            return;
+        }
+        if (!state) {
+            this.closed.emit();
+            return this._destroyFilterDrawer();
+        }
+        if (!this.hasVisibleItemOrSorting) {
+            return;
+        }
+        this._listenEscButton();
+        this.opened.emit();
+        this._filterOverlay.open();
     }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
+    init() {
+        const data = this._itemStore.valuesAsQuery();
+        this._sort = this._itemStore.getSort();
+        if (this.config.init) {
+            this.config.init(data, this._sort, this);
+        }
+        this._updateChipsVisibility();
+        this.items
+            .forEach((item) => {
+            item.init(item, this);
+        });
     }
-    setConfig(config) {
-        this._config = config;
-        this.initActions(config.actions);
+    clear(event = null) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this._itemStore.filtersClear();
+        if (this.config.clear) {
+            this.config.clear();
+        }
+        this.keyword = '';
     }
-    initActions(rawActions) {
-        if (!rawActions || !Array.isArray(rawActions)) {
-            return;
+    reload(event = null) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
         }
-        this.show();
-        this._allActions = rawActions
-            .map((action) => new Action(this._config, action));
-        if (this._reorderAction) {
-            this._allActions.unshift(this._reorderAction);
+        const data = this._itemStore.valuesAsQuery();
+        const el = this.reloadEl?.nativeElement;
+        if (el) {
+            el.style.transition = 'all 0.75s 0.0s';
+            el.style.transform = 'rotate(360deg)';
+            setTimeout(() => {
+                el.style.transition = null;
+                el.style.transform = null;
+            }, 1000);
+        }
+        if (this.config.reload) {
+            this.config.reload(data, this._itemStore.getSort());
         }
-        this._classifyActions();
     }
-    show() {
-        this._visible$.next(true);
+    getItem(name) {
+        return this.items
+            .find((item) => item.name === name);
     }
-    hide() {
-        this._visible$.next(false);
+    fetchQueryParams() {
+        this._paramController.fetchQueryParams();
     }
-    addReorderAction(action) {
-        this._allActions.unshift(action);
-        action.isReorderAction = true;
-        this._classifyAction(action);
-        this._reorderAction = action;
+    /**
+     * Call change callback and apply new filter values
+     */
+    change() {
+        const valuesAsQuery = this._itemStore.valuesAsQuery();
+        const sort = this._itemStore.getSort();
+        const sortingChanged = ((!sort || !this._sort) && sort !== this._sort)
+            || (sort && this._sort && !objectsAreEquals(this._sort, sort));
+        if (sortingChanged) {
+            this._sort = sort;
+            if (this.config.sortChange) {
+                this.config.sortChange(valuesAsQuery, sort);
+            }
+        }
+        if (this.config.change) {
+            this.config.change(valuesAsQuery, sort);
+        }
+        this._updateChipsVisibility();
+        // visibility for actions can depend on filters state
+        this._actions.updateActionsVisibility();
     }
-    clearActions() {
-        this._allActions = [];
-        this._setActions([]);
-        this._setKebabActions([]);
+    /**
+     * Update filter actions config
+     *
+     * @param actions
+     */
+    updateActions(actions) {
+        this._actions.initActions(actions);
     }
-    updateActionsVisibility() {
-        this._allActions.forEach((action) => action.updateVisibility());
-        this._classifyActions();
+    /**
+     * Show "Filters" button
+     */
+    showFiltersBtn() {
+        this._filtersBtnVisible$.next(true);
     }
-    updateDisabledState() {
-        this.actions.forEach((action) => action.updateDisabledState());
+    /**
+     * Hide "Filters" button
+     */
+    hideFiltersBtn() {
+        this._filtersBtnVisible$.next(false);
     }
-    _setKebabActions(actions) {
-        this._menuActions$.next(actions);
+    /**
+     * Show "Keyword" field if it present
+     */
+    showKeywordField() {
+        this._keywordVisible$.next(true);
     }
-    _setActions(actions) {
-        this._actions$.next(actions);
+    /**
+     * Hide "Keyword" field if it present
+     */
+    hideKeywordField() {
+        this._keywordVisible$.next(false);
     }
-    _classifyActions() {
-        const kebabActions = [];
-        const actions = [];
-        const mobileMode = this.mobileMode;
-        this._allActions
-            .filter((action) => {
-            return action.visible;
-        })
-            .forEach((action) => {
-            if (action.menu !== false && (action.menu || mobileMode)) {
-                kebabActions.push(action);
-            }
-            else {
-                actions.push(action);
-            }
-        });
-        this._setKebabActions(kebabActions);
-        this._setActions(actions);
+    /**
+     * Go through actions and check show() callback and update visible actions
+     */
+    updateActionsVisibility() {
+        this._actions.updateActionsVisibility();
     }
-    _classifyAction(action) {
-        if (action.menu) {
-            this._setKebabActions([...this.menuActions, action]);
-        }
-        else {
-            this._setActions([...this.actions, action]);
-        }
+    /**
+     * Go through actions and check disabled() callback and update disabled state
+     */
+    updateDisabledState() {
+        this._actions.updateDisabledState();
     }
-    _listenMobileMedia() {
-        this._breakpointObserver.observe(this._mobileMedia)
-            .pipe(skip(1), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._classifyActions();
-        });
+    setItems(items) {
+        this._itemStore.destroyItems();
+        this.config.items = items;
+        this._itemStore.setConfig(this._config);
+        this._paramController.initItems();
+        this._updateKeyword();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsController, deps: [{ token: i1$5.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsController });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsController, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$5.BreakpointObserver }] });
-
-const FilterIcon = '<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-240L161-745q-14-17-4-36t31-19h584q21 0 31 19t-4 36L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-276 240-304H240l240 304Zm0 0Z"/></svg>';
-
-class FsFilterSavedFilterChipsComponent {
-    savedFilter;
-    items = [];
-    _itemStore = inject(ItemStore);
-    ngOnInit() {
-        this.items = [...this._itemStore.items]
-            .filter((item) => !!this.savedFilter.filters[item.name])
-            .map((item) => {
-            item.setModel(this.savedFilter.filters[item.name]);
-            return item;
-        });
+    keywordChange(keyword) {
+        this._keyword$.next(keyword);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterChipsComponent, isStandalone: true, selector: "fs-saved-filter-chips", inputs: { savedFilter: "savedFilter" }, ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"], dependencies: [{ kind: "component", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item", "removable", "clickable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-saved-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsFilterChipComponent,
-                    ], template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"] }]
-        }], propDecorators: { savedFilter: [{
-                type: Input
-            }] } });
-
-class FsFilterSavedFilterManageComponent {
-    savedFilters;
-    _savedFilterController = inject(SavedFilterController);
-    _cdRef = inject(ChangeDetectorRef);
-    _paramController = inject(ParamController);
-    _itemStore = inject(ItemStore);
-    _dialogRef = inject(MatDialogRef);
-    _filterOverlayService = inject(FsFilterOverlayService);
-    ngOnInit() {
-        this.savedFilters = this._savedFilterController.savedFilters;
+    updateSortings(items) {
+        this._itemStore.updateSortingItemsValues(items);
     }
-    get items() {
-        return this._itemStore.items;
+    _initFilterWithConfig(config) {
+        if (this.config) {
+            this._itemStore.destroyItems();
+        }
+        config = {
+            ...(this._defaultConfig || {}),
+            ...config,
+        };
+        this._config = new FsFilterConfig(config);
+        this._actions.setConfig(this._config);
+        this._persistanceController.setConfig(this._config, this.inDialog);
+        this._itemStore.setConfig(this._config);
+        this._paramController.setConfig(this._config);
+        this._updateKeyword();
+        if (this.config.reloadWhenConfigChanged) {
+            this.change();
+        }
     }
-    get pluralLabelLower() {
-        return this._savedFilterController.pluralLabelLower;
+    _destroyFilterDrawer() {
+        this._filterOverlay.close();
     }
-    get sortable() {
-        return this._savedFilterController.orderable;
+    _updateWindowWidth() {
+        this.windowDesktop = window.innerWidth > 1200;
     }
-    selectFilter(savedFilter) {
-        this._savedFilterController.setActiveFilter(savedFilter);
-        this._filterOverlayService.open();
-        this._dialogRef.close();
+    _listenEscButton() {
+        this._zone.runOutsideAngular(() => {
+            fromEvent(window, 'keyup')
+                .pipe(filter$1((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._zone.run(() => {
+                    this.changeVisibility(false);
+                });
+            });
+        });
     }
-    remove(savedFilter) {
-        this._savedFilterController.delete(savedFilter)
-            .subscribe(() => {
-            this.savedFilters = this._savedFilterController.savedFilters;
-            this._cdRef.markForCheck();
+    _listenWindowResize() {
+        this._zone.runOutsideAngular(() => {
+            fromEvent(window, 'resize')
+                .pipe(debounceTime(100), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._zone.run(() => {
+                    this._updateWindowWidth();
+                });
+            });
         });
     }
-    order(savedFilters) {
-        this._savedFilterController.order(savedFilters)
-            .subscribe();
+    _initAutoReload() {
+        if (this.config.autoReload) {
+            interval(this.config.autoReload.seconds * 1000)
+                .pipe(filter$1(() => this.autoReload), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this.reload(null);
+            });
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterManageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterManageComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage {{ pluralLabelLower }}\n</h1>\n<div mat-dialog-content>\n  <table class=\"fs-list-table\">\n    <thead>\n      <tr>\n        <th>\n          Name\n        </th>\n        <th>\n          Filters\n        </th>\n        <th class=\"actions-column\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (savedFilter of savedFilters; track savedFilter.id) {\n        <tr>\n          <td>\n            <a (click)=\"selectFilter(savedFilter)\">\n              {{ savedFilter.name }}\n            </a>\n          </td>\n          <td>\n            <fs-saved-filter-chips [savedFilter]=\"savedFilter\"></fs-saved-filter-chips>\n          </td>\n          <td>\n            <fs-menu>\n              <ng-template\n                  fs-menu-item\n                  (click)=\"remove(savedFilter)\">\n                Delete\n              </ng-template>\n            </fs-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<div mat-dialog-actions>\n  <button\n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host ::ng-deep .mat-mdc-dialog-content{width:800px;max-width:100%}.actions-column{width:1%}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$6.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$6.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$6.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$6.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: FsFilterSavedFilterChipsComponent, selector: "fs-saved-filter-chips", inputs: ["savedFilter"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterManageComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatDialogModule,
-                        MatButton,
-                        FsFilterSavedFilterChipsComponent,
-                        FsMenuModule,
-                    ], template: "<h1 mat-dialog-title>\n  Manage {{ pluralLabelLower }}\n</h1>\n<div mat-dialog-content>\n  <table class=\"fs-list-table\">\n    <thead>\n      <tr>\n        <th>\n          Name\n        </th>\n        <th>\n          Filters\n        </th>\n        <th class=\"actions-column\"></th>\n      </tr>\n    </thead>\n    <tbody>\n      @for (savedFilter of savedFilters; track savedFilter.id) {\n        <tr>\n          <td>\n            <a (click)=\"selectFilter(savedFilter)\">\n              {{ savedFilter.name }}\n            </a>\n          </td>\n          <td>\n            <fs-saved-filter-chips [savedFilter]=\"savedFilter\"></fs-saved-filter-chips>\n          </td>\n          <td>\n            <fs-menu>\n              <ng-template\n                  fs-menu-item\n                  (click)=\"remove(savedFilter)\">\n                Delete\n              </ng-template>\n            </fs-menu>\n          </td>\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n<div mat-dialog-actions>\n  <button\n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>", styles: ["::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}:host ::ng-deep .mat-mdc-dialog-content{width:800px;max-width:100%}.actions-column{width:1%}\n"] }]
-        }] });
-
-class FsSavedFilterAutocompleteChipsComponent {
-    savedFiltersController;
-    selectedFilter;
-    _itemStore = inject(ItemStore);
-    _paramController = inject(ParamController);
-    _dialog = inject(MatDialog);
-    _destroyRef = inject(DestroyRef);
-    _injector = inject(Injector);
-    _cdRef = inject(ChangeDetectorRef);
-    _prompt = inject(FsPrompt);
-    _message = inject(FsMessage);
-    get filters$() {
-        return this.savedFiltersController.savedFilters$;
+    _listenInputChanges() {
+        this._keyword$
+            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
+            .subscribe((value) => {
+            const keywordItem = this._itemStore.keywordItem;
+            keywordItem.model = value;
+            this.change();
+        });
     }
-    get activeFilter$() {
-        return this.savedFiltersController.activeFilter$;
+    _initKeywordVisibility() {
+        this._keywordVisible$.next(!!this.keywordItem && !this.keywordItem?.hide);
     }
-    get pluralLabelLower() {
-        return this.savedFiltersController.pluralLabelLower;
+    _initAutoFocus() {
+        // Avoid ngChanges error
+        setTimeout(() => {
+            if (this.config.autofocus) {
+                this.focus();
+            }
+        });
     }
-    get pluralLabel() {
-        return this.savedFiltersController.pluralLabel;
+    _listenInternalItemsChange() {
+        this._itemStore
+            .itemsChange$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.keyword = this._itemStore.keywordItem?.model;
+            this.change();
+        });
     }
-    get labelIcon() {
-        return this.savedFiltersController.labelIcon;
+    _initOverlay() {
+        this._filterOverlay.setClearFn(this.clear.bind(this));
+        this._filterOverlay.setDoneFn(this.hide.bind(this));
     }
-    compareWith = (o1, o2) => {
-        return o1?.id === o2?.id;
-    };
-    selectFilter(savedFilter) {
-        this.savedFiltersController.setActiveFilter(savedFilter);
+    // We may need some time to recieve external params and after that ready can be emitted
+    _listenWhenFilterReady() {
+        combineLatest([
+            this._paramController.pending$,
+            this.itemsReady$,
+        ])
+            .pipe(filter$1(([pendingParams, itemsReady]) => !pendingParams && itemsReady), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.init();
+            this._updateKeyword();
+            this.ready.emit();
+        });
     }
-    selectedFilterChange(savedFilter) {
-        this.savedFiltersController.setActiveFilter(savedFilter);
-        if (!savedFilter) {
-            this._itemStore.filtersClear();
-        }
+    _updateKeyword() {
+        this.keyword = this._itemStore.keywordItem?.model;
     }
-    ngOnInit() {
-        this.savedFiltersController.activeFilter$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((savedFilter) => {
-            this.selectedFilter = savedFilter;
-            this._cdRef.markForCheck();
+    _updateChipsVisibility() {
+        const hasFilterChips = this._itemStore.items
+            .some((item) => {
+            return item.isChipVisible;
         });
+        this._hasFilterChips$.next(hasFilterChips);
     }
-    save() {
-        this.savedFiltersController
-            .save(this.selectedFilter)
-            .pipe(tap$1(() => {
-            this._message.success(`Saved ${this.savedFiltersController.singularLabel}`);
-        }))
-            .subscribe();
-    }
-    create() {
-        this.savedFiltersController.create()
-            .pipe(tap$1(() => {
-            this._message
-                .success(`Created ${this.savedFiltersController.singularLabel}`);
-        }))
-            .subscribe();
-    }
-    saveAs() {
-        this._prompt.input({
-            title: 'Save as new alert',
-            label: 'Name',
-            required: true,
-            commitLabel: 'Save',
-            dialogConfig: {
-                restoreFocus: false,
-            },
-        })
-            .pipe(switchMap$1((name) => {
-            const data = {
-                id: null,
-                name,
-            };
-            return this.savedFiltersController.save(data);
-        }), tap$1(() => {
-            this._message.success(`Saved ${this.savedFiltersController.singularLabel}`);
-        }))
-            .subscribe();
-    }
-    fetch = (query) => {
-        return this.savedFiltersController.savedFilters$
-            .pipe(map$1((filters) => filters
-            .filter((filter) => filter
-            .name.toLowerCase().includes(query.toLowerCase()))));
-    };
-    manageFilters() {
-        this._dialog
-            .open(FsFilterSavedFilterManageComponent, {
-            injector: this._injector,
-            restoreFocus: false,
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsSavedFilterAutocompleteChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsSavedFilterAutocompleteChipsComponent, isStandalone: true, selector: "fs-saved-filter-autocomplete-chips", inputs: { savedFiltersController: "savedFiltersController" }, ngImport: i0, template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [compareWith]=\"compareWith\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"], dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: i1$3.FsAutocompleteChipsPrefixDirective, selector: "[fsAutocompleteChipsPrefix]", inputs: ["icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass" } }, providers: [
+            FsFilterOverlayService,
+            ParamController,
+            PersistanceController,
+            QueryParamController,
+            FocusControllerService,
+            ItemStore,
+            SavedFilterController,
+            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  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <mat-form-field\n              class=\"search-form-field form-field-padless\"\n              [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n            <span\n                matPrefix\n                class=\"icon\">\n              <mat-icon matPrefix>\n                search\n              </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        }\n        @if (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && 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      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.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:18px}.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-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsSavedFilterAutocompleteChipsComponent, selector: "fs-saved-filter-autocomplete-chips", inputs: ["savedFiltersController"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: "ngmodule", type: FsClearModule }, { kind: "component", type: i3$2.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: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsSavedFilterAutocompleteChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-saved-filter-autocomplete-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsAutocompleteChipsModule,
+            args: [{ selector: 'fs-filter', providers: [
+                        FsFilterOverlayService,
+                        ParamController,
+                        PersistanceController,
+                        QueryParamController,
+                        FocusControllerService,
+                        ItemStore,
+                        SavedFilterController,
+                        ActionsController,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgTemplateOutlet,
+                        FsSavedFilterAutocompleteChipsComponent,
+                        MatFormField,
+                        NgClass,
+                        MatPrefix,
+                        MatIcon,
+                        MatInput,
                         FormsModule,
-                    ], template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [compareWith]=\"compareWith\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"] }]
-        }], propDecorators: { savedFiltersController: [{
+                        FsFormModule,
+                        FsClearModule,
+                        FsFilterChipsComponent,
+                        FsFilterActionsComponent,
+                        MatIconAnchor,
+                        MatSlideToggle,
+                        AsyncPipe,
+                    ], template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <mat-form-field\n              class=\"search-form-field form-field-padless\"\n              [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n            <span\n                matPrefix\n                class=\"icon\">\n              <mat-icon matPrefix>\n                search\n              </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        }\n        @if (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && 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      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.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:18px}.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-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}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: () => [], propDecorators: { setConfig: [{
+                type: Input,
+                args: ['config']
+            }], setFilter: [{
+                type: Input,
+                args: ['filter']
+            }], showSortBy: [{
                 type: Input
+            }], closed: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], ready: [{
+                type: Output
+            }], statusBar: [{
+                type: ContentChild,
+                args: [FilterStatusBarDirective]
+            }], keywordMatInput: [{
+                type: ViewChild,
+                args: ['keywordMatInput', { read: MatInput }]
+            }], reloadEl: [{
+                type: ViewChild,
+                args: ['reloadEl', { read: ElementRef }]
+            }], showFilterMenu: [{
+                type: HostBinding,
+                args: ['class.filters-open']
+            }], windowDesktop: [{
+                type: HostBinding,
+                args: ['class.window-desktop']
+            }], fsFilterClass: [{
+                type: HostBinding,
+                args: ['class.fs-filter']
             }] } });
 
-class FilterStatusBarDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FilterStatusBarDirective, isStandalone: true, selector: "[fsFilterStatusBar]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsFilterStatusBar]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
-
-const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
-
-class FilterComponent {
-    set setConfig(config) {
-        this._initFilterWithConfig(config);
-    }
-    set setFilter(config) {
-        this._initFilterWithConfig(config);
-    }
-    showSortBy = true;
-    closed = new EventEmitter();
-    opened = new EventEmitter();
-    ready = new EventEmitter();
-    statusBar;
-    keywordMatInput;
-    reloadEl;
-    showFilterMenu = false;
-    windowDesktop = false;
-    fsFilterClass = true;
-    searchPlaceholder = 'Search';
-    keyword = '';
-    autoReload = true;
-    _config = null;
-    _sort;
-    _filtersBtnVisible$ = new BehaviorSubject(true);
-    _keywordVisible$ = new BehaviorSubject(false);
-    _hasFilterChips$ = new BehaviorSubject(false);
-    _keyword$ = new Subject();
-    _destroy$ = new Subject();
-    _dialogRef = inject(MatDialogRef, { optional: true });
-    _drawerRef = inject(DrawerRef, { optional: true });
-    _defaultConfig = inject(FS_FILTER_CONFIG, { optional: true });
-    _filterOverlay = inject(FsFilterOverlayService);
-    _zone = inject(NgZone);
-    _paramController = inject(ParamController);
-    _persistanceController = inject(PersistanceController);
-    _itemStore = inject(ItemStore);
-    _actions = inject(ActionsController);
-    _savedFilterController = inject(SavedFilterController);
-    constructor() {
-        this._itemStore.filter = this;
-        this._listenWhenFilterReady();
-        this._updateWindowWidth();
-        const iconRegistry = inject(MatIconRegistry);
-        const sanitizer = inject(DomSanitizer);
-        iconRegistry.addSvgIconLiteral('filterOutline', sanitizer.bypassSecurityTrustHtml(FilterIcon));
-        this._filterOverlay.attach$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.showFilterMenu = true;
-        });
-        this._filterOverlay.detach$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.showFilterMenu = false;
-        });
-        this._listenWindowResize();
-    }
-    get config() {
-        return this._config;
-    }
-    get filterParams() {
-        return this._itemStore.values();
-    }
-    get inDialog() {
-        return !!this._dialogRef || !!this._drawerRef;
-    }
-    get filterParamsQuery() {
-        return this._itemStore.valuesAsQuery();
-    }
-    get items() {
-        return this._itemStore.items;
-    }
-    get visibleItems() {
-        return this._itemStore.visibleItems;
-    }
-    get keywordItem() {
-        return this._itemStore.keywordItem;
-    }
-    get itemsReady$() {
-        return this._itemStore.ready$;
-    }
-    get hasFilterChips$() {
-        return this._hasFilterChips$.asObservable();
-    }
-    get hasVisibleItemOrSorting() {
-        return this.visibleItems.length > 0 || !!this._itemStore.sortByItem;
-    }
-    get filtersBtnVisible$() {
-        return this._filtersBtnVisible$.asObservable();
-    }
-    get inlineToolbar$() {
-        return combineLatest({
-            keywordVisible: this._keywordVisible$.asObservable(),
-            activeFilter: of(this.savedFiltersController.enabled),
-        })
-            .pipe(map(({ keywordVisible, activeFilter }) => {
-            return !keywordVisible && !activeFilter;
-        }));
-    }
-    get notInlineToolbar$() {
-        return this.inlineToolbar$
-            .pipe(map((inline) => !inline));
+class AutocompletechipsComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    _injector = inject(Injector);
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    get keywordVisible$() {
-        return this._keywordVisible$.asObservable();
+    addAutocompleteChipItem(event) {
+        if (event.data && this.item.model.indexOf(event.data.value) === -1) {
+            this.item.model.push(event.data);
+            this.itemChange();
+        }
     }
-    get actionsVisible$() {
-        return this._actions.visible$;
+    removeAutocompleteChipItem(event) {
+        remove(this.item.model, { value: event.data.value });
+        this.itemChange();
     }
-    get actions$() {
-        return this._actions.actions$;
+    clearAutocompleteChipItem() {
+        this.item.clear();
+        this.itemChange();
     }
-    get menuActions$() {
-        return this._actions.menuActions$;
+    fetch = (keyword) => {
+        return this.item.valuesFn(keyword, this.item.filter);
+    };
+    compareItems(item1, item2) {
+        return item1?.value === item2?.value;
     }
-    set activeSavedFilter(savedFilter) {
-        this._savedFilterController.setActiveFilter(savedFilter);
+    actionClick(action) {
+        const filterComponent = this._injector.get(FilterComponent);
+        action.click(filterComponent);
     }
-    get activeSavedFilter() {
-        return this._savedFilterController.activeFilter;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, 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\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"actionClick(action)\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsAutocompleteChipsModule,
+                        FocusToItemDirective,
+                        FormsModule,
+                        FsFormModule,
+                    ], 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\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"actionClick(action)\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class CheckboxComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    get savedFilters() {
-        return this._savedFilterController.savedFilters;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", type: CheckboxComponent, isStandalone: true, 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 0 -12px -8px}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsLabelModule,
+                        MatCheckbox,
+                        FormsModule,
+                        FsFormModule,
+                    ], 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 0 -12px -8px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class ChipsComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    get savedFiltersController() {
-        return this._savedFilterController;
+    compareFn = (modelValue, chipValue) => {
+        return String(modelValue.value) === String(chipValue.value);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChipsComponent, isStandalone: true, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "@if (item.values?.length) {\n  <fs-label-field>\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      @for (value of item.values; track value) {\n        <fs-chip\n            [value]=\"value\"\n            [selectable]=\"true\">\n          {{ value.name }}\n        </fs-chip>\n      }\n    </fs-chips>\n  </fs-label-field>\n}\n@if (item.loading) {\n  {{ item.label }} loading...\n}", styles: ["fs-chip{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$6.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i2$2.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple", "sortable", "selectable", "orientation", "width"] }, { kind: "component", type: i2$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: ChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsLabelModule,
+                        FsChipModule,
+                        FormsModule,
+                        FsFormModule,
+                    ], template: "@if (item.values?.length) {\n  <fs-label-field>\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      @for (value of item.values; track value) {\n        <fs-chip\n            [value]=\"value\"\n            [selectable]=\"true\">\n          {{ value.name }}\n        </fs-chip>\n      }\n    </fs-chips>\n  </fs-label-field>\n}\n@if (item.loading) {\n  {{ item.label }} loading...\n}", styles: ["fs-chip{line-height:40px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class DateRangeComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    viewType = PickerViewType.Date;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
     ngOnInit() {
-        this._initAutoFocus();
-        this._initAutoReload();
-        this._listenInputChanges();
-        this._listenInternalItemsChange();
-        this._initKeywordVisibility();
-        this._initOverlay();
-    }
-    ngOnDestroy() {
-        this._destroyFilterDrawer();
-        this._destroy$.next(null);
-        this._destroy$.complete();
+        if (this.item.type === ItemType.DateTimeRange) {
+            this.viewType = PickerViewType.DateTime;
+        }
+        else {
+            this.viewType = PickerViewType.Date;
+        }
     }
-    focus() {
-        this.keywordMatInput?.focus();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$1.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i3$1.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: DateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-date-range', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FormsModule,
+                        FocusToItemDirective,
+                        FsDatePickerModule,
+                        FsFormModule,
+                    ], template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class DateComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    viewType = PickerViewType.Date;
+    itemDateMode = ItemDateMode;
+    showYear = true;
+    showMonth = true;
+    showDay = true;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    updateSort(sort) {
-        this._itemStore.updateSort(sort);
+    ngOnInit() {
+        this.viewType = this.item.type === ItemType.DateTime ? PickerViewType.DateTime : PickerViewType.Date;
+        if (this.item.mode === ItemDateMode.ScrollMonthYear) {
+            this.showDay = false;
+        }
     }
-    /**
-     *
-     * Do update value of some field
-     *
-     * @param values - values for update
-     *
-     * To update text value just pass new text value
-     *
-     * public updateSelectValue(val) {
-     *   this.filterEl.updateValues({ keyword: val });
-     * }
-     *
-     * To update select or observable select you could pass suitable value
-     *
-     * public updateSelectValue(val: number) {
-     *   this.filterEl.updateValues({ simple_select: val }, { observable_select: val });
-     * }
-     *
-     * To update checkbox value just pass true/false as value
-     *
-     * public updateCheckox(val: boolean) {
-     *   this.filterEl.updateValues({ checkbox: val });
-     * }
-     *
-     * To update range value just pass object with min&max object or just with one of targets
-     *
-     * Ex.: { min: 10, max 15 }, { min: 5 }, { max 5 }
-     *
-     * public updateRange(val) {
-     *   this.filterEl.updateValues({ range: val });
-     * }
-     *
-     * To update autocomplete just pass object with name/value fields
-     *
-     * Ex.: { name: 'John Doe', value: 1 }
-     *
-     * public updateAutocomplete(val) {
-     *   this.filterEl.updateValues({ autocomplete_user_id: val });
-     * }
-     *
-     * To update autocompletechips just pass:
-     *
-     * 1) object with name/value fields - will be appended to existing set of values
-     *
-     * { name: 'John Doe', value: 1 }
-     *
-     * 2) array of objects - will be appended to existing set of values
-     *
-     * [{ name: 'John Doe', value: 1 }, { name: 'Darya Filipova', value: 2 }]
-     *
-     * 3) null - clear existing set of values
-     *
-     * public updateAutocomplete(val) {
-     *   this.filterEl.updateValues({ autocompletechips_user_id: val });
-     * }
-     *
-     */
-    updateValues(values) {
-        Object.keys(values).forEach((key) => {
-            const filterItem = this.items
-                .find((item) => item.name === key);
-            if (!filterItem) {
-                return;
-            }
-            filterItem.model = values[key];
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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}", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i3$1.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: DateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-date', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FormsModule,
+                        FsDatePickerModule,
+                        FocusToItemDirective,
+                        FsFormModule,
+                    ], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </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}" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class RangeComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    from;
+    to;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    hide() {
-        this.changeVisibility(false);
+    ngOnInit() {
+        this.listenChanges();
     }
-    show() {
-        this.changeVisibility(true);
+    listenChanges() {
+        const fromListener = fromEvent(this.from.nativeElement, 'keyup')
+            .pipe(distinctUntilChanged());
+        const toListener = fromEvent(this.to.nativeElement, 'keyup')
+            .pipe(distinctUntilChanged());
+        merge(fromListener, toListener)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.itemChange();
+        });
     }
-    changeVisibilityClick(value, event = null) {
-        if (event) {
-            event.stopPropagation();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RangeComponent, isStandalone: true, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'from'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.min\"\n      #from>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'to'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.max\"\n      #to>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-range', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatPrefix,
+                        MatInput,
+                        FormsModule,
+                        FocusToItemDirective,
+                        FsFormModule,
+                        MatSuffix,
+                    ], template: "<div class=\"form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'from'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.min\"\n      #from>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'to'\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [(ngModel)]=\"item.model.max\"\n      #to>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { from: [{
+                type: ViewChild,
+                args: ['from', { static: true }]
+            }], to: [{
+                type: ViewChild,
+                args: ['to', { static: true }]
+            }] } });
+
+class FsFilterIsolateValues {
+    transform(values, isolate) {
+        if (!isolate) {
+            return values;
         }
-        this.changeVisibility(value);
+        return values.filter((value) => {
+            return value.value !== isolate.value;
+        });
     }
-    get itemValues() {
-        return this.items
-            .map((item) => item.value);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, isStandalone: true, name: "fsFilterIsolateValues" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fsFilterIsolateValues',
+                    standalone: true,
+                }]
+        }] });
+
+class SelectMultipleComponent {
+    _cd;
+    item;
+    select;
+    constructor(_cd) {
+        this._cd = _cd;
     }
-    get nonEmptyItemValues() {
-        return this.items
-            .filter((item) => item.value !== undefined)
-            .map((item) => item.value);
+    changed() {
+        if (this.item.isolate) {
+            this.item.isolate.enabled = false;
+            if (this.item.multiple && Array.isArray(this.item.model)) {
+                const index = this.item.model.indexOf(this.item.isolate.value);
+                if (index > -1) {
+                    this.item.model.splice(index, 1);
+                }
+            }
+        }
     }
-    get hasItemValues() {
-        return this.items
-            .some((item) => item.value !== undefined);
+    close() {
+        this.select.close();
     }
-    getItemValue(name) {
-        const item = this.items
-            .find((_item) => _item.name === name);
-        return item?.value;
+    markForCheck() {
+        this._cd.markForCheck();
     }
-    showItem(name) {
-        const item = this.getItem(name);
-        if (item) {
-            item.hide = false;
-            this._itemStore.updateItemsVisiblity();
+    isolateChange(filter) {
+        if (filter.isolate.enabled) {
+            filter.model = filter.multiple ? [filter.isolate.value] : filter.isolate.value;
         }
-    }
-    hideItem(name) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
+        else {
+            if (filter.multiple) {
+                filter.model = filter.defaultValue ? filter.defaultValue : [];
+            }
+            else {
+                filter.model = filter.defaultValue ? filter.defaultValue : null;
+            }
         }
-        item.hide = true;
-        this._itemStore.updateItemsVisiblity();
     }
-    clearItem(name) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
-        }
-        item.clear();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectMultipleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectMultipleComponent, isStandalone: true, selector: "filter-item-select-multiple", 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>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n        (change)=\"isolateChange(item)\"\n        [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">\n          {{ item.isolate.label }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: 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: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-select-multiple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        NgClass,
+                        MatLabel,
+                        MatSelect,
+                        FocusToItemDirective,
+                        FormsModule,
+                        FsFormModule,
+                        MatOption,
+                        MatHint,
+                        MatCheckbox,
+                        FsFilterIsolateValues,
+                    ], template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n        (change)=\"isolateChange(item)\"\n        [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">\n          {{ item.isolate.label }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
+                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['select', { static: true }]
+            }] } });
+
+class SelectSimpleComponent {
+    _cd;
+    item;
+    select;
+    constructor(_cd) {
+        this._cd = _cd;
     }
-    updateItemConfig(name, params) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
+    changed() {
+        if (this.item.isolate) {
+            this.item.isolate.enabled = false;
         }
-        item.label = params.label ?? item.label;
-        item.chipLabel = params.chipLabel ?? item.chipLabel;
-        this._itemStore.updateItemsVisiblity();
     }
-    getItemValueChange$(name) {
-        const item = this.items.find((i) => i.name === name);
-        if (item) {
-            return item.value$
-                .pipe(map(() => {
-                return item.model;
-            }));
-        }
-        return null;
+    isolateChange(filter) {
+        filter.model = filter.isolate.enabled ? filter.isolate.value : null;
     }
-    changeVisibility(state) {
-        if (state === this.showFilterMenu) {
-            return;
-        }
-        if (!state) {
-            this.closed.emit();
-            return this._destroyFilterDrawer();
-        }
-        if (!this.hasVisibleItemOrSorting) {
-            return;
-        }
-        this._listenEscButton();
-        this.opened.emit();
-        this._filterOverlay.open();
+    markForCheck() {
+        this._cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectSimpleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectSimpleComponent, isStandalone: true, 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>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <mat-checkbox\n    (change)=\"isolateChange(item)\"\n    [(ngModel)]=\"item.isolate.enabled\">\n    <span class=\"checkbox-label\">\n      {{ item.isolate.label }}\n    </span>\n  </mat-checkbox>\n}", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: 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: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-select-simple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        NgClass,
+                        MatLabel,
+                        MatSelect,
+                        FocusToItemDirective,
+                        FormsModule,
+                        FsFormModule,
+                        MatOption,
+                        MatCheckbox,
+                        FsFilterIsolateValues,
+                    ], template: "<mat-form-field [ngClass]=\"{ isolate: !!item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    @for (item of item.values | fsFilterIsolateValues: item.isolate; track item) {\n      <mat-option\n        [value]=\"item.value\">\n        {{ item.name }}\n      </mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <mat-checkbox\n    (change)=\"isolateChange(item)\"\n    [(ngModel)]=\"item.isolate.enabled\">\n    <span class=\"checkbox-label\">\n      {{ item.isolate.label }}\n    </span>\n  </mat-checkbox>\n}" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
+                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['select', { static: true }]
+            }] } });
+
+class SelectGroupsComponent {
+    cd;
+    select;
+    item;
+    constructor(cd) {
+        this.cd = cd;
+    }
+    compare(o1, o2) {
+        return o1 == o2;
+    }
+    markForCheck() {
+        this.cd.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectGroupsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectGroupsComponent, isStandalone: true, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    @for (selectItem of item.values; track selectItem) {\n      @if (selectItem[item.children]) {\n        <mat-optgroup [label]=\"selectItem.name\">\n          @for (subItem of selectItem[item.children]; track subItem) {\n            <mat-option\n              [value]=\"subItem.value\"\n              [ngStyle]=\"selectItem.style\">\n              {{ subItem.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option\n          [value]=\"selectItem.value\"\n          [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectGroupsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-select-groups', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatSelect,
+                        FocusToItemDirective,
+                        FormsModule,
+                        FsFormModule,
+                        MatOptgroup,
+                        MatOption,
+                        NgStyle,
+                    ], template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    @for (selectItem of item.values; track selectItem) {\n      @if (selectItem[item.children]) {\n        <mat-optgroup [label]=\"selectItem.name\">\n          @for (subItem of selectItem[item.children]; track subItem) {\n            <mat-option\n              [value]=\"subItem.value\"\n              [ngStyle]=\"selectItem.style\">\n              {{ subItem.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      } @else {\n        <mat-option\n          [value]=\"selectItem.value\"\n          [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { select: [{
+                type: ViewChild,
+                args: ['select', { static: true }]
+            }], item: [{
+                type: Input
+            }] } });
+
+class SelectComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    selectedItem;
+    // For case when we have multiple selection with __all option
+    // If _all has been selected than we must disable all other items
+    allItemsOptionSelected = false;
+    get multipleSelectItem() {
+        return this.item;
     }
-    init() {
-        const data = this._itemStore.valuesAsQuery();
-        this._sort = this._itemStore.getSort();
-        if (this.config.init) {
-            this.config.init(data, this._sort, this);
-        }
-        this._updateChipsVisibility();
-        this.items
-            .forEach((item) => {
-            item.init(item, this);
-        });
+    get simpleSelectItem() {
+        return this.item;
     }
-    clear(event = null) {
-        if (event) {
-            event.stopPropagation();
-        }
-        this._itemStore.filtersClear();
-        if (this.config.clear) {
-            this.config.clear();
-        }
-        this.keyword = '';
+    values$;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    reload(event = null) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        const data = this._itemStore.valuesAsQuery();
-        const el = this.reloadEl?.nativeElement;
-        if (el) {
-            el.style.transition = 'all 0.75s 0.0s';
-            el.style.transform = 'rotate(360deg)';
-            setTimeout(() => {
-                el.style.transition = null;
-                el.style.transform = null;
-            }, 1000);
-        }
-        if (this.config.reload) {
-            this.config.reload(data, this._itemStore.getSort());
+    ngOnChanges(changes) {
+        if (changes.item) {
+            this.values$ = this.item.values$;
         }
     }
-    getItem(name) {
-        return this.items
-            .find((item) => item.name === name);
-    }
-    fetchQueryParams() {
-        this._paramController.fetchQueryParams();
-    }
-    /**
-     * Call change callback and apply new filter values
-     */
-    change() {
-        const valuesAsQuery = this._itemStore.valuesAsQuery();
-        const sort = this._itemStore.getSort();
-        const sortingChanged = ((!sort || !this._sort) && sort !== this._sort)
-            || (sort && this._sort && !objectsAreEquals(this._sort, sort));
-        if (sortingChanged) {
-            this._sort = sort;
-            if (this.config.sortChange) {
-                this.config.sortChange(valuesAsQuery, sort);
+    ngDoCheck() {
+        if (this._kvDiffer) {
+            const changes = this._kvDiffer.diff(this.item);
+            if (changes) {
+                this._cd.markForCheck();
+                if (this.selectedItem) {
+                    this.selectedItem.markForCheck();
+                }
             }
         }
-        if (this.config.change) {
-            this.config.change(valuesAsQuery, sort);
-        }
-        this._updateChipsVisibility();
-        // visibility for actions can depend on filters state
-        this._actions.updateActionsVisibility();
-    }
-    /**
-     * Update filter actions config
-     *
-     * @param actions
-     */
-    updateActions(actions) {
-        this._actions.initActions(actions);
     }
-    /**
-     * Show "Filters" button
-     */
-    showFiltersBtn() {
-        this._filtersBtnVisible$.next(true);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ((item.loading$ | async)) {\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n} @else {\n  @if ((values$ | async)?.length) {\n    @if (item.multiple && !item.children) {\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    }\n    @if (!item.multiple && !item.children) {\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    }\n    @if (item.children) {\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    }\n  }\n}\n\n", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: 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: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { kind: "component", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { kind: "component", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatSelect,
+                        SelectMultipleComponent,
+                        SelectSimpleComponent,
+                        SelectGroupsComponent,
+                        AsyncPipe,
+                    ], template: "@if ((item.loading$ | async)) {\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n} @else {\n  @if ((values$ | async)?.length) {\n    @if (item.multiple && !item.children) {\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    }\n    @if (!item.multiple && !item.children) {\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    }\n    @if (item.children) {\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    }\n  }\n}\n\n", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { selectedItem: [{
+                type: ViewChild,
+                args: ['selectItem']
+            }] } });
+
+class TextComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    textControl = new UntypedFormControl();
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    /**
-     * Hide "Filters" button
-     */
-    hideFiltersBtn() {
-        this._filtersBtnVisible$.next(false);
+    ngOnInit() {
+        this._listenControlValueChanges();
+        this._listenModelChanges();
     }
-    /**
-     * Show "Keyword" field if it present
-     */
-    showKeywordField() {
-        this._keywordVisible$.next(true);
+    _listenControlValueChanges() {
+        this.textControl.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(200), takeUntil(this.destroy$))
+            .subscribe((value) => {
+            this.item.model = value;
+        });
     }
-    /**
-     * Hide "Keyword" field if it present
-     */
-    hideKeywordField() {
-        this._keywordVisible$.next(false);
+    _listenModelChanges() {
+        this._item.value$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.textControl.setValue(this.item.model, { emitEvent: false });
+        });
     }
-    /**
-     * Go through actions and check show() callback and update visible actions
-     */
-    updateActionsVisibility() {
-        this._actions.updateActionsVisibility();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextComponent, isStandalone: true, selector: "filter-item-text", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  @if (item.prefix) {\n    <span\n      matTextPrefix\n      [innerHtml]=\"item.prefix\">\n    </span>\n  }\n  <input\n    matInput\n    [formControl]=\"textControl\"\n    [fsFilterFocusTrigger]=\"item\">\n  @if (item.suffix) {\n    <span\n      matSuffix\n      [innerHtml]=\"item.suffix\">\n    </span>\n  }\n</mat-form-field>", styles: [""], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatPrefix,
+                        MatInput,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        FocusToItemDirective,
+                        MatSuffix,
+                    ], template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  @if (item.prefix) {\n    <span\n      matTextPrefix\n      [innerHtml]=\"item.prefix\">\n    </span>\n  }\n  <input\n    matInput\n    [formControl]=\"textControl\"\n    [fsFilterFocusTrigger]=\"item\">\n  @if (item.suffix) {\n    <span\n      matSuffix\n      [innerHtml]=\"item.suffix\">\n    </span>\n  }\n</mat-form-field>" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class WeekComponent extends BaseItemComponent {
+    _kvDiffers;
+    _cd;
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    /**
-     * Go through actions and check disabled() callback and update disabled state
-     */
-    updateDisabledState() {
-        this._actions.updateDisabledState();
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input \n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$1.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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.13", ngImport: i0, type: WeekComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item-week', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FormsModule,
+                        FsDatePickerModule,
+                        FocusToItemDirective,
+                        FsFormModule,
+                    ], template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input \n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>\n" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
+
+class FilterItemComponent {
+    _cdRef;
+    item;
+    itemType = ItemType;
+    get textItem() {
+        return this.item;
     }
-    setItems(items) {
-        this._itemStore.destroyItems();
-        this.config.items = items;
-        this._itemStore.setConfig(this._config);
-        this._paramController.initItems();
-        this._updateKeyword();
+    get chipsItem() {
+        return this.item;
     }
-    keywordChange(keyword) {
-        this._keyword$.next(keyword);
+    get baseSelectItem() {
+        return this.item;
     }
-    updateSortings(items) {
-        this._itemStore.updateSortingItemsValues(items);
+    get rangeItem() {
+        return this.item;
     }
-    _initFilterWithConfig(config) {
-        if (this.config) {
-            this._itemStore.destroyItems();
-        }
-        config = {
-            ...(this._defaultConfig || {}),
-            ...config,
-        };
-        this._config = new FsFilterConfig(config);
-        this._actions.setConfig(this._config);
-        this._persistanceController.setConfig(this._config, this.inDialog);
-        this._itemStore.setConfig(this._config);
-        this._paramController.setConfig(this._config);
-        this._updateKeyword();
-        if (this.config.reloadWhenConfigChanged) {
-            this.change();
-        }
+    get autocompleteItem() {
+        return this.item;
     }
-    _destroyFilterDrawer() {
-        this._filterOverlay.close();
+    get autocompleteChipsItem() {
+        return this.item;
     }
-    _updateWindowWidth() {
-        this.windowDesktop = window.innerWidth > 1200;
+    get dateItem() {
+        return this.item;
     }
-    _listenEscButton() {
-        this._zone.runOutsideAngular(() => {
-            fromEvent(window, 'keyup')
-                .pipe(filter$1((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._zone.run(() => {
-                    this.changeVisibility(false);
-                });
-            });
-        });
+    get dateRangeItem() {
+        return this.item;
     }
-    _listenWindowResize() {
-        this._zone.runOutsideAngular(() => {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(100), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._zone.run(() => {
-                    this._updateWindowWidth();
-                });
-            });
-        });
+    get dateTimeItem() {
+        return this.item;
     }
-    _initAutoReload() {
-        if (this.config.autoReload) {
-            interval(this.config.autoReload.seconds * 1000)
-                .pipe(filter$1(() => this.autoReload), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this.reload(null);
-            });
-        }
+    get dateTimeRangeItem() {
+        return this.item;
     }
-    _listenInputChanges() {
-        this._keyword$
-            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
-            .subscribe((value) => {
-            const keywordItem = this._itemStore.keywordItem;
-            keywordItem.model = value;
-            this.change();
-        });
+    get weekItem() {
+        return this.item;
     }
-    _initKeywordVisibility() {
-        this._keywordVisible$.next(!!this.keywordItem && !this.keywordItem?.hide);
+    get checkboxItem() {
+        return this.item;
     }
-    _initAutoFocus() {
-        // Avoid ngChanges error
-        setTimeout(() => {
-            if (this.config.autofocus) {
-                this.focus();
-            }
-        });
+    _destroy$ = new Subject();
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
     }
-    _listenInternalItemsChange() {
-        this._itemStore
-            .itemsChange$
+    ngOnInit() {
+        this.item.value$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.keyword = this._itemStore.keywordItem?.model;
-            this.change();
+            this._cdRef.markForCheck();
         });
     }
-    _initOverlay() {
-        this._filterOverlay.setClearFn(this.clear.bind(this));
-        this._filterOverlay.setDoneFn(this.hide.bind(this));
+    ngOnDestroy() {
+        this._destroy$.next(null);
+        this._destroy$.complete();
     }
-    // We may need some time to recieve external params and after that ready can be emitted
-    _listenWhenFilterReady() {
-        combineLatest([
-            this._paramController.pending$,
-            this.itemsReady$,
-        ])
-            .pipe(filter$1(([pendingParams, itemsReady]) => !pendingParams && itemsReady), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.init();
-            this._updateKeyword();
-            this.ready.emit();
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterItemComponent, isStandalone: true, selector: "filter-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  @switch (item.type) {\n    @case (itemType.Text) {\n      <filter-item-text\n        class=\"interface\"\n        [item]=\"textItem\">\n      </filter-item-text>\n    }\n    @case (itemType.Select) {\n      <filter-item-select\n        class=\"interface\"\n        [item]=\"baseSelectItem\">\n      </filter-item-select>\n    }\n    @case (itemType.Chips) {\n      <filter-item-chips\n        class=\"interface\"\n        [item]=\"chipsItem\">\n      </filter-item-chips>\n    }\n    @case (itemType.Range) {\n      <filter-item-range\n        class=\"interface interface-range\"\n        [item]=\"rangeItem\">\n      </filter-item-range>\n    }\n    @case (itemType.AutoComplete) {\n      <filter-item-autocomplete\n        class=\"interface\"\n        [item]=\"autocompleteItem\">\n      </filter-item-autocomplete>\n    }\n    @case (itemType.AutoCompleteChips) {\n      <filter-item-autocompletechips\n        class=\"interface\"\n        [item]=\"autocompleteChipsItem\">\n      </filter-item-autocompletechips>\n    }\n    @case (itemType.Date) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateTime) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateTimeItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.DateTimeRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateTimeRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.Week) {\n      <filter-item-week\n        class=\"interface\"\n        [item]=\"weekItem\">\n      </filter-item-week>\n    }\n    @case (itemType.Checkbox) {\n      <filter-item-checkbox\n        class=\"interface interface-checkbox\"\n        [item]=\"checkboxItem\">\n      </filter-item-checkbox>\n    }\n  }\n\n</div>\n", styles: [":host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"], dependencies: [{ kind: "component", type: TextComponent, selector: "filter-item-text" }, { kind: "component", type: SelectComponent, selector: "filter-item-select" }, { kind: "component", type: ChipsComponent, selector: "filter-item-chips" }, { kind: "component", type: RangeComponent, selector: "filter-item-range" }, { kind: "component", type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { kind: "component", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { kind: "component", type: DateComponent, selector: "filter-item-date" }, { kind: "component", type: DateRangeComponent, selector: "filter-item-date-range" }, { kind: "component", type: WeekComponent, selector: "filter-item-week" }, { kind: "component", type: CheckboxComponent, selector: "filter-item-checkbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'filter-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        TextComponent,
+                        SelectComponent,
+                        ChipsComponent,
+                        RangeComponent,
+                        AutocompleteComponent,
+                        AutocompletechipsComponent,
+                        DateComponent,
+                        DateRangeComponent,
+                        WeekComponent,
+                        CheckboxComponent,
+                    ], template: "<div class=\"filter filter-{{ item.type }}\">\n\n  @switch (item.type) {\n    @case (itemType.Text) {\n      <filter-item-text\n        class=\"interface\"\n        [item]=\"textItem\">\n      </filter-item-text>\n    }\n    @case (itemType.Select) {\n      <filter-item-select\n        class=\"interface\"\n        [item]=\"baseSelectItem\">\n      </filter-item-select>\n    }\n    @case (itemType.Chips) {\n      <filter-item-chips\n        class=\"interface\"\n        [item]=\"chipsItem\">\n      </filter-item-chips>\n    }\n    @case (itemType.Range) {\n      <filter-item-range\n        class=\"interface interface-range\"\n        [item]=\"rangeItem\">\n      </filter-item-range>\n    }\n    @case (itemType.AutoComplete) {\n      <filter-item-autocomplete\n        class=\"interface\"\n        [item]=\"autocompleteItem\">\n      </filter-item-autocomplete>\n    }\n    @case (itemType.AutoCompleteChips) {\n      <filter-item-autocompletechips\n        class=\"interface\"\n        [item]=\"autocompleteChipsItem\">\n      </filter-item-autocompletechips>\n    }\n    @case (itemType.Date) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateTime) {\n      <filter-item-date\n        class=\"interface interface-date\"\n        [item]=\"dateTimeItem\">\n      </filter-item-date>\n    }\n    @case (itemType.DateRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.DateTimeRange) {\n      <filter-item-date-range\n        class=\"interface interface-date\"\n        [item]=\"dateTimeRangeItem\">\n      </filter-item-date-range>\n    }\n    @case (itemType.Week) {\n      <filter-item-week\n        class=\"interface\"\n        [item]=\"weekItem\">\n      </filter-item-week>\n    }\n    @case (itemType.Checkbox) {\n      <filter-item-checkbox\n        class=\"interface interface-checkbox\"\n        [item]=\"checkboxItem\">\n      </filter-item-checkbox>\n    }\n  }\n\n</div>\n", styles: [":host ::ng-deep mat-form-field .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-prefix .text-suffix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-prefix,:host ::ng-deep mat-form-field .mat-form-field-suffix .text-suffix{top:-.25em;position:relative}:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-prefix .text-prefix,:host ::ng-deep mat-form-field:not(.mat-form-field-should-float) .mat-form-field-suffix .text-suffix{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class FilterDrawerComponent {
+    inline = false;
+    windowDesktop = false;
+    savedFilterName = '';
+    _clear;
+    _done;
+    _destroyRef = inject(DestroyRef);
+    _savedFilterController = inject(SavedFilterController);
+    _message = inject(FsMessage);
+    _itemStore = inject(ItemStore);
+    _overlayRef = inject(FILTER_DRAWER_OVERLAY);
+    _data = inject(FILTER_DRAWER_DATA);
+    _paramController = inject(ParamController);
+    constructor() {
+        this._itemStore.prepareItems();
+        this._clear = this._data.clear;
+        this._done = this._data.done;
+        this.updateWindowWidth();
     }
-    _updateKeyword() {
-        this.keyword = this._itemStore.keywordItem?.model;
+    updateWindowWidth() {
+        this.windowDesktop = window.innerWidth > 1200;
     }
-    _updateChipsVisibility() {
-        const hasFilterChips = this._itemStore.items
-            .some((item) => {
-            return item.isChipVisible;
+    get items$() {
+        return this._itemStore.visibleItems$;
+    }
+    get paramCointroller() {
+        return this._paramController;
+    }
+    get savedFiltersController() {
+        return this._savedFilterController;
+    }
+    ngOnInit() {
+        this._savedFilterController.activeFilter$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((activeFilter) => {
+            this.savedFilterName = activeFilter?.name || '';
         });
-        this._hasFilterChips$.next(hasFilterChips);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass" } }, providers: [
-            FsFilterOverlayService,
-            ParamController,
-            PersistanceController,
-            QueryParamController,
-            FocusControllerService,
-            ItemStore,
-            SavedFilterController,
-            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  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <mat-form-field\n              class=\"search-form-field form-field-padless\"\n              [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n            <span\n                matPrefix\n                class=\"icon\">\n              <mat-icon matPrefix>\n                search\n              </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        }\n        @if (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && 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      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.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:18px}.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-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsSavedFilterAutocompleteChipsComponent, selector: "fs-saved-filter-autocomplete-chips", inputs: ["savedFiltersController"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: "ngmodule", type: FsClearModule }, { kind: "component", type: i3$3.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: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    clear() {
+        this._clear();
+    }
+    done() {
+        this._done();
+        this._overlayRef.detach();
+    }
+    backdropClick() {
+        this.done();
+    }
+    saveSavedFilter = () => {
+        return this._savedFilterController
+            .save({ name: this.savedFilterName })
+            .pipe(tap$1((savedFilter) => {
+            this._savedFilterController.setActiveFilter(savedFilter);
+            this._message
+                .success(`Saved ${this._savedFilterController.singularLabel}`, {
+                positionClass: 'toast-bottom-left',
+            });
+        }));
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterDrawerComponent, isStandalone: true, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"saveSavedFilter\"\n    [dirtySubmitButton]=\"false\">\n  <div class=\"filters\">\n    <div class=\"filters-wrap\">\n      @if (savedFiltersController.activeFilter$ | async) {\n        <div class=\"filter-heading\">\n          <mat-icon>\n            {{ savedFiltersController.labelIcon }}\n          </mat-icon>\n          <span class=\"text\">\n            {{ savedFiltersController.singularLabel }}\n          </span>\n        </div>\n        <div class=\"filter-name\">\n          <mat-form-field>\n            <mat-label>\n              {{ savedFiltersController.singularLabel }} name\n            </mat-label>\n            <input\n              matInput\n              required\n              [(ngModel)]=\"savedFilterName\"\n              name=\"savedFilterName\">\n          </mat-form-field>\n          <hr>\n          <br>\n        </div>\n      } @else {\n        <div class=\"filter-heading\">\n          <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          <span class=\"text\">\n            Filters\n          </span>\n        </div>\n      }\n      <div class=\"overflow-shadow filter-items\">\n        <div class=\"overflow-shadow-content\">\n          <ng-container *fsSkeleton=\"(paramCointroller.pending$ | async) !== true\">\n            @for (filterItem of items$ | async; track filterItem) {\n              <filter-item\n                class=\"filter-group\"\n                [item]=\"filterItem\">\n              </filter-item>\n            }\n          </ng-container>\n        </div>\n      </div>\n      @if ((paramCointroller.pending$ | async) !== true) {\n        <fs-filter-drawer-actions\n          [savedFiltersController]=\"savedFiltersController\"\n          class=\"filter-actions\"\n          (clear)=\"clear()\"\n          (done)=\"done()\">\n        </fs-filter-drawer-actions>\n      }\n    </div>\n  </div>\n  @if (!windowDesktop) {\n    <div\n      class=\"backdrop\"\n      (click)=\"backdropClick()\">\n    </div>\n  }\n</form>", 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}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}:host ::ng-deep mat-form-field{width:100%}.filter-heading{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 25px 20px}.filter-heading mat-icon{margin-right:8px;font-size:24px;line-height:24px}.filter-heading .text{font-weight:400;font-size:19px}.filter-name{padding:0 25px}.filter-name hr{border-color:#a4a4a4;border-top:0;border-left:0;border-right:0}.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:calc(env(safe-area-inset-top) + 20px);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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i3$3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { kind: "component", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", inputs: ["savedFiltersController"], outputs: ["clear", "done"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-filter', providers: [
-                        FsFilterOverlayService,
-                        ParamController,
-                        PersistanceController,
-                        QueryParamController,
-                        FocusControllerService,
-                        ItemStore,
-                        SavedFilterController,
-                        ActionsController,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgTemplateOutlet,
-                        FsSavedFilterAutocompleteChipsComponent,
-                        MatFormField,
-                        NgClass,
-                        MatPrefix,
-                        MatIcon,
-                        MatInput,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FormsModule,
                         FsFormModule,
-                        FsClearModule,
-                        FsFilterChipsComponent,
-                        FsFilterActionsComponent,
-                        MatIconAnchor,
-                        MatSlideToggle,
+                        MatIcon,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FsSkeletonModule,
+                        FilterItemComponent,
+                        FsFilterDrawerActionsComponent,
                         AsyncPipe,
-                    ], template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <mat-form-field\n              class=\"search-form-field form-field-padless\"\n              [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n            <span\n                matPrefix\n                class=\"icon\">\n              <mat-icon matPrefix>\n                search\n              </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        }\n        @if (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && 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      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.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:18px}.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-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}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: () => [], propDecorators: { setConfig: [{
-                type: Input,
-                args: ['config']
-            }], setFilter: [{
-                type: Input,
-                args: ['filter']
-            }], showSortBy: [{
+                    ], template: "<form\n    fsForm\n    [submit]=\"saveSavedFilter\"\n    [dirtySubmitButton]=\"false\">\n  <div class=\"filters\">\n    <div class=\"filters-wrap\">\n      @if (savedFiltersController.activeFilter$ | async) {\n        <div class=\"filter-heading\">\n          <mat-icon>\n            {{ savedFiltersController.labelIcon }}\n          </mat-icon>\n          <span class=\"text\">\n            {{ savedFiltersController.singularLabel }}\n          </span>\n        </div>\n        <div class=\"filter-name\">\n          <mat-form-field>\n            <mat-label>\n              {{ savedFiltersController.singularLabel }} name\n            </mat-label>\n            <input\n              matInput\n              required\n              [(ngModel)]=\"savedFilterName\"\n              name=\"savedFilterName\">\n          </mat-form-field>\n          <hr>\n          <br>\n        </div>\n      } @else {\n        <div class=\"filter-heading\">\n          <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          <span class=\"text\">\n            Filters\n          </span>\n        </div>\n      }\n      <div class=\"overflow-shadow filter-items\">\n        <div class=\"overflow-shadow-content\">\n          <ng-container *fsSkeleton=\"(paramCointroller.pending$ | async) !== true\">\n            @for (filterItem of items$ | async; track filterItem) {\n              <filter-item\n                class=\"filter-group\"\n                [item]=\"filterItem\">\n              </filter-item>\n            }\n          </ng-container>\n        </div>\n      </div>\n      @if ((paramCointroller.pending$ | async) !== true) {\n        <fs-filter-drawer-actions\n          [savedFiltersController]=\"savedFiltersController\"\n          class=\"filter-actions\"\n          (clear)=\"clear()\"\n          (done)=\"done()\">\n        </fs-filter-drawer-actions>\n      }\n    </div>\n  </div>\n  @if (!windowDesktop) {\n    <div\n      class=\"backdrop\"\n      (click)=\"backdropClick()\">\n    </div>\n  }\n</form>", 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}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}:host ::ng-deep mat-form-field{width:100%}.filter-heading{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:0 25px 20px}.filter-heading mat-icon{margin-right:8px;font-size:24px;line-height:24px}.filter-heading .text{font-weight:400;font-size:19px}.filter-name{padding:0 25px}.filter-name hr{border-color:#a4a4a4;border-top:0;border-left:0;border-right:0}.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:calc(env(safe-area-inset-top) + 20px);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: () => [], propDecorators: { inline: [{
                 type: Input
-            }], closed: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], ready: [{
-                type: Output
-            }], statusBar: [{
-                type: ContentChild,
-                args: [FilterStatusBarDirective]
-            }], keywordMatInput: [{
-                type: ViewChild,
-                args: ['keywordMatInput', { read: MatInput }]
-            }], reloadEl: [{
-                type: ViewChild,
-                args: ['reloadEl', { read: ElementRef }]
-            }], showFilterMenu: [{
-                type: HostBinding,
-                args: ['class.filters-open']
-            }], windowDesktop: [{
-                type: HostBinding,
-                args: ['class.window-desktop']
-            }], fsFilterClass: [{
-                type: HostBinding,
-                args: ['class.fs-filter']
+            }], updateWindowWidth: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class SelectBackdropComponent {