@firestitch/filter 18.0.1 → 18.0.3

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

@@ -566,7 +566,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\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: 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", "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\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: 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.7", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,

package/esm2022/app/components/filters-item/autocompletechips/autocompletechips.component.mjs

@@ -35,10 +35,10 @@ export 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  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\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>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "placeholder", "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: i2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i4.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.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: i2.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i4.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,
-            args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, 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  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\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>\n" }]
+            args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlY2hpcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9jb21wb25lbnRzL2ZpbHRlcnMtaXRlbS9hdXRvY29tcGxldGVjaGlwcy9hdXRvY29tcGxldGVjaGlwcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvZmlsdGVycy1pdGVtL2F1dG9jb21wbGV0ZWNoaXBzL2F1dG9jb21wbGV0ZWNoaXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxlQUFlLEdBQ2hCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxNQUFNLElBQUksV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFHM0QsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7OztBQVFyRSxNQUFNLE9BQU8sMEJBQTJCLFNBQVEsaUJBQXdDO0lBRzFFO0lBQ0E7SUFGWixZQUNZLFVBQTJCLEVBQzNCLEdBQXNCO1FBRWhDLEtBQUssQ0FBQyxVQUFVLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFIYixlQUFVLEdBQVYsVUFBVSxDQUFpQjtRQUMzQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUdsQyxDQUFDO0lBRU0sdUJBQXVCLENBQUMsS0FBSztRQUNsQyxJQUFJLEtBQUssQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNuRSxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQztJQUVNLDBCQUEwQixDQUFDLEtBQUs7UUFDckMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVNLHlCQUF5QjtRQUM5QixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRU0sS0FBSyxHQUFHLENBQUMsT0FBTyxFQUFFLEVBQUU7UUFDekIsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2RCxDQUFDLENBQUM7SUFFSyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUs7UUFDOUIsT0FBTyxLQUFLLEVBQUUsS0FBSyxLQUFLLEtBQUssRUFBRSxLQUFLLENBQUM7SUFDdkMsQ0FBQzt1R0FoQ1UsMEJBQTBCOzJGQUExQiwwQkFBMEIsNEZDbEJ2QyxtMEJBeUJBOzsyRkRQYSwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UsK0JBQStCLG1CQUV4Qix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEtleVZhbHVlRGlmZmVycyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IHJlbW92ZSBhcyBhcnJheVJlbW92ZSB9IGZyb20gJ0BmaXJlc3RpdGNoL2NvbW1vbic7XG5cbmltcG9ydCB7IEF1dG9jb21wbGV0ZUNoaXBzSXRlbSB9IGZyb20gJy4uLy4uLy4uL21vZGVscy9pdGVtcy9hdXRvY29tcGxldGUtY2hpcHMtaXRlbSc7XG5pbXBvcnQgeyBCYXNlSXRlbUNvbXBvbmVudCB9IGZyb20gJy4uL2Jhc2UtaXRlbS9iYXNlLWl0ZW0uY29tcG9uZW50JztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmaWx0ZXItaXRlbS1hdXRvY29tcGxldGVjaGlwcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdXRvY29tcGxldGVjaGlwcy5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBBdXRvY29tcGxldGVjaGlwc0NvbXBvbmVudCBleHRlbmRzIEJhc2VJdGVtQ29tcG9uZW50PEF1dG9jb21wbGV0ZUNoaXBzSXRlbT4ge1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByb3RlY3RlZCBfa3ZEaWZmZXJzOiBLZXlWYWx1ZURpZmZlcnMsXG4gICAgcHJvdGVjdGVkIF9jZDogQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gICkge1xuICAgIHN1cGVyKF9rdkRpZmZlcnMsIF9jZCk7XG4gIH1cblxuICBwdWJsaWMgYWRkQXV0b2NvbXBsZXRlQ2hpcEl0ZW0oZXZlbnQpIHtcbiAgICBpZiAoZXZlbnQuZGF0YSAmJiB0aGlzLml0ZW0ubW9kZWwuaW5kZXhPZihldmVudC5kYXRhLnZhbHVlKSA9PT0gLTEpIHtcbiAgICAgIHRoaXMuaXRlbS5tb2RlbC5wdXNoKGV2ZW50LmRhdGEpO1xuICAgICAgdGhpcy5pdGVtQ2hhbmdlKCk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIHJlbW92ZUF1dG9jb21wbGV0ZUNoaXBJdGVtKGV2ZW50KSB7XG4gICAgYXJyYXlSZW1vdmUodGhpcy5pdGVtLm1vZGVsLCB7IHZhbHVlOiBldmVudC5kYXRhLnZhbHVlIH0pO1xuICAgIHRoaXMuaXRlbUNoYW5nZSgpO1xuICB9XG5cbiAgcHVibGljIGNsZWFyQXV0b2NvbXBsZXRlQ2hpcEl0ZW0oKSB7XG4gICAgdGhpcy5pdGVtLmNsZWFyKCk7XG4gICAgdGhpcy5pdGVtQ2hhbmdlKCk7XG4gIH1cblxuICBwdWJsaWMgZmV0Y2ggPSAoa2V5d29yZCkgPT4ge1xuICAgIHJldHVybiB0aGlzLml0ZW0udmFsdWVzRm4oa2V5d29yZCwgdGhpcy5pdGVtLmZpbHRlcik7XG4gIH07XG5cbiAgcHVibGljIGNvbXBhcmVJdGVtcyhpdGVtMSwgaXRlbTIpOiBib29sZWFuIHtcbiAgICByZXR1cm4gaXRlbTE/LnZhbHVlID09PSBpdGVtMj8udmFsdWU7XG4gIH1cbn1cbiIsIjxmcy1hdXRvY29tcGxldGUtY2hpcHNcbiAgW2ZzRmlsdGVyRm9jdXNUcmlnZ2VyXT1cIml0ZW1cIlxuICBbZmV0Y2hdPVwiZmV0Y2hcIlxuICBbbmdNb2RlbF09XCJpdGVtLm1vZGVsXCJcbiAgKHNlbGVjdGVkKT1cImFkZEF1dG9jb21wbGV0ZUNoaXBJdGVtKCRldmVudClcIlxuICAocmVtb3ZlZCk9XCJyZW1vdmVBdXRvY29tcGxldGVDaGlwSXRlbSgkZXZlbnQpXCJcbiAgKGNsZWFyKT1cImNsZWFyQXV0b2NvbXBsZXRlQ2hpcEl0ZW0oKVwiXG4gIFthbGxvd1RleHRdPVwiZmFsc2VcIlxuICBbZmV0Y2hPbkZvY3VzXT1cIml0ZW0uZmV0Y2hPbkZvY3VzXCJcbiAgW3BsYWNlaG9sZGVyXT1cImxhYmVsXCJcbiAgW2NoaXBJbWFnZV09XCJpdGVtLmNoaXBJbWFnZVwiXG4gIFtjaGlwQ29sb3JdPVwiaXRlbS5jaGlwQ29sb3JcIlxuICBbY2hpcEljb25Db2xvcl09XCJpdGVtLmNoaXBJY29uXCJcbiAgW2NoaXBCYWNrZ3JvdW5kXT1cIml0ZW0uY2hpcEJhY2tncm91bmRcIlxuICBbY2hpcEljb25dPVwiaXRlbS5jaGlwSWNvblwiXG4gIFtjaGlwQ2xhc3NdPVwiaXRlbS5jaGlwQ2xhc3NcIlxuICBbYWxsb3dDbGVhcl09XCJpdGVtLnNob3dDbGVhclwiXG4gIFtyZW1vdmFibGVdPVwiaXRlbS5zaG93Q2xlYXJcIlxuICBbY29tcGFyZVdpdGhdPVwiY29tcGFyZUl0ZW1zXCJcbiAgW3BhbmVsV2lkdGhdPVwiMzAwXCJcbiAgbmFtZT1cIm1vZGVsXCI+XG4gIDxuZy10ZW1wbGF0ZSBmc0F1dG9jb21wbGV0ZU9iamVjdCBsZXQtb2JqZWN0PVwib2JqZWN0XCI+XG4gICAge3sgb2JqZWN0Lm5hbWUgfX1cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvZnMtYXV0b2NvbXBsZXRlLWNoaXBzPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlY2hpcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9jb21wb25lbnRzL2ZpbHRlcnMtaXRlbS9hdXRvY29tcGxldGVjaGlwcy9hdXRvY29tcGxldGVjaGlwcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvZmlsdGVycy1pdGVtL2F1dG9jb21wbGV0ZWNoaXBzL2F1dG9jb21wbGV0ZWNoaXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxlQUFlLEdBQ2hCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxNQUFNLElBQUksV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFHM0QsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7OztBQVFyRSxNQUFNLE9BQU8sMEJBQTJCLFNBQVEsaUJBQXdDO0lBRzFFO0lBQ0E7SUFGWixZQUNZLFVBQTJCLEVBQzNCLEdBQXNCO1FBRWhDLEtBQUssQ0FBQyxVQUFVLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFIYixlQUFVLEdBQVYsVUFBVSxDQUFpQjtRQUMzQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUdsQyxDQUFDO0lBRU0sdUJBQXVCLENBQUMsS0FBSztRQUNsQyxJQUFJLEtBQUssQ0FBQyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNuRSxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQztJQUVNLDBCQUEwQixDQUFDLEtBQUs7UUFDckMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsS0FBSyxFQUFFLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVNLHlCQUF5QjtRQUM5QixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRU0sS0FBSyxHQUFHLENBQUMsT0FBTyxFQUFFLEVBQUU7UUFDekIsT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN2RCxDQUFDLENBQUM7SUFFSyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUs7UUFDOUIsT0FBTyxLQUFLLEVBQUUsS0FBSyxLQUFLLEtBQUssRUFBRSxLQUFLLENBQUM7SUFDdkMsQ0FBQzt1R0FoQ1UsMEJBQTBCOzJGQUExQiwwQkFBMEIsNEZDbEJ2Qyx5eUJBd0J3Qjs7MkZETlgsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNFLCtCQUErQixtQkFFeEIsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBLZXlWYWx1ZURpZmZlcnMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyByZW1vdmUgYXMgYXJyYXlSZW1vdmUgfSBmcm9tICdAZmlyZXN0aXRjaC9jb21tb24nO1xuXG5pbXBvcnQgeyBBdXRvY29tcGxldGVDaGlwc0l0ZW0gfSBmcm9tICcuLi8uLi8uLi9tb2RlbHMvaXRlbXMvYXV0b2NvbXBsZXRlLWNoaXBzLWl0ZW0nO1xuaW1wb3J0IHsgQmFzZUl0ZW1Db21wb25lbnQgfSBmcm9tICcuLi9iYXNlLWl0ZW0vYmFzZS1pdGVtLmNvbXBvbmVudCc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZmlsdGVyLWl0ZW0tYXV0b2NvbXBsZXRlY2hpcHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vYXV0b2NvbXBsZXRlY2hpcHMuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQXV0b2NvbXBsZXRlY2hpcHNDb21wb25lbnQgZXh0ZW5kcyBCYXNlSXRlbUNvbXBvbmVudDxBdXRvY29tcGxldGVDaGlwc0l0ZW0+IHtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcm90ZWN0ZWQgX2t2RGlmZmVyczogS2V5VmFsdWVEaWZmZXJzLFxuICAgIHByb3RlY3RlZCBfY2Q6IENoYW5nZURldGVjdG9yUmVmLFxuICApIHtcbiAgICBzdXBlcihfa3ZEaWZmZXJzLCBfY2QpO1xuICB9XG5cbiAgcHVibGljIGFkZEF1dG9jb21wbGV0ZUNoaXBJdGVtKGV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LmRhdGEgJiYgdGhpcy5pdGVtLm1vZGVsLmluZGV4T2YoZXZlbnQuZGF0YS52YWx1ZSkgPT09IC0xKSB7XG4gICAgICB0aGlzLml0ZW0ubW9kZWwucHVzaChldmVudC5kYXRhKTtcbiAgICAgIHRoaXMuaXRlbUNoYW5nZSgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZW1vdmVBdXRvY29tcGxldGVDaGlwSXRlbShldmVudCkge1xuICAgIGFycmF5UmVtb3ZlKHRoaXMuaXRlbS5tb2RlbCwgeyB2YWx1ZTogZXZlbnQuZGF0YS52YWx1ZSB9KTtcbiAgICB0aGlzLml0ZW1DaGFuZ2UoKTtcbiAgfVxuXG4gIHB1YmxpYyBjbGVhckF1dG9jb21wbGV0ZUNoaXBJdGVtKCkge1xuICAgIHRoaXMuaXRlbS5jbGVhcigpO1xuICAgIHRoaXMuaXRlbUNoYW5nZSgpO1xuICB9XG5cbiAgcHVibGljIGZldGNoID0gKGtleXdvcmQpID0+IHtcbiAgICByZXR1cm4gdGhpcy5pdGVtLnZhbHVlc0ZuKGtleXdvcmQsIHRoaXMuaXRlbS5maWx0ZXIpO1xuICB9O1xuXG4gIHB1YmxpYyBjb21wYXJlSXRlbXMoaXRlbTEsIGl0ZW0yKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIGl0ZW0xPy52YWx1ZSA9PT0gaXRlbTI/LnZhbHVlO1xuICB9XG59XG4iLCI8ZnMtYXV0b2NvbXBsZXRlLWNoaXBzXG4gIFtmc0ZpbHRlckZvY3VzVHJpZ2dlcl09XCJpdGVtXCJcbiAgW2ZldGNoXT1cImZldGNoXCJcbiAgW25nTW9kZWxdPVwiaXRlbS5tb2RlbFwiXG4gIChzZWxlY3RlZCk9XCJhZGRBdXRvY29tcGxldGVDaGlwSXRlbSgkZXZlbnQpXCJcbiAgKHJlbW92ZWQpPVwicmVtb3ZlQXV0b2NvbXBsZXRlQ2hpcEl0ZW0oJGV2ZW50KVwiXG4gIChjbGVhcik9XCJjbGVhckF1dG9jb21wbGV0ZUNoaXBJdGVtKClcIlxuICBbYWxsb3dUZXh0XT1cImZhbHNlXCJcbiAgW2xhYmVsXT1cImxhYmVsXCJcbiAgW3NpemVdPVwiJ3NtYWxsJ1wiXG4gIFtjaGlwSW1hZ2VdPVwiaXRlbS5jaGlwSW1hZ2VcIlxuICBbY2hpcENvbG9yXT1cIml0ZW0uY2hpcENvbG9yXCJcbiAgW2NoaXBJY29uQ29sb3JdPVwiaXRlbS5jaGlwSWNvblwiXG4gIFtjaGlwQmFja2dyb3VuZF09XCJpdGVtLmNoaXBCYWNrZ3JvdW5kXCJcbiAgW2NoaXBJY29uXT1cIml0ZW0uY2hpcEljb25cIlxuICBbY2hpcENsYXNzXT1cIml0ZW0uY2hpcENsYXNzXCJcbiAgW2FsbG93Q2xlYXJdPVwiaXRlbS5zaG93Q2xlYXJcIlxuICBbcmVtb3ZhYmxlXT1cIml0ZW0uc2hvd0NsZWFyXCJcbiAgW2NvbXBhcmVXaXRoXT1cImNvbXBhcmVJdGVtc1wiXG4gIFtwYW5lbFdpZHRoXT1cIjMwMFwiXG4gIG5hbWU9XCJtb2RlbFwiPlxuICA8bmctdGVtcGxhdGUgZnNBdXRvY29tcGxldGVPYmplY3QgbGV0LW9iamVjdD1cIm9iamVjdFwiPlxuICAgIHt7IG9iamVjdC5uYW1lIH19XG4gIDwvbmctdGVtcGxhdGU+XG48L2ZzLWF1dG9jb21wbGV0ZS1jaGlwcz4iXX0=

package/fesm2022/firestitch-filter.mjs

@@ -3394,11 +3394,11 @@ 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  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\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>\n", 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", "placeholder", "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", "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,
-            args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, 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  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\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>\n" }]
+            args: [{ selector: 'filter-item-autocompletechips', changeDetection: ChangeDetectionStrategy.OnPush, 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>" }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
 
 class DateComponent extends BaseItemComponent {
@@ -4400,7 +4400,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", "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          <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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,