@firestitch/filter 12.0.6 → 12.1.2

package/fesm2015/firestitch-filter.js

@@ -10,6 +10,8 @@ import { Model, Alias } from 'tsmodels';
 import { filter, isEmpty, getNormalizedPath, list, remove, FsCommonModule } from '@firestitch/common';
 import { simpleFormat, format } from '@firestitch/date';
 import { parseISO, isValid, isDate, isEqual } from 'date-fns';
+import * as i3$3 from '@firestitch/datepicker';
+import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/material/dialog';
@@ -23,11 +25,11 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i3$1 from '@angular/material/core';
 import * as i1$4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i7 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
-import * as i4 from '@angular/material/input';
+import * as i3$2 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i4$2 from '@angular/material/checkbox';
@@ -37,8 +39,6 @@ import * as i2$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i3$2 from '@firestitch/datepicker';
-import { FsDatePickerModule } from '@firestitch/datepicker';
 import * as i2$1 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
 import * as i1$5 from '@firestitch/label';
@@ -46,21 +46,21 @@ import { FsLabelModule } from '@firestitch/label';
 import { FsScrollModule } from '@firestitch/scroll';
 import * as i4$1 from '@firestitch/autocomplete';
 import { FsAutocompleteModule } from '@firestitch/autocomplete';
-import * as i5$1 from '@firestitch/autocomplete-chips';
+import * as i5 from '@firestitch/autocomplete-chips';
 import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
 import * as i6$2 from '@firestitch/mask';
 import { FsMaskModule } from '@firestitch/mask';
-import * as i3$3 from '@firestitch/menu';
+import * as i3$4 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
 import * as i6$3 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
+import * as i4$3 from '@firestitch/file';
+import { FsFileModule } from '@firestitch/file';
 import * as i1$6 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i6$1 from '@angular/flex-layout/extended';
 import * as i2$2 from '@angular/flex-layout/flex';
 import * as i1$7 from '@angular/cdk/layout';
-import * as i4$3 from '@firestitch/file';
-import { FsFileModule } from '@firestitch/file';
 
 var ItemType;
 (function (ItemType) {
@@ -70,6 +70,7 @@ var ItemType;
     ItemType["Date"] = "date";
     ItemType["DateTime"] = "datetime";
     ItemType["DateRange"] = "daterange";
+    ItemType["Week"] = "week";
     ItemType["DateTimeRange"] = "datetimerange";
     ItemType["AutoComplete"] = "autocomplete";
     ItemType["AutoCompleteChips"] = "autocompletechips";
@@ -418,8 +419,8 @@ class SimpleSelectItem extends BaseSelectItem {
     }
 }
 
-const SORT_BY_FIELD = 'system_sort_by';
-const SORT_DIRECTION_FIELD = 'system_sort_direction';
+const SORT_BY_FIELD = 'sortName';
+const SORT_DIRECTION_FIELD = 'sortDirection';
 class FsFilterConfig extends Model {
     constructor(data = {}) {
         super();
@@ -1194,6 +1195,102 @@ class TextItem extends BaseItem {
     }
 }
 
+function parseDate(value) {
+    if (value && (!isDate(value) || !isValid(value))) {
+        return parseISO(value);
+    }
+    return value;
+}
+
+class WeekItem extends BaseItem {
+    static create(config) {
+        return new WeekItem(config, null);
+    }
+    get value() {
+        let value = clone(this.model);
+        if (!isObject(this.model) ||
+            (isEmpty(this.model.from, { zero: true }) && isEmpty(this.model.to, { zero: true }))) {
+            value = null;
+        }
+        if (isEmpty(value, { zero: true })) {
+            return null;
+        }
+        let from = value.from;
+        let to = value.to;
+        const period = value.period;
+        value = {};
+        if (from) {
+            if (isString(from)) {
+                from = parseISO(from);
+            }
+            if (isValid(from) && isDate(from)) {
+                value.from = from;
+            }
+        }
+        if (to) {
+            if (isString(to)) {
+                to = parseISO(to);
+            }
+            if (isValid(to) && isDate(to)) {
+                value.to = to;
+            }
+        }
+        if (period) {
+            if (isString(period)) {
+                value.period = parseInt(period, 10);
+            }
+            else {
+                value.period = period;
+            }
+        }
+        return value;
+    }
+    get queryObject() {
+        const value = this.value;
+        const name = this.name;
+        const paramFromName = getRangeName('camel', name, 'from');
+        const paramToName = getRangeName('camel', name, 'to');
+        const paramPeriodName = `${name}Period`;
+        return {
+            [paramFromName]: (value === null || value === void 0 ? void 0 : value.from) || null,
+            [paramToName]: (value === null || value === void 0 ? void 0 : value.to) || null,
+            [paramPeriodName]: (value === null || value === void 0 ? void 0 : value.period) || null,
+        };
+    }
+    get persistanceObject() {
+        const query = this.queryObject;
+        const name = this.name;
+        const paramFromName = getRangeName('camel', name, 'from');
+        const paramFromValue = query[paramFromName] && simpleFormat(query[paramFromName]) || query[paramFromName];
+        const paramToName = getRangeName('camel', name, 'to');
+        const paramToValue = query[paramToName] && simpleFormat(query[paramToName]) || query[paramToName];
+        const paramPeriodName = `${name}Period`;
+        return {
+            [paramFromName]: paramFromValue,
+            [paramToName]: paramToValue,
+            [paramPeriodName]: query[paramPeriodName],
+        };
+    }
+    getChipsContent(type = null) {
+        return formatPeriodObject(this.value);
+    }
+    _validateModel() { }
+    _setModel(value) {
+        value.from = parseDate(value.from);
+        value.to = parseDate(value.to);
+        value.period = parseInt(value.period, 10) || null;
+        super._setModel(value);
+    }
+    _parseConfig(item) {
+        super._parseConfig(item);
+        this.seedDate = item.seedDate;
+    }
+    _init() { }
+    _clearValue(defaultValue = undefined) {
+        this.model = defaultValue !== null && defaultValue !== void 0 ? defaultValue : {};
+    }
+}
+
 function createFilterItem(item, config) {
     switch (item.type) {
         case ItemType.Select: {
@@ -1214,6 +1311,9 @@ function createFilterItem(item, config) {
         case ItemType.Date: {
             return DateItem.create(item);
         }
+        case ItemType.Week: {
+            return WeekItem.create(item);
+        }
         case ItemType.DateTime: {
             return DateTimeItem.create(item);
         }
@@ -1395,7 +1495,7 @@ class FsFilterItemsStore {
             .forEach((item) => {
             item.initValues(p[item.name]);
         });
-        this._createSortingItems(p);
+        this._initSortingItems(p);
         this.loadAsyncDefaults();
         this._subscribeToItemsChanges();
     }
@@ -1467,6 +1567,7 @@ class FsFilterItemsStore {
             this._itemsByName.set(item.name, filterItem);
             return filterItem;
         });
+        this._createSortingItems();
     }
     _subscribeToItemsChanges() {
         var _a;
@@ -1499,7 +1600,13 @@ class FsFilterItemsStore {
             this._setKeywordItem();
         });
     }
-    _createSortingItems(p) {
+    _initSortingItems(p) {
+        if (this.sortByItem && this.sortDirectionItem) {
+            this.sortByItem.initValues(p[this.sortByItem.name]);
+            this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
+        }
+    }
+    _createSortingItems() {
         var _a;
         if (((_a = this._config.sortValues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const sortByItem = {
@@ -1512,7 +1619,6 @@ class FsFilterItemsStore {
                 sortByItem.default = this._config.sort.value;
             }
             this.sortByItem = new SimpleSelectItem(sortByItem, null);
-            this.sortByItem.initValues(p[this.sortByItem.name]);
             const sortDirectionItem = {
                 name: SORT_DIRECTION_FIELD,
                 type: ItemType.Select,
@@ -1526,7 +1632,6 @@ class FsFilterItemsStore {
                 sortDirectionItem.default = this._config.sort.direction;
             }
             this.sortDirectionItem = new SimpleSelectItem(sortDirectionItem, null);
-            this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
         }
     }
     _setKeywordItem() {
@@ -1571,6 +1676,12 @@ function parseItemValueFromStored(item, params, paramCase) {
             const to = params[getRangeName(item.case, item.name, 'to')];
             return { from: from, to: to };
         }
+        case ItemType.Week: {
+            const from = params[getRangeName('camel', item.name, 'from')];
+            const to = params[getRangeName('camel', item.name, 'to')];
+            const period = params[`${item.name}Period`];
+            return { from, to, period };
+        }
         case ItemType.Select: {
             if (item.multiple && !!param) {
                 const values = param.split(',');
@@ -1663,6 +1774,11 @@ function findItemWidthName(items, name) {
             return name === getRangeName(filterItem.case, filterItem.name, 'from') ||
                 name === getRangeName(filterItem.case, filterItem.name, 'to');
         }
+        else if (filterItem instanceof WeekItem) {
+            return name === getRangeName('camel', filterItem.name, 'from')
+                || name === getRangeName('camel', filterItem.name, 'to')
+                || name === `${filterItem.name}Period`;
+        }
         return filterItem.name === name;
     });
 }
@@ -1689,7 +1805,11 @@ class PersistanceParamsController extends FsPersistanceStore {
     restore() {
         super.restore();
         if (this._value) {
-            this._value.data = restoreItems(this._value.data, this._itemsStore.items, this._paramsCase);
+            this._value.data = restoreItems(this._value.data, [
+                ...this._itemsStore.items,
+                this._itemsStore.sortByItem,
+                this._itemsStore.sortDirectionItem,
+            ], this._paramsCase);
         }
     }
 }
@@ -1739,7 +1859,11 @@ class QueryParamsController {
      * Parse query and update filter values
      */
     fetchFromQueryParams() {
-        this._fetchedParams = restoreItems(this._route.snapshot.queryParams, this._itemsStore.items, this._paramsCase);
+        this._fetchedParams = restoreItems(this._route.snapshot.queryParams, [
+            ...this._itemsStore.items,
+            this._itemsStore.sortByItem,
+            this._itemsStore.sortDirectionItem,
+        ], this._paramsCase);
     }
 }
 QueryParamsController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryParamsController, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: FsFilterItemsStore }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1777,7 +1901,7 @@ class FsFilterSavedFilterEditComponent {
     }
 }
 FsFilterSavedFilterEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterSavedFilterEditComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-FsFilterSavedFilterEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterSavedFilterEditComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <h1 mat-dialog-title>\n    Save Filter\n  </h1>\n  <div mat-dialog-content>\n    <mat-form-field>\n      <mat-label>Save as</mat-label>\n      <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n        <mat-option value=\"new\">New filter</mat-option>\n        <mat-optgroup label=\"Saved filters:\">\n          <ng-container *ngFor=\"let filter of savedFilters\">\n            <mat-option [value]=\"filter\">{{ filter.name }}</mat-option>\n          </ng-container>\n        </mat-optgroup>\n      </mat-select>\n    </mat-form-field>\n    <br>\n    <mat-form-field *ngIf=\"saveAsFilter === 'new'\">\n      <mat-label>Name</mat-label>\n      <input matInput name=\"filter-name\" [(ngModel)]=\"savedFilterName\" required>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button\n            type=\"submit\"\n            color=\"primary\">\n      {{ saveAsFilter === 'new' ? 'Create' : 'Save' }}\n    </button>\n\n    <button mat-button\n            type=\"button\"\n            [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </div>\n</form>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i7.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFilterSavedFilterEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterSavedFilterEditComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <h1 mat-dialog-title>\n    Save Filter\n  </h1>\n  <div mat-dialog-content>\n    <mat-form-field>\n      <mat-label>Save as</mat-label>\n      <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n        <mat-option value=\"new\">New filter</mat-option>\n        <mat-optgroup label=\"Saved filters:\">\n          <ng-container *ngFor=\"let filter of savedFilters\">\n            <mat-option [value]=\"filter\">{{ filter.name }}</mat-option>\n          </ng-container>\n        </mat-optgroup>\n      </mat-select>\n    </mat-form-field>\n    <br>\n    <mat-form-field *ngIf=\"saveAsFilter === 'new'\">\n      <mat-label>Name</mat-label>\n      <input matInput name=\"filter-name\" [(ngModel)]=\"savedFilterName\" required>\n    </mat-form-field>\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button\n            type=\"submit\"\n            color=\"primary\">\n      {{ saveAsFilter === 'new' ? 'Create' : 'Save' }}\n    </button>\n\n    <button mat-button\n            type=\"button\"\n            [mat-dialog-close]=\"null\">\n      Cancel\n    </button>\n  </div>\n</form>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i7.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterSavedFilterEditComponent, decorators: [{
             type: Component,
             args: [{
@@ -2316,7 +2440,7 @@ class FocusToItemDirective {
         }
     }
 }
-FocusToItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusToItemDirective, deps: [{ token: i0.ElementRef }, { token: FocusControllerService }, { token: i2.MatSelect, optional: true, self: true }, { token: i3$2.FsDatePickerComponent, optional: true, self: true }, { token: i3$2.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3$2.DateRangePickerFromComponent, optional: true, self: true }, { token: i3$2.DateRangePickerToComponent, optional: true, self: true }, { token: i4$1.FsAutocompleteComponent, optional: true, self: true }, { token: i5$1.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+FocusToItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusToItemDirective, deps: [{ token: i0.ElementRef }, { token: FocusControllerService }, { token: i2.MatSelect, optional: true, self: true }, { token: i3$3.FsDatePickerComponent, optional: true, self: true }, { token: i3$3.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3$3.DateRangePickerFromComponent, optional: true, self: true }, { token: i3$3.DateRangePickerToComponent, optional: true, self: true }, { token: i4$1.FsAutocompleteComponent, optional: true, self: true }, { token: i5.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
 FocusToItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: { _item: ["fsFilterFocusTrigger", "_item"], _focusTargetType: ["focusTargetType", "_focusTargetType"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusToItemDirective, decorators: [{
             type: Directive,
@@ -2327,19 +2451,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$2.FsDatePickerComponent, decorators: [{
+                }] }, { type: i3$3.FsDatePickerComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$2.FsDateScrollPickerComponent, decorators: [{
+                }] }, { type: i3$3.FsDateScrollPickerComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$2.DateRangePickerFromComponent, decorators: [{
+                }] }, { type: i3$3.DateRangePickerFromComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$2.DateRangePickerToComponent, decorators: [{
+                }] }, { type: i3$3.DateRangePickerToComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -2347,7 +2471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i5$1.FsAutocompleteChipsComponent, decorators: [{
+                }] }, { type: i5.FsAutocompleteChipsComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -2391,7 +2515,7 @@ class TextComponent extends BaseItemComponent {
     }
 }
 TextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextComponent, selector: "filter-item-text", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n  <input matInput [formControl]=\"textControl\" [fsFilterFocusTrigger]=\"item\">\n  <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TextComponent, selector: "filter-item-text", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n  <input matInput [formControl]=\"textControl\" [fsFilterFocusTrigger]=\"item\">\n  <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextComponent, decorators: [{
             type: Component,
             args: [{
@@ -2456,7 +2580,7 @@ class SelectMultipleComponent {
     }
 }
 SelectMultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectMultipleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n      <mat-option\n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n          {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n      <mat-option\n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n          {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,
             args: [{
@@ -2491,7 +2615,7 @@ class SelectSimpleComponent {
     }
 }
 SelectSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectSimpleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectSimpleComponent, decorators: [{
             type: Component,
             args: [{
@@ -2516,7 +2640,7 @@ class SelectGroupsComponent {
     }
 }
 SelectGroupsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectGroupsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectGroupsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    <ng-container *ngFor=\"let selectItem of item.values\">\n      <ng-container *ngIf=\"selectItem[item.children]; else simpleOption\">\n        <mat-optgroup [label]=\"selectItem.name\">\n          <mat-option *ngFor=\"let subItem of selectItem[item.children]\"\n                      [value]=\"subItem.value\"\n                      [ngStyle]=\"selectItem.style\">\n            {{ subItem.name }}\n          </mat-option>\n        </mat-optgroup>\n      </ng-container>\n\n      <ng-template #simpleOption>\n        <mat-option\n        [value]=\"selectItem.value\"\n        [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      </ng-template>\n    </ng-container>\n  </mat-select>\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectGroupsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    [compareWith]=\"compare\">\n    <ng-container *ngFor=\"let selectItem of item.values\">\n      <ng-container *ngIf=\"selectItem[item.children]; else simpleOption\">\n        <mat-optgroup [label]=\"selectItem.name\">\n          <mat-option *ngFor=\"let subItem of selectItem[item.children]\"\n                      [value]=\"subItem.value\"\n                      [ngStyle]=\"selectItem.style\">\n            {{ subItem.name }}\n          </mat-option>\n        </mat-optgroup>\n      </ng-container>\n\n      <ng-template #simpleOption>\n        <mat-option\n        [value]=\"selectItem.value\"\n        [ngStyle]=\"selectItem.style\">\n          {{ selectItem.name }}\n        </mat-option>\n      </ng-template>\n    </ng-container>\n  </mat-select>\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectGroupsComponent, decorators: [{
             type: Component,
             args: [{
@@ -2580,7 +2704,7 @@ class ChipsComponent extends BaseItemComponent {
     }
 }
 ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 [(ngModel)]=\"item.model\"\n              [compare]=\"compareFn\"\n              [multiple]=\"item.multiple\">\n      <fs-chip *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"], components: [{ type: i1$5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i1$5.FsLabelComponent, selector: "fs-label" }, { type: i2$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: i2$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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 [(ngModel)]=\"item.model\"\n              [compare]=\"compareFn\"\n              [multiple]=\"item.multiple\">\n      <fs-chip *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"], components: [{ type: i1$5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i1$5.FsLabelComponent, selector: "fs-label" }, { type: i2$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: i2$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -2613,7 +2737,7 @@ class RangeComponent extends BaseItemComponent {
     }
 }
 RangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-RangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<span fxLayout=\"row\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>{{item.label[0]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'from'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.min\"\n           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #from\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n  <div class=\"spacer\"></div>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>{{item.label[1]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'to'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.max\"\n           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #to\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</span>\n", styles: [".spacer{width:15px}mat-form-field{min-width:initial;display:flex;width:auto}mat-form-field ::ng-deep .mat-form-field-infix{width:auto}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$2.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<span fxLayout=\"row\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>{{item.label[0]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'from'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.min\"\n           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #from\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n  <div class=\"spacer\"></div>\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>{{item.label[1]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'to'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.max\"\n           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #to\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</span>\n", styles: [".spacer{width:15px}mat-form-field{min-width:initial;display:flex;width:auto}mat-form-field ::ng-deep .mat-form-field-infix{width:auto}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i2$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$2.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -2644,7 +2768,7 @@ class AutocompleteComponent extends BaseItemComponent {
     }
 }
 AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"item.label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"item.label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -2689,7 +2813,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
     }
 }
 AutocompletechipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompletechipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"item.label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5$1.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "invalidTextMessage", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AutocompletechipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"item.label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "invalidTextMessage", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -2723,7 +2847,7 @@ class DateComponent extends BaseItemComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input matInput\n          fsDateScrollPicker\n           [fsFilterFocusTrigger]=\"item\"\n          [(ngModel)]=\"item.model\"\n          [maxYear]=\"item.maxYear\"\n          [showMonth]=\"showMonth\"\n          [showDay]=\"showDay\"\n          [showYear]=\"showYear\"\n          [clear]=\"item.clearAllowed\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$2.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "minutes", "format"], outputs: ["change"] }, { type: i3$2.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "showMonth", "showYear", "showDay", "maxDate"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n\n<ng-template #elseMode>\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <input matInput\n          fsDateScrollPicker\n           [fsFilterFocusTrigger]=\"item\"\n          [(ngModel)]=\"item.model\"\n          [maxYear]=\"item.maxYear\"\n          [showMonth]=\"showMonth\"\n          [showDay]=\"showDay\"\n          [showYear]=\"showYear\"\n          [clear]=\"item.clearAllowed\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{
@@ -2750,7 +2874,7 @@ class DateRangeComponent extends BaseItemComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$2.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$2.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_from\">\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>{{item.label[1]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'to'\"\n    [fsDateRangeTo]=\"item.name\"\n    [(ngModel)]=\"item.model.to\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.clearAllowed\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -2760,6 +2884,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
 
+class WeekComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+    }
+    ngOnInit() { }
+}
+WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.clearAllowed\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-week',
+                    templateUrl: './week.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
 class CheckboxComponent extends BaseItemComponent {
     constructor(_kvDiffers, _cd) {
         super(_kvDiffers, _cd);
@@ -2768,7 +2911,7 @@ class CheckboxComponent extends BaseItemComponent {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"], components: [{ type: i1$5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"], components: [{ type: i1$5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -2798,7 +2941,7 @@ class FilterItemComponent {
     }
 }
 FilterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"item\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"item\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"item\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"item\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"item\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"item\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"item\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"item\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"item\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"item\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"item\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"item\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"item\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"item\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"item\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -3349,7 +3492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class FsFilterActionKebabActionsComponent {
 }
 FsFilterActionKebabActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionKebabActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFilterActionKebabActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0, template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\n          <fs-file\n            class=\"action-button\"\n            [accept]=\"action.accept || '*'\"\n            [multiple]=\"action.multiple\"\n            [minWidth]=\"action.minWidth\"\n            [minHeight]=\"action.minHeight\"\n            [imageWidth]=\"action.maxWidth\"\n            [imageHeight]=\"action.maxHeight\"\n            (select)=\"action.fileSelected($event)\"\n            (error)=\"action.fileError($event)\"\n            (clicked)=\"action.click($event)\">\n            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n", styles: [".menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i4$3.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }], directives: [{ type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3$3.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFilterActionKebabActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0, template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\n          <fs-file\n            class=\"action-button\"\n            [accept]=\"action.accept || '*'\"\n            [multiple]=\"action.multiple\"\n            [minWidth]=\"action.minWidth\"\n            [minHeight]=\"action.minHeight\"\n            [imageWidth]=\"action.maxWidth\"\n            [imageHeight]=\"action.maxHeight\"\n            (select)=\"action.fileSelected($event)\"\n            (error)=\"action.fileError($event)\"\n            (clicked)=\"action.click($event)\">\n            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n", styles: [".menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i4$3.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }], directives: [{ type: i3$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3$4.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionKebabActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3369,7 +3512,7 @@ class FsFilterActionsComponent {
     }
 }
 FsFilterActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n        class=\"action-button\"\n        [accept]=\"action.accept || '*'\"\n        [multiple]=\"action.multiple\"\n        [minWidth]=\"action.minWidth\"\n        [minHeight]=\"action.minHeight\"\n        [imageWidth]=\"action.maxWidth\"\n        [imageHeight]=\"action.maxHeight\"\n        (select)=\"action.fileSelected($event)\"\n        (error)=\"action.fileError($event)\"\n        (clicked)=\"action.click($event)\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n        class=\"action-button\"\n        [accept]=\"action.accept || '*'\"\n        [multiple]=\"action.multiple\"\n        [minWidth]=\"action.minWidth\"\n        [minHeight]=\"action.minHeight\"\n        [imageWidth]=\"action.maxWidth\"\n        [imageHeight]=\"action.maxHeight\"\n        (select)=\"action.fileSelected($event)\"\n        (error)=\"action.fileError($event)\"\n        (clicked)=\"action.click($event)\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3549,7 +3692,7 @@ class FsFilterChipsComponent {
     }
 }
 FsFilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsFilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0, template: "<fs-chips [(ngModel)]=\"chips\">\n  <ng-container *ngFor=\"let item of filters\">\n    <ng-container *ngIf=\"(item.value$ | async) !== null\">\n      <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n    </ng-container>\n  </ng-container>\n</fs-chips>\n", styles: [""], components: [{ type: i2$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }], directives: [{ type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsFilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0, template: "<fs-chips [(ngModel)]=\"chips\">\n  <ng-container *ngFor=\"let item of filters\">\n    <ng-container *ngIf=\"(item.value$ | async) !== null\">\n      <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n    </ng-container>\n  </ng-container>\n</fs-chips>\n", styles: [""], components: [{ type: i2$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -4084,7 +4227,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         FsFilterItemsStore,
         SavedFiltersController,
         ActionsController,
-    ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<ng-container *ngIf=\"hasKeyword; else noKeywordFilter\">\n  <div class=\"filter-search-container\">\n    <div class=\"filter-input-field\">\n      <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n        <mat-form-field floatLabel=\"never\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n\n          <input\n            #searchTextInput\n            matInput\n            [formControl]=\"searchText\"\n            [placeholder]=\"searchPlaceholder\"\n            name=\"filter-input\"\n            (click)=\"filterInputEvent($event)\"\n            class=\"filter-input\">\n\n          <a matSuffix\n             *ngIf=\"searchText.value && showFilterInput && config.clear\"\n             (click)=\"clearSearchText($event)\"\n             href=\"javascript:void(0)\"\n             class=\"clear\">\n            <mat-icon>clear</mat-icon>\n          </a>\n\n          <a matSuffix\n             (click)=\"reload($event)\"\n             class=\"reload\"\n             *ngIf=\"config.reload\">\n            <mat-icon>refresh</mat-icon>\n          </a>\n        </mat-form-field>\n      </form>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n  <div class=\"status-actions\" *ngIf=\"keywordVisible$ | async\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noKeywordFilter>\n  <div class=\"filter-searchless-container\">\n    <div class=\"status-actions\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n</ng-template>\n\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n      <button\n        mat-button\n        class=\"filters-button\"\n        [ngClass]=\"{\n          'mat-raised-button': config.button.style == 'raised',\n          'mat-button': config.button.style == 'basic',\n          'mat-icon-button': config.button.style == 'icon'\n        }\"\n        (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n        type=\"button\"\n        [color]=\"config.button.color\">\n        <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n        {{ config.button.label }}\n      </button>\n    </ng-container>\n\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 #filterChips>\n  <fs-filter-chips\n    *ngIf=\"config.chips && hasFilterChips$ | async\"\n    class=\"filter-chips\"\n    [filters]=\"items\">\n  </fs-filter-chips>\n</ng-template>\n\n<ng-template #statusBarContainer>\n  <div class=\"status-bar\" *ngIf=\"statusBar\">\n    <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n  </div>\n</ng-template>\n", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .status-bar{overflow:hidden;text-overflow:ellipsis;line-height:17px;margin:4px 0}.fs-filter .filter-chips{display:block}.fs-filter .filter-searchless-container{display:flex}.fs-filter .filter-searchless-container .status-actions{flex-grow:1}.fs-filter .filter-searchless-container .status-actions>*:first-child{margin-top:0}.fs-filter fs-filter-chips{margin:5px 0}.fs-filter .filter-search-container{flex-direction:row;box-sizing:border-box;display:flex;flex:1 1 0;position:relative}.fs-filter .filter-search-container .search{top:8px;position:absolute;margin-left:1px;left:0}.fs-filter .filter-search-container .search mat-icon{transform:scale(.9)}.fs-filter .filter-search-container form{width:100%;height:100%}.fs-filter .filter-search-container .filter-input-field{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-search-container .filter-input-field .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix{align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a{display:flex;cursor:pointer;color:initial}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a:hover{color:inherit}.fs-filter .filter-search-container .filter-input-field .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .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){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<ng-container *ngIf=\"hasKeyword; else noKeywordFilter\">\n  <div class=\"filter-search-container\">\n    <div class=\"filter-input-field\">\n      <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n        <mat-form-field floatLabel=\"never\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n\n          <input\n            #searchTextInput\n            matInput\n            [formControl]=\"searchText\"\n            [placeholder]=\"searchPlaceholder\"\n            name=\"filter-input\"\n            (click)=\"filterInputEvent($event)\"\n            class=\"filter-input\">\n\n          <a matSuffix\n             *ngIf=\"searchText.value && showFilterInput && config.clear\"\n             (click)=\"clearSearchText($event)\"\n             href=\"javascript:void(0)\"\n             class=\"clear\">\n            <mat-icon>clear</mat-icon>\n          </a>\n\n          <a matSuffix\n             (click)=\"reload($event)\"\n             class=\"reload\"\n             *ngIf=\"config.reload\">\n            <mat-icon>refresh</mat-icon>\n          </a>\n        </mat-form-field>\n      </form>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n  <div class=\"status-actions\" *ngIf=\"keywordVisible$ | async\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noKeywordFilter>\n  <div class=\"filter-searchless-container\">\n    <div class=\"status-actions\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n</ng-template>\n\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n      <button\n        mat-button\n        class=\"filters-button\"\n        [ngClass]=\"{\n          'mat-raised-button': config.button.style == 'raised',\n          'mat-button': config.button.style == 'basic',\n          'mat-icon-button': config.button.style == 'icon'\n        }\"\n        (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n        type=\"button\"\n        [color]=\"config.button.color\">\n        <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n        {{ config.button.label }}\n      </button>\n    </ng-container>\n\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 #filterChips>\n  <fs-filter-chips\n    *ngIf=\"config.chips && hasFilterChips$ | async\"\n    class=\"filter-chips\"\n    [filters]=\"items\">\n  </fs-filter-chips>\n</ng-template>\n\n<ng-template #statusBarContainer>\n  <div class=\"status-bar\" *ngIf=\"statusBar\">\n    <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n  </div>\n</ng-template>\n", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .status-bar{overflow:hidden;text-overflow:ellipsis;line-height:17px;margin:4px 0}.fs-filter .filter-chips{display:block}.fs-filter .filter-searchless-container{display:flex}.fs-filter .filter-searchless-container .status-actions{flex-grow:1}.fs-filter .filter-searchless-container .status-actions>*:first-child{margin-top:0}.fs-filter fs-filter-chips{margin:5px 0}.fs-filter .filter-search-container{flex-direction:row;box-sizing:border-box;display:flex;flex:1 1 0;position:relative}.fs-filter .filter-search-container .search{top:8px;position:absolute;margin-left:1px;left:0}.fs-filter .filter-search-container .search mat-icon{transform:scale(.9)}.fs-filter .filter-search-container form{width:100%;height:100%}.fs-filter .filter-search-container .filter-input-field{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-search-container .filter-input-field .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix{align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a{display:flex;cursor:pointer;color:initial}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a:hover{color:inherit}.fs-filter .filter-search-container .filter-input-field .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .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){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -4189,7 +4332,7 @@ class FsSavedFiltersMenuComponent {
     }
 }
 FsSavedFiltersMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
-FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { select: "select", clear: "clear", manage: "manage" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { select: "select", clear: "clear", manage: "manage" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSavedFiltersMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -4229,6 +4372,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         SelectMultipleComponent,
         ChipsComponent,
         TextComponent,
+        WeekComponent,
         RangeComponent,
         AutocompleteComponent,
         AutocompletechipsComponent,
@@ -4351,6 +4495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         SelectMultipleComponent,
                         ChipsComponent,
                         TextComponent,
+                        WeekComponent,
                         RangeComponent,
                         AutocompleteComponent,
                         AutocompletechipsComponent,