@arsedizioni/ars-utils 22.6.85 → 22.6.88

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

@@ -1,433 +1,904 @@
-import * as i0 from '@angular/core';
-import { output, input, signal, computed, inject, ChangeDetectorRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { form, maxLength, FormField } from '@angular/forms/signals';
-import * as i5 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i8 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 i6 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 i7 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i4 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. */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, effect, inject, input, output, signal } from "@angular/core";
+import { FormField, form, maxLength } from "@angular/forms/signals";
+import * as i5 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i8 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 i6 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 i7 from "@angular/material/menu";
+import { MatMenuModule } from "@angular/material/menu";
+import * as i4 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";
 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
+	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 */ []));
-        /**
-         * Text filter values. Empty is represented as '' (never undefined) because the
-         * signals back the [formField] bindings; it is normalized to undefined when
-         * committed to the CurrentFilter.
-         */
-        this.text = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        this.text2 = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "text2" }] : /* istanbul ignore next */ []));
-        this.text3 = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "text3" }] : /* istanbul ignore next */ []));
-        /** Signal forms for the three text inputs (max 100 characters each). */
-        this.textForm = form(this.text, p => maxLength(p, 100));
-        this.text2Form = form(this.text2, p => maxLength(p, 100));
-        this.text3Form = form(this.text3, p => maxLength(p, 100));
-        /** 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() || undefined;
-        this.currentFilter.text2 = this.text2() || undefined;
-        this.currentFilter.text3 = this.text3() || undefined;
-        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('');
-        this.text2.set('');
-        this.text3.set('');
-        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.7", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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\"\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\n        @if (canFilterByText()) {\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{textName()}}...</mat-label>\n          <input matInput [formField]=\"textForm\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n          @if (showTextSearchButton()) {\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\n            matTooltip=\"Trova\">\n            <mat-icon>search</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText2()) {\n        <mat-form-field \n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\n          <input matInput [formField]=\"text2Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text2()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text2.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText3()) {\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\n          <input matInput [formField]=\"text3Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text3()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text3.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n      </div>\n    </div>\n    }\n    <div fxFlex.lt-sm=\"100\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\n        @if (canFilterByFlt1() && flt1()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \n            (click)=\"applyFilterAction(1, false)\">\n            &nbsp;\n            @if (!currentFilter.flt1) {\n            <span>{{flt1()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt1) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt1() && flt1()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt1) {\n          <span>{{flt1()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\n            @for (f of flt1()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt2() && flt2()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \n            (click)=\"applyFilterAction(2, false)\">\n            &nbsp;\n            @if (!currentFilter.flt2) {\n            <span>{{flt2()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt2) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt2() && flt2()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt2) {\n          <span>{{flt2()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\n            @for (f of flt2()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt3() && flt3()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \n            (click)=\"applyFilterAction(3, false)\">\n            &nbsp;\n            @if (!currentFilter.flt3) {\n            <span>{{flt3()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt3) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt3() && flt3()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt3) {\n          <span>{{flt3()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\n            @for (f of flt3()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt4() && flt4()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \n            (click)=\"applyFilterAction(4, false)\">\n            &nbsp;\n            @if (!currentFilter.flt4) {\n            <span>{{flt4()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt4) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt4() && flt4()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt4) {\n          <span>{{flt4()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\n            @for (f of flt4()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt5() && flt5()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \n            (click)=\"applyFilterAction(5, false)\">\n            &nbsp;\n            @if (!currentFilter.flt5) {\n            <span>{{flt5()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt5) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt5() && flt5()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt5) {\n          <span>{{flt5()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\n            @for (f of flt5()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  <div>\n    @if (currentFilter.filtered() && canClearAllFilters()) {\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\n      (click)=\"clearAllFilters()\">\n      <mat-icon>filter_alt_off</mat-icon>\n    </button>\n    }\n  </div>\n</div>\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: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.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: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.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: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i8.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.7", ngImport: i0, type: FilterBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "filter-bar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatFormFieldModule, MatInputModule, FormField,
-                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\n        @if (canFilterByText()) {\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{textName()}}...</mat-label>\n          <input matInput [formField]=\"textForm\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n          @if (showTextSearchButton()) {\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\n            matTooltip=\"Trova\">\n            <mat-icon>search</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText2()) {\n        <mat-form-field \n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\n          <input matInput [formField]=\"text2Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text2()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text2.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText3()) {\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\n          <input matInput [formField]=\"text3Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text3()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text3.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n      </div>\n    </div>\n    }\n    <div fxFlex.lt-sm=\"100\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\n        @if (canFilterByFlt1() && flt1()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \n            (click)=\"applyFilterAction(1, false)\">\n            &nbsp;\n            @if (!currentFilter.flt1) {\n            <span>{{flt1()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt1) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt1() && flt1()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt1) {\n          <span>{{flt1()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\n            @for (f of flt1()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt2() && flt2()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \n            (click)=\"applyFilterAction(2, false)\">\n            &nbsp;\n            @if (!currentFilter.flt2) {\n            <span>{{flt2()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt2) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt2() && flt2()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt2) {\n          <span>{{flt2()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\n            @for (f of flt2()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt3() && flt3()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \n            (click)=\"applyFilterAction(3, false)\">\n            &nbsp;\n            @if (!currentFilter.flt3) {\n            <span>{{flt3()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt3) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt3() && flt3()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt3) {\n          <span>{{flt3()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\n            @for (f of flt3()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt4() && flt4()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \n            (click)=\"applyFilterAction(4, false)\">\n            &nbsp;\n            @if (!currentFilter.flt4) {\n            <span>{{flt4()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt4) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt4() && flt4()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt4) {\n          <span>{{flt4()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\n            @for (f of flt4()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt5() && flt5()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \n            (click)=\"applyFilterAction(5, false)\">\n            &nbsp;\n            @if (!currentFilter.flt5) {\n            <span>{{flt5()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt5) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt5() && flt5()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt5) {\n          <span>{{flt5()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\n            @for (f of flt5()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  <div>\n    @if (currentFilter.filtered() && canClearAllFilters()) {\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\n      (click)=\"clearAllFilters()\">\n      <mat-icon>filter_alt_off</mat-icon>\n    </button>\n    }\n  </div>\n</div>\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.
- */
-
+var CurrentFilterChanged = class {};
+var CurrentFilter = class {
+	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;
+	}
+};
+var CurrentFilterItem = class {
+	constructor() {
+		this.enabled = true;
+	}
+	clear() {
+		this.value = void 0;
+		this.selectedTitle = void 0;
+	}
+};
+var FilterBarComponent = class FilterBarComponent {
+	constructor() {
+		this.changed = output();
+		this.filters = input(...ngDevMode ? [void 0, { debugName: "filters" }] : /* istanbul ignore next */ []);
+		this.canFilterByText = input(false, ...ngDevMode ? [{ debugName: "canFilterByText" }] : /* istanbul ignore next */ []);
+		this.canFilterByText2 = input(false, ...ngDevMode ? [{ debugName: "canFilterByText2" }] : /* istanbul ignore next */ []);
+		this.canFilterByText3 = input(false, ...ngDevMode ? [{ debugName: "canFilterByText3" }] : /* istanbul ignore next */ []);
+		this.initialText = input(void 0, ...ngDevMode ? [{ debugName: "initialText" }] : /* istanbul ignore next */ []);
+		this.initialText2 = input(void 0, ...ngDevMode ? [{ debugName: "initialText2" }] : /* istanbul ignore next */ []);
+		this.initialText3 = input(void 0, ...ngDevMode ? [{ debugName: "initialText3" }] : /* istanbul ignore next */ []);
+		this.textName = input("testo", ...ngDevMode ? [{ debugName: "textName" }] : /* istanbul ignore next */ []);
+		this.text2Name = input("...", ...ngDevMode ? [{ debugName: "text2Name" }] : /* istanbul ignore next */ []);
+		this.text3Name = input("...", ...ngDevMode ? [{ debugName: "text3Name" }] : /* istanbul ignore next */ []);
+		this.textLength = input(...ngDevMode ? [void 0, { debugName: "textLength" }] : /* istanbul ignore next */ []);
+		this.text2Length = input(...ngDevMode ? [void 0, { debugName: "text2Length" }] : /* istanbul ignore next */ []);
+		this.text3Length = input(...ngDevMode ? [void 0, { debugName: "text3Length" }] : /* istanbul ignore next */ []);
+		this.showTextSearchButton = input(false, ...ngDevMode ? [{ debugName: "showTextSearchButton" }] : /* istanbul ignore next */ []);
+		this.appearance = input("outline", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.text = signal("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+		this.text2 = signal("", ...ngDevMode ? [{ debugName: "text2" }] : /* istanbul ignore next */ []);
+		this.text3 = signal("", ...ngDevMode ? [{ debugName: "text3" }] : /* istanbul ignore next */ []);
+		this.textForm = form(this.text, (p) => maxLength(p, 100));
+		this.text2Form = form(this.text2, (p) => maxLength(p, 100));
+		this.text3Form = form(this.text3, (p) => maxLength(p, 100));
+		this.flt1 = computed(() => this.filters()?.find((n) => n.group === Filters.FLT_1), ...ngDevMode ? [{ debugName: "flt1" }] : /* istanbul ignore next */ []);
+		this.flt2 = computed(() => this.filters()?.find((n) => n.group === Filters.FLT_2), ...ngDevMode ? [{ debugName: "flt2" }] : /* istanbul ignore next */ []);
+		this.flt3 = computed(() => this.filters()?.find((n) => n.group === Filters.FLT_3), ...ngDevMode ? [{ debugName: "flt3" }] : /* istanbul ignore next */ []);
+		this.flt4 = computed(() => this.filters()?.find((n) => n.group === Filters.FLT_4), ...ngDevMode ? [{ debugName: "flt4" }] : /* istanbul ignore next */ []);
+		this.flt5 = computed(() => this.filters()?.find((n) => n.group === Filters.FLT_5), ...ngDevMode ? [{ debugName: "flt5" }] : /* istanbul ignore next */ []);
+		this.canFilterByFlt1 = computed(() => {
+			const g = this.flt1();
+			return !!(g?.action || g?.items && g.items.length > 0);
+		}, ...ngDevMode ? [{ debugName: "canFilterByFlt1" }] : /* istanbul ignore next */ []);
+		this.canFilterByFlt2 = computed(() => {
+			const g = this.flt2();
+			return !!(g?.action || g?.items && g.items.length > 0);
+		}, ...ngDevMode ? [{ debugName: "canFilterByFlt2" }] : /* istanbul ignore next */ []);
+		this.canFilterByFlt3 = computed(() => {
+			const g = this.flt3();
+			return !!(g?.action || g?.items && g.items.length > 0);
+		}, ...ngDevMode ? [{ debugName: "canFilterByFlt3" }] : /* istanbul ignore next */ []);
+		this.canFilterByFlt4 = computed(() => {
+			const g = this.flt4();
+			return !!(g?.action || g?.items && g.items.length > 0);
+		}, ...ngDevMode ? [{ debugName: "canFilterByFlt4" }] : /* istanbul ignore next */ []);
+		this.canFilterByFlt5 = computed(() => {
+			const g = this.flt5();
+			return !!(g?.action || g?.items && g.items.length > 0);
+		}, ...ngDevMode ? [{ debugName: "canFilterByFlt5" }] : /* istanbul ignore next */ []);
+		this.currentFilter = new CurrentFilter();
+		this.cdr = inject(ChangeDetectorRef);
+		effect(() => {
+			this.text.set(this.initialText() ?? "");
+			this.text2.set(this.initialText2() ?? "");
+			this.text3.set(this.initialText3() ?? "");
+		});
+	}
+	initializeFilters() {}
+	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;
+				}
+		}
+		if (changed) {
+			this.cdr.markForCheck();
+			this.changed.emit({
+				filter: this.currentFilter,
+				group: filter.group
+			});
+		}
+	}
+	applyFilterAction(group, clear = false) {
+		if (!clear) {
+			const g = this.getFilterGroup(group);
+			if (g?.action) g.action(this, g);
+		} else this.clearFilter(group);
+	}
+	applyTextFilter() {
+		this.currentFilter.text = this.text() || void 0;
+		this.currentFilter.text2 = this.text2() || void 0;
+		this.currentFilter.text3 = this.text3() || void 0;
+		this.changed.emit({
+			filter: this.currentFilter,
+			group: Filters.FLT_TEXT
+		});
+	}
+	clearFilter(group) {
+		let changed = false;
+		switch (group) {
+			case Filters.FLT_1:
+				changed = this.currentFilter.flt1 != void 0;
+				if (changed) {
+					this.currentFilter.flt1 = void 0;
+					this.currentFilter.flt1Name = void 0;
+				}
+				break;
+			case Filters.FLT_2:
+				changed = this.currentFilter.flt2 != void 0;
+				if (changed) {
+					this.currentFilter.flt2 = void 0;
+					this.currentFilter.flt2Name = void 0;
+				}
+				break;
+			case Filters.FLT_3:
+				changed = this.currentFilter.flt3 != void 0;
+				if (changed) {
+					this.currentFilter.flt3 = void 0;
+					this.currentFilter.flt3Name = void 0;
+				}
+				break;
+			case Filters.FLT_4:
+				changed = this.currentFilter.flt4 != void 0;
+				if (changed) {
+					this.currentFilter.flt4 = void 0;
+					this.currentFilter.flt4Name = void 0;
+				}
+				break;
+			case Filters.FLT_5:
+				changed = this.currentFilter.flt5 != void 0;
+				if (changed) {
+					this.currentFilter.flt5 = void 0;
+					this.currentFilter.flt5Name = void 0;
+				}
+		}
+		if (changed) {
+			this.cdr.markForCheck();
+			this.changed.emit({
+				filter: this.currentFilter,
+				group
+			});
+		}
+	}
+	clearAllFilters() {
+		this.currentFilter.flt1 = void 0;
+		this.currentFilter.flt1Name = void 0;
+		this.currentFilter.flt2 = void 0;
+		this.currentFilter.flt2Name = void 0;
+		this.currentFilter.flt3 = void 0;
+		this.currentFilter.flt3Name = void 0;
+		this.currentFilter.flt4 = void 0;
+		this.currentFilter.flt4Name = void 0;
+		this.currentFilter.flt5 = void 0;
+		this.currentFilter.flt5Name = void 0;
+		this.currentFilter.text = void 0;
+		this.currentFilter.text2 = void 0;
+		this.currentFilter.text3 = void 0;
+		this.text.set("");
+		this.text2.set("");
+		this.text3.set("");
+		this.cdr.markForCheck();
+		this.changed.emit({
+			filter: this.currentFilter,
+			group: -1
+		});
+	}
+	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;
+	}
+	getFilterGroup(id) {
+		return this.filters()?.find((n) => n.group === id);
+	}
+	syncFilter() {
+		let g = this.getFilterGroup(Filters.FLT_1);
+		if (g?.items) {
+			this.currentFilter.flt1Name = void 0;
+			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 = void 0;
+			}
+		}
+		g = this.getFilterGroup(Filters.FLT_2);
+		if (g?.items) {
+			this.currentFilter.flt2Name = void 0;
+			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 = void 0;
+			}
+		}
+		g = this.getFilterGroup(Filters.FLT_3);
+		if (g?.items) {
+			this.currentFilter.flt3Name = void 0;
+			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 = void 0;
+			}
+		}
+		g = this.getFilterGroup(Filters.FLT_4);
+		if (g?.items) {
+			this.currentFilter.flt4Name = void 0;
+			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 = void 0;
+			}
+		}
+		g = this.getFilterGroup(Filters.FLT_5);
+		if (g?.items) {
+			this.currentFilter.flt5Name = void 0;
+			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 = void 0;
+			}
+		}
+		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.2.1",
+			ngImport: i0,
+			type: FilterBarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			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\"\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\n        @if (canFilterByText()) {\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{textName()}}...</mat-label>\n          <input matInput [formField]=\"textForm\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n          @if (showTextSearchButton()) {\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\n            matTooltip=\"Trova\">\n            <mat-icon>search</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText2()) {\n        <mat-form-field \n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\n          <input matInput [formField]=\"text2Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text2()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text2.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText3()) {\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\n          <input matInput [formField]=\"text3Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text3()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text3.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n      </div>\n    </div>\n    }\n    <div fxFlex.lt-sm=\"100\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\n        @if (canFilterByFlt1() && flt1()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \n            (click)=\"applyFilterAction(1, false)\">\n            &nbsp;\n            @if (!currentFilter.flt1) {\n            <span>{{flt1()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt1) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt1() && flt1()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt1) {\n          <span>{{flt1()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\n            @for (f of flt1()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt2() && flt2()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \n            (click)=\"applyFilterAction(2, false)\">\n            &nbsp;\n            @if (!currentFilter.flt2) {\n            <span>{{flt2()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt2) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt2() && flt2()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt2) {\n          <span>{{flt2()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\n            @for (f of flt2()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt3() && flt3()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \n            (click)=\"applyFilterAction(3, false)\">\n            &nbsp;\n            @if (!currentFilter.flt3) {\n            <span>{{flt3()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt3) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt3() && flt3()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt3) {\n          <span>{{flt3()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\n            @for (f of flt3()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt4() && flt4()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \n            (click)=\"applyFilterAction(4, false)\">\n            &nbsp;\n            @if (!currentFilter.flt4) {\n            <span>{{flt4()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt4) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt4() && flt4()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt4) {\n          <span>{{flt4()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\n            @for (f of flt4()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt5() && flt5()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \n            (click)=\"applyFilterAction(5, false)\">\n            &nbsp;\n            @if (!currentFilter.flt5) {\n            <span>{{flt5()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt5) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt5() && flt5()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt5) {\n          <span>{{flt5()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\n            @for (f of flt5()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  <div>\n    @if (currentFilter.filtered() && canClearAllFilters()) {\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\n      (click)=\"clearAllFilters()\">\n      <mat-icon>filter_alt_off</mat-icon>\n    </button>\n    }\n  </div>\n</div>\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: "directive",
+					type: FormField,
+					selector: "[formField]",
+					inputs: ["formField"],
+					exportAs: ["formField"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatTooltipModule
+				},
+				{
+					kind: "directive",
+					type: i4.MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatButtonModule
+				},
+				{
+					kind: "component",
+					type: i5.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: i5.MatIconButton,
+					selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatIconModule
+				},
+				{
+					kind: "component",
+					type: i6.MatIcon,
+					selector: "mat-icon",
+					inputs: [
+						"color",
+						"inline",
+						"svgIcon",
+						"fontSet",
+						"fontIcon"
+					],
+					exportAs: ["matIcon"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatMenuModule
+				},
+				{
+					kind: "component",
+					type: i7.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: i7.MatMenuItem,
+					selector: "[mat-menu-item]",
+					inputs: [
+						"role",
+						"disabled",
+						"disabledInteractive",
+						"disableRipple"
+					],
+					exportAs: ["matMenuItem"]
+				},
+				{
+					kind: "directive",
+					type: i7.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: i8.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.2.1",
+	ngImport: i0,
+	type: FilterBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "filter-bar",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FlexLayoutModule,
+				MatFormFieldModule,
+				MatInputModule,
+				FormField,
+				MatTooltipModule,
+				MatButtonModule,
+				MatIconModule,
+				MatMenuModule,
+				MatDividerModule,
+				SafeHtmlPipe
+			],
+			template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\n        @if (canFilterByText()) {\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{textName()}}...</mat-label>\n          <input matInput [formField]=\"textForm\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n          @if (showTextSearchButton()) {\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\n            matTooltip=\"Trova\">\n            <mat-icon>search</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText2()) {\n        <mat-form-field \n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\n          <input matInput [formField]=\"text2Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text2()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text2.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n        @if (canFilterByText3()) {\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\n          subscriptSizing=\"dynamic\">\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\n          <input matInput [formField]=\"text3Form\"\n            (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n          @if (text3()) {\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n            (click)=\"text3.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n            <mat-icon>close</mat-icon>\n          </button>\n          }\n        </mat-form-field>\n        }\n      </div>\n    </div>\n    }\n    <div fxFlex.lt-sm=\"100\">\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\n        @if (canFilterByFlt1() && flt1()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \n            (click)=\"applyFilterAction(1, false)\">\n            &nbsp;\n            @if (!currentFilter.flt1) {\n            <span>{{flt1()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt1) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt1() && flt1()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt1) {\n          <span>{{flt1()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\n            @for (f of flt1()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt2() && flt2()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \n            (click)=\"applyFilterAction(2, false)\">\n            &nbsp;\n            @if (!currentFilter.flt2) {\n            <span>{{flt2()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt2) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt2() && flt2()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt2) {\n          <span>{{flt2()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\n            @for (f of flt2()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt3() && flt3()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \n            (click)=\"applyFilterAction(3, false)\">\n            &nbsp;\n            @if (!currentFilter.flt3) {\n            <span>{{flt3()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt3) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt3() && flt3()?.items) {\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt3) {\n          <span>{{flt3()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\n            @for (f of flt3()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt4() && flt4()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \n            (click)=\"applyFilterAction(4, false)\">\n            &nbsp;\n            @if (!currentFilter.flt4) {\n            <span>{{flt4()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt4) {\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt4() && flt4()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt4) {\n          <span>{{flt4()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\n            @for (f of flt4()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n\n        @if (canFilterByFlt5() && flt5()?.action) {\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \n            (click)=\"applyFilterAction(5, false)\">\n            &nbsp;\n            @if (!currentFilter.flt5) {\n            <span>{{flt5()!.title}}</span>\n            } @else {\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n            }\n          </button>\n          @if (currentFilter.flt5) {\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n          }\n        </div>\n        } @else if (canFilterByFlt5() && flt5()?.items) {\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\n          >\n          &nbsp;\n          @if (!currentFilter.flt5) {\n          <span>{{flt5()!.title}}</span>\n          } @else {\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n          }\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\n            @for (f of flt5()!.items; track $index) {\n            @if (f.divider) {\n            <mat-divider></mat-divider>\n            }\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\n            </button>\n            }\n            <mat-divider></mat-divider>\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\n                  aria-label=\"Azzera\">\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n                </button>\n              </div>\n            </div>\n          </mat-menu>\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  <div>\n    @if (currentFilter.filtered() && canClearAllFilters()) {\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\n      (click)=\"clearAllFilters()\">\n      <mat-icon>filter_alt_off</mat-icon>\n    </button>\n    }\n  </div>\n</div>\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
+			}]
+		}]
+	}
+});
 export { CurrentFilter, CurrentFilterChanged, CurrentFilterItem, FilterBarComponent, Filters };
-//# sourceMappingURL=arsedizioni-ars-utils-ui.filters.mjs.map
+
+//# sourceMappingURL=arsedizioni-ars-utils-ui.filters.mjs.map