@firestitch/filter 18.2.0 → 18.2.2

package/fesm2022/firestitch-filter.mjs

@@ -4146,6 +4146,9 @@ class FsSavedFilterAutocompleteChipsComponent {
     get labelIcon() {
         return this.savedFiltersController.labelIcon;
     }
+    compareWith = (o1, o2) => {
+        return o1?.id === o2?.id;
+    };
     selectFilter(savedFilter) {
         this._paramController.setActiveSavedFilter(savedFilter);
     }
@@ -4214,14 +4217,14 @@ class FsSavedFilterAutocompleteChipsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsSavedFilterAutocompleteChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsSavedFilterAutocompleteChipsComponent, isStandalone: true, selector: "fs-saved-filter-autocomplete-chips", inputs: { savedFiltersController: "savedFiltersController" }, ngImport: i0, template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"], 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: i1$3.FsAutocompleteChipsPrefixDirective, selector: "[fsAutocompleteChipsPrefix]", inputs: ["icon"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsSavedFilterAutocompleteChipsComponent, isStandalone: true, selector: "fs-saved-filter-autocomplete-chips", inputs: { savedFiltersController: "savedFiltersController" }, ngImport: i0, template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [compareWith]=\"compareWith\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"], 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: i1$3.FsAutocompleteChipsPrefixDirective, selector: "[fsAutocompleteChipsPrefix]", inputs: ["icon"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsSavedFilterAutocompleteChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-saved-filter-autocomplete-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FsAutocompleteChipsModule,
                         FormsModule,
-                    ], template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"] }]
+                    ], template: "<fs-autocomplete-chips\n    [fetch]=\"fetch\"\n    [size]=\"'small'\"\n    [multiple]=\"false\"\n    [placeholder]=\"pluralLabel\"\n    [(ngModel)]=\"selectedFilter\"\n    [compareWith]=\"compareWith\"\n    [panelClass]=\"'fs-autocomplete-chips-panel-saved-filter'\"\n    (ngModelChange)=\"selectedFilterChange($event)\">\n  <ng-template\n      fsAutocompleteChipsTemplate\n      let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n  <ng-template\n    fsAutocompleteChipsPrefix\n    [icon]=\"labelIcon\">\n  </ng-template>\n  @if (selectedFilter) {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"save()\">\n      Save alert filters\n    </ng-template>\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"saveAs()\">\n      Save as new alert\n    </ng-template>\n  } @else {\n    <ng-template\n        fsAutocompleteChipsStatic\n        (click)=\"create()\">\n      Create alert\n    </ng-template>\n  }\n  <ng-template\n      fsAutocompleteChipsStatic\n      (click)=\"manageFilters()\">\n    Manage {{ pluralLabelLower }}\n  </ng-template>\n</fs-autocomplete-chips>", styles: ["fs-autocomplete-chips{width:200px;display:flex;margin-right:5px}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline{margin:0}fs-autocomplete-chips ::ng-deep .prefix-icon{color:#626262}fs-autocomplete-chips ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .fs-autocomplete-chips-panel-saved-filter{max-height:400px!important}\n"] }]
         }], propDecorators: { savedFiltersController: [{
                 type: Input
             }] } });
@@ -4333,16 +4336,23 @@ class FilterComponent {
     get filtersBtnVisible$() {
         return this._filtersBtnVisible$.asObservable();
     }
-    get keywordVisible$() {
-        return this._keywordVisible$.asObservable()
-            .pipe(map((visible) => {
-            return visible && this._itemStore.hasKeyword;
+    get inlineToolbar$() {
+        return combineLatest({
+            keywordVisible: this._keywordVisible$.asObservable(),
+            activeFilter: of(this.savedFiltersController.enabled),
+        })
+            .pipe(map(({ keywordVisible, activeFilter }) => {
+            return !(keywordVisible && this._itemStore.hasKeyword) && !activeFilter;
         }));
     }
-    get keywordNotVisible$() {
+    get notInlineToolbar$() {
+        return this.inlineToolbar$
+            .pipe(map((inline) => !inline));
+    }
+    get keywordVisible$() {
         return this._keywordVisible$.asObservable()
             .pipe(map((visible) => {
-            return !visible;
+            return visible && this._itemStore.hasKeyword;
         }));
     }
     get actionsVisible$() {
@@ -4782,7 +4792,7 @@ class FilterComponent {
             ItemStore,
             SavedFilterController,
             ActionsController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n  @if (keywordVisible$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (keywordVisible$ | async) {\n      <div class=\"filter-keyword\">\n        <mat-form-field\n            class=\"search-form-field form-field-padless\"\n            [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n          <span\n              matPrefix\n              class=\"icon\">\n            <mat-icon matPrefix>\n              search\n            </mat-icon>\n          </span>\n          <input\n            #keywordMatInput\n            matInput\n            [(ngModel)]=\"keyword\"\n            (ngModelChange)=\"keywordChange($event)\"\n            name=\"filter-input\"\n            [fsClear]=\"true\"\n            [placeholder]=\"searchPlaceholder\">\n        </mat-form-field>\n      </div>\n    } @else {\n      <div>\n        @if (keywordNotVisible$ | async) {\n          <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    @if (savedFiltersController.enabled) {\n      <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (keywordVisible$ | 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 && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: i3$3.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { 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          <mat-form-field\n              class=\"search-form-field form-field-padless\"\n              [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n            <span\n                matPrefix\n                class=\"icon\">\n              <mat-icon matPrefix>\n                search\n              </mat-icon>\n            </span>\n            <input\n              #keywordMatInput\n              matInput\n              [(ngModel)]=\"keyword\"\n              (ngModelChange)=\"keywordChange($event)\"\n              name=\"filter-input\"\n              [fsClear]=\"true\"\n              [placeholder]=\"searchPlaceholder\">\n          </mat-form-field>\n        }\n        @if (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: i3$3.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -4811,7 +4821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconAnchor,
                         MatSlideToggle,
                         AsyncPipe,
-                    ], template: "<div class=\"filter-container\">\n  @if (keywordVisible$ | async) {\n    <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n  }\n  <div class=\"filter-inner-container\">\n    @if (keywordVisible$ | async) {\n      <div class=\"filter-keyword\">\n        <mat-form-field\n            class=\"search-form-field form-field-padless\"\n            [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n          <span\n              matPrefix\n              class=\"icon\">\n            <mat-icon matPrefix>\n              search\n            </mat-icon>\n          </span>\n          <input\n            #keywordMatInput\n            matInput\n            [(ngModel)]=\"keyword\"\n            (ngModelChange)=\"keywordChange($event)\"\n            name=\"filter-input\"\n            [fsClear]=\"true\"\n            [placeholder]=\"searchPlaceholder\">\n        </mat-form-field>\n      </div>\n    } @else {\n      <div>\n        @if (keywordNotVisible$ | async) {\n          <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    @if (savedFiltersController.enabled) {\n      <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (keywordVisible$ | 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 && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.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          <mat-form-field\n              class=\"search-form-field form-field-padless\"\n              [ngClass]=\"{\n                'has-keyword': !!keyword\n              }\">\n            <span\n                matPrefix\n                class=\"icon\">\n              <mat-icon matPrefix>\n                search\n              </mat-icon>\n            </span>\n            <input\n              #keywordMatInput\n              matInput\n              [(ngModel)]=\"keyword\"\n              (ngModelChange)=\"keywordChange($event)\"\n              name=\"filter-input\"\n              [fsClear]=\"true\"\n              [placeholder]=\"searchPlaceholder\">\n          </mat-form-field>\n        }\n        @if (savedFiltersController.enabled) {\n          <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFiltersController\"></fs-saved-filter-autocomplete-chips>\n        }\n      </div>\n    } @else {\n      <div>\n        <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  @if (notInlineToolbar$ | async) {\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  }\n</div>\n<ng-template #filterStatusBarChips>\n  @if (statusBar) {\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n  @if (config.chips && hasFilterChips$ | async) {\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  }\n</ng-template>\n<ng-template #filterActions>\n  @if (actionsVisible$ | async) {\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  }\n</ng-template>\n<ng-template #filterToolbar>\n  @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n    <div class=\"filter-toolbar\">\n      @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n      @if (config.reload) {\n        <a\n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"button-reload\">\n          <mat-icon #reloadEl>\n            refresh\n          </mat-icon>\n        </a>\n      }\n      @if (config.autoReload) {\n        <div class=\"filter-reload\">\n          @if (config.autoReload) {\n            <mat-slide-toggle\n                name=\"autoReload\"\n                class=\"auto-reload\"\n                [(ngModel)]=\"autoReload\">\n              <span>\n                Auto refresh\n              </span>\n            </mat-slide-toggle>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n<ng-template #heading>\n  @if (config.heading) {\n    <div class=\"heading\">\n      <h2>\n        {{ config.heading }}\n      </h2>\n      <div class=\"subheading\">\n        {{ config.subheading }}\n      </div>\n    </div>\n  }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-inner-inputs mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { setConfig: [{
                 type: Input,
                 args: ['config']