@firestitch/filter 12.7.2 → 12.8.1

package/app/services/external-params/query-params-controller.service.d.ts

@@ -1,14 +1,16 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { FsFilterItemsStore } from '../items-store.service';
+import { Location } from '@angular/common';
 import * as i0 from "@angular/core";
 export declare class QueryParamsController {
     private _router;
     private _route;
+    private _location;
     private _itemsStore;
     private _enabled;
     private _paramsCase;
     private _fetchedParams;
-    constructor(_router: Router, _route: ActivatedRoute, _itemsStore: FsFilterItemsStore);
+    constructor(_router: Router, _route: ActivatedRoute, _location: Location, _itemsStore: FsFilterItemsStore);
     get enabled(): boolean;
     get fetchedParams(): Record<string, any>;
     init(enabled: boolean, paramsCase: 'snake' | 'camel'): void;

package/app/services/external-params-controller.service.d.ts

@@ -1,5 +1,4 @@
 import { OnDestroy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { FsFilterItemsStore } from './items-store.service';
 import { PersistanceParamsController } from './external-params/persistance-params-controller.service';
@@ -13,13 +12,12 @@ export declare class ExternalParamsController implements OnDestroy {
     private _persistanceStore;
     private _queryParams;
     private _savedFilters;
-    private _route;
     protected _init: any;
     protected _pending$: BehaviorSubject<boolean>;
     private _shouldResetSavedFilters;
     private _config;
     private _destroy$;
-    constructor(_itemsStore: FsFilterItemsStore, _persistanceStore: PersistanceParamsController, _queryParams: QueryParamsController, _savedFilters: SavedFiltersController, _route: ActivatedRoute);
+    constructor(_itemsStore: FsFilterItemsStore, _persistanceStore: PersistanceParamsController, _queryParams: QueryParamsController, _savedFilters: SavedFiltersController);
     get params(): IFilterExternalParams;
     get pending(): boolean;
     get pending$(): Observable<boolean>;

package/bundles/firestitch-filter.umd.js

@@ -837,9 +837,10 @@
         }
         Object.defineProperty(MultipleSelectItem.prototype, "value", {
             get: function () {
+                var _a;
                 var value = lodashEs.clone(this.model);
                 if (this.isolateOptionNotSelected) {
-                    value = this.values.map(function (v) { return v.value; });
+                    value = (_a = this.values) === null || _a === void 0 ? void 0 : _a.map(function (v) { return v.value; });
                 }
                 else if (!Array.isArray(value) || value.length === 0 || value.indexOf('__all') > -1) {
                     value = null;
@@ -887,7 +888,7 @@
         MultipleSelectItem.prototype._init = function () {
             _super.prototype._init.call(this);
             var values = this.values.map(function (itemv) { return itemv.value; });
-            var wrongDefaultValue = this.model === undefined && !Array.isArray(this.defaultValue);
+            var wrongDefaultValue = !this.model && !Array.isArray(this.defaultValue);
             /**
              * When multiple select is in isolate mode and have no options selected
              * it should send to the server all it's possible values,
@@ -2593,9 +2594,10 @@
         } });
 
     var QueryParamsController = /** @class */ (function () {
-        function QueryParamsController(_router, _route, _itemsStore) {
+        function QueryParamsController(_router, _route, _location, _itemsStore) {
             this._router = _router;
             this._route = _route;
+            this._location = _location;
             this._itemsStore = _itemsStore;
             this._enabled = false;
         }
@@ -2624,13 +2626,20 @@
             if (!this._enabled) {
                 return;
             }
-            // Update query
-            this._router.navigate([], {
-                replaceUrl: true,
+            this._location.replaceState(this._router.createUrlTree([], {
                 relativeTo: this._route,
                 queryParams: params,
                 queryParamsHandling: 'merge',
-            }).then(function () { });
+                preserveFragment: true,
+            }).toString());
+            // Trying replacing the URL without triggering an Angular navigation change
+            // // Update query
+            // this._router.navigate([], {
+            //   replaceUrl: true,
+            //   relativeTo: this._route,
+            //   queryParams: params,
+            //   queryParamsHandling: 'merge',
+            // }).then(() => {});
         };
         /**
          * Parse query and update filter values
@@ -2644,11 +2653,11 @@
         };
         return QueryParamsController;
     }());
-    QueryParamsController.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueryParamsController, deps: [{ token: i1__namespace$1.Router }, { token: i1__namespace$1.ActivatedRoute }, { token: FsFilterItemsStore }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    QueryParamsController.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueryParamsController, deps: [{ token: i1__namespace$1.Router }, { token: i1__namespace$1.ActivatedRoute }, { token: i3__namespace.Location }, { token: FsFilterItemsStore }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     QueryParamsController.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueryParamsController });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueryParamsController, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.Router }, { type: i1__namespace$1.ActivatedRoute }, { type: FsFilterItemsStore }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.Router }, { type: i1__namespace$1.ActivatedRoute }, { type: i3__namespace.Location }, { type: FsFilterItemsStore }]; } });
 
     var FsFilterSavedFilterEditComponent = /** @class */ (function () {
         function FsFilterSavedFilterEditComponent(data, _dialogRef) {
@@ -2881,12 +2890,11 @@
             }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: i1__namespace$2.MatDialog }]; } });
 
     var ExternalParamsController = /** @class */ (function () {
-        function ExternalParamsController(_itemsStore, _persistanceStore, _queryParams, _savedFilters, _route) {
+        function ExternalParamsController(_itemsStore, _persistanceStore, _queryParams, _savedFilters) {
             this._itemsStore = _itemsStore;
             this._persistanceStore = _persistanceStore;
             this._queryParams = _queryParams;
             this._savedFilters = _savedFilters;
-            this._route = _route;
             this._pending$ = new rxjs.BehaviorSubject(false);
             this._shouldResetSavedFilters = true;
             this._destroy$ = new rxjs.Subject();
@@ -3050,11 +3058,11 @@
         };
         return ExternalParamsController;
     }());
-    ExternalParamsController.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExternalParamsController, deps: [{ token: FsFilterItemsStore }, { token: PersistanceParamsController }, { token: QueryParamsController }, { token: SavedFiltersController }, { token: i1__namespace$1.ActivatedRoute }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ExternalParamsController.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExternalParamsController, deps: [{ token: FsFilterItemsStore }, { token: PersistanceParamsController }, { token: QueryParamsController }, { token: SavedFiltersController }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     ExternalParamsController.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExternalParamsController });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ExternalParamsController, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: PersistanceParamsController }, { type: QueryParamsController }, { type: SavedFiltersController }, { type: i1__namespace$1.ActivatedRoute }]; } });
+            }], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: PersistanceParamsController }, { type: QueryParamsController }, { type: SavedFiltersController }]; } });
 
     var FS_FILTER_CONFIG = new i0.InjectionToken('fs.filter-config');
 
@@ -4430,7 +4438,7 @@
         return FsFilterActionKebabActionsComponent;
     }());
     FsFilterActionKebabActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionKebabActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterActionKebabActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0__namespace, 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__namespace$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__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3__namespace$4.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterActionKebabActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: { kebabActions: "kebabActions" }, ngImport: i0__namespace, 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__namespace$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__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i3__namespace$4.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { type: i3__namespace$4.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionKebabActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4451,7 +4459,7 @@
         return FsFilterActionsComponent;
     }());
     FsFilterActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsFilterActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0__namespace, 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      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template \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        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions \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__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsFilterActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0__namespace, 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      </fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template \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        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions \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__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsFilterActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5376,7 +5384,7 @@
         return FsSavedFiltersMenuComponent;
     }());
     FsSavedFiltersMenuComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsSavedFiltersMenuComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsSavedFiltersMenuComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$4.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }], directives: [{ type: i3__namespace$4.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$4.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsSavedFiltersMenuComponent, decorators: [{
                 type: i0.Component,
                 args: [{