@firestitch/filter 18.2.12 → 18.2.14

package/fesm2022/firestitch-filter.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, ChangeDetectionStrategy, Input, ChangeDetectorRef, HostBinding, DestroyRef, EventEmitter, Output, InjectionToken, Injector, Directive, Optional, Self, ViewChild, NgZone, ElementRef, ContentChild, Pipe, HostListener, NgModule } from '@angular/core';
+import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, Injector, EventEmitter, Output, InjectionToken, Directive, Optional, Self, ChangeDetectorRef, ViewChild, NgZone, ElementRef, ContentChild, HostBinding, Pipe, HostListener, NgModule } from '@angular/core';
 import { FsPrompt } from '@firestitch/prompt';
-import { BehaviorSubject, Subject, of, forkJoin, Observable, timer, combineLatest, tap as tap$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter as filter$1, map as map$1, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
-import { distinctUntilChanged, tap, switchMap, map, takeUntil, filter, mapTo, startWith, debounceTime, finalize, delay, skip } from 'rxjs/operators';
+import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter as filter$1, map as map$1, combineLatest, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { distinctUntilChanged, tap, switchMap, map, filter, debounceTime, finalize, takeUntil, delay, skip } from 'rxjs/operators';
 import { FsStore } from '@firestitch/store';
 import { NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, NgSwitchDefault, NgIf, AsyncPipe, Location } from '@angular/common';
 import { MatIconButton, MatFabButton, MatMiniFabButton, MatButton, MatIconAnchor } from '@angular/material/button';
@@ -22,10 +22,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatOption, MatOptgroup } from '@angular/material/core';
 import * as i6 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
-import { isFunction, clone, toString, isObject, isString } from 'lodash-es';
 import * as i1$2 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
-import { iso8601, format, simpleFormat } from '@firestitch/date';
+import { isFunction, clone, toString, isObject, isString } from 'lodash-es';
+import { iso8601, format } from '@firestitch/date';
 import { isDate, isValid, parseISO } from 'date-fns';
 import { isEmpty, getNormalizedPath } from '@firestitch/common';
 import * as i3$2 from '@firestitch/datepicker';
@@ -655,9 +655,10 @@ class BaseItem {
     _type;
     _valuesFn;
     _hidden$ = new BehaviorSubject(false);
-    _value$ = new BehaviorSubject(undefined);
+    _value$ = new BehaviorSubject({ value: undefined, emitChange: true });
     _values$ = new BehaviorSubject(null);
     _destroy$ = new Subject();
+    _emitChange = true;
     constructor(itemConfig, _additionalConfig, _filter) {
         this._additionalConfig = _additionalConfig;
         this._filter = _filter;
@@ -723,11 +724,11 @@ class BaseItem {
         return this.value !== null && this.value !== undefined;
     }
     get hasValue$() {
-        return this._value$.asObservable()
+        return this.value$
             .pipe(map(() => this.hasValue));
     }
     get chips$() {
-        return this._value$.asObservable()
+        return this.value$
             .pipe(map(() => this.chips));
     }
     set values(values) {
@@ -737,10 +738,21 @@ class BaseItem {
         return this._values$.getValue();
     }
     get values$() {
-        return this._values$.asObservable();
+        return this._values$.asObservable()
+            .pipe(filter(() => this._emitChange));
     }
     get value$() {
-        return this._value$.asObservable();
+        return this._value$.asObservable()
+            .pipe(filter((event) => event.emitChange), map((event) => event.value));
+    }
+    get value() {
+        return this._value$.getValue().value;
+    }
+    set value(value) {
+        this.setValue(value);
+    }
+    setValue(value, emitChange = true) {
+        this._value$.next({ value, emitChange });
     }
     get queryParam() {
         return this.query;
@@ -798,11 +810,8 @@ class BaseItem {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    get value() {
-        return this._value$.getValue();
-    }
-    set value(value) {
-        this._value$.next(value);
+    clone() {
+        return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
     }
     _initConfig(item) {
         this.name = item.name;
@@ -829,171 +838,6 @@ class BaseItem {
     }
 }
 
-class FsFilterChipContentComponent {
-    _cdRef;
-    item;
-    type;
-    content;
-    _destroy$ = new Subject();
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-    }
-    ngOnInit() {
-        this.listenValueChangesForRanges();
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    listenValueChangesForRanges() {
-        this.item.value$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.content = this._getContent();
-            this._cdRef.detectChanges();
-        });
-    }
-    _getContent() {
-        const result = this.item.chips;
-        if (this.item.chipLabel !== undefined) {
-            if (this.item.chipLabel === '') {
-                return `${result}`;
-            }
-            if (Array.isArray(this.item.chipLabel)) {
-                const label = getLabelFromArray(this.item.chipLabel, this.type);
-                return `${label}: ${result}`;
-            }
-            return `${this.item.chipLabel}: ${result}`;
-        }
-        if (Array.isArray(this.item.label)) {
-            const label = getLabelFromArray(this.item.label, this.type);
-            return `${label}: ${result}`;
-        }
-        if (this.item.isTypeCheckbox) {
-            return result;
-        }
-        return `${this.item.label}: ${result}`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipContentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FsFilterChipContentComponent, isStandalone: true, selector: "fs-filter-chip-content", inputs: { item: "item", type: "type" }, ngImport: i0, template: "{{ content }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-filter-chip-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "{{ content }}\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-function getLabelFromArray(labelArr, type) {
-    if (type === 'from' && labelArr[0]) {
-        return `${labelArr[0]}`;
-    }
-    else if (type === 'to' && labelArr[1]) {
-        return `${labelArr[1]}`;
-    }
-    return '';
-}
-
-class FocusControllerService {
-    _focusOn = new BehaviorSubject(null);
-    constructor() { }
-    get focusOn$() {
-        return this._focusOn.asObservable();
-    }
-    click(item, type) {
-        this._focusOn.next({ item, type });
-    }
-    listenFocusFor$(targetItem, targetType) {
-        return this._focusOn
-            .pipe(filter((event) => !!event), filter(({ item, type }) => {
-            return targetItem === item && targetType === type;
-        }), tap(() => this.clearFocus()));
-    }
-    clearFocus() {
-        this._focusOn.next(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class FsFilterChipComponent {
-    item;
-    removable = false;
-    chips;
-    clickable = false;
-    rangeItem;
-    chipDelayedRender$;
-    _chipRenderTimer$ = timer(500)
-        .pipe(mapTo(true));
-    _destroy$ = new Subject();
-    _cdRef = inject(ChangeDetectorRef);
-    _focusController = inject(FocusControllerService);
-    ngOnInit() {
-        // this.rangeItem = this.item.isTypeDateRange
-        //   || this.item.isTypeRange
-        //   || this.item.isTypeDateTimeRange;
-        // this.listenValueChangesForRanges();
-        //   this._initDelayRender();
-        // }
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    click(chip) {
-        if (this.clickable) {
-            this._focusController.click(this.item, chip.name);
-        }
-    }
-    remove(chip) {
-        this.item.clear(chip.name);
-    }
-    listenValueChangesForRanges() {
-        // this.item.valueChange$
-        //   .pipe(
-        //     takeUntil(this._destroy$),
-        //   )
-        //   .subscribe(() => {
-        //     this._cdRef.markForCheck();
-        //   });
-    }
-    _initDelayRender() {
-        this.chipDelayedRender$ = combineLatest([
-            this.item.values$,
-            this._chipRenderTimer$.pipe(startWith(false)),
-        ])
-            .pipe(map(([values, timerValue]) => {
-            return !!values || timerValue;
-        }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipComponent, isStandalone: true, selector: "fs-filter-chip", inputs: { item: "item", removable: "removable", chips: "chips", clickable: "clickable" }, host: { properties: { "class.clickable": "this.clickable" } }, ngImport: i0, template: "@for (chip of chips; track chip) {\n  <fs-chip\n      [selectable]=\"false\"\n      [removable]=\"item.showClear && removable\"\n      size=\"small\"\n      (click)=\"click(chip)\"\n      (removed)=\"remove(chip)\">\n    {{ chip.label }}: {{ chip.value }}\n  </fs-chip>\n}\n<!-- {{ item.name }}\n@if ((chipDelayedRender$ | async)) {\n  @if (rangeItem) {\n    @if (item.value?.min || item.value?.from) {\n      <fs-chip\n          [value]=\"item\"\n          [selectable]=\"false\"\n          [removable]=\"item.showClear\"\n          size=\"small\"\n          [removable]=\"removable\"\n          (click)=\"click('from')\"\n          (removed)=\"removeItem($event, 'from')\">\n        <ng-template\n          [ngTemplateOutlet]=\"chipContent\"\n          [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n        </ng-template>\n      </fs-chip>\n    }\n    @if (item.value?.max || item.value?.to) {\n      <fs-chip\n          [value]=\"item\"\n          [selectable]=\"false\"\n          [removable]=\"item.showClear && removable\"\n          size=\"small\"\n          (click)=\"click('to')\"\n          (removed)=\"removeItem($event, 'to')\">\n        <ng-template\n          [ngTemplateOutlet]=\"chipContent\"\n          [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n        </ng-template>\n      </fs-chip>\n    }\n  } @else {\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear && removable\"\n        size=\"small\"\n        (click)=\"click()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  }\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    @if (!item.hasPendingValues && !item.loading) {\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    } @else {\n      Loading...\n    }\n  </ng-template>\n} -->", styles: [":host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}:host.clickable fs-chip{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsChipModule,
-                        NgTemplateOutlet,
-                        FsFilterChipContentComponent,
-                        AsyncPipe,
-                    ], template: "@for (chip of chips; track chip) {\n  <fs-chip\n      [selectable]=\"false\"\n      [removable]=\"item.showClear && removable\"\n      size=\"small\"\n      (click)=\"click(chip)\"\n      (removed)=\"remove(chip)\">\n    {{ chip.label }}: {{ chip.value }}\n  </fs-chip>\n}\n<!-- {{ item.name }}\n@if ((chipDelayedRender$ | async)) {\n  @if (rangeItem) {\n    @if (item.value?.min || item.value?.from) {\n      <fs-chip\n          [value]=\"item\"\n          [selectable]=\"false\"\n          [removable]=\"item.showClear\"\n          size=\"small\"\n          [removable]=\"removable\"\n          (click)=\"click('from')\"\n          (removed)=\"removeItem($event, 'from')\">\n        <ng-template\n          [ngTemplateOutlet]=\"chipContent\"\n          [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n        </ng-template>\n      </fs-chip>\n    }\n    @if (item.value?.max || item.value?.to) {\n      <fs-chip\n          [value]=\"item\"\n          [selectable]=\"false\"\n          [removable]=\"item.showClear && removable\"\n          size=\"small\"\n          (click)=\"click('to')\"\n          (removed)=\"removeItem($event, 'to')\">\n        <ng-template\n          [ngTemplateOutlet]=\"chipContent\"\n          [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n        </ng-template>\n      </fs-chip>\n    }\n  } @else {\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear && removable\"\n        size=\"small\"\n        (click)=\"click()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  }\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    @if (!item.hasPendingValues && !item.loading) {\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    } @else {\n      Loading...\n    }\n  </ng-template>\n} -->", styles: [":host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}:host.clickable fs-chip{cursor:pointer}\n"] }]
-        }], propDecorators: { item: [{
-                type: Input
-            }], removable: [{
-                type: Input
-            }], chips: [{
-                type: Input
-            }], clickable: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.clickable']
-            }] } });
-
 class BaseAutocompleteItem extends BaseItem {
     _additionalConfig;
     _filter;
@@ -1178,8 +1022,8 @@ class ChipsItem extends BaseItem {
     static create(config, filter) {
         return new ChipsItem(config, null, filter);
     }
-    get isTypeChips() {
-        return true;
+    get hasValue() {
+        return this.value.length > 0;
     }
     get queryParam() {
         if (!this.hasValue) {
@@ -1201,13 +1045,6 @@ class ChipsItem extends BaseItem {
                 .join(','),
         };
     }
-    get persistanceObject() {
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = Array.isArray(value) ? value.join(',') : undefined;
-        return params;
-    }
     get chips() {
         return this.hasValue ? [
             {
@@ -1222,22 +1059,13 @@ class ChipsItem extends BaseItem {
         ] : [];
     }
     set value(value) {
-        if (Array.isArray(value)) {
-            value = value.map((val) => {
-                if (isNaN(val)) {
-                    return val;
-                }
-                return +val;
-            });
-        }
-        super.value = value;
+        super.value = Array.isArray(value) ? value : [];
     }
     get value() {
-        const value = clone(super.value);
-        if (Array.isArray(value) && value.length === 0) {
-            return undefined;
-        }
-        return value;
+        return super.value;
+    }
+    clear() {
+        this.value = [];
     }
     init(value) {
         return super.init(value)
@@ -1737,20 +1565,6 @@ class WeekItem extends BaseItem {
             [paramPeriodName]: value?.period || undefined,
         };
     }
-    get persistanceObject() {
-        const query = this.query;
-        const name = this.name;
-        const paramFromName = getRangeName(name, 'from');
-        const paramFromValue = query[paramFromName] && simpleFormat(query[paramFromName]) || query[paramFromName];
-        const paramToName = getRangeName(name, 'to');
-        const paramToValue = query[paramToName] && simpleFormat(query[paramToName]) || query[paramToName];
-        const paramPeriodName = `${name}Period`;
-        return {
-            [paramFromName]: paramFromValue,
-            [paramToName]: paramToValue,
-            [paramPeriodName]: query[paramPeriodName],
-        };
-    }
     get chips() {
         if (!this.hasValue) {
             return [];
@@ -2350,7 +2164,7 @@ class FilterController {
     _initChanges() {
         merge(...this.items
             .map((item) => item.value$
-            .pipe(map((_item) => item))))
+            .pipe(map(() => item))))
             .pipe(tap((item) => this._change$.next([item])), takeUntil(this._destroy$))
             .subscribe();
         this._change$
@@ -2373,28 +2187,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }] });
 
+class FocusControllerService {
+    _focusOn = new BehaviorSubject(null);
+    get focusOn$() {
+        return this._focusOn.asObservable();
+    }
+    click(item, type) {
+        this._focusOn.next({ item, type });
+    }
+    listenFocusFor$(targetItem, targetType) {
+        return this._focusOn
+            .pipe(filter((event) => !!event), filter(({ item, type }) => {
+            return targetItem === item && targetType === type;
+        }), tap(() => this.clearFocus()));
+    }
+    clearFocus() {
+        this._focusOn.next(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, decorators: [{
+            type: Injectable
+        }] });
+
 class FsFilterChipsComponent {
     ItemType = ItemType;
     _filterController = inject(FilterController);
+    _injector = inject(Injector);
     get items() {
         return this._filterController.items;
     }
     click(item, chip) {
-        //this._focusController.click(this.item, chip.name);
+        this._injector.get(FocusControllerService).click(item, chip.name);
     }
     remove(item, chip) {
         item.clear(chip.name);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@for (item of items; track item.name) {\n  @let chips = item.chips$ | async;\n  @if (chips.length > 0) {\n    @for (chip of chips; track chip.label) {\n      <fs-chip\n          [removable]=\"item.showClear\"\n          size=\"small\"\n          (click)=\"click(item, chip)\"\n          (removed)=\"remove(item, chip)\">\n        {{ chip.label }}: {{ chip.value }}\n      </fs-chip>\n    }\n    <!-- <fs-filter-chip\n      [chips]=\"chips\"\n      [clickable]=\"true\"\n      [removable]=\"true\">\n    </fs-filter-chip> -->\n  }\n}", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@for (item of items; track item.name) {\n  @let chips = item.chips$ | async;\n  @if (chips.length > 0) {\n    @for (chip of chips; track chip.label) {\n      <fs-chip\n          [removable]=\"item.showClear\"\n          size=\"small\"\n          (click)=\"click(item, chip)\"\n          (removed)=\"remove(item, chip)\">\n        {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n      </fs-chip>\n    }\n  }\n}", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsFilterChipComponent,
                         AsyncPipe,
                         FsChipModule,
-                    ], template: "@for (item of items; track item.name) {\n  @let chips = item.chips$ | async;\n  @if (chips.length > 0) {\n    @for (chip of chips; track chip.label) {\n      <fs-chip\n          [removable]=\"item.showClear\"\n          size=\"small\"\n          (click)=\"click(item, chip)\"\n          (removed)=\"remove(item, chip)\">\n        {{ chip.label }}: {{ chip.value }}\n      </fs-chip>\n    }\n    <!-- <fs-filter-chip\n      [chips]=\"chips\"\n      [clickable]=\"true\"\n      [removable]=\"true\">\n    </fs-filter-chip> -->\n  }\n}" }]
+                    ], template: "@for (item of items; track item.name) {\n  @let chips = item.chips$ | async;\n  @if (chips.length > 0) {\n    @for (chip of chips; track chip.label) {\n      <fs-chip\n          [removable]=\"item.showClear\"\n          size=\"small\"\n          (click)=\"click(item, chip)\"\n          (removed)=\"remove(item, chip)\">\n        {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n      </fs-chip>\n    }\n  }\n}" }]
         }] });
 
 class FsFilterDrawerActionsComponent {
@@ -3072,18 +2910,19 @@ class FsFilterSavedFilterChipsComponent {
         this.items = [...this._filterController.items]
             .filter((item) => !!this.savedFilter.filters[item.name])
             .map((item) => {
-            item.value = this.savedFilter.filters[item.name];
-            return item;
+            const object = item.clone();
+            object.setValue(this.savedFilter.filters[item.name], false);
+            return object;
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterChipsComponent, isStandalone: true, selector: "fs-saved-filter-chips", inputs: { savedFilter: "savedFilter" }, ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"], dependencies: [{ kind: "component", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item", "removable", "chips", "clickable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterChipsComponent, isStandalone: true, selector: "fs-saved-filter-chips", inputs: { savedFilter: "savedFilter" }, ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    @for (chip of item.chips; track chip.label) {\n      <fs-chip size=\"small\">\n        {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n      </fs-chip>\n    }\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-saved-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsFilterChipComponent,
-                    ], template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"] }]
+                        FsChipModule,
+                    ], template: "<div class=\"filter-chips\">\n  @for (item of items; track item.name) {\n    @for (chip of item.chips; track chip.label) {\n      <fs-chip size=\"small\">\n        {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n      </fs-chip>\n    }\n  }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"] }]
         }], propDecorators: { savedFilter: [{
                 type: Input
             }] } });
@@ -3092,14 +2931,14 @@ class FsFilterSavedFilterManageComponent {
     savedFilters;
     _savedFilterController = inject(SavedFilterController);
     _cdRef = inject(ChangeDetectorRef);
-    filterController = inject(FilterController);
+    _filterController = inject(FilterController);
     _dialogRef = inject(MatDialogRef);
     _filterOverlayService = inject(FsFilterOverlayService);
     ngOnInit() {
         this.savedFilters = this._savedFilterController.savedFilters;
     }
     get items() {
-        return this.filterController.items;
+        return this._filterController.items;
     }
     get pluralLabelLower() {
         return this._savedFilterController.pluralLabelLower;
@@ -3264,6 +3103,12 @@ const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
 
 class FilterComponent {
     keywordInput;
+    /**
+     * @deprecated Use set config instead
+     */
+    set filterConfig(value) {
+        this.config = value;
+    }
     set config(value) {
         this._config = new FsFilterConfig(value);
     }
@@ -3390,7 +3235,7 @@ class FilterComponent {
     get inlineToolbar$() {
         return combineLatest({
             keywordVisible: this.keywordVisible$,
-            activeFilter: of(this.savedFiltersController.enabled),
+            activeFilter: of(this.savedFilterController.enabled),
         })
             .pipe(map(({ keywordVisible, activeFilter }) => {
             return !keywordVisible && !activeFilter;
@@ -3409,16 +3254,7 @@ class FilterComponent {
     get menuActions$() {
         return this._actionsController.menuActions$;
     }
-    set activeSavedFilter(savedFilter) {
-        this._savedFilterController.setActiveFilter(savedFilter);
-    }
-    get activeSavedFilter() {
-        return this._savedFilterController.activeFilter;
-    }
-    get savedFilters() {
-        return this._savedFilterController.savedFilters;
-    }
-    get savedFiltersController() {
+    get savedFilterController() {
         return this._savedFilterController;
     }
     ngOnInit() {
@@ -3639,7 +3475,7 @@ class FilterComponent {
         this._filterOverlay.setDoneFn(this.hideDrawer.bind(this));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "fs-filter", inputs: { config: "config" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "fs-filter", inputs: { filterConfig: "filterConfig", config: "config" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass" } }, providers: [
             FsFilterOverlayService,
             PersistanceController,
             QueryParamController,
@@ -3649,7 +3485,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 (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\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          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-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 || ((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          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-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,
@@ -3677,10 +3513,13 @@ 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 (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\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          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-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 || ((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          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-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]
+            }], filterConfig: [{
+                type: Input,
+                args: ['filterConfig']
             }], config: [{
                 type: Input,
                 args: ['config']
@@ -4274,8 +4113,6 @@ class FsFilterModule {
             DateRangeComponent,
             CheckboxComponent,
             FilterDrawerComponent,
-            FsFilterChipComponent,
-            FsFilterChipContentComponent,
             FsFilterDrawerActionsComponent,
             FsFilterActionsComponent,
             FsFilterActionButtonComponent,
@@ -4301,7 +4138,6 @@ class FsFilterModule {
             DateRangeComponent,
             CheckboxComponent,
             FilterDrawerComponent,
-            FsFilterChipComponent,
             FsFilterDrawerActionsComponent,
             FsFilterActionsComponent,
             FsFilterActionButtonComponent,
@@ -4327,8 +4163,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DateRangeComponent,
                         CheckboxComponent,
                         FilterDrawerComponent,
-                        FsFilterChipComponent,
-                        FsFilterChipContentComponent,
                         FsFilterDrawerActionsComponent,
                         FsFilterActionsComponent,
                         FsFilterActionButtonComponent,