@firestitch/filter 18.0.19 → 18.0.20

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 | RangeItem | DateRangeItem | DateTimeRangeItem | ChipsItem | WeekItem | AutocompleteItem | AutocompleteChipsItem | DateItem | DateTimeItem | 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): RangeItem | DateRangeItem | DateTimeRangeItem | ChipsItem | TextItem | WeekItem | AutocompleteItem | AutocompleteChipsItem | DateItem | DateTimeItem | CheckboxItem | import("../models/items/select/simple-select-item").SimpleSelectItem | import("../models/items/select/multiple-select-item").MultipleSelectItem;

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

@@ -69,11 +69,11 @@ export class FsFilterChipComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer}:host{display:flex;flex-wrap:wrap;gap:5px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: i4.FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer;min-width:0}:host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "outlined", "icon", "image", "selected", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: i4.FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer}:host{display:flex;flex-wrap:wrap;gap:5px}\n"] }]
+            args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer;min-width:0}:host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.FocusControllerService }], propDecorators: { item: [{
                 type: Input
             }] } });

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

@@ -35,7 +35,7 @@ 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  [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", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "paddless", "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", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "paddless", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "groupBy", "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,

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

@@ -21,7 +21,7 @@ export class ChipsComponent extends BaseItemComponent {
         return String(modelValue.value) === String(chipValue.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips \n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      <fs-chip \n          *ngFor=\"let value of item.values\"\n          [value]=\"value\"\n          [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { kind: "component", type: i3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "directive", type: i5.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips \n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      <fs-chip \n          *ngFor=\"let value of item.values\"\n          [value]=\"value\"\n          [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple", "sortable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "outlined", "icon", "image", "selected", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "directive", type: i5.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,

package/esm2022/app/components/saved-filter/saved-filter-manage/saved-filter-manage.component.mjs

@@ -33,7 +33,7 @@ export class FsFilterSavedFilterManageComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterSavedFilterManageComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterSavedFilterManageComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage saved filters\n</h1>\n<div mat-dialog-content>\n  <div\n      cdkDropList \n      [cdkDropListData]=\"savedFilters\"\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\">  \n    <ng-container \n        *ngFor=\"let savedFilter of savedFilters\">\n      <div class=\"chip-container\">\n        <fs-chip \n            class=\"saved-filter-manage-chip\"\n            cdkDrag\n            (removed)=\"remove(savedFilter)\">\n          {{savedFilter.name}}\n        </fs-chip>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>\n", styles: [".chip-container{padding:5px 0}::ng-deep fs-chip.saved-filter-manage-chip{cursor:move;width:100%;box-sizing:border-box}::ng-deep fs-chip.saved-filter-manage-chip .fs-chip-content{flex:1}.cdk-drag-preview{box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "directive", type: i6.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterSavedFilterManageComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage saved filters\n</h1>\n<div mat-dialog-content>\n  <div\n      cdkDropList \n      [cdkDropListData]=\"savedFilters\"\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\">  \n    <ng-container \n        *ngFor=\"let savedFilter of savedFilters\">\n      <div class=\"chip-container\">\n        <fs-chip \n            class=\"saved-filter-manage-chip\"\n            cdkDrag\n            (removed)=\"remove(savedFilter)\">\n          {{savedFilter.name}}\n        </fs-chip>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>\n", styles: [".chip-container{padding:5px 0}::ng-deep fs-chip.saved-filter-manage-chip{cursor:move;width:100%;box-sizing:border-box}::ng-deep fs-chip.saved-filter-manage-chip .fs-chip-content{flex:1}.cdk-drag-preview{box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "outlined", "icon", "image", "selected", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "directive", type: i6.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterSavedFilterManageComponent, decorators: [{
             type: Component,

package/fesm2022/firestitch-filter.mjs

@@ -2808,11 +2808,11 @@ class FsFilterChipComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer}:host{display:flex;flex-wrap:wrap;gap:5px}\n"], dependencies: [{ 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: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer;min-width:0}:host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}\n"], dependencies: [{ 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: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "outlined", "icon", "image", "selected", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }, { 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: FsFilterChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer}:host{display:flex;flex-wrap:wrap;gap:5px}\n"] }]
+            args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n        *ngIf=\"item.model?.min || item.model?.from\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('from')\"\n        (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n      </ng-template>\n    </fs-chip>\n    <fs-chip\n        *ngIf=\"item.model?.max || item.model?.to\"\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem('to')\"\n        (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n      </ng-template>\n    </fs-chip>\n  </ng-container>\n  <ng-template #defaultChip>\n    <fs-chip\n        [value]=\"item\"\n        [selectable]=\"false\"\n        [removable]=\"item.showClear\"\n        size=\"small\"\n        (click)=\"focusOnItem()\"\n        (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\">\n      </ng-template>\n    </fs-chip>\n  </ng-template>\n  <ng-template\n      #chipContent\n      let-item=\"item\"\n      let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content\n        [item]=\"item\"\n        [type]=\"type\">\n      </fs-filter-chip-content>\n    </ng-container>\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer;min-width:0}:host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FocusControllerService }], propDecorators: { item: [{
                 type: Input
             }] } });
@@ -3239,7 +3239,7 @@ class ChipsComponent extends BaseItemComponent {
         return String(modelValue.value) === String(chipValue.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips \n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      <fs-chip \n          *ngFor=\"let value of item.values\"\n          [value]=\"value\"\n          [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: i3$3.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { kind: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: i4$2.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { 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])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips \n        [(ngModel)]=\"item.model\"\n        [compare]=\"compareFn\"\n        [multiple]=\"item.multiple\">\n      <fs-chip \n          *ngFor=\"let value of item.values\"\n          [value]=\"value\"\n          [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: i3$3.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple", "sortable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "outlined", "icon", "image", "selected", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: i4$2.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { 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])" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
@@ -3387,7 +3387,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         return item1?.value === item2?.value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  [allowText]=\"false\"\n  [label]=\"label\"\n  [size]=\"'small'\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"item.chipColor\"\n  [chipIconColor]=\"item.chipIcon\"\n  [chipBackground]=\"item.chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.showClear\"\n  [removable]=\"item.showClear\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "paddless", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "panelWidth", "panelClass", "compareWith"], outputs: ["selected", "removed", "reordered", "clear"] }, { kind: "directive", type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }, { kind: "directive", type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  [allowText]=\"false\"\n  [label]=\"label\"\n  [size]=\"'small'\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"item.chipColor\"\n  [chipIconColor]=\"item.chipIcon\"\n  [chipBackground]=\"item.chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.showClear\"\n  [removable]=\"item.showClear\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>", dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "appearance", "floatLabel", "readonly", "size", "label", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "paddless", "initOnClick", "fetchOnFocus", "multiple", "confirm", "disabled", "groupBy", "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,
@@ -4483,7 +4483,7 @@ class FsFilterSavedFilterManageComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterSavedFilterManageComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterSavedFilterManageComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage saved filters\n</h1>\n<div mat-dialog-content>\n  <div\n      cdkDropList \n      [cdkDropListData]=\"savedFilters\"\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\">  \n    <ng-container \n        *ngFor=\"let savedFilter of savedFilters\">\n      <div class=\"chip-container\">\n        <fs-chip \n            class=\"saved-filter-manage-chip\"\n            cdkDrag\n            (removed)=\"remove(savedFilter)\">\n          {{savedFilter.name}}\n        </fs-chip>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>\n", styles: [".chip-container{padding:5px 0}::ng-deep fs-chip.saved-filter-manage-chip{cursor:move;width:100%;box-sizing:border-box}::ng-deep fs-chip.saved-filter-manage-chip .fs-chip-content{flex:1}.cdk-drag-preview{box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "directive", type: i9.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFilterSavedFilterManageComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>\n  Manage saved filters\n</h1>\n<div mat-dialog-content>\n  <div\n      cdkDropList \n      [cdkDropListData]=\"savedFilters\"\n      cdkDropListOrientation=\"vertical\"\n      (cdkDropListDropped)=\"drop($event)\">  \n    <ng-container \n        *ngFor=\"let savedFilter of savedFilters\">\n      <div class=\"chip-container\">\n        <fs-chip \n            class=\"saved-filter-manage-chip\"\n            cdkDrag\n            (removed)=\"remove(savedFilter)\">\n          {{savedFilter.name}}\n        </fs-chip>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<div mat-dialog-actions>\n  <button \n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n    Done\n  </button>\n</div>\n", styles: [".chip-container{padding:5px 0}::ng-deep fs-chip.saved-filter-manage-chip{cursor:move;width:100%;box-sizing:border-box}::ng-deep fs-chip.saved-filter-manage-chip .fs-chip-content{flex:1}.cdk-drag-preview{box-sizing:border-box}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "outlined", "icon", "image", "selected", "size"], outputs: ["selectedToggled", "removed"] }, { kind: "directive", type: i9.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterSavedFilterManageComponent, decorators: [{
             type: Component,