@firestitch/filter 18.2.73 → 18.2.74

package/fesm2022/firestitch-filter.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Directive, Input, TemplateRef, DestroyRef, Component, ChangeDetectionStrategy, InjectionToken, KeyValueDiffers, ChangeDetectorRef, Injector, ViewChild, ElementRef, EventEmitter, NgZone, Output, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { inject, Injectable, Directive, Input, TemplateRef, DestroyRef, Component, ChangeDetectionStrategy, InjectionToken, Injector, ChangeDetectorRef, ViewChild, ElementRef, ViewChildren, EventEmitter, NgZone, Output, ContentChild, HostBinding, NgModule } from '@angular/core';
 import { FsPrompt } from '@firestitch/prompt';
-import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, map as map$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter, takeUntil as takeUntil$1, debounceTime as debounceTime$1, fromEvent, combineLatest, interval } from 'rxjs';
+import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, map as map$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter, take, delay, combineLatest, fromEvent, interval } from 'rxjs';
 import { distinctUntilChanged, switchMap, tap, skip, takeUntil, map, debounceTime, finalize, filter as filter$1 } from 'rxjs/operators';
 import { FsStore } from '@firestitch/store';
 import { Location, NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, NgSwitchDefault, NgIf, AsyncPipe } from '@angular/common';
@@ -31,7 +31,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 import * as i1$6 from '@angular/material/dialog';
 import { MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import { getNormalizedPath } from '@firestitch/common';
+import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
 import { DrawerRef } from '@firestitch/drawer';
 import * as i1 from '@firestitch/popover';
 import { FsPopoverModule } from '@firestitch/popover';
@@ -45,7 +45,7 @@ import { FsFileModule } from '@firestitch/file';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$5 from '@firestitch/chip';
-import { FsChipModule } from '@firestitch/chip';
+import { FsChipModule, FsChipComponent } from '@firestitch/chip';
 import { FsMessage } from '@firestitch/message';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import * as i1$4 from '@firestitch/label';
@@ -2636,29 +2636,16 @@ const FILTER_DRAWER_OVERLAY = new InjectionToken('fs.filter-drawer-overlay');
 
 class BaseItemComponent {
     item;
-    inline = false;
-    label;
-    _kvDiffer;
-    _kvDiffers = inject(KeyValueDiffers);
-    _cd = inject(ChangeDetectorRef);
-    _destroy$ = new Subject();
-    get destroy$() {
-        return this._destroy$.asObservable();
-    }
-    destroy() {
-        return this._destroy$.asObservable();
-    }
-    ngOnChanges(changes) {
-        if (changes.item) {
-            this.label = Array.isArray(this.item.label) ? this.item.label[0] : this.item.label;
+    overlayRef;
+    close() {
+        if (this.overlayRef) {
+            this.overlayRef.detachBackdrop();
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
         }
     }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseItemComponent, isStandalone: true, selector: "base-item", inputs: { item: "item", inline: "inline" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseItemComponent, isStandalone: true, selector: "base-item", inputs: { item: "item", overlayRef: "overlayRef" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseItemComponent, decorators: [{
             type: Component,
@@ -2670,7 +2657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], propDecorators: { item: [{
                 type: Input
-            }], inline: [{
+            }], overlayRef: [{
                 type: Input
             }] } });
 
@@ -2684,7 +2671,7 @@ class AutocompleteComponent extends BaseItemComponent {
         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: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.clearable\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i1$2.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: i1$2.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { 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: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"item.placeholder\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.clearable\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i1$2.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: i1$2.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { 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: i3.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,
@@ -2693,7 +2680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FormsModule,
                         FsFormModule,
-                    ], template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.clearable\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>" }]
+                    ], template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"item.placeholder\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.clearable\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>" }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
@@ -2705,26 +2692,11 @@ class AutocompletechipsComponent extends BaseItemComponent {
     floatLabel = 'auto';
     value;
     _injector = inject(Injector);
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
-        this.item.value$
-            .pipe(takeUntil$1(this.destroy$))
-            .subscribe((value) => {
-            this.value = value;
-            this._cdRef.detectChanges();
-        });
+        this.value = this.item.value;
     }
-    selected(event) {
-        if (event.data && this.item.value.indexOf(event.data.value) === -1) {
-            this.item.value = [
-                ...this.item.value,
-                event.data,
-            ];
-        }
-    }
-    removed(event) {
-        this.item.value = this.item.value
-            .filter((item) => item.value !== event.data.value);
+    ngOnDestroy() {
+        this.item.value = this.value;
     }
     clear() {
         this.item.clear();
@@ -2740,7 +2712,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         action.click(filterComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, selector: "filter-item-autocompletechips", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [ngModel]=\"value\"\n    [floatLabel]=\"floatLabel\"\n    (selected)=\"selected($event)\"\n    (removed)=\"removed($event)\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [padless]=\"true\"\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.clearable\"\n    [removable]=\"item.clearable\"\n    [compareWith]=\"compareItems\"\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>", styles: ["fs-autocomplete-chips{min-width:200px;display:block;max-width:100%}\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", "maxPanelHeight", "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"] }, { 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: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, selector: "filter-item-autocompletechips", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [(ngModel)]=\"value\"\n    [floatLabel]=\"floatLabel\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [padless]=\"true\"\n    [label]=\"item.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.clearable\"\n    [removable]=\"item.clearable\"\n    [compareWith]=\"compareItems\"\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>", styles: ["fs-autocomplete-chips{min-width:200px;display:block;max-width:100%}\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", "maxPanelHeight", "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"] }, { 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: i3.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,
@@ -2749,7 +2721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FormsModule,
                         FsFormModule,
-                    ], template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [ngModel]=\"value\"\n    [floatLabel]=\"floatLabel\"\n    (selected)=\"selected($event)\"\n    (removed)=\"removed($event)\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [padless]=\"true\"\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.clearable\"\n    [removable]=\"item.clearable\"\n    [compareWith]=\"compareItems\"\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>", styles: ["fs-autocomplete-chips{min-width:200px;display:block;max-width:100%}\n"] }]
+                    ], template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [fetch]=\"fetch\"\n    [(ngModel)]=\"value\"\n    [floatLabel]=\"floatLabel\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [padless]=\"true\"\n    [label]=\"item.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.clearable\"\n    [removable]=\"item.clearable\"\n    [compareWith]=\"compareItems\"\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>", styles: ["fs-autocomplete-chips{min-width:200px;display:block;max-width:100%}\n"] }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
@@ -2758,17 +2730,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class CheckboxComponent extends BaseItemComponent {
     value;
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
-        this.item.value$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.value = value;
-            this._cdRef.detectChanges();
-        });
+        this.value = this.item.value;
     }
     change() {
         this.item.setValue(this.value);
+        this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: null, 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: "<mat-slide-toggle\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"change()\"\n    [name]=\"item.name\">\n  {{ item.label }}\n</mat-slide-toggle>", styles: ["fs-label-field{margin:0 0 0 -8px}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { 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: "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: i3.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 });
@@ -2795,11 +2762,14 @@ class ChipsComponent extends BaseItemComponent {
             this._cdRef.detectChanges();
         });
     }
+    ngOnDestroy() {
+        this.item.value = this.value;
+    }
     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: null, 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$ | async)?.length) {\n  <fs-label-field [padless]=\"true\">\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"value\"\n        [compare]=\"compareFn\"\n        (ngModelChange)=\"item.value = value\"\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}", 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: i1$5.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple", "sortable", "selectable", "orientation", "width"] }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { 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: i3.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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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$ | async)?.length) {\n  <fs-label-field [padless]=\"true\">\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"value\"\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}", 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: i1$5.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple", "sortable", "selectable", "orientation", "width"] }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { 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: i3.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: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
@@ -2809,7 +2779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         FsFormModule,
                         AsyncPipe,
-                    ], template: "@if ((item.values$ | async)?.length) {\n  <fs-label-field [padless]=\"true\">\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"value\"\n        [compare]=\"compareFn\"\n        (ngModelChange)=\"item.value = value\"\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}", styles: ["fs-chip{line-height:40px}\n"] }]
+                    ], template: "@if ((item.values$ | async)?.length) {\n  <fs-label-field [padless]=\"true\">\n    <fs-label>\n      {{ item.label }}\n    </fs-label>\n    <fs-chips\n        [(ngModel)]=\"value\"\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}", styles: ["fs-chip{line-height:40px}\n"] }]
         }] });
 
 class DateRangeComponent extends BaseItemComponent {
@@ -2818,25 +2788,23 @@ class DateRangeComponent extends BaseItemComponent {
     viewType = PickerViewType.Date;
     from;
     to;
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
-        this.viewType = this.item.type === ItemType.DateTimeRange ? PickerViewType.DateTime : PickerViewType.Date;
-        this.item.value$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.from = value?.from;
-            this.to = value?.to;
-            this._cdRef.detectChanges();
-        });
+        this.viewType = this.item.type === ItemType.DateTimeRange ?
+            PickerViewType.DateTime : PickerViewType.Date;
+        if (!this.autofocusName) {
+            this.autofocusName = this.from ? 'to' : 'from';
+        }
+        this.from = this.item.value?.from;
+        this.to = this.item.value?.to;
     }
-    change() {
+    ngOnDestroy() {
         this.item.value = {
             from: this.from,
             to: this.to,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: null, 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", inputs: { autofocusName: "autofocusName", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n      [fsDateRangeFrom]=\"item.name\"\n      [(ngModel)]=\"from\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      (ngModelChange)=\"change()\"\n      name=\"dateFrom\">\n  </mat-form-field>\n  <div class=\"to\">\n    to\n  </div>\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'to'\"\n      [fsDateRangeTo]=\"item.name\"\n      [(ngModel)]=\"to\"\n      (ngModelChange)=\"change()\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      name=\"dateTo\">\n  </mat-form-field>\n</div>", styles: [".row{display:flex;flex-direction:row;align-items:center;gap:10px}.row mat-form-field{width:200px}\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"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$1.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i2$1.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", inputs: { autofocusName: "autofocusName", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n      [fsDateRangeFrom]=\"item.name\"\n      [(ngModel)]=\"from\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      name=\"dateFrom\">\n  </mat-form-field>\n  <div class=\"to\">\n    to\n  </div>\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'to'\"\n      [fsDateRangeTo]=\"item.name\"\n      [(ngModel)]=\"to\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      name=\"dateTo\">\n  </mat-form-field>\n</div>", styles: [".row{display:flex;flex-direction:row;align-items:center;gap:10px}.row mat-form-field{width:200px}\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"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$1.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i2$1.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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,
@@ -2848,7 +2816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FsDatePickerModule,
                         FsFormModule,
-                    ], template: "<div class=\"row\">\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n      [fsDateRangeFrom]=\"item.name\"\n      [(ngModel)]=\"from\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      (ngModelChange)=\"change()\"\n      name=\"dateFrom\">\n  </mat-form-field>\n  <div class=\"to\">\n    to\n  </div>\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'to'\"\n      [fsDateRangeTo]=\"item.name\"\n      [(ngModel)]=\"to\"\n      (ngModelChange)=\"change()\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      name=\"dateTo\">\n  </mat-form-field>\n</div>", styles: [".row{display:flex;flex-direction:row;align-items:center;gap:10px}.row mat-form-field{width:200px}\n"] }]
+                    ], template: "<div class=\"row\">\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'from'\"\n      [fsDateRangeFrom]=\"item.name\"\n      [(ngModel)]=\"from\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      name=\"dateFrom\">\n  </mat-form-field>\n  <div class=\"to\">\n    to\n  </div>\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"autofocusName === 'to'\"\n      [fsDateRangeTo]=\"item.name\"\n      [(ngModel)]=\"to\"\n      [clear]=\"item.clearable\"\n      [view]=\"viewType\"\n      name=\"dateTo\">\n  </mat-form-field>\n</div>", styles: [".row{display:flex;flex-direction:row;align-items:center;gap:10px}.row mat-form-field{width:200px}\n"] }]
         }], propDecorators: { autofocusName: [{
                 type: Input
             }], floatLabel: [{
@@ -2864,23 +2832,20 @@ class DateComponent extends BaseItemComponent {
     showMonth = true;
     showDay = true;
     value;
-    _destroyRef = inject(DestroyRef);
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
         this.viewType = this.item.type === ItemType.DateTime ?
             PickerViewType.DateTime : PickerViewType.Date;
         if (this.item.mode === ItemDateMode.ScrollMonthYear) {
             this.showDay = false;
         }
-        this.item.value$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((value) => {
-            this.value = value;
-            this._cdRef.detectChanges();
-        });
+        this.value = this.item.value;
+    }
+    change(event) {
+        this.item.value = event;
+        this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [placeholder]=\"item.placeholder\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.clearable\"\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: i2$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i2$1.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"change($event)\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [placeholder]=\"item.placeholder\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"change($event)\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.clearable\"\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: i2$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i2$1.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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,
@@ -2892,7 +2857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsDatePickerModule,
                         FocusToItemDirective,
                         FsFormModule,
-                    ], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [placeholder]=\"item.placeholder\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n}" }]
+                    ], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"change($event)\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [placeholder]=\"item.placeholder\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"change($event)\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n}" }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
@@ -2904,32 +2869,18 @@ class RangeComponent extends BaseItemComponent {
     floatLabel = 'auto';
     min;
     max;
-    _change$ = new Subject();
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
         this.min = this.item.value?.min;
         this.max = this.item.value?.max;
-        this.item.value$
-            .pipe(takeUntil$1(this.destroy$))
-            .subscribe((value) => {
-            this.min = value?.min;
-            this.max = value?.max;
-            this._cdRef.detectChanges();
-        });
-        this._change$
-            .pipe(debounceTime$1(300), takeUntil$1(this.destroy$))
-            .subscribe(() => {
-            this.item.value = {
-                min: this.min,
-                max: this.max,
-            };
-        });
     }
-    change() {
-        this._change$.next();
+    ngOnDestroy() {
+        this.item.value = {
+            min: this.min,
+            max: this.max,
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RangeComponent, isStandalone: true, selector: "filter-item-range", inputs: { autofocusName: "autofocusName", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n  <mat-form-field\n      class=\"filter-range-min\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'min'\"\n      type=\"number\"\n      [(ngModel)]=\"min\"\n      (ngModelChange)=\"change()\"\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\n      class=\"filter-range-max\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'max'\"\n      type=\"number\"\n      [(ngModel)]=\"max\"\n      (ngModelChange)=\"change()\"\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RangeComponent, isStandalone: true, selector: "filter-item-range", inputs: { autofocusName: "autofocusName", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n  <mat-form-field\n      class=\"filter-range-min\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'min' || !min\"\n      type=\"number\"\n      [(ngModel)]=\"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\n      class=\"filter-range-max\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'max' || !!min\"\n      type=\"number\"\n      [(ngModel)]=\"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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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,
@@ -2942,22 +2893,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FsFormModule,
                         MatSuffix,
-                    ], template: "<div class=\"form-field\">\n  <mat-form-field\n      class=\"filter-range-min\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'min'\"\n      type=\"number\"\n      [(ngModel)]=\"min\"\n      (ngModelChange)=\"change()\"\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\n      class=\"filter-range-max\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'max'\"\n      type=\"number\"\n      [(ngModel)]=\"max\"\n      (ngModelChange)=\"change()\"\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"] }]
+                    ], template: "<div class=\"form-field\">\n  <mat-form-field\n      class=\"filter-range-min\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'min' || !min\"\n      type=\"number\"\n      [(ngModel)]=\"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\n      class=\"filter-range-max\"\n      [floatLabel]=\"floatLabel\"\n      class=\"form-field-padless\">\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]=\"autofocusName === 'max' || !!min\"\n      type=\"number\"\n      [(ngModel)]=\"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"] }]
         }], propDecorators: { autofocusName: [{
                 type: Input
             }], floatLabel: [{
                 type: Input
             }] } });
 
-class SelectComponent {
+class SelectComponent extends BaseItemComponent {
     autofocus = false;
     floatLabel = 'auto';
-    item;
     select;
     value;
     _cdRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
     changed() {
+        if (!this.item.multiple) {
+            this.change();
+        }
+    }
+    selectOpenedChange(opened) {
+        if (!opened && !this.item.isolate) {
+            this.close();
+        }
+    }
+    change() {
         let value = this.value;
         if (this.item.isolate) {
             if (this.item.multiple) {
@@ -2969,33 +2929,30 @@ class SelectComponent {
         }
         this.item.value = value;
     }
-    ngOnInit() {
-        this.item.value$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe((value) => {
-            this.value = value;
-            if (this.item.isolate && !this.item.hasValue) {
-                this.item.isolated = false;
-            }
-            this._cdRef.detectChanges();
-        });
+    ngOnDestroy() {
+        if (this.item.isolate) {
+            this.change();
+        }
     }
-    close() {
-        this.select.close();
+    ngOnInit() {
+        this.value = this.item.value;
+        if (this.item.isolate && !this.item.hasValue) {
+            this.item.isolated = false;
+        }
     }
     markForCheck() {
         this._cdRef.markForCheck();
     }
     isolateChange(event) {
         if (event.checked) {
-            this.item.value = this.item.multiple ? this.item.isolateValues : this.item.isolateValues[0];
+            this.value = this.item.multiple ? this.item.isolateValues : this.item.isolateValues[0];
         }
         else {
-            this.item.value = this.item.multiple ? [] : null;
+            this.value = this.item.multiple ? [] : null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus && !item.isolate\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <div class=\"isolate-checkbox\">\n    <mat-checkbox\n        (change)=\"isolateChange($event)\"\n        [(ngModel)]=\"item.isolated\">\n      <span class=\"checkbox-label\">\n        {{ item.isolateLabel }}\n      </span>\n    </mat-checkbox>\n  </div>\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: 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"] }, { 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: i3.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: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus && !item.isolate\"\n      [(ngModel)]=\"value\"\n      (openedChange)=\"selectOpenedChange($event)\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <div class=\"isolate-checkbox\">\n    <mat-checkbox\n        (change)=\"isolateChange($event)\"\n        [(ngModel)]=\"item.isolated\">\n      <span class=\"checkbox-label\">\n        {{ item.isolateLabel }}\n      </span>\n    </mat-checkbox>\n  </div>\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: 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"] }, { 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: i3.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: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -3011,13 +2968,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatOptgroup,
                         MatCheckbox,
                         AsyncPipe,
-                    ], template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus && !item.isolate\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <div class=\"isolate-checkbox\">\n    <mat-checkbox\n        (change)=\"isolateChange($event)\"\n        [(ngModel)]=\"item.isolated\">\n      <span class=\"checkbox-label\">\n        {{ item.isolateLabel }}\n      </span>\n    </mat-checkbox>\n  </div>\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"] }]
+                    ], template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus && !item.isolate\"\n      [(ngModel)]=\"value\"\n      (openedChange)=\"selectOpenedChange($event)\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <div class=\"isolate-checkbox\">\n    <mat-checkbox\n        (change)=\"isolateChange($event)\"\n        [(ngModel)]=\"item.isolated\">\n      <span class=\"checkbox-label\">\n        {{ item.isolateLabel }}\n      </span>\n    </mat-checkbox>\n  </div>\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"] }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
                 type: Input
-            }], item: [{
-                type: Input
             }], select: [{
                 type: ViewChild,
                 args: [MatSelect, { static: true }]
@@ -3027,32 +2982,14 @@ class TextComponent extends BaseItemComponent {
     autofocus = false;
     floatLabel = 'auto';
     value;
-    _change$ = new Subject();
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
-        this._listenControlValueChanges();
-        this._listenValueChanges();
-    }
-    change() {
-        this._change$.next(this.value);
-    }
-    _listenControlValueChanges() {
-        this._change$
-            .pipe(distinctUntilChanged(), debounceTime(200), takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.item.value = value;
-        });
+        this.value = this.item.value;
     }
-    _listenValueChanges() {
-        this.item.value$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.value = value;
-            this._cdRef.detectChanges();
-        });
+    ngOnDestroy() {
+        this.item.value = this.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextComponent, isStandalone: true, selector: "filter-item-text", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\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    [(ngModel)]=\"value\"\n    (ngModelChange)=\"change()\"\n    [placeholder]=\"item.placeholder\"\n    [fsFilterFocusTrigger]=\"autofocus\">\n  @if (item.suffix) {\n    <span\n      matTextSuffix\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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextComponent, isStandalone: true, selector: "filter-item-text", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\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    [(ngModel)]=\"value\"\n    [placeholder]=\"item.placeholder\"\n    [fsFilterFocusTrigger]=\"autofocus\">\n  @if (item.suffix) {\n    <span\n      matTextSuffix\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: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FsCommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
@@ -3065,7 +3002,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ReactiveFormsModule,
                         FocusToItemDirective,
                         MatSuffix,
-                    ], template: "<mat-form-field\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\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    [(ngModel)]=\"value\"\n    (ngModelChange)=\"change()\"\n    [placeholder]=\"item.placeholder\"\n    [fsFilterFocusTrigger]=\"autofocus\">\n  @if (item.suffix) {\n    <span\n      matTextSuffix\n      [innerHtml]=\"item.suffix\">\n    </span>\n  }\n</mat-form-field>" }]
+                        FsCommonModule,
+                    ], template: "<mat-form-field\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\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    [(ngModel)]=\"value\"\n    [placeholder]=\"item.placeholder\"\n    [fsFilterFocusTrigger]=\"autofocus\">\n  @if (item.suffix) {\n    <span\n      matTextSuffix\n      [innerHtml]=\"item.suffix\">\n    </span>\n  }\n</mat-form-field>" }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
@@ -3076,14 +3014,8 @@ class WeekComponent extends BaseItemComponent {
     autofocus = false;
     floatLabel = 'auto';
     value;
-    _cdRef = inject(ChangeDetectorRef);
     ngOnInit() {
-        this.item.value$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.value = value;
-            this._cdRef.detectChanges();
-        });
+        this.value = this.item.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", inputs: { autofocus: "autofocus", floatLabel: "floatLabel" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <input\n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"autofocus\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"item.value = value\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.clearable\"\n    [name]=\"item.name\">\n</mat-form-field>", 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: i2$1.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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 });
@@ -3109,6 +3041,7 @@ class FilterItemComponent {
     autofocus = false;
     floatLabel = 'auto';
     autofocusName;
+    overlayRef;
     item;
     name;
     itemType = ItemType;
@@ -3162,7 +3095,7 @@ class FilterItemComponent {
         this._destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterItemComponent, isStandalone: true, selector: "filter-item", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", autofocusName: "autofocusName", item: "item", name: "name" }, 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          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"textItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-text>\n      }\n      @case (itemType.Select) {\n        <filter-item-select\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"selectItem\"\n          [autofocus]=\"autofocus\">\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          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-range\"\n          [item]=\"rangeItem\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-range>\n      }\n      @case (itemType.AutoComplete) {\n        <filter-item-autocomplete\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"autocompleteItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocomplete>\n      }\n      @case (itemType.AutoCompleteChips) {\n        <filter-item-autocompletechips\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"autocompleteChipsItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocompletechips>\n      }\n      @case (itemType.Date) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateTime) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateRange) {\n        <filter-item-date-range\n            [floatLabel]=\"floatLabel\"\n            class=\"interface interface-date\"\n            [item]=\"dateRangeItem\"\n            [autofocusName]=\"autofocusName\">\n          [name]=\"name\">\n        </filter-item-date-range>\n      }\n      @case (itemType.DateTimeRange) {\n        <filter-item-date-range\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeRangeItem\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-date-range>\n      }\n      @case (itemType.Week) {\n        <filter-item-week\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"weekItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-week>\n      }\n      @case (itemType.Checkbox) {\n        <filter-item-checkbox\n          class=\"interface interface-checkbox\"\n          [item]=\"checkboxItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-checkbox>\n      }\n    }\n  </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}: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", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: SelectComponent, selector: "filter-item-select", inputs: ["autofocus", "floatLabel", "item"] }, { kind: "component", type: ChipsComponent, selector: "filter-item-chips" }, { kind: "component", type: RangeComponent, selector: "filter-item-range", inputs: ["autofocusName", "floatLabel"] }, { kind: "component", type: AutocompleteComponent, selector: "filter-item-autocomplete", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: DateComponent, selector: "filter-item-date", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: DateRangeComponent, selector: "filter-item-date-range", inputs: ["autofocusName", "floatLabel"] }, { kind: "component", type: WeekComponent, selector: "filter-item-week", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: CheckboxComponent, selector: "filter-item-checkbox" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterItemComponent, isStandalone: true, selector: "filter-item", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", autofocusName: "autofocusName", overlayRef: "overlayRef", item: "item", name: "name" }, 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          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"textItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocus]=\"autofocus\">\n        </filter-item-text>\n      }\n      @case (itemType.Select) {\n        <filter-item-select\n          [overlayRef]=\"overlayRef\"\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"selectItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-select>\n      }\n      @case (itemType.Chips) {\n        <filter-item-chips\n          class=\"interface\"\n          [item]=\"chipsItem\"\n          [overlayRef]=\"overlayRef\">\n        </filter-item-chips>\n      }\n      @case (itemType.Range) {\n        <filter-item-range\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-range\"\n          [item]=\"rangeItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-range>\n      }\n      @case (itemType.AutoComplete) {\n        <filter-item-autocomplete\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [overlayRef]=\"overlayRef\"\n          [item]=\"autocompleteItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocomplete>\n      }\n      @case (itemType.AutoCompleteChips) {\n        <filter-item-autocompletechips\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [overlayRef]=\"overlayRef\"\n          [item]=\"autocompleteChipsItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocompletechips>\n      }\n      @case (itemType.Date) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateTime) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateRange) {\n        <filter-item-date-range\n            [floatLabel]=\"floatLabel\"\n            class=\"interface interface-date\"\n            [item]=\"dateRangeItem\"\n            [overlayRef]=\"overlayRef\"\n            [autofocusName]=\"autofocusName\">\n          [name]=\"name\">\n        </filter-item-date-range>\n      }\n      @case (itemType.DateTimeRange) {\n        <filter-item-date-range\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeRangeItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-date-range>\n      }\n      @case (itemType.Week) {\n        <filter-item-week\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [overlayRef]=\"overlayRef\"\n          [item]=\"weekItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-week>\n      }\n      @case (itemType.Checkbox) {\n        <filter-item-checkbox\n          [overlayRef]=\"overlayRef\"\n          class=\"interface interface-checkbox\"\n          [item]=\"checkboxItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-checkbox>\n      }\n    }\n  </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}: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", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: SelectComponent, selector: "filter-item-select", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: ChipsComponent, selector: "filter-item-chips" }, { kind: "component", type: RangeComponent, selector: "filter-item-range", inputs: ["autofocusName", "floatLabel"] }, { kind: "component", type: AutocompleteComponent, selector: "filter-item-autocomplete", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: DateComponent, selector: "filter-item-date", inputs: ["autofocus", "floatLabel"] }, { kind: "component", type: DateRangeComponent, selector: "filter-item-date-range", inputs: ["autofocusName", "floatLabel"] }, { kind: "component", type: WeekComponent, selector: "filter-item-week", inputs: ["autofocus", "floatLabel"] }, { 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,
@@ -3178,13 +3111,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         WeekComponent,
                         CheckboxComponent,
                         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          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"textItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-text>\n      }\n      @case (itemType.Select) {\n        <filter-item-select\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"selectItem\"\n          [autofocus]=\"autofocus\">\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          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-range\"\n          [item]=\"rangeItem\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-range>\n      }\n      @case (itemType.AutoComplete) {\n        <filter-item-autocomplete\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"autocompleteItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocomplete>\n      }\n      @case (itemType.AutoCompleteChips) {\n        <filter-item-autocompletechips\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"autocompleteChipsItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocompletechips>\n      }\n      @case (itemType.Date) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateTime) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateRange) {\n        <filter-item-date-range\n            [floatLabel]=\"floatLabel\"\n            class=\"interface interface-date\"\n            [item]=\"dateRangeItem\"\n            [autofocusName]=\"autofocusName\">\n          [name]=\"name\">\n        </filter-item-date-range>\n      }\n      @case (itemType.DateTimeRange) {\n        <filter-item-date-range\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeRangeItem\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-date-range>\n      }\n      @case (itemType.Week) {\n        <filter-item-week\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"weekItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-week>\n      }\n      @case (itemType.Checkbox) {\n        <filter-item-checkbox\n          class=\"interface interface-checkbox\"\n          [item]=\"checkboxItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-checkbox>\n      }\n    }\n  </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}: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"] }]
+                    ], 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          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"textItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocus]=\"autofocus\">\n        </filter-item-text>\n      }\n      @case (itemType.Select) {\n        <filter-item-select\n          [overlayRef]=\"overlayRef\"\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [item]=\"selectItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-select>\n      }\n      @case (itemType.Chips) {\n        <filter-item-chips\n          class=\"interface\"\n          [item]=\"chipsItem\"\n          [overlayRef]=\"overlayRef\">\n        </filter-item-chips>\n      }\n      @case (itemType.Range) {\n        <filter-item-range\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-range\"\n          [item]=\"rangeItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-range>\n      }\n      @case (itemType.AutoComplete) {\n        <filter-item-autocomplete\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [overlayRef]=\"overlayRef\"\n          [item]=\"autocompleteItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocomplete>\n      }\n      @case (itemType.AutoCompleteChips) {\n        <filter-item-autocompletechips\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [overlayRef]=\"overlayRef\"\n          [item]=\"autocompleteChipsItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-autocompletechips>\n      }\n      @case (itemType.Date) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateTime) {\n        <filter-item-date\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocus]=\"autofocus\">\n        </filter-item-date>\n      }\n      @case (itemType.DateRange) {\n        <filter-item-date-range\n            [floatLabel]=\"floatLabel\"\n            class=\"interface interface-date\"\n            [item]=\"dateRangeItem\"\n            [overlayRef]=\"overlayRef\"\n            [autofocusName]=\"autofocusName\">\n          [name]=\"name\">\n        </filter-item-date-range>\n      }\n      @case (itemType.DateTimeRange) {\n        <filter-item-date-range\n          [floatLabel]=\"floatLabel\"\n          class=\"interface interface-date\"\n          [item]=\"dateTimeRangeItem\"\n          [overlayRef]=\"overlayRef\"\n          [autofocusName]=\"autofocusName\">\n        </filter-item-date-range>\n      }\n      @case (itemType.Week) {\n        <filter-item-week\n          [floatLabel]=\"floatLabel\"\n          class=\"interface\"\n          [overlayRef]=\"overlayRef\"\n          [item]=\"weekItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-week>\n      }\n      @case (itemType.Checkbox) {\n        <filter-item-checkbox\n          [overlayRef]=\"overlayRef\"\n          class=\"interface interface-checkbox\"\n          [item]=\"checkboxItem\"\n          [autofocus]=\"autofocus\">\n        </filter-item-checkbox>\n      }\n    }\n  </div>\n}", styles: [":host ::ng-deep mat-form-field{margin-top:0!important}: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"] }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
                 type: Input
             }], autofocusName: [{
                 type: Input
+            }], overlayRef: [{
+                type: Input
             }], item: [{
                 type: Input
             }], name: [{
@@ -3194,8 +3129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class FilterItemDialogComponent {
     item = inject(FILTER_DRAWER_DATA)?.item;
     autofocusName = inject(FILTER_DRAWER_DATA)?.autofocusName;
+    overlayRef = inject(FILTER_DRAWER_DATA)?.overlayRef;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FilterItemDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"filter-item-dialog\">\n  <filter-item\n    class=\"filter-group\"\n    [floatLabel]=\"'always'\"\n    [autofocus]=\"true\"\n    [autofocusName]=\"autofocusName\"\n    [item]=\"item\">\n  </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FsFormModule }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FilterItemDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"filter-item-dialog\">\n  <filter-item\n    class=\"filter-group\"\n    [floatLabel]=\"'always'\"\n    [autofocus]=\"true\"\n    [autofocusName]=\"autofocusName\"\n    [overlayRef]=\"overlayRef\"\n    [item]=\"item\">\n  </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FsFormModule }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "overlayRef", "item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterItemDialogComponent, decorators: [{
             type: Component,
@@ -3204,7 +3140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsFormModule,
                         FsSkeletonModule,
                         FilterItemComponent,
-                    ], template: "<div class=\"filter-item-dialog\">\n  <filter-item\n    class=\"filter-group\"\n    [floatLabel]=\"'always'\"\n    [autofocus]=\"true\"\n    [autofocusName]=\"autofocusName\"\n    [item]=\"item\">\n  </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"] }]
+                    ], template: "<div class=\"filter-item-dialog\">\n  <filter-item\n    class=\"filter-group\"\n    [floatLabel]=\"'always'\"\n    [autofocus]=\"true\"\n    [autofocusName]=\"autofocusName\"\n    [overlayRef]=\"overlayRef\"\n    [item]=\"item\">\n  </filter-item>\n</div>", styles: [".filter-item-dialog{background-color:#fff;padding:12px;box-shadow:var(--mat-autocomplete-container-elevation-shadow);border-radius:5px}.filter-item-dialog ::ng-deep mat-form-field{margin-top:0}\n"] }]
         }] });
 
 class FsFilterSavedFilterChipsComponent {
@@ -3284,6 +3220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class FsFilterChipsComponent {
+    chips;
     ItemType = ItemType;
     secondaryItems = [];
     _filterController = inject(FilterController);
@@ -3303,9 +3240,11 @@ class FsFilterChipsComponent {
     addFilter(event) {
         const item = event.value;
         item.secondaryShow();
-        setTimeout(() => {
+        this.chips.changes
+            .pipe(take(1), delay(100), tap$1(() => {
             this.openChip(item);
-        });
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     get disabledItems() {
         return this.items
@@ -3325,7 +3264,6 @@ class FsFilterChipsComponent {
         this.secondaryItems = this.items
             .filter((item) => !item.primary);
         this._initHasSecondaryValue();
-        this._initChipClick();
     }
     clear() {
         this._filterController.items
@@ -3341,7 +3279,8 @@ class FsFilterChipsComponent {
     }
     openChip(item, name = null) {
         this._destroyOverlay();
-        const el = this._elementRef.nativeElement.querySelector(`[data-filter-item="${item.name}"]`);
+        const el = this._elementRef.nativeElement
+            .querySelector(`[data-filter-item="${item.name}"]`);
         const positions = [
             {
                 originX: 'start',
@@ -3366,13 +3305,14 @@ class FsFilterChipsComponent {
             positionStrategy: strategy,
             scrollStrategy: this._overlay.scrollStrategies.block(),
             disposeOnNavigation: true,
+            hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
             panelClass: 'fs-sidenav-menu-overlay-pane',
         });
-        if (this._overlayRef) {
-            this._destroyOverlay();
-        }
         this._overlayRef = this._overlay.create(overlayConfig);
+        this._overlayRef.backdropClick().pipe(take(1), tap$1(() => {
+            this._destroyOverlay();
+        }), takeUntilDestroyed(this._destroyRef)).subscribe();
         this._attachContainer(this._overlayRef, item, name);
     }
     getNestedElement(el, className) {
@@ -3420,6 +3360,7 @@ class FsFilterChipsComponent {
             this._overlayRef.detachBackdrop();
             this._overlayRef.detach();
             this._overlayRef.dispose();
+            this._overlayRef = null;
         }
     }
     removeChip(item, chip) {
@@ -3441,28 +3382,13 @@ class FsFilterChipsComponent {
     }
     _createInjector(item, autofocusName) {
         const providers = [
-            { provide: FILTER_DRAWER_DATA, useValue: { item, autofocusName } },
+            { provide: FILTER_DRAWER_DATA, useValue: { item, autofocusName, overlayRef: this._overlayRef } },
         ];
         return Injector.create({
             providers,
             parent: this._injector,
         });
     }
-    _initChipClick() {
-        fromEvent(document, 'click')
-            .subscribe((event) => {
-            const elements = document.elementsFromPoint(event.clientX, event.clientY);
-            const item1 = elements.some((element) => {
-                return !!this.getNestedElement(element, 'cdk-overlay-pane');
-            });
-            const item2 = elements.some((element) => {
-                return !!this.getNestedElement(element, 'filter-chip');
-            });
-            if (!item1 && !item2) {
-                this._destroyOverlay();
-            }
-        });
-    }
     _initHasSecondaryValue() {
         this._hasSecondaryValue$.next(this.hasSecondaryValue);
         this._filterController.change$
@@ -3472,7 +3398,7 @@ class FsFilterChipsComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async) && (item.hasValue$ | async)) {\n      @for (chip of item.chips$ | async; track chip.label) {\n        <fs-chip\n            class=\"filter-chip selected\"\n            [size]=\"'medium'\"\n            [borderColor]=\"'#ddd'\"\n            [attr.data-filter-item]=\"item.name\"\n            [outlined]=\"true\"\n            (click)=\"openChip(item, chip.name)\">\n          @if (chip.value) {\n            {{ chip.label }}:\n            <a>\n              {{ chip.value }}\n            </a>\n          } @else {\n            {{ chip.label }}\n          }\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'cancel_circle_outline'\"\n            (click)=\"removeChip(item, chip)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n    @if ((item.visible$ | async) && (item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n      <fs-chip\n          class=\"filter-chip\"\n          [attr.data-filter-item]=\"item.name\"\n          [size]=\"'medium'\"\n          [borderColor]=\"'#ddd'\"\n          (click)=\"openChip(item)\"\n          [outlined]=\"true\">\n        {{ item.mergedLabel }}\n        <ng-template\n          fsChipSuffix\n          [icon]=\"'add_circle_outline'\"\n          (click)=\"openChip(item)\">\n        </ng-template>\n      </fs-chip>\n    }\n  }\n  <mat-select\n      class=\"more-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"'More filters'\"\n      (selectionChange)=\"addFilter($event)\"\n      [deselectOnChange]=\"true\">\n    @for (item of disabledItems; track item.name) {\n      <mat-option [value]=\"item\">\n        {{ item.mergedLabel }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n  @if (hasSecondaryValue$ | async) {\n    <a\n        class=\"clear\"\n        mat-button\n        (click)=\"clear()\">\n      Clear filters\n    </a>\n  }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "directive", type: i1$5.FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: ["icon", "link", "linkTarget", "color", "data", "tooltip"], outputs: ["click"] }, { 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: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "directive", type: i3$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "minWidth", "maxWidth", "width", "buttonType", "deselectOnChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", viewQueries: [{ propertyName: "chips", predicate: FsChipComponent, descendants: true }], ngImport: i0, template: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async) && (item.hasValue$ | async)) {\n      @for (chip of item.chips$ | async; track chip.label) {\n        <fs-chip\n            class=\"filter-chip selected\"\n            [size]=\"'medium'\"\n            [borderColor]=\"'#ddd'\"\n            [attr.data-filter-item]=\"item.name\"\n            [outlined]=\"true\"\n            (click)=\"openChip(item, chip.name)\">\n          @if (chip.value) {\n            {{ chip.label }}:\n            <a>\n              {{ chip.value }}\n            </a>\n          } @else {\n            {{ chip.label }}\n          }\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'cancel_circle_outline'\"\n            (click)=\"removeChip(item, chip)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n    @if ((item.visible$ | async) && (item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n      <fs-chip\n          class=\"filter-chip\"\n          [attr.data-filter-item]=\"item.name\"\n          [size]=\"'medium'\"\n          [borderColor]=\"'#ddd'\"\n          (click)=\"openChip(item)\"\n          [outlined]=\"true\">\n        {{ item.mergedLabel }}\n        <ng-template\n          fsChipSuffix\n          [icon]=\"'add_circle_outline'\"\n          (click)=\"openChip(item)\">\n        </ng-template>\n      </fs-chip>\n    }\n  }\n  <mat-select\n      class=\"more-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'fs-filter-no-initial-focus'\"\n      [placeholder]=\"'More filters'\"\n      (selectionChange)=\"addFilter($event)\"\n      [deselectOnChange]=\"true\">\n    @for (item of disabledItems; track item.name) {\n      <mat-option [value]=\"item\">\n        {{ item.mergedLabel }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n  @if (hasSecondaryValue$ | async) {\n    <a\n        class=\"clear\"\n        mat-button\n        color=\"primary\"\n        (click)=\"clear()\">\n      Clear filters\n    </a>\n  }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px;z-index:999}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px;font-size:90%}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .mat-mdc-select-panel.fs-filter-no-initial-focus .mat-mdc-option-active:not(:hover){background:transparent!important}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "directive", type: i1$5.FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: ["icon", "link", "linkTarget", "color", "data", "tooltip"], outputs: ["click"] }, { 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: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "directive", type: i3$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "minWidth", "maxWidth", "width", "buttonType", "deselectOnChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
             type: Component,
@@ -3484,8 +3410,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsSelectButtonModule,
                         MatButtonModule,
                         FsButtonDirective,
-                    ], template: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async) && (item.hasValue$ | async)) {\n      @for (chip of item.chips$ | async; track chip.label) {\n        <fs-chip\n            class=\"filter-chip selected\"\n            [size]=\"'medium'\"\n            [borderColor]=\"'#ddd'\"\n            [attr.data-filter-item]=\"item.name\"\n            [outlined]=\"true\"\n            (click)=\"openChip(item, chip.name)\">\n          @if (chip.value) {\n            {{ chip.label }}:\n            <a>\n              {{ chip.value }}\n            </a>\n          } @else {\n            {{ chip.label }}\n          }\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'cancel_circle_outline'\"\n            (click)=\"removeChip(item, chip)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n    @if ((item.visible$ | async) && (item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n      <fs-chip\n          class=\"filter-chip\"\n          [attr.data-filter-item]=\"item.name\"\n          [size]=\"'medium'\"\n          [borderColor]=\"'#ddd'\"\n          (click)=\"openChip(item)\"\n          [outlined]=\"true\">\n        {{ item.mergedLabel }}\n        <ng-template\n          fsChipSuffix\n          [icon]=\"'add_circle_outline'\"\n          (click)=\"openChip(item)\">\n        </ng-template>\n      </fs-chip>\n    }\n  }\n  <mat-select\n      class=\"more-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"'More filters'\"\n      (selectionChange)=\"addFilter($event)\"\n      [deselectOnChange]=\"true\">\n    @for (item of disabledItems; track item.name) {\n      <mat-option [value]=\"item\">\n        {{ item.mergedLabel }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n  @if (hasSecondaryValue$ | async) {\n    <a\n        class=\"clear\"\n        mat-button\n        (click)=\"clear()\">\n      Clear filters\n    </a>\n  }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"] }]
-        }] });
+                        FormsModule,
+                    ], template: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async) && (item.hasValue$ | async)) {\n      @for (chip of item.chips$ | async; track chip.label) {\n        <fs-chip\n            class=\"filter-chip selected\"\n            [size]=\"'medium'\"\n            [borderColor]=\"'#ddd'\"\n            [attr.data-filter-item]=\"item.name\"\n            [outlined]=\"true\"\n            (click)=\"openChip(item, chip.name)\">\n          @if (chip.value) {\n            {{ chip.label }}:\n            <a>\n              {{ chip.value }}\n            </a>\n          } @else {\n            {{ chip.label }}\n          }\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'cancel_circle_outline'\"\n            (click)=\"removeChip(item, chip)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n    @if ((item.visible$ | async) && (item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n      <fs-chip\n          class=\"filter-chip\"\n          [attr.data-filter-item]=\"item.name\"\n          [size]=\"'medium'\"\n          [borderColor]=\"'#ddd'\"\n          (click)=\"openChip(item)\"\n          [outlined]=\"true\">\n        {{ item.mergedLabel }}\n        <ng-template\n          fsChipSuffix\n          [icon]=\"'add_circle_outline'\"\n          (click)=\"openChip(item)\">\n        </ng-template>\n      </fs-chip>\n    }\n  }\n  <mat-select\n      class=\"more-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [disableOptionCentering]=\"true\"\n      [panelClass]=\"'fs-filter-no-initial-focus'\"\n      [placeholder]=\"'More filters'\"\n      (selectionChange)=\"addFilter($event)\"\n      [deselectOnChange]=\"true\">\n    @for (item of disabledItems; track item.name) {\n      <mat-option [value]=\"item\">\n        {{ item.mergedLabel }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n  @if (hasSecondaryValue$ | async) {\n    <a\n        class=\"clear\"\n        mat-button\n        color=\"primary\"\n        (click)=\"clear()\">\n      Clear filters\n    </a>\n  }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px;z-index:999}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px;font-size:90%}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .mat-mdc-select-panel.fs-filter-no-initial-focus .mat-mdc-option-active:not(:hover){background:transparent!important}\n"] }]
+        }], propDecorators: { chips: [{
+                type: ViewChildren,
+                args: [FsChipComponent]
+            }] } });
 
 class KeywordInputComponent {
     keywordMatInput;
@@ -3906,7 +3836,7 @@ class FilterComponent {
             ActionsController,
             KeywordController,
             SortController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n    class=\"filter-container\"\n    [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n    [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n  @if (primaryFilterVisible$ | async) {\n    <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n  }\n  <div class=\"filter-bar-container\">\n    @if (primaryFilterVisible$ | async) {\n      <div class=\"filter-input-container\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @for (item of primaryItems; track item.name) {\n          @if (item.visible$ | async) {\n            <filter-item [item]=\"item\"></filter-item>\n          }\n        }\n      </div>\n    } @else if (hasHeading) {\n      <div class=\"filter-heading-container\">\n        <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n  </div>\n  @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n    <ng-container\n      [ngTemplateOutlet]=\"chipsTmpl\"\n      [ngTemplateOutletContext]=\"{ topMargin: true }\">\n    </ng-container>\n  }\n  <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template\n    #chipsTmpl\n    let-topMargin=\"topMargin\">\n  <fs-filter-chips\n    class=\"filter-chips\"\n    [ngClass]=\"{ 'top-margin': topMargin }\">\n  </fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\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</ng-template>\n<ng-template #filterActionsTmpl>\n  @if ((actionsVisible$ | async)) {\n    <div class=\"filter-actions\">\n      <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\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 #filterToolbarTmpl>\n  @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\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          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [ngModel]=\"config.autoReload.enabled\"\n              (ngModelChange)=\"config.autoReload.enabled = $event\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #headingTmpl>\n  @if (headingTemplate) {\n    <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n  } @else 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;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.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;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@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: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "item", "name"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i3.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: FsFilterChipsComponent, selector: "fs-filter-chips" }, { 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" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n    class=\"filter-container\"\n    [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n    [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n  @if (primaryFilterVisible$ | async) {\n    <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n  }\n  <div class=\"filter-bar-container\">\n    @if (primaryFilterVisible$ | async) {\n      <div class=\"filter-input-container\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @for (item of primaryItems; track item.name) {\n          @if (item.visible$ | async) {\n            <filter-item [item]=\"item\"></filter-item>\n          }\n        }\n      </div>\n    } @else if (hasHeading) {\n      <div class=\"filter-heading-container\">\n        <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n  </div>\n  @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n    <ng-container\n      [ngTemplateOutlet]=\"chipsTmpl\"\n      [ngTemplateOutletContext]=\"{ topMargin: true }\">\n    </ng-container>\n  }\n  <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template\n    #chipsTmpl\n    let-topMargin=\"topMargin\">\n  <fs-filter-chips\n    class=\"filter-chips\"\n    [ngClass]=\"{ 'top-margin': topMargin }\">\n  </fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\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</ng-template>\n<ng-template #filterActionsTmpl>\n  @if ((actionsVisible$ | async)) {\n    <div class=\"filter-actions\">\n      <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\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 #filterToolbarTmpl>\n  @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\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          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [ngModel]=\"config.autoReload.enabled\"\n              (ngModelChange)=\"config.autoReload.enabled = $event\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #headingTmpl>\n  @if (headingTemplate) {\n    <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n  } @else 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;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.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;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@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: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "overlayRef", "item", "name"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i3.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: FsFilterChipsComponent, selector: "fs-filter-chips" }, { 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" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,