@firestitch/filter 18.2.14 → 18.2.16

package/fesm2022/firestitch-filter.mjs

@@ -1,8 +1,8 @@
 import * as i0 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, 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 { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter, map as map$1, combineLatest, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { distinctUntilChanged, tap, switchMap, map, debounceTime, finalize, takeUntil, filter as filter$1, 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';
@@ -24,15 +24,15 @@ import * as i6 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import * as i1$2 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
-import { isFunction, clone, toString, isObject, isString } from 'lodash-es';
+import { isFunction, clone, toString, isObject } 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';
 import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$5 from '@angular/material/dialog';
 import { MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { getNormalizedPath } from '@firestitch/common';
 import { DrawerRef } from '@firestitch/drawer';
 import { ActivatedRoute } from '@angular/router';
 import { FsMessage } from '@firestitch/message';
@@ -166,7 +166,8 @@ class SavedFilterController {
                 };
             }, {}),
         };
-        return this._filterController.config.savedFilters.save(savedFilter)
+        return this._filterController.config.savedFilters
+            .save(savedFilter)
             .pipe(tap((_savedFilter) => {
             this.savedFilters = this.activeFilter?.id ? this.savedFilters
                 .map((f) => f.id === savedFilter.id ? _savedFilter : f) : [
@@ -180,7 +181,8 @@ class SavedFilterController {
         return !!this._filterController.config.savedFilters.order;
     }
     order(savedFilters) {
-        return this._filterController.config.savedFilters.order(savedFilters)
+        return this._filterController.config.savedFilters
+            .order(savedFilters)
             .pipe(tap(() => {
             this.savedFilters = [
                 ...savedFilters,
@@ -188,7 +190,8 @@ class SavedFilterController {
         }));
     }
     delete(savedFilter) {
-        return this._filterController.config.savedFilters.delete(savedFilter)
+        return this._filterController.config.savedFilters
+            .delete(savedFilter)
             .pipe(tap(() => {
             this.savedFilters = this.savedFilters
                 .filter((f) => f.id !== savedFilter.id);
@@ -204,9 +207,7 @@ class SavedFilterController {
             if (!existingFilter) {
                 throw new Error(`Saved filter cannot be activated, because it does not exists. Filter ID = ${savedFilter.id}`);
             }
-            this._filterController.changeTransaction(() => {
-                this._filterController.values = existingFilter.filters;
-            });
+            this._filterController.values = existingFilter.filters;
             this._activeFilter$.next(existingFilter);
         }
         else {
@@ -658,7 +659,6 @@ class BaseItem {
     _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;
@@ -729,7 +729,7 @@ class BaseItem {
     }
     get chips$() {
         return this.value$
-            .pipe(map(() => this.chips));
+            .pipe(map(() => this.chips || []));
     }
     set values(values) {
         this._values$.next(values);
@@ -738,12 +738,14 @@ class BaseItem {
         return this._values$.getValue();
     }
     get values$() {
-        return this._values$.asObservable()
-            .pipe(filter(() => this._emitChange));
+        return this._values$.asObservable();
+    }
+    get valueEvent$() {
+        return this._value$.asObservable();
     }
     get value$() {
         return this._value$.asObservable()
-            .pipe(filter((event) => event.emitChange), map((event) => event.value));
+            .pipe(map((event) => event.value));
     }
     get value() {
         return this._value$.getValue().value;
@@ -800,11 +802,11 @@ class BaseItem {
         }), tap((values) => this.values = values || []));
     }
     initValue(value) {
-        this.value = value === undefined ? this.defaultValue : value;
+        this.setValue(value === undefined ? this.defaultValue : value);
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     clear(name = null) {
-        this.value = this.defaultValue ?? undefined;
+        this.setValue(this.defaultValue ?? undefined);
     }
     destroy() {
         this._destroy$.next(null);
@@ -915,11 +917,8 @@ class AutocompleteChipsItem extends BaseAutocompleteItem {
     get hasValue() {
         return Array.isArray(super.value) && super.value.length > 0;
     }
-    get value() {
-        return super.value || [];
-    }
-    set value(value) {
-        super.value = value || [];
+    setValue(value, emitChange = true) {
+        super.setValue(Array.isArray(value) ? value : [], emitChange);
     }
 }
 
@@ -1058,33 +1057,12 @@ class ChipsItem extends BaseItem {
             },
         ] : [];
     }
-    set value(value) {
-        super.value = Array.isArray(value) ? value : [];
-    }
-    get value() {
-        return super.value;
+    setValue(value, emitChange = true) {
+        super.setValue(Array.isArray(value) ? value : [], emitChange);
     }
     clear() {
         this.value = [];
     }
-    init(value) {
-        return super.init(value)
-            .pipe(tap$1(() => {
-            if (!Array.isArray(this.values)) {
-                this.values = [];
-            }
-            if (super.value && Array.isArray(super.value) && this.values.length) {
-                if (Number.isInteger(super.value[0])) {
-                    super.value = super.value.map((id) => {
-                        return this.values.find((item) => item.value === id);
-                    });
-                }
-            }
-            if (super.value === undefined) {
-                super.value = [];
-            }
-        }));
-    }
 }
 
 class BaseDateItem extends BaseItem {
@@ -1099,16 +1077,13 @@ class BaseDateItem extends BaseItem {
         this.maxYear = itemConfig.maxYear;
         this.mode = itemConfig.mode || ItemDateMode.Calendar;
     }
-    set value(value) {
+    setValue(value, emitChange = true) {
         if (value) {
             if (!isDate(value) || !isValid(value)) {
                 value = parseISO(value);
             }
         }
-        super.value = value;
-    }
-    get value() {
-        return super.value;
+        super.setValue(value, emitChange);
     }
 }
 
@@ -1155,10 +1130,7 @@ class BaseDateRangeItem extends BaseItem {
     get hasValue() {
         return this.value?.from instanceof Date || this.value?.to instanceof Date;
     }
-    get value() {
-        return super.value;
-    }
-    set value(value) {
+    setValue(value, emitChange = true) {
         let from = value?.from;
         let to = value?.to;
         if (value) {
@@ -1169,7 +1141,7 @@ class BaseDateRangeItem extends BaseItem {
                 to = parseISO(to);
             }
         }
-        super.value = { from, to };
+        super.setValue({ from, to }, emitChange);
     }
     get queryParam() {
         if (!this.hasValue) {
@@ -1323,18 +1295,15 @@ class RangeItem extends BaseItem {
         }
         this.value = { ...value };
     }
-    get value() {
-        return {
-            min: super.value?.min,
-            max: super.value?.max,
-        };
-    }
-    set value(value) {
-        super.value = value;
-    }
     get hasValue() {
         return this.value?.min !== undefined || super.value?.max !== undefined;
     }
+    setValue(value, emitChange = true) {
+        super.setValue({
+            min: value?.min,
+            max: value?.max,
+        }, emitChange);
+    }
     init(value) {
         return super.init(value)
             .pipe(tap$1(() => {
@@ -1381,14 +1350,14 @@ class SelectItem extends BaseItem {
             }
         }));
     }
-    get value() {
+    setValue(value, emitChange = true) {
         if (this.multiple) {
-            return Array.isArray(super.value) ? super.value : [];
+            value = Array.isArray(value) ? value : [];
         }
-        return super.value;
-    }
-    set value(value) {
-        super.value = value;
+        else {
+            value = Array.isArray(value) ? undefined : value;
+        }
+        super.setValue(value, emitChange);
     }
     get queryParam() {
         if (!this.hasValue) {
@@ -1511,47 +1480,13 @@ class WeekItem extends BaseItem {
     static create(config, filter) {
         return new WeekItem(config, null, filter);
     }
-    get value() {
-        let value = clone(super.value);
-        if (!isObject(value) ||
-            (isEmpty(value.from, { zero: true }) && isEmpty(value.to, { zero: true }))) {
-            value = undefined;
-        }
-        if (isEmpty(value, { zero: true })) {
-            return undefined;
-        }
-        let from = value.from;
-        let to = value.to;
-        const period = value.period;
-        value = {};
-        if (from) {
-            if (isString(from)) {
-                from = parseISO(from);
-            }
-            if (isValid(from) && isDate(from)) {
-                value.from = from;
-            }
-        }
-        if (to) {
-            if (isString(to)) {
-                to = parseISO(to);
-            }
-            if (isValid(to) && isDate(to)) {
-                value.to = to;
-            }
-        }
-        if (period) {
-            value.period = isString(period) ? parseInt(period, 10) : period;
-        }
-        return value;
-    }
-    set value(value) {
+    setValue(value, emitChange = true) {
         if (value) {
             value.from = parseDate(value.from);
             value.to = parseDate(value.to);
             value.period = parseInt(value.period, 10) || undefined;
         }
-        super.value = value;
+        super.setValue(value, emitChange);
     }
     get query() {
         const value = this.value;
@@ -1944,7 +1879,7 @@ class QueryParamController {
         this._filterController = filterController;
         this._enabled = this._filterController.config.queryParam;
         merge(this._filterController.change$, this._filterController.init$)
-            .pipe(filter$1(() => this.enabled), tap$1(() => this.updateQueryParams()), takeUntilDestroyed(this._destroyRef))
+            .pipe(filter(() => this.enabled), tap$1(() => this.updateQueryParams()), takeUntilDestroyed(this._destroyRef))
             .subscribe();
         return of(null);
     }
@@ -2003,7 +1938,6 @@ class FilterController {
     _queryParamController = inject(QueryParamController);
     _keywordController = inject(KeywordController);
     _sortController = inject(SortController);
-    _emitChange = true;
     get items() {
         return Array.from(this._items.values());
     }
@@ -2051,20 +1985,12 @@ class FilterController {
     getItem(name) {
         return this._items.get(name);
     }
-    changeTransaction(fn) {
-        this._emitChange = false;
-        fn();
-        this._emitChange = true;
-        this._change$.next(null);
-    }
     filtersClear() {
-        this.changeTransaction(() => {
-            this.items.forEach((item) => {
-                item.clear();
-            });
-            this._keywordController.clear();
-            this._sortController.clear();
+        this.items.forEach((item) => {
+            item.clear();
         });
+        this._keywordController.clear();
+        this._sortController.clear();
     }
     get queryParam() {
         return this.items
@@ -2088,11 +2014,10 @@ class FilterController {
         };
     }
     set values(values) {
-        this.changeTransaction(() => {
-            this.items.forEach((item) => {
-                item.value = values[item.name];
-            });
+        this.items.forEach((item) => {
+            item.setValue(values[item.name], false);
         });
+        this.change();
     }
     get values() {
         return this.items
@@ -2163,12 +2088,12 @@ class FilterController {
     }
     _initChanges() {
         merge(...this.items
-            .map((item) => item.value$
-            .pipe(map(() => item))))
+            .map((item) => item.valueEvent$
+            .pipe(filter$1((event) => event.emitChange), map(() => item))))
             .pipe(tap((item) => this._change$.next([item])), takeUntil(this._destroy$))
             .subscribe();
         this._change$
-            .pipe(filter(() => this._emitChange), tap((items) => {
+            .pipe(tap((items) => {
             if (this._config.change) {
                 this._config.change(this.query, this._sortController.getSort());
             }
@@ -2197,7 +2122,7 @@ class FocusControllerService {
     }
     listenFocusFor$(targetItem, targetType) {
         return this._focusOn
-            .pipe(filter((event) => !!event), filter(({ item, type }) => {
+            .pipe(filter$1((event) => !!event), filter$1(({ item, type }) => {
             return targetItem === item && targetType === type;
         }), tap(() => this.clearFocus()));
     }
@@ -2225,14 +2150,14 @@ class FsFilterChipsComponent {
         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.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 });
+    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  @for (chip of item.chips$ | async; 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}", 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: [
                         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.value ? chip.label + ': ' + chip.value : chip.label }}\n      </fs-chip>\n    }\n  }\n}" }]
+                    ], template: "@for (item of items; track item.name) {\n  @for (chip of item.chips$ | async; 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}" }]
         }] });
 
 class FsFilterDrawerActionsComponent {
@@ -2392,7 +2317,7 @@ class FsFilterOverlayService {
     }
     _openWhenChipClicked() {
         this._focusController.focusOn$
-            .pipe(filter((v) => !!v), takeUntil(this._destroy$))
+            .pipe(filter$1((v) => !!v), takeUntil(this._destroy$))
             .subscribe(() => {
             if (!this.isOpened) {
                 this.open();
@@ -2770,7 +2695,10 @@ class FsFilterConfig {
             init: data.init,
             change: data.change,
             reload: data.reload,
-            autoReload: data.autoReload,
+            autoReload: {
+                ...data.autoReload,
+                enabled: data.autoReload ? data.autoReload.enabled ?? true : false,
+            },
             clear: data.clear,
             sortChange: data.sortChange,
             case: data.case ?? 'camel',
@@ -3217,9 +3145,6 @@ class FilterComponent {
         return this._filterController.items
             .filter((item) => !item.hidden);
     }
-    get autoReload() {
-        return !!this.config.autoReload;
-    }
     get hasFilterChips$() {
         return this._hasFilterChips$.asObservable();
     }
@@ -3424,7 +3349,7 @@ class FilterComponent {
     _listenEscButton() {
         this._zone.runOutsideAngular(() => {
             fromEvent(window, 'keyup')
-                .pipe(filter((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
+                .pipe(filter$1((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this._zone.run(() => {
                     this.hideDrawer();
@@ -3454,7 +3379,7 @@ class FilterComponent {
     _initAutoReload() {
         if (this.config.autoReload) {
             interval(this.config.autoReload.seconds * 1000)
-                .pipe(filter(() => this.autoReload), takeUntil(this._destroy$))
+                .pipe(filter$1(() => this.config.autoReload.enabled), takeUntil(this._destroy$))
                 .subscribe(() => {
                 this.reload(null);
             });
@@ -3485,7 +3410,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          @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          <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}.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,
@@ -3513,7 +3438,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          @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          <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}.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]
@@ -3608,7 +3533,7 @@ class CheckboxComponent extends BaseItemComponent {
         });
     }
     change() {
-        this.item.value = this.value;
+        this.item.setValue(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0, template: "<fs-label-field>\n  <mat-checkbox\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"change()\"\n      [name]=\"item.name\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>", styles: ["fs-label-field{margin:0 0 -12px -8px}\n"], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3905,11 +3830,8 @@ class WeekComponent extends BaseItemComponent {
             this._cdRef.detectChanges();
         });
     }
-    change() {
-        this.item.value = this.value;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <input\n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"change()\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$2.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WeekComponent, isStandalone: true, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <input\n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"item.value = value\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$2.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WeekComponent, decorators: [{
             type: Component,
@@ -3921,7 +3843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsDatePickerModule,
                         FocusToItemDirective,
                         FsFormModule,
-                    ], template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <input\n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"change()\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>" }]
+                    ], template: "<mat-form-field>\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <input\n    matInput\n    fsDateWeekPicker\n    [placeholder]=\"item.label\"\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"item.value = value\"\n    [seedDate]=\"item.seedDate\"\n    [clear]=\"item.showClear\"\n    [name]=\"item.name\">\n</mat-form-field>" }]
         }] });
 
 class FilterItemComponent {