@firestitch/filter 18.2.84 → 18.2.85

package/fesm2022/firestitch-filter.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Directive, Input, TemplateRef, DestroyRef, Component, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef, Injector, ViewChild, ElementRef, ViewChildren, EventEmitter, NgZone, Output, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { inject, Injectable, Directive, Input, TemplateRef, DestroyRef, Component, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef, Injector, ViewChild, signal, 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, take, delay, combineLatest, fromEvent, 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, skip as skip$1, 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';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$2 from '@angular/material/button';
+import * as i3$3 from '@angular/material/button';
 import { MatIconButton, MatFabButton, MatMiniFabButton, MatButton, MatButtonModule, MatIconAnchor } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i3$3 from '@firestitch/clear';
+import * as i3$4 from '@firestitch/clear';
 import { FsClearModule } from '@firestitch/clear';
 import * as i3 from '@firestitch/form';
 import { FsFormModule, FsButtonDirective } from '@firestitch/form';
@@ -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 * as i2$2 from '@firestitch/common';
+import * as i3$2 from '@firestitch/common';
 import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
 import { DrawerRef } from '@firestitch/drawer';
 import * as i1 from '@firestitch/popover';
@@ -1010,7 +1010,7 @@ class BaseItem {
     initCallback;
     _type;
     _valuesFn;
-    _hidden$ = new BehaviorSubject(false);
+    _visible$ = new BehaviorSubject(false);
     _value$ = new BehaviorSubject({ value: undefined, emitChange: true });
     _values$ = new BehaviorSubject(null);
     _secondaryVisible$ = new BehaviorSubject(false);
@@ -1044,20 +1044,23 @@ class BaseItem {
         return this._filter;
     }
     get hidden$() {
-        return this._hidden$.asObservable();
+        return this._visible$.asObservable()
+            .pipe(map((visible) => !visible));
     }
     get mergedLabel() {
         return Array.isArray(this.label) ? this.label.join(' / ') : this.label;
     }
     get visible$() {
-        return this._hidden$
-            .pipe(map((hidden) => !hidden));
+        return this._visible$.asObservable();
     }
     get visible() {
-        return !this._hidden$.getValue();
+        return this._visible$.getValue();
+    }
+    set visible(value) {
+        this._visible$.next(value);
     }
     get hidden() {
-        return this._hidden$.getValue();
+        return !this._visible$.getValue();
     }
     get isTypeAutocomplete() {
         return this.type === ItemType.AutoComplete;
@@ -1154,13 +1157,13 @@ class BaseItem {
         if (!this.primary) {
             this.secondaryHide();
         }
-        this._hidden$.next(true);
+        this.visible = false;
     }
     show() {
         if (!this.primary) {
             this.secondaryShow();
         }
-        this._hidden$.next(false);
+        this.visible = true;
     }
     get query() {
         if (!this.hasValue) {
@@ -1230,7 +1233,7 @@ class BaseItem {
         this.primary = item.primary ?? false;
         this.secondary = !this.primary && (item.secondary ?? false);
         this.chipLabel = item.chipLabel;
-        this._hidden$.next(item.hide ?? !(item.show ?? true));
+        this.visible = !(item.hide ?? !(item.show ?? true));
         this.clearable = item.clear ?? true;
         this.persistanceDisabled = item.disablePersist ?? false;
         this.queryParamsDisabled = item.disableQueryParams ?? false;
@@ -1818,7 +1821,7 @@ class TextItem extends BaseItem {
         return params;
     }
     get chips() {
-        if (!this.hasValue || this.isTypeKeyword) {
+        if (!this.hasValue) {
             return [];
         }
         let value = this.value;
@@ -1862,7 +1865,7 @@ class KeywordItem extends TextItem {
         return params;
     }
     get chips() {
-        if (!this.hasValue || this.isTypeKeyword) {
+        if (!this.hasValue) {
             return [];
         }
         return [
@@ -2919,22 +2922,37 @@ class RangeComponent extends BaseItemComponent {
     min;
     max;
     ngOnInit() {
-        this.min = this.item.value?.min;
-        this.max = this.item.value?.max;
+        this.item.value$
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((value) => {
+            this.min = value?.min;
+            this.max = value?.max;
+            this._cdRef.detectChanges();
+        });
     }
     ngOnDestroy() {
-        this.item.value = {
-            min: this.min,
-            max: this.max,
-        };
+        if (this.triggerChangeOn === 'close') {
+            this.item.value = {
+                min: this.min,
+                max: this.max,
+            };
+        }
+    }
+    change() {
+        if (this.triggerChangeOn === 'change') {
+            this.item.value = {
+                min: this.min,
+                max: this.max,
+            };
+        }
     }
     keyup(event) {
-        if (event.key === 'Enter' || event.code === 'Tab') {
+        if (this.triggerChangeOn === 'close' && (event.key === 'Enter' || event.code === 'Tab')) {
             this.close();
         }
     }
     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' || !min\"\n      type=\"number\"\n      [(ngModel)]=\"min\"\n      (keyup)=\"keyup($event)\"\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      (keyup)=\"keyup($event)\"\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      (fsModelChange)=\"change()\"\n      (keyup)=\"keyup($event)\"\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      (fsModelChange)=\"change()\"\n      (keyup)=\"keyup($event)\"\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"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i3$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
@@ -2947,7 +2965,8 @@ 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' || !min\"\n      type=\"number\"\n      [(ngModel)]=\"min\"\n      (keyup)=\"keyup($event)\"\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      (keyup)=\"keyup($event)\"\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"] }]
+                        FsCommonModule,
+                    ], 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      (fsModelChange)=\"change()\"\n      (keyup)=\"keyup($event)\"\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      (fsModelChange)=\"change()\"\n      (keyup)=\"keyup($event)\"\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: [{
@@ -2958,13 +2977,9 @@ class SelectComponent extends BaseItemComponent {
     autofocus = false;
     floatLabel = 'auto';
     select;
-    changed() {
-        if (!this.item.multiple) {
-            this.change();
-        }
-    }
     selectOpenedChange(opened) {
-        if (!opened && !this.item.isolate) {
+        if (!opened) {
+            this.change();
             this.close();
         }
     }
@@ -2980,20 +2995,12 @@ class SelectComponent extends BaseItemComponent {
         }
         this.item.value = value;
     }
-    ngOnDestroy() {
-        if (this.item.isolate) {
-            this.change();
-        }
-    }
     ngOnInit() {
         super.ngOnInit();
         if (this.item.isolate && !this.item.hasValue) {
             this.item.isolated = false;
         }
     }
-    markForCheck() {
-        this._cdRef.markForCheck();
-    }
     isolateChange(event) {
         if (event.checked) {
             this.value = this.item.multiple ? this.item.isolateValues : this.item.isolateValues[0];
@@ -3001,9 +3008,10 @@ class SelectComponent extends BaseItemComponent {
         else {
             this.value = this.item.multiple ? [] : null;
         }
+        this.change();
     }
     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 });
+    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      [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,
@@ -3019,7 +3027,7 @@ 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      (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"] }]
+                    ], 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      [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: [{
@@ -3050,7 +3058,7 @@ class TextComponent extends BaseItemComponent {
         }
     }
     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    (keyup)=\"keyup($event)\"\n    (fsModelChange)=\"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"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i2$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], 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    (keyup)=\"keyup($event)\"\n    (fsModelChange)=\"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"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i3$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
@@ -3283,6 +3291,8 @@ class FsFilterChipsComponent {
     chips;
     ItemType = ItemType;
     secondaryItems = [];
+    moreFilterItems = signal([]);
+    clearFiltersVisible = signal(false);
     _filterController = inject(FilterController);
     _dialog = inject(MatDialog);
     _message = inject(FsMessage);
@@ -3294,8 +3304,7 @@ class FsFilterChipsComponent {
     _elementRef = inject(ElementRef);
     _hasSecondaryValue$ = new BehaviorSubject(false);
     get items() {
-        return this._filterController.items
-            .filter((item) => !item.isTypeKeyword);
+        return this._filterController.items;
     }
     addFilter(event) {
         const item = event.value;
@@ -3306,10 +3315,6 @@ class FsFilterChipsComponent {
         }), takeUntilDestroyed(this._destroyRef))
             .subscribe();
     }
-    get disabledItems() {
-        return this.items
-            .filter((item) => !item.secondaryVisible && !item.hasValue && !item.primary && item.visible);
-    }
     get hasSecondaryValue$() {
         return this._hasSecondaryValue$.asObservable();
     }
@@ -3324,6 +3329,8 @@ class FsFilterChipsComponent {
         this.secondaryItems = this.items
             .filter((item) => !item.primary);
         this._initHasSecondaryValue();
+        this._initMoreFilterItems();
+        this._initClearFiltersVisible();
     }
     clear() {
         this._filterController.items
@@ -3434,6 +3441,9 @@ class FsFilterChipsComponent {
             item.clear();
         }
     }
+    removeItem(item) {
+        item.secondaryHide();
+    }
     _attachContainer(overlayRef, item, name) {
         const injector = this._createInjector(item, name);
         const containerPortal = new ComponentPortal(FilterItemDialogComponent, undefined, injector);
@@ -3449,6 +3459,50 @@ class FsFilterChipsComponent {
             parent: this._injector,
         });
     }
+    _initMoreFilterItems() {
+        merge(...this.items
+            .reduce((accum, item) => {
+            return [
+                ...accum,
+                item.visible$
+                    .pipe(skip$1(1)),
+                item.secondaryVisible$
+                    .pipe(skip$1(1)),
+            ];
+        }, []))
+            .pipe(tap$1(() => {
+            this._updateMoreFilterItems();
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+        this._updateMoreFilterItems();
+    }
+    _initClearFiltersVisible() {
+        merge(...this.items
+            .reduce((accum, item) => {
+            return [
+                ...accum,
+                item.visible$
+                    .pipe(skip$1(1)),
+                item.hasValue$
+                    .pipe(skip$1(1)),
+            ];
+        }, []))
+            .pipe(tap$1(() => {
+            this._updateClearItems();
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+        this._updateClearItems();
+    }
+    _updateMoreFilterItems() {
+        this.moreFilterItems
+            .set(this.items
+            .filter((item) => !item.primary && item.visible && !item.secondaryVisible));
+    }
+    _updateClearItems() {
+        this.clearFiltersVisible
+            .set(this.items
+            .some((item) => item.clearable && item.hasValue && item.visible));
+    }
     _initHasSecondaryValue() {
         this._hasSecondaryValue$.next(this.hasSecondaryValue);
         this._filterController.change$
@@ -3458,7 +3512,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", 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  @if (savedFilterController.enabled) {\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  }\n  <a\n      class=\"clear\"\n      mat-button\n      color=\"primary\"\n      (click)=\"clear()\">\n    Clear filters\n  </a>\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 });
+    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)) {\n      @if ((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.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]=\"'cancel_circle_outline'\"\n            (click)=\"removeItem(item)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n  }\n  @if (moreFilterItems().length > 0) {\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 moreFilterItems(); track item.name) {\n        <mat-option [value]=\"item\">\n          {{ item.mergedLabel }}\n        </mat-option>\n      }\n    </mat-select>\n  }\n  @if (savedFilterController.enabled) {\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  }\n  @if (clearFiltersVisible()) {\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$3.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,
@@ -3471,7 +3525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatButtonModule,
                         FsButtonDirective,
                         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  @if (savedFilterController.enabled) {\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  }\n  <a\n      class=\"clear\"\n      mat-button\n      color=\"primary\"\n      (click)=\"clear()\">\n    Clear filters\n  </a>\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"] }]
+                    ], template: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async)) {\n      @if ((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.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]=\"'cancel_circle_outline'\"\n            (click)=\"removeItem(item)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n  }\n  @if (moreFilterItems().length > 0) {\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 moreFilterItems(); track item.name) {\n        <mat-option [value]=\"item\">\n          {{ item.mergedLabel }}\n        </mat-option>\n      }\n    </mat-select>\n  }\n  @if (savedFilterController.enabled) {\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  }\n  @if (clearFiltersVisible()) {\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]
@@ -3541,7 +3595,7 @@ class KeywordInputComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KeywordInputComponent, isStandalone: true, selector: "fs-keyword-input", inputs: { autofocus: "autofocus" }, viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }], ngImport: i0, template: "@if (keywordVisible$ | async) {\n  <mat-form-field\n      class=\"search-form-field form-field-padless\"\n      [ngClass]=\"{ 'has-keyword': !!keyword }\">\n    <span\n        matPrefix\n        class=\"icon\">\n      <mat-icon matPrefix>\n        search\n      </mat-icon>\n    </span>\n    <input\n      #keywordMatInput\n      matInput\n      [(ngModel)]=\"keyword\"\n      (ngModelChange)=\"keywordChange($event)\"\n      name=\"filter-input\"\n      [fsClear]=\"true\"\n      [placeholder]=\"searchPlaceholder\">\n  </mat-form-field>\n}", styles: [".search-form-field{max-width:100%;width:250px;margin-top:0}.search-form-field .icon{margin-left:10px;color:#626262}.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\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: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: 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: i3$3.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KeywordInputComponent, isStandalone: true, selector: "fs-keyword-input", inputs: { autofocus: "autofocus" }, viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }], ngImport: i0, template: "@if (keywordVisible$ | async) {\n  <mat-form-field\n      class=\"search-form-field form-field-padless\"\n      [ngClass]=\"{ 'has-keyword': !!keyword }\">\n    <span\n        matPrefix\n        class=\"icon\">\n      <mat-icon matPrefix>\n        search\n      </mat-icon>\n    </span>\n    <input\n      #keywordMatInput\n      matInput\n      [(ngModel)]=\"keyword\"\n      (ngModelChange)=\"keywordChange($event)\"\n      name=\"filter-input\"\n      [fsClear]=\"true\"\n      [placeholder]=\"searchPlaceholder\">\n  </mat-form-field>\n}", styles: [".search-form-field{max-width:100%;width:250px;margin-top:0}.search-form-field .icon{margin-left:10px;color:#626262}.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\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: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: 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: i3$4.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordInputComponent, decorators: [{
             type: Component,
@@ -3579,8 +3633,6 @@ class FilterComponent {
     fsFilterClass = true;
     _config;
     _filterConfig;
-    _filtersVisible$ = new BehaviorSubject(true);
-    _hasFilterChips$ = new BehaviorSubject(false);
     _destroy$ = new Subject();
     _defaultConfig = inject(FS_FILTER_CONFIG, { optional: true });
     _zone = inject(NgZone);
@@ -3678,19 +3730,6 @@ class FilterComponent {
     get hasHeading() {
         return !!this.headingTemplate || !!this.config.heading;
     }
-    get hasFilterChips$() {
-        return this._hasFilterChips$.asObservable();
-    }
-    get filtersVisible$() {
-        return combineLatest({
-            filtersVisible: this._filtersVisible$.asObservable(),
-            hasVisibleItems: of(this.items
-                .some((item) => item.visible && !item.isTypeKeyword)),
-        })
-            .pipe(map(({ filtersVisible, hasVisibleItems }) => {
-            return filtersVisible && hasVisibleItems;
-        }));
-    }
     get keywordVisible$() {
         return this._keywordController.keywordVisible$;
     }
@@ -3824,18 +3863,6 @@ class FilterComponent {
     updateActions(actions) {
         this._actionsController.initActions(actions);
     }
-    /**
-     * Show "Filters" button
-     */
-    showFilters() {
-        this._filtersVisible$.next(true);
-    }
-    /**
-     * Hide "Filters" button
-     */
-    hideFilters() {
-        this._filtersVisible$.next(false);
-    }
     /**
      * Show "Keyword" field if it present
      */
@@ -3896,7 +3923,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\n              [item]=\"item\"\n              [triggerChangeOn]=\"'change'\">\n            </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;column-gap:5px;row-gap:10px;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", "triggerChangeOn"] }, { 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\n              [item]=\"item\"\n              [triggerChangeOn]=\"'change'\">\n            </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) {\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;column-gap:5px;row-gap:10px;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", "triggerChangeOn"] }, { 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,
@@ -3923,7 +3950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         AsyncPipe,
                         KeywordInputComponent,
-                    ], 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\n              [item]=\"item\"\n              [triggerChangeOn]=\"'change'\">\n            </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;column-gap:5px;row-gap:10px;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"] }]
+                    ], 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\n              [item]=\"item\"\n              [triggerChangeOn]=\"'change'\">\n            </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) {\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;column-gap:5px;row-gap:10px;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"] }]
         }], ctorParameters: () => [], propDecorators: { keywordInput: [{
                 type: ViewChild,
                 args: [KeywordInputComponent]