@firestitch/filter 18.2.31 → 18.2.33

package/fesm2022/firestitch-filter.mjs

@@ -1,7 +1,7 @@
 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 { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, Injector, EventEmitter, Output, InjectionToken, Directive, Optional, Self, ChangeDetectorRef, ViewChild, NgZone, ElementRef, ContentChild, HostBinding, 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, map as map$1, combineLatest, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, map as map$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter, 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';
@@ -772,22 +772,8 @@ function itemTypeSelect(item, param) {
         return [];
     }
     const values = param.split(',');
-    if (item.isolate) {
-        const isolatedValue = item.isolateValues;
-        item.isolate = arraysHaveSameElements(isolatedValue, values);
-        return item.isolate
-            ? isolatedValue
-            : values;
-    }
     return values;
 }
-function arraysHaveSameElements(arr1, arr2) {
-    arr1 = [...arr1].sort();
-    arr2 = [...arr2].sort();
-    return arr1.some((item) => {
-        return arr2.includes(item);
-    });
-}
 
 class BaseItem {
     _additionalConfig;
@@ -797,7 +783,7 @@ class BaseItem {
     chipLabel;
     defaultValueFn;
     defaultValue;
-    showClear;
+    clearable;
     persistanceDisabled;
     queryParamsDisabled;
     changeCallback;
@@ -980,7 +966,7 @@ class BaseItem {
         this.label = item.label;
         this.chipLabel = item.chipLabel;
         this._hidden$.next(hidden);
-        this.showClear = item.clear ?? true;
+        this.clearable = item.clear ?? true;
         this.persistanceDisabled = item.disablePersist ?? false;
         this.queryParamsDisabled = item.disableQueryParams ?? false;
         this.defaultValueFn = typeof item.default === 'function' ?
@@ -1585,7 +1571,27 @@ class SelectItem extends BaseItem {
         this.value = this.multiple ? [] : undefined;
     }
     init(value) {
-        return super.init(value);
+        return super.init(value)
+            .pipe(tap$1(() => {
+            if (this.isolate) {
+                const v = Array.isArray(value) ? value : [value];
+                this.isolated = v.some((_v) => {
+                    return this.isolateValues.includes(_v);
+                });
+            }
+        }));
+    }
+    get values$() {
+        return super.values$
+            .pipe(map$1((values) => {
+            if (!this.isolate) {
+                return values;
+            }
+            return values
+                .filter((value) => {
+                return !this.isolateValues.includes(value.value);
+            });
+        }));
     }
     setValue(value, emitChange = true) {
         if (this.multiple) {
@@ -1632,9 +1638,6 @@ class SelectItem extends BaseItem {
         }
         const options = this.flattenedValues
             .filter((item) => {
-            if (this.isolate && this.isolateValues.includes(item.value)) {
-                return true;
-            }
             return this.multiple ? this.value
                 .includes(item.value) : `${this.value}` === `${item.value}`;
         })
@@ -2038,7 +2041,9 @@ class FilterController {
         return this._items.get(name);
     }
     filtersClear() {
-        this.items.forEach((item) => {
+        this.items
+            .filter((item) => item.clearable)
+            .forEach((item) => {
             item.clear();
         });
         this._keywordController.clear();
@@ -2208,14 +2213,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  @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 });
+    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.clearable\"\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  @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}" }]
+                    ], template: "@for (item of items; track item.name) {\n  @for (chip of item.chips$ | async; track chip.label) {\n    <fs-chip\n        [removable]=\"item.clearable\"\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 {
@@ -2574,7 +2579,7 @@ class AutocompleteComponent extends BaseItemComponent {
         return this.item.valuesFn(keyword, this.item.filter);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i4.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "displayWith", "placeholder", "fetchOnFocus", "readonly", "required", "disabled", "formFieldClass", "appearance", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared", "opened", "closed"] }, { kind: "directive", type: i4.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.clearable\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteModule }, { kind: "component", type: i4.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "displayWith", "placeholder", "fetchOnFocus", "readonly", "required", "disabled", "formFieldClass", "appearance", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared", "opened", "closed"] }, { kind: "directive", type: i4.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -2583,7 +2588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FormsModule,
                         FsFormModule,
-                    ], template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>" }]
+                    ], template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.value\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.clearable\"\n    name=\"item.name\">\n  <ng-template\n      fsAutocompleteTemplate\n      let-data=\"data\">\n    {{ data.name }}\n  </ng-template>\n</fs-autocomplete>" }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
 
 class ActionsController {
@@ -3207,8 +3212,7 @@ class FilterComponent {
         return combineLatest({
             filtersVisible: this._filtersVisible$.asObservable(),
             hasVisibleItems: of(this.items
-                .filter((item) => !item.hidden && !item.isTypeKeyword)
-                .length > 0),
+                .some((item) => !item.hidden && !item.isTypeKeyword)),
         })
             .pipe(map(({ filtersVisible, hasVisibleItems }) => {
             return filtersVisible && hasVisibleItems;
@@ -3473,7 +3477,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 || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersVisible$ | async)) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [ngModel]=\"config.autoReload.enabled\"\n              (ngModelChange)=\"config.autoReload.enabled = $event\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsSavedFilterAutocompleteChipsComponent, selector: "fs-saved-filter-autocomplete-chips", inputs: ["savedFiltersController"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips" }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @if (savedFilterController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\n    <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersVisible$ | async)) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [ngModel]=\"config.autoReload.enabled\"\n              (ngModelChange)=\"config.autoReload.enabled = $event\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .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,
@@ -3501,7 +3505,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 || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersVisible$ | async)) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [ngModel]=\"config.autoReload.enabled\"\n              (ngModelChange)=\"config.autoReload.enabled = $event\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
+                    ], template: "<div class=\"filter-container\">\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (notInlineToolbar$ | async) {\n      <div class=\"filter-inner-inputs\">\n        @if (keywordVisible$ | async) {\n          <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n        }\n        @if (savedFilterController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips) {\n    <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || (filtersVisible$ | async)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersVisible$ | async)) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"filterButtonClick($event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n          }\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [ngModel]=\"config.autoReload.enabled\"\n              (ngModelChange)=\"config.autoReload.enabled = $event\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end;margin:3px 0}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .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]
@@ -3572,7 +3576,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         action.click(filterComponent);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [ngModel]=\"value\"\n    (selected)=\"selected($event)\"\n    (removed)=\"removed($event)\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [label]=\"label\"\n    [size]=\"'small'\"\n    [chipImage]=\"item.chipImage\"\n    [chipColor]=\"item.chipColor\"\n    [chipIconColor]=\"item.chipIcon\"\n    [chipBackground]=\"item.chipBackground\"\n    [chipIcon]=\"item.chipIcon\"\n    [chipClass]=\"item.chipClass\"\n    [allowClear]=\"item.showClear\"\n    [removable]=\"item.showClear\"\n    [compareWith]=\"compareItems\"\n    [panelWidth]=\"300\"\n    name=\"model\">\n  <ng-template\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"actionClick(action)\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompletechipsComponent, isStandalone: true, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [ngModel]=\"value\"\n    (selected)=\"selected($event)\"\n    (removed)=\"removed($event)\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [label]=\"label\"\n    [size]=\"'small'\"\n    [chipImage]=\"item.chipImage\"\n    [chipColor]=\"item.chipColor\"\n    [chipIconColor]=\"item.chipIcon\"\n    [chipBackground]=\"item.chipBackground\"\n    [chipIcon]=\"item.chipIcon\"\n    [chipClass]=\"item.chipClass\"\n    [allowClear]=\"item.clearable\"\n    [removable]=\"item.clearable\"\n    [compareWith]=\"compareItems\"\n    [panelWidth]=\"300\"\n    name=\"model\">\n  <ng-template\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"actionClick(action)\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>", dependencies: [{ kind: "ngmodule", type: FsAutocompleteChipsModule }, { kind: "component", type: i1$3.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipMargin", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "chipPadding", "shape", "hint", "allowText", "allowObject", "delay", "minPanelWidth", "validateText", "removable", "allowClear", "color", "background", "orderable", "padless", "initOnClick", "fetchOnFocus", "multiple", "multipleAdd", "confirm", "disabled", "groupBy", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i1$3.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i1$3.FsAutocompleteChipsStaticDirective, selector: "[fsAutocompleteChipsStatic]", inputs: ["show", "disable"], outputs: ["click", "selected"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
@@ -3581,7 +3585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FormsModule,
                         FsFormModule,
-                    ], template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [ngModel]=\"value\"\n    (selected)=\"selected($event)\"\n    (removed)=\"removed($event)\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [label]=\"label\"\n    [size]=\"'small'\"\n    [chipImage]=\"item.chipImage\"\n    [chipColor]=\"item.chipColor\"\n    [chipIconColor]=\"item.chipIcon\"\n    [chipBackground]=\"item.chipBackground\"\n    [chipIcon]=\"item.chipIcon\"\n    [chipClass]=\"item.chipClass\"\n    [allowClear]=\"item.showClear\"\n    [removable]=\"item.showClear\"\n    [compareWith]=\"compareItems\"\n    [panelWidth]=\"300\"\n    name=\"model\">\n  <ng-template\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"actionClick(action)\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>" }]
+                    ], template: "<fs-autocomplete-chips\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [ngModel]=\"value\"\n    (selected)=\"selected($event)\"\n    (removed)=\"removed($event)\"\n    (clear)=\"clear()\"\n    [allowText]=\"false\"\n    [label]=\"label\"\n    [size]=\"'small'\"\n    [chipImage]=\"item.chipImage\"\n    [chipColor]=\"item.chipColor\"\n    [chipIconColor]=\"item.chipIcon\"\n    [chipBackground]=\"item.chipBackground\"\n    [chipIcon]=\"item.chipIcon\"\n    [chipClass]=\"item.chipClass\"\n    [allowClear]=\"item.clearable\"\n    [removable]=\"item.clearable\"\n    [compareWith]=\"compareItems\"\n    [panelWidth]=\"300\"\n    name=\"model\">\n  <ng-template\n      fsAutocompleteObject\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  @for (action of item.panelActions; track action.label) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"actionClick(action)\">\n      {{ action.label }}\n    </ng-template>\n  }\n</fs-autocomplete-chips>" }]
         }] });
 
 class CheckboxComponent extends BaseItemComponent {
@@ -3662,7 +3666,7 @@ class DateRangeComponent extends BaseItemComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>\n    {{ item.label[0] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"from\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    (ngModelChange)=\"change()\"\n    name=\"date_from\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>\n    {{ item.label[1] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"to\"\n    (ngModelChange)=\"change()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$2.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i3$2.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeComponent, isStandalone: true, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>\n    {{ item.label[0] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"from\"\n    [clear]=\"item.clearable\"\n    [view]=\"viewType\"\n    (ngModelChange)=\"change()\"\n    name=\"date_from\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>\n    {{ item.label[1] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"to\"\n    (ngModelChange)=\"change()\"\n    [clear]=\"item.clearable\"\n    [view]=\"viewType\"\n    name=\"date_to\">\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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$2.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { kind: "component", type: i3$2.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
@@ -3674,7 +3678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FocusToItemDirective,
                         FsDatePickerModule,
                         FsFormModule,
-                    ], template: "<mat-form-field>\n  <mat-label>\n    {{ item.label[0] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"from\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    (ngModelChange)=\"change()\"\n    name=\"date_from\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>\n    {{ item.label[1] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"to\"\n    (ngModelChange)=\"change()\"\n    [clear]=\"item.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>" }]
+                    ], template: "<mat-form-field>\n  <mat-label>\n    {{ item.label[0] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"from\"\n    [clear]=\"item.clearable\"\n    [view]=\"viewType\"\n    (ngModelChange)=\"change()\"\n    name=\"date_from\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>\n    {{ item.label[1] }}\n  </mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"to\"\n    (ngModelChange)=\"change()\"\n    [clear]=\"item.clearable\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>" }]
         }] });
 
 class DateComponent extends BaseItemComponent {
@@ -3700,7 +3704,7 @@ class DateComponent extends BaseItemComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [clear]=\"item.showClear\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.showClear\"\n      [name]=\"item.name\">\n  </mat-form-field>\n}", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$2.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i3$2.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { 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: "17.0.0", version: "18.2.13", type: DateComponent, isStandalone: true, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n}", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i3$2.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i3$2.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "showMonth", "showYear", "showDay"] }, { 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: DateComponent, decorators: [{
             type: Component,
@@ -3712,7 +3716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsDatePickerModule,
                         FocusToItemDirective,
                         FsFormModule,
-                    ], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [clear]=\"item.showClear\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.showClear\"\n      [name]=\"item.name\">\n  </mat-form-field>\n}" }]
+                    ], template: "@if (item.mode === itemDateMode.ScrollMonthDayYear || item.mode === itemDateMode.ScrollMonthYear) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDateScrollPicker\n      [placeholder]=\"item.label\"\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [showMonth]=\"showMonth\"\n      [showDay]=\"showDay\"\n      [showYear]=\"showYear\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n} @else if (item.mode === itemDateMode.Calendar) {\n  <mat-form-field>\n    <mat-label>\n      {{ item.label }}\n    </mat-label>\n    <input\n      matInput\n      fsDatePicker\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"item.value = value\"\n      [maxYear]=\"item.maxYear\"\n      [view]=\"viewType\"\n      [placeholder]=\"item.label\"\n      [clear]=\"item.clearable\"\n      [name]=\"item.name\">\n  </mat-form-field>\n}" }]
         }] });
 
 class RangeComponent extends BaseItemComponent {
@@ -3759,36 +3763,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], template: "<div class=\"form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>\n      {{ item.label[0] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'from'\"\n      type=\"number\"\n      [(ngModel)]=\"min\"\n      (ngModelChange)=\"change()\"\n      #from>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>\n      {{ item.label[1] }}\n    </mat-label>\n    @if (item.prefix) {\n      <span\n        matTextPrefix\n        class=\"text-prefix\"\n        [innerHtml]=\"item.prefix\">\n      </span>\n    }\n    <input\n      matInput\n      [fsFilterFocusTrigger]=\"item\"\n      [focusTargetType]=\"'to'\"\n      type=\"number\"\n      [(ngModel)]=\"max\"\n      (ngModelChange)=\"change()\"\n      #to>\n    @if (item.suffix) {\n      <span\n        matSuffix\n        class=\"text-suffix\"\n        [innerHtml]=\"item.suffix\">\n      </span>\n    }\n  </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"] }]
         }] });
 
-class FsFilterIsolateValues {
-    transform(values, isolate) {
-        if (!isolate) {
-            return values;
-        }
-        return values.filter((value) => {
-            return value.value !== isolate.value;
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, isStandalone: true, name: "fsFilterIsolateValues" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterIsolateValues, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'fsFilterIsolateValues',
-                    standalone: true,
-                }]
-        }] });
-
 class SelectComponent {
     item;
     select;
     value;
-    isolated;
     _cdRef = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
     changed() {
-        this.item.value = this.value;
-        this.isolated = false;
+        let value = this.value;
+        if (this.item.isolate) {
+            if (this.item.multiple) {
+                value = value.filter((v) => {
+                    return !this.item.isolateValues.includes(v.value);
+                });
+            }
+            this.item.isolated = false;
+        }
+        this.item.value = value;
     }
     ngOnInit() {
         this.item.value$
@@ -3813,7 +3804,7 @@ class SelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        <mat-optgroup [label]=\"option.name\">\n          @for (childOption of option[item.children] | fsFilterIsolateValues: item.isolate; track childOption.value) {\n            <mat-option [value]=\"childOption.value\">\n              {{ childOption.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    } @else {\n      @for (option of item.values$ | async | fsFilterIsolateValues: item.isolate; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n          (change)=\"isolateChange($event)\"\n          [(ngModel)]=\"isolated\">\n        <span class=\"checkbox-label\">\n          {{ item.isolateLabel }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: FsFilterIsolateValues, name: "fsFilterIsolateValues" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        <mat-optgroup [label]=\"option.name\">\n          @for (childOption of option[item.children]; track childOption.value) {\n            <mat-option [value]=\"childOption.value\">\n              {{ childOption.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n          (change)=\"isolateChange($event)\"\n          [(ngModel)]=\"item.isolated\">\n        <span class=\"checkbox-label\">\n          {{ item.isolateLabel }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -3829,9 +3820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatOptgroup,
                         MatHint,
                         MatCheckbox,
-                        FsFilterIsolateValues,
                         AsyncPipe,
-                    ], template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        <mat-optgroup [label]=\"option.name\">\n          @for (childOption of option[item.children] | fsFilterIsolateValues: item.isolate; track childOption.value) {\n            <mat-option [value]=\"childOption.value\">\n              {{ childOption.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    } @else {\n      @for (option of item.values$ | async | fsFilterIsolateValues: item.isolate; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n          (change)=\"isolateChange($event)\"\n          [(ngModel)]=\"isolated\">\n        <span class=\"checkbox-label\">\n          {{ item.isolateLabel }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
+                    ], template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"item\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        <mat-optgroup [label]=\"option.name\">\n          @for (childOption of option[item.children]; track childOption.value) {\n            <mat-option [value]=\"childOption.value\">\n              {{ childOption.name }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n          (change)=\"isolateChange($event)\"\n          [(ngModel)]=\"item.isolated\">\n        <span class=\"checkbox-label\">\n          {{ item.isolateLabel }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], select: [{
@@ -3894,7 +3884,7 @@ class WeekComponent extends BaseItemComponent {
         });
     }
     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)=\"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 });
+    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.clearable\"\n    [name]=\"item.name\">\n</mat-form-field>", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: 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,
@@ -3906,7 +3896,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)=\"item.value = value\"\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.clearable\"\n    [name]=\"item.name\">\n</mat-form-field>" }]
         }] });
 
 class FilterItemComponent {
@@ -4103,8 +4093,7 @@ class FsFilterModule {
             FsFilterActionButtonComponent,
             FsFilterActionKebabActionsComponent,
             FilterStatusBarDirective,
-            FocusToItemDirective,
-            FsFilterIsolateValues], exports: [FilterComponent,
+            FocusToItemDirective], exports: [FilterComponent,
             FilterStatusBarDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterModule, providers: [
             FsStore,
@@ -4154,7 +4143,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsFilterActionKebabActionsComponent,
                         FilterStatusBarDirective,
                         FocusToItemDirective,
-                        FsFilterIsolateValues,
                     ],
                     providers: [
                         FsStore,