@firestitch/filter 18.2.18 → 18.2.20

package/fesm2022/firestitch-filter.mjs

@@ -805,7 +805,13 @@ class BaseItem {
                 return values instanceof Observable ? values : of(values);
             }
             return of(this.values);
-        }), tap((values) => this.values = values || []));
+        }), tap((values) => {
+            this.values = (values || [])
+                .map((item) => ({
+                ...item,
+                value: (item.value ?? null) === null ? null : `${item.value}`,
+            }));
+        }));
     }
     initValue(value) {
         this.setValue(value === undefined ? this.defaultValue : value);
@@ -1041,7 +1047,7 @@ class ChipsItem extends BaseItem {
         };
     }
     get query() {
-        if (!this.value) {
+        if (!this.hasValue) {
             return {};
         }
         return {
@@ -1051,17 +1057,19 @@ class ChipsItem extends BaseItem {
         };
     }
     get chips() {
-        return this.hasValue ? [
-            {
-                value: this.value
-                    .reduce((acc, i) => {
-                    acc.push((`${i.name}`).trim());
-                    return acc;
-                }, [])
-                    .join(', '),
+        if (!this.hasValue) {
+            return [];
+        }
+        const chips = this.value
+            .reduce((acc, i) => {
+            acc.push((`${i.name}`).trim());
+            return acc;
+        }, [])
+            .join(', ');
+        return [{
+                value: chips,
                 label: this.label,
-            },
-        ] : [];
+            }];
     }
     setValue(value, emitChange = true) {
         super.setValue(Array.isArray(value) ? value : [], emitChange);
@@ -1346,22 +1354,14 @@ class SelectItem extends BaseItem {
         this.value = this.multiple ? [] : null;
     }
     init(value) {
-        return super.init(value)
-            .pipe(tap$1(() => {
-            if (this.isolate) {
-                // this.values = this.values
-                //   .filter((item) => {
-                //     return !this.isolateValues.includes(item.value as never);
-                //   });
-            }
-        }));
+        return super.init(value);
     }
     setValue(value, emitChange = true) {
         if (this.multiple) {
             value = Array.isArray(value) ? value : [];
         }
         else {
-            value = Array.isArray(value) ? undefined : value;
+            value = Array.isArray(value) ? value[0] : value;
         }
         super.setValue(value, emitChange);
     }
@@ -1374,15 +1374,6 @@ class SelectItem extends BaseItem {
         };
     }
     get query() {
-        if (!this.hasValue && this.isolate) {
-            return {
-                [this.name]: this.values
-                    .map((item) => {
-                    return item.value;
-                })
-                    .join(','),
-            };
-        }
         if (!this.hasValue) {
             return {};
         }
@@ -1414,7 +1405,7 @@ class SelectItem extends BaseItem {
                 return true;
             }
             return this.multiple ? this.value
-                .includes(item.value) : +this.value === +item.value;
+                .includes(item.value) : `${this.value}` === `${item.value}`;
         })
             .map((item) => {
             return item.name;
@@ -1571,12 +1562,12 @@ class KeywordController {
         this._keywordItem$
             .pipe(
         // when item changes, unsubscribe from the previous visible$
-        switchMap$1((item) => item ? item.visible$ : of(false)), 
+        switchMap$1((item) => item.visible$), 
         // avoid redundant writes
         distinctUntilChanged$1(), 
         // clean up on destroy,
         takeUntilDestroyed(this._destroyRef))
-            .subscribe((v) => this._keywordVisible$.next(v));
+            .subscribe((visible) => this._keywordVisible$.next(visible));
     }
     get keywordItem$() {
         return this._keywordItem$.asObservable();
@@ -1622,17 +1613,17 @@ class PersistanceController {
     }
     init(filterController) {
         this._filterController = filterController;
-        const config = this._initConfig(filterController.config.persist, this.inDialog);
-        if (config) {
-            this.enabled = config.persistQuery;
-            this._name = config.name;
+        const persistanceConfig = this._initConfig(filterController.config.persist);
+        if (persistanceConfig) {
+            this.enabled = !this.inDialog;
+            this._name = persistanceConfig.name;
             this._data = this._get() || {};
+            this._filterController.change$
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                this._set('query', this._filterController.values);
+            });
         }
-        this._filterController.change$
-            .pipe(takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            this._set('query', this._filterController.values);
-        });
         return of(null);
     }
     setQuery(value) {
@@ -1654,12 +1645,11 @@ class PersistanceController {
         }
         return {};
     }
-    _initConfig(config, inDialog) {
+    _initConfig(config) {
         let persistanceConfig = this._getConfig(config);
         if (persistanceConfig) {
             persistanceConfig = {
                 name: persistanceConfig.name || getNormalizedPath(this._location),
-                persistQuery: !inDialog || !!persistanceConfig.name,
                 ...persistanceConfig,
             };
         }
@@ -1900,7 +1890,8 @@ class QueryParamController {
     }
     updateQueryParams() {
         const queryParams = {
-            ...this._filterController.items.reduce((acc, item) => {
+            ...this._filterController.items
+                .reduce((acc, item) => {
                 return {
                     ...acc,
                     [item.name]: undefined,
@@ -1921,7 +1912,7 @@ class QueryParamController {
                 url.searchParams.set(name, data[name]);
             }
         });
-        history.replaceState({}, null, url.pathname + url.search);
+        history.replaceState({}, null, url.pathname + decodeURIComponent(url.search));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QueryParamController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QueryParamController });
@@ -2692,10 +2683,8 @@ class FsFilterConfig {
             load: data.load ?? true,
             persist: data.persist,
             savedFilters: data.savedFilters,
-            inline: data.inline ?? false,
             autofocus: data.autofocus ?? false,
             chips: data.chips ?? false,
-            sortValues: data.sorts,
             sort: data.sort,
             queryParam: data.queryParam ?? false,
             init: data.init,
@@ -3058,7 +3047,7 @@ class FilterComponent {
     windowDesktop = false;
     fsFilterClass = true;
     _config;
-    _filtersBtnVisible$ = new BehaviorSubject(true);
+    _filtersVisible$ = new BehaviorSubject(true);
     _hasFilterChips$ = new BehaviorSubject(false);
     _destroy$ = new Subject();
     _defaultConfig = inject(FS_FILTER_CONFIG, { optional: true });
@@ -3150,18 +3139,19 @@ class FilterComponent {
     change() {
         this._filterController.change();
     }
-    get visibleItems() {
-        return this._filterController.items
-            .filter((item) => !item.hidden);
-    }
     get hasFilterChips$() {
         return this._hasFilterChips$.asObservable();
     }
-    get hasVisibleItemOrSorting() {
-        return this.visibleItems.length > 0;
-    }
-    get filtersBtnVisible$() {
-        return this._filtersBtnVisible$.asObservable();
+    get filtersVisible$() {
+        return combineLatest({
+            filtersVisible: this._filtersVisible$.asObservable(),
+            hasVisibleItems: of(this.items
+                .filter((item) => !item.hidden && !item.isTypeKeyword)
+                .length > 0),
+        })
+            .pipe(map(({ filtersVisible, hasVisibleItems }) => {
+            return filtersVisible && hasVisibleItems;
+        }));
     }
     get keywordVisible$() {
         return this._keywordController.keywordVisible$;
@@ -3218,9 +3208,6 @@ class FilterComponent {
         this._destroyFilterDrawer();
     }
     showDrawer() {
-        if (!this.hasVisibleItemOrSorting) {
-            return;
-        }
         this._listenEscButton();
         this.opened.emit();
         this._filterOverlay.open();
@@ -3322,26 +3309,26 @@ class FilterComponent {
     /**
      * Show "Filters" button
      */
-    showFiltersBtn() {
-        this._filtersBtnVisible$.next(true);
+    showFilters() {
+        this._filtersVisible$.next(true);
     }
     /**
      * Hide "Filters" button
      */
-    hideFiltersBtn() {
-        this._filtersBtnVisible$.next(false);
+    hideFilters() {
+        this._filtersVisible$.next(false);
     }
     /**
      * Show "Keyword" field if it present
      */
     showKeywordField() {
-        this.keywordInput.show();
+        this._keywordController.show();
     }
     /**
      * Hide "Keyword" field if it present
      */
     hideKeywordField() {
-        this.keywordInput.hide();
+        this._keywordController.hide();
     }
     /**
      * Go through actions and check show() callback and update visible actions
@@ -3425,7 +3412,7 @@ class FilterComponent {
             ActionsController,
             KeywordController,
             SortController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @if (savedFilterController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\n    <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <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 #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsSavedFilterAutocompleteChipsComponent, selector: "fs-saved-filter-autocomplete-chips", inputs: ["savedFiltersController"] }, { kind: "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 }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @if (savedFilterController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\n    <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersVisible$ | async)) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <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 #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsSavedFilterAutocompleteChipsComponent, selector: "fs-saved-filter-autocomplete-chips", inputs: ["savedFiltersController"] }, { kind: "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,
@@ -3453,7 +3440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         AsyncPipe,
                         KeywordInputComponent,
-                    ], template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @if (savedFilterController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\n    <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <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 #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
+                    ], template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @if (savedFilterController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\n    <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersVisible$ | async)) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <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 #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { keywordInput: [{
                 type: ViewChild,
                 args: [KeywordInputComponent]