@arsedizioni/ars-utils 22.5.17 → 22.5.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs +399 -222
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-core.validators.mjs +43 -1
- package/fesm2022/arsedizioni-ars-utils-core.validators.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs +30 -17
- package/fesm2022/arsedizioni-ars-utils-ui.controls.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.files.mjs +54 -19
- package/fesm2022/arsedizioni-ars-utils-ui.files.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs +33 -26
- package/fesm2022/arsedizioni-ars-utils-ui.filters.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs +19 -11
- package/fesm2022/arsedizioni-ars-utils-ui.notifications.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs +19 -11
- package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs.map +1 -1
- package/package.json +1 -1
- package/types/arsedizioni-ars-utils-clipper.ui.d.ts +119 -41
- package/types/arsedizioni-ars-utils-core.validators.d.ts +38 -1
- package/types/arsedizioni-ars-utils-ui.controls.d.ts +16 -4
- package/types/arsedizioni-ars-utils-ui.files.d.ts +15 -2
- package/types/arsedizioni-ars-utils-ui.filters.d.ts +10 -1
- package/types/arsedizioni-ars-utils-ui.notifications.d.ts +5 -0
- package/types/arsedizioni-ars-utils-ui.tinymce.d.ts +8 -2
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { output, input, signal, computed, inject, ChangeDetectorRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import * as i6 from '@angular/material/button';
|
|
3
|
+
import { form, maxLength, FormField } from '@angular/forms/signals';
|
|
4
|
+
import * as i5 from '@angular/material/button';
|
|
6
5
|
import { MatButtonModule } from '@angular/material/button';
|
|
7
|
-
import * as
|
|
6
|
+
import * as i8 from '@angular/material/divider';
|
|
8
7
|
import { MatDividerModule } from '@angular/material/divider';
|
|
9
8
|
import * as i2 from '@angular/material/form-field';
|
|
10
9
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
|
-
import * as
|
|
10
|
+
import * as i6 from '@angular/material/icon';
|
|
12
11
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
12
|
import * as i3 from '@angular/material/input';
|
|
14
13
|
import { MatInputModule } from '@angular/material/input';
|
|
15
|
-
import * as
|
|
14
|
+
import * as i7 from '@angular/material/menu';
|
|
16
15
|
import { MatMenuModule } from '@angular/material/menu';
|
|
17
|
-
import * as
|
|
16
|
+
import * as i4 from '@angular/material/tooltip';
|
|
18
17
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
19
18
|
import { SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
|
|
20
19
|
import * as i1 from '@arsedizioni/ars-utils/ui';
|
|
@@ -102,13 +101,21 @@ class FilterBarComponent {
|
|
|
102
101
|
...(ngDevMode ? [{ debugName: "showTextSearchButton" }] : /* istanbul ignore next */ []));
|
|
103
102
|
this.appearance = input('outline', /* @ts-ignore */
|
|
104
103
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
105
|
-
/**
|
|
106
|
-
|
|
104
|
+
/**
|
|
105
|
+
* Text filter values. Empty is represented as '' (never undefined) because the
|
|
106
|
+
* signals back the [formField] bindings; it is normalized to undefined when
|
|
107
|
+
* committed to the CurrentFilter.
|
|
108
|
+
*/
|
|
109
|
+
this.text = signal('', /* @ts-ignore */
|
|
107
110
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
108
|
-
this.text2 = signal(
|
|
111
|
+
this.text2 = signal('', /* @ts-ignore */
|
|
109
112
|
...(ngDevMode ? [{ debugName: "text2" }] : /* istanbul ignore next */ []));
|
|
110
|
-
this.text3 = signal(
|
|
113
|
+
this.text3 = signal('', /* @ts-ignore */
|
|
111
114
|
...(ngDevMode ? [{ debugName: "text3" }] : /* istanbul ignore next */ []));
|
|
115
|
+
/** Signal forms for the three text inputs (max 100 characters each). */
|
|
116
|
+
this.textForm = form(this.text, p => maxLength(p, 100));
|
|
117
|
+
this.text2Form = form(this.text2, p => maxLength(p, 100));
|
|
118
|
+
this.text3Form = form(this.text3, p => maxLength(p, 100));
|
|
112
119
|
/** Filter group for slot 1, derived reactively from the `filters` input. */
|
|
113
120
|
this.flt1 = computed(() => this.filters()?.find(n => n.group === Filters.FLT_1), /* @ts-ignore */
|
|
114
121
|
...(ngDevMode ? [{ debugName: "flt1" }] : /* istanbul ignore next */ []));
|
|
@@ -158,9 +165,9 @@ class FilterBarComponent {
|
|
|
158
165
|
this.cdr = inject(ChangeDetectorRef);
|
|
159
166
|
// Sync the initialText inputs into the model signals whenever they change
|
|
160
167
|
effect(() => {
|
|
161
|
-
this.text.set(this.initialText());
|
|
162
|
-
this.text2.set(this.initialText2());
|
|
163
|
-
this.text3.set(this.initialText3());
|
|
168
|
+
this.text.set(this.initialText() ?? '');
|
|
169
|
+
this.text2.set(this.initialText2() ?? '');
|
|
170
|
+
this.text3.set(this.initialText3() ?? '');
|
|
164
171
|
});
|
|
165
172
|
}
|
|
166
173
|
/**
|
|
@@ -234,9 +241,9 @@ class FilterBarComponent {
|
|
|
234
241
|
}
|
|
235
242
|
/** Commits the current text inputs to the filter state and emits the change. */
|
|
236
243
|
applyTextFilter() {
|
|
237
|
-
this.currentFilter.text = this.text();
|
|
238
|
-
this.currentFilter.text2 = this.text2();
|
|
239
|
-
this.currentFilter.text3 = this.text3();
|
|
244
|
+
this.currentFilter.text = this.text() || undefined;
|
|
245
|
+
this.currentFilter.text2 = this.text2() || undefined;
|
|
246
|
+
this.currentFilter.text3 = this.text3() || undefined;
|
|
240
247
|
this.changed.emit({
|
|
241
248
|
filter: this.currentFilter,
|
|
242
249
|
group: Filters.FLT_TEXT
|
|
@@ -305,9 +312,9 @@ class FilterBarComponent {
|
|
|
305
312
|
this.currentFilter.text = undefined;
|
|
306
313
|
this.currentFilter.text2 = undefined;
|
|
307
314
|
this.currentFilter.text3 = undefined;
|
|
308
|
-
this.text.set(
|
|
309
|
-
this.text2.set(
|
|
310
|
-
this.text3.set(
|
|
315
|
+
this.text.set('');
|
|
316
|
+
this.text2.set('');
|
|
317
|
+
this.text3.set('');
|
|
311
318
|
this.cdr.markForCheck();
|
|
312
319
|
this.changed.emit({ filter: this.currentFilter, group: -1 });
|
|
313
320
|
}
|
|
@@ -400,18 +407,18 @@ class FilterBarComponent {
|
|
|
400
407
|
this.currentFilter.flt5 = undefined;
|
|
401
408
|
}
|
|
402
409
|
}
|
|
403
|
-
this.text.set(this.currentFilter.text);
|
|
404
|
-
this.text2.set(this.currentFilter.text2);
|
|
405
|
-
this.text3.set(this.currentFilter.text3);
|
|
410
|
+
this.text.set(this.currentFilter.text ?? '');
|
|
411
|
+
this.text2.set(this.currentFilter.text2 ?? '');
|
|
412
|
+
this.text3.set(this.currentFilter.text3 ?? '');
|
|
406
413
|
this.cdr.markForCheck();
|
|
407
414
|
}
|
|
408
415
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
409
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: FilterBarComponent, isStandalone: true, selector: "filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText: { classPropertyName: "canFilterByText", publicName: "canFilterByText", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText2: { classPropertyName: "canFilterByText2", publicName: "canFilterByText2", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText3: { classPropertyName: "canFilterByText3", publicName: "canFilterByText3", isSignal: true, isRequired: false, transformFunction: null }, initialText: { classPropertyName: "initialText", publicName: "initialText", isSignal: true, isRequired: false, transformFunction: null }, initialText2: { classPropertyName: "initialText2", publicName: "initialText2", isSignal: true, isRequired: false, transformFunction: null }, initialText3: { classPropertyName: "initialText3", publicName: "initialText3", isSignal: true, isRequired: false, transformFunction: null }, textName: { classPropertyName: "textName", publicName: "textName", isSignal: true, isRequired: false, transformFunction: null }, text2Name: { classPropertyName: "text2Name", publicName: "text2Name", isSignal: true, isRequired: false, transformFunction: null }, text3Name: { classPropertyName: "text3Name", publicName: "text3Name", isSignal: true, isRequired: false, transformFunction: null }, textLength: { classPropertyName: "textLength", publicName: "textLength", isSignal: true, isRequired: false, transformFunction: null }, text2Length: { classPropertyName: "text2Length", publicName: "text2Length", isSignal: true, isRequired: false, transformFunction: null }, text3Length: { classPropertyName: "text3Length", publicName: "text3Length", isSignal: true, isRequired: false, transformFunction: null }, showTextSearchButton: { classPropertyName: "showTextSearchButton", publicName: "showTextSearchButton", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n @if (canFilterByText()) {\r\n <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca per {{textName()}}...</mat-label>\r\n <input matInput name=\"_text\" [ngModel]=\"text()\" (ngModelChange)=\"text.set($event)\" maxlength=\"100\" #_text=\"ngModel\"\r\n (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n @if (text()) {\r\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n (click)=\"text.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (showTextSearchButton()) {\r\n <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n matTooltip=\"Trova\">\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n @if (canFilterByText2()) {\r\n <mat-form-field \r\n [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n <input matInput name=\"_text2\" [ngModel]=\"text2()\" (ngModelChange)=\"text2.set($event)\" maxlength=\"100\" #_text2=\"ngModel\"\r\n (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n @if (text2()) {\r\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n (click)=\"text2.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n @if (canFilterByText3()) {\r\n <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n <input matInput name=\"_text3\" [ngModel]=\"text3()\" (ngModelChange)=\"text3.set($event)\" maxlength=\"100\" #_text3=\"ngModel\"\r\n (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n @if (text3()) {\r\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n (click)=\"text3.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div fxFlex.lt-sm=\"100\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n @if (canFilterByFlt1() && flt1()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \r\n (click)=\"applyFilterAction(1, false)\">\r\n \r\n @if (!currentFilter.flt1) {\r\n <span>{{flt1()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt1) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt1() && flt1()?.items) {\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n >\r\n \r\n @if (!currentFilter.flt1) {\r\n <span>{{flt1()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n @for (f of flt1()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt1()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt2() && flt2()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \r\n (click)=\"applyFilterAction(2, false)\">\r\n \r\n @if (!currentFilter.flt2) {\r\n <span>{{flt2()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt2) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt2() && flt2()?.items) {\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n >\r\n \r\n @if (!currentFilter.flt2) {\r\n <span>{{flt2()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n @for (f of flt2()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt2()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt3() && flt3()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \r\n (click)=\"applyFilterAction(3, false)\">\r\n \r\n @if (!currentFilter.flt3) {\r\n <span>{{flt3()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt3) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt3() && flt3()?.items) {\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n >\r\n \r\n @if (!currentFilter.flt3) {\r\n <span>{{flt3()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n @for (f of flt3()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt3()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt4() && flt4()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \r\n (click)=\"applyFilterAction(4, false)\">\r\n \r\n @if (!currentFilter.flt4) {\r\n <span>{{flt4()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt4) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt4() && flt4()?.items) {\r\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n >\r\n \r\n @if (!currentFilter.flt4) {\r\n <span>{{flt4()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n @for (f of flt4()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt4()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt5() && flt5()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \r\n (click)=\"applyFilterAction(5, false)\">\r\n \r\n @if (!currentFilter.flt5) {\r\n <span>{{flt5()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt5) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt5() && flt5()?.items) {\r\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n >\r\n \r\n @if (!currentFilter.flt5) {\r\n <span>{{flt5()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n @for (f of flt5()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt5()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n @if (currentFilter.filtered() && canClearAllFilters()) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n (click)=\"clearAllFilters()\">\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.filterbox-button{max-width:200px;white-space:normal;text-align:center;display:-webkit-box;display:inline-block;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}.filterbox-selected{font-weight:800!important}.filterbox-filtered{border-radius:12px;background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}@media(prefers-color-scheme:dark){.filterbox-filtered{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.FxLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg] ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.FxFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg] ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1.FxLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg] ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FxLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg] ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.FxFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg] ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1.FxFlexFillDirective, selector: " [fxFlexFill], [fxFill], [fxFlexFill.xs], [fxFlexFill.sm], [fxFlexFill.md], [fxFlexFill.lg], [fxFlexFill.xl], [fxFlexFill.lt-sm], [fxFlexFill.lt-md], [fxFlexFill.lt-lg], [fxFlexFill.lt-xl], [fxFlexFill.gt-xs], [fxFlexFill.gt-sm], [fxFlexFill.gt-md], [fxFlexFill.gt-lg] ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: FilterBarComponent, isStandalone: true, selector: "filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText: { classPropertyName: "canFilterByText", publicName: "canFilterByText", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText2: { classPropertyName: "canFilterByText2", publicName: "canFilterByText2", isSignal: true, isRequired: false, transformFunction: null }, canFilterByText3: { classPropertyName: "canFilterByText3", publicName: "canFilterByText3", isSignal: true, isRequired: false, transformFunction: null }, initialText: { classPropertyName: "initialText", publicName: "initialText", isSignal: true, isRequired: false, transformFunction: null }, initialText2: { classPropertyName: "initialText2", publicName: "initialText2", isSignal: true, isRequired: false, transformFunction: null }, initialText3: { classPropertyName: "initialText3", publicName: "initialText3", isSignal: true, isRequired: false, transformFunction: null }, textName: { classPropertyName: "textName", publicName: "textName", isSignal: true, isRequired: false, transformFunction: null }, text2Name: { classPropertyName: "text2Name", publicName: "text2Name", isSignal: true, isRequired: false, transformFunction: null }, text3Name: { classPropertyName: "text3Name", publicName: "text3Name", isSignal: true, isRequired: false, transformFunction: null }, textLength: { classPropertyName: "textLength", publicName: "textLength", isSignal: true, isRequired: false, transformFunction: null }, text2Length: { classPropertyName: "text2Length", publicName: "text2Length", isSignal: true, isRequired: false, transformFunction: null }, text3Length: { classPropertyName: "text3Length", publicName: "text3Length", isSignal: true, isRequired: false, transformFunction: null }, showTextSearchButton: { classPropertyName: "showTextSearchButton", publicName: "showTextSearchButton", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\n [class.filterbox-filtered]=\"currentFilter.filtered()\">\n <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\n <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\n @if (canFilterByText()) {\n <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\n <mat-label>Cerca per {{textName()}}...</mat-label>\n <input matInput [formField]=\"textForm\"\n (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n @if (text()) {\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n (click)=\"text.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if (showTextSearchButton()) {\n <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\n matTooltip=\"Trova\">\n <mat-icon>search</mat-icon>\n </button>\n }\n </mat-form-field>\n }\n @if (canFilterByText2()) {\n <mat-form-field \n [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\n subscriptSizing=\"dynamic\">\n <mat-label>Cerca per {{text2Name()}}...</mat-label>\n <input matInput [formField]=\"text2Form\"\n (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n @if (text2()) {\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n (click)=\"text2.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n }\n @if (canFilterByText3()) {\n <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\n subscriptSizing=\"dynamic\">\n <mat-label>Cerca per {{text3Name()}}...</mat-label>\n <input matInput [formField]=\"text3Form\"\n (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n @if (text3()) {\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n (click)=\"text3.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n }\n </div>\n </div>\n }\n <div fxFlex.lt-sm=\"100\">\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\n @if (canFilterByFlt1() && flt1()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \n (click)=\"applyFilterAction(1, false)\">\n \n @if (!currentFilter.flt1) {\n <span>{{flt1()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt1) {\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt1() && flt1()?.items) {\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\n >\n \n @if (!currentFilter.flt1) {\n <span>{{flt1()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt1=\"matMenu\">\n @for (f of flt1()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt1()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt2() && flt2()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \n (click)=\"applyFilterAction(2, false)\">\n \n @if (!currentFilter.flt2) {\n <span>{{flt2()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt2) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt2() && flt2()?.items) {\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\n >\n \n @if (!currentFilter.flt2) {\n <span>{{flt2()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt2=\"matMenu\">\n @for (f of flt2()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt2()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt3() && flt3()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \n (click)=\"applyFilterAction(3, false)\">\n \n @if (!currentFilter.flt3) {\n <span>{{flt3()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt3) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt3() && flt3()?.items) {\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\n >\n \n @if (!currentFilter.flt3) {\n <span>{{flt3()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt3=\"matMenu\">\n @for (f of flt3()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt3()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt4() && flt4()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \n (click)=\"applyFilterAction(4, false)\">\n \n @if (!currentFilter.flt4) {\n <span>{{flt4()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt4) {\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt4() && flt4()?.items) {\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\n >\n \n @if (!currentFilter.flt4) {\n <span>{{flt4()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt4=\"matMenu\">\n @for (f of flt4()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt4()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt5() && flt5()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \n (click)=\"applyFilterAction(5, false)\">\n \n @if (!currentFilter.flt5) {\n <span>{{flt5()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt5) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt5() && flt5()?.items) {\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\n >\n \n @if (!currentFilter.flt5) {\n <span>{{flt5()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt5=\"matMenu\">\n @for (f of flt5()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt5()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n </div>\n </div>\n </div>\n <div>\n @if (currentFilter.filtered() && canClearAllFilters()) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\n (click)=\"clearAllFilters()\">\n <mat-icon>filter_alt_off</mat-icon>\n </button>\n }\n </div>\n</div>\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.filterbox-button{max-width:200px;white-space:normal;text-align:center;display:-webkit-box;display:inline-block;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}.filterbox-selected{font-weight:800!important}.filterbox-filtered{border-radius:12px;background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}@media(prefers-color-scheme:dark){.filterbox-filtered{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.FxLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg] ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.FxFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg] ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1.FxLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg] ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FxLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg] ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.FxFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg] ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1.FxFlexFillDirective, selector: " [fxFlexFill], [fxFill], [fxFlexFill.xs], [fxFlexFill.sm], [fxFlexFill.md], [fxFlexFill.lg], [fxFlexFill.xl], [fxFlexFill.lt-sm], [fxFlexFill.lt-md], [fxFlexFill.lt-lg], [fxFlexFill.lt-xl], [fxFlexFill.gt-xs], [fxFlexFill.gt-sm], [fxFlexFill.gt-md], [fxFlexFill.gt-lg] ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
410
417
|
}
|
|
411
418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FilterBarComponent, decorators: [{
|
|
412
419
|
type: Component,
|
|
413
|
-
args: [{ selector: "filter-bar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatFormFieldModule, MatInputModule,
|
|
414
|
-
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\r\n [class.filterbox-filtered]=\"currentFilter.filtered()\">\r\n <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\r\n @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\r\n <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\r\n @if (canFilterByText()) {\r\n <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca per {{textName()}}...</mat-label>\r\n <input matInput name=\"_text\" [ngModel]=\"text()\" (ngModelChange)=\"text.set($event)\" maxlength=\"100\" #_text=\"ngModel\"\r\n (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n @if (text()) {\r\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n (click)=\"text.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (showTextSearchButton()) {\r\n <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\r\n matTooltip=\"Trova\">\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n @if (canFilterByText2()) {\r\n <mat-form-field \r\n [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca per {{text2Name()}}...</mat-label>\r\n <input matInput name=\"_text2\" [ngModel]=\"text2()\" (ngModelChange)=\"text2.set($event)\" maxlength=\"100\" #_text2=\"ngModel\"\r\n (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n @if (text2()) {\r\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n (click)=\"text2.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n @if (canFilterByText3()) {\r\n <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\r\n subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca per {{text3Name()}}...</mat-label>\r\n <input matInput name=\"_text3\" [ngModel]=\"text3()\" (ngModelChange)=\"text3.set($event)\" maxlength=\"100\" #_text3=\"ngModel\"\r\n (keyup.Enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\r\n @if (text3()) {\r\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\r\n (click)=\"text3.set(undefined); applyTextFilter();\" matTooltip=\"Azzera\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n <div fxFlex.lt-sm=\"100\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\r\n @if (canFilterByFlt1() && flt1()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \r\n (click)=\"applyFilterAction(1, false)\">\r\n \r\n @if (!currentFilter.flt1) {\r\n <span>{{flt1()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt1) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt1() && flt1()?.items) {\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\r\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\r\n >\r\n \r\n @if (!currentFilter.flt1) {\r\n <span>{{flt1()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt1=\"matMenu\">\r\n @for (f of flt1()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt1()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt2() && flt2()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \r\n (click)=\"applyFilterAction(2, false)\">\r\n \r\n @if (!currentFilter.flt2) {\r\n <span>{{flt2()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt2) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt2() && flt2()?.items) {\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\r\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\r\n >\r\n \r\n @if (!currentFilter.flt2) {\r\n <span>{{flt2()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt2=\"matMenu\">\r\n @for (f of flt2()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt2()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt3() && flt3()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \r\n (click)=\"applyFilterAction(3, false)\">\r\n \r\n @if (!currentFilter.flt3) {\r\n <span>{{flt3()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt3) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt3() && flt3()?.items) {\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\r\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\r\n >\r\n \r\n @if (!currentFilter.flt3) {\r\n <span>{{flt3()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt3=\"matMenu\">\r\n @for (f of flt3()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt3()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt4() && flt4()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \r\n (click)=\"applyFilterAction(4, false)\">\r\n \r\n @if (!currentFilter.flt4) {\r\n <span>{{flt4()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt4) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt4() && flt4()?.items) {\r\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\r\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\r\n >\r\n \r\n @if (!currentFilter.flt4) {\r\n <span>{{flt4()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt4=\"matMenu\">\r\n @for (f of flt4()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt4()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n\r\n @if (canFilterByFlt5() && flt5()?.action) {\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\r\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \r\n (click)=\"applyFilterAction(5, false)\">\r\n \r\n @if (!currentFilter.flt5) {\r\n <span>{{flt5()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n }\r\n </button>\r\n @if (currentFilter.flt5) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\r\n (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n } @else if (canFilterByFlt5() && flt5()?.items) {\r\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\r\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\r\n >\r\n \r\n @if (!currentFilter.flt5) {\r\n <span>{{flt5()!.title}}</span>\r\n } @else {\r\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\r\n }\r\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\r\n <mat-menu #menuApplyFilterFlt5=\"matMenu\">\r\n @for (f of flt5()!.items; track $index) {\r\n @if (f.divider) {\r\n <mat-divider></mat-divider>\r\n }\r\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\r\n <span [innerHTML]=\"f.title | safeHtml\"></span>\r\n </button>\r\n }\r\n <mat-divider></mat-divider>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\r\n <button type=\"button\" mat-button (click)=\"clearFilter(flt5()!.items![0].group)\"\r\n aria-label=\"Azzera\">\r\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\r\n </button>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n @if (currentFilter.filtered() && canClearAllFilters()) {\r\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\r\n (click)=\"clearAllFilters()\">\r\n <mat-icon>filter_alt_off</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.filterbox-button{max-width:200px;white-space:normal;text-align:center;display:-webkit-box;display:inline-block;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}.filterbox-selected{font-weight:800!important}.filterbox-filtered{border-radius:12px;background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}@media(prefers-color-scheme:dark){.filterbox-filtered{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}}\n"] }]
|
|
420
|
+
args: [{ selector: "filter-bar", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexLayoutModule, MatFormFieldModule, MatInputModule, FormField,
|
|
421
|
+
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"filterbox\"\n [class.filterbox-filtered]=\"currentFilter.filtered()\">\n <div fxFlex=\"*\" fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n @if (canFilterByText() || canFilterByText2() || canFilterByText3()) {\n <div fxFlex.lt-sm=\"100\" fxFlexAlign=\"center\">\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill style=\"padding:4px;\">\n @if (canFilterByText()) {\n <mat-form-field [style.width]=\"textLength() ?? '100%'\" [appearance]=\"appearance()\" subscriptSizing=\"dynamic\">\n <mat-label>Cerca per {{textName()}}...</mat-label>\n <input matInput [formField]=\"textForm\"\n (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n @if (text()) {\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n (click)=\"text.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if (showTextSearchButton()) {\n <button type=\"button\" matSuffix mat-icon-button aria-label=\"Trova\" (click)=\"applyTextFilter();\"\n matTooltip=\"Trova\">\n <mat-icon>search</mat-icon>\n </button>\n }\n </mat-form-field>\n }\n @if (canFilterByText2()) {\n <mat-form-field \n [style.width]=\"text2Length() ?? '100%'\" [appearance]=\"appearance()\"\n subscriptSizing=\"dynamic\">\n <mat-label>Cerca per {{text2Name()}}...</mat-label>\n <input matInput [formField]=\"text2Form\"\n (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n @if (text2()) {\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n (click)=\"text2.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n }\n @if (canFilterByText3()) {\n <mat-form-field [style.width]=\"text3Length() ?? '100%'\" [appearance]=\"appearance()\"\n subscriptSizing=\"dynamic\">\n <mat-label>Cerca per {{text3Name()}}...</mat-label>\n <input matInput [formField]=\"text3Form\"\n (keyup.enter)=\"applyTextFilter()\" matTooltip=\"Premi INVIO per avviare la ricerca\">\n @if (text3()) {\n <button type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Pulisci\"\n (click)=\"text3.set(''); applyTextFilter();\" matTooltip=\"Azzera\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n }\n </div>\n </div>\n }\n <div fxFlex.lt-sm=\"100\">\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\" fxFill>\n @if (canFilterByFlt1() && flt1()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" \n (click)=\"applyFilterAction(1, false)\">\n \n @if (!currentFilter.flt1) {\n <span>{{flt1()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt1) {\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(1, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt1() && flt1()?.items) {\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\"\n [attr.aria-label]=\"flt1()!.tooltip || 'Filtra per ' + flt1()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt1\"\n >\n \n @if (!currentFilter.flt1) {\n <span>{{flt1()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt1Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt1=\"matMenu\">\n @for (f of flt1()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt1()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt2() && flt2()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" \n (click)=\"applyFilterAction(2, false)\">\n \n @if (!currentFilter.flt2) {\n <span>{{flt2()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt2) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(2, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt2() && flt2()?.items) {\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\"\n [attr.aria-label]=\"flt2()!.tooltip || 'Filtra per ' + flt2()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt2\"\n >\n \n @if (!currentFilter.flt2) {\n <span>{{flt2()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt2Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt2=\"matMenu\">\n @for (f of flt2()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt2()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt3() && flt3()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" \n (click)=\"applyFilterAction(3, false)\">\n \n @if (!currentFilter.flt3) {\n <span>{{flt3()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt3) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(3, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt3() && flt3()?.items) {\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\"\n [attr.aria-label]=\"flt3()!.tooltip || 'Filtra per ' + flt3()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt3\"\n >\n \n @if (!currentFilter.flt3) {\n <span>{{flt3()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt3Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt3=\"matMenu\">\n @for (f of flt3()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt3()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt4() && flt4()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" \n (click)=\"applyFilterAction(4, false)\">\n \n @if (!currentFilter.flt4) {\n <span>{{flt4()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt4) {\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(4, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt4() && flt4()?.items) {\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\"\n [attr.aria-label]=\"flt4()!.tooltip || 'Filtra per ' + flt4()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt4\"\n >\n \n @if (!currentFilter.flt4) {\n <span>{{flt4()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt4Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt4=\"matMenu\">\n @for (f of flt4()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt4()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n\n @if (canFilterByFlt5() && flt5()?.action) {\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n <button type=\"button\" class=\"filterbox-button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" \n (click)=\"applyFilterAction(5, false)\">\n \n @if (!currentFilter.flt5) {\n <span>{{flt5()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n }\n </button>\n @if (currentFilter.flt5) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera\" aria-label=\"Azzera\"\n (click)=\"applyFilterAction(5, true);\" class=\"small-icon-button\">\n <mat-icon>clear</mat-icon>\n </button>\n }\n </div>\n } @else if (canFilterByFlt5() && flt5()?.items) {\n <button fxFlexAlign=\"center\" class=\"filterbox-button\" type=\"button\" mat-button [matTooltip]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\"\n [attr.aria-label]=\"flt5()!.tooltip || 'Filtra per ' + flt5()!.title\" [matMenuTriggerFor]=\"menuApplyFilterFlt5\"\n >\n \n @if (!currentFilter.flt5) {\n <span>{{flt5()!.title}}</span>\n } @else {\n <span class=\"filterbox-selected\" [innerHtml]=\"currentFilter.flt5Name | safeHtml\"></span>\n }\n <mat-icon class=\"icon-menu-drop-down\">expand_more</mat-icon>\n <mat-menu #menuApplyFilterFlt5=\"matMenu\">\n @for (f of flt5()!.items; track $index) {\n @if (f.divider) {\n <mat-divider></mat-divider>\n }\n <button mat-menu-item (click)=\"applyFilter(f)\" [attr.aria-label]=\"f.description\" style=\"min-width: 200px\">\n <span [innerHTML]=\"f.title | safeHtml\"></span>\n </button>\n }\n <mat-divider></mat-divider>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\n <div fxLayoutAlign=\"end\" style=\"width: 100%; min-width: 200px; padding: 4px 4px 0 4px;\">\n <button type=\"button\" mat-button (click)=\"clearFilter(flt5()!.items![0].group)\"\n aria-label=\"Azzera\">\n <mat-icon style=\"font-size:18px; height: 18px; width:18px;\">clear</mat-icon> Azzera\n </button>\n </div>\n </div>\n </mat-menu>\n </button>\n }\n </div>\n </div>\n </div>\n <div>\n @if (currentFilter.filtered() && canClearAllFilters()) {\n <button type=\"button\" mat-icon-button matTooltip=\"Azzera tutti i filtri\" aria-label=\"Azzera tutti i filtri\"\n (click)=\"clearAllFilters()\">\n <mat-icon>filter_alt_off</mat-icon>\n </button>\n }\n </div>\n</div>\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.filterbox{border-radius:auto;background-color:transparent;padding:4px}.filterbox-button{max-width:200px;white-space:normal;text-align:center;display:-webkit-box;display:inline-block;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}.filterbox-selected{font-weight:800!important}.filterbox-filtered{border-radius:12px;background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}@media(prefers-color-scheme:dark){.filterbox-filtered{background-color:var(--ars-filterbox-filtered-background-color, #f9fbe7)}}\n"] }]
|
|
415
422
|
}], ctorParameters: () => [], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], canFilterByText: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText", required: false }] }], canFilterByText2: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText2", required: false }] }], canFilterByText3: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText3", required: false }] }], initialText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText", required: false }] }], initialText2: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText2", required: false }] }], initialText3: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText3", required: false }] }], textName: [{ type: i0.Input, args: [{ isSignal: true, alias: "textName", required: false }] }], text2Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2Name", required: false }] }], text3Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3Name", required: false }] }], textLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "textLength", required: false }] }], text2Length: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2Length", required: false }] }], text3Length: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3Length", required: false }] }], showTextSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTextSearchButton", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
|
|
416
423
|
|
|
417
424
|
/*
|