@firestitch/filter 9.9.6 → 12.0.0

package/fesm2015/firestitch-filter.js

@@ -1,39 +1,65 @@
-import { __decorate, __metadata, __param } from 'tslib';
-import { Injectable, Optional, Inject, Component, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef, HostListener, Input, Injector, Directive, EventEmitter, NgZone, Output, ContentChild, TemplateRef, ViewChild, ElementRef, HostBinding, ViewEncapsulation, KeyValueDiffers, Pipe, Self, NgModule } from '@angular/core';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { BehaviorSubject, Subject, isObservable, forkJoin, of, fromEvent, combineLatest, merge, timer } from 'rxjs';
-import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, skip, map, mapTo, startWith, delay } from 'rxjs/operators';
+import * as i0 from '@angular/core';
+import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, InjectionToken, Input, Directive, Self, Pipe, ViewChild, EventEmitter, Output, HostListener, TemplateRef, ViewEncapsulation, ContentChild, HostBinding, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { BehaviorSubject, Subject, isObservable, forkJoin, of, fromEvent, merge, timer, combineLatest } from 'rxjs';
+import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, delay, skip, mapTo, startWith, map } from 'rxjs/operators';
 import { isFunction, clone, isObject, isString, toString, pickBy } from 'lodash-es';
+import { __decorate, __metadata } from 'tslib';
 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 { Location, CommonModule } from '@angular/common';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { DrawerRef } from '@firestitch/drawer';
-import { FsPersistanceStore, FsStore, FsStoreModule } from '@firestitch/store';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i6 from '@firestitch/drawer';
+import * as i1 from '@firestitch/store';
+import { FsPersistanceStore, FsStoreModule, FsStore } from '@firestitch/store';
+import * as i1$3 from '@angular/material/form-field';
+import * as i2 from '@angular/material/select';
+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 { 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 { MatInput, MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
+import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import * as i2$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { FsDatePickerComponent, FsDateScrollPickerComponent, DateRangePickerFromComponent, DateRangePickerToComponent, FsDatePickerModule } from '@firestitch/datepicker';
+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';
 import { FsLabelModule } from '@firestitch/label';
 import { FsScrollModule } from '@firestitch/scroll';
-import { FsAutocompleteComponent, FsAutocompleteModule } from '@firestitch/autocomplete';
-import { FsAutocompleteChipsComponent, FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
+import * as i4$1 from '@firestitch/autocomplete';
+import { FsAutocompleteModule } from '@firestitch/autocomplete';
+import * as i5$1 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 { FsMenuModule } from '@firestitch/menu';
+import * as i6$3 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import { FsFormModule } from '@firestitch/form';
-import { OverlayRef, OverlayConfig, Overlay } from '@angular/cdk/overlay';
-import { BreakpointObserver } from '@angular/cdk/layout';
+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;
@@ -1207,7 +1233,7 @@ function createFilterItem(item, config) {
     }
 }
 
-let FsFilterItemsStore = class FsFilterItemsStore {
+class FsFilterItemsStore {
     constructor() {
         this.sortByItem = null;
         this.sortDirectionItem = null;
@@ -1500,11 +1526,12 @@ let FsFilterItemsStore = class FsFilterItemsStore {
             .items
             .find((item) => item.isTypeKeyword);
     }
-};
-FsFilterItemsStore = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [])
-], FsFilterItemsStore);
+}
+FsFilterItemsStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterItemsStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FsFilterItemsStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterItemsStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterItemsStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
 const QUERY_PARAM_DELIMITER = ':';
 
@@ -1633,7 +1660,7 @@ function findItemWidthName(items, name) {
 }
 
 const FILTER_STORE_KEY = 'fs-filter-persist';
-let PersistanceParamsController = class PersistanceParamsController extends FsPersistanceStore {
+class PersistanceParamsController extends FsPersistanceStore {
     constructor(_store, _route, _location, _itemsStore, _dialogRef, _drawerRef) {
         super(_store, _route);
         this._location = _location;
@@ -1657,28 +1684,18 @@ let PersistanceParamsController = class PersistanceParamsController extends FsPe
             this._value.data = restoreItems(this._value.data, this._itemsStore.items, this._paramsCase);
         }
     }
-};
-PersistanceParamsController.ctorParameters = () => [
-    { type: FsStore },
-    { type: ActivatedRoute },
-    { type: Location },
-    { type: FsFilterItemsStore },
-    { type: MatDialogRef, decorators: [{ type: Optional }] },
-    { type: DrawerRef, decorators: [{ type: Optional }] }
-];
-PersistanceParamsController = __decorate([
-    Injectable(),
-    __param(4, Optional()),
-    __param(5, Optional()),
-    __metadata("design:paramtypes", [FsStore,
-        ActivatedRoute,
-        Location,
-        FsFilterItemsStore,
-        MatDialogRef,
-        DrawerRef])
-], PersistanceParamsController);
+}
+PersistanceParamsController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceParamsController, deps: [{ token: i1.FsStore }, { token: i1$1.ActivatedRoute }, { token: i3.Location }, { token: FsFilterItemsStore }, { token: i1$2.MatDialogRef, optional: true }, { token: i6.DrawerRef, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+PersistanceParamsController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceParamsController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PersistanceParamsController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.FsStore }, { type: i1$1.ActivatedRoute }, { type: i3.Location }, { type: FsFilterItemsStore }, { type: i1$2.MatDialogRef, decorators: [{
+                    type: Optional
+                }] }, { type: i6.DrawerRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
-let QueryParamsController = class QueryParamsController {
+class QueryParamsController {
     constructor(_router, _route, _itemsStore) {
         this._router = _router;
         this._route = _route;
@@ -1716,20 +1733,14 @@ let QueryParamsController = class QueryParamsController {
     fetchFromQueryParams() {
         this._fetchedParams = restoreItems(this._route.snapshot.queryParams, this._itemsStore.items, this._paramsCase);
     }
-};
-QueryParamsController.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: FsFilterItemsStore }
-];
-QueryParamsController = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [Router,
-        ActivatedRoute,
-        FsFilterItemsStore])
-], QueryParamsController);
+}
+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 });
+QueryParamsController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryParamsController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueryParamsController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: FsFilterItemsStore }]; } });
 
-let FsFilterSavedFilterEditComponent = class FsFilterSavedFilterEditComponent {
+class FsFilterSavedFilterEditComponent {
     constructor(data, _dialogRef) {
         this.data = data;
         this._dialogRef = _dialogRef;
@@ -1756,19 +1767,19 @@ let FsFilterSavedFilterEditComponent = class FsFilterSavedFilterEditComponent {
         this.savedFilters = this.data.savedFilters;
         this._saveCallback = this.data.saveCallback;
     }
-};
-FsFilterSavedFilterEditComponent.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
-    { type: MatDialogRef }
-];
-FsFilterSavedFilterEditComponent = __decorate([
-    Component({
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __param(0, Inject(MAT_DIALOG_DATA)),
-    __metadata("design:paramtypes", [Object, MatDialogRef])
-], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterSavedFilterEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './saved-filter-edit.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$2.MatDialogRef }]; } });
 
 function buildQueryParams(flattenedParams, items) {
     items.forEach(filterItem => {
@@ -1797,7 +1808,7 @@ function buildQueryParams(flattenedParams, items) {
     return flattenedParams;
 }
 
-let SavedFiltersController = class SavedFiltersController {
+class SavedFiltersController {
     constructor(_itemsStore, _dialog) {
         this._itemsStore = _itemsStore;
         this._dialog = _dialog;
@@ -1944,18 +1955,14 @@ let SavedFiltersController = class SavedFiltersController {
     _setEnabledStatus(value) {
         this._enabled$.next(value);
     }
-};
-SavedFiltersController.ctorParameters = () => [
-    { type: FsFilterItemsStore },
-    { type: MatDialog }
-];
-SavedFiltersController = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [FsFilterItemsStore,
-        MatDialog])
-], SavedFiltersController);
+}
+SavedFiltersController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SavedFiltersController, deps: [{ token: FsFilterItemsStore }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+SavedFiltersController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SavedFiltersController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SavedFiltersController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: i1$2.MatDialog }]; } });
 
-let ExternalParamsController = class ExternalParamsController {
+class ExternalParamsController {
     constructor(_itemsStore, _persistanceStore, _queryParams, _savedFilters, _route) {
         this._itemsStore = _itemsStore;
         this._persistanceStore = _persistanceStore;
@@ -2001,6 +2008,21 @@ let ExternalParamsController = class ExternalParamsController {
         this._initPersistance();
         this._initQueryParams();
         this._initSavedFilters();
+        this.initItems();
+    }
+    setActiveSavedFilter(savedFilter) {
+        this.savedFiltersController.setActiveFilter(savedFilter);
+        if (savedFilter) {
+            this.reloadFiltersWithValues(savedFilter.filters, false);
+        }
+    }
+    reloadFiltersWithValues(params, shouldResetSavedFilters = true) {
+        this._shouldResetSavedFilters = shouldResetSavedFilters;
+        this._itemsStore.updateItemsWithValues(params);
+        this._saveQueryParams();
+        this._savePersistedParams();
+    }
+    initItems() {
         this._pending$.next(true);
         if (this._savedFilters.enabled) {
             this._savedFilters
@@ -2019,18 +2041,6 @@ let ExternalParamsController = class ExternalParamsController {
         }
         this._listenItemsChange();
     }
-    setActiveSavedFilter(savedFilter) {
-        this.savedFiltersController.setActiveFilter(savedFilter);
-        if (savedFilter) {
-            this.reloadFiltersWithValues(savedFilter.filters, false);
-        }
-    }
-    reloadFiltersWithValues(params, shouldResetSavedFilters = true) {
-        this._shouldResetSavedFilters = shouldResetSavedFilters;
-        this._itemsStore.updateItemsWithValues(params);
-        this._saveQueryParams();
-        this._savePersistedParams();
-    }
     _initItemsValues() {
         this._itemsStore.initItemValues(this.params);
         this._saveQueryParams();
@@ -2092,22 +2102,12 @@ let ExternalParamsController = class ExternalParamsController {
         }), targetItems);
         this._persistanceStore.save(params);
     }
-};
-ExternalParamsController.ctorParameters = () => [
-    { type: FsFilterItemsStore },
-    { type: PersistanceParamsController },
-    { type: QueryParamsController },
-    { type: SavedFiltersController },
-    { type: ActivatedRoute }
-];
-ExternalParamsController = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [FsFilterItemsStore,
-        PersistanceParamsController,
-        QueryParamsController,
-        SavedFiltersController,
-        ActivatedRoute])
-], ExternalParamsController);
+}
+ExternalParamsController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExternalParamsController, deps: [{ token: FsFilterItemsStore }, { token: PersistanceParamsController }, { token: QueryParamsController }, { token: SavedFiltersController }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+ExternalParamsController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExternalParamsController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ExternalParamsController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: PersistanceParamsController }, { type: QueryParamsController }, { type: SavedFiltersController }, { type: i1$1.ActivatedRoute }]; } });
 
 const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
 
@@ -2152,199 +2152,69 @@ const FILTER_DRAWER_DATA = new InjectionToken('fs.filter-drawer-data');
 
 const FILTER_DRAWER_OVERLAY = new InjectionToken('fs.filter-drawer-overlay');
 
-let FilterDrawerComponent = class FilterDrawerComponent {
-    constructor(externalParams, _cd, _itemsStore, overlayRef, data) {
-        this.externalParams = externalParams;
+class BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        this._kvDiffers = _kvDiffers;
         this._cd = _cd;
-        this._itemsStore = _itemsStore;
-        this.overlayRef = overlayRef;
-        this.data = data;
         this.inline = false;
-        this.windowDesktop = false;
-        this._itemsStore.prepareItems();
-        this._clear = data.clear;
-        this._done = data.done;
-        this.updateWindowWidth();
-    }
-    updateWindowWidth() {
-        this.windowDesktop = window.innerWidth > 1200;
-    }
-    get items$() {
-        return this._itemsStore.visibleItems$;
-    }
-    get sortItem() {
-        return this._itemsStore.sortByItem;
-    }
-    get sortDirectionItem() {
-        return this._itemsStore.sortDirectionItem;
-    }
-    clear() {
-        this._clear();
-        // this.overlayRef.detach();
-    }
-    done() {
-        this._done();
-        this.overlayRef.detach();
-    }
-    backdropClick() {
-        this.done();
-    }
-};
-FilterDrawerComponent.ctorParameters = () => [
-    { type: ExternalParamsController },
-    { type: ChangeDetectorRef },
-    { type: FsFilterItemsStore },
-    { type: OverlayRef, decorators: [{ type: Inject, args: [FILTER_DRAWER_OVERLAY,] }] },
-    { type: undefined, decorators: [{ type: Inject, args: [FILTER_DRAWER_DATA,] }] }
-];
-__decorate([
-    HostListener('window:resize'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], FilterDrawerComponent.prototype, "updateWindowWidth", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FilterDrawerComponent.prototype, "inline", void 0);
-FilterDrawerComponent = __decorate([
-    Component({
-        template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item *ngFor=\"let filterItem of items$ | async\"\n                       class=\"filter-group\"\n                       [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortItem\">\n            </filter-item>\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions class=\"filter-actions\"\n                              *ngIf=\"(externalParams.pending$ | async) !== true\"\n                              (clear)=\"clear()\"\n                              (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n",
-        // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:rgba(0,0,0,.54)}.filters .filter .interface.interface-range,.filters .filter .interface.interface-range .mat-input-wrapper,.filters .filter .interface.interface-range input{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:0}"]
-    }),
-    __param(3, Inject(FILTER_DRAWER_OVERLAY)),
-    __param(4, Inject(FILTER_DRAWER_DATA)),
-    __metadata("design:paramtypes", [ExternalParamsController,
-        ChangeDetectorRef,
-        FsFilterItemsStore,
-        OverlayRef, Object])
-], FilterDrawerComponent);
-
-const FS_FILTER_META = new InjectionToken('fs.filter.meta', {
-    providedIn: 'root',
-    factory: () => {
-        return {
-            openedFilters: 0,
-        };
-    }
-});
-
-let FsFilterOverlayService = class FsFilterOverlayService {
-    constructor(_injector, _filterMeta, _overlay) {
-        this._injector = _injector;
-        this._filterMeta = _filterMeta;
-        this._overlay = _overlay;
-        this.detach$ = new Subject();
-        this.attach$ = new Subject();
         this._destroy$ = new Subject();
+        this._debouncer$ = new Subject();
+        this._kvDiffer = this._kvDiffers.find(this.item || {}).create();
+        this.listenWithDebounce();
     }
-    get isOpened() {
-        return !!this._overlayRef;
-    }
-    setClearFn(fn) {
-        this._clearFn = fn;
+    set item(value) {
+        this._item = value;
     }
-    setDoneFn(fn) {
-        this._doneFn = fn;
+    ;
+    get item() {
+        return this._item;
     }
-    close() {
-        if (this._overlayRef) {
-            this._overlayRef.detach();
-            this._overlayRef = null;
-            this.removeFilterClass();
+    ngDoCheck() {
+        if (this._kvDiffer) {
+            const changes = this._kvDiffer.diff(this.item);
+            if (changes) {
+                this._cd.detectChanges();
+            }
         }
     }
-    open() {
-        this._overlayRef = this._createOverlay();
-        this._overlayRef.backdropClick()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._overlayRef.detach();
-        });
-        this._overlayRef.detachments()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.detach$.next();
-        });
-        this._overlayRef.attachments()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.attach$.next();
-        });
-        this.addFilterClass();
-        return this.openPortalPreview();
-    }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    _createOverlay() {
-        const overlayConfig = new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: 'fs-filter-backdrop'
+    listenWithDebounce() {
+        this._debouncer$
+            .pipe(debounceTime(150), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.item.valueChanged();
         });
-        return this._overlay.create(overlayConfig);
-    }
-    openPortalPreview() {
-        const data = { done: this._doneFn, clear: this._clearFn };
-        const injector = this._createInjector(this._injector, data, this._overlayRef);
-        const containerPortal = new ComponentPortal(FilterDrawerComponent, undefined, injector);
-        const containerRef = this._overlayRef.attach(containerPortal);
-        return containerRef.instance;
-    }
-    _createInjector(parentInjector, data, overlayRef) {
-        const injectionTokens = new WeakMap([
-            [FILTER_DRAWER_DATA, data],
-            [FILTER_DRAWER_OVERLAY, overlayRef],
-        ]);
-        return new PortalInjector(parentInjector, injectionTokens);
-    }
-    removeFilterClass() {
-        this._filterMeta.openedFilters--;
-        if (this._filterMeta.openedFilters === 0) {
-            window.document.body.classList.remove('fs-filter-open');
-        }
     }
-    addFilterClass() {
-        this._filterMeta.openedFilters++;
-        if (this._filterMeta.openedFilters === 1) {
-            window.document.body.classList.add('fs-filter-open');
-        }
+    itemChange() {
+        this._debouncer$.next();
     }
-};
-FsFilterOverlayService.ctorParameters = () => [
-    { type: Injector },
-    { type: undefined, decorators: [{ type: Inject, args: [FS_FILTER_META,] }] },
-    { type: Overlay }
-];
-FsFilterOverlayService = __decorate([
-    Injectable(),
-    __param(1, Inject(FS_FILTER_META)),
-    __metadata("design:paramtypes", [Injector, Object, Overlay])
-], FsFilterOverlayService);
-
-let FilterStatusBarDirective = class FilterStatusBarDirective {
-};
-FilterStatusBarDirective = __decorate([
-    Directive({
-        selector: '[fsFilterStatusBar]',
-    })
-], FilterStatusBarDirective);
+}
+BaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'base-item',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
 
-let FocusControllerService = class FocusControllerService {
-    constructor(_filterOverlay) {
-        this._filterOverlay = _filterOverlay;
+class FocusControllerService {
+    constructor() {
         this._focusOn = new BehaviorSubject(null);
     }
     get focusOn$() {
         return this._focusOn.asObservable();
     }
     click(item, type = null) {
-        if (!this._filterOverlay.isOpened) {
-            this._filterOverlay.open();
-        }
         this._focusOn.next({ item, type });
     }
     listenFocusFor$(targetItem, targetType = null) {
@@ -2356,1804 +2226,1928 @@ let FocusControllerService = class FocusControllerService {
     clearFocus() {
         this._focusOn.next(null);
     }
-};
-FocusControllerService.ctorParameters = () => [
-    { type: FsFilterOverlayService }
-];
-FocusControllerService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [FsFilterOverlayService])
-], FocusControllerService);
-
-var ActionType;
-(function (ActionType) {
-    ActionType["Basic"] = "basic";
-    ActionType["Raised"] = "raised";
-    ActionType["Icon"] = "icon";
-    ActionType["Fab"] = "fab";
-    ActionType["MiniFab"] = "mini-fab";
-})(ActionType || (ActionType = {}));
-
-var ActionMode;
-(function (ActionMode) {
-    ActionMode["Button"] = "button";
-    ActionMode["Menu"] = "menu";
-    ActionMode["File"] = "file";
-})(ActionMode || (ActionMode = {}));
+}
+FocusControllerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FocusControllerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusControllerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusControllerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
-class ActionMenuItem {
-    constructor(config = {}, _parent) {
-        this._parent = _parent;
-        this.items = [];
-        this._isGroup = false;
-        this._visible$ = new BehaviorSubject(true);
-        this._disabled$ = new BehaviorSubject(false);
-        this._init(config);
-    }
-    get isGroup() {
-        return this._isGroup;
-    }
-    get visible() {
-        return this._visible$.getValue();
-    }
-    get visible$() {
-        return this._visible$.asObservable();
-    }
-    set disabled(value) {
-        this._disabled$.next(value);
+class FocusToItemDirective {
+    constructor(_el, _focusController, _targetSelect, _targetDate, _targetDateScroll, _targetDateRangeFrom, _targetDateRangeTo, _targetAutocomplete, _targetAutocompleteChips) {
+        this._el = _el;
+        this._focusController = _focusController;
+        this._targetSelect = _targetSelect;
+        this._targetDate = _targetDate;
+        this._targetDateScroll = _targetDateScroll;
+        this._targetDateRangeFrom = _targetDateRangeFrom;
+        this._targetDateRangeTo = _targetDateRangeTo;
+        this._targetAutocomplete = _targetAutocomplete;
+        this._targetAutocompleteChips = _targetAutocompleteChips;
+        this._destroy$ = new Subject();
     }
-    get disabled() {
-        return this._disabled$.getValue();
+    ngOnInit() {
+        this._focusController
+            .listenFocusFor$(this._item, this._focusTargetType)
+            .pipe(delay(500), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._focus();
+        });
     }
-    get disabled$() {
-        return this._disabled$.asObservable();
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-    updateVisibility() {
-        const visible = !!this._showFn ? this._showFn() : true;
-        if (!visible || !this.isGroup) {
-            this._visible$.next(visible);
-            return;
-        }
-        const numberOfVisibleChildren = this.items
-            .reduce((acc, item) => {
-            item.updateVisibility();
-            if (item.visible) {
-                acc++;
-            }
-            return acc;
-        }, 0);
-        this._visible$.next(!!numberOfVisibleChildren);
-    }
-    _init(config) {
-        this.label = config.label;
-        this.icon = config.icon;
-        this._showFn = config.show;
-        if ('items' in config) {
-            this._isGroup = true;
-            if (Array.isArray(config.items)) {
-                this.items = config
-                    .items
-                    .map((item) => new ActionMenuItem(item, this));
-            }
-            this.updateVisibility();
-        }
-        else {
-            this.click = config.click;
-            this.routerLink = config.link;
-            if (!this._parent) {
-                this.updateVisibility();
-            }
-        }
-    }
-}
-
-class Action {
-    constructor(config = {}) {
-        this.primary = true;
-        this.isReorderAction = false;
-        this.classArray = [];
-        this.items = [];
-        this._visible$ = new BehaviorSubject(true);
-        this._disabled$ = new BehaviorSubject(false);
-        this._init(config);
-    }
-    get visible() {
-        return this._visible$.getValue();
-    }
-    get visible$() {
-        return this._visible$.asObservable();
-    }
-    set disabled(value) {
-        this._disabled$.next(value);
-    }
-    get disabled() {
-        return this._disabled$.getValue();
-    }
-    get disabled$() {
-        return this._disabled$.asObservable();
-    }
-    updateVisibility() {
-        const visible = !!this._showFn ? this._showFn() : true;
-        if (!visible || this.mode !== ActionMode.Menu) {
-            this._visible$.next(visible);
-            return;
-        }
-        const hasVisibleChildren = this.items.some((item) => item.visible);
-        this._visible$.next(hasVisibleChildren);
-    }
-    updateDisabledState() {
-        if (this._disabledFn) {
-            this.disabled = this._disabledFn();
-        }
-    }
-    _init(config) {
-        var _a, _b, _c, _d, _e, _f;
-        config.mode = (_a = config.mode) !== null && _a !== void 0 ? _a : ActionMode.Button;
-        this.primary = (_b = config.primary) !== null && _b !== void 0 ? _b : true;
-        this.color = config.color;
-        this.type = (_c = config.type) !== null && _c !== void 0 ? _c : ActionType.Raised;
-        this.label = config.label;
-        this.mode = config.mode;
-        this.icon = config.icon;
-        this.iconPlacement = config.iconPlacement;
-        this._showFn = config.show;
-        this.tabIndex = (_d = config.tabIndex) !== null && _d !== void 0 ? _d : 0;
-        if (config.multiple !== undefined) {
-            this.multiple = config.multiple;
-        }
-        if (config.className) {
-            this.className = config.className;
-            this.classArray = this.className
-                .split(' ');
-        }
-        if (this.primary) {
-            this.color = 'primary';
-        }
-        switch (config.mode) {
-            case ActionMode.Button:
+    _focus() {
+        switch (this._item.type) {
+            case ItemType.Select:
                 {
-                    this.menu = config.menu;
-                    this.customize = config.customize;
-                    this.click = (_e = config.click) !== null && _e !== void 0 ? _e : (() => { });
-                    this._disabledFn = config.disabled;
-                    this.updateDisabledState();
+                    this._targetSelect.open();
                 }
                 break;
-            case ActionMode.Menu:
+            case ItemType.Text:
+            case ItemType.Range:
                 {
-                    if (config.items && Array.isArray(config.items)) {
-                        this.items = config.items.map((item) => new ActionMenuItem(item));
+                    this._el.nativeElement.focus();
+                }
+                break;
+            case ItemType.Date:
+                {
+                    if (this._item.mode === ItemDateMode.Calendar) {
+                        this._targetDate.open();
+                    }
+                    else {
+                        this._targetDateScroll.open();
                     }
                 }
                 break;
-            case ActionMode.File:
+            case ItemType.DateRange:
                 {
-                    this.fileSelected = config.select;
-                    this.fileError = config.error;
-                    this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (() => { });
-                    this._disabledFn = config.disabled;
-                    this.updateDisabledState();
+                    if (this._focusTargetType === 'from') {
+                        this._targetDateRangeFrom.open();
+                    }
+                    else {
+                        this._targetDateRangeTo.open();
+                    }
+                }
+                break;
+            case ItemType.AutoComplete:
+                {
+                    this._targetAutocomplete.focus();
+                }
+                break;
+            case ItemType.AutoCompleteChips:
+                {
+                    this._targetAutocompleteChips.focus();
                 }
                 break;
         }
-        this.updateVisibility();
     }
 }
+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.ɵ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,
+            args: [{
+                    selector: '[fsFilterFocusTrigger]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FocusControllerService }, { type: i2.MatSelect, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i3$2.FsDatePickerComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i3$2.FsDateScrollPickerComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i3$2.DateRangePickerFromComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i3$2.DateRangePickerToComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i4$1.FsAutocompleteComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i5$1.FsAutocompleteChipsComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { _item: [{
+                type: Input,
+                args: ['fsFilterFocusTrigger']
+            }], _focusTargetType: [{
+                type: Input,
+                args: ['focusTargetType']
+            }] } });
 
-let ActionsController = class ActionsController {
-    constructor(_breakpointObserver) {
-        this._breakpointObserver = _breakpointObserver;
-        this._visible$ = new BehaviorSubject(false);
-        this._actions$ = new BehaviorSubject([]);
-        this._menuActions$ = new BehaviorSubject([]);
-        this._destroy$ = new Subject();
-        this._mobileMedia = '(max-width: 799px)';
-        this._allActions = [];
-        this._listenMobileMedia();
+class TextComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+        this.textControl = new FormControl();
+        this.destroy$ = new Subject();
     }
-    get menuActions() {
-        return this._menuActions$.value;
+    ngOnInit() {
+        this._listenControlValueChanges();
+        this._listenModelChanges();
     }
-    get actions() {
-        return this._actions$.value;
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    get actions$() {
-        return this._actions$.asObservable();
+    _listenControlValueChanges() {
+        this.textControl.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(200), takeUntil(this.destroy$))
+            .subscribe((value) => {
+            this.item.model = value;
+        });
     }
-    get menuActions$() {
-        return this._menuActions$.asObservable();
+    _listenModelChanges() {
+        this._item.value$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.textControl.setValue(this.item.model, { emitEvent: false });
+        });
     }
-    get visible$() {
-        return this._visible$.asObservable();
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-text',
+                    templateUrl: './text.component.html',
+                    styleUrls: ['./text.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
+class FsFilterIsolateValues {
+    transform(values, isolate) {
+        if (!isolate) {
+            return values;
+        }
+        else {
+            return values.filter((value) => {
+                return value.value !== isolate.value;
+            });
+        }
     }
-    get mobileMode() {
-        return this._breakpointObserver.isMatched(this._mobileMedia);
+}
+FsFilterIsolateValues.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterIsolateValues, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FsFilterIsolateValues.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterIsolateValues, name: "fsFilterIsolateValues" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterIsolateValues, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fsFilterIsolateValues'
+                }]
+        }] });
+
+class SelectMultipleComponent {
+    constructor(cd) {
+        this.cd = cd;
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    changed() {
+        if (this.item.isolate) {
+            this.item.isolate.enabled = false;
+            if (this.item.multiple && Array.isArray(this.item.model)) {
+                const index = this.item.model.indexOf(this.item.isolate.value);
+                if (index > -1) {
+                    this.item.model.splice(index, 1);
+                }
+            }
+        }
     }
-    initActions(rawActions) {
-        if (!rawActions || !Array.isArray(rawActions)) {
-            return;
+    close() {
+        this.select.close();
+    }
+    isolateChange(filter) {
+        if (filter.isolate.enabled) {
+            filter.model = filter.multiple ? [filter.isolate.value] : filter.isolate.value;
         }
-        this.show();
-        this._allActions = rawActions
-            .map((action) => new Action(action));
-        if (this._reorderAction) {
-            this._allActions.unshift(this._reorderAction);
+        else {
+            if (filter.multiple) {
+                filter.model = filter.defaultValue ? filter.defaultValue : [];
+            }
+            else {
+                filter.model = filter.defaultValue ? filter.defaultValue : null;
+            }
         }
-        this._classifyActions();
-    }
-    show() {
-        this._visible$.next(true);
     }
-    hide() {
-        this._visible$.next(false);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-select-multiple',
+                    templateUrl: './multiple.component.html',
+                    styleUrls: ['./multiple.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['select', { static: true }]
+            }] } });
+
+class SelectSimpleComponent {
+    constructor(cd) {
+        this.cd = cd;
     }
-    addReorderAction(action) {
-        this._allActions.unshift(action);
-        action.isReorderAction = true;
-        this._classifyAction(action);
-        this._reorderAction = action;
+    changed() {
+        if (this.item.isolate) {
+            this.item.isolate.enabled = false;
+        }
     }
-    clearActions() {
-        this._allActions = [];
-        this._setActions([]);
-        this._setKebabActions([]);
-    }
-    updateActionsVisibility() {
-        this._allActions.forEach((action) => action.updateVisibility());
-        this._classifyActions();
+    isolateChange(filter) {
+        if (filter.isolate.enabled) {
+            filter.model = filter.isolate.value;
+        }
+        else {
+            filter.model = null;
+        }
     }
-    updateDisabledState() {
-        this.actions.forEach((action) => action.updateDisabledState());
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectSimpleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-select-simple',
+                    templateUrl: './simple.component.html',
+                    styleUrls: ['./simple.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['select', { static: true }]
+            }] } });
+
+class SelectGroupsComponent {
+    constructor(cd) {
+        this.cd = cd;
     }
-    _setKebabActions(actions) {
-        this._menuActions$.next(actions);
+    compare(o1, o2) {
+        return o1 == o2;
     }
-    _setActions(actions) {
-        this._actions$.next(actions);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectGroupsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-select-groups',
+                    templateUrl: './groups.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { select: [{
+                type: ViewChild,
+                args: ['select', { static: true }]
+            }], item: [{
+                type: Input
+            }] } });
+
+class SelectComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+        // For case when we have multiple selection with __all option
+        // If _all has been selected than we must disable all other items
+        this.allItemsOptionSelected = false;
     }
-    _classifyActions() {
-        const kebabActions = [];
-        const actions = [];
-        const mobileMode = this.mobileMode;
-        this._allActions
-            .filter((action) => {
-            return action.visible;
-        })
-            .forEach((action) => {
-            if (action.menu || mobileMode) {
-                kebabActions.push(action);
-            }
-            else {
-                actions.push(action);
+    ngDoCheck() {
+        if (this._kvDiffer) {
+            const changes = this._kvDiffer.diff(this.item);
+            if (changes) {
+                this._cd.markForCheck();
+                if (this.selectedItem) {
+                    this.selectedItem.cd.markForCheck();
+                }
             }
-        });
-        this._setKebabActions(kebabActions);
-        this._setActions(actions);
-    }
-    _classifyAction(action) {
-        if (action.menu) {
-            this._setKebabActions([...this.menuActions, action]);
-        }
-        else {
-            this._setActions([...this.actions, action]);
         }
     }
-    _listenMobileMedia() {
-        this._breakpointObserver.observe(this._mobileMedia)
-            .pipe(skip(1), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._classifyActions();
-        });
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(item.values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\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: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-select',
+                    templateUrl: './select.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedItem: [{
+                type: ViewChild,
+                args: ['selectItem']
+            }] } });
+
+class ChipsComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+    }
+    modelChange() {
+        this.itemChange();
     }
-};
-ActionsController.ctorParameters = () => [
-    { type: BreakpointObserver }
-];
-ActionsController = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [BreakpointObserver])
-], ActionsController);
+    compareFn(modelValue, chipValue) {
+        return modelValue.value === chipValue.value;
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-chips',
+                    templateUrl: './chips.component.html',
+                    styleUrls: ['./chips.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
 
-let FilterComponent = class FilterComponent {
-    constructor(_filterOverlay, _zone, _externalParams, _filterItems, _actions, _defaultConfig) {
-        this._filterOverlay = _filterOverlay;
-        this._zone = _zone;
-        this._externalParams = _externalParams;
-        this._filterItems = _filterItems;
-        this._actions = _actions;
-        this._defaultConfig = _defaultConfig;
-        this.showSortBy = true;
-        this.showFilterInput = true;
-        this.closed = new EventEmitter();
-        this.opened = new EventEmitter();
-        this.ready = new EventEmitter();
-        this.showFilterMenu = false;
-        this.windowDesktop = false;
-        this.fsFilterClass = true;
-        this.searchText = new FormControl();
-        this.searchPlaceholder = 'Search';
-        this._config = null;
-        this._filtersBtnVisible$ = new BehaviorSubject(true);
-        this._keywordVisible$ = new BehaviorSubject(true);
-        this._hasFilterChips$ = new BehaviorSubject(false);
-        this._destroy$ = new Subject();
-        this._listenWhenFilterReady();
-        this._updateWindowWidth();
-        this._filterOverlay.attach$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.showFilterMenu = true;
-        });
-        this._filterOverlay.detach$
+class RangeComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+    }
+    ngOnInit() {
+        this.listenChanges();
+    }
+    listenChanges() {
+        const fromListener = fromEvent(this.from.nativeElement, 'keyup')
+            .pipe(distinctUntilChanged());
+        const toListener = fromEvent(this.to.nativeElement, 'keyup')
+            .pipe(distinctUntilChanged());
+        merge(fromListener, toListener)
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.showFilterMenu = false;
+            this.itemChange();
         });
-        this._listenWindowResize();
-    }
-    set setConfig(config) {
-        this._initFilterWithConfig(config);
-    }
-    set setFilter(config) {
-        this._initFilterWithConfig(config);
-    }
-    get config() {
-        return this._config;
     }
-    get filterParams() {
-        return this._filterItems.values();
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-range',
+                    templateUrl: './range.component.html',
+                    styleUrls: ['./range.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { from: [{
+                type: ViewChild,
+                args: ['from', { static: true }]
+            }], to: [{
+                type: ViewChild,
+                args: ['to', { static: true }]
+            }] } });
+
+class AutocompleteComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+        this.displayWith = (data) => {
+            return data ? data.name : data;
+        };
+        this.fetch = (keyword) => {
+            return this.item.valuesFn(keyword);
+        };
     }
-    get filterParamsQuery() {
-        return this._filterItems.valuesAsQuery();
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-autocomplete',
+                    templateUrl: './autocomplete.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
+class AutocompletechipsComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+        this.fetch = (keyword) => {
+            return this.item.valuesFn(keyword);
+        };
     }
-    get items() {
-        return this._filterItems.items;
+    // SP-T1747
+    clicked() {
+        this.chipBackground = this.item.chipBackground;
+        this.chipColor = this.item.chipColor;
+        this.chipIcon = this.item.chipIcon;
+        this._cd.markForCheck();
     }
-    get visibleItems() {
-        return this._filterItems.visibleItems;
+    addAutocompleteChipItem(event) {
+        if (event.data && this.item.model.indexOf(event.data.value) === -1) {
+            this.item.model.push(event.data);
+            this.itemChange();
+        }
     }
-    get itemsReady$() {
-        return this._filterItems.ready$;
+    removeAutocompleteChipItem(event) {
+        remove(this.item.model, { value: event.data.value });
+        this.itemChange();
     }
-    get hasFilterChips$() {
-        return this._hasFilterChips$.asObservable();
+    clearAutocompleteChipItem() {
+        this.item.clear();
+        this.itemChange();
     }
-    get hasVisibleItemOrSorting() {
-        return this.visibleItems.length > 0 || !!this._filterItems.sortByItem;
+    compareItems(item1, item2) {
+        return (item1 === null || item1 === void 0 ? void 0 : item1.value) === (item2 === null || item2 === void 0 ? void 0 : item2.value);
     }
-    get hasKeyword() {
-        return this._filterItems.hasKeyword;
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompletechipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-autocompletechips',
+                    templateUrl: './autocompletechips.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
+class DateComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+        this.viewType = 'date';
+        this.itemDateMode = ItemDateMode;
+        this.showYear = true;
+        this.showMonth = true;
+        this.showDay = true;
     }
-    get filtersBtnVisible$() {
-        return this._filtersBtnVisible$.asObservable();
+    ngOnInit() {
+        if (this.item.type === ItemType.DateTime) {
+            this.viewType = 'datetime';
+        }
+        else {
+            this.viewType = 'date';
+        }
+        if (this.item.mode === ItemDateMode.ScrollMonthYear) {
+            this.showDay = false;
+        }
     }
-    get keywordVisible$() {
-        return this._keywordVisible$.asObservable();
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-date',
+                    templateUrl: './date.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
+class DateRangeComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
+        this.viewType = 'date';
     }
-    get actionsVisible$() {
-        return this._actions.visible$;
+    ngOnInit() {
+        if (this.item.type === ItemType.DateTimeRange) {
+            this.viewType = 'datetime';
+        }
+        else {
+            this.viewType = 'date';
+        }
     }
-    get actions$() {
-        return this._actions.actions$;
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-date-range',
+                    templateUrl: './date-range.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
+class CheckboxComponent extends BaseItemComponent {
+    constructor(_kvDiffers, _cd) {
+        super(_kvDiffers, _cd);
+        this._kvDiffers = _kvDiffers;
+        this._cd = _cd;
     }
-    get menuActions$() {
-        return this._actions.menuActions$;
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-checkbox',
+                    templateUrl: './checkbox.component.html',
+                    styleUrls: ['checkbox.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; } });
+
+class FilterItemComponent {
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
+        this._destroy$ = new Subject();
+        this.itemType = ItemType;
     }
     ngOnInit() {
-        // Avoid ngChanges error
-        setTimeout(() => {
-            if (this.config.autofocus) {
-                this.focus();
-            }
-        });
-        this._listenInternalItemsChange();
-        this._initOverlay();
-    }
-    ngAfterViewInit() {
-        this._listenInputKeyEvents();
-        // FIXME prevent fire change after init
-        setTimeout(() => {
-            this._listenInputChanges();
+        this.item.value$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._cdRef.markForCheck();
         });
     }
     ngOnDestroy() {
-        this._destroyFilterDrawer();
         this._destroy$.next();
         this._destroy$.complete();
     }
-    focus() {
-        if (this.searchTextMatInput) {
-            this.searchTextMatInput.focus();
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item',
+                    templateUrl: './filter-item.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class FsFilterDrawerActionsComponent {
+    constructor(externalParams) {
+        this.externalParams = externalParams;
+        this._clear = new EventEmitter();
+        this._done = new EventEmitter();
+    }
+    get savedFilters() {
+        return this.externalParams.savedFiltersController;
+    }
+    done() {
+        this._done.emit();
+    }
+    clear() {
+        this._clear.emit();
+    }
+    saveFilters() {
+        this.externalParams
+            .savedFiltersController
+            .openSavedFilterEditDialog();
+    }
+}
+FsFilterDrawerActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterDrawerActionsComponent, deps: [{ token: ExternalParamsController }], target: i0.ɵɵFactoryTarget.Component });
+FsFilterDrawerActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: { _clear: "clear", _done: "done" }, ngImport: i0, template: "<button type=\"button\" mat-button color=\"primary\" (click)=\"done()\">Done</button>\n<button type=\"button\" mat-button (click)=\"clear()\">Clear</button>\n<ng-container *ngIf=\"savedFilters.enabled$ | async\">\n  <button type=\"button\" mat-button (click)=\"saveFilters()\">Save</button>\n</ng-container>\n\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"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterDrawerActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-drawer-actions',
+                    templateUrl: './filter-drawer-actions.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: ExternalParamsController }]; }, propDecorators: { _clear: [{
+                type: Output,
+                args: ['clear']
+            }], _done: [{
+                type: Output,
+                args: ['done']
+            }] } });
+
+class FilterDrawerComponent {
+    constructor(externalParams, _cd, _itemsStore, overlayRef, data) {
+        this.externalParams = externalParams;
+        this._cd = _cd;
+        this._itemsStore = _itemsStore;
+        this.overlayRef = overlayRef;
+        this.data = data;
+        this.inline = false;
+        this.windowDesktop = false;
+        this._itemsStore.prepareItems();
+        this._clear = data.clear;
+        this._done = data.done;
+        this.updateWindowWidth();
+    }
+    updateWindowWidth() {
+        this.windowDesktop = window.innerWidth > 1200;
+    }
+    get items$() {
+        return this._itemsStore.visibleItems$;
+    }
+    get sortItem() {
+        return this._itemsStore.sortByItem;
+    }
+    get sortDirectionItem() {
+        return this._itemsStore.sortDirectionItem;
+    }
+    clear() {
+        this._clear();
+        // this.overlayRef.detach();
+    }
+    done() {
+        this._done();
+        this.overlayRef.detach();
+    }
+    backdropClick() {
+        this.done();
+    }
+}
+FilterDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0.ɵɵFactoryTarget.Component });
+FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item *ngFor=\"let filterItem of items$ | async\"\n                       class=\"filter-group\"\n                       [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortItem\">\n            </filter-item>\n            <filter-item class=\"filter-group sort\"\n                         [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions class=\"filter-actions\"\n                              *ngIf=\"(externalParams.pending$ | async) !== true\"\n                              (clear)=\"clear()\"\n                              (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6$3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { 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: FilterDrawerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './filter-drawer.component.html',
+                    styleUrls: ['filter-drawer.component.scss'],
+                    // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: ExternalParamsController }, { type: i0.ChangeDetectorRef }, { type: FsFilterItemsStore }, { type: i1$6.OverlayRef, decorators: [{
+                    type: Inject,
+                    args: [FILTER_DRAWER_OVERLAY]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FILTER_DRAWER_DATA]
+                }] }]; }, propDecorators: { updateWindowWidth: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], inline: [{
+                type: Input
+            }] } });
+
+const FS_FILTER_META = new InjectionToken('fs.filter.meta', {
+    providedIn: 'root',
+    factory: () => {
+        return {
+            openedFilters: 0,
+        };
+    }
+});
+
+class FsFilterOverlayService {
+    constructor(_injector, _filterMeta, _overlay, _focusController) {
+        this._injector = _injector;
+        this._filterMeta = _filterMeta;
+        this._overlay = _overlay;
+        this._focusController = _focusController;
+        this.detach$ = new Subject();
+        this.attach$ = new Subject();
+        this._destroy$ = new Subject();
+        this._openWhenChipClicked();
+    }
+    get isOpened() {
+        return !!this._overlayRef;
+    }
+    setClearFn(fn) {
+        this._clearFn = fn;
+    }
+    setDoneFn(fn) {
+        this._doneFn = fn;
+    }
+    close() {
+        if (this._overlayRef) {
+            this._overlayRef.detach();
+            this._overlayRef = null;
+            this.removeFilterClass();
         }
     }
-    updateSort(sort) {
-        this._filterItems.updateSort(sort);
+    open() {
+        this._overlayRef = this._createOverlay();
+        this._overlayRef.backdropClick()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._overlayRef.detach();
+        });
+        this._overlayRef.detachments()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.detach$.next();
+        });
+        this._overlayRef.attachments()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.attach$.next();
+        });
+        this.addFilterClass();
+        return this.openPortalPreview();
     }
-    /**
-     *
-     * Do update value of some field
-     *
-     * @param values - values for update
-     *
-     * To update text value just pass new text value
-     *
-     * public updateSelectValue(val) {
-     *   this.filterEl.updateValues({ keyword: val });
-     * }
-     *
-     * To update select or observable select you could pass suitable value
-     *
-     * public updateSelectValue(val: number) {
-     *   this.filterEl.updateValues({ simple_select: val }, { observable_select: val });
-     * }
-     *
-     * To update checkbox value just pass true/false as value
-     *
-     * public updateCheckox(val: boolean) {
-     *   this.filterEl.updateValues({ checkbox: val });
-     * }
-     *
-     * To update range value just pass object with min&max object or just with one of targets
-     *
-     * Ex.: { min: 10, max 15 }, { min: 5 }, { max 5 }
-     *
-     * public updateRange(val) {
-     *   this.filterEl.updateValues({ range: val });
-     * }
-     *
-     * To update autocomplete just pass object with name/value fields
-     *
-     * Ex.: { name: 'John Doe', value: 1 }
-     *
-     * public updateAutocomplete(val) {
-     *   this.filterEl.updateValues({ autocomplete_user_id: val });
-     * }
-     *
-     * To update autocompletechips just pass:
-     *
-     * 1) object with name/value fields - will be appended to existing set of values
-     *
-     * { name: 'John Doe', value: 1 }
-     *
-     * 2) array of objects - will be appended to existing set of values
-     *
-     * [{ name: 'John Doe', value: 1 }, { name: 'Darya Filipova', value: 2 }]
-     *
-     * 3) null - clear existing set of values
-     *
-     * public updateAutocomplete(val) {
-     *   this.filterEl.updateValues({ autocompletechips_user_id: val });
-     * }
-     *
-     */
-    updateValues(values) {
-        Object.keys(values).forEach((key) => {
-            const filterItem = this.items
-                .find((item) => item.name === key);
-            if (!filterItem) {
-                return;
-            }
-            filterItem.model = values[key];
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _createOverlay() {
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'fs-filter-backdrop'
         });
+        return this._overlay.create(overlayConfig);
     }
-    hide() {
-        this.changeVisibility(false);
+    openPortalPreview() {
+        const data = { done: this._doneFn, clear: this._clearFn };
+        const injector = this._createInjector(this._injector, data, this._overlayRef);
+        const containerPortal = new ComponentPortal(FilterDrawerComponent, undefined, injector);
+        const containerRef = this._overlayRef.attach(containerPortal);
+        return containerRef.instance;
     }
-    show() {
-        this.changeVisibility(true);
+    _createInjector(parentInjector, data, overlayRef) {
+        const injectionTokens = new WeakMap([
+            [FILTER_DRAWER_DATA, data],
+            [FILTER_DRAWER_OVERLAY, overlayRef],
+        ]);
+        return new PortalInjector(parentInjector, injectionTokens);
     }
-    changeVisibilityClick(value, event = null) {
-        if (event) {
-            event.stopPropagation();
+    removeFilterClass() {
+        this._filterMeta.openedFilters--;
+        if (this._filterMeta.openedFilters === 0) {
+            window.document.body.classList.remove('fs-filter-open');
         }
-        this.changeVisibility(value);
     }
-    filterInputEvent(event) {
-        if (!this.windowDesktop) {
-            return;
+    addFilterClass() {
+        this._filterMeta.openedFilters++;
+        if (this._filterMeta.openedFilters === 1) {
+            window.document.body.classList.add('fs-filter-open');
         }
-        if (['Enter', 'NumpadEnter', 'Escape'].indexOf(event.code) >= 0) {
-            this.changeVisibility(false);
-            if (this.searchTextInput) {
-                this.searchTextInput.nativeElement.blur();
+    }
+    _openWhenChipClicked() {
+        this._focusController.focusOn$
+            .pipe(filter$1((v) => !!v), takeUntil(this._destroy$))
+            .subscribe(() => {
+            if (!this.isOpened) {
+                this.open();
             }
-        }
+        });
     }
-    getItemValue(name) {
-        const item = this.items
-            .find((item) => item.name === name);
-        if (item) {
-            return item.model;
-        }
-        else {
-            return null;
-        }
+}
+FsFilterOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService, deps: [{ token: i0.Injector }, { token: FS_FILTER_META }, { token: i1$6.Overlay }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Injectable });
+FsFilterOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_FILTER_META]
+                }] }, { type: i1$6.Overlay }, { type: FocusControllerService }]; } });
+
+class FilterStatusBarDirective {
+}
+FilterStatusBarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterStatusBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FilterStatusBarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterStatusBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsFilterStatusBar]',
+                }]
+        }] });
+
+var ActionType;
+(function (ActionType) {
+    ActionType["Basic"] = "basic";
+    ActionType["Raised"] = "raised";
+    ActionType["Icon"] = "icon";
+    ActionType["Fab"] = "fab";
+    ActionType["MiniFab"] = "mini-fab";
+})(ActionType || (ActionType = {}));
+
+var ActionMode;
+(function (ActionMode) {
+    ActionMode["Button"] = "button";
+    ActionMode["Menu"] = "menu";
+    ActionMode["File"] = "file";
+})(ActionMode || (ActionMode = {}));
+
+class ActionMenuItem {
+    constructor(config = {}, _parent) {
+        this._parent = _parent;
+        this.items = [];
+        this._isGroup = false;
+        this._visible$ = new BehaviorSubject(true);
+        this._disabled$ = new BehaviorSubject(false);
+        this._init(config);
     }
-    showItem(name) {
-        const item = this.getItem(name);
-        if (item) {
-            item.hide = false;
-            this._filterItems.updateVisibleItems();
-        }
+    get isGroup() {
+        return this._isGroup;
     }
-    hideItem(name) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
-        }
-        item.hide = true;
-        this._filterItems.updateVisibleItems();
+    get visible() {
+        return this._visible$.getValue();
     }
-    clearItem(name) {
-        const item = this.getItem(name);
-        if (!item) {
-            return;
-        }
-        item.clear();
+    get visible$() {
+        return this._visible$.asObservable();
     }
-    updateItemConfig(name, params) {
-        var _a, _b;
-        const item = this.getItem(name);
-        if (!item) {
+    set disabled(value) {
+        this._disabled$.next(value);
+    }
+    get disabled() {
+        return this._disabled$.getValue();
+    }
+    get disabled$() {
+        return this._disabled$.asObservable();
+    }
+    updateVisibility() {
+        const visible = !!this._showFn ? this._showFn() : true;
+        if (!visible || !this.isGroup) {
+            this._visible$.next(visible);
             return;
         }
-        item.label = (_a = params.label) !== null && _a !== void 0 ? _a : item.label;
-        item.chipLabel = (_b = params.chipLabel) !== null && _b !== void 0 ? _b : item.chipLabel;
-        this._filterItems.updateVisibleItems();
+        const numberOfVisibleChildren = this.items
+            .reduce((acc, item) => {
+            item.updateVisibility();
+            if (item.visible) {
+                acc++;
+            }
+            return acc;
+        }, 0);
+        this._visible$.next(!!numberOfVisibleChildren);
     }
-    getItemValueChange$(name) {
-        const item = this.items.find((i) => i.name === name);
-        if (item) {
-            return item.value$
-                .pipe(map(() => {
-                return item.model;
-            }));
+    _init(config) {
+        this.label = config.label;
+        this.icon = config.icon;
+        this._showFn = config.show;
+        if ('items' in config) {
+            this._isGroup = true;
+            if (Array.isArray(config.items)) {
+                this.items = config
+                    .items
+                    .map((item) => new ActionMenuItem(item, this));
+            }
+            this.updateVisibility();
         }
         else {
-            return null;
+            this.click = config.click;
+            this.routerLink = config.link;
+            if (!this._parent) {
+                this.updateVisibility();
+            }
         }
     }
-    changeVisibility(state) {
-        if (state === this.showFilterMenu) {
-            return;
-        }
-        if (!state) {
-            this.closed.emit();
-            return this._destroyFilterDrawer();
-        }
-        if (!this.hasVisibleItemOrSorting) {
-            return;
-        }
-        this._listenEscButton();
-        this.opened.emit();
-        this._filterOverlay.open();
+}
+
+class Action {
+    constructor(config = {}) {
+        this.primary = true;
+        this.isReorderAction = false;
+        this.classArray = [];
+        this.items = [];
+        this._visible$ = new BehaviorSubject(true);
+        this._disabled$ = new BehaviorSubject(false);
+        this._init(config);
     }
-    clearSearchText(event) {
-        event.stopPropagation();
-        this._filterItems.keywordItem.clear();
-        this.searchTextInput.nativeElement.focus();
+    get visible() {
+        return this._visible$.getValue();
     }
-    init() {
-        const data = this._filterItems.valuesAsQuery();
-        this._sort = this._filterItems.getSort();
-        this.config.init(data, this._sort);
-        this._updateChipsVisibility();
+    get visible$() {
+        return this._visible$.asObservable();
     }
-    clear(event = null) {
-        if (event) {
-            event.stopPropagation();
-        }
-        this._filterItems.filtersClear();
-        if (this.config.clear) {
-            this.config.clear();
-        }
+    set disabled(value) {
+        this._disabled$.next(value);
     }
-    /**
-     * Close filter window and do change callback
-     */
-    search(event) {
-        this.changeVisibilityClick(false, event);
+    get disabled() {
+        return this._disabled$.getValue();
     }
-    reload(event = null) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        const data = this._filterItems.valuesAsQuery();
-        if (this.config.reload) {
-            this.config.reload(data, this._filterItems.getSort());
+    get disabled$() {
+        return this._disabled$.asObservable();
+    }
+    updateVisibility() {
+        const visible = !!this._showFn ? this._showFn() : true;
+        if (!visible || this.mode !== ActionMode.Menu) {
+            this._visible$.next(visible);
+            return;
         }
+        const hasVisibleChildren = this.items.some((item) => item.visible);
+        this._visible$.next(hasVisibleChildren);
     }
-    getItem(name) {
-        return this.items
-            .find((item) => item.name === name);
+    updateDisabledState() {
+        if (this._disabledFn) {
+            this.disabled = this._disabledFn();
+        }
     }
-    /**
-     * Call change callback and apply new filter values
-     */
-    change() {
-        const data = this._filterItems.valuesAsQuery();
-        const sort = this._filterItems.getSort();
-        const sortingChanged = ((!sort || !this._sort) && sort !== this._sort)
-            || (sort && this._sort && !objectsAreEquals(this._sort, sort));
-        if (sortingChanged) {
-            this._sort = sort;
-            if (this.config.sortChange) {
-                this.config.sortChange(data, sort);
-            }
+    _init(config) {
+        var _a, _b, _c, _d, _e, _f;
+        config.mode = (_a = config.mode) !== null && _a !== void 0 ? _a : ActionMode.Button;
+        this.primary = (_b = config.primary) !== null && _b !== void 0 ? _b : true;
+        this.color = config.color;
+        this.type = (_c = config.type) !== null && _c !== void 0 ? _c : ActionType.Raised;
+        this.label = config.label;
+        this.mode = config.mode;
+        this.icon = config.icon;
+        this.iconPlacement = config.iconPlacement;
+        this._showFn = config.show;
+        this.tabIndex = (_d = config.tabIndex) !== null && _d !== void 0 ? _d : 0;
+        if (config.multiple !== undefined) {
+            this.multiple = config.multiple;
         }
-        if (this.config.change) {
-            this.config.change(data, sort);
+        if (config.className) {
+            this.className = config.className;
+            this.classArray = this.className
+                .split(' ');
+        }
+        if (this.primary) {
+            this.color = 'primary';
+        }
+        switch (config.mode) {
+            case ActionMode.Button:
+                {
+                    this.menu = config.menu;
+                    this.customize = config.customize;
+                    this.click = (_e = config.click) !== null && _e !== void 0 ? _e : (() => { });
+                    this._disabledFn = config.disabled;
+                    this.updateDisabledState();
+                }
+                break;
+            case ActionMode.Menu:
+                {
+                    if (config.items && Array.isArray(config.items)) {
+                        this.items = config.items.map((item) => new ActionMenuItem(item));
+                    }
+                }
+                break;
+            case ActionMode.File:
+                {
+                    this.fileSelected = config.select;
+                    this.fileError = config.error;
+                    this.accept = config.accept;
+                    this.imageQuality = config.imageQuality;
+                    this.minWidth = config.minWidth;
+                    this.minHeight = config.minHeight;
+                    this.maxWidth = config.maxWidth;
+                    this.maxHeight = config.maxHeight;
+                    this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (() => { });
+                    this._disabledFn = config.disabled;
+                    this.updateDisabledState();
+                }
+                break;
         }
-        this._updateChipsVisibility();
+        this.updateVisibility();
     }
-    /**
-     * Update filter actions config
-     * @param actions
-     */
-    updateActions(actions) {
-        this._actions.initActions(actions);
+}
+
+class ActionsController {
+    constructor(_breakpointObserver) {
+        this._breakpointObserver = _breakpointObserver;
+        this._visible$ = new BehaviorSubject(false);
+        this._actions$ = new BehaviorSubject([]);
+        this._menuActions$ = new BehaviorSubject([]);
+        this._destroy$ = new Subject();
+        this._mobileMedia = '(max-width: 799px)';
+        this._allActions = [];
+        this._listenMobileMedia();
     }
-    /**
-     * Show "Filters" button
-     */
-    showFiltersBtn() {
-        this._filtersBtnVisible$.next(true);
+    get menuActions() {
+        return this._menuActions$.value;
     }
-    /**
-     * Hide "Filters" button
-     */
-    hideFiltersBtn() {
-        this._filtersBtnVisible$.next(false);
+    get actions() {
+        return this._actions$.value;
     }
-    /**
-     * Show "Keyword" field if it present
-     */
-    showKeywordField() {
-        this._keywordVisible$.next(true);
+    get actions$() {
+        return this._actions$.asObservable();
     }
-    /**
-     * Hide "Keyword" field if it present
-     */
-    hideKeywordField() {
-        this._keywordVisible$.next(false);
+    get menuActions$() {
+        return this._menuActions$.asObservable();
     }
-    /**
-     * Go through actions and check show() callback and update visible actions
-     */
-    updateActionsVisibility() {
-        this._actions.updateActionsVisibility();
+    get visible$() {
+        return this._visible$.asObservable();
     }
-    /**
-     * Go through actions and check disabled() callback and update disabled state
-     */
-    updateDisabledState() {
-        this._actions.updateDisabledState();
+    get mobileMode() {
+        return this._breakpointObserver.isMatched(this._mobileMedia);
     }
-    _initFilterWithConfig(config) {
-        if (this.config) {
-            this._filterItems.destroyItems();
-        }
-        config = Object.assign(Object.assign({}, (this._defaultConfig || {})), config);
-        this._config = new FsFilterConfig(config);
-        this._actions.initActions(this._config.actions);
-        this._filterItems.setConfig(this._config);
-        this._externalParams.setConfig(this._config);
-        const keywordItem = this._filterItems.keywordItem;
-        if (keywordItem) {
-            this.searchText.setValue(keywordItem.model);
-            this.searchPlaceholder = keywordItem.label || 'Search';
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    initActions(rawActions) {
+        if (!rawActions || !Array.isArray(rawActions)) {
+            return;
         }
-        if (!!this.config.reloadWhenConfigChanged) {
-            this.change();
+        this.show();
+        this._allActions = rawActions
+            .map((action) => new Action(action));
+        if (this._reorderAction) {
+            this._allActions.unshift(this._reorderAction);
         }
-        this._listenKeywordItemClear();
-    }
-    _destroyFilterDrawer() {
-        this._filterOverlay.close();
+        this._classifyActions();
     }
-    _updateWindowWidth() {
-        this.windowDesktop = window.innerWidth > 1200;
+    show() {
+        this._visible$.next(true);
     }
-    _listenEscButton() {
-        this._zone.runOutsideAngular(() => {
-            fromEvent(window, 'keyup')
-                .pipe(filter$1((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._zone.run(() => {
-                    this.changeVisibility(false);
-                });
-            });
-        });
+    hide() {
+        this._visible$.next(false);
     }
-    _listenInputKeyEvents() {
-        if (!this.searchTextInput) {
-            return;
-        }
-        this._zone.runOutsideAngular(() => {
-            fromEvent(this.searchTextInput.nativeElement, 'keydown')
-                .pipe(debounceTime(500), filter$1((event) => {
-                return ['Enter', 'NumpadEnter', 'Escape'].indexOf(event.code) > -1;
-            }), takeUntil(this._destroy$))
-                .subscribe((event) => {
-                this._zone.run(() => {
-                    this.filterInputEvent(event);
-                });
-            });
-        });
+    addReorderAction(action) {
+        this._allActions.unshift(action);
+        action.isReorderAction = true;
+        this._classifyAction(action);
+        this._reorderAction = action;
     }
-    _listenWindowResize() {
-        this._zone.runOutsideAngular(() => {
-            fromEvent(window, 'resize')
-                .pipe(debounceTime(100), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._zone.run(() => {
-                    this._updateWindowWidth();
-                });
-            });
-        });
+    clearActions() {
+        this._allActions = [];
+        this._setActions([]);
+        this._setKebabActions([]);
     }
-    _listenInputChanges() {
-        if (!this._filterItems.keywordItem) {
-            return;
-        }
-        this._zone.runOutsideAngular(() => {
-            this.searchText.valueChanges
-                .pipe(debounceTime(200), distinctUntilChanged(), filter$1((value) => {
-                var _a;
-                return value !== ((_a = this._filterItems.keywordItem) === null || _a === void 0 ? void 0 : _a.model);
-            }), takeUntil(this._destroy$))
-                .subscribe((value) => {
-                this._zone.run(() => {
-                    const keywordItem = this._filterItems.keywordItem;
-                    if (keywordItem && keywordItem.value !== value) {
-                        keywordItem.model = value;
-                    }
-                });
-            });
-        });
+    updateActionsVisibility() {
+        this._allActions.forEach((action) => action.updateVisibility());
+        this._classifyActions();
     }
-    _listenKeywordItemClear() {
-        var _a;
-        (_a = this._filterItems
-            .keywordItem) === null || _a === void 0 ? void 0 : _a.clear$.pipe(takeUntil(this._filterItems.keywordItem.destroy$), takeUntil(this._destroy$)).subscribe(() => {
-            this.searchText.setValue('');
-        });
+    updateDisabledState() {
+        this.actions.forEach((action) => action.updateDisabledState());
     }
-    _listenInternalItemsChange() {
-        this._filterItems
-            .itemsChange$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.change();
-        });
+    _setKebabActions(actions) {
+        this._menuActions$.next(actions);
     }
-    _initOverlay() {
-        this._filterOverlay.setClearFn(this.clear.bind(this));
-        this._filterOverlay.setDoneFn(this.hide.bind(this));
+    _setActions(actions) {
+        this._actions$.next(actions);
     }
-    // We may need some time to recieve external params and after that ready can be emitted
-    _listenWhenFilterReady() {
-        combineLatest([
-            this._externalParams.pending$,
-            this.itemsReady$,
-        ])
-            .pipe(filter$1(([pendingParams, itemsReady]) => !pendingParams && itemsReady), takeUntil(this._destroy$))
-            .subscribe(() => {
-            if (this.config.init) {
-                this.init();
+    _classifyActions() {
+        const kebabActions = [];
+        const actions = [];
+        const mobileMode = this.mobileMode;
+        this._allActions
+            .filter((action) => {
+            return action.visible;
+        })
+            .forEach((action) => {
+            if (action.menu || mobileMode) {
+                kebabActions.push(action);
+            }
+            else {
+                actions.push(action);
             }
-            this.ready.emit();
-        });
-    }
-    _updateChipsVisibility() {
-        const hasFilterChips = this._filterItems.items
-            .some((item) => {
-            return item.isChipVisible;
         });
-        this._hasFilterChips$.next(hasFilterChips);
+        this._setKebabActions(kebabActions);
+        this._setActions(actions);
     }
-};
-FilterComponent.ctorParameters = () => [
-    { type: FsFilterOverlayService },
-    { type: NgZone },
-    { type: ExternalParamsController },
-    { type: FsFilterItemsStore },
-    { type: ActionsController },
-    { type: FsFilterConfig, decorators: [{ type: Optional }, { type: Inject, args: [FS_FILTER_CONFIG,] }] }
-];
-__decorate([
-    Input('config'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FilterComponent.prototype, "setConfig", null);
-__decorate([
-    Input('filter'),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FilterComponent.prototype, "setFilter", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "showSortBy", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "showFilterInput", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "closed", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "opened", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "ready", void 0);
-__decorate([
-    ContentChild(FilterStatusBarDirective, { read: TemplateRef }),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "statusBar", void 0);
-__decorate([
-    ViewChild('searchTextInput'),
-    __metadata("design:type", ElementRef)
-], FilterComponent.prototype, "searchTextInput", void 0);
-__decorate([
-    ViewChild('searchTextInput', { read: MatInput }),
-    __metadata("design:type", MatInput)
-], FilterComponent.prototype, "searchTextMatInput", void 0);
-__decorate([
-    HostBinding('class.filters-open'),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "showFilterMenu", void 0);
-__decorate([
-    HostBinding('class.window-desktop'),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "windowDesktop", void 0);
-__decorate([
-    HostBinding('class.fs-filter'),
-    __metadata("design:type", Object)
-], FilterComponent.prototype, "fsFilterClass", void 0);
-FilterComponent = __decorate([
-    Component({
-        selector: 'fs-filter',
-        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",
-        encapsulation: ViewEncapsulation.None,
-        providers: [
-            FsFilterOverlayService,
-            ExternalParamsController,
-            PersistanceParamsController,
-            QueryParamsController,
-            FocusControllerService,
-            FsFilterItemsStore,
-            SavedFiltersController,
-            ActionsController,
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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{-ms-grid-row-align:center;align-self:center;display:flex;align-items:center;white-space:nowrap}.fs-filter .filter-search-container .filter-input-field .mat-form-field-prefix a,.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-suffix a,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon{display:flex;cursor:pointer;color:initial}.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-prefix mat-icon:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix a:hover,.fs-filter .filter-search-container .filter-input-field .mat-form-field-suffix mat-icon: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:0 0}"]
-    }),
-    __param(5, Optional()), __param(5, Inject(FS_FILTER_CONFIG)),
-    __metadata("design:paramtypes", [FsFilterOverlayService,
-        NgZone,
-        ExternalParamsController,
-        FsFilterItemsStore,
-        ActionsController,
-        FsFilterConfig])
-], FilterComponent);
+    _classifyAction(action) {
+        if (action.menu) {
+            this._setKebabActions([...this.menuActions, action]);
+        }
+        else {
+            this._setActions([...this.actions, action]);
+        }
+    }
+    _listenMobileMedia() {
+        this._breakpointObserver.observe(this._mobileMedia)
+            .pipe(skip(1), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._classifyActions();
+        });
+    }
+}
+ActionsController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsController, deps: [{ token: i1$7.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+ActionsController.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsController });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsController, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$7.BreakpointObserver }]; } });
+
+class FsFilterActionButtonComponent {
+}
+FsFilterActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsFilterActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: { action: "action" }, host: { classAttribute: "action-button" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'basic'\"\n          mat-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button type=\"button\"\n          *ngSwitchDefault\n          mat-raised-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'icon'\"\n          mat-icon-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'fab'\"\n          mat-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'mini-fab'\"\n          mat-mini-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #withIcon>\n      <mat-icon *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n      {{action.label}}\n      <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n    </ng-template>\n  </ng-template>\n</ng-container>\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"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: FsFilterActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-action-button',
+                    templateUrl: './action-button.component.html',
+                    host: {
+                        class: 'action-button',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { action: [{
+                type: Input
+            }] } });
+
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionKebabActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-action-kebab-actions',
+                    styleUrls: ['./action-kebab-actions.component.scss'],
+                    templateUrl: './action-kebab-actions.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { kebabActions: [{
+                type: Input
+            }] } });
+
+class FsFilterActionsComponent {
+    constructor() {
+        this.kebabActions = [];
+        this.actions = [];
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-actions',
+                    templateUrl: './actions.component.html',
+                    styleUrls: [
+                        './actions.component.scss',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { kebabActions: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }] } });
 
-let FilterItemComponent = class FilterItemComponent {
+class FsFilterChipContentComponent {
     constructor(_cdRef) {
         this._cdRef = _cdRef;
         this._destroy$ = new Subject();
-        this.itemType = ItemType;
     }
     ngOnInit() {
+        this.listenValueChangesForRanges();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    listenValueChangesForRanges() {
         this.item.value$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this._cdRef.markForCheck();
+            this.content = this._getContent();
+            this._cdRef.detectChanges();
         });
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    _getContent() {
+        const result = this.item.getChipsContent(this.type);
+        if (this.item.chipLabel !== undefined) {
+            if (this.item.chipLabel === '') {
+                return `${result}`;
+            }
+            else {
+                if (Array.isArray(this.item.chipLabel)) {
+                    const label = getLabelFromArray(this.item.chipLabel, this.type);
+                    return `${label}: ${result}`;
+                }
+                else {
+                    return `${this.item.chipLabel}: ${result}`;
+                }
+            }
+        }
+        else {
+            if (Array.isArray(this.item.label)) {
+                const label = getLabelFromArray(this.item.label, this.type);
+                return `${label}: ${result}`;
+            }
+            else {
+                if (this.item.isTypeCheckbox) {
+                    return result;
+                }
+                else {
+                    return `${this.item.label}: ${result}`;
+                }
+            }
+        }
     }
-};
-FilterItemComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", BaseItem)
-], FilterItemComponent.prototype, "item", void 0);
-FilterItemComponent = __decorate([
-    Component({
-        selector: 'filter-item',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], FilterItemComponent);
-
-let BaseItemComponent = class BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.inline = false;
-        this._destroy$ = new Subject();
-        this._debouncer$ = new Subject();
-        this._kvDiffer = this._kvDiffers.find(this.item || {}).create();
-        this.listenWithDebounce();
+}
+FsFilterChipContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipContentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FsFilterChipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: { item: "item", type: "type" }, ngImport: i0, template: "{{ content }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-chip-content',
+                    templateUrl: './filter-chip-content.component.html',
+                    styleUrls: ['./filter-chip-content.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+function getLabelFromArray(labelArr, type) {
+    if (type === 'from' && labelArr[0]) {
+        return `${labelArr[0]}`;
     }
-    set item(value) {
-        this._item = value;
+    else if (type === 'to' && labelArr[1]) {
+        return `${labelArr[1]}`;
     }
-    ;
-    get item() {
-        return this._item;
+    else {
+        return '';
     }
-    ngDoCheck() {
-        if (this._kvDiffer) {
-            const changes = this._kvDiffer.diff(this.item);
-            if (changes) {
-                this._cd.detectChanges();
-            }
+}
+
+class FsFilterChipComponent {
+    constructor(_cdRef, _focusController) {
+        this._cdRef = _cdRef;
+        this._focusController = _focusController;
+        this._chipRenderTimer$ = timer(500)
+            .pipe(mapTo(true));
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.rangeItem = this.item.isTypeDateRange
+            || this.item.isTypeRange
+            || this.item.isTypeDateTimeRange;
+        this.listenValueChangesForRanges();
+        this._updateVisibility();
+        if (this.item.hasPendingValues) {
+            this.item.loadAsyncValues(false);
+            this.item.values$
+                .pipe(take(2), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._updateVisibility();
+                this._cdRef.markForCheck();
+            });
+            this._initDelayRender();
         }
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    listenWithDebounce() {
-        this._debouncer$
-            .pipe(debounceTime(150), takeUntil(this._destroy$))
+    focusOnItem(type = null) {
+        this._focusController.click(this.item, type);
+    }
+    removeItem(event, type = null) {
+        if (this.item instanceof RangeItem) {
+            this.item.clearRange(type);
+        }
+        else if (this.item instanceof DateRangeItem || this.item instanceof DateTimeRangeItem) {
+            this.item.clearDateRange(type);
+        }
+        else {
+            this.item.clear();
+        }
+    }
+    listenValueChangesForRanges() {
+        this.item.value$
+            .pipe(distinctUntilChanged(), takeUntil(this._destroy$))
             .subscribe(() => {
-            this.item.valueChanged();
+            this._updateVisibility();
+            this._cdRef.markForCheck();
         });
     }
-    itemChange() {
-        this._debouncer$.next();
-    }
-};
-BaseItemComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], BaseItemComponent.prototype, "item", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], BaseItemComponent.prototype, "inline", void 0);
-BaseItemComponent = __decorate([
-    Component({
-        selector: 'base-item',
-        template: '',
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], BaseItemComponent);
-
-let SelectComponent = class SelectComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        // For case when we have multiple selection with __all option
-        // If _all has been selected than we must disable all other items
-        this.allItemsOptionSelected = false;
+    _updateVisibility() {
+        this.itemVisible = this.item.isChipVisible;
     }
-    ngDoCheck() {
-        if (this._kvDiffer) {
-            const changes = this._kvDiffer.diff(this.item);
-            if (changes) {
-                this._cd.markForCheck();
-                if (this.selectedItem) {
-                    this.selectedItem.cd.markForCheck();
-                }
-            }
-        }
+    _initDelayRender() {
+        this.chipDelayedRender$ = combineLatest([
+            this.item.values$,
+            this._chipRenderTimer$.pipe(startWith(false))
+        ])
+            .pipe(map(([values, timerValue]) => {
+            return !!values || timerValue;
+        }));
     }
-};
-SelectComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    ViewChild('selectItem'),
-    __metadata("design:type", Object)
-], SelectComponent.prototype, "selectedItem", void 0);
-SelectComponent = __decorate([
-    Component({
-        selector: 'filter-item-select',
-        template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(item.values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], SelectComponent);
+}
+FsFilterChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
+FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n      *ngIf=\"item.model?.min || item.model?.from\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\n  <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n    </ng-container>\n\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f}\n"], components: [{ type: i2$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }, { type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-chip',
+                    templateUrl: './filter-chip.component.html',
+                    styleUrls: ['./filter-chip.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FocusControllerService }]; }, propDecorators: { item: [{
+                type: Input
+            }] } });
 
-let SelectGroupsComponent = class SelectGroupsComponent {
-    constructor(cd) {
-        this.cd = cd;
-    }
-    compare(o1, o2) {
-        return o1 == o2;
+class FsFilterChipsComponent {
+    constructor() {
+        this.chips = [];
     }
-};
-SelectGroupsComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    ViewChild('select', { static: true }),
-    __metadata("design:type", MatSelect)
-], SelectGroupsComponent.prototype, "select", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], SelectGroupsComponent.prototype, "item", void 0);
-SelectGroupsComponent = __decorate([
-    Component({
-        selector: 'filter-item-select-groups',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], SelectGroupsComponent);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-chips',
+                    templateUrl: './filter-chips.component.html',
+                    styleUrls: ['./filter-chips.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { filters: [{
+                type: Input
+            }] } });
 
-let SelectSimpleComponent = class SelectSimpleComponent {
-    constructor(cd) {
-        this.cd = cd;
+class FilterComponent {
+    constructor(_filterOverlay, _zone, _externalParams, _filterItems, _actions, _defaultConfig) {
+        this._filterOverlay = _filterOverlay;
+        this._zone = _zone;
+        this._externalParams = _externalParams;
+        this._filterItems = _filterItems;
+        this._actions = _actions;
+        this._defaultConfig = _defaultConfig;
+        this.showSortBy = true;
+        this.showFilterInput = true;
+        this.closed = new EventEmitter();
+        this.opened = new EventEmitter();
+        this.ready = new EventEmitter();
+        this.showFilterMenu = false;
+        this.windowDesktop = false;
+        this.fsFilterClass = true;
+        this.searchText = new FormControl();
+        this.searchPlaceholder = 'Search';
+        this._config = null;
+        this._filtersBtnVisible$ = new BehaviorSubject(true);
+        this._keywordVisible$ = new BehaviorSubject(true);
+        this._hasFilterChips$ = new BehaviorSubject(false);
+        this._destroy$ = new Subject();
+        this._listenWhenFilterReady();
+        this._updateWindowWidth();
+        this._filterOverlay.attach$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.showFilterMenu = true;
+        });
+        this._filterOverlay.detach$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.showFilterMenu = false;
+        });
+        this._listenWindowResize();
     }
-    changed() {
-        if (this.item.isolate) {
-            this.item.isolate.enabled = false;
-        }
+    set setConfig(config) {
+        this._initFilterWithConfig(config);
     }
-    isolateChange(filter) {
-        if (filter.isolate.enabled) {
-            filter.model = filter.isolate.value;
-        }
-        else {
-            filter.model = null;
-        }
+    set setFilter(config) {
+        this._initFilterWithConfig(config);
     }
-};
-SelectSimpleComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", SimpleSelectItem)
-], SelectSimpleComponent.prototype, "item", void 0);
-__decorate([
-    ViewChild('select', { static: true }),
-    __metadata("design:type", MatSelect)
-], SelectSimpleComponent.prototype, "select", void 0);
-SelectSimpleComponent = __decorate([
-    Component({
-        selector: 'filter-item-select-simple',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".isolate{margin-bottom:25px}"]
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], SelectSimpleComponent);
-
-let SelectMultipleComponent = class SelectMultipleComponent {
-    constructor(cd) {
-        this.cd = cd;
+    get config() {
+        return this._config;
     }
-    changed() {
-        if (this.item.isolate) {
-            this.item.isolate.enabled = false;
-            if (this.item.multiple && Array.isArray(this.item.model)) {
-                const index = this.item.model.indexOf(this.item.isolate.value);
-                if (index > -1) {
-                    this.item.model.splice(index, 1);
-                }
-            }
-        }
+    get filterParams() {
+        return this._filterItems.values();
     }
-    close() {
-        this.select.close();
+    get filterParamsQuery() {
+        return this._filterItems.valuesAsQuery();
     }
-    isolateChange(filter) {
-        if (filter.isolate.enabled) {
-            filter.model = filter.multiple ? [filter.isolate.value] : filter.isolate.value;
-        }
-        else {
-            if (filter.multiple) {
-                filter.model = filter.defaultValue ? filter.defaultValue : [];
-            }
-            else {
-                filter.model = filter.defaultValue ? filter.defaultValue : null;
-            }
-        }
+    get items() {
+        return this._filterItems.items;
     }
-};
-SelectMultipleComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], SelectMultipleComponent.prototype, "item", void 0);
-__decorate([
-    ViewChild('select', { static: true }),
-    __metadata("design:type", MatSelect)
-], SelectMultipleComponent.prototype, "select", void 0);
-SelectMultipleComponent = __decorate([
-    Component({
-        selector: 'filter-item-select-multiple',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".isolate{margin-bottom:25px}"]
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], SelectMultipleComponent);
-
-let ChipsComponent = class ChipsComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get visibleItems() {
+        return this._filterItems.visibleItems;
     }
-    modelChange() {
-        this.itemChange();
+    get itemsReady$() {
+        return this._filterItems.ready$;
     }
-    compareFn(modelValue, chipValue) {
-        return modelValue.value === chipValue.value;
+    get hasFilterChips$() {
+        return this._hasFilterChips$.asObservable();
     }
-};
-ChipsComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-ChipsComponent = __decorate([
-    Component({
-        selector: 'filter-item-chips',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: ["fs-chip{line-height:40px}"]
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], ChipsComponent);
-
-let TextComponent = class TextComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.textControl = new FormControl();
-        this.destroy$ = new Subject();
+    get hasVisibleItemOrSorting() {
+        return this.visibleItems.length > 0 || !!this._filterItems.sortByItem;
     }
-    ngOnInit() {
-        this._listenControlValueChanges();
-        this._listenModelChanges();
+    get hasKeyword() {
+        return this._filterItems.hasKeyword;
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    get filtersBtnVisible$() {
+        return this._filtersBtnVisible$.asObservable();
     }
-    _listenControlValueChanges() {
-        this.textControl.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(200), takeUntil(this.destroy$))
-            .subscribe((value) => {
-            this.item.model = value;
-        });
+    get keywordVisible$() {
+        return this._keywordVisible$.asObservable();
     }
-    _listenModelChanges() {
-        this._item.value$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.textControl.setValue(this.item.model, { emitEvent: false });
-        });
+    get actionsVisible$() {
+        return this._actions.visible$;
     }
-};
-TextComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-TextComponent = __decorate([
-    Component({
-        selector: 'filter-item-text',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [""]
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], TextComponent);
-
-let RangeComponent = class RangeComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    get actions$() {
+        return this._actions.actions$;
+    }
+    get menuActions$() {
+        return this._actions.menuActions$;
     }
     ngOnInit() {
-        this.listenChanges();
+        // Avoid ngChanges error
+        setTimeout(() => {
+            if (this.config.autofocus) {
+                this.focus();
+            }
+        });
+        this._listenInternalItemsChange();
+        this._initOverlay();
     }
-    listenChanges() {
-        const fromListener = fromEvent(this.from.nativeElement, 'keyup')
-            .pipe(distinctUntilChanged());
-        const toListener = fromEvent(this.to.nativeElement, 'keyup')
-            .pipe(distinctUntilChanged());
-        merge(fromListener, toListener)
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.itemChange();
+    ngAfterViewInit() {
+        this._listenInputKeyEvents();
+        // FIXME prevent fire change after init
+        setTimeout(() => {
+            this._listenInputChanges();
         });
     }
-};
-RangeComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    ViewChild('from', { static: true }),
-    __metadata("design:type", ElementRef)
-], RangeComponent.prototype, "from", void 0);
-__decorate([
-    ViewChild('to', { static: true }),
-    __metadata("design:type", Object)
-], RangeComponent.prototype, "to", void 0);
-RangeComponent = __decorate([
-    Component({
-        selector: 'filter-item-range',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], RangeComponent);
-
-let AutocompleteComponent = class AutocompleteComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.displayWith = (data) => {
-            return data ? data.name : data;
-        };
-        this.fetch = (keyword) => {
-            return this.item.valuesFn(keyword);
-        };
+    ngOnDestroy() {
+        this._destroyFilterDrawer();
+        this._destroy$.next();
+        this._destroy$.complete();
     }
-};
-AutocompleteComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-AutocompleteComponent = __decorate([
-    Component({
-        selector: 'filter-item-autocomplete',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], AutocompleteComponent);
-
-let AutocompletechipsComponent = class AutocompletechipsComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.fetch = (keyword) => {
-            return this.item.valuesFn(keyword);
-        };
+    focus() {
+        if (this.searchTextMatInput) {
+            this.searchTextMatInput.focus();
+        }
     }
-    // SP-T1747
-    clicked() {
-        this.chipBackground = this.item.chipBackground;
-        this.chipColor = this.item.chipColor;
-        this.chipIcon = this.item.chipIcon;
-        this._cd.markForCheck();
+    updateSort(sort) {
+        this._filterItems.updateSort(sort);
     }
-    addAutocompleteChipItem(event) {
-        if (event.data && this.item.model.indexOf(event.data.value) === -1) {
-            this.item.model.push(event.data);
-            this.itemChange();
-        }
+    /**
+     *
+     * Do update value of some field
+     *
+     * @param values - values for update
+     *
+     * To update text value just pass new text value
+     *
+     * public updateSelectValue(val) {
+     *   this.filterEl.updateValues({ keyword: val });
+     * }
+     *
+     * To update select or observable select you could pass suitable value
+     *
+     * public updateSelectValue(val: number) {
+     *   this.filterEl.updateValues({ simple_select: val }, { observable_select: val });
+     * }
+     *
+     * To update checkbox value just pass true/false as value
+     *
+     * public updateCheckox(val: boolean) {
+     *   this.filterEl.updateValues({ checkbox: val });
+     * }
+     *
+     * To update range value just pass object with min&max object or just with one of targets
+     *
+     * Ex.: { min: 10, max 15 }, { min: 5 }, { max 5 }
+     *
+     * public updateRange(val) {
+     *   this.filterEl.updateValues({ range: val });
+     * }
+     *
+     * To update autocomplete just pass object with name/value fields
+     *
+     * Ex.: { name: 'John Doe', value: 1 }
+     *
+     * public updateAutocomplete(val) {
+     *   this.filterEl.updateValues({ autocomplete_user_id: val });
+     * }
+     *
+     * To update autocompletechips just pass:
+     *
+     * 1) object with name/value fields - will be appended to existing set of values
+     *
+     * { name: 'John Doe', value: 1 }
+     *
+     * 2) array of objects - will be appended to existing set of values
+     *
+     * [{ name: 'John Doe', value: 1 }, { name: 'Darya Filipova', value: 2 }]
+     *
+     * 3) null - clear existing set of values
+     *
+     * public updateAutocomplete(val) {
+     *   this.filterEl.updateValues({ autocompletechips_user_id: val });
+     * }
+     *
+     */
+    updateValues(values) {
+        Object.keys(values).forEach((key) => {
+            const filterItem = this.items
+                .find((item) => item.name === key);
+            if (!filterItem) {
+                return;
+            }
+            filterItem.model = values[key];
+        });
     }
-    removeAutocompleteChipItem(event) {
-        remove(this.item.model, { value: event.data.value });
-        this.itemChange();
+    hide() {
+        this.changeVisibility(false);
     }
-    clearAutocompleteChipItem() {
-        this.item.clear();
-        this.itemChange();
+    show() {
+        this.changeVisibility(true);
     }
-    compareItems(item1, item2) {
-        return (item1 === null || item1 === void 0 ? void 0 : item1.value) === (item2 === null || item2 === void 0 ? void 0 : item2.value);
+    changeVisibilityClick(value, event = null) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.changeVisibility(value);
     }
-};
-AutocompletechipsComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-AutocompletechipsComponent = __decorate([
-    Component({
-        selector: 'filter-item-autocompletechips',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], AutocompletechipsComponent);
-
-let DateComponent = class DateComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.viewType = 'date';
-        this.itemDateMode = ItemDateMode;
-        this.showYear = true;
-        this.showMonth = true;
-        this.showDay = true;
+    filterInputEvent(event) {
+        if (!this.windowDesktop) {
+            return;
+        }
+        if (['Enter', 'NumpadEnter', 'Escape'].indexOf(event.code) >= 0) {
+            this.changeVisibility(false);
+            if (this.searchTextInput) {
+                this.searchTextInput.nativeElement.blur();
+            }
+        }
     }
-    ngOnInit() {
-        if (this.item.type === ItemType.DateTime) {
-            this.viewType = 'datetime';
+    getItemValue(name) {
+        const item = this.items
+            .find((item) => item.name === name);
+        if (item) {
+            return item.model;
         }
         else {
-            this.viewType = 'date';
+            return null;
         }
-        if (this.item.mode === ItemDateMode.ScrollMonthYear) {
-            this.showDay = false;
+    }
+    showItem(name) {
+        const item = this.getItem(name);
+        if (item) {
+            item.hide = false;
+            this._filterItems.updateVisibleItems();
         }
     }
-};
-DateComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-DateComponent = __decorate([
-    Component({
-        selector: 'filter-item-date',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], DateComponent);
-
-let DateRangeComponent = class DateRangeComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.viewType = 'date';
+    hideItem(name) {
+        const item = this.getItem(name);
+        if (!item) {
+            return;
+        }
+        item.hide = true;
+        this._filterItems.updateVisibleItems();
     }
-    ngOnInit() {
-        if (this.item.type === ItemType.DateTimeRange) {
-            this.viewType = 'datetime';
+    clearItem(name) {
+        const item = this.getItem(name);
+        if (!item) {
+            return;
+        }
+        item.clear();
+    }
+    updateItemConfig(name, params) {
+        var _a, _b;
+        const item = this.getItem(name);
+        if (!item) {
+            return;
+        }
+        item.label = (_a = params.label) !== null && _a !== void 0 ? _a : item.label;
+        item.chipLabel = (_b = params.chipLabel) !== null && _b !== void 0 ? _b : item.chipLabel;
+        this._filterItems.updateVisibleItems();
+    }
+    getItemValueChange$(name) {
+        const item = this.items.find((i) => i.name === name);
+        if (item) {
+            return item.value$
+                .pipe(map(() => {
+                return item.model;
+            }));
         }
         else {
-            this.viewType = 'date';
+            return null;
         }
     }
-};
-DateRangeComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-DateRangeComponent = __decorate([
-    Component({
-        selector: 'filter-item-date-range',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], DateRangeComponent);
-
-let CheckboxComponent = class CheckboxComponent extends BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        super(_kvDiffers, _cd);
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
+    changeVisibility(state) {
+        if (state === this.showFilterMenu) {
+            return;
+        }
+        if (!state) {
+            this.closed.emit();
+            return this._destroyFilterDrawer();
+        }
+        if (!this.hasVisibleItemOrSorting) {
+            return;
+        }
+        this._listenEscButton();
+        this.opened.emit();
+        this._filterOverlay.open();
     }
-};
-CheckboxComponent.ctorParameters = () => [
-    { type: KeyValueDiffers },
-    { type: ChangeDetectorRef }
-];
-CheckboxComponent = __decorate([
-    Component({
-        selector: 'filter-item-checkbox',
-        template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: ["fs-label-field{margin:0}"]
-    }),
-    __metadata("design:paramtypes", [KeyValueDiffers,
-        ChangeDetectorRef])
-], CheckboxComponent);
-
-let FsFilterChipsComponent = class FsFilterChipsComponent {
-    constructor() {
-        this.chips = [];
+    clearSearchText(event) {
+        event.stopPropagation();
+        this._filterItems.keywordItem.clear();
+        this.searchTextInput.nativeElement.focus();
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsFilterChipsComponent.prototype, "filters", void 0);
-FsFilterChipsComponent = __decorate([
-    Component({
-        selector: 'fs-filter-chips',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [""]
-    })
-], FsFilterChipsComponent);
-
-let SelectBackdropComponent = class SelectBackdropComponent {
-    constructor() { }
-};
-SelectBackdropComponent = __decorate([
-    Component({
-        selector: 'filter-item-select-backdrop',
-        template: "",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host{position:absolute;top:0;bottom:0;right:0;z-index:1002;left:0}"]
-    }),
-    __metadata("design:paramtypes", [])
-], SelectBackdropComponent);
-
-let FsFilterChipComponent = class FsFilterChipComponent {
-    constructor(_cdRef, _focusController) {
-        this._cdRef = _cdRef;
-        this._focusController = _focusController;
-        this._chipRenderTimer$ = timer(500)
-            .pipe(mapTo(true));
-        this._destroy$ = new Subject();
+    init() {
+        const data = this._filterItems.valuesAsQuery();
+        this._sort = this._filterItems.getSort();
+        this.config.init(data, this._sort);
+        this._updateChipsVisibility();
     }
-    ngOnInit() {
-        this.rangeItem = this.item.isTypeDateRange
-            || this.item.isTypeRange
-            || this.item.isTypeDateTimeRange;
-        this.listenValueChangesForRanges();
-        this._updateVisibility();
-        if (this.item.hasPendingValues) {
-            this.item.loadAsyncValues(false);
-            this.item.values$
-                .pipe(take(2), takeUntil(this._destroy$))
-                .subscribe(() => {
-                this._updateVisibility();
-                this._cdRef.markForCheck();
-            });
-            this._initDelayRender();
+    clear(event = null) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this._filterItems.filtersClear();
+        if (this.config.clear) {
+            this.config.clear();
         }
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    focusOnItem(type = null) {
-        this._focusController.click(this.item, type);
+    /**
+     * Close filter window and do change callback
+     */
+    search(event) {
+        this.changeVisibilityClick(false, event);
     }
-    removeItem(event, type = null) {
-        if (this.item instanceof RangeItem) {
-            this.item.clearRange(type);
+    reload(event = null) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
         }
-        else if (this.item instanceof DateRangeItem || this.item instanceof DateTimeRangeItem) {
-            this.item.clearDateRange(type);
+        const data = this._filterItems.valuesAsQuery();
+        if (this.config.reload) {
+            this.config.reload(data, this._filterItems.getSort());
         }
-        else {
-            this.item.clear();
+    }
+    getItem(name) {
+        return this.items
+            .find((item) => item.name === name);
+    }
+    /**
+     * Call change callback and apply new filter values
+     */
+    change() {
+        const data = this._filterItems.valuesAsQuery();
+        const sort = this._filterItems.getSort();
+        const sortingChanged = ((!sort || !this._sort) && sort !== this._sort)
+            || (sort && this._sort && !objectsAreEquals(this._sort, sort));
+        if (sortingChanged) {
+            this._sort = sort;
+            if (this.config.sortChange) {
+                this.config.sortChange(data, sort);
+            }
+        }
+        if (this.config.change) {
+            this.config.change(data, sort);
         }
+        this._updateChipsVisibility();
     }
-    listenValueChangesForRanges() {
-        this.item.value$
-            .pipe(distinctUntilChanged(), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._updateVisibility();
-            this._cdRef.markForCheck();
-        });
+    /**
+     * Update filter actions config
+     * @param actions
+     */
+    updateActions(actions) {
+        this._actions.initActions(actions);
     }
-    _updateVisibility() {
-        this.itemVisible = this.item.isChipVisible;
+    /**
+     * Show "Filters" button
+     */
+    showFiltersBtn() {
+        this._filtersBtnVisible$.next(true);
     }
-    _initDelayRender() {
-        this.chipDelayedRender$ = combineLatest([
-            this.item.values$,
-            this._chipRenderTimer$.pipe(startWith(false))
-        ])
-            .pipe(map(([values, timerValue]) => {
-            return !!values || timerValue;
-        }));
+    /**
+     * Hide "Filters" button
+     */
+    hideFiltersBtn() {
+        this._filtersBtnVisible$.next(false);
     }
-};
-FsFilterChipComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: FocusControllerService }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", BaseItem)
-], FsFilterChipComponent.prototype, "item", void 0);
-FsFilterChipComponent = __decorate([
-    Component({
-        selector: 'fs-filter-chip',
-        template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n  <ng-container *ngIf=\"rangeItem; else defaultChip\">\n    <fs-chip\n      *ngIf=\"item.model?.min || item.model?.from\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.clearAllowed\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\n  <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n    <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n      <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n    </ng-container>\n\n    <ng-template #lodaingValues>\n      Loading...\n    </ng-template>\n  </ng-template>\n</ng-container>\n\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: ["fs-chip{cursor:pointer;color:#6f6f6f}"]
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef,
-        FocusControllerService])
-], FsFilterChipComponent);
-
-let FsFilterDrawerActionsComponent = class FsFilterDrawerActionsComponent {
-    constructor(externalParams) {
-        this.externalParams = externalParams;
-        this._clear = new EventEmitter();
-        this._done = new EventEmitter();
+    /**
+     * Show "Keyword" field if it present
+     */
+    showKeywordField() {
+        this._keywordVisible$.next(true);
     }
-    get savedFilters() {
-        return this.externalParams.savedFiltersController;
+    /**
+     * Hide "Keyword" field if it present
+     */
+    hideKeywordField() {
+        this._keywordVisible$.next(false);
     }
-    done() {
-        this._done.emit();
+    /**
+     * Go through actions and check show() callback and update visible actions
+     */
+    updateActionsVisibility() {
+        this._actions.updateActionsVisibility();
     }
-    clear() {
-        this._clear.emit();
+    /**
+     * Go through actions and check disabled() callback and update disabled state
+     */
+    updateDisabledState() {
+        this._actions.updateDisabledState();
     }
-    saveFilters() {
-        this.externalParams
-            .savedFiltersController
-            .openSavedFilterEditDialog();
+    setItems(items) {
+        this._filterItems.destroyItems();
+        this.config.items = items;
+        this._filterItems.setConfig(this._config);
+        this._externalParams.initItems();
+        this._syncSearchInputWithKeyword();
+        this._listenKeywordItemClear();
     }
-};
-FsFilterDrawerActionsComponent.ctorParameters = () => [
-    { type: ExternalParamsController }
-];
-__decorate([
-    Output('clear'),
-    __metadata("design:type", Object)
-], FsFilterDrawerActionsComponent.prototype, "_clear", void 0);
-__decorate([
-    Output('done'),
-    __metadata("design:type", Object)
-], FsFilterDrawerActionsComponent.prototype, "_done", void 0);
-FsFilterDrawerActionsComponent = __decorate([
-    Component({
-        selector: 'fs-filter-drawer-actions',
-        template: "<button type=\"button\" mat-button color=\"primary\" (click)=\"done()\">Done</button>\n<button type=\"button\" mat-button (click)=\"clear()\">Clear</button>\n<ng-container *ngIf=\"savedFilters.enabled$ | async\">\n  <button type=\"button\" mat-button (click)=\"saveFilters()\">Save</button>\n</ng-container>\n\n"
-    }),
-    __metadata("design:paramtypes", [ExternalParamsController])
-], FsFilterDrawerActionsComponent);
-
-let FsFilterIsolateValues = class FsFilterIsolateValues {
-    transform(values, isolate) {
-        if (!isolate) {
-            return values;
+    _initFilterWithConfig(config) {
+        if (this.config) {
+            this._filterItems.destroyItems();
         }
-        else {
-            return values.filter((value) => {
-                return value.value !== isolate.value;
-            });
+        config = Object.assign(Object.assign({}, (this._defaultConfig || {})), config);
+        this._config = new FsFilterConfig(config);
+        this._actions.initActions(this._config.actions);
+        this._filterItems.setConfig(this._config);
+        this._externalParams.setConfig(this._config);
+        this._syncSearchInputWithKeyword();
+        if (!!this.config.reloadWhenConfigChanged) {
+            this.change();
         }
+        this._listenKeywordItemClear();
     }
-};
-FsFilterIsolateValues = __decorate([
-    Pipe({
-        name: 'fsFilterIsolateValues'
-    })
-], FsFilterIsolateValues);
-
-let FocusToItemDirective = class FocusToItemDirective {
-    constructor(_el, _focusController, _targetSelect, _targetDate, _targetDateScroll, _targetDateRangeFrom, _targetDateRangeTo, _targetAutocomplete, _targetAutocompleteChips) {
-        this._el = _el;
-        this._focusController = _focusController;
-        this._targetSelect = _targetSelect;
-        this._targetDate = _targetDate;
-        this._targetDateScroll = _targetDateScroll;
-        this._targetDateRangeFrom = _targetDateRangeFrom;
-        this._targetDateRangeTo = _targetDateRangeTo;
-        this._targetAutocomplete = _targetAutocomplete;
-        this._targetAutocompleteChips = _targetAutocompleteChips;
-        this._destroy$ = new Subject();
+    _destroyFilterDrawer() {
+        this._filterOverlay.close();
     }
-    ngOnInit() {
-        this._focusController
-            .listenFocusFor$(this._item, this._focusTargetType)
-            .pipe(delay(500), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._focus();
-        });
+    _updateWindowWidth() {
+        this.windowDesktop = window.innerWidth > 1200;
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    _listenEscButton() {
+        this._zone.runOutsideAngular(() => {
+            fromEvent(window, 'keyup')
+                .pipe(filter$1((event) => event.code === 'Escape'), takeUntil(this.closed), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._zone.run(() => {
+                    this.changeVisibility(false);
+                });
+            });
+        });
     }
-    _focus() {
-        switch (this._item.type) {
-            case ItemType.Select:
-                {
-                    this._targetSelect.open();
-                }
-                break;
-            case ItemType.Text:
-            case ItemType.Range:
-                {
-                    this._el.nativeElement.focus();
-                }
-                break;
-            case ItemType.Date:
-                {
-                    if (this._item.mode === ItemDateMode.Calendar) {
-                        this._targetDate.open();
-                    }
-                    else {
-                        this._targetDateScroll.inputClick();
-                    }
-                }
-                break;
-            case ItemType.DateRange:
-                {
-                    if (this._focusTargetType === 'from') {
-                        this._targetDateRangeFrom.open();
-                    }
-                    else {
-                        this._targetDateRangeTo.open();
-                    }
-                }
-                break;
-            case ItemType.AutoComplete:
-                {
-                    this._targetAutocomplete.focus();
-                }
-                break;
-            case ItemType.AutoCompleteChips:
-                {
-                    this._targetAutocompleteChips.focus();
-                }
-                break;
+    _listenInputKeyEvents() {
+        if (!this.searchTextInput) {
+            return;
         }
+        this._zone.runOutsideAngular(() => {
+            fromEvent(this.searchTextInput.nativeElement, 'keydown')
+                .pipe(debounceTime(500), filter$1((event) => {
+                return ['Enter', 'NumpadEnter', 'Escape'].indexOf(event.code) > -1;
+            }), takeUntil(this._destroy$))
+                .subscribe((event) => {
+                this._zone.run(() => {
+                    this.filterInputEvent(event);
+                });
+            });
+        });
     }
-};
-FocusToItemDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: FocusControllerService },
-    { type: MatSelect, decorators: [{ type: Optional }, { type: Self }] },
-    { type: FsDatePickerComponent, decorators: [{ type: Optional }, { type: Self }] },
-    { type: FsDateScrollPickerComponent, decorators: [{ type: Optional }, { type: Self }] },
-    { type: DateRangePickerFromComponent, decorators: [{ type: Optional }, { type: Self }] },
-    { type: DateRangePickerToComponent, decorators: [{ type: Optional }, { type: Self }] },
-    { type: FsAutocompleteComponent, decorators: [{ type: Optional }, { type: Self }] },
-    { type: FsAutocompleteChipsComponent, decorators: [{ type: Optional }, { type: Self }] }
-];
-__decorate([
-    Input('fsFilterFocusTrigger'),
-    __metadata("design:type", Object)
-], FocusToItemDirective.prototype, "_item", void 0);
-__decorate([
-    Input('focusTargetType'),
-    __metadata("design:type", Object)
-], FocusToItemDirective.prototype, "_focusTargetType", void 0);
-FocusToItemDirective = __decorate([
-    Directive({
-        selector: '[fsFilterFocusTrigger]',
-    }),
-    __param(2, Optional()), __param(2, Self()),
-    __param(3, Optional()), __param(3, Self()),
-    __param(4, Optional()), __param(4, Self()),
-    __param(5, Optional()), __param(5, Self()),
-    __param(6, Optional()), __param(6, Self()),
-    __param(7, Optional()), __param(7, Self()),
-    __param(8, Optional()), __param(8, Self()),
-    __metadata("design:paramtypes", [ElementRef,
-        FocusControllerService,
-        MatSelect,
-        FsDatePickerComponent,
-        FsDateScrollPickerComponent,
-        DateRangePickerFromComponent,
-        DateRangePickerToComponent,
-        FsAutocompleteComponent,
-        FsAutocompleteChipsComponent])
-], FocusToItemDirective);
-
-let FsFilterChipContentComponent = class FsFilterChipContentComponent {
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        this._destroy$ = new Subject();
+    _listenWindowResize() {
+        this._zone.runOutsideAngular(() => {
+            fromEvent(window, 'resize')
+                .pipe(debounceTime(100), takeUntil(this._destroy$))
+                .subscribe(() => {
+                this._zone.run(() => {
+                    this._updateWindowWidth();
+                });
+            });
+        });
     }
-    ngOnInit() {
-        this.listenValueChangesForRanges();
+    _listenInputChanges() {
+        if (!this._filterItems.keywordItem) {
+            return;
+        }
+        this._zone.runOutsideAngular(() => {
+            this.searchText.valueChanges
+                .pipe(debounceTime(200), distinctUntilChanged(), filter$1((value) => {
+                var _a;
+                return value !== ((_a = this._filterItems.keywordItem) === null || _a === void 0 ? void 0 : _a.model);
+            }), takeUntil(this._destroy$))
+                .subscribe((value) => {
+                this._zone.run(() => {
+                    const keywordItem = this._filterItems.keywordItem;
+                    if (keywordItem && keywordItem.value !== value) {
+                        keywordItem.model = value;
+                    }
+                });
+            });
+        });
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    _syncSearchInputWithKeyword() {
+        const keywordItem = this._filterItems.keywordItem;
+        if (keywordItem) {
+            this.searchText.setValue(keywordItem.model);
+            this.searchPlaceholder = keywordItem.label || 'Search';
+        }
     }
-    listenValueChangesForRanges() {
-        this.item.value$
+    _listenKeywordItemClear() {
+        var _a;
+        (_a = this._filterItems
+            .keywordItem) === null || _a === void 0 ? void 0 : _a.clear$.pipe(takeUntil(this._filterItems.keywordItem.destroy$), takeUntil(this._destroy$)).subscribe(() => {
+            this.searchText.setValue('');
+        });
+    }
+    _listenInternalItemsChange() {
+        this._filterItems
+            .itemsChange$
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.content = this._getContent();
-            this._cdRef.detectChanges();
+            this.change();
         });
     }
-    _getContent() {
-        const result = this.item.getChipsContent(this.type);
-        if (this.item.chipLabel !== undefined) {
-            if (this.item.chipLabel === '') {
-                return `${result}`;
-            }
-            else {
-                if (Array.isArray(this.item.chipLabel)) {
-                    const label = getLabelFromArray(this.item.chipLabel, this.type);
-                    return `${label}: ${result}`;
-                }
-                else {
-                    return `${this.item.chipLabel}: ${result}`;
-                }
-            }
-        }
-        else {
-            if (Array.isArray(this.item.label)) {
-                const label = getLabelFromArray(this.item.label, this.type);
-                return `${label}: ${result}`;
-            }
-            else {
-                if (this.item.isTypeCheckbox) {
-                    return result;
-                }
-                else {
-                    return `${this.item.label}: ${result}`;
-                }
-            }
-        }
-    }
-};
-FsFilterChipContentComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", BaseItem)
-], FsFilterChipContentComponent.prototype, "item", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FsFilterChipContentComponent.prototype, "type", void 0);
-FsFilterChipContentComponent = __decorate([
-    Component({
-        selector: 'fs-filter-chip-content',
-        template: "{{ content }}\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [""]
-    }),
-    __metadata("design:paramtypes", [ChangeDetectorRef])
-], FsFilterChipContentComponent);
-function getLabelFromArray(labelArr, type) {
-    if (type === 'from' && labelArr[0]) {
-        return `${labelArr[0]}`;
+    _initOverlay() {
+        this._filterOverlay.setClearFn(this.clear.bind(this));
+        this._filterOverlay.setDoneFn(this.hide.bind(this));
     }
-    else if (type === 'to' && labelArr[1]) {
-        return `${labelArr[1]}`;
+    // We may need some time to recieve external params and after that ready can be emitted
+    _listenWhenFilterReady() {
+        combineLatest([
+            this._externalParams.pending$,
+            this.itemsReady$,
+        ])
+            .pipe(filter$1(([pendingParams, itemsReady]) => !pendingParams && itemsReady), takeUntil(this._destroy$))
+            .subscribe(() => {
+            if (this.config.init) {
+                this.init();
+            }
+            this.ready.emit();
+        });
     }
-    else {
-        return '';
+    _updateChipsVisibility() {
+        const hasFilterChips = this._filterItems.items
+            .some((item) => {
+            return item.isChipVisible;
+        });
+        this._hasFilterChips$.next(hasFilterChips);
     }
 }
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, deps: [{ token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: FS_FILTER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterComponent, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy", showFilterInput: "showFilterInput" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass" } }, providers: [
+        FsFilterOverlayService,
+        ExternalParamsController,
+        PersistanceParamsController,
+        QueryParamsController,
+        FocusControllerService,
+        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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter',
+                    styleUrls: ['./filter.component.scss'],
+                    templateUrl: './filter.component.html',
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [
+                        FsFilterOverlayService,
+                        ExternalParamsController,
+                        PersistanceParamsController,
+                        QueryParamsController,
+                        FocusControllerService,
+                        FsFilterItemsStore,
+                        SavedFiltersController,
+                        ActionsController,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: FsFilterConfig, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FS_FILTER_CONFIG]
+                }] }]; }, propDecorators: { setConfig: [{
+                type: Input,
+                args: ['config']
+            }], setFilter: [{
+                type: Input,
+                args: ['filter']
+            }], showSortBy: [{
+                type: Input
+            }], showFilterInput: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], ready: [{
+                type: Output
+            }], statusBar: [{
+                type: ContentChild,
+                args: [FilterStatusBarDirective, { read: TemplateRef }]
+            }], searchTextInput: [{
+                type: ViewChild,
+                args: ['searchTextInput']
+            }], searchTextMatInput: [{
+                type: ViewChild,
+                args: ['searchTextInput', { read: MatInput }]
+            }], showFilterMenu: [{
+                type: HostBinding,
+                args: ['class.filters-open']
+            }], windowDesktop: [{
+                type: HostBinding,
+                args: ['class.window-desktop']
+            }], fsFilterClass: [{
+                type: HostBinding,
+                args: ['class.fs-filter']
+            }] } });
+
+class SelectBackdropComponent {
+    constructor() { }
+}
+SelectBackdropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectBackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectBackdropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectBackdropComponent, selector: "filter-item-select-backdrop", ngImport: i0, template: "", styles: [":host{position:absolute;top:0;bottom:0;right:0;z-index:1002;left:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectBackdropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'filter-item-select-backdrop',
+                    styleUrls: ['./backdrop.component.scss'],
+                    templateUrl: './backdrop.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return []; } });
 
-let FsSavedFiltersMenuComponent = class FsSavedFiltersMenuComponent {
+class FsSavedFiltersMenuComponent {
     constructor(_itemsStore, _externalParams, _savedFilters) {
         this._itemsStore = _itemsStore;
         this._externalParams = _externalParams;
@@ -4180,105 +4174,99 @@ let FsSavedFiltersMenuComponent = class FsSavedFiltersMenuComponent {
     manageFilters() {
         this.manage.emit();
     }
-};
-FsSavedFiltersMenuComponent.ctorParameters = () => [
-    { type: FsFilterItemsStore },
-    { type: ExternalParamsController },
-    { type: SavedFiltersController }
-];
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsSavedFiltersMenuComponent.prototype, "select", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsSavedFiltersMenuComponent.prototype, "clear", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsSavedFiltersMenuComponent.prototype, "manage", void 0);
-FsSavedFiltersMenuComponent = __decorate([
-    Component({
-        selector: 'fs-filter-saved-filters-menu',
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [":host ::ng-deep .selector{cursor:pointer}"]
-    }),
-    __metadata("design:paramtypes", [FsFilterItemsStore,
-        ExternalParamsController,
-        SavedFiltersController])
-], FsSavedFiltersMenuComponent);
-
-let FsFilterActionsComponent = class FsFilterActionsComponent {
-    constructor() {
-        this.kebabActions = [];
-        this.actions = [];
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsFilterActionsComponent.prototype, "kebabActions", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsFilterActionsComponent.prototype, "actions", void 0);
-FsFilterActionsComponent = __decorate([
-    Component({
-        selector: 'fs-filter-actions',
-        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        [multiple]=\"action.multiple\"\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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        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}"]
-    })
-], FsFilterActionsComponent);
-
-let FsFilterActionButtonComponent = class FsFilterActionButtonComponent {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Action)
-], FsFilterActionButtonComponent.prototype, "action", void 0);
-FsFilterActionButtonComponent = __decorate([
-    Component({
-        selector: 'fs-filter-action-button',
-        template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'basic'\"\n          mat-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button type=\"button\"\n          *ngSwitchDefault\n          mat-raised-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'icon'\"\n          mat-icon-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'fab'\"\n          mat-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'mini-fab'\"\n          mat-mini-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #withIcon>\n      <mat-icon *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n      {{action.label}}\n      <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n    </ng-template>\n  </ng-template>\n</ng-container>\n",
-        host: {
-            class: 'action-button',
-        },
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], FsFilterActionButtonComponent);
-
-let FsFilterActionKebabActionsComponent = class FsFilterActionKebabActionsComponent {
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsFilterActionKebabActionsComponent.prototype, "kebabActions", void 0);
-FsFilterActionKebabActionsComponent = __decorate([
-    Component({
-        selector: 'fs-filter-action-kebab-actions',
-        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            [multiple]=\"action.multiple\"\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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".menu-button{width:36px;height:36px;line-height:36px}"]
-    })
-], FsFilterActionKebabActionsComponent);
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSavedFiltersMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-saved-filters-menu',
+                    templateUrl: './saved-filters-menu.component.html',
+                    styleUrls: [
+                        './saved-filters-menu.component.scss',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: ExternalParamsController }, { type: SavedFiltersController }]; }, propDecorators: { select: [{
+                type: Output
+            }], clear: [{
+                type: Output
+            }], manage: [{
+                type: Output
+            }] } });
 
-var FsFilterModule_1;
-let FsFilterModule = FsFilterModule_1 = class FsFilterModule {
+class FsFilterModule {
     static forRoot(config = {}) {
         return {
-            ngModule: FsFilterModule_1,
+            ngModule: FsFilterModule,
             providers: [
                 { provide: FS_FILTER_CONFIG, useValue: config || {} }
             ]
         };
     }
-};
-FsFilterModule = FsFilterModule_1 = __decorate([
-    NgModule({
-        imports: [
+}
+FsFilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterModule, declarations: [BaseItemComponent,
+        FilterComponent,
+        FilterItemComponent,
+        FsFilterChipsComponent,
+        SelectComponent,
+        SelectGroupsComponent,
+        SelectSimpleComponent,
+        SelectMultipleComponent,
+        ChipsComponent,
+        TextComponent,
+        RangeComponent,
+        AutocompleteComponent,
+        AutocompletechipsComponent,
+        DateComponent,
+        DateRangeComponent,
+        CheckboxComponent,
+        FilterDrawerComponent,
+        SelectBackdropComponent,
+        FsFilterChipComponent,
+        FsFilterChipContentComponent,
+        FsFilterDrawerActionsComponent,
+        FsFilterSavedFilterEditComponent,
+        FsSavedFiltersMenuComponent,
+        FsFilterActionsComponent,
+        FsFilterActionButtonComponent,
+        FsFilterActionKebabActionsComponent,
+        FilterStatusBarDirective,
+        FocusToItemDirective,
+        // Pipes
+        FsFilterIsolateValues], imports: [CommonModule,
+        RouterModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatChipsModule,
+        MatCheckboxModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatDialogModule,
+        FlexLayoutModule,
+        FsChipModule,
+        FsCommonModule,
+        FsStoreModule,
+        FsDatePickerModule,
+        FsLabelModule,
+        FsAutocompleteModule,
+        FsAutocompleteChipsModule,
+        FsScrollModule,
+        PortalModule,
+        FsMaskModule,
+        FsMenuModule,
+        FsSkeletonModule,
+        FsFormModule,
+        FsFileModule], exports: [FilterComponent,
+        FilterStatusBarDirective,
+        FsSavedFiltersMenuComponent] });
+FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterModule, providers: [
+        FsStore,
+    ], imports: [[
             CommonModule,
             RouterModule,
             FormsModule,
@@ -4306,52 +4294,84 @@ FsFilterModule = FsFilterModule_1 = __decorate([
             FsSkeletonModule,
             FsFormModule,
             FsFileModule,
-        ],
-        declarations: [
-            BaseItemComponent,
-            FilterComponent,
-            FilterItemComponent,
-            FsFilterChipsComponent,
-            SelectComponent,
-            SelectGroupsComponent,
-            SelectSimpleComponent,
-            SelectMultipleComponent,
-            ChipsComponent,
-            TextComponent,
-            RangeComponent,
-            AutocompleteComponent,
-            AutocompletechipsComponent,
-            DateComponent,
-            DateRangeComponent,
-            CheckboxComponent,
-            FilterDrawerComponent,
-            SelectBackdropComponent,
-            FsFilterChipComponent,
-            FsFilterChipContentComponent,
-            FsFilterDrawerActionsComponent,
-            FsFilterSavedFilterEditComponent,
-            FsSavedFiltersMenuComponent,
-            FsFilterActionsComponent,
-            FsFilterActionButtonComponent,
-            FsFilterActionKebabActionsComponent,
-            FilterStatusBarDirective,
-            FocusToItemDirective,
-            // Pipes
-            FsFilterIsolateValues,
-        ],
-        providers: [
-            FsStore,
-        ],
-        exports: [
-            FilterComponent,
-            FilterStatusBarDirective,
-            FsSavedFiltersMenuComponent,
-        ],
-        entryComponents: [
-            FilterDrawerComponent
-        ]
-    })
-], FsFilterModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatChipsModule,
+                        MatCheckboxModule,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatDialogModule,
+                        FlexLayoutModule,
+                        FsChipModule,
+                        FsCommonModule,
+                        FsStoreModule,
+                        FsDatePickerModule,
+                        FsLabelModule,
+                        FsAutocompleteModule,
+                        FsAutocompleteChipsModule,
+                        FsScrollModule,
+                        PortalModule,
+                        FsMaskModule,
+                        FsMenuModule,
+                        FsSkeletonModule,
+                        FsFormModule,
+                        FsFileModule,
+                    ],
+                    declarations: [
+                        BaseItemComponent,
+                        FilterComponent,
+                        FilterItemComponent,
+                        FsFilterChipsComponent,
+                        SelectComponent,
+                        SelectGroupsComponent,
+                        SelectSimpleComponent,
+                        SelectMultipleComponent,
+                        ChipsComponent,
+                        TextComponent,
+                        RangeComponent,
+                        AutocompleteComponent,
+                        AutocompletechipsComponent,
+                        DateComponent,
+                        DateRangeComponent,
+                        CheckboxComponent,
+                        FilterDrawerComponent,
+                        SelectBackdropComponent,
+                        FsFilterChipComponent,
+                        FsFilterChipContentComponent,
+                        FsFilterDrawerActionsComponent,
+                        FsFilterSavedFilterEditComponent,
+                        FsSavedFiltersMenuComponent,
+                        FsFilterActionsComponent,
+                        FsFilterActionButtonComponent,
+                        FsFilterActionKebabActionsComponent,
+                        FilterStatusBarDirective,
+                        FocusToItemDirective,
+                        // Pipes
+                        FsFilterIsolateValues,
+                    ],
+                    providers: [
+                        FsStore,
+                    ],
+                    exports: [
+                        FilterComponent,
+                        FilterStatusBarDirective,
+                        FsSavedFiltersMenuComponent,
+                    ],
+                    entryComponents: [
+                        FilterDrawerComponent
+                    ]
+                }]
+        }] });
 
 // Controllers
 
@@ -4359,5 +4379,5 @@ FsFilterModule = FsFilterModule_1 = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { ActionMode, ActionType, AutocompleteChipsItem, AutocompleteItem, BaseItem, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, ExternalParamsController, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, ItemDateMode, ItemType, QUERY_PARAM_DELIMITER, RangeItem, SavedFiltersController, SelectItem, TextItem, filterFromQueryParam, filterToQueryParam, FsFilterItemsStore as ɵa, PersistanceParamsController as ɵb, SelectBackdropComponent as ɵba, FsFilterChipComponent as ɵbb, FsFilterChipContentComponent as ɵbc, FsFilterDrawerActionsComponent as ɵbd, FsFilterSavedFilterEditComponent as ɵbe, FsSavedFiltersMenuComponent as ɵbf, FsFilterActionsComponent as ɵbg, FsFilterActionButtonComponent as ɵbh, FsFilterActionKebabActionsComponent as ɵbi, FocusToItemDirective as ɵbj, FsFilterIsolateValues as ɵbk, BaseDateItem as ɵbl, BaseDateRangeItem as ɵbm, BaseAutocompleteItem as ɵbn, QueryParamsController as ɵc, BaseItemComponent as ɵd, FsFilterOverlayService as ɵe, FS_FILTER_META as ɵg, FocusControllerService as ɵh, ActionsController as ɵi, FsFilterConfig as ɵj, FsFilterChipsComponent as ɵk, SelectComponent as ɵl, SelectGroupsComponent as ɵm, SelectSimpleComponent as ɵn, SelectMultipleComponent as ɵo, ChipsComponent as ɵp, TextComponent as ɵq, RangeComponent as ɵr, AutocompleteComponent as ɵs, AutocompletechipsComponent as ɵt, DateComponent as ɵu, DateRangeComponent as ɵv, CheckboxComponent as ɵw, FilterDrawerComponent as ɵx, FILTER_DRAWER_OVERLAY as ɵy, FILTER_DRAWER_DATA as ɵz };
+export { ActionMode, ActionType, AutocompleteChipsItem, AutocompleteItem, BaseItem, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, ExternalParamsController, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, FsSavedFiltersMenuComponent, ItemDateMode, ItemType, QUERY_PARAM_DELIMITER, RangeItem, SavedFiltersController, SelectItem, TextItem, filterFromQueryParam, filterToQueryParam };
 //# sourceMappingURL=firestitch-filter.js.map