@firestitch/filter 18.0.4 → 18.0.6

package/fesm2022/firestitch-filter.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, ViewChild, Pipe, HostListener, ElementRef, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, ViewChild, Pipe, HostListener, inject, ElementRef, ContentChild, HostBinding, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, fromEvent, merge, interval } from 'rxjs';
 import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, mapTo, startWith, map, delay, skip } from 'rxjs/operators';
 import { filter, isArrayEqual, list, isEmpty, getNormalizedPath, remove, FsCommonModule } from '@firestitch/common';
@@ -37,7 +37,7 @@ import * as i6$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i2$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
 import * as i12 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -64,6 +64,7 @@ import * as i5$2 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import * as i1$3 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$4 from '@angular/cdk/layout';
 import * as i3$5 from '@firestitch/html';
 
@@ -1474,6 +1475,13 @@ var ButtonStyle;
     ButtonStyle["Stroked"] = "stroked";
 })(ButtonStyle || (ButtonStyle = {}));
 
+var MenuActionMode;
+(function (MenuActionMode) {
+    MenuActionMode["Menu"] = "menu";
+    MenuActionMode["File"] = "file";
+    MenuActionMode["Group"] = "group";
+})(MenuActionMode || (MenuActionMode = {}));
+
 var PickerViewType;
 (function (PickerViewType) {
     PickerViewType["Date"] = "date";
@@ -1483,8 +1491,8 @@ var PickerViewType;
     PickerViewType["MonthRange"] = "monthrange";
 })(PickerViewType || (PickerViewType = {}));
 
-const SORT_BY_FIELD = 'sortName';
-const SORT_DIRECTION_FIELD = 'sortDirection';
+const SortByField = 'sortName';
+const SortDirectionField = 'sortDirection';
 class FsFilterConfig {
     load = true;
     persist = false;
@@ -1494,7 +1502,6 @@ class FsFilterConfig {
     chips = false;
     sortValues = null;
     sort = null;
-    // public sortDirection = null;
     queryParam = false;
     init;
     change;
@@ -1547,7 +1554,7 @@ class FsFilterConfig {
             this.button.label = 'Filters';
         }
         if (this.button.icon === undefined) {
-            this.button.icon = 'filter_alt';
+            this.button.icon = 'filterOutline';
         }
         if (this.button.style === undefined) {
             this.button.style = ButtonStyle.Raised;
@@ -1855,7 +1862,7 @@ class FsFilterItemsStore {
     _createSortingItems() {
         if (this._config.sortValues?.length > 0) {
             const sortByItem = {
-                name: SORT_BY_FIELD,
+                name: SortByField,
                 type: ItemType.Select,
                 label: 'Sort by',
                 values: this._config.sortValues,
@@ -1865,7 +1872,7 @@ class FsFilterItemsStore {
             }
             this.sortByItem = new SimpleSelectItem(sortByItem, null, this.filter);
             const sortDirectionItem = {
-                name: SORT_DIRECTION_FIELD,
+                name: SortDirectionField,
                 type: ItemType.Select,
                 label: 'Sort direction',
                 values: [
@@ -2367,6 +2374,16 @@ class ActionMenuItem {
     _parent;
     icon;
     label;
+    mode;
+    fileSelected;
+    fileError;
+    multiple;
+    accept;
+    minWidth;
+    minHeight;
+    maxWidth;
+    maxHeight;
+    imageQuality;
     click;
     routerLink;
     items = [];
@@ -2412,10 +2429,24 @@ class ActionMenuItem {
         }, 0);
         this._visible$.next(!!numberOfVisibleChildren);
     }
+    _initFile(config) {
+        this.multiple = config.multiple;
+        this.accept = config.accept;
+        this.minWidth = config.minWidth;
+        this.minHeight = config.minHeight;
+        this.maxWidth = config.maxWidth;
+        this.maxHeight = config.maxHeight;
+        this.imageQuality = config.imageQuality;
+        this.fileSelected = config.fileSelected;
+    }
     _init(config) {
         this.label = config.label;
         this.icon = config.icon;
+        this.mode = config.mode || MenuActionMode.Menu;
         this._showFn = config.show;
+        if (this.mode === MenuActionMode.File) {
+            this._initFile(config);
+        }
         if ('items' in config) {
             this._isGroup = true;
             if (Array.isArray(config.items)) {
@@ -2626,11 +2657,11 @@ class FsFilterActionsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"ActionMode.Button\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        class=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n      <fs-filter-action-button\n        class=\"action\"\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef class=\"action\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template\n                    fs-menu-item\n                    [link]=\"subAction.routerLink?.link\"\n                    [queryParams]=\"subAction.routerLink?.queryParams\"\n                    [hidden]=\"(subAction.visible$ | async) === false\"\n                    (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template\n                fs-menu-item\n                [link]=\"childAction.routerLink?.link\"\n                [queryParams]=\"childAction.routerLink?.queryParams\"\n                [hidden]=\"(childAction.visible$ | async) === false\"\n                (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n      <mat-select \n          class=\"action action-select-button\"\n          [ngClass]=\"{ \n            'mat-mdc-raised-button': action.type === ActionType.Raised,\n            'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n            'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n          }\"\n          [placeholder]=\"action.label\"\n          [(ngModel)]=\"action.value\" \n          (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n          fsSelectButton\n          #selectButton\n          [deselectOnChange]=\"false\">\n        <mat-option \n            *ngFor=\"let item of action.values\" \n            [value]=\"item.value\">\n          {{ item.name }}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.File\">\n      <fs-file\n          class=\"action action-button\"\n          [accept]=\"action.accept || '*'\"\n          [multiple]=\"action.multiple\"\n          [minWidth]=\"action.minWidth\"\n          [minHeight]=\"action.minHeight\"\n          [imageWidth]=\"action.maxWidth\"\n          [imageHeight]=\"action.maxHeight\"\n          (select)=\"action.fileSelected($event)\"\n          (error)=\"action.fileError($event)\"\n          (clicked)=\"action.click($event)\"\n          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.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: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i6$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i6$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i9.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: i8.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "directive", type: i9$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "width", "buttonType", "deselectOnChange"] }, { kind: "directive", type: i10.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { kind: "component", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { kind: "component", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"ActionMode.Button\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        class=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n      <fs-filter-action-button\n        class=\"action\"\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef class=\"action\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-container [ngSwitch]=\"subAction.mode\">\n                  <ng-container *ngSwitchCase=\"'menu'\">\n                    <ng-template\n                        fs-menu-item\n                        [link]=\"subAction.routerLink?.link\"\n                        [queryParams]=\"subAction.routerLink?.queryParams\"\n                        [hidden]=\"(subAction.visible$ | async) === false\"\n                        (click)=\"subAction.click($event)\">\n                      <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                      {{subAction.label}}\n                    </ng-template>\n                  </ng-container>\n                  <ng-container *ngSwitchCase=\"'file'\">\n                    <ng-template\n                        fs-menu-file-item\n                        [multiple]=\"subAction.multiple\"\n                        [accept]=\"subAction.accept || '*'\"\n                        [minWidth]=\"subAction.minWidth\"\n                        [minHeight]=\"subAction.minHeight\"\n                        [imageWidth]=\"subAction.maxWidth\"\n                        [imageHeight]=\"subAction.maxHeight\"\n                        (select)=\"subAction.fileSelected($event)\"\n                        [hidden]=\"(subAction.visible$ | async) === false\"\n                        (click)=\"subAction.click($event)\">\n                      <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                      {{subAction.label}}\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-container [ngSwitch]=\"childAction.mode\">\n              <ng-container *ngSwitchCase=\"'menu'\">\n                <ng-template\n                    fs-menu-item\n                    [link]=\"childAction.routerLink?.link\"\n                    [queryParams]=\"childAction.routerLink?.queryParams\"\n                    [hidden]=\"(childAction.visible$ | async) === false\"\n                    (click)=\"childAction.click($event);\">\n                  <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n                  {{childAction.label}}\n                </ng-template>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'file'\">\n                <ng-template\n                    fs-menu-file-item\n                    [multiple]=\"childAction.multiple\"\n                    [accept]=\"childAction.accept || '*'\"\n                    [minWidth]=\"childAction.minWidth\"\n                    [minHeight]=\"childAction.minHeight\"\n                    [imageWidth]=\"childAction.maxWidth\"\n                    [imageHeight]=\"childAction.maxHeight\"\n                    (select)=\"childAction.fileSelected($event)\"\n                    [hidden]=\"(childAction.visible$ | async) === false\"\n                    (click)=\"childAction.click($event)\">\n                  <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n                  {{childAction.label}}\n                </ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n      <mat-select \n          class=\"action action-select-button\"\n          [ngClass]=\"{ \n            'mat-mdc-raised-button': action.type === ActionType.Raised,\n            'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n            'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n          }\"\n          [placeholder]=\"action.label\"\n          [(ngModel)]=\"action.value\" \n          (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n          fsSelectButton\n          #selectButton\n          [deselectOnChange]=\"false\">\n        <mat-option \n            *ngFor=\"let item of action.values\" \n            [value]=\"item.value\">\n          {{ item.name }}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.File\">\n      <fs-file\n          class=\"action action-button\"\n          [accept]=\"action.accept || '*'\"\n          [multiple]=\"action.multiple\"\n          [minWidth]=\"action.minWidth\"\n          [minHeight]=\"action.minHeight\"\n          [imageWidth]=\"action.maxWidth\"\n          [imageHeight]=\"action.maxHeight\"\n          (select)=\"action.fileSelected($event)\"\n          (error)=\"action.fileError($event)\"\n          (clicked)=\"action.click($event)\"\n          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.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: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i6$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i6$1.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i6$1.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { kind: "directive", type: i9.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: i8.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "directive", type: i9$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "width", "buttonType", "deselectOnChange"] }, { kind: "directive", type: i10.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { kind: "component", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { kind: "component", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let action of actions\">\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"ActionMode.Button\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        class=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n      <fs-filter-action-button\n        class=\"action\"\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef class=\"action\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template\n                    fs-menu-item\n                    [link]=\"subAction.routerLink?.link\"\n                    [queryParams]=\"subAction.routerLink?.queryParams\"\n                    [hidden]=\"(subAction.visible$ | async) === false\"\n                    (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template\n                fs-menu-item\n                [link]=\"childAction.routerLink?.link\"\n                [queryParams]=\"childAction.routerLink?.queryParams\"\n                [hidden]=\"(childAction.visible$ | async) === false\"\n                (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n      <mat-select \n          class=\"action action-select-button\"\n          [ngClass]=\"{ \n            'mat-mdc-raised-button': action.type === ActionType.Raised,\n            'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n            'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n          }\"\n          [placeholder]=\"action.label\"\n          [(ngModel)]=\"action.value\" \n          (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n          fsSelectButton\n          #selectButton\n          [deselectOnChange]=\"false\">\n        <mat-option \n            *ngFor=\"let item of action.values\" \n            [value]=\"item.value\">\n          {{ item.name }}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.File\">\n      <fs-file\n          class=\"action action-button\"\n          [accept]=\"action.accept || '*'\"\n          [multiple]=\"action.multiple\"\n          [minWidth]=\"action.minWidth\"\n          [minHeight]=\"action.minHeight\"\n          [imageWidth]=\"action.maxWidth\"\n          [imageHeight]=\"action.maxHeight\"\n          (select)=\"action.fileSelected($event)\"\n          (error)=\"action.fileError($event)\"\n          (clicked)=\"action.click($event)\"\n          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}\n"] }]
+            args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let action of actions\">\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"ActionMode.Button\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        class=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n      <fs-filter-action-button\n        class=\"action\"\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef class=\"action\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-container [ngSwitch]=\"subAction.mode\">\n                  <ng-container *ngSwitchCase=\"'menu'\">\n                    <ng-template\n                        fs-menu-item\n                        [link]=\"subAction.routerLink?.link\"\n                        [queryParams]=\"subAction.routerLink?.queryParams\"\n                        [hidden]=\"(subAction.visible$ | async) === false\"\n                        (click)=\"subAction.click($event)\">\n                      <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                      {{subAction.label}}\n                    </ng-template>\n                  </ng-container>\n                  <ng-container *ngSwitchCase=\"'file'\">\n                    <ng-template\n                        fs-menu-file-item\n                        [multiple]=\"subAction.multiple\"\n                        [accept]=\"subAction.accept || '*'\"\n                        [minWidth]=\"subAction.minWidth\"\n                        [minHeight]=\"subAction.minHeight\"\n                        [imageWidth]=\"subAction.maxWidth\"\n                        [imageHeight]=\"subAction.maxHeight\"\n                        (select)=\"subAction.fileSelected($event)\"\n                        [hidden]=\"(subAction.visible$ | async) === false\"\n                        (click)=\"subAction.click($event)\">\n                      <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                      {{subAction.label}}\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-container [ngSwitch]=\"childAction.mode\">\n              <ng-container *ngSwitchCase=\"'menu'\">\n                <ng-template\n                    fs-menu-item\n                    [link]=\"childAction.routerLink?.link\"\n                    [queryParams]=\"childAction.routerLink?.queryParams\"\n                    [hidden]=\"(childAction.visible$ | async) === false\"\n                    (click)=\"childAction.click($event);\">\n                  <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n                  {{childAction.label}}\n                </ng-template>\n              </ng-container>\n              <ng-container *ngSwitchCase=\"'file'\">\n                <ng-template\n                    fs-menu-file-item\n                    [multiple]=\"childAction.multiple\"\n                    [accept]=\"childAction.accept || '*'\"\n                    [minWidth]=\"childAction.minWidth\"\n                    [minHeight]=\"childAction.minHeight\"\n                    [imageWidth]=\"childAction.maxWidth\"\n                    [imageHeight]=\"childAction.maxHeight\"\n                    (select)=\"childAction.fileSelected($event)\"\n                    [hidden]=\"(childAction.visible$ | async) === false\"\n                    (click)=\"childAction.click($event)\">\n                  <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n                  {{childAction.label}}\n                </ng-template>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n      <mat-select \n          class=\"action action-select-button\"\n          [ngClass]=\"{ \n            'mat-mdc-raised-button': action.type === ActionType.Raised,\n            'mat-mdc-unelevated-button': action.type === ActionType.Flat,\n            'mat-mdc-outlined-button': action.type === ActionType.Stroked,\n          }\"\n          [placeholder]=\"action.label\"\n          [(ngModel)]=\"action.value\" \n          (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n          fsSelectButton\n          #selectButton\n          [deselectOnChange]=\"false\">\n        <mat-option \n            *ngFor=\"let item of action.values\" \n            [value]=\"item.value\">\n          {{ item.name }}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"ActionMode.File\">\n      <fs-file\n          class=\"action action-button\"\n          [accept]=\"action.accept || '*'\"\n          [multiple]=\"action.multiple\"\n          [minWidth]=\"action.minWidth\"\n          [minHeight]=\"action.minHeight\"\n          [imageWidth]=\"action.maxWidth\"\n          [imageHeight]=\"action.maxHeight\"\n          (select)=\"action.fileSelected($event)\"\n          (error)=\"action.fileError($event)\"\n          (clicked)=\"action.click($event)\"\n          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}\n"] }]
         }], propDecorators: { kebabActions: [{
                 type: Input
             }], actions: [{
@@ -3368,7 +3399,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         return item1?.value === item2?.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\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 fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i9.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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\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 fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i9.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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
@@ -3553,11 +3584,11 @@ class FilterDrawerComponent {
         this.done();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }, { token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>filter_alt</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}:host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { kind: "component", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}:host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { kind: "component", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDrawerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>filter_alt</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}:host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}:host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:100vw;max-width:350px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);box-sizing:border-box;height:100%}.filters .filters-wrap .filter-items{padding-top:5px;overflow-y:auto;height:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;inset:0;z-index:900;outline:none}@media (max-width: 599px){.filters .filters-wrap{max-width:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.OverlayRef, decorators: [{
                     type: Inject,
                     args: [FILTER_DRAWER_OVERLAY]
@@ -3884,6 +3915,10 @@ class FilterComponent {
         this._filterItems.filter = this;
         this._listenWhenFilterReady();
         this._updateWindowWidth();
+        const iconRegistry = inject(MatIconRegistry);
+        const sanitizer = inject(DomSanitizer);
+        const filterAlt = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>';
+        iconRegistry.addSvgIconLiteral('filterOutline', sanitizer.bypassSecurityTrustHtml(filterAlt));
         this._filterOverlay.attach$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
@@ -4358,7 +4393,7 @@ class FilterComponent {
         this._hasFilterChips$.next(hasFilterChips);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterComponent, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy", showFilterInput: "showFilterInput" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass", "class.has-keyword": "this.hasKeyword" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FilterComponent, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy", showFilterInput: "showFilterInput" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass", "class.has-keyword": "this.hasKeyword" } }, providers: [
             FsFilterOverlayService,
             ExternalParamsController,
             PersistanceParamsController,
@@ -4367,7 +4402,7 @@ class FilterComponent {
             FsFilterItemsStore,
             SavedFiltersController,
             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  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</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    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </a>\n      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.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:17px}.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}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.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: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i12.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: "directive", type: i9.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: i14.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: "pipe", type: i1$1.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  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</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    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"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      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.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:17px}.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}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.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: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i12.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: "directive", type: i9.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: i14.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: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -4380,7 +4415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFilterItemsStore,
                         SavedFiltersController,
                         ActionsController,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</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    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n          {{ config.button.label }}\n        </a>\n      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.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:17px}.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}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div class=\"filter-status\" #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"form-field-padless\"\n          [ngClass]=\"search\"\n          appearance=\"outline\">\n        <span matPrefix class=\"icon\">\n          <mat-icon matPrefix>search</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    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <ng-container *ngIf=\"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      </ng-container>\n    </ng-container>    \n    <ng-container *ngIf=\"config.reload\">\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>refresh</mat-icon>\n      </a>\n    </ng-container>\n    <ng-container *ngIf=\"config.autoReload\">\n      <mat-slide-toggle \n          name=\"autoReload\" \n          class=\"auto-reload\"\n          [(ngModel)]=\"autoReload\">\n        Auto refresh\n      </mat-slide-toggle>\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.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:17px}.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}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}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: () => [{ type: FsFilterConfig, decorators: [{
                     type: Optional
                 }, {
@@ -4719,5 +4754,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionMode, ActionType, AutocompleteChipsItem, AutocompleteItem, BaseItem, ButtonStyle, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, ExternalParamsController, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, FsSavedFiltersMenuComponent, ItemDateMode, ItemType, QUERY_PARAM_DELIMITER, RangeItem, SavedFiltersController, SelectItem, TextItem, buildQueryParams, filterFromQueryParam, filterToQueryParam };
+export { ActionMode, ActionType, AutocompleteChipsItem, AutocompleteItem, BaseItem, ButtonStyle, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, ExternalParamsController, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, FsSavedFiltersMenuComponent, ItemDateMode, ItemType, MenuActionMode, QUERY_PARAM_DELIMITER, RangeItem, SavedFiltersController, SelectItem, TextItem, buildQueryParams, filterFromQueryParam, filterToQueryParam };
 //# sourceMappingURL=firestitch-filter.mjs.map