@arsedizioni/ars-utils 21.2.296 → 21.2.298

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, NgModule, HostBinding, Input, Optional, Self, computed, ViewChild, effect } from '@angular/core';
+import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, NgModule, effect, Input, Optional, Self, computed, booleanAttribute, model } from '@angular/core';
 import * as i14 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
 import { DialogService, OtpInputComponent, PaginatorIntl, UIService } from '@arsedizioni/ars-utils/ui';
@@ -1665,6 +1665,7 @@ class ButtonSelectorComponent {
         this.changed.emit(this._value);
         this.current.set(this._value);
     }
+    /** The current value as the selected item. */
     get value() {
         return this._value;
     }
@@ -1715,14 +1716,15 @@ class ButtonSelectorComponent {
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
-    }
-    ngOnInit() {
-        if (this.autoSelect()) {
-            const options = this.options();
-            if (options && options.length > 0 && options[0].value) {
-                this.current.set(options[0]);
+        // Pre-select the first option whenever options change and autoSelect is enabled
+        effect(() => {
+            if (this.autoSelect()) {
+                const options = this.options();
+                if (options.length > 0 && options[0].value) {
+                    this.current.set(options[0]);
+                }
             }
-        }
+        });
     }
     ngOnDestroy() {
         this.stateChanges.complete();
@@ -1748,10 +1750,23 @@ class ButtonSelectorComponent {
     registerOnTouched(fn) {
         this.propagateTouched = fn;
     }
+    /**
+     * Sets the ARIA described-by IDs for accessibility.
+     * @param ids - The list of element IDs to associate with this control.
+     */
     setDescribedByIds(ids) {
         this.describedBy = ids.join(' ');
     }
+    /**
+     * Updates the disabled state when the Angular form layer changes it.
+     * @param isDisabled - Whether the control should be disabled.
+     */
     setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        if (isDisabled && this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
         if (!SystemUtils.isBrowser())
             return;
         const elem = document.getElementById(this.id);
@@ -1759,6 +1774,9 @@ class ButtonSelectorComponent {
             this.renderer.setProperty(elem, 'disabled', isDisabled);
         }
     }
+    /**
+     * Handles a click on the container element, focusing it and marking it as touched.
+     */
     onContainerClick() {
         if (!this.focused) {
             if (!SystemUtils.isBrowser())
@@ -1786,31 +1804,27 @@ class ButtonSelectorComponent {
         this.writeValue(undefined);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ButtonSelectorComponent, isStandalone: true, selector: "button-selector", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelSelected: { classPropertyName: "labelSelected", publicName: "labelSelected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", selected: "selected" }, host: { properties: { "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, ngImport: i0, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track o) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, 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$1.DefaultLayoutGapDirective, 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$1.DefaultLayoutAlignDirective, 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$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, 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$1.DefaultFlexDirective, 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: i2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ButtonSelectorComponent, isStandalone: true, selector: "button-selector", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelSelected: { classPropertyName: "labelSelected", publicName: "labelSelected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", selected: "selected" }, host: { properties: { "id": "id", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track o) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, 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$1.DefaultLayoutGapDirective, 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$1.DefaultLayoutAlignDirective, 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$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, 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$1.DefaultFlexDirective, 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: i2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button-selector', standalone: true, imports: [FlexLayoutModule, MatIconModule, MatButtonModule,
-                        MatMenuModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track o) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"] }]
+                        MatMenuModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[id]': 'id',
+                        '[attr.aria-describedBy]': 'describedBy',
+                    }, template: "<button mat-stroked-button class=\"menu-selector-button\" [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.border-radius]=\"borderRadius()\" [style.height]=\"border() <= 0 ? '40px' : 'auto'\"\r\n    [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\" [attr.aria-label]=\"label()\"\r\n    [matMenuTriggerFor]=\"optionsMenu\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n        <div fxFlex=\"100\" fxFlexAlign=\"center\">\r\n            @if(current()) {\r\n            <div style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                @if(labelSelected() || label()) {\r\n                <div class=\"x-small \">{{labelSelected() ?? label()}}</div>\r\n                <div fxHide.xs class=\"small truncated-1\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated-1\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                } @else {\r\n                <div fxHide.xs class=\"small truncated\">{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                <div fxHide.gt-xs class=\"x-small truncated\" style=\"max-width: 120px;\">\r\n                    <div>{{current()?.shortName ?? current()?.name ?? ''}}</div>\r\n                </div>\r\n                }\r\n            </div>\r\n            } @else if(labelSelected() || label()) {\r\n            <div class=\"truncated\" style=\"text-align: left;\"\r\n                [style.min-width]=\"width() > 0 ? width()+'px' : (width() === -1 ? '100%' : 'auto')\">\r\n                {{labelSelected() ?? label()}}</div>\r\n            }\r\n        </div>\r\n        <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n            <mat-icon>arrow_drop_down</mat-icon>\r\n        </div>\r\n    </div>\r\n</button>\r\n<mat-menu #optionsMenu=\"matMenu\">\r\n    @for (o of options(); track o) {\r\n    <button mat-menu-item (click)=\"select(o)\" [disabled]=\"o.disabled\">\r\n        {{o.name}}\r\n        @if(o.bag) {\r\n        ({{o.bag}})\r\n        }\r\n    </button>\r\n    }\r\n</mat-menu>", styles: [".menu-selector-button{padding:0 10px 0 20px!important;border-radius:9999px!important}.menu-selector-button .in-search-bar{height:56px!important;padding:0 20px!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}::ng-deep .menu-selector-button>.mdc-button__label{width:100%!important}.truncated-1{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 1){.truncated-1{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
                 }] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], selected: [{ type: i0.Output, args: ["selected"] }], disabled: [{
                 type: Input
-            }], id: [{
-                type: HostBinding
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedBy']
             }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSelected", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }] } });
 
 class ButtonToggleComponent {
     constructor() {
         /** Emitted each time the button is clicked. Carries the current `value` and the new `toggled` state. */
         this.changed = output();
-        /** Tracks whether the button has been toggled (opposite of the current `value` input). */
-        this.toggled = signal(false, ...(ngDevMode ? [{ debugName: "toggled" }] : /* istanbul ignore next */ []));
         /** Current value bound from the parent. Drives label and icon selection. */
         this.value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /** Width of the button in pixels. Use `-1` for automatic sizing. */
@@ -1839,8 +1853,8 @@ class ButtonToggleComponent {
      * The emitted `toggled` value is the logical inverse of the current `value`.
      */
     toggle() {
-        this.toggled.set(!this.value());
-        this.changed.emit({ value: this.value(), toggled: this.toggled() });
+        const toggled = !this.value();
+        this.changed.emit({ value: this.value(), toggled });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ButtonToggleComponent, isStandalone: true, selector: "button-toggle", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, cssClassSmall: { classPropertyName: "cssClassSmall", publicName: "cssClassSmall", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<button mat-stroked-button [style.border]=\"border() >= 0 ? border() : 'auto'\"\r\n    [style.height]=\"border() <= 0 ? '40px' : 'auto'\" [style.minWidth.px]=\"width() > 0 ? width() : 'auto'\"\r\n    [style.mxn-width.px]=\"width() > 0 ? width() : 'auto'\" [class]=\"cssClass()\" [attr.aria-label]=\"label()\"\r\n    (click)=\"toggle()\" [class.button-on]=\"value() === true\" [ngClass.xs]=\"cssClassSmall()\">\r\n    <div fxLayout=\"row\" fxLayoutGap=\"8px\" fxLayoutAlign=\"center center\" fxFill>\r\n        @if(icon()) {\r\n        <div fxFlex=\"24px\"><mat-icon style=\"display: block;\">{{icon()}}</mat-icon></div>\r\n        }\r\n        <div [innerHtml]=\"label() | safeHtml\"></div>\r\n    </div>\r\n</button>", styles: [".button-on{background-color:var(--mat-switch-selected-focus-handle-color)!important;border-color:var(--mat-switch-selected-focus-handle-color)!important;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, 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$1.DefaultLayoutGapDirective, 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$1.DefaultLayoutAlignDirective, 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$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexDirective, 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: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1878,6 +1892,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], ctorParameters: () => [] });
 
 class ChipsSelectorComponent {
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled != null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    /** True when the label should float above the field (focused or has a value). */
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
     set value(value) {
         this._value = value;
         this.selection = [];
@@ -1898,44 +1929,17 @@ class ChipsSelectorComponent {
             this.changed.emit(this._value);
         }
     }
+    /** The current value as an array of selected items. */
     get value() {
         return this._value;
     }
+    /** True when no item is selected. */
     get empty() {
-        return !this._value || this._value?.length === 0;
+        return !this._value || this._value.length === 0;
     }
+    /** True when the control has validation errors and has been touched. */
     get errorState() {
-        return this.ngControl.errors != null && this.ngControl.touched;
-    }
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
-    }
-    get disabled() {
-        if (this.ngControl && this.ngControl.disabled != null) {
-            return this.ngControl.disabled;
-        }
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        if (this.focused) {
-            this.focused = false;
-            this.stateChanges.next();
-        }
-    }
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
-    }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
+        return this.ngControl?.errors != null && (this.ngControl?.touched ?? false);
     }
     constructor(ngControl) {
         this.ngControl = ngControl;
@@ -1974,41 +1978,46 @@ class ChipsSelectorComponent {
         this.stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
         /** Chips below this index receive extra padding to align with other UI elements. */
         this.padAt = input(0, ...(ngDevMode ? [{ debugName: "padAt" }] : /* istanbul ignore next */ []));
-        this._value = [];
-        this._required = false;
+        /** When `true`, the control is required. */
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Placeholder text shown when no value is selected. */
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this._disabled = false;
-        this._placeholder = '';
-        this.propagateChange = () => { };
-        this.propagateTouched = () => { };
         this.id = `chips-selector--${SystemUtils.generateUUID()}`;
         this.describedBy = '';
+        this._value = [];
+        this.propagateChange = () => { };
+        this.propagateTouched = () => { };
         this.renderer = inject(Renderer2);
         /** Currently selected items (may contain multiple entries when `multiple` is `true`). */
         this.selection = [];
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
-    }
-    ngOnInit() {
-        // React to window size change
-        fromEvent(window, 'resize')
-            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(250))
-            .subscribe(() => {
-            if (this.collapseAt() > 0) {
-                // Close the options menu if open
+        // Notify state changes whenever required or placeholder inputs change
+        effect(() => {
+            this.required();
+            this.placeholder();
+            this.stateChanges.next();
+        });
+        afterNextRender(() => {
+            // React to window resize to keep the collapsed state up to date
+            fromEvent(window, 'resize')
+                .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(250))
+                .subscribe(() => {
+                if (this.collapseAt() > 0) {
+                    this.updateContainerWidth();
+                }
+            });
+            setTimeout(() => {
                 this.updateContainerWidth();
-            }
+                this.changesEnabled = true;
+            }, 250);
         });
     }
     ngOnDestroy() {
         this.stateChanges.complete();
     }
-    ngAfterContentInit() {
-        setTimeout(() => {
-            this.updateContainerWidth();
-            this.changesEnabled = true;
-        }, 250);
-    }
     /**
      * Measures the container (or window) width and updates the `containerWidth` signal,
      * retrying after 100 ms if the element is not yet laid out.
@@ -2017,8 +2026,8 @@ class ChipsSelectorComponent {
         const elem = document.getElementById(this.containerId);
         if (elem && elem.clientWidth > 0) {
             this.containerWidth.set(this.collapseAtContainer()
-                ? (elem?.clientWidth ?? -1)
-                : (window.innerWidth ?? -1));
+                ? elem.clientWidth
+                : window.innerWidth);
         }
         else {
             setTimeout(() => this.updateContainerWidth(), 100);
@@ -2032,7 +2041,7 @@ class ChipsSelectorComponent {
     getSelection() {
         const value = !this.multiple() && this.collapsed() && this.collapsedDisplayMode() === 'button'
             ? this.singleSelection
-            : this.selection ?? [];
+            : this.selection;
         if (Array.isArray(value)) {
             return value;
         }
@@ -2050,6 +2059,7 @@ class ChipsSelectorComponent {
      * Returns `true` when the given item can be selected in the current mode.
      * In single-select mode an already-selected item is not re-selectable.
      * @param item - The item to check.
+     * @returns True when the item is selectable.
      */
     isSelectable(item) {
         return this.multiple() || this.getSelection().findIndex(x => x.value === item.value) === -1;
@@ -2078,10 +2088,23 @@ class ChipsSelectorComponent {
     registerOnTouched(fn) {
         this.propagateTouched = fn;
     }
+    /**
+     * Sets the ARIA described-by IDs for accessibility.
+     * @param ids - The list of element IDs to associate with this control.
+     */
     setDescribedByIds(ids) {
         this.describedBy = ids.join(' ');
     }
+    /**
+     * Updates the disabled state when the Angular form layer changes it.
+     * @param isDisabled - Whether the control should be disabled.
+     */
     setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        if (isDisabled && this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
         if (!SystemUtils.isBrowser())
             return;
         const elem = document.getElementById(this.id);
@@ -2089,6 +2112,9 @@ class ChipsSelectorComponent {
             this.renderer.setProperty(elem, 'disabled', isDisabled);
         }
     }
+    /**
+     * Handles a click on the container element, focusing it and marking it as touched.
+     */
     onContainerClick() {
         if (!this.focused) {
             if (!SystemUtils.isBrowser())
@@ -2118,36 +2144,27 @@ class ChipsSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.describedBy" } }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"chips-selector\">\r\n    @if(containerWidth() > 0) {\r\n    @if(collapsed()) {\r\n    @if(collapsedDisplayMode() === 'dropdown') {\r\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n        @if(label()) {\r\n        <mat-label>{{label()}}</mat-label>\r\n        }\r\n        <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n            <mat-select-trigger>\r\n                @if (value && (value.length || 0) > 0) {\r\n                {{value[0].shortName ?? value[0].name}}\r\n                }\r\n                @if (value && (value.length || 0) > 1) {\r\n                <span class=\"collapsed-additional-selection\">\r\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n                </span>\r\n                }\r\n            </mat-select-trigger>\r\n            @for (o of options(); track o) {\r\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n                {{o.name}}\r\n                @if(o.bag) {\r\n                &nbsp; ({{o.bag}})\r\n                }\r\n            </mat-option>\r\n            }\r\n        </mat-select>\r\n        @if (value && (value.length || 0) > 0) {\r\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n    </mat-form-field>\r\n    } @else {\r\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n        name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n    }\r\n    } @else {\r\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n        [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n        @for (o of options(); track o; let i = $index) {\r\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n            o.name}}</mat-chip-option>\r\n        }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonSelectorComponent, selector: "button-selector", inputs: ["disabled", "width", "border", "borderRadius", "label", "labelSelected", "options", "autoSelect"], outputs: ["changed", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"chips-selector\">\r\n    @if(containerWidth() > 0) {\r\n    @if(collapsed()) {\r\n    @if(collapsedDisplayMode() === 'dropdown') {\r\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n        @if(label()) {\r\n        <mat-label>{{label()}}</mat-label>\r\n        }\r\n        <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n            <mat-select-trigger>\r\n                @if (value && (value.length || 0) > 0) {\r\n                {{value[0].shortName ?? value[0].name}}\r\n                }\r\n                @if (value && (value.length || 0) > 1) {\r\n                <span class=\"collapsed-additional-selection\">\r\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n                </span>\r\n                }\r\n            </mat-select-trigger>\r\n            @for (o of options(); track o) {\r\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n                {{o.name}}\r\n                @if(o.bag) {\r\n                &nbsp; ({{o.bag}})\r\n                }\r\n            </mat-option>\r\n            }\r\n        </mat-select>\r\n        @if (value && (value.length || 0) > 0) {\r\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n    </mat-form-field>\r\n    } @else {\r\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n        name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n    }\r\n    } @else {\r\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n        [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n        @for (o of options(); track o; let i = $index) {\r\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n            o.name}}</mat-chip-option>\r\n        }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i8$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonSelectorComponent, selector: "button-selector", inputs: ["disabled", "width", "border", "borderRadius", "label", "labelSelected", "options", "autoSelect"], outputs: ["changed", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'chips-selector', standalone: true, imports: [FlexLayoutModule, FormsModule, MatFormFieldModule, MatSelectModule,
                         MatChipsModule, MatIconModule, MatButtonModule, MatBadgeModule, MatTooltipModule,
                         ButtonSelectorComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [id]=\"containerId\" class=\"chips-selector\">\r\n    @if(containerWidth() > 0) {\r\n    @if(collapsed()) {\r\n    @if(collapsedDisplayMode() === 'dropdown') {\r\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n        @if(label()) {\r\n        <mat-label>{{label()}}</mat-label>\r\n        }\r\n        <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n            <mat-select-trigger>\r\n                @if (value && (value.length || 0) > 0) {\r\n                {{value[0].shortName ?? value[0].name}}\r\n                }\r\n                @if (value && (value.length || 0) > 1) {\r\n                <span class=\"collapsed-additional-selection\">\r\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n                </span>\r\n                }\r\n            </mat-select-trigger>\r\n            @for (o of options(); track o) {\r\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n                {{o.name}}\r\n                @if(o.bag) {\r\n                &nbsp; ({{o.bag}})\r\n                }\r\n            </mat-option>\r\n            }\r\n        </mat-select>\r\n        @if (value && (value.length || 0) > 0) {\r\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n    </mat-form-field>\r\n    } @else {\r\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n        name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n    }\r\n    } @else {\r\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n        [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n        @for (o of options(); track o; let i = $index) {\r\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n            o.name}}</mat-chip-option>\r\n        }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[id]': 'id',
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[attr.aria-describedBy]': 'describedBy',
+                    }, template: "<div [id]=\"containerId\" class=\"chips-selector\">\r\n    @if(containerWidth() > 0) {\r\n    @if(collapsed()) {\r\n    @if(collapsedDisplayMode() === 'dropdown') {\r\n    <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\r\n        @if(label()) {\r\n        <mat-label>{{label()}}</mat-label>\r\n        }\r\n        <mat-select [(ngModel)]=\"selection\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\r\n            <mat-select-trigger>\r\n                @if (value && (value.length || 0) > 0) {\r\n                {{value[0].shortName ?? value[0].name}}\r\n                }\r\n                @if (value && (value.length || 0) > 1) {\r\n                <span class=\"collapsed-additional-selection\">\r\n                    (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\r\n                </span>\r\n                }\r\n            </mat-select-trigger>\r\n            @for (o of options(); track o) {\r\n            <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\r\n                {{o.name}}\r\n                @if(o.bag) {\r\n                &nbsp; ({{o.bag}})\r\n                }\r\n            </mat-option>\r\n            }\r\n        </mat-select>\r\n        @if (value && (value.length || 0) > 0) {\r\n        <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n        }\r\n    </mat-form-field>\r\n    } @else {\r\n    <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [(ngModel)]=\"singleSelection\"\r\n        name=\"value\" (selected)=\"updateValue()\"></button-selector>\r\n\r\n    }\r\n    } @else {\r\n    <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\r\n        [(ngModel)]=\"selection\" (change)=\"updateValue()\">\r\n        @for (o of options(); track o; let i = $index) {\r\n        <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\r\n            [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\r\n            o.name}}</mat-chip-option>\r\n        }\r\n    </mat-chip-listbox>\r\n    }\r\n    }\r\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], collapsedDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedDisplayMode", required: false }] }], collapseAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAt", required: false }] }], collapseAtContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAtContainer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], mustSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustSelect", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], padAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAt", required: false }] }], required: [{
-                type: Input
-            }], disabled: [{
+                }] }], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], collapsedDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedDisplayMode", required: false }] }], collapseAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAt", required: false }] }], collapseAtContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAtContainer", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], mustSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "mustSelect", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], padAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAt", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{
                 type: Input
-            }], placeholder: [{
-                type: Input
-            }], id: [{
-                type: HostBinding
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedBy']
             }] } });
 
 class FileInputComponent {
-    // Initialize
     static { this.nextId = 0; }
     set value(value) {
         this._value = value;
@@ -2155,18 +2172,21 @@ class FileInputComponent {
         this.stateChanges.next();
         this.changed.emit(this._value);
     }
+    /** The current FileInfo value. */
     get value() {
         return this._value;
     }
+    /** Size of the current file in bytes. */
     get size() {
         return this._value?.file?.size;
     }
+    /** True when the control is required (implements `MatFormFieldControl.required`). */
     get required() {
-        return this._required;
+        return this._requiredInput();
     }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
+    /** The effective placeholder label shown in the form field (implements `MatFormFieldControl.placeholder`). */
+    get placeholder() {
+        return this._placeholder();
     }
     get disabled() {
         if (this.ngControl && this.ngControl.disabled != null) {
@@ -2181,24 +2201,22 @@ class FileInputComponent {
             this.stateChanges.next();
         }
     }
-    get placeholder() {
-        return this._placeholder();
-    }
-    set placeholder(value) {
-        this._placeholder.set(value);
-        this.stateChanges.next();
-    }
+    /** True when no file is selected. */
     get empty() {
         return !this._value || !this._value.file;
     }
+    /** True when the control has validation errors and has been touched. */
     get errorState() {
-        return this.ngControl.errors != null && this.ngControl.touched;
+        return (this.ngControl?.errors != null) && (this.ngControl?.touched ?? false);
     }
+    /** True when the label should float above the field. */
     get shouldLabelFloat() {
         return this.focused || !this.empty;
     }
     constructor(ngControl) {
         this.ngControl = ngControl;
+        /** Reference to the hidden native file input element. */
+        this.__file = viewChild.required('__file');
         this.renderer = inject(Renderer2);
         this.uiService = inject(UIService);
         this.stateChanges = new Subject();
@@ -2208,16 +2226,22 @@ class FileInputComponent {
         this.canCapture = signal(false, ...(ngDevMode ? [{ debugName: "canCapture" }] : /* istanbul ignore next */ []));
         /** Size in MB of the currently selected file. */
         this.fileSize = signal(0, ...(ngDevMode ? [{ debugName: "fileSize" }] : /* istanbul ignore next */ []));
+        /** Internal placeholder text, derived from the input and camera availability. */
         this._placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : /* istanbul ignore next */ []));
         this._value = new FileInfo();
-        this._required = false;
-        this._disabled = false;
+        /** The currently displayed file name. Can be bound from outside or updated by file selection. */
+        this.fileName = model(undefined, ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
         this.maxSizeMb = input(5, ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : /* istanbul ignore next */ []));
         this.minSizeMb = input(0, ...(ngDevMode ? [{ debugName: "minSizeMb" }] : /* istanbul ignore next */ []));
         this.isNew = input(false, ...(ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []));
         this.canPreview = input(false, ...(ngDevMode ? [{ debugName: "canPreview" }] : /* istanbul ignore next */ []));
         this.appearance = input(this.uiService.appearance(), ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         this.accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+        /** @internal Input signal for the required state (bound via the `[required]` attribute). */
+        this._requiredInput = input(false, { ...(ngDevMode ? { debugName: "_requiredInput" } : /* istanbul ignore next */ {}), alias: 'required', transform: booleanAttribute });
+        /** @internal Input signal for the placeholder text (bound via the `[placeholder]` attribute). */
+        this._placeholderInput = input('', { ...(ngDevMode ? { debugName: "_placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+        this._disabled = false;
         this.id = `${this.controlType}-${FileInputComponent.nextId++}`;
         this.describedBy = '';
         this.changed = output();
@@ -2228,12 +2252,31 @@ class FileInputComponent {
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
+        // Notify state changes when required changes
+        effect(() => {
+            this._requiredInput();
+            this.stateChanges.next();
+        });
+        // Sync placeholder input into internal signal; setupDevices may override it when empty
+        effect(() => {
+            const p = this._placeholderInput();
+            if (p) {
+                this._placeholder.set(p);
+            }
+        });
+        // Detect camera availability and set the default placeholder after the first render
+        afterNextRender(() => {
+            this.setupDevices();
+        });
     }
-    async ngOnInit() {
-        await this.setupDevices();
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    ngDoCheck() {
+        this.updateInputDirtyCheck();
     }
     /**
-     * Detects camera availability and updates the placeholder accordingly.
+     * Detects camera availability and sets the default placeholder when none is explicitly provided.
      */
     async setupDevices() {
         this.canCapture.set(false);
@@ -2246,18 +2289,13 @@ class FileInputComponent {
             }
             catch { }
         }
-        if (!this.placeholder || this.placeholder === 'Seleziona file') {
+        const current = this._placeholderInput();
+        if (!current || current === 'Seleziona file') {
             this._placeholder.set(this.canCapture()
                 ? 'Seleziona file o acquisisci con fotocamera'
                 : 'Seleziona file');
         }
     }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-    }
-    ngDoCheck() {
-        this.updateInputDirtyCheck();
-    }
     /**
      * Writes a new value to the component (called by the form layer).
      * @param value - The new file info to display.
@@ -2287,10 +2325,15 @@ class FileInputComponent {
         this.describedBy = ids.join(' ');
     }
     /**
-     * Updates the disabled state of the underlying native element.
+     * Updates the disabled state when the Angular form layer changes it.
      * @param isDisabled - Whether the control should be disabled.
      */
     setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        if (isDisabled && this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
         if (!SystemUtils.isBrowser())
             return;
         const elem = document.getElementById(this.id);
@@ -2335,7 +2378,7 @@ class FileInputComponent {
                 (!this.maxSizeMb() || fileSizeMb <= this.maxSizeMb()) &&
                     (!this.minSizeMb() || fileSizeMb >= this.minSizeMb());
             this.writeValue(fileInfo);
-            this.fileName = f.name;
+            this.fileName.set(f.name);
             this.fileSize.set(Math.round(fileSizeMb));
         }
     }
@@ -2351,13 +2394,13 @@ class FileInputComponent {
      */
     clearFile() {
         if (this.hasFile()) {
-            this.fileName = undefined;
+            this.fileName.set(undefined);
             this.fileSize.set(0);
             const fi = new FileInfo();
             fi.file = undefined;
             fi.valid = !this.required;
             this.writeValue(fi);
-            this.__file.nativeElement.value = '';
+            this.__file().nativeElement.value = '';
         }
     }
     /**
@@ -2375,35 +2418,22 @@ class FileInputComponent {
             this.preview.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: false, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, minSizeMb: { classPropertyName: "minSizeMb", publicName: "minSizeMb", isSignal: true, isRequired: false, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, canPreview: { classPropertyName: "canPreview", publicName: "canPreview", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", download: "download", preview: "preview" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedBy": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: FileInputComponent }], viewQueries: [{ propertyName: "__file", first: true, predicate: ["__file"], descendants: true }], ngImport: i0, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n  <input name=\"_fileName\" #_fileName=\"ngModel\" [(ngModel)]=\"fileName\" [id]=\"id\" matInput readonly [required]=\"required\"\r\n    fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n  @if (hasFile()) {\r\n  <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!disabled) {\r\n  <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n    matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n    <mat-icon>add</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew() && canPreview()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n    <mat-icon>preview</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n    matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  }\r\n  @if (hasFile() && fileSize() > 0) {\r\n  <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n  }\r\n  @if (hasFile() && fileSize() == 0) {\r\n  <mat-hint align=\"start\">\r\n    &gt; 1 MB</mat-hint>\r\n      } @if (maxSizeMb()) {\r\n      <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n      </mat-hint>\r\n      }\r\n      @if (_fileName.invalid && !hasFile()) {\r\n      <mat-error>Obbligatorio.</mat-error>\r\n      }\r\n      @if (_fileName.invalid && hasFile()) {\r\n      <mat-error>Dimensione non consentita.</mat-error>\r\n      }\r\n</mat-form-field>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FileSizeValidatorDirective, selector: "[fileSize]", inputs: ["maxSizeMb", "minSizeMb", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, minSizeMb: { classPropertyName: "minSizeMb", publicName: "minSizeMb", isSignal: true, isRequired: false, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, canPreview: { classPropertyName: "canPreview", publicName: "canPreview", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, _requiredInput: { classPropertyName: "_requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, _placeholderInput: { classPropertyName: "_placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { fileName: "fileNameChange", changed: "changed", download: "download", preview: "preview" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: FileInputComponent }], viewQueries: [{ propertyName: "__file", first: true, predicate: ["__file"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n  <mat-label>{{_placeholder()}}</mat-label>\r\n  <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n  <input name=\"_fileName\" #_fileName=\"ngModel\" [ngModel]=\"fileName()\" (ngModelChange)=\"fileName.set($event)\"\r\n    [id]=\"id\" matInput readonly [required]=\"required\"\r\n    fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n  @if (hasFile()) {\r\n  <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!disabled) {\r\n  <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n    matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n    <mat-icon>add</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew() && canPreview()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n    <mat-icon>preview</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n    matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  }\r\n  @if (hasFile() && fileSize() > 0) {\r\n  <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n  }\r\n  @if (hasFile() && fileSize() == 0) {\r\n  <mat-hint align=\"start\">\r\n    &gt; 1 MB</mat-hint>\r\n      } @if (maxSizeMb()) {\r\n      <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n      </mat-hint>\r\n      }\r\n      @if (_fileName.invalid && !hasFile()) {\r\n      <mat-error>Obbligatorio.</mat-error>\r\n      }\r\n      @if (_fileName.invalid && hasFile()) {\r\n      <mat-error>Dimensione non consentita.</mat-error>\r\n      }\r\n</mat-form-field>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FileSizeValidatorDirective, selector: "[fileSize]", inputs: ["maxSizeMb", "minSizeMb", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'file-input', providers: [{ provide: MatFormFieldControl, useExisting: FileInputComponent }], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, MatInputModule, FormsModule, FileSizeValidatorDirective, MatButtonModule,
-                        MatIconModule, MatTooltipModule], template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n  <mat-label>{{placeholder}}</mat-label>\r\n  <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n  <input name=\"_fileName\" #_fileName=\"ngModel\" [(ngModel)]=\"fileName\" [id]=\"id\" matInput readonly [required]=\"required\"\r\n    fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n  @if (hasFile()) {\r\n  <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!disabled) {\r\n  <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n    matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n    <mat-icon>add</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew() && canPreview()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n    <mat-icon>preview</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n    matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  }\r\n  @if (hasFile() && fileSize() > 0) {\r\n  <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n  }\r\n  @if (hasFile() && fileSize() == 0) {\r\n  <mat-hint align=\"start\">\r\n    &gt; 1 MB</mat-hint>\r\n      } @if (maxSizeMb()) {\r\n      <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n      </mat-hint>\r\n      }\r\n      @if (_fileName.invalid && !hasFile()) {\r\n      <mat-error>Obbligatorio.</mat-error>\r\n      }\r\n      @if (_fileName.invalid && hasFile()) {\r\n      <mat-error>Dimensione non consentita.</mat-error>\r\n      }\r\n</mat-form-field>" }]
+                        MatIconModule, MatTooltipModule], host: {
+                        '[id]': 'id',
+                        '[class.floating]': 'shouldLabelFloat',
+                        '[attr.aria-describedBy]': 'describedBy',
+                    }, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n  <mat-label>{{_placeholder()}}</mat-label>\r\n  <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n  <input name=\"_fileName\" #_fileName=\"ngModel\" [ngModel]=\"fileName()\" (ngModelChange)=\"fileName.set($event)\"\r\n    [id]=\"id\" matInput readonly [required]=\"required\"\r\n    fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n  @if (hasFile()) {\r\n  <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!disabled) {\r\n  <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n    matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n    <mat-icon>add</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew() && canPreview()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n    <mat-icon>preview</mat-icon>\r\n  </button>\r\n  }\r\n  @if (!isNew()) {\r\n  <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n    matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n    <mat-icon>save_alt</mat-icon>\r\n  </button>\r\n  }\r\n  @if (hasFile() && fileSize() > 0) {\r\n  <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n  }\r\n  @if (hasFile() && fileSize() == 0) {\r\n  <mat-hint align=\"start\">\r\n    &gt; 1 MB</mat-hint>\r\n      } @if (maxSizeMb()) {\r\n      <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n      </mat-hint>\r\n      }\r\n      @if (_fileName.invalid && !hasFile()) {\r\n      <mat-error>Obbligatorio.</mat-error>\r\n      }\r\n      @if (_fileName.invalid && hasFile()) {\r\n      <mat-error>Dimensione non consentita.</mat-error>\r\n      }\r\n</mat-form-field>" }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }], propDecorators: { __file: [{
-                type: ViewChild,
-                args: ['__file']
-            }], required: [{
+                }] }], propDecorators: { __file: [{ type: i0.ViewChild, args: ['__file', { isSignal: true }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }, { type: i0.Output, args: ["fileNameChange"] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], minSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizeMb", required: false }] }], isNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNew", required: false }] }], canPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPreview", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], _requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], _placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], fileName: [{
-                type: Input
-            }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], minSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizeMb", required: false }] }], isNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNew", required: false }] }], canPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPreview", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], id: [{
-                type: HostBinding
-            }], shouldLabelFloat: [{
-                type: HostBinding,
-                args: ['class.floating']
-            }], describedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedBy']
             }], changed: [{ type: i0.Output, args: ["changed"] }], download: [{ type: i0.Output, args: ["download"] }], preview: [{ type: i0.Output, args: ["preview"] }] } });
 
 class FilePreviewComponent {
@@ -2506,19 +2536,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 class FilterBarComponent {
     constructor() {
+        /** Emitted whenever any filter value changes. */
         this.changed = output();
+        /** The list of filter groups to display. */
         this.filters = input(...(ngDevMode ? [undefined, { debugName: "filters" }] : /* istanbul ignore next */ []));
-        this.canFilterByFlt1 = signal(false, ...(ngDevMode ? [{ debugName: "canFilterByFlt1" }] : /* istanbul ignore next */ []));
-        this.canFilterByFlt2 = signal(false, ...(ngDevMode ? [{ debugName: "canFilterByFlt2" }] : /* istanbul ignore next */ []));
-        this.canFilterByFlt3 = signal(false, ...(ngDevMode ? [{ debugName: "canFilterByFlt3" }] : /* istanbul ignore next */ []));
-        this.canFilterByFlt4 = signal(false, ...(ngDevMode ? [{ debugName: "canFilterByFlt4" }] : /* istanbul ignore next */ []));
-        this.canFilterByFlt5 = signal(false, ...(ngDevMode ? [{ debugName: "canFilterByFlt5" }] : /* 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(null, ...(ngDevMode ? [{ debugName: "initialText" }] : /* istanbul ignore next */ []));
-        this.initialText2 = input(null, ...(ngDevMode ? [{ debugName: "initialText2" }] : /* istanbul ignore next */ []));
-        this.initialText3 = input(null, ...(ngDevMode ? [{ debugName: "initialText3" }] : /* istanbul ignore next */ []));
+        /** Initial text values for the search inputs — synced into the model signals on change. */
+        this.initialText = input(undefined, ...(ngDevMode ? [{ debugName: "initialText" }] : /* istanbul ignore next */ []));
+        this.initialText2 = input(undefined, ...(ngDevMode ? [{ debugName: "initialText2" }] : /* istanbul ignore next */ []));
+        this.initialText3 = input(undefined, ...(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 */ []));
@@ -2527,45 +2555,58 @@ class FilterBarComponent {
         this.text3Length = input(...(ngDevMode ? [undefined, { 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 */ []));
+        /** Two-way bindable text filter values. */
+        this.text = model(undefined, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.text2 = model(undefined, ...(ngDevMode ? [{ debugName: "text2" }] : /* istanbul ignore next */ []));
+        this.text3 = model(undefined, ...(ngDevMode ? [{ debugName: "text3" }] : /* istanbul ignore next */ []));
+        /** Filter group for slot 1, derived reactively from the `filters` input. */
+        this.flt1 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_1), ...(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), ...(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), ...(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), ...(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), ...(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));
+        }, ...(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));
+        }, ...(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));
+        }, ...(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));
+        }, ...(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));
+        }, ...(ngDevMode ? [{ debugName: "canFilterByFlt5" }] : /* istanbul ignore next */ []));
         this.currentFilter = new CurrentFilter();
+        // Sync the initialText inputs into the model signals whenever they change
         effect(() => {
-            this.text = this.initialText();
-            this.text2 = this.initialText2();
-            this.text3 = this.initialText3();
-        });
-        effect(() => {
-            this.initializeFilters();
-        });
-    }
-    /** Reads the `filters` input and populates the filter group fields and capability signals. */
-    initializeFilters() {
-        if (!this.filters())
-            return;
-        this.filters()?.forEach((n) => {
-            switch (n.group) {
-                case Filters.FLT_1:
-                    this.flt1 = n;
-                    this.canFilterByFlt1.set(n.action || (n.items && n.items.length > 0));
-                    break;
-                case Filters.FLT_2:
-                    this.flt2 = n;
-                    this.canFilterByFlt2.set(n.action || (n.items && n.items.length > 0));
-                    break;
-                case Filters.FLT_3:
-                    this.flt3 = n;
-                    this.canFilterByFlt3.set(n.action || (n.items && n.items.length > 0));
-                    break;
-                case Filters.FLT_4:
-                    this.flt4 = n;
-                    this.canFilterByFlt4.set(n.action || (n.items && n.items.length > 0));
-                    break;
-                case Filters.FLT_5:
-                    this.flt5 = n;
-                    this.canFilterByFlt5.set(n.action || (n.items && n.items.length > 0));
-                    break;
-            }
+            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.
@@ -2631,9 +2672,9 @@ class FilterBarComponent {
     }
     /** Commits the current text inputs to the filter state and emits the change. */
     applyTextFilter() {
-        this.currentFilter.text = this.text;
-        this.currentFilter.text2 = this.text2;
-        this.currentFilter.text3 = this.text3;
+        this.currentFilter.text = this.text();
+        this.currentFilter.text2 = this.text2();
+        this.currentFilter.text3 = this.text3();
         this.changed.emit({
             filter: this.currentFilter,
             group: Filters.FLT_TEXT
@@ -2701,13 +2742,14 @@ class FilterBarComponent {
         this.currentFilter.text = undefined;
         this.currentFilter.text2 = undefined;
         this.currentFilter.text3 = undefined;
-        this.text = undefined;
-        this.text2 = undefined;
-        this.text3 = undefined;
+        this.text.set(undefined);
+        this.text2.set(undefined);
+        this.text3.set(undefined);
         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;
@@ -2732,89 +2774,80 @@ class FilterBarComponent {
     /**
      * 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);
+        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) {
-            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;
-                }
+        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) {
-            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;
-                }
+        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) {
-            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;
-                }
+        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) {
-            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;
-                }
+        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) {
-            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;
-                }
+        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 = this.currentFilter.text;
-        this.text2 = this.currentFilter.text2;
-        this.text3 = this.currentFilter.text3;
+        this.text.set(this.currentFilter.text);
+        this.text2.set(this.currentFilter.text2);
+        this.text3.set(this.currentFilter.text3);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FilterBarComponent, isStandalone: true, selector: "filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText: { classPropertyName: "canFilterByText", publicName: "canFilterByText", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText2: { classPropertyName: "canFilterByText2", publicName: "canFilterByText2", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText3: { classPropertyName: "canFilterByText3", publicName: "canFilterByText3", isSignal: true, isRequired: false, transformFunction: null }, initialText: { classPropertyName: "initialText", publicName: "initialText", isSignal: true, isRequired: false, transformFunction: null }, initialText2: { classPropertyName: "initialText2", publicName: "initialText2", isSignal: true, isRequired: false, transformFunction: null }, initialText3: { classPropertyName: "initialText3", publicName: "initialText3", isSignal: true, isRequired: false, transformFunction: null }, textName: { classPropertyName: "textName", publicName: "textName", isSignal: true, isRequired: false, transformFunction: null }, text2Name: { classPropertyName: "text2Name", publicName: "text2Name", isSignal: true, isRequired: false, transformFunction: null }, text3Name: { classPropertyName: "text3Name", publicName: "text3Name", isSignal: true, isRequired: false, transformFunction: null }, textLength: { classPropertyName: "textLength", publicName: "textLength", isSignal: true, isRequired: false, transformFunction: null }, text2Length: { classPropertyName: "text2Length", publicName: "text2Length", isSignal: true, isRequired: false, transformFunction: null }, text3Length: { classPropertyName: "text3Length", publicName: "text3Length", isSignal: true, isRequired: false, transformFunction: null }, showTextSearchButton: { classPropertyName: "showTextSearchButton", publicName: "showTextSearchButton", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n        @if (canFilterByText()) {\r\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{textName()}}...</mat-label>\r\n          <input matInput name=\"_text\" [(ngModel)]=\"text\" maxlength=\"100\" #_text=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text = undefined; applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n          @if (showTextSearchButton()) {\r\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n            matTooltip=\"Trova\">\r\n            <mat-icon>search</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText2()) {\r\n        <mat-form-field \r\n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n          <input matInput name=\"_text2\" [(ngModel)]=\"text2\" maxlength=\"100\" #_text2=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text2) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text2 = undefined; applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText3()) {\r\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n          <input matInput name=\"_text3\" [(ngModel)]=\"text3\" maxlength=\"100\" #_text3=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text3) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text3 = undefined; applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    <div fxFlex.lt-sm=\"100\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n        @if (canFilterByFlt1() && flt1 && flt1.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n            [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" \r\n            (click)=\"applyFilterAction(1, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span>{{flt1.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt1) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt1() && flt1 && flt1.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n          [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span>{{flt1.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n            @for (f of flt1.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt2() && flt2 && flt2.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n            [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" \r\n            (click)=\"applyFilterAction(2, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span>{{flt2.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt2() && flt2 && flt2.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n          [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span>{{flt2.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n            @for (f of flt2.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt3() && flt3 && flt3.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n            [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" \r\n            (click)=\"applyFilterAction(3, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span>{{flt3.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt3() && flt3 && flt3.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n          [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span>{{flt3.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n            @for (f of flt3.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt4() && flt4 && flt4.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n            [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" \r\n            (click)=\"applyFilterAction(4, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span>{{flt4.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt4) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt4() && flt4 && flt4.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n          [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span>{{flt4.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n            @for (f of flt4.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt5() && flt5 && flt5.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n            [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" \r\n            (click)=\"applyFilterAction(5, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span>{{flt5.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt5() && flt5 && flt5.items) {\r\n        <button fxFlexAlign=\"center\"class=\"filterbox-button\"  type=\"button\" mat-button [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n          [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span>{{flt5.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n            @for (f of flt5.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if (currentFilter.filtered() && canClearAllFilters()) {\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n      (click)=\"clearAllFilters()\">\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".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}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;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}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!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:14px!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-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.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$1.DefaultLayoutDirective, 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$1.DefaultLayoutGapDirective, 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$1.DefaultLayoutAlignDirective, 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$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, 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$1.DefaultFlexDirective, 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, text2: { classPropertyName: "text2", publicName: "text2", isSignal: true, isRequired: false, transformFunction: null }, text3: { classPropertyName: "text3", publicName: "text3", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", text: "textChange", text2: "text2Change", text3: "text3Change" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n        @if (canFilterByText()) {\r\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{textName()}}...</mat-label>\r\n          <input matInput name=\"_text\" [ngModel]=\"text()\" (ngModelChange)=\"text.set($event)\" maxlength=\"100\" #_text=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n          @if (showTextSearchButton()) {\r\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n            matTooltip=\"Trova\">\r\n            <mat-icon>search</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText2()) {\r\n        <mat-form-field \r\n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n          <input matInput name=\"_text2\" [ngModel]=\"text2()\" (ngModelChange)=\"text2.set($event)\" maxlength=\"100\" #_text2=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text2()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text2.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText3()) {\r\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n          <input matInput name=\"_text3\" [ngModel]=\"text3()\" (ngModelChange)=\"text3.set($event)\" maxlength=\"100\" #_text3=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text3()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text3.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    <div fxFlex.lt-sm=\"100\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n        @if (canFilterByFlt1() && flt1()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \r\n            (click)=\"applyFilterAction(1, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span>{{flt1()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt1) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt1() && flt1()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span>{{flt1()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n            @for (f of flt1()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt2() && flt2()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \r\n            (click)=\"applyFilterAction(2, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span>{{flt2()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt2() && flt2()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span>{{flt2()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n            @for (f of flt2()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt3() && flt3()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \r\n            (click)=\"applyFilterAction(3, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span>{{flt3()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt3() && flt3()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span>{{flt3()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n            @for (f of flt3()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt4() && flt4()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \r\n            (click)=\"applyFilterAction(4, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span>{{flt4()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt4) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt4() && flt4()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span>{{flt4()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n            @for (f of flt4()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt5() && flt5()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \r\n            (click)=\"applyFilterAction(5, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span>{{flt5()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt5() && flt5()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span>{{flt5()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n            @for (f of flt5()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if (currentFilter.filtered() && canClearAllFilters()) {\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n      (click)=\"clearAllFilters()\">\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".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}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;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}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!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:14px!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-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.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$1.DefaultLayoutDirective, 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$1.DefaultLayoutGapDirective, 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$1.DefaultLayoutAlignDirective, 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$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, 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$1.DefaultFlexDirective, 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FilterBarComponent, decorators: [{
             type: Component,
             args: [{ selector: "filter-bar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatFormFieldModule, MatInputModule, FormsModule,
-                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n        @if (canFilterByText()) {\r\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{textName()}}...</mat-label>\r\n          <input matInput name=\"_text\" [(ngModel)]=\"text\" maxlength=\"100\" #_text=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text = undefined; applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n          @if (showTextSearchButton()) {\r\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n            matTooltip=\"Trova\">\r\n            <mat-icon>search</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText2()) {\r\n        <mat-form-field \r\n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n          <input matInput name=\"_text2\" [(ngModel)]=\"text2\" maxlength=\"100\" #_text2=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text2) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text2 = undefined; applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText3()) {\r\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n          <input matInput name=\"_text3\" [(ngModel)]=\"text3\" maxlength=\"100\" #_text3=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text3) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text3 = undefined; applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    <div fxFlex.lt-sm=\"100\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n        @if (canFilterByFlt1() && flt1 && flt1.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n            [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" \r\n            (click)=\"applyFilterAction(1, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span>{{flt1.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt1) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt1() && flt1 && flt1.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n          [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span>{{flt1.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n            @for (f of flt1.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt2() && flt2 && flt2.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n            [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" \r\n            (click)=\"applyFilterAction(2, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span>{{flt2.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt2() && flt2 && flt2.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n          [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span>{{flt2.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n            @for (f of flt2.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt3() && flt3 && flt3.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n            [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" \r\n            (click)=\"applyFilterAction(3, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span>{{flt3.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt3() && flt3 && flt3.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n          [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span>{{flt3.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n            @for (f of flt3.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt4() && flt4 && flt4.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n            [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" \r\n            (click)=\"applyFilterAction(4, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span>{{flt4.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt4) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt4() && flt4 && flt4.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n          [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span>{{flt4.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n            @for (f of flt4.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt5() && flt5 && flt5.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n            [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" \r\n            (click)=\"applyFilterAction(5, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span>{{flt5.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt5() && flt5 && flt5.items) {\r\n        <button fxFlexAlign=\"center\"class=\"filterbox-button\"  type=\"button\" mat-button [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n          [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span>{{flt5.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n            @for (f of flt5.items; track $index) {\r\n\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5.items[0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if (currentFilter.filtered() && canClearAllFilters()) {\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n      (click)=\"clearAllFilters()\">\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".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}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;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}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!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:14px!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-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.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 }] }] } });
+                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n  [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n  <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n    @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n    <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n        @if (canFilterByText()) {\r\n        <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{textName()}}...</mat-label>\r\n          <input matInput name=\"_text\" [ngModel]=\"text()\" (ngModelChange)=\"text.set($event)\" maxlength=\"100\" #_text=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n          @if (showTextSearchButton()) {\r\n          <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n            matTooltip=\"Trova\">\r\n            <mat-icon>search</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText2()) {\r\n        <mat-form-field \r\n        [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n          <input matInput name=\"_text2\" [ngModel]=\"text2()\" (ngModelChange)=\"text2.set($event)\" maxlength=\"100\" #_text2=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text2()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text2.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n        @if (canFilterByText3()) {\r\n        <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n          subscriptSizing=\"dynamic\">\r\n          <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n          <input matInput name=\"_text3\" [ngModel]=\"text3()\" (ngModelChange)=\"text3.set($event)\" maxlength=\"100\" #_text3=\"ngModel\"\r\n            (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n          @if (text3()) {\r\n          <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n            (click)=\"text3.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n          }\r\n        </mat-form-field>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    <div fxFlex.lt-sm=\"100\">\r\n      <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n        @if (canFilterByFlt1() && flt1()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n            [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \r\n            (click)=\"applyFilterAction(1, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span>{{flt1()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt1) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt1() && flt1()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n          [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span>{{flt1()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n            @for (f of flt1()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt1()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt2() && flt2()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n            [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \r\n            (click)=\"applyFilterAction(2, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span>{{flt2()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt2() && flt2()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n          [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span>{{flt2()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n            @for (f of flt2()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt2()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt3() && flt3()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n            [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \r\n            (click)=\"applyFilterAction(3, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span>{{flt3()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt3() && flt3()?.items) {\r\n        <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n          [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span>{{flt3()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n            @for (f of flt3()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt3()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt4() && flt4()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n            [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \r\n            (click)=\"applyFilterAction(4, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span>{{flt4()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt4) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt4() && flt4()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n          [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span>{{flt4()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n            @for (f of flt4()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt4()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n\r\n        @if (canFilterByFlt5() && flt5()?.action) {\r\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n          <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n            [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \r\n            (click)=\"applyFilterAction(5, false)\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span>{{flt5()!.title}}</span>\r\n            } @else {\r\n            <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n            (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n            <mat-icon>clear</mat-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        } @else if (canFilterByFlt5() && flt5()?.items) {\r\n        <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n          [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n          >\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span>{{flt5()!.title}}</span>\r\n          } @else {\r\n          <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n          }\r\n          <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n          <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n            @for (f of flt5()!.items; track $index) {\r\n            @if (f.divider) {\r\n            <mat-divider></mat-divider>\r\n            }\r\n            <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n              <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n            </button>\r\n            }\r\n            <mat-divider></mat-divider>\r\n            <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n              <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n                <button type=\"button\" mat-button  (click)=\"clearFilter(flt5()!.items![0].group)\"\r\n                  aria-label=\"Azzera\">\r\n                  <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-menu>\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    @if (currentFilter.filtered() && canClearAllFilters()) {\r\n    <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n      (click)=\"clearAllFilters()\">\r\n      <mat-icon>filter_alt_off</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".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}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;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}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!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:14px!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-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.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 }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], text2: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2", required: false }] }, { type: i0.Output, args: ["text2Change"] }], text3: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3", required: false }] }, { type: i0.Output, args: ["text3Change"] }] } });
 
 /*
  * Public API Surface of ars-utils