@arsedizioni/ars-utils 22.1.4 → 22.5.1

package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs

@@ -0,0 +1,426 @@
+import * as i0 from '@angular/core';
+import { output, input, signal, computed, inject, ChangeDetectorRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i9 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
+import * as i1 from '@arsedizioni/ars-utils/ui';
+import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
+
+/** Constants identifying each filter group slot and text filter channels. */
+const Filters = {
+    FLT_1: 1,
+    FLT_2: 2,
+    FLT_3: 3,
+    FLT_4: 4,
+    FLT_5: 5,
+    FLT_TEXT: 96,
+    FLT_TEXT_1: 97,
+    FLT_TEXT_2: 98,
+    FLT_TEXT_3: 99
+};
+/** Event payload emitted when an active filter changes. */
+class CurrentFilterChanged {
+}
+/** Holds the current state of all active filters for a filter-bar component. */
+class CurrentFilter {
+    /**
+     * Returns true if any filter slot or text field is currently active.
+     * @returns Whether at least one filter is applied.
+     */
+    filtered() {
+        return (this.flt1 != null ||
+            this.flt2 != null ||
+            this.flt3 != null ||
+            this.flt4 != null ||
+            this.flt5 != null ||
+            !!this.text?.length ||
+            !!this.text2?.length ||
+            !!this.text3?.length);
+    }
+}
+/** Holds the selected value and display state for a single typed filter slot. */
+class CurrentFilterItem {
+    constructor() {
+        this.enabled = true;
+    }
+    /**
+     * Reset the filter to its empty state.
+     */
+    clear() {
+        this.value = undefined;
+        this.selectedTitle = undefined;
+    }
+}
+
+class FilterBarComponent {
+    constructor() {
+        /** Emitted whenever any filter value changes. */
+        this.changed = output();
+        /** The list of filter groups to display. */
+        this.filters = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filters" }] : /* istanbul ignore next */ []));
+        this.canFilterByText = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByText" }] : /* istanbul ignore next */ []));
+        this.canFilterByText2 = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByText2" }] : /* istanbul ignore next */ []));
+        this.canFilterByText3 = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByText3" }] : /* istanbul ignore next */ []));
+        /** Initial text values for the search inputs — synced into the model signals on change. */
+        this.initialText = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialText" }] : /* istanbul ignore next */ []));
+        this.initialText2 = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialText2" }] : /* istanbul ignore next */ []));
+        this.initialText3 = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initialText3" }] : /* istanbul ignore next */ []));
+        this.textName = input("testo", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textName" }] : /* istanbul ignore next */ []));
+        this.text2Name = input("...", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text2Name" }] : /* istanbul ignore next */ []));
+        this.text3Name = input("...", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text3Name" }] : /* istanbul ignore next */ []));
+        this.textLength = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "textLength" }] : /* istanbul ignore next */ []));
+        this.text2Length = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "text2Length" }] : /* istanbul ignore next */ []));
+        this.text3Length = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "text3Length" }] : /* istanbul ignore next */ []));
+        this.showTextSearchButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTextSearchButton" }] : /* istanbul ignore next */ []));
+        this.appearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /** Two-way bindable text filter values. */
+        this.text = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.text2 = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text2" }] : /* istanbul ignore next */ []));
+        this.text3 = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text3" }] : /* istanbul ignore next */ []));
+        /** Filter group for slot 1, derived reactively from the `filters` input. */
+        this.flt1 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_1), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flt1" }] : /* istanbul ignore next */ []));
+        /** Filter group for slot 2, derived reactively from the `filters` input. */
+        this.flt2 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_2), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flt2" }] : /* istanbul ignore next */ []));
+        /** Filter group for slot 3, derived reactively from the `filters` input. */
+        this.flt3 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_3), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flt3" }] : /* istanbul ignore next */ []));
+        /** Filter group for slot 4, derived reactively from the `filters` input. */
+        this.flt4 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_4), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flt4" }] : /* istanbul ignore next */ []));
+        /** Filter group for slot 5, derived reactively from the `filters` input. */
+        this.flt5 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_5), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flt5" }] : /* istanbul ignore next */ []));
+        /** True when filter slot 1 has an action or item list. */
+        this.canFilterByFlt1 = computed(() => {
+            const g = this.flt1();
+            return !!(g?.action || (g?.items && g.items.length > 0));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByFlt1" }] : /* istanbul ignore next */ []));
+        /** True when filter slot 2 has an action or item list. */
+        this.canFilterByFlt2 = computed(() => {
+            const g = this.flt2();
+            return !!(g?.action || (g?.items && g.items.length > 0));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByFlt2" }] : /* istanbul ignore next */ []));
+        /** True when filter slot 3 has an action or item list. */
+        this.canFilterByFlt3 = computed(() => {
+            const g = this.flt3();
+            return !!(g?.action || (g?.items && g.items.length > 0));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByFlt3" }] : /* istanbul ignore next */ []));
+        /** True when filter slot 4 has an action or item list. */
+        this.canFilterByFlt4 = computed(() => {
+            const g = this.flt4();
+            return !!(g?.action || (g?.items && g.items.length > 0));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByFlt4" }] : /* istanbul ignore next */ []));
+        /** True when filter slot 5 has an action or item list. */
+        this.canFilterByFlt5 = computed(() => {
+            const g = this.flt5();
+            return !!(g?.action || (g?.items && g.items.length > 0));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canFilterByFlt5" }] : /* istanbul ignore next */ []));
+        this.currentFilter = new CurrentFilter();
+        this.cdr = inject(ChangeDetectorRef);
+        // Sync the initialText inputs into the model signals whenever they change
+        effect(() => {
+            this.text.set(this.initialText());
+            this.text2.set(this.initialText2());
+            this.text3.set(this.initialText3());
+        });
+    }
+    /**
+     * No-op kept for API compatibility.
+     * Filter groups are now computed reactively from the `filters()` input.
+     */
+    initializeFilters() { }
+    /**
+     * Applies the selected filter item to the current filter state and emits the change.
+     * @param filter - The filter item to apply.
+     */
+    applyFilter(filter) {
+        let changed = false;
+        switch (filter.group) {
+            case Filters.FLT_1:
+                changed = this.currentFilter.flt1 !== filter.value;
+                if (changed) {
+                    this.currentFilter.flt1 = filter.value;
+                    this.currentFilter.flt1Name = filter.titleSelected;
+                }
+                break;
+            case Filters.FLT_2:
+                changed = this.currentFilter.flt2 !== filter.value;
+                if (changed) {
+                    this.currentFilter.flt2 = filter.value;
+                    this.currentFilter.flt2Name = filter.titleSelected;
+                }
+                break;
+            case Filters.FLT_3:
+                changed = this.currentFilter.flt3 !== filter.value;
+                if (changed) {
+                    this.currentFilter.flt3 = filter.value;
+                    this.currentFilter.flt3Name = filter.titleSelected;
+                }
+                break;
+            case Filters.FLT_4:
+                changed = this.currentFilter.flt4 !== filter.value;
+                if (changed) {
+                    this.currentFilter.flt4 = filter.value;
+                    this.currentFilter.flt4Name = filter.titleSelected;
+                }
+                break;
+            case Filters.FLT_5:
+                changed = this.currentFilter.flt5 !== filter.value;
+                if (changed) {
+                    this.currentFilter.flt5 = filter.value;
+                    this.currentFilter.flt5Name = filter.titleSelected;
+                }
+                break;
+        }
+        if (changed) {
+            this.cdr.markForCheck();
+            this.changed.emit({ filter: this.currentFilter, group: filter.group });
+        }
+    }
+    /**
+     * Executes the action associated with a filter group, or clears the filter.
+     * @param group - The filter group number.
+     * @param clear - When `true`, clears the filter instead of triggering its action.
+     */
+    applyFilterAction(group, clear = false) {
+        if (!clear) {
+            const g = this.getFilterGroup(group);
+            if (g?.action) {
+                g.action(this, g);
+            }
+        }
+        else {
+            this.clearFilter(group);
+        }
+    }
+    /** Commits the current text inputs to the filter state and emits the change. */
+    applyTextFilter() {
+        this.currentFilter.text = this.text();
+        this.currentFilter.text2 = this.text2();
+        this.currentFilter.text3 = this.text3();
+        this.changed.emit({
+            filter: this.currentFilter,
+            group: Filters.FLT_TEXT
+        });
+    }
+    /**
+     * Clears the active filter for the specified group and emits the change if it was set.
+     * @param group - The filter group number to clear.
+     */
+    clearFilter(group) {
+        let changed = false;
+        switch (group) {
+            case Filters.FLT_1:
+                changed = this.currentFilter.flt1 != undefined;
+                if (changed) {
+                    this.currentFilter.flt1 = undefined;
+                    this.currentFilter.flt1Name = undefined;
+                }
+                break;
+            case Filters.FLT_2:
+                changed = this.currentFilter.flt2 != undefined;
+                if (changed) {
+                    this.currentFilter.flt2 = undefined;
+                    this.currentFilter.flt2Name = undefined;
+                }
+                break;
+            case Filters.FLT_3:
+                changed = this.currentFilter.flt3 != undefined;
+                if (changed) {
+                    this.currentFilter.flt3 = undefined;
+                    this.currentFilter.flt3Name = undefined;
+                }
+                break;
+            case Filters.FLT_4:
+                changed = this.currentFilter.flt4 != undefined;
+                if (changed) {
+                    this.currentFilter.flt4 = undefined;
+                    this.currentFilter.flt4Name = undefined;
+                }
+                break;
+            case Filters.FLT_5:
+                changed = this.currentFilter.flt5 != undefined;
+                if (changed) {
+                    this.currentFilter.flt5 = undefined;
+                    this.currentFilter.flt5Name = undefined;
+                }
+                break;
+        }
+        if (changed) {
+            this.cdr.markForCheck();
+            this.changed.emit({ filter: this.currentFilter, group: group });
+        }
+    }
+    /** Resets all active filters and text inputs, then emits the change. */
+    clearAllFilters() {
+        this.currentFilter.flt1 = undefined;
+        this.currentFilter.flt1Name = undefined;
+        this.currentFilter.flt2 = undefined;
+        this.currentFilter.flt2Name = undefined;
+        this.currentFilter.flt3 = undefined;
+        this.currentFilter.flt3Name = undefined;
+        this.currentFilter.flt4 = undefined;
+        this.currentFilter.flt4Name = undefined;
+        this.currentFilter.flt5 = undefined;
+        this.currentFilter.flt5Name = undefined;
+        this.currentFilter.text = undefined;
+        this.currentFilter.text2 = undefined;
+        this.currentFilter.text3 = undefined;
+        this.text.set(undefined);
+        this.text2.set(undefined);
+        this.text3.set(undefined);
+        this.cdr.markForCheck();
+        this.changed.emit({ filter: this.currentFilter, group: -1 });
+    }
+    /**
+     * Returns `true` when more than one filter type is active, showing the "clear all" button.
+     * @returns True when the clear-all button should be visible.
+     */
+    canClearAllFilters() {
+        let count = 0;
+        if (this.canFilterByText())
+            count++;
+        if (this.canFilterByText2())
+            count++;
+        if (this.canFilterByText3())
+            count++;
+        if (this.canFilterByFlt1())
+            count++;
+        if (this.canFilterByFlt2())
+            count++;
+        if (this.canFilterByFlt3())
+            count++;
+        if (this.canFilterByFlt4())
+            count++;
+        if (this.canFilterByFlt5())
+            count++;
+        return count > 1;
+    }
+    /**
+     * Returns the filter group matching the given id, or `undefined` if not found.
+     * @param id - The group id to look up.
+     * @returns The matching `FilterGroup`, or `undefined`.
+     */
+    getFilterGroup(id) {
+        return this.filters()?.find(n => n.group === id);
+    }
+    /** Synchronises the filter bar display with the values currently stored in `currentFilter`. */
+    syncFilter() {
+        let g = this.getFilterGroup(Filters.FLT_1);
+        if (g?.items) {
+            this.currentFilter.flt1Name = undefined;
+            if (this.currentFilter.flt1) {
+                const gi = g.items.find(n => n.value === this.currentFilter.flt1);
+                if (gi)
+                    this.currentFilter.flt1Name = gi.titleSelected;
+                else
+                    this.currentFilter.flt1 = undefined;
+            }
+        }
+        g = this.getFilterGroup(Filters.FLT_2);
+        if (g?.items) {
+            this.currentFilter.flt2Name = undefined;
+            if (this.currentFilter.flt2) {
+                const gi = g.items.find(n => n.value === this.currentFilter.flt2);
+                if (gi)
+                    this.currentFilter.flt2Name = gi.titleSelected;
+                else
+                    this.currentFilter.flt2 = undefined;
+            }
+        }
+        g = this.getFilterGroup(Filters.FLT_3);
+        if (g?.items) {
+            this.currentFilter.flt3Name = undefined;
+            if (this.currentFilter.flt3) {
+                const gi = g.items.find(n => n.value === this.currentFilter.flt3);
+                if (gi)
+                    this.currentFilter.flt3Name = gi.titleSelected;
+                else
+                    this.currentFilter.flt3 = undefined;
+            }
+        }
+        g = this.getFilterGroup(Filters.FLT_4);
+        if (g?.items) {
+            this.currentFilter.flt4Name = undefined;
+            if (this.currentFilter.flt4) {
+                const gi = g.items.find(n => n.value === this.currentFilter.flt4);
+                if (gi)
+                    this.currentFilter.flt4Name = gi.titleSelected;
+                else
+                    this.currentFilter.flt4 = undefined;
+            }
+        }
+        g = this.getFilterGroup(Filters.FLT_5);
+        if (g?.items) {
+            this.currentFilter.flt5Name = undefined;
+            if (this.currentFilter.flt5) {
+                const gi = g.items.find(n => n.value === this.currentFilter.flt5);
+                if (gi)
+                    this.currentFilter.flt5Name = gi.titleSelected;
+                else
+                    this.currentFilter.flt5 = undefined;
+            }
+        }
+        this.text.set(this.currentFilter.text);
+        this.text2.set(this.currentFilter.text2);
+        this.text3.set(this.currentFilter.text3);
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: FilterBarComponent, isStandalone: true, selector: "filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText: { classPropertyName: "canFilterByText", publicName: "canFilterByText", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText2: { classPropertyName: "canFilterByText2", publicName: "canFilterByText2", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText3: { classPropertyName: "canFilterByText3", publicName: "canFilterByText3", isSignal: true, isRequired: false, transformFunction: null }, initialText: { classPropertyName: "initialText", publicName: "initialText", isSignal: true, isRequired: false, transformFunction: null }, initialText2: { classPropertyName: "initialText2", publicName: "initialText2", isSignal: true, isRequired: false, transformFunction: null }, initialText3: { classPropertyName: "initialText3", publicName: "initialText3", isSignal: true, isRequired: false, transformFunction: null }, textName: { classPropertyName: "textName", publicName: "textName", isSignal: true, isRequired: false, transformFunction: null }, text2Name: { classPropertyName: "text2Name", publicName: "text2Name", isSignal: true, isRequired: false, transformFunction: null }, text3Name: { classPropertyName: "text3Name", publicName: "text3Name", isSignal: true, isRequired: false, transformFunction: null }, textLength: { classPropertyName: "textLength", publicName: "textLength", isSignal: true, isRequired: false, transformFunction: null }, text2Length: { classPropertyName: "text2Length", publicName: "text2Length", isSignal: true, isRequired: false, transformFunction: null }, text3Length: { classPropertyName: "text3Length", publicName: "text3Length", isSignal: true, isRequired: false, transformFunction: null }, showTextSearchButton: { classPropertyName: "showTextSearchButton", publicName: "showTextSearchButton", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n        @if (canFilterByText()) {\r\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{textName()}}...</mat-label>\r\n          <input matInput name=\"_text\" [ngModel]=\"text()\" (ngModelChange)=\"text.set($event)\" maxlength=\"100\" #_text=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n          @if (showTextSearchButton()) {\r\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n            matTooltip=\"Trova\">\r\n            <mat-icon>search</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText2()) {\r\n        <mat-form-field \r\n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n          <input matInput name=\"_text2\" [ngModel]=\"text2()\" (ngModelChange)=\"text2.set($event)\" maxlength=\"100\" #_text2=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text2()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text2.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText3()) {\r\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n          <input matInput name=\"_text3\" [ngModel]=\"text3()\" (ngModelChange)=\"text3.set($event)\" maxlength=\"100\" #_text3=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text3()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text3.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    <div fxFlex.lt-sm=\"100\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n        @if (canFilterByFlt1() && flt1()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \r\n            (click)=\"applyFilterAction(1, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span>{{flt1()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt1) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt1() && flt1()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span>{{flt1()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n            @for (f of flt1()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt2() && flt2()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \r\n            (click)=\"applyFilterAction(2, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span>{{flt2()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt2() && flt2()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span>{{flt2()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n            @for (f of flt2()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt3() && flt3()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \r\n            (click)=\"applyFilterAction(3, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span>{{flt3()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt3() && flt3()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span>{{flt3()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n            @for (f of flt3()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt4() && flt4()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \r\n            (click)=\"applyFilterAction(4, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span>{{flt4()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt4) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt4() && flt4()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span>{{flt4()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n            @for (f of flt4()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt5() && flt5()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \r\n            (click)=\"applyFilterAction(5, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span>{{flt5()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt5() && flt5()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span>{{flt5()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n            @for (f of flt5()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if (currentFilter.filtered() && canClearAllFilters()) {\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n      (click)=\"clearAllFilters()\">\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.filterbox-button{max-width:200px;white-space:normal;text-align:center;display:-webkit-box;display:inline-block;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}.filterbox-selected{font-weight:800!important}.filterbox-filtered{border-radius:12px;background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}@media(prefers-color-scheme:dark){.filterbox-filtered{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.FxFlexAlignDirective, selector: "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FilterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "filter-bar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatFormFieldModule, MatInputModule, FormsModule,
+                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n        @if (canFilterByText()) {\r\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{textName()}}...</mat-label>\r\n          <input matInput name=\"_text\" [ngModel]=\"text()\" (ngModelChange)=\"text.set($event)\" maxlength=\"100\" #_text=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n          @if (showTextSearchButton()) {\r\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n            matTooltip=\"Trova\">\r\n            <mat-icon>search</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText2()) {\r\n        <mat-form-field \r\n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n          <input matInput name=\"_text2\" [ngModel]=\"text2()\" (ngModelChange)=\"text2.set($event)\" maxlength=\"100\" #_text2=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text2()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text2.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText3()) {\r\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n          <input matInput name=\"_text3\" [ngModel]=\"text3()\" (ngModelChange)=\"text3.set($event)\" maxlength=\"100\" #_text3=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text3()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text3.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    <div fxFlex.lt-sm=\"100\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n        @if (canFilterByFlt1() && flt1()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \r\n            (click)=\"applyFilterAction(1, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span>{{flt1()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt1) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt1() && flt1()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span>{{flt1()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n            @for (f of flt1()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt2() && flt2()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \r\n            (click)=\"applyFilterAction(2, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span>{{flt2()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt2() && flt2()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span>{{flt2()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n            @for (f of flt2()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt3() && flt3()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \r\n            (click)=\"applyFilterAction(3, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span>{{flt3()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt3() && flt3()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span>{{flt3()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n            @for (f of flt3()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt4() && flt4()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \r\n            (click)=\"applyFilterAction(4, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span>{{flt4()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt4) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt4() && flt4()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span>{{flt4()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n            @for (f of flt4()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt5() && flt5()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \r\n            (click)=\"applyFilterAction(5, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span>{{flt5()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt5() && flt5()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span>{{flt5()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n            @for (f of flt5()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if (currentFilter.filtered() && canClearAllFilters()) {\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n      (click)=\"clearAllFilters()\">\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.filterbox-button{max-width:200px;white-space:normal;text-align:center;display:-webkit-box;display:inline-block;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}.filterbox-selected{font-weight:800!important}.filterbox-filtered{border-radius:12px;background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}@media(prefers-color-scheme:dark){.filterbox-filtered{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], canFilterByText: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText", required: false }] }], canFilterByText2: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText2", required: false }] }], canFilterByText3: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText3", required: false }] }], initialText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText", required: false }] }], initialText2: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText2", required: false }] }], initialText3: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText3", required: false }] }], textName: [{ type: i0.Input, args: [{ isSignal: true, alias: "textName", required: false }] }], text2Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2Name", required: false }] }], text3Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3Name", required: false }] }], textLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "textLength", required: false }] }], text2Length: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2Length", required: false }] }], text3Length: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3Length", required: false }] }], showTextSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTextSearchButton", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
+
+/*
+ * Public API Surface of @arsedizioni/ars-utils/ui.filters
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CurrentFilter, CurrentFilterChanged, CurrentFilterItem, FilterBarComponent, Filters };
+//# sourceMappingURL=arsedizioni-ars-utils-ui.filters.mjs.map