@firestitch/filter 18.2.10 → 18.2.11

package/fesm2022/firestitch-filter.mjs

@@ -2,7 +2,7 @@ import * as i0 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, 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 { map, tap, finalize, take, takeUntil, debounceTime, distinctUntilChanged, switchMap, filter as filter$1, mapTo, startWith, 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';
 import { simpleFormat, format } from '@firestitch/date';
@@ -79,7 +79,6 @@ class BaseItem {
     name;
     label;
     chipLabel;
-    hide;
     defaultValue;
     defaultValueFn;
     persistedValue;
@@ -94,6 +93,7 @@ class BaseItem {
     _pendingDefaultValue = false;
     _initializedValues = false;
     _valuesFn;
+    _hidden$ = new BehaviorSubject(false);
     _loading$ = new BehaviorSubject(false);
     _value$ = new BehaviorSubject(null);
     _valueChange$ = new Subject();
@@ -109,6 +109,16 @@ class BaseItem {
     get filter() {
         return this._filter;
     }
+    get hidden$() {
+        return this._hidden$.asObservable();
+    }
+    get visible$() {
+        return this._hidden$
+            .pipe(map((hidden) => !hidden));
+    }
+    get hidden() {
+        return this._hidden$.getValue();
+    }
     get isTypeAutocomplete() {
         return this.type === ItemType.AutoComplete;
     }
@@ -200,6 +210,12 @@ class BaseItem {
     get isQueryParamVisible() {
         return true;
     }
+    hide() {
+        this._hidden$.next(true);
+    }
+    show() {
+        this._hidden$.next(false);
+    }
     get queryObject() {
         const value = this.value;
         const name = this.name;
@@ -304,6 +320,11 @@ class BaseItem {
         this.name = item.name;
         this.label = item.label;
         this.chipLabel = item.chipLabel;
+        this.change = item.change;
+        this._hidden$.next(item.hide ?? false);
+        this.showClear = item.clear ?? true;
+        this.persistanceDisabled = item.disablePersist ?? false;
+        this.queryParamsDisabled = item.disableQueryParams ?? false;
         if (typeof item.default === 'function') {
             this.defaultValueFn = item.default;
         }
@@ -313,11 +334,6 @@ class BaseItem {
         this.init = item.init || (() => {
             //
         });
-        this.change = item.change;
-        this.hide = item.hide;
-        this.showClear = item.clear ?? true;
-        this.persistanceDisabled = item.disablePersist ?? false;
-        this.queryParamsDisabled = item.disableQueryParams ?? false;
         if (isFunction(item.values)) {
             this._valuesFn = item.values;
         }
@@ -1495,24 +1511,12 @@ class ItemStore {
     _config;
     _itemsChange$ = new Subject();
     _destroy$ = new Subject();
-    constructor() {
-        this._lazyInit();
-    }
     get items() {
         return Array.from(this._items.values());
     }
     get itemNames() {
         return this.items.map((item) => item.name);
     }
-    get visibleItems() {
-        return this._visibleItems$.getValue();
-    }
-    set visibleItems(items) {
-        this._visibleItems$.next(items);
-    }
-    get visibleItems$() {
-        return this._visibleItems$.asObservable();
-    }
     get hasKeyword() {
         return this._hasKeyword;
     }
@@ -1728,10 +1732,6 @@ class ItemStore {
             this.loadAsyncValues();
         }
     }
-    updateItemsVisiblity() {
-        this.visibleItems = this.items
-            .filter((item) => !item.isTypeKeyword && !item.hide);
-    }
     _createItems(items) {
         this._items = new Map(items
             .filter((item) => !item.disable)
@@ -1773,13 +1773,6 @@ class ItemStore {
             });
         }
     }
-    _lazyInit() {
-        this.ready$
-            .pipe(filter$1((state) => state), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.updateItemsVisiblity();
-        });
-    }
     _initSortingItems(p) {
         if (this.sortByItem && this.sortDirectionItem) {
             this.sortByItem.initValues(p[this.sortByItem.name]);
@@ -1823,7 +1816,7 @@ class ItemStore {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ItemStore, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 class SavedFilterController {
     _config;
@@ -2607,6 +2600,9 @@ class FsFilterOverlayService {
             this._removeFilterClass();
         }
     }
+    opened() {
+        return !!this._overlayRef;
+    }
     open() {
         if (this._overlayRef) {
             return;
@@ -3681,7 +3677,8 @@ class FilterComponent {
         return this._itemStore.items;
     }
     get visibleItems() {
-        return this._itemStore.visibleItems;
+        return this._itemStore.items
+            .filter((item) => !item.hidden);
     }
     get keywordItem() {
         return this._itemStore.keywordItem;
@@ -3821,17 +3818,26 @@ class FilterComponent {
             filterItem.model = values[key];
         });
     }
-    hide() {
-        this.changeVisibility(false);
+    hideDrawer() {
+        this.closed.emit();
+        this._destroyFilterDrawer();
     }
-    show() {
-        this.changeVisibility(true);
+    showDrawer() {
+        if (!this.hasVisibleItemOrSorting) {
+            return;
+        }
+        this._listenEscButton();
+        this.opened.emit();
+        this._filterOverlay.open();
     }
-    changeVisibilityClick(value, event = null) {
-        if (event) {
-            event.stopPropagation();
+    filterButtonClick(event = null) {
+        event.stopPropagation();
+        if (this._filterOverlay.opened()) {
+            this.hideDrawer();
+        }
+        else {
+            this.showDrawer();
         }
-        this.changeVisibility(value);
     }
     get itemValues() {
         return this.items
@@ -3852,19 +3858,10 @@ class FilterComponent {
         return item?.value;
     }
     showItem(name) {
-        const item = this.getItem(name);
-        if (item) {
-            item.hide = false;
-            this._itemStore.updateItemsVisiblity();
-        }
+        this.getItem(name)?.show();
     }
     hideItem(name) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
-        }
-        item.hide = true;
-        this._itemStore.updateItemsVisiblity();
+        this.getItem(name)?.hide();
     }
     clearItem(name) {
         const item = this.getItem(name);
@@ -3880,7 +3877,6 @@ class FilterComponent {
         }
         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);
@@ -3892,21 +3888,6 @@ class FilterComponent {
         }
         return 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();
-    }
     init() {
         const data = this._itemStore.valuesAsQuery();
         this._sort = this._itemStore.getSort();
@@ -4063,7 +4044,7 @@ class FilterComponent {
                 .pipe(filter$1((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this._zone.run(() => {
-                    this.changeVisibility(false);
+                    this.hideDrawer();
                 });
             });
         });
@@ -4098,7 +4079,7 @@ class FilterComponent {
         });
     }
     _initKeywordVisibility() {
-        this._keywordVisible$.next(!!this.keywordItem && !this.keywordItem?.hide);
+        this._keywordVisible$.next(!!this.keywordItem && !this.keywordItem?.hidden);
     }
     _initAutoFocus() {
         // Avoid ngChanges error
@@ -4119,7 +4100,7 @@ class FilterComponent {
     }
     _initOverlay() {
         this._filterOverlay.setClearFn(this.clear.bind(this));
-        this._filterOverlay.setDoneFn(this.hide.bind(this));
+        this._filterOverlay.setDoneFn(this.hideDrawer.bind(this));
     }
     // We may need some time to recieve external params and after that ready can be emitted
     _listenWhenFilterReady() {
@@ -4154,7 +4135,7 @@ class FilterComponent {
             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 });
+        ], 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)=\"filterButtonClick($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: FilterComponent, decorators: [{
             type: Component,
@@ -4183,7 +4164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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"] }]
+                    ], 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)=\"filterButtonClick($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']
@@ -4424,6 +4405,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['to', { 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 FsFilterIsolateValues {
     transform(values, isolate) {
         if (!isolate) {
@@ -4548,42 +4565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 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;
@@ -4763,7 +4744,7 @@ class FilterItemComponent {
         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 });
+    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: "@if (item.visible$ | async) {\n  <div class=\"filter filter-{{ item.type }}\">\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  </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" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, decorators: [{
             type: Component,
@@ -4778,7 +4759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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"] }]
+                        AsyncPipe,
+                    ], template: "@if (item.visible$ | async) {\n  <div class=\"filter filter-{{ item.type }}\">\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  </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
             }] } });
@@ -4806,7 +4788,7 @@ class FilterDrawerComponent {
         this.windowDesktop = window.innerWidth > 1200;
     }
     get items$() {
-        return this._itemStore.visibleItems$;
+        return of(this._itemStore.items);
     }
     get paramCointroller() {
         return this._paramController;