@firestitch/filter 18.0.24 → 18.0.26

package/app/helpers/create-filter-item.d.ts

@@ -11,4 +11,4 @@ import { DateTimeRangeItem } from '../models/items/date-time-range-item';
 import { RangeItem } from '../models/items/range-item';
 import { TextItem } from '../models/items/text-item';
 import { WeekItem } from '../models/items/week-item';
-export declare function createFilterItem(item: IFilterConfigItem, config: any, filter: FilterComponent): TextItem | ChipsItem | RangeItem | AutocompleteItem | AutocompleteChipsItem | DateItem | DateRangeItem | DateTimeItem | DateTimeRangeItem | WeekItem | CheckboxItem | import("../models/items/select/simple-select-item").SimpleSelectItem | import("../models/items/select/multiple-select-item").MultipleSelectItem;
+export declare function createFilterItem(item: IFilterConfigItem, config: any, filter: FilterComponent): CheckboxItem | TextItem | ChipsItem | RangeItem | AutocompleteItem | AutocompleteChipsItem | DateItem | DateRangeItem | DateTimeItem | DateTimeRangeItem | WeekItem | import("../models/items/select/simple-select-item").SimpleSelectItem | import("../models/items/select/multiple-select-item").MultipleSelectItem;

package/app/models/items/checkbox-item.d.ts

@@ -10,6 +10,7 @@ export declare class CheckboxItem extends BaseItem<IFilterConfigCheckboxItem> {
     get isTypeCheckbox(): boolean;
     get isChipVisible(): boolean;
     get value(): any;
+    get checked(): boolean;
     get queryObject(): Record<string, unknown>;
     getChipsContent(): string;
     protected _validateModel(): void;

package/esm2022/app/components/filter/filter.component.mjs

@@ -570,7 +570,7 @@ export 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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.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}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i11.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: i13.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: i15.FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { kind: "component", type: i16.FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "pipe", type: i6.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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i11.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: i13.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: i15.FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { kind: "component", type: i16.FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -583,7 +583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.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}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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: i17.FsFilterConfig, decorators: [{
                     type: Optional
                 }, {

package/esm2022/app/models/items/checkbox-item.mjs

@@ -24,6 +24,9 @@ export class CheckboxItem extends BaseItem {
         }
         return value;
     }
+    get checked() {
+        return this._checked;
+    }
     get queryObject() {
         const value = this.value;
         const name = this.name;
@@ -46,4 +49,4 @@ export class CheckboxItem extends BaseItem {
         this.model = defaultValue ?? false;
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3gtaXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvbW9kZWxzL2l0ZW1zL2NoZWNrYm94LWl0ZW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUtyQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBR3ZDLE1BQU0sT0FBTyxZQUFhLFNBQVEsUUFBbUM7SUFPdkQ7SUFDQTtJQUhaLFlBQ0UsVUFBcUMsRUFDM0IsaUJBQTBCLEVBQzFCLE9BQXdCO1FBRWxDLEtBQUssQ0FBQyxVQUFVLEVBQUUsaUJBQWlCLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFIcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFTO1FBQzFCLFlBQU8sR0FBUCxPQUFPLENBQWlCO1FBR2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3pFLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ2hGLElBQUksQ0FBQyxZQUFZLEdBQUcsVUFBVSxDQUFDLE9BQU8sS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDdkcsQ0FBQztJQUdELElBQVcsY0FBYztRQUN2QixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFFRCxJQUFXLGFBQWE7UUFDdEIsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdEMsQ0FBQztJQUVELElBQVcsS0FBSztRQUNkLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO1FBRXJFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNYLE9BQU8sU0FBUyxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7SUFFRCxJQUFXLFdBQVc7UUFDcEIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUN6QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3ZCLE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQztRQUVsQixNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7UUFFOUMsT0FBTyxNQUFNLENBQUM7SUFDaEIsQ0FBQztJQUVNLGVBQWU7UUFDcEIsT0FBTyxJQUFJLENBQUMsS0FBZSxDQUFDO0lBQzlCLENBQUM7SUFFUyxjQUFjO1FBQ3RCLEVBQUU7SUFDSixDQUFDO0lBRVMsS0FBSztRQUNiLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxTQUFTLEVBQUUsQ0FBQztZQUM3QixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEtBQUssSUFBSSxDQUFDLFlBQVksQ0FBQztRQUNwRCxDQUFDO0lBQ0gsQ0FBQztJQUVTLFdBQVcsQ0FBQyxlQUF3QixTQUFTO1FBQ3JELElBQUksQ0FBQyxLQUFLLEdBQUcsWUFBWSxJQUFJLEtBQUssQ0FBQztJQUNyQyxDQUFDO0NBRUYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0b1N0cmluZyB9IGZyb20gJ2xvZGFzaC1lcyc7XG5cbmltcG9ydCB0eXBlIHsgRmlsdGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9maWx0ZXIvZmlsdGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJRmlsdGVyQ29uZmlnQ2hlY2tib3hJdGVtIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9pdGVtcy9jaGVja2JveC5pbnRlcmZhY2UnO1xuXG5pbXBvcnQgeyBCYXNlSXRlbSB9IGZyb20gJy4vYmFzZS1pdGVtJztcblxuXG5leHBvcnQgY2xhc3MgQ2hlY2tib3hJdGVtIGV4dGVuZHMgQmFzZUl0ZW08SUZpbHRlckNvbmZpZ0NoZWNrYm94SXRlbT4ge1xuXG4gIHByaXZhdGUgZGVjbGFyZSBfY2hlY2tlZDtcbiAgcHJpdmF0ZSBkZWNsYXJlIF91bmNoZWNrZWQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgaXRlbUNvbmZpZzogSUZpbHRlckNvbmZpZ0NoZWNrYm94SXRlbSxcbiAgICBwcm90ZWN0ZWQgX2FkZGl0aW9uYWxDb25maWc6IHVua25vd24sXG4gICAgcHJvdGVjdGVkIF9maWx0ZXI6IEZpbHRlckNvbXBvbmVudCxcbiAgKSB7XG4gICAgc3VwZXIoaXRlbUNvbmZpZywgX2FkZGl0aW9uYWxDb25maWcsIF9maWx0ZXIpO1xuICAgIHRoaXMuX2NoZWNrZWQgPSBpdGVtQ29uZmlnLmNoZWNrZWQgPyB0b1N0cmluZyhpdGVtQ29uZmlnLmNoZWNrZWQpIDogdHJ1ZTtcbiAgICB0aGlzLl91bmNoZWNrZWQgPSBpdGVtQ29uZmlnLnVuY2hlY2tlZCA/IHRvU3RyaW5nKGl0ZW1Db25maWcudW5jaGVja2VkKSA6IGZhbHNlO1xuICAgIHRoaXMuZGVmYXVsdFZhbHVlID0gaXRlbUNvbmZpZy5kZWZhdWx0ID09PSB1bmRlZmluZWQgPyB0aGlzLl91bmNoZWNrZWQgOiB0b1N0cmluZyh0aGlzLmRlZmF1bHRWYWx1ZSk7XG4gIH1cblxuXG4gIHB1YmxpYyBnZXQgaXNUeXBlQ2hlY2tib3goKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0IGlzQ2hpcFZpc2libGUoKSB7XG4gICAgcmV0dXJuIHRoaXMudmFsdWUgPT09IHRoaXMuX2NoZWNrZWQ7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHZhbHVlKCkge1xuICAgIGNvbnN0IHZhbHVlID0gdGhpcy5tb2RlbCA/IHRoaXMuX2NoZWNrZWQgfHwgJ3RydWUnIDogdGhpcy5fdW5jaGVja2VkO1xuXG4gICAgaWYgKCF2YWx1ZSkge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICByZXR1cm4gdmFsdWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHF1ZXJ5T2JqZWN0KCk6IFJlY29yZDxzdHJpbmcsIHVua25vd24+IHtcbiAgICBjb25zdCB2YWx1ZSA9IHRoaXMudmFsdWU7XG4gICAgY29uc3QgbmFtZSA9IHRoaXMubmFtZTtcbiAgICBjb25zdCBwYXJhbXMgPSB7fTtcblxuICAgIHBhcmFtc1tuYW1lXSA9IHRoaXMubW9kZWwgPyB2YWx1ZSA6IHVuZGVmaW5lZDtcblxuICAgIHJldHVybiBwYXJhbXM7XG4gIH1cblxuICBwdWJsaWMgZ2V0Q2hpcHNDb250ZW50KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMubGFiZWwgYXMgc3RyaW5nO1xuICB9XG5cbiAgcHJvdGVjdGVkIF92YWxpZGF0ZU1vZGVsKCkge1xuICAgIC8vXG4gIH1cblxuICBwcm90ZWN0ZWQgX2luaXQoKSB7XG4gICAgaWYgKHRoaXMubW9kZWwgPT09IHVuZGVmaW5lZCkge1xuICAgICAgdGhpcy5fbW9kZWwgPSB0aGlzLl9jaGVja2VkID09PSB0aGlzLmRlZmF1bHRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgX2NsZWFyVmFsdWUoZGVmYXVsdFZhbHVlOiB1bmtub3duID0gdW5kZWZpbmVkKSB7XG4gICAgdGhpcy5tb2RlbCA9IGRlZmF1bHRWYWx1ZSA/PyBmYWxzZTtcbiAgfVxuXG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3gtaXRlbS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvbW9kZWxzL2l0ZW1zL2NoZWNrYm94LWl0ZW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUtyQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBR3ZDLE1BQU0sT0FBTyxZQUFhLFNBQVEsUUFBbUM7SUFPdkQ7SUFDQTtJQUhaLFlBQ0UsVUFBcUMsRUFDM0IsaUJBQTBCLEVBQzFCLE9BQXdCO1FBRWxDLEtBQUssQ0FBQyxVQUFVLEVBQUUsaUJBQWlCLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFIcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFTO1FBQzFCLFlBQU8sR0FBUCxPQUFPLENBQWlCO1FBR2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3pFLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ2hGLElBQUksQ0FBQyxZQUFZLEdBQUcsVUFBVSxDQUFDLE9BQU8sS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDdkcsQ0FBQztJQUdELElBQVcsY0FBYztRQUN2QixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7SUFFRCxJQUFXLGFBQWE7UUFDdEIsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdEMsQ0FBQztJQUVELElBQVcsS0FBSztRQUNkLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLElBQUksTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO1FBRXJFLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNYLE9BQU8sU0FBUyxDQUFDO1FBQ25CLENBQUM7UUFFRCxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7SUFFRCxJQUFXLE9BQU87UUFDaEIsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxJQUFXLFdBQVc7UUFDcEIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUN6QixNQUFNLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3ZCLE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQztRQUVsQixNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7UUFFOUMsT0FBTyxNQUFNLENBQUM7SUFDaEIsQ0FBQztJQUVNLGVBQWU7UUFDcEIsT0FBTyxJQUFJLENBQUMsS0FBZSxDQUFDO0lBQzlCLENBQUM7SUFFUyxjQUFjO1FBQ3RCLEVBQUU7SUFDSixDQUFDO0lBRVMsS0FBSztRQUNiLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxTQUFTLEVBQUUsQ0FBQztZQUM3QixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEtBQUssSUFBSSxDQUFDLFlBQVksQ0FBQztRQUNwRCxDQUFDO0lBQ0gsQ0FBQztJQUVTLFdBQVcsQ0FBQyxlQUF3QixTQUFTO1FBQ3JELElBQUksQ0FBQyxLQUFLLEdBQUcsWUFBWSxJQUFJLEtBQUssQ0FBQztJQUNyQyxDQUFDO0NBRUYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0b1N0cmluZyB9IGZyb20gJ2xvZGFzaC1lcyc7XG5cbmltcG9ydCB0eXBlIHsgRmlsdGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9maWx0ZXIvZmlsdGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJRmlsdGVyQ29uZmlnQ2hlY2tib3hJdGVtIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9pdGVtcy9jaGVja2JveC5pbnRlcmZhY2UnO1xuXG5pbXBvcnQgeyBCYXNlSXRlbSB9IGZyb20gJy4vYmFzZS1pdGVtJztcblxuXG5leHBvcnQgY2xhc3MgQ2hlY2tib3hJdGVtIGV4dGVuZHMgQmFzZUl0ZW08SUZpbHRlckNvbmZpZ0NoZWNrYm94SXRlbT4ge1xuXG4gIHByaXZhdGUgZGVjbGFyZSBfY2hlY2tlZDtcbiAgcHJpdmF0ZSBkZWNsYXJlIF91bmNoZWNrZWQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgaXRlbUNvbmZpZzogSUZpbHRlckNvbmZpZ0NoZWNrYm94SXRlbSxcbiAgICBwcm90ZWN0ZWQgX2FkZGl0aW9uYWxDb25maWc6IHVua25vd24sXG4gICAgcHJvdGVjdGVkIF9maWx0ZXI6IEZpbHRlckNvbXBvbmVudCxcbiAgKSB7XG4gICAgc3VwZXIoaXRlbUNvbmZpZywgX2FkZGl0aW9uYWxDb25maWcsIF9maWx0ZXIpO1xuICAgIHRoaXMuX2NoZWNrZWQgPSBpdGVtQ29uZmlnLmNoZWNrZWQgPyB0b1N0cmluZyhpdGVtQ29uZmlnLmNoZWNrZWQpIDogdHJ1ZTtcbiAgICB0aGlzLl91bmNoZWNrZWQgPSBpdGVtQ29uZmlnLnVuY2hlY2tlZCA/IHRvU3RyaW5nKGl0ZW1Db25maWcudW5jaGVja2VkKSA6IGZhbHNlO1xuICAgIHRoaXMuZGVmYXVsdFZhbHVlID0gaXRlbUNvbmZpZy5kZWZhdWx0ID09PSB1bmRlZmluZWQgPyB0aGlzLl91bmNoZWNrZWQgOiB0b1N0cmluZyh0aGlzLmRlZmF1bHRWYWx1ZSk7XG4gIH1cblxuXG4gIHB1YmxpYyBnZXQgaXNUeXBlQ2hlY2tib3goKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRydWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0IGlzQ2hpcFZpc2libGUoKSB7XG4gICAgcmV0dXJuIHRoaXMudmFsdWUgPT09IHRoaXMuX2NoZWNrZWQ7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHZhbHVlKCkge1xuICAgIGNvbnN0IHZhbHVlID0gdGhpcy5tb2RlbCA/IHRoaXMuX2NoZWNrZWQgfHwgJ3RydWUnIDogdGhpcy5fdW5jaGVja2VkO1xuXG4gICAgaWYgKCF2YWx1ZSkge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICByZXR1cm4gdmFsdWU7XG4gIH1cblxuICBwdWJsaWMgZ2V0IGNoZWNrZWQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2NoZWNrZWQ7XG4gIH1cblxuICBwdWJsaWMgZ2V0IHF1ZXJ5T2JqZWN0KCk6IFJlY29yZDxzdHJpbmcsIHVua25vd24+IHtcbiAgICBjb25zdCB2YWx1ZSA9IHRoaXMudmFsdWU7XG4gICAgY29uc3QgbmFtZSA9IHRoaXMubmFtZTtcbiAgICBjb25zdCBwYXJhbXMgPSB7fTtcblxuICAgIHBhcmFtc1tuYW1lXSA9IHRoaXMubW9kZWwgPyB2YWx1ZSA6IHVuZGVmaW5lZDtcblxuICAgIHJldHVybiBwYXJhbXM7XG4gIH1cblxuICBwdWJsaWMgZ2V0Q2hpcHNDb250ZW50KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMubGFiZWwgYXMgc3RyaW5nO1xuICB9XG5cbiAgcHJvdGVjdGVkIF92YWxpZGF0ZU1vZGVsKCkge1xuICAgIC8vXG4gIH1cblxuICBwcm90ZWN0ZWQgX2luaXQoKSB7XG4gICAgaWYgKHRoaXMubW9kZWwgPT09IHVuZGVmaW5lZCkge1xuICAgICAgdGhpcy5fbW9kZWwgPSB0aGlzLl9jaGVja2VkID09PSB0aGlzLmRlZmF1bHRWYWx1ZTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgX2NsZWFyVmFsdWUoZGVmYXVsdFZhbHVlOiB1bmtub3duID0gdW5kZWZpbmVkKSB7XG4gICAgdGhpcy5tb2RlbCA9IGRlZmF1bHRWYWx1ZSA/PyBmYWxzZTtcbiAgfVxuXG59XG4iXX0=

package/fesm2022/firestitch-filter.mjs

@@ -1092,6 +1092,9 @@ class CheckboxItem extends BaseItem {
         }
         return value;
     }
+    get checked() {
+        return this._checked;
+    }
     get queryObject() {
         const value = this.value;
         const name = this.name;
@@ -4418,7 +4421,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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.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}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$1.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: i5$1.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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$1.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: i5$1.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.13", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -4431,7 +4434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.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}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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    <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n  </div>\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n  </ng-container>\n</div>\n<ng-template #filterStatusBarChips>\n  <ng-container *ngIf=\"statusBar\">\n    <div\n        class=\"filter-status-container\"\n        [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n      <div\n          class=\"filter-status\"\n          #filterStatus>\n        <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\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<ng-template #filterKeyword>\n  <div class=\"filter-keyword\">\n    <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n      <mat-form-field\n          class=\"search-form-field form-field-padless\"\n          [ngClass]=\"{\n            'has-keyword': !!keyword\n          }\">\n        <span\n            matPrefix\n            class=\"icon\">\n          <mat-icon matPrefix>\n            search\n          </mat-icon>\n        </span>\n        <input\n          #keywordMatInput\n          matInput\n          [(ngModel)]=\"keyword\"\n          (ngModelChange)=\"keywordChange($event)\"\n          name=\"filter-input\"\n          [fsClear]=\"true\"\n          [placeholder]=\"searchPlaceholder\">\n      </mat-form-field>\n    </ng-container>\n  </div>\n</ng-template>\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<ng-template #filterToolbar>\n  <div class=\"filter-toobar\">\n    @if (filtersBtnVisible$ | async) {\n      @if (hasVisibleItemOrSorting) {\n        <a\n            mat-icon-button\n            class=\"button-filters\"\n            (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n            [color]=\"config.button.color\">\n          @if (config.button.icon) {\n            <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n          }\n          {{ config.button.label }}\n        </a>\n      }\n    }\n    @if (config.reload) {\n      <a\n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"button-reload\">\n        <mat-icon #reloadEl>\n          refresh\n        </mat-icon>\n      </a>\n    }\n    @if (config.autoReload) {\n      <div class=\"filter-reload\">\n        @if (config.autoReload) {\n          <mat-slide-toggle\n              name=\"autoReload\"\n              class=\"auto-reload\"\n              [(ngModel)]=\"autoReload\">\n            <span>\n              Auto refresh\n            </span>\n          </mat-slide-toggle>\n        }\n      </div>\n    }\n  </div>\n</ng-template>", 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:18px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;margin-right:3px}.filter-inner-container .filter-keyword mat-form-field.search-form-field{max-width:100%;width:250px;margin-top:0}.filter-inner-container .filter-keyword mat-form-field.search-form-field .icon{margin-left:10px;color:#626262}.filter-inner-container .filter-keyword mat-form-field.search-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.filter-toobar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toobar .filter-reload .auto-reload{margin-right:5px}.filter-toobar .filter-reload .auto-reload span{font-size:80%}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}.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
                 }, {