@firestitch/filter 9.9.5 → 9.10.0

package/app/components/filter/filter.component.d.ts

@@ -4,6 +4,7 @@ import { MatInput } from '@angular/material/input';
 import { Observable } from 'rxjs';
 import { FsFilterConfig } from '../../models/filter-config';
 import { FsFilterOverlayService } from '../../services/filter-overlay.service';
+import { IFilterConfigItem } from '../../interfaces/config.interface';
 import { BaseItem } from '../../models/items/base-item';
 import { FsFilterItemsStore } from '../../services/items-store.service';
 import { ExternalParamsController } from '../../services/external-params-controller.service';
@@ -43,8 +44,8 @@ export declare class FilterComponent implements OnInit, AfterViewInit, OnDestroy
     get config(): FsFilterConfig;
     get filterParams(): Record<string, unknown>;
     get filterParamsQuery(): Record<string, unknown>;
-    get items(): BaseItem<import("../../interfaces/config.interface").IFilterConfigItem>[];
-    get visibleItems(): BaseItem<import("../../interfaces/config.interface").IFilterConfigItem>[];
+    get items(): BaseItem<IFilterConfigItem>[];
+    get visibleItems(): BaseItem<IFilterConfigItem>[];
     get itemsReady$(): Observable<boolean>;
     get hasFilterChips$(): Observable<boolean>;
     get hasVisibleItemOrSorting(): boolean;
@@ -170,6 +171,7 @@ export declare class FilterComponent implements OnInit, AfterViewInit, OnDestroy
      * Go through actions and check disabled() callback and update disabled state
      */
     updateDisabledState(): void;
+    setItems(items: IFilterConfigItem[]): void;
     private _initFilterWithConfig;
     private _destroyFilterDrawer;
     private _updateWindowWidth;
@@ -177,6 +179,7 @@ export declare class FilterComponent implements OnInit, AfterViewInit, OnDestroy
     private _listenInputKeyEvents;
     private _listenWindowResize;
     private _listenInputChanges;
+    private _syncSearchInputWithKeyword;
     private _listenKeywordItemClear;
     private _listenInternalItemsChange;
     private _initOverlay;

package/app/interfaces/action.interface.d.ts

@@ -17,6 +17,7 @@ interface IFsFilterBaseAction {
     className?: string;
     color?: ThemePalette;
     icon?: string;
+    iconPlacement?: 'left' | 'right';
     label?: string;
     primary?: boolean;
     show?: FsFilterActionShowFn;
@@ -42,6 +43,11 @@ export interface IFsFilterFileAction extends IFsFilterBaseAction {
     multiple?: boolean;
     accept?: string;
     disabled?: FsFilterActionDisabledFn;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    imageQuality?: number;
 }
 export interface IFsFilterMenuActionGroupItem {
     label?: string;

package/app/models/action.model.d.ts

@@ -7,6 +7,7 @@ import { ActionMenuItem } from './action-menu-item.model';
 export declare class Action {
     primary: boolean;
     icon: string;
+    iconPlacement: 'left' | 'right';
     label: string;
     menu: boolean;
     color: ThemePalette;
@@ -18,6 +19,12 @@ export declare class Action {
     fileSelected: FsFilterFileActionSelectFn;
     fileError: FsFilterFileActionErrorFn;
     multiple: boolean;
+    accept: string;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    imageQuality: number;
     mode: ActionMode;
     isReorderAction: boolean;
     classArray: string[];

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

@@ -28,6 +28,7 @@ export declare class ExternalParamsController implements OnDestroy {
     setConfig(config: any): void;
     setActiveSavedFilter(savedFilter: IFilterSavedFilter): void;
     reloadFiltersWithValues(params: IFilterExternalParams, shouldResetSavedFilters?: boolean): void;
+    initItems(): void;
     _initItemsValues(): void;
     private _initPersistance;
     private _initQueryParams;

package/bundles/firestitch-filter.umd.js

@@ -2640,11 +2640,27 @@
             this._destroy$.complete();
         };
         ExternalParamsController.prototype.setConfig = function (config) {
-            var _this = this;
             this._config = config;
             this._initPersistance();
             this._initQueryParams();
             this._initSavedFilters();
+            this.initItems();
+        };
+        ExternalParamsController.prototype.setActiveSavedFilter = function (savedFilter) {
+            this.savedFiltersController.setActiveFilter(savedFilter);
+            if (savedFilter) {
+                this.reloadFiltersWithValues(savedFilter.filters, false);
+            }
+        };
+        ExternalParamsController.prototype.reloadFiltersWithValues = function (params, shouldResetSavedFilters) {
+            if (shouldResetSavedFilters === void 0) { shouldResetSavedFilters = true; }
+            this._shouldResetSavedFilters = shouldResetSavedFilters;
+            this._itemsStore.updateItemsWithValues(params);
+            this._saveQueryParams();
+            this._savePersistedParams();
+        };
+        ExternalParamsController.prototype.initItems = function () {
+            var _this = this;
             this._pending$.next(true);
             if (this._savedFilters.enabled) {
                 this._savedFilters
@@ -2663,19 +2679,6 @@
             }
             this._listenItemsChange();
         };
-        ExternalParamsController.prototype.setActiveSavedFilter = function (savedFilter) {
-            this.savedFiltersController.setActiveFilter(savedFilter);
-            if (savedFilter) {
-                this.reloadFiltersWithValues(savedFilter.filters, false);
-            }
-        };
-        ExternalParamsController.prototype.reloadFiltersWithValues = function (params, shouldResetSavedFilters) {
-            if (shouldResetSavedFilters === void 0) { shouldResetSavedFilters = true; }
-            this._shouldResetSavedFilters = shouldResetSavedFilters;
-            this._itemsStore.updateItemsWithValues(params);
-            this._saveQueryParams();
-            this._savePersistedParams();
-        };
         ExternalParamsController.prototype._initItemsValues = function () {
             this._itemsStore.initItemValues(this.params);
             this._saveQueryParams();
@@ -3225,6 +3228,7 @@
             this.label = config.label;
             this.mode = config.mode;
             this.icon = config.icon;
+            this.iconPlacement = config.iconPlacement;
             this._showFn = config.show;
             this.tabIndex = (_d = config.tabIndex) !== null && _d !== void 0 ? _d : 0;
             if (config.multiple !== undefined) {
@@ -3259,6 +3263,12 @@
                     {
                         this.fileSelected = config.select;
                         this.fileError = config.error;
+                        this.accept = config.accept;
+                        this.imageQuality = config.imageQuality;
+                        this.minWidth = config.minWidth;
+                        this.minHeight = config.minHeight;
+                        this.maxWidth = config.maxWidth;
+                        this.maxHeight = config.maxHeight;
                         this.click = (_f = config.click) !== null && _f !== void 0 ? _f : (function () { });
                         this._disabledFn = config.disabled;
                         this.updateDisabledState();
@@ -3861,6 +3871,14 @@
         FilterComponent.prototype.updateDisabledState = function () {
             this._actions.updateDisabledState();
         };
+        FilterComponent.prototype.setItems = function (items) {
+            this._filterItems.destroyItems();
+            this.config.items = items;
+            this._filterItems.setConfig(this._config);
+            this._externalParams.initItems();
+            this._syncSearchInputWithKeyword();
+            this._listenKeywordItemClear();
+        };
         FilterComponent.prototype._initFilterWithConfig = function (config) {
             if (this.config) {
                 this._filterItems.destroyItems();
@@ -3870,11 +3888,7 @@
             this._actions.initActions(this._config.actions);
             this._filterItems.setConfig(this._config);
             this._externalParams.setConfig(this._config);
-            var keywordItem = this._filterItems.keywordItem;
-            if (keywordItem) {
-                this.searchText.setValue(keywordItem.model);
-                this.searchPlaceholder = keywordItem.label || 'Search';
-            }
+            this._syncSearchInputWithKeyword();
             if (!!this.config.reloadWhenConfigChanged) {
                 this.change();
             }
@@ -3948,6 +3962,13 @@
                 });
             });
         };
+        FilterComponent.prototype._syncSearchInputWithKeyword = function () {
+            var keywordItem = this._filterItems.keywordItem;
+            if (keywordItem) {
+                this.searchText.setValue(keywordItem.model);
+                this.searchPlaceholder = keywordItem.label || 'Search';
+            }
+        };
         FilterComponent.prototype._listenKeywordItemClear = function () {
             var _this = this;
             var _a;
@@ -5135,7 +5156,7 @@
         FsFilterActionsComponent = __decorate([
             core.Component({
                 selector: 'fs-filter-actions',
-                template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n        class=\"action-button\"\n        [multiple]=\"action.multiple\"\n        (select)=\"action.fileSelected($event)\"\n        (error)=\"action.fileError($event)\"\n        (clicked)=\"action.click($event)\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n</ng-container>\n",
+                template: "<!-- Buttons -->\n<ng-container *ngFor=\"let action of actions\">\n\n  <ng-container [ngSwitch]=\"action.mode\">\n    <ng-container *ngSwitchCase=\"'button'\">\n      <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'menu'\">\n      <fs-filter-action-button\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\">\n      </fs-filter-action-button>\n\n      <fs-menu #someRef>\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group [label]=\"childAction.label\">\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n              {{childAction.label}}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </fs-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <fs-file\n        class=\"action-button\"\n        [accept]=\"action.accept || '*'\"\n        [multiple]=\"action.multiple\"\n        [minWidth]=\"action.minWidth\"\n        [minHeight]=\"action.minHeight\"\n        [imageWidth]=\"action.maxWidth\"\n        [imageHeight]=\"action.maxHeight\"\n        (select)=\"action.fileSelected($event)\"\n        (error)=\"action.fileError($event)\"\n        (clicked)=\"action.click($event)\">\n        <fs-filter-action-button [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    </ng-container>\n  </ng-container>\n</ng-container>\n<!-- /Buttons -->\n\n<!-- menu -->\n<ng-container *ngIf=\"kebabActions?.length\">\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n</ng-container>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:inline-flex}.action-button{display:block}.action-button+.action-button,fs-menu+.action-button{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}"]
             })
@@ -5153,7 +5174,7 @@
         FsFilterActionButtonComponent = __decorate([
             core.Component({
                 selector: 'fs-filter-action-button',
-                template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'basic'\"\n          mat-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button type=\"button\"\n          *ngSwitchDefault\n          mat-raised-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'icon'\"\n          mat-icon-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'fab'\"\n          mat-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'mini-fab'\"\n          mat-mini-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n  </ng-template>\n</ng-container>\n",
+                template: "<ng-container [ngSwitch]=\"action.type\">\n  <!-- Basic button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'basic'\"\n          mat-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Raised button -->\n  <button type=\"button\"\n          *ngSwitchDefault\n          mat-raised-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Icon button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'icon'\"\n          mat-icon-button\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'fab'\"\n          mat-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <!-- Mini Fab button -->\n  <button type=\"button\"\n          *ngSwitchCase=\"'mini-fab'\"\n          mat-mini-fab\n          (click)=\"action.click && action.click($event)\"\n          [color]=\"action.color\"\n          [ngClass]=\"action.classArray\"\n          [disabled]=\"action.disabled$ | async\"\n          [tabIndex]=\"action.tabIndex\"\n  >\n    <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n  </button>\n\n  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{action.label}}\n    </ng-container>\n\n    <ng-template #withIcon>\n      <mat-icon *ngIf=\"!action.iconPlacement || action.iconPlacement === 'left'\">{{action.icon}}</mat-icon>\n      {{action.label}}\n      <mat-icon *ngIf=\"action.iconPlacement === 'right'\">{{action.icon}}</mat-icon>\n    </ng-template>\n  </ng-template>\n</ng-container>\n",
                 host: {
                     class: 'action-button',
                 },
@@ -5173,7 +5194,7 @@
         FsFilterActionKebabActionsComponent = __decorate([
             core.Component({
                 selector: 'fs-filter-action-kebab-actions',
-                template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\n          <fs-file\n            class=\"action-button\"\n            [multiple]=\"action.multiple\"\n            (select)=\"action.fileSelected($event)\"\n            (error)=\"action.fileError($event)\"\n            (clicked)=\"action.click($event)\">\n            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n",
+                template: "<button type=\"button\"\n        mat-icon-button\n        class=\"menu-button\"\n        [fsMenuTriggerFor]=\"kebabActionsMenu\">\n  <mat-icon>more_vert</mat-icon>\n</button>\n<fs-menu #kebabActionsMenu>\n  <ng-container *ngFor=\"let action of kebabActions\">\n    <ng-container [ngSwitch]=\"action.mode\">\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <ng-container *ngFor=\"let childAction of action.items\">\n          <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n            <fs-menu-group>\n              <ng-template fs-group-menu-item-template>\n                {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon> {{childAction.label}}\n              </ng-template>\n              <ng-container *ngFor=\"let subAction of childAction.items\">\n                <ng-template fs-menu-item\n                             [link]=\"subAction.routerLink?.link\"\n                             [queryParams]=\"subAction.routerLink?.queryParams\"\n                             [hidden]=\"!(subAction.visible$ | async)\"\n                             (click)=\"subAction.click($event)\">\n                  <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n                  {{subAction.label}}\n                </ng-template>\n              </ng-container>\n            </fs-menu-group>\n          </ng-container>\n          <ng-template #simpleMenuItem>\n            <ng-template fs-menu-item\n                         [link]=\"childAction.routerLink?.link\"\n                         [queryParams]=\"childAction.routerLink?.queryParams\"\n                         [hidden]=\"!(childAction.visible$ | async)\"\n                         (click)=\"childAction.click($event);\">\n              <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n             {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'file'\">\n        <ng-template fs-menu-item\n                     [fsClass]=\"action.classArray\"\n        >\n          <fs-file\n            class=\"action-button\"\n            [accept]=\"action.accept || '*'\"\n            [multiple]=\"action.multiple\"\n            [minWidth]=\"action.minWidth\"\n            [minHeight]=\"action.minHeight\"\n            [imageWidth]=\"action.maxWidth\"\n            [imageHeight]=\"action.maxHeight\"\n            (select)=\"action.fileSelected($event)\"\n            (error)=\"action.fileError($event)\"\n            (clicked)=\"action.click($event)\">\n            <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n          </fs-file>\n        </ng-template>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-template fs-menu-item\n                     (click)=\"action.click($event)\"\n                     [fsClass]=\"action.classArray\"\n        >\n          <mat-icon *ngIf=\"action.icon\">{{action.icon}}</mat-icon> {{action.label}}\n        </ng-template>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</fs-menu>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 styles: [".menu-button{width:36px;height:36px;line-height:36px}"]
             })