@firestitch/filter/fesm2022/firestitch-filter.mjs

import * as i0 from '@angular/core';
import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, Injector, EventEmitter, Output, InjectionToken, Directive, Optional, Self, ChangeDetectorRef, ViewChild, NgZone, TemplateRef, ElementRef, ContentChild, HostBinding, HostListener, NgModule } from '@angular/core';
import { FsPrompt } from '@firestitch/prompt';
import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, map as map$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter, combineLatest, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
import { distinctUntilChanged, tap, switchMap, map, debounceTime, finalize, takeUntil, filter as filter$1, delay, skip } from 'rxjs/operators';
import { FsStore } from '@firestitch/store';
import { NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, NgSwitchDefault, NgIf, AsyncPipe, Location } from '@angular/common';
import { MatIconButton, MatFabButton, MatMiniFabButton, MatButton, MatIconAnchor } from '@angular/material/button';
import * as i3 from '@firestitch/form';
import { FsFormModule } from '@firestitch/form';
import { MatIcon, MatIconRegistry } from '@angular/material/icon';
import * as i2 from '@firestitch/menu';
import { FsMenuModule } from '@firestitch/menu';
import * as i2$1 from '@angular/material/select';
import { MatSelect } from '@angular/material/select';
import * as i1 from '@firestitch/popover';
import { FsPopoverModule } from '@firestitch/popover';
import * as i3$1 from '@firestitch/selectbutton';
import { FsSelectButtonModule } from '@firestitch/selectbutton';
import * as i1$1 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatOption, MatOptgroup } from '@angular/material/core';
import * as i6 from '@firestitch/file';
import { FsFileModule } from '@firestitch/file';
import * as i1$2 from '@firestitch/chip';
import { FsChipModule } from '@firestitch/chip';
import { isObject, isFunction, clone, toString } from 'lodash-es';
import { isDate, isValid, parseISO } from 'date-fns';
import { iso8601, format } from '@firestitch/date';
import * as i3$2 from '@firestitch/datepicker';
import { formatPeriodObject, FsDatePickerModule } from '@firestitch/datepicker';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1$5 from '@angular/material/dialog';
import { MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
import { getNormalizedPath } from '@firestitch/common';
import { DrawerRef } from '@firestitch/drawer';
import { ActivatedRoute } from '@angular/router';
import { FsMessage } from '@firestitch/message';
import { MatFormField, MatPrefix, MatLabel, MatSuffix, MatHint } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { FsSkeletonModule } from '@firestitch/skeleton';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { HtmlClassRenderer } from '@firestitch/html';
import * as i4 from '@firestitch/autocomplete';
import { FsAutocompleteModule } from '@firestitch/autocomplete';
import * as i1$3 from '@firestitch/autocomplete-chips';
import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
import { DomSanitizer } from '@angular/platform-browser';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import * as i3$3 from '@firestitch/clear';
import { FsClearModule } from '@firestitch/clear';
import * as i1$4 from '@angular/cdk/layout';
import { MatCheckbox } from '@angular/material/checkbox';
import * as i1$6 from '@firestitch/label';
import { FsLabelModule } from '@firestitch/label';

class SavedFilterController {
    _filterController;
    _savedFilters$ = new BehaviorSubject([]);
    _activeFilter$ = new BehaviorSubject(null);
    _enabled$ = new BehaviorSubject(false);
    _destroy$ = new Subject();
    _prompt = inject(FsPrompt);
    get singularLabel() {
        return this._filterController.config.savedFilters?.label?.singular || 'Saved filter';
    }
    get singularLabelLower() {
        return this.singularLabel.toLowerCase();
    }
    get labelIcon() {
        return this._filterController.config.savedFilters?.label?.icon || 'save';
    }
    get pluralLabel() {
        return this._filterController.config.savedFilters?.label?.plural || 'Saved filters';
    }
    get pluralLabelLower() {
        return this.pluralLabel.toLowerCase();
    }
    get enabled() {
        return this._enabled$.getValue();
    }
    get enabled$() {
        return this._enabled$
            .pipe(distinctUntilChanged());
    }
    get savedFilters() {
        return this._savedFilters$.getValue();
    }
    set savedFilters(filters) {
        this._savedFilters$.next(filters);
    }
    get savedFilters$() {
        return this._savedFilters$
            .pipe(distinctUntilChanged());
    }
    get activeFilter() {
        return this._activeFilter$.getValue();
    }
    get activeFilter$() {
        return this._activeFilter$
            .pipe(distinctUntilChanged());
    }
    get activeFilterData() {
        return this._activeFilter$.getValue()?.filters;
    }
    ngOnDestroy() {
        this._destroy$.next(null);
        this._destroy$.complete();
    }
    init(filterController) {
        this._filterController = filterController;
        if (!filterController.config.savedFilters) {
            this._setEnabledStatus(false);
            return of(null);
        }
        this._setEnabledStatus(true);
        return this.load();
    }
    initSavedFilters(savedFilters) {
        this.savedFilters = savedFilters;
        const acitveFilter = this.savedFilters
            .find((f) => f.active);
        if (acitveFilter) {
            this._activeFilter$.next(acitveFilter);
        }
    }
    load() {
        if (!this.enabled) {
            return of([]);
        }
        return this._filterController.config.savedFilters.load()
            .pipe(tap((savedFilters) => {
            this.initSavedFilters(savedFilters);
        }));
    }
    create() {
        return this._prompt.input({
            title: `Create ${this.singularLabelLower}`,
            label: 'Name',
            required: true,
            commitLabel: 'Create',
            dialogConfig: {
                restoreFocus: false,
            },
        })
            .pipe(switchMap((name) => {
            const data = {
                name,
            };
            return this.save(data);
        }), tap((savedFilter) => {
            this.setActiveFilter(savedFilter);
        }));
    }
    save(savedFilter) {
        savedFilter = {
            ...(this.activeFilter || {}),
            ...savedFilter,
            filters: this._filterController.items
                .filter((item) => item.hasValue)
                .reduce((accum, item) => {
                return {
                    ...accum,
                    [item.name]: item.value,
                };
            }, {}),
        };
        return this._filterController.config.savedFilters
            .save(savedFilter)
            .pipe(tap((_savedFilter) => {
            const exists = this.savedFilters.find((f) => f.id === _savedFilter.id);
            this.savedFilters = exists ?
                this.savedFilters
                    .map((item) => item.id === _savedFilter.id ? _savedFilter : item) :
                [...this.savedFilters, _savedFilter];
            this.setActiveFilter(_savedFilter);
        }));
    }
    get orderable() {
        return !!this._filterController.config.savedFilters.order;
    }
    order(savedFilters) {
        return this._filterController.config.savedFilters
            .order(savedFilters)
            .pipe(tap(() => {
            this.savedFilters = [
                ...savedFilters,
            ];
        }));
    }
    delete(savedFilter) {
        return this._filterController.config.savedFilters
            .delete(savedFilter)
            .pipe(tap(() => {
            this.savedFilters = this.savedFilters
                .filter((f) => f.id !== savedFilter.id);
            if (this.activeFilter?.id === savedFilter.id) {
                this.setActiveFilter(null);
            }
        }));
    }
    setActiveFilter(savedFilter) {
        if (savedFilter) {
            const existingFilter = this.savedFilters
                .find((f) => f.id === savedFilter.id);
            if (!existingFilter) {
                throw new Error(`Saved filter cannot be activated, because it does not exists. Filter ID = ${savedFilter.id}`);
            }
            this._filterController.values = existingFilter.filters;
            this._activeFilter$.next(existingFilter);
        }
        else {
            this._activeFilter$.next(null);
        }
    }
    _setEnabledStatus(value) {
        this._enabled$.next(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SavedFilterController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SavedFilterController });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SavedFilterController, decorators: [{
            type: Injectable
        }] });

var ActionMode;
(function (ActionMode) {
    ActionMode["Button"] = "button";
    ActionMode["SelectButton"] = "selectButton";
    ActionMode["Menu"] = "menu";
    ActionMode["File"] = "file";
})(ActionMode || (ActionMode = {}));

var ActionType;
(function (ActionType) {
    ActionType["Basic"] = "basic";
    ActionType["Raised"] = "raised";
    ActionType["Icon"] = "icon";
    ActionType["Fab"] = "fab";
    ActionType["MiniFab"] = "mini-fab";
    ActionType["Flat"] = "flat";
    ActionType["Stroked"] = "stroked";
})(ActionType || (ActionType = {}));

var ButtonStyle;
(function (ButtonStyle) {
    ButtonStyle["Basic"] = "basic";
    ButtonStyle["Raised"] = "raised";
    ButtonStyle["Icon"] = "icon";
    ButtonStyle["Fab"] = "fab";
    ButtonStyle["MiniFab"] = "mini-fab";
    ButtonStyle["Flat"] = "flat";
    ButtonStyle["Stroked"] = "stroked";
})(ButtonStyle || (ButtonStyle = {}));

var ItemDateMode;
(function (ItemDateMode) {
    ItemDateMode["Calendar"] = "calendar";
    ItemDateMode["ScrollMonthYear"] = "monthyear";
    ItemDateMode["ScrollMonthDayYear"] = "monthdayyear";
})(ItemDateMode || (ItemDateMode = {}));

var ItemType;
(function (ItemType) {
    ItemType["Text"] = "text";
    ItemType["Select"] = "select";
    ItemType["Range"] = "range";
    ItemType["Date"] = "date";
    ItemType["DateTime"] = "datetime";
    ItemType["DateRange"] = "daterange";
    ItemType["Week"] = "week";
    ItemType["DateTimeRange"] = "datetimerange";
    ItemType["AutoComplete"] = "autocomplete";
    ItemType["AutoCompleteChips"] = "autocompletechips";
    ItemType["Checkbox"] = "checkbox";
    ItemType["Chips"] = "chips";
    ItemType["Keyword"] = "keyword";
})(ItemType || (ItemType = {}));

var MenuActionMode;
(function (MenuActionMode) {
    MenuActionMode["Menu"] = "menu";
    MenuActionMode["File"] = "file";
    MenuActionMode["Group"] = "group";
})(MenuActionMode || (MenuActionMode = {}));

var PickerViewType;
(function (PickerViewType) {
    PickerViewType["Date"] = "date";
    PickerViewType["DateTime"] = "datetime";
    PickerViewType["Time"] = "time";
    PickerViewType["Week"] = "week";
    PickerViewType["MonthRange"] = "monthrange";
})(PickerViewType || (PickerViewType = {}));

class ActionMenuItem {
    _parent;
    icon;
    label;
    mode;
    fileSelected;
    fileError;
    multiple;
    accept;
    minWidth;
    minHeight;
    maxWidth;
    maxHeight;
    imageQuality;
    click;
    routerLink;
    items = [];
    _isGroup = false;
    _showFn;
    _visible$ = new BehaviorSubject(true);
    _disabled$ = new BehaviorSubject(false);
    constructor(config = {}, _parent) {
        this._parent = _parent;
        this._init(config);
    }
    get isGroup() {
        return this._isGroup;
    }
    get visible() {
        return this._visible$.getValue();
    }
    get visible$() {
        return this._visible$.asObservable();
    }
    set disabled(value) {
        this._disabled$.next(value);
    }
    get disabled() {
        return this._disabled$.getValue();
    }
    get disabled$() {
        return this._disabled$.asObservable();
    }
    updateVisibility() {
        const visible = this._showFn ? this._showFn() : true;
        if (!visible || !this.isGroup) {
            this._visible$.next(visible);
            return;
        }
        const numberOfVisibleChildren = this.items
            .reduce((acc, item) => {
            item.updateVisibility();
            if (item.visible) {
                acc++;
            }
            return acc;
        }, 0);
        this._visible$.next(!!numberOfVisibleChildren);
    }
    _initFile(config) {
        this.multiple = config.multiple;
        this.accept = config.accept;
        this.minWidth = config.minWidth;
        this.minHeight = config.minHeight;
        this.maxWidth = config.maxWidth;
        this.maxHeight = config.maxHeight;
        this.imageQuality = config.imageQuality;
        this.fileSelected = config.fileSelected;
    }
    _init(config) {
        this.label = config.label;
        this.icon = config.icon;
        this.mode = config.mode || MenuActionMode.Menu;
        this._showFn = config.show;
        if (this.mode === MenuActionMode.File) {
            this._initFile(config);
        }
        if ('items' in config) {
            this._isGroup = true;
            if (Array.isArray(config.items)) {
                this.items = config
                    .items
                    .map((item) => new ActionMenuItem(item, this));
            }
            this.updateVisibility();
        }
        else {
            this.click = config.click;
            this.routerLink = config.link;
            if (!this._parent) {
                this.updateVisibility();
            }
        }
    }
}

class Action {
    primary = true;
    icon;
    iconPlacement;
    label;
    value;
    menu;
    color;
    customize;
    className;
    click;
    style;
    tabIndex;
    fileSelected;
    fileError;
    multiple;
    accept;
    tooltip;
    minWidth;
    minHeight;
    maxWidth;
    maxHeight;
    imageQuality;
    change;
    values;
    mode;
    isReorderAction = false;
    deselect = false;
    classArray = [];
    items = [];
    _visible$ = new BehaviorSubject(true);
    _disabled$ = new BehaviorSubject(false);
    _showFn;
    _disabledFn;
    constructor(filterConfig, actionConfig = {}) {
        this._init(filterConfig, actionConfig);
    }
    get visible() {
        return this._visible$.getValue();
    }
    get visible$() {
        return this._visible$.asObservable();
    }
    set disabled(value) {
        this._disabled$.next(value);
    }
    get disabled() {
        return this._disabled$.getValue();
    }
    get disabled$() {
        return this._disabled$.asObservable();
    }
    updateVisibility() {
        const visible = this._showFn ? this._showFn() : true;
        if (!visible || this.mode !== ActionMode.Menu) {
            this._visible$.next(visible);
            return;
        }
        const hasVisibleChildren = this.items.some((item) => item.visible);
        this._visible$.next(hasVisibleChildren);
    }
    updateDisabledState() {
        if (this._disabledFn) {
            this.disabled = this._disabledFn();
        }
    }
    _init(filterConfig, config = {}) {
        config.mode = config.mode ?? ActionMode.Button;
        this._initCore(filterConfig, config);
        switch (config.mode) {
            case ActionMode.Button:
                {
                    this.customize = config.customize;
                    this.click = config.click ?? (() => {
                        // do nothing
                    });
                    this._disabledFn = config.disabled;
                    this.updateDisabledState();
                }
                break;
            case ActionMode.Menu:
                {
                    if (config.items && Array.isArray(config.items)) {
                        this.items = config.items.map((item) => new ActionMenuItem(item));
                    }
                }
                break;
            case ActionMode.SelectButton:
                {
                    this._initSelectButton(config);
                }
                break;
            case ActionMode.File:
                {
                    this._initFile(config);
                }
                break;
        }
        this.updateVisibility();
    }
    _initCore(filterConfig, config) {
        this.primary = config.primary ?? true;
        this.color = config.color;
        this.tooltip = config.tooltip;
        this.label = config.label;
        this.mode = config.mode;
        this.icon = config.icon;
        this.iconPlacement = config.iconPlacement;
        this._showFn = config.show;
        this.tabIndex = config.tabIndex ?? 0;
        this.menu = config.menu;
        if (!this.style) {
            this.style = config.icon && !config.label ?
                ButtonStyle.Icon :
                (config.style || filterConfig.buttonStyle || ButtonStyle.Flat);
            if (!this.primary && this.style === ButtonStyle.Flat) {
                this.style = ButtonStyle.Stroked;
            }
        }
        if (config.className) {
            this.className = config.className;
            this.classArray = this.className
                .split(' ');
        }
        if (!this.primary && this.mode === ActionMode.SelectButton) {
            this.color = null; // should be null because of styles logic in select-button
        }
        if (this.primary) {
            this.color = 'primary';
        }
    }
    _initSelectButton(config) {
        this.values = config.values;
        this.value = config.default;
        this.change = config.change;
        this.deselect = config.deselect ?? false;
    }
    _initFile(config) {
        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 = config.click ?? (() => {
            //
        });
        this._disabledFn = config.disabled;
        if ((config).multiple !== undefined) {
            this.multiple = (config).multiple;
        }
        this.updateDisabledState();
    }
}

class FsFilterActionButtonComponent {
    ButtonStyle = ButtonStyle;
    action;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FsFilterActionButtonComponent, isStandalone: true, selector: "fs-filter-action-button", inputs: { action: "action" }, host: { classAttribute: "action-button" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"action.style\">\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ButtonStyle.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  <!-- Fab button -->\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ButtonStyle.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  <!-- Mini Fab button -->\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ButtonStyle.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  <button\n      type=\"button\"\n      *ngSwitchDefault\n      mat-button\n      class=\"button-basic\"\n      [ngClass]=\"{        \n        'mat-mdc-raised-button': action.style === ButtonStyle.Raised,\n        'mat-mdc-unelevated-button': action.style === ButtonStyle.Flat,\n        'mat-mdc-outlined-button': action.style === ButtonStyle.Stroked,\n        'mat-mdc-icon-button': action.style === ButtonStyle.Icon,\n        'icon-placement-right': action.iconPlacement === 'right'\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  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{ action.label }}\n    </ng-container>\n    <ng-template #withIcon>\n      <mat-icon>\n        {{ action.icon }}\n      </mat-icon>\n      {{ action.label }}\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: [":host ::ng-deep .button-basic .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .button-basic .mdc-button__label mat-icon{flex-shrink:0}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label{flex-direction:row-reverse}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label mat-icon{margin-left:5px}:host ::ng-deep .button-basic:not(.icon-placement-right) .mdc-button__label mat-icon{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterActionButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fs-filter-action-button', host: { class: 'action-button' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                        NgSwitch,
                        NgSwitchCase,
                        MatIconButton,
                        NgClass,
                        NgTemplateOutlet,
                        MatFabButton,
                        MatMiniFabButton,
                        NgSwitchDefault,
                        MatButton,
                        FsFormModule,
                        NgIf,
                        MatIcon,
                        AsyncPipe,
                    ], template: "<ng-container [ngSwitch]=\"action.style\">\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ButtonStyle.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  <!-- Fab button -->\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ButtonStyle.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  <!-- Mini Fab button -->\n  <button\n      type=\"button\"\n      *ngSwitchCase=\"ButtonStyle.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  <button\n      type=\"button\"\n      *ngSwitchDefault\n      mat-button\n      class=\"button-basic\"\n      [ngClass]=\"{        \n        'mat-mdc-raised-button': action.style === ButtonStyle.Raised,\n        'mat-mdc-unelevated-button': action.style === ButtonStyle.Flat,\n        'mat-mdc-outlined-button': action.style === ButtonStyle.Stroked,\n        'mat-mdc-icon-button': action.style === ButtonStyle.Icon,\n        'icon-placement-right': action.iconPlacement === 'right'\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  <ng-template #buttonContent>\n    <ng-container *ngIf=\"!action.icon else withIcon\">\n      {{ action.label }}\n    </ng-container>\n    <ng-template #withIcon>\n      <mat-icon>\n        {{ action.icon }}\n      </mat-icon>\n      {{ action.label }}\n    </ng-template>\n  </ng-template>\n</ng-container>", styles: [":host ::ng-deep .button-basic .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .button-basic .mdc-button__label mat-icon{flex-shrink:0}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label{flex-direction:row-reverse}:host ::ng-deep .button-basic.icon-placement-right .mdc-button__label mat-icon{margin-left:5px}:host ::ng-deep .button-basic:not(.icon-placement-right) .mdc-button__label mat-icon{margin-right:5px}\n"] }]
        }], propDecorators: { action: [{
                type: Input
            }] } });

class FsFilterActionKebabActionsComponent {
    kebabActions;
    actionClick(action, event) {
        if (action.click) {
            action.click(event);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterActionKebabActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterActionKebabActionsComponent, isStandalone: true, 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  @for (action of kebabActions; track action) {\n    @switch (action.mode) {\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      @case ('menu') {\n        @for (childAction of action.items; track childAction) {\n          @if (childAction.isGroup) {\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              @for (subAction of childAction.items; track subAction) {\n                <ng-template\n                  fs-menu-item\n                  [link]=\"subAction.routerLink?.link\"\n                  [queryParams]=\"subAction.routerLink?.queryParams\"\n                  [hidden]=\"!(subAction.visible$ | async)\"\n                  (click)=\"actionClick(subAction, $event)\">\n                  @if (subAction.icon) {\n                    <mat-icon>{{subAction.icon}}</mat-icon>\n                  }\n                  {{subAction.label}}\n                </ng-template>\n              }\n            </fs-menu-group>\n          } @else {\n            <ng-template\n              fs-menu-item\n              [link]=\"childAction.routerLink?.link\"\n              [queryParams]=\"childAction.routerLink?.queryParams\"\n              [hidden]=\"!(childAction.visible$ | async)\"\n              (click)=\"actionClick(childAction, $event)\">\n              @if (childAction.icon) {\n                <mat-icon>{{childAction.icon}}</mat-icon>\n              }\n              {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          }\n        }\n      }\n      @case ('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          @if (action.icon) {\n            <mat-icon>{{action.icon}}</mat-icon>\n            } {{action.label}}\n          </ng-template>\n        }\n        @default {\n          <ng-template\n            fs-menu-item\n            (click)=\"action.click($event)\"\n            [fsClass]=\"action.classArray\">\n            @if (action.icon) {\n              <mat-icon>{{action.icon}}</mat-icon>\n              } {{action.label}}\n            </ng-template>\n          }\n        }\n      }\n    </fs-menu>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i2.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { kind: "directive", type: i2.FsGroupMenuItemTemplateDirective, selector: "[fs-group-menu-item-template]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterActionKebabActionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fs-filter-action-kebab-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                        MatIconButton,
                        FsMenuModule,
                        MatIcon,
                        AsyncPipe,
                    ], 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  @for (action of kebabActions; track action) {\n    @switch (action.mode) {\n      <!-- Case when actions was collapsed from action with mode = 'menu'-->\n      @case ('menu') {\n        @for (childAction of action.items; track childAction) {\n          @if (childAction.isGroup) {\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              @for (subAction of childAction.items; track subAction) {\n                <ng-template\n                  fs-menu-item\n                  [link]=\"subAction.routerLink?.link\"\n                  [queryParams]=\"subAction.routerLink?.queryParams\"\n                  [hidden]=\"!(subAction.visible$ | async)\"\n                  (click)=\"actionClick(subAction, $event)\">\n                  @if (subAction.icon) {\n                    <mat-icon>{{subAction.icon}}</mat-icon>\n                  }\n                  {{subAction.label}}\n                </ng-template>\n              }\n            </fs-menu-group>\n          } @else {\n            <ng-template\n              fs-menu-item\n              [link]=\"childAction.routerLink?.link\"\n              [queryParams]=\"childAction.routerLink?.queryParams\"\n              [hidden]=\"!(childAction.visible$ | async)\"\n              (click)=\"actionClick(childAction, $event)\">\n              @if (childAction.icon) {\n                <mat-icon>{{childAction.icon}}</mat-icon>\n              }\n              {{ action.label }} <mat-icon style=\"margin: 0;\">arrow_right</mat-icon>{{ childAction.label }}\n            </ng-template>\n          }\n        }\n      }\n      @case ('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          @if (action.icon) {\n            <mat-icon>{{action.icon}}</mat-icon>\n            } {{action.label}}\n          </ng-template>\n        }\n        @default {\n          <ng-template\n            fs-menu-item\n            (click)=\"action.click($event)\"\n            [fsClass]=\"action.classArray\">\n            @if (action.icon) {\n              <mat-icon>{{action.icon}}</mat-icon>\n              } {{action.label}}\n            </ng-template>\n          }\n        }\n      }\n    </fs-menu>\n" }]
        }], propDecorators: { kebabActions: [{
                type: Input
            }] } });

class FsFilterActionsComponent {
    kebabActions = [];
    actions = [];
    ButtonStyle = ButtonStyle;
    ActionMode = ActionMode;
    actionChange(action, value, selectButton) {
        if (action.change) {
            action.change(value);
            if (action.deselect) {
                selectButton.writeValue(null);
            }
        }
    }
    actionClick(action, event) {
        if (action.click) {
            action.click(event);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterActionsComponent, isStandalone: true, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "@for (action of actions; track action) {\n  @switch (action.mode) {\n    @case (ActionMode.Button) {\n      <fs-filter-action-button\n        [action]=\"action\"\n        class=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    }\n    @case (ActionMode.Menu) {\n      <fs-filter-action-button\n        class=\"action\"\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n      <fs-menu\n        #someRef\n        class=\"action\">\n        @for (childAction of action.items; track childAction) {\n          @if (childAction.isGroup) {\n            <fs-menu-group [label]=\"childAction.label\">\n              @for (subAction of childAction.items; track subAction) {\n                @switch (subAction.mode) {\n                  @case ('menu') {\n                    <ng-template\n                      fs-menu-item\n                      [link]=\"subAction.routerLink?.link\"\n                      [queryParams]=\"subAction.routerLink?.queryParams\"\n                      [hidden]=\"(subAction.visible$ | async) === false\"\n                      (click)=\"actionClick(subAction, $event)\">\n                      @if (subAction.icon) {\n                        <mat-icon>\n                          {{ subAction.icon }}\n                        </mat-icon>\n                      }\n                      {{ subAction.label }}\n                    </ng-template>\n                  }\n                  @case ('file') {\n                    <ng-template\n                      fs-menu-file-item\n                      [multiple]=\"subAction.multiple\"\n                      [accept]=\"subAction.accept || '*'\"\n                      [minWidth]=\"subAction.minWidth\"\n                      [minHeight]=\"subAction.minHeight\"\n                      [imageWidth]=\"subAction.maxWidth\"\n                      [imageHeight]=\"subAction.maxHeight\"\n                      (select)=\"subAction.fileSelected($event)\"\n                      [hidden]=\"(subAction.visible$ | async) === false\"\n                      (click)=\"actionClick(subAction, $event)\">\n                      @if (subAction.icon) {\n                        <mat-icon>\n                          {{ subAction.icon }}\n                        </mat-icon>\n                      }\n                      {{ subAction.label }}\n                    </ng-template>\n                  }\n                }\n              }\n            </fs-menu-group>\n          } @else {\n            @switch (childAction.mode) {\n              @case ('menu') {\n                <ng-template\n                  fs-menu-item\n                  [link]=\"childAction.routerLink?.link\"\n                  [queryParams]=\"childAction.routerLink?.queryParams\"\n                  [hidden]=\"(childAction.visible$ | async) === false\"\n                  (click)=\"childAction.click($event);\">\n                  @if (childAction.icon) {\n                    <mat-icon>\n                      {{ childAction.icon }}\n                    </mat-icon>\n                  }\n                  {{ childAction.label }}\n                </ng-template>\n              }\n              @case ('file') {\n                <ng-template\n                  fs-menu-file-item\n                  [multiple]=\"childAction.multiple\"\n                  [accept]=\"childAction.accept || '*'\"\n                  [minWidth]=\"childAction.minWidth\"\n                  [minHeight]=\"childAction.minHeight\"\n                  [imageWidth]=\"childAction.maxWidth\"\n                  [imageHeight]=\"childAction.maxHeight\"\n                  (select)=\"childAction.fileSelected($event)\"\n                  [hidden]=\"(childAction.visible$ | async) === false\">\n                  @if (childAction.icon) {\n                    <mat-icon>\n                      {{ childAction.icon }}\n                    </mat-icon>\n                  }\n                  {{ childAction.label }}\n                </ng-template>\n              }\n            }\n          }\n        }\n      </fs-menu>\n    }\n    @case (ActionMode.SelectButton) {\n      <mat-select\n        class=\"action action-select-button\"\n        [buttonType]=\"'basic'\"\n          [ngClass]=\"{\n            'mat-mdc-raised-button': action.style === ButtonStyle.Raised,\n            'mat-mdc-unelevated-button': action.style === ButtonStyle.Flat,\n            'mat-mdc-outlined-button': action.style === ButtonStyle.Stroked,\n          }\"\n        [placeholder]=\"action.label\"\n        [(ngModel)]=\"action.value\"\n        [color]=\"action.color\"\n        (ngModelChange)=\"actionChange(action, $event, selectButton)\"\n        fsSelectButton\n        #selectButton\n        [deselectOnChange]=\"action.deselect\">\n        @for (item of action.values; track item) {\n          <mat-option\n            [value]=\"item.value\">\n            {{ item.name }}\n          </mat-option>\n        }\n      </mat-select>\n    }\n    @case (ActionMode.File) {\n      <fs-file\n        class=\"action 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 [action]=\"action\"></fs-filter-action-button>\n      </fs-file>\n    }\n  }\n}\n@if (kebabActions?.length) {\n  <fs-filter-action-kebab-actions [kebabActions]=\"kebabActions\"></fs-filter-action-kebab-actions>\n}\n", styles: [":host{display:inline-flex;align-items:center}.action-button{display:block}.action.action-select-button{width:auto}.action+.action{margin-left:5px}fs-menu{display:none}\n"], dependencies: [{ kind: "component", type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { kind: "ngmodule", type: FsPopoverModule }, { kind: "directive", type: i1.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i2.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i2.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: i2.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { kind: "directive", type: i2.FsMenuFileItemDirective, selector: "[fs-menu-file-item]", inputs: ["multiple", "accept", "minWidth", "minHeight", "imageWidth", "imageHeight"], outputs: ["select", "error"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "directive", type: i3$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "minWidth", "maxWidth", "width", "buttonType", "deselectOnChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i6.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "component", type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                        FsFilterActionButtonComponent,
                        FsPopoverModule,
                        FsMenuModule,
                        MatIcon,
                        MatSelect,
                        FsSelectButtonModule,
                        NgClass,
                        FormsModule,
                        FsFormModule,
                        MatOption,
                        FsFileModule,
                        FsFilterActionKebabActionsComponent,
                        AsyncPipe,
                    ], template: "@for (action of actions; track action) {\n  @switch (action.mode) {\n    @case (ActionMode.Button) {\n      <fs-filter-action-button\n        [action]=\"action\"\n        class=\"action\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n    }\n    @case (ActionMode.Menu) {\n      <fs-filter-action-button\n        class=\"action\"\n        [action]=\"action\"\n        [fsMenuTriggerFor]=\"someRef\"\n        fsPopover\n        [enabled]=\"!!action.tooltip\"\n        [text]=\"action.tooltip\">\n      </fs-filter-action-button>\n      <fs-menu\n        #someRef\n        class=\"action\">\n        @for (childAction of action.items; track childAction) {\n          @if (childAction.isGroup) {\n            <fs-menu-group [label]=\"childAction.label\">\n              @for (subAction of childAction.items; track subAction) {\n                @switch (subAction.mode) {\n                  @case ('menu') {\n                    <ng-template\n                      fs-menu-item\n                      [link]=\"subAction.routerLink?.link\"\n                      [queryParams]=\"subAction.routerLink?.queryParams\"\n                      [hidden]=\"(subAction.visible$ | async) === false\"\n                      (click)=\"actionClick(subAction, $event)\">\n                      @if (subAction.icon) {\n                        <mat-icon>\n                          {{ subAction.icon }}\n                        </mat-icon>\n                      }\n                      {{ subAction.label }}\n                    </ng-template>\n                  }\n                  @case ('file') {\n                    <ng-template\n                      fs-menu-file-item\n                      [multiple]=\"subAction.multiple\"\n                      [accept]=\"subAction.accept || '*'\"\n                      [minWidth]=\"subAction.minWidth\"\n                      [minHeight]=\"subAction.minHeight\"\n                      [imageWidth]=\"subAction.maxWidth\"\n                      [imageHeight]=\"subAction.maxHeight\"\n                      (select)=\"subAction.fileSelected($event)\"\n                      [hidden]=\"(subAction.visible$ | async) === false\"\n                      (click)=\"actionClick(subAction, $event)\">\n                      @if (subAction.icon) {\n                        <mat-icon>\n                          {{ subAction.icon }}\n