@arsedizioni/ars-utils 18.1.39 → 18.1.41

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

@@ -1960,12 +1960,12 @@ class FilterBarComponent {
         this.text3 = this.currentFilter.text3;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: FilterBarComponent, isStandalone: true, selector: "filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt1: { classPropertyName: "canFilterByFlt1", publicName: "canFilterByFlt1", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt2: { classPropertyName: "canFilterByFlt2", publicName: "canFilterByFlt2", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt3: { classPropertyName: "canFilterByFlt3", publicName: "canFilterByFlt3", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt4: { classPropertyName: "canFilterByFlt4", publicName: "canFilterByFlt4", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt5: { classPropertyName: "canFilterByFlt5", publicName: "canFilterByFlt5", 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 }, 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: false, isRequired: false, transformFunction: null }, text2: { classPropertyName: "text2", publicName: "text2", isSignal: false, isRequired: false, transformFunction: null }, text3: { classPropertyName: "text3", publicName: "text3", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div fxLayout=\"row\"  fxLayoutAlign=\"start center\"  class=\"filterbox\"\r\n[ngClass]=\"{'filterbox-filtered': currentFilter.filtered()}\">\r\n  <div fxFlex=\"100\" 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 [ngStyle]=\"{'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 = ''; 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 [ngStyle]=\"{'width': text2Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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 [ngStyle]=\"{'width': text3Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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\" style=\"height:56px; padding-top:4px\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill >\r\n        @if (canFilterByFlt1 && flt1 && flt1.action) {\r\n        <div fxLayout=\"row\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n            [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(1, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt1 && flt1 && flt1.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\" >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt1.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n            [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(2, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt2 && flt2 && flt2.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt2.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n            [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(3, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt3 && flt3 && flt3.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt3.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n            [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(4, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt4 && flt4 && flt4.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt4.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n            [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(5, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt5 && flt5 && flt5.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt5.items[0].group)\"\r\n                  attr.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      </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\" attr.aria-label=\"Azzera tutti i filtri\"\r\n      color=\"primary\" (click)=\"clearAllFilters()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>", styles: [":root{--ars-dialog-info-ok: #388E3C;--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!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}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-dialog-info-ok: #4CAF50;--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.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, #c6c7b8)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i2.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: i2.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: i2.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: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.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: i2.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: ExtendedModule }, { kind: "directive", type: i2$1.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: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.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"], 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: i6$1.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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: i11$1.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: i11$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$1.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: i12.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: "18.0.3", type: FilterBarComponent, isStandalone: true, selector: "filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt1: { classPropertyName: "canFilterByFlt1", publicName: "canFilterByFlt1", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt2: { classPropertyName: "canFilterByFlt2", publicName: "canFilterByFlt2", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt3: { classPropertyName: "canFilterByFlt3", publicName: "canFilterByFlt3", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt4: { classPropertyName: "canFilterByFlt4", publicName: "canFilterByFlt4", isSignal: true, isRequired: false, transformFunction: null }, canFilterByFlt5: { classPropertyName: "canFilterByFlt5", publicName: "canFilterByFlt5", 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 }, 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: false, isRequired: false, transformFunction: null }, text2: { classPropertyName: "text2", publicName: "text2", isSignal: false, isRequired: false, transformFunction: null }, text3: { classPropertyName: "text3", publicName: "text3", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div fxLayout=\"row\"  fxLayoutAlign=\"start center\"  class=\"filterbox\"\r\n[ngClass]=\"{'filterbox-filtered': currentFilter.filtered()}\">\r\n  <div fxFlex=\"100\" 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 [ngStyle]=\"{'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 = ''; 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 [ngStyle]=\"{'width': text2Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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 [ngStyle]=\"{'width': text3Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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\" fxLayoutGap=\"10px\" fxFill >\r\n        @if (canFilterByFlt1() && flt1 && flt1.action) {\r\n        <div fxLayout=\"row\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n            [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(1, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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 fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\" >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt1.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n            [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(2, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt2 && flt2 && flt2.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt2.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n            [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(3, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt3 && flt3 && flt3.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt3.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n            [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(4, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt4 && flt4 && flt4.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt4.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n            [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(5, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt5 && flt5 && flt5.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt5.items[0].group)\"\r\n                  attr.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      </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\" attr.aria-label=\"Azzera tutti i filtri\"\r\n      color=\"primary\" (click)=\"clearAllFilters()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>", styles: [":root{--ars-dialog-info-ok: #388E3C;--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!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}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-dialog-info-ok: #4CAF50;--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i2.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: i2.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: i2.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: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.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: i2.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: ExtendedModule }, { kind: "directive", type: i2$1.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: "directive", type: i2$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.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"], 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: i6$1.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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: i11$1.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: i11$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11$1.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: i12.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FilterBarComponent, decorators: [{
             type: Component,
             args: [{ selector: "filter-bar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgStyle, FlexModule, ExtendedModule, MatFormFieldModule, MatInputModule, FormsModule,
-                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\"  fxLayoutAlign=\"start center\"  class=\"filterbox\"\r\n[ngClass]=\"{'filterbox-filtered': currentFilter.filtered()}\">\r\n  <div fxFlex=\"100\" 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 [ngStyle]=\"{'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 = ''; 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 [ngStyle]=\"{'width': text2Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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 [ngStyle]=\"{'width': text3Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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\" style=\"height:56px; padding-top:4px\">\r\n      <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill >\r\n        @if (canFilterByFlt1 && flt1 && flt1.action) {\r\n        <div fxLayout=\"row\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n            [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(1, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt1 && flt1 && flt1.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\" >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt1.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n            [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(2, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt2 && flt2 && flt2.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt2.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n            [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(3, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt3 && flt3 && flt3.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt3.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n            [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(4, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt4 && flt4 && flt4.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt4.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n            [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(5, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt5 && flt5 && flt5.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt5.items[0].group)\"\r\n                  attr.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      </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\" attr.aria-label=\"Azzera tutti i filtri\"\r\n      color=\"primary\" (click)=\"clearAllFilters()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>", styles: [":root{--ars-dialog-info-ok: #388E3C;--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!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}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-dialog-info-ok: #4CAF50;--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.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, #c6c7b8)}}\n"] }]
+                        MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\"  fxLayoutAlign=\"start center\"  class=\"filterbox\"\r\n[ngClass]=\"{'filterbox-filtered': currentFilter.filtered()}\">\r\n  <div fxFlex=\"100\" 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 [ngStyle]=\"{'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 = ''; 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 [ngStyle]=\"{'width': text2Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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 [ngStyle]=\"{'width': text3Length() ?? '100%'}\" [appearance]=\"appearance()\" 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 = ''; 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\" fxLayoutGap=\"10px\" fxFill >\r\n        @if (canFilterByFlt1() && flt1 && flt1.action) {\r\n        <div fxLayout=\"row\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt1.tooltip || 'Filtra per ' + flt1.title\"\r\n            [attr.aria-label]=\"flt1.tooltip || 'Filtra per ' + flt1.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(1, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt1) {\r\n            <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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 fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\" >\r\n          &nbsp;\r\n          @if (!currentFilter.flt1) {\r\n          <span style=\"font-weight: 200 !important\">{{flt1.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt1.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt2.tooltip || 'Filtra per ' + flt2.title\"\r\n            [attr.aria-label]=\"flt2.tooltip || 'Filtra per ' + flt2.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(2, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt2) {\r\n            <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt2) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt2 && flt2 && flt2.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt2) {\r\n          <span style=\"font-weight: 200 !important\">{{flt2.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt2.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt3.tooltip || 'Filtra per ' + flt3.title\"\r\n            [attr.aria-label]=\"flt3.tooltip || 'Filtra per ' + flt3.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(3, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt3) {\r\n            <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt3) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt3 && flt3 && flt3.items) {\r\n        <button fxFlexAlign=\"center\" type=\"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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt3) {\r\n          <span style=\"font-weight: 200 !important\">{{flt3.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt3.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt4.tooltip || 'Filtra per ' + flt4.title\"\r\n            [attr.aria-label]=\"flt4.tooltip || 'Filtra per ' + flt4.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(4, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt4) {\r\n            <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n            } @else {\r\n            <span [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 color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt4 && flt4 && flt4.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt4) {\r\n          <span style=\"font-weight: 200 !important\">{{flt4.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt4.items[0].group)\"\r\n                  attr.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\">\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-button\r\n            [matTooltip]=\"flt5.tooltip || 'Filtra per ' + flt5.title\"\r\n            [attr.aria-label]=\"flt5.tooltip || 'Filtra per ' + flt5.title\" color=\"primary\"\r\n            (click)=\"applyFilterAction(5, false)\" style=\"height:56px;\">\r\n            &nbsp;\r\n            @if (!currentFilter.flt5) {\r\n            <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n            } @else {\r\n            <span [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n            }\r\n          </button>\r\n          @if (currentFilter.flt5) {\r\n          <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button color=\"primary\" matTooltip=\"Azzera\"\r\n            aria-label=\"'Azzera'\" (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        }\r\n        @if (canFilterByFlt5 && flt5 && flt5.items) {\r\n        <button fxFlexAlign=\"center\" 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          color=\"primary\" style=\"height:56px;\">\r\n          &nbsp;\r\n          @if (!currentFilter.flt5) {\r\n          <span style=\"font-weight: 200 !important\">{{flt5.title}}</span>\r\n          } @else {\r\n          <span [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 f) {\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 color=\"primary\" (click)=\"clearFilter(flt5.items[0].group)\"\r\n                  attr.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      </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\" attr.aria-label=\"Azzera tutti i filtri\"\r\n      color=\"primary\" (click)=\"clearAllFilters()\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n    }\r\n  </div>\r\n</div>", styles: [":root{--ars-dialog-info-ok: #388E3C;--ars-filterbox-filtered-background-color: #f9fbe7}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}b{font-weight:700}.large{font-size:large!important}.small{font-size:small!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}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-color-scheme: dark){:root{--ars-dialog-info-ok: #4CAF50;--ars-filterbox-filtered-background-color: #c6c7b8}.dialog-info-green,.dialog-info-ok{color:var(--ars-dialog-info-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b{font-weight:600}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.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"] }]
         }], propDecorators: { changed: [{
                 type: Output
             }], text: [{