@firestitch/filter 12.12.2 → 12.12.4

package/fesm2015/firestitch-filter.js

@@ -1,7 +1,7 @@
 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 { BehaviorSubject, Subject, isObservable, forkJoin, of, fromEvent, merge, timer, combineLatest } from 'rxjs';
-import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, skip, delay, mapTo, startWith, map } from 'rxjs/operators';
+import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, InjectionToken, Input, EventEmitter, Output, Directive, Self, Pipe, ViewChild, HostListener, TemplateRef, ViewEncapsulation, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, fromEvent, merge } from 'rxjs';
+import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, mapTo, startWith, map, delay, skip } from 'rxjs/operators';
 import { filter, isArrayEqual, list, isEmpty, getNormalizedPath, remove, FsCommonModule } from '@firestitch/common';
 import { isFunction, isObject, clone, isString, toString, pickBy } from 'lodash-es';
 import * as i3 from '@angular/common';
@@ -15,7 +15,7 @@ import * as i1 from '@firestitch/store';
 import { FsPersistanceStore, FsStoreModule, FsStore } from '@firestitch/store';
 import { simpleFormat, format } from '@firestitch/date';
 import { parseISO, isValid, isDate } from 'date-fns';
-import * as i3$3 from '@firestitch/datepicker';
+import * as i3$4 from '@firestitch/datepicker';
 import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
 import * as i1$3 from '@angular/material/form-field';
 import * as i2 from '@angular/material/select';
@@ -29,33 +29,35 @@ import * as i7 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
 import * as i3$2 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
+import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$2 from '@angular/material/checkbox';
+import * as i4$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i2$2 from '@angular/material/icon';
+import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
-import * as i2$1 from '@firestitch/chip';
-import { FsChipModule } from '@firestitch/chip';
-import * as i1$6 from '@firestitch/label';
-import { FsLabelModule } from '@firestitch/label';
-import { FsScrollModule } from '@firestitch/scroll';
-import * as i4$1 from '@firestitch/autocomplete';
+import * as i4$2 from '@firestitch/autocomplete';
 import { FsAutocompleteModule } from '@firestitch/autocomplete';
 import * as i5 from '@firestitch/autocomplete-chips';
 import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
-import * as i3$4 from '@firestitch/menu';
-import { FsMenuModule } from '@firestitch/menu';
-import * as i6$1 from '@firestitch/skeleton';
-import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i4$3 from '@firestitch/file';
+import * as i2$2 from '@firestitch/chip';
+import { FsChipModule } from '@firestitch/chip';
+import * as i4$1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
+import * as i1$5 from '@firestitch/label';
+import { FsLabelModule } from '@firestitch/label';
+import * as i3$3 from '@firestitch/menu';
+import { FsMenuModule } from '@firestitch/menu';
 import * as i7$1 from '@firestitch/popover';
 import { FsPopoverModule } from '@firestitch/popover';
-import * as i1$5 from '@angular/cdk/layout';
-import * as i1$7 from '@angular/cdk/overlay';
+import { FsScrollModule } from '@firestitch/scroll';
+import * as i6$1 from '@firestitch/skeleton';
+import { FsSkeletonModule } from '@firestitch/skeleton';
+import * as i7$2 from '@firestitch/clear';
+import { FsClearModule } from '@firestitch/clear';
+import * as i1$6 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
+import * as i1$7 from '@angular/cdk/layout';
 
 const QUERY_PARAM_DELIMITER = ':';
 
@@ -2479,135 +2481,314 @@ class Action {
     }
 }
 
-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();
-    }
-    get menuActions() {
-        return this._menuActions$.value;
-    }
-    get actions() {
-        return this._actions$.value;
-    }
-    get actions$() {
-        return this._actions$.asObservable();
+class FsFilterActionButtonComponent {
+    constructor() {
+        this.ActionType = ActionType;
     }
-    get menuActions$() {
-        return this._menuActions$.asObservable();
+}
+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  <button\n      type=\"button\"\n      *ngSwitchCase=\"ActionType.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    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"ActionType.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    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"ActionType.MiniFab\"\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    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <button \n      type=\"button\"\n      *ngSwitchDefault\n      mat-button\n      [ngClass]=\"{        \n        'mat-raised-button': action.type === 'raised',\n        'mat-flat-button': action.type === 'flat',\n        'mat-stroked-button': action.type === 'stroked',\n        'mat-button': action.type === 'basic',\n        'mat-icon-button': action.type === 'icon'\n      }\"\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [class]=\"action.classArray.join(' ')\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\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$1.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: 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 \n    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 \n                    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 \n                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 \n            fs-menu-file-item\n            [fsClass]=\"action.classArray\"\n            [multiple]=\"action.multiple\"\n            [accept]=\"action.accept || '*'\"\n            [minWidth]=\"action.minWidth\"\n            [minHeight]=\"action.minHeight\"\n            [imageWidth]=\"action.maxWidth\"\n            [imageHeight]=\"action.maxHeight\"\n            (error)=\"action.fileError($event)\"\n            (select)=\"action.fileSelected($event)\"\n            (click)=\"action.click($event)\">\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template \n            fs-menu-item\n            (click)=\"action.click($event)\"\n            [fsClass]=\"action.classArray\">\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$1.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"] }], 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]" }, { type: i3$3.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3$3.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { 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 = [];
     }
-    get visible$() {
-        return this._visible$.asObservable();
+}
+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  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </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        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\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\n                    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\n                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          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.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: i7$1.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { 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]" }], 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
+            }] } });
+
+class FsFilterChipContentComponent {
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
+        this._destroy$ = new Subject();
     }
-    get mobileMode() {
-        return this._breakpointObserver.isMatched(this._mobileMedia);
+    ngOnInit() {
+        this.listenValueChangesForRanges();
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    setConfig(config) {
-        this._config = config;
-        this.initActions(config.actions);
+    listenValueChangesForRanges() {
+        this.item.value$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.content = this._getContent();
+            this._cdRef.detectChanges();
+        });
     }
-    initActions(rawActions) {
-        if (!rawActions || !Array.isArray(rawActions)) {
-            return;
+    _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}`;
+                }
+            }
         }
-        this.show();
-        this._allActions = rawActions
-            .map((action) => new Action(this._config, action));
-        if (this._reorderAction) {
-            this._allActions.unshift(this._reorderAction);
+        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}`;
+                }
+            }
         }
-        this._classifyActions();
-    }
-    show() {
-        this._visible$.next(true);
-    }
-    hide() {
-        this._visible$.next(false);
     }
-    addReorderAction(action) {
-        this._allActions.unshift(action);
-        action.isReorderAction = true;
-        this._classifyAction(action);
-        this._reorderAction = action;
-    }
-    clearActions() {
-        this._allActions = [];
-        this._setActions([]);
-        this._setKebabActions([]);
+}
+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]}`;
     }
-    updateActionsVisibility() {
-        this._allActions.forEach((action) => action.updateVisibility());
-        this._classifyActions();
+    else if (type === 'to' && labelArr[1]) {
+        return `${labelArr[1]}`;
     }
-    updateDisabledState() {
-        this.actions.forEach((action) => action.updateDisabledState());
+    else {
+        return '';
     }
-    _setKebabActions(actions) {
-        this._menuActions$.next(actions);
+}
+
+class FocusControllerService {
+    constructor() {
+        this._focusOn = new BehaviorSubject(null);
     }
-    _setActions(actions) {
-        this._actions$.next(actions);
+    get focusOn$() {
+        return this._focusOn.asObservable();
     }
-    _classifyActions() {
-        const kebabActions = [];
-        const actions = [];
-        const mobileMode = this.mobileMode;
-        this._allActions
-            .filter((action) => {
-            return action.visible;
-        })
-            .forEach((action) => {
-            if (action.menu !== false && (action.menu || mobileMode)) {
-                kebabActions.push(action);
-            }
-            else {
-                actions.push(action);
-            }
-        });
-        this._setKebabActions(kebabActions);
-        this._setActions(actions);
+    click(item, type = null) {
+        this._focusOn.next({ item, type });
     }
-    _classifyAction(action) {
-        if (action.menu) {
-            this._setKebabActions([...this.menuActions, action]);
-        }
-        else {
-            this._setActions([...this.actions, action]);
-        }
+    listenFocusFor$(targetItem, targetType = null) {
+        return this._focusOn
+            .pipe(filter$1((event) => !!event), filter$1(({ item, type }) => {
+            return targetItem === item && targetType === type;
+        }), tap(() => this.clearFocus()));
     }
-    _listenMobileMedia() {
-        this._breakpointObserver.observe(this._mobileMedia)
-            .pipe(skip(1), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._classifyActions();
-        });
+    clearFocus() {
+        this._focusOn.next(null);
     }
 }
-ActionsController.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionsController, deps: [{ token: i1$5.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: [{
+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 [{ type: i1$5.BreakpointObserver }]; } });
-
-const FILTER_DRAWER_DATA = new InjectionToken('fs.filter-drawer-data');
-
-const FILTER_DRAWER_OVERLAY = new InjectionToken('fs.filter-drawer-overlay');
+        }], ctorParameters: function () { return []; } });
 
-class BaseItemComponent {
-    constructor(_kvDiffers, _cd) {
-        this._kvDiffers = _kvDiffers;
-        this._cd = _cd;
-        this.inline = false;
+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();
+    }
+    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._updateVisibility();
+            this._cdRef.markForCheck();
+        });
+    }
+    _updateVisibility() {
+        this.itemVisible = this.item.isChipVisible;
+    }
+    _initDelayRender() {
+        this.chipDelayedRender$ = combineLatest([
+            this.item.values$,
+            this._chipRenderTimer$.pipe(startWith(false))
+        ])
+            .pipe(map(([values, timerValue]) => {
+            return !!values || timerValue;
+        }));
+    }
+}
+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.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\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$2.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
+            }] } });
+
+class FsFilterChipsComponent {
+    constructor() {
+        this.ItemType = ItemType;
+        this.chips = [];
+    }
+}
+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) !== undefined && item.type !== ItemType.Keyword\">\n      <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n    </ng-container>\n  </ng-container>\n</fs-chips>\n", styles: [""], components: [{ type: i2$2.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-filter-chips',
+                    templateUrl: './filter-chips.component.html',
+                    styleUrls: ['./filter-chips.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { filters: [{
+                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']
+            }] } });
+
+const FILTER_DRAWER_DATA = new InjectionToken('fs.filter-drawer-data');
+
+const FILTER_DRAWER_OVERLAY = new InjectionToken('fs.filter-drawer-overlay');
+
+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();
@@ -2668,32 +2849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-class FocusControllerService {
-    constructor() {
-        this._focusOn = new BehaviorSubject(null);
-    }
-    get focusOn$() {
-        return this._focusOn.asObservable();
-    }
-    click(item, type = null) {
-        this._focusOn.next({ item, type });
-    }
-    listenFocusFor$(targetItem, targetType = null) {
-        return this._focusOn
-            .pipe(filter$1((event) => !!event), filter$1(({ item, type }) => {
-            return targetItem === item && targetType === type;
-        }), tap(() => this.clearFocus()));
-    }
-    clearFocus() {
-        this._focusOn.next(null);
-    }
-}
-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 FocusToItemDirective {
     constructor(_el, _focusController, _targetSelect, _targetDate, _targetDateScroll, _targetDateRangeFrom, _targetDateRangeTo, _targetAutocomplete, _targetAutocompleteChips) {
         this._el = _el;
@@ -2765,7 +2920,7 @@ class FocusToItemDirective {
         }
     }
 }
-FocusToItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusToItemDirective, deps: [{ token: i0.ElementRef }, { token: FocusControllerService }, { token: i2.MatSelect, optional: true, self: true }, { token: i3$3.FsDatePickerComponent, optional: true, self: true }, { token: i3$3.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3$3.DateRangePickerFromComponent, optional: true, self: true }, { token: i3$3.DateRangePickerToComponent, optional: true, self: true }, { token: i4$1.FsAutocompleteComponent, optional: true, self: true }, { token: i5.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+FocusToItemDirective.ɵ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$4.FsDatePickerComponent, optional: true, self: true }, { token: i3$4.FsDateScrollPickerComponent, optional: true, self: true }, { token: i3$4.DateRangePickerFromComponent, optional: true, self: true }, { token: i3$4.DateRangePickerToComponent, optional: true, self: true }, { token: i4$2.FsAutocompleteComponent, optional: true, self: true }, { token: i5.FsAutocompleteChipsComponent, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
 FocusToItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: { _item: ["fsFilterFocusTrigger", "_item"], _focusTargetType: ["focusTargetType", "_focusTargetType"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusToItemDirective, decorators: [{
             type: Directive,
@@ -2776,23 +2931,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$3.FsDatePickerComponent, decorators: [{
+                }] }, { type: i3$4.FsDatePickerComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$3.FsDateScrollPickerComponent, decorators: [{
+                }] }, { type: i3$4.FsDateScrollPickerComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$3.DateRangePickerFromComponent, decorators: [{
+                }] }, { type: i3$4.DateRangePickerFromComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3$3.DateRangePickerToComponent, decorators: [{
+                }] }, { type: i3$4.DateRangePickerToComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i4$1.FsAutocompleteComponent, decorators: [{
+                }] }, { type: i4$2.FsAutocompleteComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -2905,7 +3060,7 @@ class SelectMultipleComponent {
     }
 }
 SelectMultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectMultipleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectMultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\"\n    [multiple]=\"item.multiple\">\n      <mat-option\n        *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n        [value]=\"item.value\">\n          {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$3.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: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,
             args: [{
@@ -2940,7 +3095,7 @@ class SelectSimpleComponent {
     }
 }
 SelectSimpleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectSimpleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectSimpleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{ isolate: item.isolate }\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-select\n    #select\n    [fsFilterFocusTrigger]=\"item\"\n    [(ngModel)]=\"item.model\"\n    (ngModelChange)=\"changed()\">\n    <mat-option *ngFor=\"let item of item.values | fsFilterIsolateValues: item.isolate\"\n                [value]=\"item.value\"\n    >\n      {{ item.name }}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint>\n    <div *ngIf=\"item.isolate\">\n      <mat-checkbox (change)=\"isolateChange(item)\" [(ngModel)]=\"item.isolate.enabled\">\n        <span class=\"checkbox-label\">{{ item.isolate.label }}</span>\n      </mat-checkbox>\n    </div>\n  </mat-hint>\n</mat-form-field>\n", styles: [".isolate{margin-bottom:25px}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$3.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: i1$3.MatLabel, selector: "mat-label" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsFilterIsolateValues": FsFilterIsolateValues }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectSimpleComponent, decorators: [{
             type: Component,
             args: [{
@@ -3040,7 +3195,7 @@ class ChipsComponent extends BaseItemComponent {
     }
 }
 ChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipsComponent, selector: "filter-item-chips", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"item.values?.length\">\n  <fs-label-field>\n    <fs-label>{{item.label}}</fs-label>\n    <fs-chips [(ngModel)]=\"item.model\"\n              [compare]=\"compareFn\"\n              [multiple]=\"item.multiple\">\n      <fs-chip *ngFor=\"let value of item.values\"\n               [value]=\"value\"\n               [selectable]=\"true\">\n        {{ value.name }}\n      </fs-chip>\n    </fs-chips>\n  </fs-label-field>\n</ng-template>\n\n<ng-template [ngIf]=\"item.loading\">{{ item.label }} loading...</ng-template>\n", styles: ["fs-chip{line-height:40px}\n"], components: [{ type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i1$6.FsLabelComponent, selector: "fs-label" }, { type: i2$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: i2$1.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$2.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: i2$2.FsChipComponent, selector: "fs-chip", inputs: ["size", "value", "backgroundColor", "borderColor", "color", "outlined", "removable", "selectable", "selected", "image"], outputs: ["selectedToggled", "removed"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -3103,7 +3258,7 @@ class AutocompleteComponent extends BaseItemComponent {
     }
 }
 AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0, template: "<fs-autocomplete\n    [fsFilterFocusTrigger]=\"item\"\n    [fetch]=\"fetch\"\n    [displayWith]=\"displayWith\"\n    [(ngModel)]=\"item.model\"\n    [placeholder]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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]=\"label\"\n    [fetchOnFocus]=\"item.fetchOnFocus\"\n    [showClear]=\"item.showClear\"\n    name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4$2.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.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: [{
@@ -3182,7 +3337,7 @@ class DateComponent extends BaseItemComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateComponent, selector: "filter-item-date", usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"item.mode===itemDateMode.Calendar; else elseMode\">\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDatePicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [maxYear]=\"item.maxYear\"\n         [view]=\"viewType\"\n         [clear]=\"item.showClear\"\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.showClear\"\n          [name]=\"item.name\">\n    <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n  </mat-form-field>\n</ng-template>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$3.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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.showClear\"\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.showClear\"\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$4.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i3$4.FsDateScrollPickerComponent, selector: "[fsDateScrollPicker]", inputs: ["minYear", "maxYear", "maxDate", "showMonth", "showYear", "showDay"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{
@@ -3209,7 +3364,7 @@ class DateRangeComponent extends BaseItemComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DateRangeComponent, selector: "filter-item-date-range", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label[0]}}</mat-label>\n  <input\n    matInput\n    [fsFilterFocusTrigger]=\"item\"\n    [focusTargetType]=\"'from'\"\n    [fsDateRangeFrom]=\"item.name\"\n    [(ngModel)]=\"item.model.from\"\n    (ngModelChange)=\"itemChange()\"\n    [clear]=\"item.showClear\"\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.showClear\"\n    [view]=\"viewType\"\n    name=\"date_to\">\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$3.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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.showClear\"\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.showClear\"\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$4.DateRangePickerFromComponent, selector: "[fsDateRangeFrom],[fsDateRangeFromPicker]", inputs: ["fsDateRangeFrom", "fsDateRangeFromPicker"] }, { type: i3$4.DateRangePickerToComponent, selector: "[fsDateRangeTo],[fsDateRangeToPicker]", inputs: ["fsDateRangeTo", "fsDateRangeToPicker"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{
@@ -3228,7 +3383,7 @@ class WeekComponent extends BaseItemComponent {
     ngOnInit() { }
 }
 WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.showClear\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$3.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WeekComponent, selector: "filter-item-week", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n  <mat-label>{{item.label}}</mat-label>\n  <input matInput\n         fsDateWeekPicker\n         [fsFilterFocusTrigger]=\"item\"\n         [(ngModel)]=\"item.model\"\n         [seedDate]=\"item.seedDate\"\n         [clear]=\"item.showClear\"\n         [name]=\"item.name\">\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>\n", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$4.FsDateWeekPickerComponent, selector: "[fsDateWeekPicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "seedDate", "period", "view"], outputs: ["change"] }], directives: [{ type: i1$3.MatLabel, selector: "mat-label" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatPlaceholder, selector: "mat-placeholder" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WeekComponent, decorators: [{
             type: Component,
             args: [{
@@ -3246,7 +3401,7 @@ class CheckboxComponent extends BaseItemComponent {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CheckboxComponent, selector: "filter-item-checkbox", usesInheritance: true, ngImport: i0, template: "<fs-label-field>\n  <mat-checkbox [(ngModel)]=\"item.model\">\n    {{ item.label }}\n  </mat-checkbox>\n</fs-label-field>\n", styles: ["fs-label-field{margin:0}\n"], components: [{ type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{
@@ -3324,43 +3479,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 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;
@@ -3400,7 +3518,7 @@ class FilterDrawerComponent {
     }
 }
 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 \n            *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 \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              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 \n      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%;padding-top:calc(env(safe-area-inset-top))}.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$2.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$1.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 });
+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 \n            *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 \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              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 \n      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%;padding-top:calc(env(safe-area-inset-top))}.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$1.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$1.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: [{
@@ -3409,7 +3527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // 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$7.OverlayRef, decorators: [{
+        }], ctorParameters: function () { return [{ type: ExternalParamsController }, { type: i0.ChangeDetectorRef }, { type: FsFilterItemsStore }, { type: i1$6.OverlayRef, decorators: [{
                     type: Inject,
                     args: [FILTER_DRAWER_OVERLAY]
                 }] }, { type: undefined, decorators: [{
@@ -3422,364 +3540,248 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 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();
+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._openWhenChipClicked();
+        this._mobileMedia = '(max-width: 799px)';
+        this._allActions = [];
+        this._listenMobileMedia();
     }
-    get isOpened() {
-        return !!this._overlayRef;
+    get menuActions() {
+        return this._menuActions$.value;
     }
-    setClearFn(fn) {
-        this._clearFn = fn;
+    get actions() {
+        return this._actions$.value;
     }
-    setDoneFn(fn) {
-        this._doneFn = fn;
+    get actions$() {
+        return this._actions$.asObservable();
     }
-    close() {
-        if (this._overlayRef) {
-            this._overlayRef.detach();
-            this._overlayRef = null;
-            this.removeFilterClass();
-        }
+    get menuActions$() {
+        return this._menuActions$.asObservable();
     }
-    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();
+    get visible$() {
+        return this._visible$.asObservable();
+    }
+    get mobileMode() {
+        return this._breakpointObserver.isMatched(this._mobileMedia);
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    _createOverlay() {
-        const overlayConfig = new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: 'fs-filter-backdrop'
-        });
-        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);
+    setConfig(config) {
+        this._config = config;
+        this.initActions(config.actions);
     }
-    removeFilterClass() {
-        this._filterMeta.openedFilters--;
-        if (this._filterMeta.openedFilters === 0) {
-            window.document.body.classList.remove('fs-filter-open');
+    initActions(rawActions) {
+        if (!rawActions || !Array.isArray(rawActions)) {
+            return;
         }
-    }
-    addFilterClass() {
-        this._filterMeta.openedFilters++;
-        if (this._filterMeta.openedFilters === 1) {
-            window.document.body.classList.add('fs-filter-open');
+        this.show();
+        this._allActions = rawActions
+            .map((action) => new Action(this._config, action));
+        if (this._reorderAction) {
+            this._allActions.unshift(this._reorderAction);
         }
+        this._classifyActions();
     }
-    _openWhenChipClicked() {
-        this._focusController.focusOn$
-            .pipe(filter$1((v) => !!v), takeUntil(this._destroy$))
-            .subscribe(() => {
-            if (!this.isOpened) {
-                this.open();
-            }
-        });
+    show() {
+        this._visible$.next(true);
     }
-}
-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$7.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$7.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]',
-                }]
-        }] });
-
-class FsFilterActionButtonComponent {
-    constructor() {
-        this.ActionType = ActionType;
+    hide() {
+        this._visible$.next(false);
     }
-}
-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  <button\n      type=\"button\"\n      *ngSwitchCase=\"ActionType.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    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"ActionType.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    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button \n      type=\"button\"\n      *ngSwitchCase=\"ActionType.MiniFab\"\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    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <button \n      type=\"button\"\n      *ngSwitchDefault\n      mat-button\n      [ngClass]=\"{        \n        'mat-raised-button': action.type === 'raised',\n        'mat-flat-button': action.type === 'flat',\n        'mat-stroked-button': action.type === 'stroked',\n        'mat-button': action.type === 'basic',\n        'mat-icon-button': action.type === 'icon'\n      }\"\n      (click)=\"action.click && action.click($event)\"\n      [color]=\"action.color\"\n      [class]=\"action.classArray.join(' ')\"\n      [disabled]=\"action.disabled$ | async\"\n      [tabIndex]=\"action.tabIndex\">\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$2.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: 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 \n    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 \n                    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 \n                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 \n            fs-menu-file-item\n            [fsClass]=\"action.classArray\"\n            [multiple]=\"action.multiple\"\n            [accept]=\"action.accept || '*'\"\n            [minWidth]=\"action.minWidth\"\n            [minHeight]=\"action.minHeight\"\n            [imageWidth]=\"action.maxWidth\"\n            [imageHeight]=\"action.maxHeight\"\n            (error)=\"action.fileError($event)\"\n            (select)=\"action.fileSelected($event)\"\n            (click)=\"action.click($event)\">\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template \n            fs-menu-item\n            (click)=\"action.click($event)\"\n            [fsClass]=\"action.classArray\">\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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i3$4.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3$4.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { 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 = [];
+    addReorderAction(action) {
+        this._allActions.unshift(action);
+        action.isReorderAction = true;
+        this._classifyAction(action);
+        this._reorderAction = action;
     }
-}
-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  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </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        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\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\n                    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\n                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          fsPopover\n          [enabled]=\"!!action.tooltip\"\n          [text]=\"action.tooltip\">\n        <fs-filter-action-button \n          [action]=\"action\">\n        </fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions\n    [kebabActions]=\"kebabActions\">\n  </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2$2.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: i7$1.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { type: i3$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], 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
-            }] } });
-
-class FsFilterChipContentComponent {
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        this._destroy$ = new Subject();
+    clearActions() {
+        this._allActions = [];
+        this._setActions([]);
+        this._setKebabActions([]);
     }
-    ngOnInit() {
-        this.listenValueChangesForRanges();
+    updateActionsVisibility() {
+        this._allActions.forEach((action) => action.updateVisibility());
+        this._classifyActions();
     }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
+    updateDisabledState() {
+        this.actions.forEach((action) => action.updateDisabledState());
     }
-    listenValueChangesForRanges() {
-        this.item.value$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.content = this._getContent();
-            this._cdRef.detectChanges();
-        });
+    _setKebabActions(actions) {
+        this._menuActions$.next(actions);
     }
-    _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}`;
+    _setActions(actions) {
+        this._actions$.next(actions);
+    }
+    _classifyActions() {
+        const kebabActions = [];
+        const actions = [];
+        const mobileMode = this.mobileMode;
+        this._allActions
+            .filter((action) => {
+            return action.visible;
+        })
+            .forEach((action) => {
+            if (action.menu !== false && (action.menu || mobileMode)) {
+                kebabActions.push(action);
             }
-            else {
-                if (this.item.isTypeCheckbox) {
-                    return result;
-                }
-                else {
-                    return `${this.item.label}: ${result}`;
-                }
+            else {
+                actions.push(action);
             }
-        }
+        });
+        this._setKebabActions(kebabActions);
+        this._setActions(actions);
     }
-}
-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]}`;
+    _classifyAction(action) {
+        if (action.menu) {
+            this._setKebabActions([...this.menuActions, action]);
+        }
+        else {
+            this._setActions([...this.actions, action]);
+        }
     }
-    else if (type === 'to' && labelArr[1]) {
-        return `${labelArr[1]}`;
+    _listenMobileMedia() {
+        this._breakpointObserver.observe(this._mobileMedia)
+            .pipe(skip(1), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._classifyActions();
+        });
     }
-    else {
-        return '';
+}
+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 }]; } });
+
+const FS_FILTER_META = new InjectionToken('fs.filter.meta', {
+    providedIn: 'root',
+    factory: () => {
+        return {
+            openedFilters: 0,
+        };
     }
-}
+});
 
-class FsFilterChipComponent {
-    constructor(_cdRef, _focusController) {
-        this._cdRef = _cdRef;
+class FsFilterOverlayService {
+    constructor(_injector, _filterMeta, _overlay, _focusController) {
+        this._injector = _injector;
+        this._filterMeta = _filterMeta;
+        this._overlay = _overlay;
         this._focusController = _focusController;
-        this._chipRenderTimer$ = timer(500)
-            .pipe(mapTo(true));
+        this.detach$ = new Subject();
+        this.attach$ = new Subject();
         this._destroy$ = new Subject();
+        this._openWhenChipClicked();
     }
-    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();
+    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();
         }
     }
+    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();
     }
-    focusOnItem(type = null) {
-        this._focusController.click(this.item, type);
+    _createOverlay() {
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'fs-filter-backdrop'
+        });
+        return this._overlay.create(overlayConfig);
     }
-    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);
+    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');
         }
-        else {
-            this.item.clear();
+    }
+    addFilterClass() {
+        this._filterMeta.openedFilters++;
+        if (this._filterMeta.openedFilters === 1) {
+            window.document.body.classList.add('fs-filter-open');
         }
     }
-    listenValueChangesForRanges() {
-        this.item.value$
-            .pipe(distinctUntilChanged(), takeUntil(this._destroy$))
+    _openWhenChipClicked() {
+        this._focusController.focusOn$
+            .pipe(filter$1((v) => !!v), takeUntil(this._destroy$))
             .subscribe(() => {
-            this._updateVisibility();
-            this._cdRef.markForCheck();
+            if (!this.isOpened) {
+                this.open();
+            }
         });
     }
-    _updateVisibility() {
-        this.itemVisible = this.item.isChipVisible;
-    }
-    _initDelayRender() {
-        this.chipDelayedRender$ = combineLatest([
-            this.item.values$,
-            this._chipRenderTimer$.pipe(startWith(false))
-        ])
-            .pipe(map(([values, timerValue]) => {
-            return !!values || timerValue;
-        }));
-    }
 }
-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.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('from')\"\n      (removed)=\"removeItem($event, 'from')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\"\n      ></ng-template>\n    </fs-chip>\n\n    <fs-chip\n      *ngIf=\"item.model?.max || item.model?.to\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem('to')\"\n      (removed)=\"removeItem($event, 'to')\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\"\n      ></ng-template>\n    </fs-chip>\n\n  </ng-container>\n\n  <ng-template #defaultChip>\n    <fs-chip\n      *ngIf=\"itemVisible\"\n      [value]=\"item\"\n      [selectable]=\"false\"\n      [removable]=\"item.showClear\"\n      size=\"small\"\n      (click)=\"focusOnItem()\"\n      (removed)=\"removeItem($event)\">\n      <ng-template\n        [ngTemplateOutlet]=\"chipContent\"\n        [ngTemplateOutletContext]=\"{ item: item }\"\n      ></ng-template>\n    </fs-chip>\n  </ng-template>\n\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
-            }] } });
+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 FsFilterChipsComponent {
-    constructor() {
-        this.ItemType = ItemType;
-        this.chips = [];
-    }
+class FilterStatusBarDirective {
 }
-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) !== undefined && item.type !== ItemType.Keyword\">\n      <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n    </ng-container>\n  </ng-container>\n</fs-chips>\n", styles: [""], components: [{ type: i2$1.FsChipsComponent, selector: "fs-chips", inputs: ["compare", "multiple"] }, { type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
-            type: Component,
+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: 'fs-filter-chips',
-                    templateUrl: './filter-chips.component.html',
-                    styleUrls: ['./filter-chips.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: '[fsFilterStatusBar]',
                 }]
-        }], propDecorators: { filters: [{
-                type: Input
-            }] } });
+        }] });
 
 class FilterComponent {
     constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions) {
@@ -3797,12 +3799,13 @@ class FilterComponent {
         this.showFilterMenu = false;
         this.windowDesktop = false;
         this.fsFilterClass = true;
-        this.searchText = new FormControl();
         this.searchPlaceholder = 'Search';
+        this.keyword = '';
         this._config = null;
         this._filtersBtnVisible$ = new BehaviorSubject(true);
         this._keywordVisible$ = new BehaviorSubject(true);
         this._hasFilterChips$ = new BehaviorSubject(false);
+        this._keyword$ = new Subject();
         this._destroy$ = new Subject();
         this._listenWhenFilterReady();
         this._updateWindowWidth();
@@ -3873,25 +3876,18 @@ class FilterComponent {
                 this.focus();
             }
         });
+        this._listenInputChanges();
         this._listenInternalItemsChange();
         this._initOverlay();
     }
-    ngAfterViewInit() {
-        this._listenInputKeyEvents();
-        // FIXME prevent fire change after init
-        setTimeout(() => {
-            this._listenInputChanges();
-        });
-    }
     ngOnDestroy() {
         this._destroyFilterDrawer();
         this._destroy$.next();
         this._destroy$.complete();
     }
     focus() {
-        if (this.searchTextMatInput) {
-            this.searchTextMatInput.focus();
-        }
+        var _a;
+        (_a = this.keywordMatInput) === null || _a === void 0 ? void 0 : _a.focus();
     }
     updateSort(sort) {
         this._filterItems.updateSort(sort);
@@ -3975,17 +3971,6 @@ class FilterComponent {
         }
         this.changeVisibility(value);
     }
-    filterInputEvent(event) {
-        if (!this.windowDesktop) {
-            return;
-        }
-        if (['Enter', 'NumpadEnter', 'Escape'].indexOf(event.code) >= 0) {
-            this.changeVisibility(false);
-            if (this.searchTextInput) {
-                this.searchTextInput.nativeElement.blur();
-            }
-        }
-    }
     get itemValues() {
         return this.items
             .map((item) => item.value);
@@ -4063,12 +4048,6 @@ class FilterComponent {
         this.opened.emit();
         this._filterOverlay.open();
     }
-    clearSearchText(event) {
-        event.stopPropagation();
-        this.searchText.setValue('');
-        this._filterItems.keywordItem.clear();
-        this.searchTextInput.nativeElement.focus();
-    }
     init() {
         const data = this._filterItems.valuesAsQuery();
         this._sort = this._filterItems.getSort();
@@ -4092,6 +4071,7 @@ class FilterComponent {
         if (this.config.clear) {
             this.config.clear();
         }
+        this.keyword = '';
     }
     /**
      * Close filter window and do change callback
@@ -4186,7 +4166,6 @@ class FilterComponent {
         this._filterItems.setConfig(this._config);
         this._externalParams.initItems();
         this._syncSearchInputWithKeyword();
-        this._listenKeywordItemClear();
     }
     _initFilterWithConfig(config) {
         if (this.config) {
@@ -4201,7 +4180,6 @@ class FilterComponent {
         if (!!this.config.reloadWhenConfigChanged) {
             this.change();
         }
-        this._listenKeywordItemClear();
     }
     _destroyFilterDrawer() {
         this._filterOverlay.close();
@@ -4220,22 +4198,6 @@ class FilterComponent {
             });
         });
     }
-    _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);
-                });
-            });
-        });
-    }
     _listenWindowResize() {
         this._zone.runOutsideAngular(() => {
             fromEvent(window, 'resize')
@@ -4247,37 +4209,25 @@ class FilterComponent {
             });
         });
     }
+    keywordChange(keyword) {
+        this._keyword$.next(keyword);
+    }
     _listenInputChanges() {
-        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;
-                    }
-                });
-            });
+        this._keyword$
+            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
+            .subscribe((value) => {
+            const keywordItem = this._filterItems.keywordItem;
+            keywordItem.model = value;
+            this.change();
         });
     }
     _syncSearchInputWithKeyword() {
         const keywordItem = this._filterItems.keywordItem;
         if (keywordItem) {
-            this.searchText.setValue(keywordItem.model);
+            this.keyword = keywordItem.model;
             this.searchPlaceholder = keywordItem.label || 'Search';
         }
     }
-    _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$
@@ -4321,7 +4271,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         FsFilterItemsStore,
         SavedFiltersController,
         ActionsController,
-    ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\n        <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n          <mat-form-field [floatLabel]=\"'never'\" class=\"form-field-padless\" ngClass=\"search\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n            <input\n              #searchTextInput\n              matInput\n              [formControl]=\"searchText\"\n              name=\"filter-input\"\n              [placeholder]=\"searchPlaceholder\"\n              (click)=\"filterInputEvent($event)\">\n\n            <div matSuffix *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <a\n                mat-icon-button                \n                (click)=\"clearSearchText($event)\"\n                class=\"clear\">\n                <mat-icon>clear</mat-icon>\n              </a>\n            </div>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\n    <div class=\"filter-actions\">\n      <a \n          mat-icon-button\n          (click)=\"reload($event)\"\n          class=\"reload\"\n          *ngIf=\"config.reload\">\n        <mat-icon>refresh</mat-icon>\n      </a>\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' && config.button.label,\n              'mat-flat-button': config.button.style === 'flat' && config.button.label,\n              'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n              'mat-button': config.button.style === 'basic' && config.button.label,\n              'mat-icon-button': config.button.style === 'icon' || !config.button.label  \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  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1;min-width:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field{height:100%;max-width:100%}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-focused .mat-icon{color:inherit}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline{background:#fff;border-radius:5px}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline .mat-form-field-suffix,.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-outline .mat-form-field-prefix{top:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:0}.fs-filter .filter-container .filter-keyword .search.mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .search.mat-form-field .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-container .filter-keyword .mat-form-field-wrapper{height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button .mat-icon{display:inline}.fs-filter .filter-actions{display:flex;align-items:center}@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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i1$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }], ngImport: i0, template: "<div class=\"filter-container\">\n  <div class=\"filter-inner-container\">\n    <ng-container *ngIf=\"!hasKeyword\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\n        <ng-container *ngIf=\"keywordVisible$ | async\">\n          <mat-form-field \n              [floatLabel]=\"'never'\" \n              class=\"form-field-padless\" \n              [ngClass]=\"search\"\n              appearance=\"outline\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n            <input\n              #keywordMatInput\n              matInput\n              [(ngModel)]=\"keyword\"\n              (ngModelChange)=\"keywordChange($event)\"\n              name=\"filter-input\"\n              [fsClear]=\"true\"\n              [placeholder]=\"searchPlaceholder\">\n          </mat-form-field>\n        </ng-container>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n      <div class=\"filter-toobar\">\n        <a \n            mat-icon-button\n            (click)=\"reload($event)\"\n            class=\"reload\"\n            *ngIf=\"config.reload\">\n          <mat-icon>refresh</mat-icon>\n        </a>\n        <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n          <a\n              mat-button\n              class=\"filters-button\"\n              [ngClass]=\"{\n                'mat-raised-button': config.button.style === 'raised' && config.button.label,\n                'mat-flat-button': config.button.style === 'flat' && config.button.label,\n                'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n                'mat-button': config.button.style === 'basic' && config.button.label,\n                'mat-icon-button': config.button.style === 'icon' || !config.button.label  \n              }\"\n              (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n              [color]=\"config.button.color\">\n            <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n            {{ config.button.label }}\n          </a>\n        </ng-container>\n      </div>\n    </ng-container>\n    <div class=\"filter-actions\">\n      <fs-filter-actions\n        *ngIf=\"actionsVisible$ | async\"\n        [actions]=\"actions$ | async\"\n        [kebabActions]=\"menuActions$ | async\">\n      </fs-filter-actions>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"hasKeyword\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!hasKeyword\">\n    <ng-container [ngTemplateOutlet]=\"chips\"></ng-container>\n  </ng-container>\n</div>\n\n\n<ng-template #statusBarContainer>\n  <ng-container *ngIf=\"statusBar\">\n    <div class=\"filter-status-container\">\n      <div class=\"filter-status\">\n        <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n      </div>\n      <ng-container *ngIf=\"hasKeyword\">\n        <ng-container [ngTemplateOutlet]=\"chips\"></ng-container>\n      </ng-container>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #chips>\n  <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n    <fs-filter-chips    \n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </ng-container>\n</ng-template>", styles: [".fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword) .filter-inner-container{display:flex}.fs-filter:not(.has-keyword) .filter-toobar{justify-content:flex-end}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.fs-filter .filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-infix{width:250px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix,.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-suffix{top:.45em}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-wrapper{height:100%}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter .filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.fs-filter .filter-toobar a{width:36px;line-height:36px}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter fs-filter-chips{margin-top:4px;display:block}@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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$2.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { type: i1$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { 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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$3.MatPrefix, selector: "[matPrefix]" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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: [{
@@ -4365,12 +4315,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], statusBar: [{
                 type: ContentChild,
                 args: [FilterStatusBarDirective, { read: TemplateRef }]
-            }], searchTextInput: [{
-                type: ViewChild,
-                args: ['searchTextInput']
-            }], searchTextMatInput: [{
+            }], keywordMatInput: [{
                 type: ViewChild,
-                args: ['searchTextInput', { read: MatInput }]
+                args: ['keywordMatInput', { read: MatInput }]
             }], showFilterMenu: [{
                 type: HostBinding,
                 args: ['class.filters-open']
@@ -4429,7 +4376,7 @@ class FsSavedFiltersMenuComponent {
     }
 }
 FsSavedFiltersMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
-FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { select: "select", clear: "clear", manage: "manage" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { select: "select", clear: "clear", manage: "manage" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n  <ng-container *ngIf=\"activeFilter$ | async\">\n    <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n      None\n    </ng-template>\n  </ng-container>\n  <ng-container *ngFor=\"let filter of filters$ | async\">\n    <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n      {{ filter.name }}\n    </ng-template>\n  </ng-container>\n  <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n    Manage\n  </ng-template>\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$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]" }, { 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: [{
@@ -4509,12 +4456,13 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FsAutocompleteModule,
         FsAutocompleteChipsModule,
         FsScrollModule,
-        PortalModule,
         FsMenuModule,
         FsSkeletonModule,
         FsFormModule,
         FsFileModule,
-        FsPopoverModule], exports: [FilterComponent,
+        FsClearModule,
+        FsPopoverModule,
+        PortalModule], exports: [FilterComponent,
         FilterStatusBarDirective,
         FsSavedFiltersMenuComponent] });
 FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterModule, providers: [
@@ -4540,12 +4488,13 @@ FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             FsAutocompleteModule,
             FsAutocompleteChipsModule,
             FsScrollModule,
-            PortalModule,
             FsMenuModule,
             FsSkeletonModule,
             FsFormModule,
             FsFileModule,
+            FsClearModule,
             FsPopoverModule,
+            PortalModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterModule, decorators: [{
             type: NgModule,
@@ -4571,12 +4520,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsAutocompleteModule,
                         FsAutocompleteChipsModule,
                         FsScrollModule,
-                        PortalModule,
                         FsMenuModule,
                         FsSkeletonModule,
                         FsFormModule,
                         FsFileModule,
+                        FsClearModule,
                         FsPopoverModule,
+                        PortalModule,
                     ],
                     declarations: [
                         BaseItemComponent,