@arsedizioni/ars-utils 22.5.16 → 22.5.18
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 -175
- package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-core.validators.mjs +115 -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.dialogs.auth.mjs +116 -49
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs +34 -13
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs +149 -48
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.prompt.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.mjs +58 -44
- package/fesm2022/arsedizioni-ars-utils-ui.dialogs.select.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 -9
- package/types/arsedizioni-ars-utils-core.validators.d.ts +52 -1
- package/types/arsedizioni-ars-utils-ui.controls.d.ts +16 -4
- package/types/arsedizioni-ars-utils-ui.dialogs.auth.d.ts +37 -9
- package/types/arsedizioni-ars-utils-ui.dialogs.d.ts +29 -21
- package/types/arsedizioni-ars-utils-ui.dialogs.prompt.d.ts +56 -7
- package/types/arsedizioni-ars-utils-ui.dialogs.select.d.ts +13 -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
|
@@ -12,8 +12,8 @@ import * as i2 from '@arsedizioni/ars-utils/ui';
|
|
|
12
12
|
import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
|
|
13
13
|
import { Subject, auditTime, animationFrameScheduler } from 'rxjs';
|
|
14
14
|
import * as i1 from '@angular/forms';
|
|
15
|
-
import { FormsModule } from '@angular/forms';
|
|
16
15
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
16
|
+
import { form, FormField } from '@angular/forms/signals';
|
|
17
17
|
import * as i7 from '@angular/material/badge';
|
|
18
18
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
19
19
|
import * as i5$1 from '@angular/material/chips';
|
|
@@ -302,18 +302,16 @@ class ChipsSelectorComponent {
|
|
|
302
302
|
*/
|
|
303
303
|
setValue(value, propagate) {
|
|
304
304
|
this._value = value;
|
|
305
|
-
|
|
306
|
-
this.singleSelection = undefined;
|
|
305
|
+
const selection = [];
|
|
307
306
|
if (this._value) {
|
|
308
307
|
this.options().forEach(n => {
|
|
309
308
|
if (this._value?.findIndex((x) => x.value === n.value) !== -1) {
|
|
310
|
-
|
|
309
|
+
selection.push(n);
|
|
311
310
|
}
|
|
312
311
|
});
|
|
313
|
-
if (this.selection.length > 0) {
|
|
314
|
-
this.singleSelection = this.selection[0];
|
|
315
|
-
}
|
|
316
312
|
}
|
|
313
|
+
this.selection.set(selection);
|
|
314
|
+
this.singleSelection.set(selection.length > 0 ? selection[0] : undefined);
|
|
317
315
|
this.cdr.markForCheck();
|
|
318
316
|
if (propagate) {
|
|
319
317
|
this.propagateChange(this._value);
|
|
@@ -402,8 +400,20 @@ class ChipsSelectorComponent {
|
|
|
402
400
|
this.propagateTouched = () => { };
|
|
403
401
|
this.renderer = inject(Renderer2);
|
|
404
402
|
this.cdr = inject(ChangeDetectorRef);
|
|
405
|
-
/**
|
|
406
|
-
|
|
403
|
+
/**
|
|
404
|
+
* Currently selected items. Kept loosely typed on purpose: in multi-select mode the
|
|
405
|
+
* bound controls write an array, while in single-select mode mat-select / the chip
|
|
406
|
+
* listbox write a single item; `getSelection()` normalizes both shapes.
|
|
407
|
+
*/
|
|
408
|
+
this.selection = signal([], /* @ts-ignore */
|
|
409
|
+
...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
410
|
+
/** The single selected item — used in `button` collapsed-display mode. */
|
|
411
|
+
this.singleSelection = signal(undefined, /* @ts-ignore */
|
|
412
|
+
...(ngDevMode ? [{ debugName: "singleSelection" }] : /* istanbul ignore next */ []));
|
|
413
|
+
/** Root signal form bound to the internal mat-select / chip listbox. */
|
|
414
|
+
this.selectionForm = form(this.selection);
|
|
415
|
+
/** Root signal form bound to the internal button-selector in `button` collapsed mode. */
|
|
416
|
+
this.singleForm = form(this.singleSelection);
|
|
407
417
|
if (this.ngControl != null) {
|
|
408
418
|
this.ngControl.valueAccessor = this;
|
|
409
419
|
}
|
|
@@ -471,15 +481,16 @@ class ChipsSelectorComponent {
|
|
|
471
481
|
*/
|
|
472
482
|
getSelection() {
|
|
473
483
|
const value = !this.multiple() && this.collapsed() && this.collapsedDisplayMode() === 'button'
|
|
474
|
-
? this.singleSelection
|
|
475
|
-
: this.selection;
|
|
484
|
+
? this.singleSelection()
|
|
485
|
+
: this.selection();
|
|
476
486
|
if (Array.isArray(value)) {
|
|
477
487
|
return value;
|
|
478
488
|
}
|
|
479
489
|
return value ? [value] : [];
|
|
480
490
|
}
|
|
481
491
|
/**
|
|
482
|
-
* Schedules a value update after a short delay,
|
|
492
|
+
* Schedules a value update after a short delay, coalescing rapid selection changes
|
|
493
|
+
* before the value is propagated to the outer form.
|
|
483
494
|
*/
|
|
484
495
|
updateValue() {
|
|
485
496
|
setTimeout(() => {
|
|
@@ -576,18 +587,18 @@ class ChipsSelectorComponent {
|
|
|
576
587
|
}
|
|
577
588
|
}
|
|
578
589
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ChipsSelectorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
579
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"chips-selector\">\
|
|
590
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ChipsSelectorComponent, isStandalone: true, selector: "chips-selector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null }, collapsedDisplayMode: { classPropertyName: "collapsedDisplayMode", publicName: "collapsedDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, collapseAtContainer: { classPropertyName: "collapseAtContainer", publicName: "collapseAtContainer", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, mustSelect: { classPropertyName: "mustSelect", publicName: "mustSelect", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, padAt: { classPropertyName: "padAt", publicName: "padAt", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"chips-selector\">\n @if(containerWidth() > 0) {\n @if(collapsed()) {\n @if(collapsedDisplayMode() === 'dropdown') {\n <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\n @if(label()) {\n <mat-label>{{label()}}</mat-label>\n }\n <mat-select [formField]=\"selectionForm\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\n <mat-select-trigger>\n @if (value && (value.length || 0) > 0) {\n {{value[0].shortName ?? value[0].name}}\n }\n @if (value && (value.length || 0) > 1) {\n <span class=\"collapsed-additional-selection\">\n (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\n </span>\n }\n </mat-select-trigger>\n @for (o of options(); track $index) {\n <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\n {{o.name}}\n @if(o.bag) {\n ({{o.bag}})\n }\n </mat-option>\n }\n </mat-select>\n @if (value && (value.length || 0) > 0) {\n <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n } @else {\n <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [formField]=\"singleForm\"\n (selected)=\"updateValue()\"></button-selector>\n\n }\n } @else {\n <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\n [formField]=\"selectionForm\" (change)=\"updateValue()\">\n @for (o of options(); track $index; let i = $index) {\n <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\n [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\n o.name}}</mat-chip-option>\n }\n </mat-chip-listbox>\n }\n }\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i5$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ButtonSelectorComponent, selector: "button-selector", inputs: ["disabled", "width", "border", "borderRadius", "label", "labelSelected", "options", "autoSelect"], outputs: ["changed", "selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
580
591
|
}
|
|
581
592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ChipsSelectorComponent, decorators: [{
|
|
582
593
|
type: Component,
|
|
583
|
-
args: [{ selector: 'chips-selector', standalone: true, imports: [FlexLayoutModule,
|
|
594
|
+
args: [{ selector: 'chips-selector', standalone: true, imports: [FlexLayoutModule, FormField, MatFormFieldModule, MatSelectModule,
|
|
584
595
|
MatChipsModule, MatIconModule, MatButtonModule, MatBadgeModule, MatTooltipModule,
|
|
585
596
|
ButtonSelectorComponent
|
|
586
597
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
587
598
|
'[id]': 'id',
|
|
588
599
|
'[class.floating]': 'shouldLabelFloat',
|
|
589
600
|
'[attr.aria-describedBy]': 'describedBy',
|
|
590
|
-
}, template: "<div [id]=\"containerId\" class=\"chips-selector\">\
|
|
601
|
+
}, template: "<div [id]=\"containerId\" class=\"chips-selector\">\n @if(containerWidth() > 0) {\n @if(collapsed()) {\n @if(collapsedDisplayMode() === 'dropdown') {\n <mat-form-field [style.min-width]=\"collapsedWidth() > 0 ? collapsedWidth()+'px' : '100%'\" subscriptSizing=\"dynamic\">\n @if(label()) {\n <mat-label>{{label()}}</mat-label>\n }\n <mat-select [formField]=\"selectionForm\" [multiple]=\"multiple()\" (selectionChange)=\"updateValue()\">\n <mat-select-trigger>\n @if (value && (value.length || 0) > 0) {\n {{value[0].shortName ?? value[0].name}}\n }\n @if (value && (value.length || 0) > 1) {\n <span class=\"collapsed-additional-selection\">\n (+{{(value.length || 0) - 1}} {{value.length === 2 ? 'altro' : 'altri'}})\n </span>\n }\n </mat-select-trigger>\n @for (o of options(); track $index) {\n <mat-option [value]=\"o\" [disabled]=\"o.disabled\">\n {{o.name}}\n @if(o.bag) {\n ({{o.bag}})\n }\n </mat-option>\n }\n </mat-select>\n @if (value && (value.length || 0) > 0) {\n <button matSuffix tabindex=\"-1\" mat-icon-button aria-label=\"Pulisci\" (click)=\"clear($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n } @else {\n <button-selector [label]=\"label()\" [options]=\"options()\" [width]=\"collapsedWidth()\" [formField]=\"singleForm\"\n (selected)=\"updateValue()\"></button-selector>\n\n }\n } @else {\n <mat-chip-listbox [class]=\"stacked() ? 'mat-mdc-chip-set-stacked' : ''\" [multiple]=\"multiple()\"\n [formField]=\"selectionForm\" (change)=\"updateValue()\">\n @for (o of options(); track $index; let i = $index) {\n <mat-chip-option [matBadge]=\"o.bag\" [matTooltip]=\"o.disabled === true ? 'Non disponibile' : (o.bagInfo ?? '')\" [selectable]=\"isSelectable(o)\" [value]=\"o\"\n [disabled]=\"o.disabled\" [class.chip-padded]=\"i < padAt()\">{{o.shortName ??\n o.name}}</mat-chip-option>\n }\n </mat-chip-listbox>\n }\n }\n</div>", styles: [".chips-selector{width:100%}.chips-selector .collapsed-additional-selection{opacity:.75;font-size:.75em}.chip-padded{margin-right:10px!important}.mdc-evolution-chip--disabled{pointer-events:auto!important}\n"] }]
|
|
591
602
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
592
603
|
type: Optional
|
|
593
604
|
}, {
|
|
@@ -705,6 +716,8 @@ class TreePickerComponent {
|
|
|
705
716
|
/** Current filter text. */
|
|
706
717
|
this.filterText = signal('', /* @ts-ignore */
|
|
707
718
|
...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
719
|
+
/** Root signal form bound to the filter text input. */
|
|
720
|
+
this.filterForm = form(this.filterText);
|
|
708
721
|
/** Nodes matching the current filter text, in nodeMap iteration order. */
|
|
709
722
|
this.filteredItems = signal([], /* @ts-ignore */
|
|
710
723
|
...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
|
|
@@ -915,12 +928,12 @@ class TreePickerComponent {
|
|
|
915
928
|
}
|
|
916
929
|
}
|
|
917
930
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TreePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
918
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: TreePickerComponent, isStandalone: true, selector: "tree-picker", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptionEmpty: { classPropertyName: "descriptionEmpty", publicName: "descriptionEmpty", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, maxDepthOverrides: { classPropertyName: "maxDepthOverrides", publicName: "maxDepthOverrides", isSignal: true, isRequired: false, transformFunction: null }, minDepth: { classPropertyName: "minDepth", publicName: "minDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionCount: "selectionCount", changed: "changed" }, viewQueries: [{ propertyName: "_treeRef", first: true, predicate: (MatTree), descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\r\n <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\r\n <ng-template mat-tab-label>\r\n Seleziona\r\n <mat-icon\r\n style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\r\n [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\r\n matTooltipPosition=\"above\">\r\n info\r\n </mat-icon>\r\n </ng-template>\r\n <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n <div fxFlex>\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n <div fxFlex fxHide.xs>\r\n <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\r\n subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca...</mat-label>\r\n <input type=\"text\" (keyup)=\"doFilter()\" matInput [ngModel]=\"filterText()\"\r\n (ngModelChange)=\"filterText.set($event)\"\r\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n @if (filterText()) {\r\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n @if (filteredItems().length > 0) {\r\n <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n </div>\r\n <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n <button mat-icon-button (click)=\"nextFiltered()\">\r\n <mat-icon aria-label=\"Vai al prossimo\"\r\n matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n <mat-icon>unfold_more</mat-icon>\r\n </button>\r\n <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n <mat-icon>unfold_less</mat-icon>\r\n </button>\r\n <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n (click)=\"clearAll()\">\r\n <mat-icon>deselect</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n <!-- Leaf node -->\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n [attr.data-node-id]=\"node.id\">\r\n <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n @if (isSelectable(node)) {\r\n <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n <span class=\"small\">{{node.name}}</span>\r\n </mat-checkbox>\r\n } @else {\r\n <div class=\"tree-node-label-only\">\r\n <span class=\"small\">{{node.name}}</span>\r\n </div>\r\n }\r\n </mat-tree-node>\r\n <!-- Expandable node with children -->\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\r\n [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n [class.tree-node-no-select]=\"!isSelectable(node)\"\r\n [attr.data-node-id]=\"node.id\">\r\n <button mat-icon-button matTreeNodeToggle>\r\n <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n </button>\r\n @if (isSelectable(node)) {\r\n <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n <span class=\"small\">{{node.name}}</span>\r\n </mat-checkbox>\r\n } @else {\r\n <div class=\"tree-node-label-only\">\r\n <span class=\"small\">{{node.name}}</span>\r\n </div>\r\n }\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n </div>\r\n </mat-tab>\r\n <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\r\n style=\"height: 100%;\">\r\n <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n <div fxFlex>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\r\n @if (!hasSelection()) {\r\n <mat-icon>info</mat-icon>\r\n <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\r\n } @else {\r\n <div fxFlex=\"*\" fxLayoutAlign=\"end\">\r\n <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\r\n <mat-icon>deselect</mat-icon> Azzera tutto\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\r\n <mat-chip-set>\r\n @for (id of selection(); track id) {\r\n @let node = nodeById(id);\r\n @if (node && isChipVisible(id)) {\r\n <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\r\n {{node.name}}\r\n @if (!disabled()) {\r\n <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\r\n }\r\n </mat-chip>\r\n }\r\n }\r\n </mat-chip-set>\r\n </div>\r\n </div>\r\n </mat-tab>\r\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.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: i2.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: i2.FxShowHideDirective, selector: " [fxShow], [fxHide], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg] ", inputs: ["fxShow", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i2.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: i2.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: i2.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: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: TreePickerComponent, isStandalone: true, selector: "tree-picker", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptionEmpty: { classPropertyName: "descriptionEmpty", publicName: "descriptionEmpty", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, maxDepthOverrides: { classPropertyName: "maxDepthOverrides", publicName: "maxDepthOverrides", isSignal: true, isRequired: false, transformFunction: null }, minDepth: { classPropertyName: "minDepth", publicName: "minDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionCount: "selectionCount", changed: "changed" }, viewQueries: [{ propertyName: "_treeRef", first: true, predicate: (MatTree), descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\n <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\n <ng-template mat-tab-label>\n Seleziona\n <mat-icon\n style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\n [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\n matTooltipPosition=\"above\">\n info\n </mat-icon>\n </ng-template>\n <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n <div fxFlex>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n <div fxFlex fxHide.xs>\n <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\n subscriptSizing=\"dynamic\">\n <mat-label>Cerca...</mat-label>\n <input type=\"text\" (keyup)=\"doFilter()\" matInput [formField]=\"filterForm\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\n (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\n @if (filterText()) {\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\n aria-label=\"Clear\" (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n @if (filteredItems().length > 0) {\n <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\n <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\n </div>\n <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\n <button mat-icon-button (click)=\"nextFiltered()\">\n <mat-icon aria-label=\"Vai al prossimo\"\n matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\n </button>\n </div>\n }\n <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\n <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\n <mat-icon>unfold_more</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\n <mat-icon>unfold_less</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\n (click)=\"clearAll()\">\n <mat-icon>deselect</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <div fxFlex=\"*\" style=\"overflow-y: auto;\">\n <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\n <!-- Leaf node -->\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\n class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n [class.tree-node-no-select]=\"!isSelectable(node)\"\n [attr.data-node-id]=\"node.id\">\n <button mat-icon-button disabled style=\"visibility: hidden\"></button>\n @if (isSelectable(node)) {\n <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n <span class=\"small\">{{node.name}}</span>\n </mat-checkbox>\n } @else {\n <div class=\"tree-node-label-only\">\n <span class=\"small\">{{node.name}}</span>\n </div>\n }\n </mat-tree-node>\n <!-- Expandable node with children -->\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\n [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n [class.tree-node-no-select]=\"!isSelectable(node)\"\n [attr.data-node-id]=\"node.id\">\n <button mat-icon-button matTreeNodeToggle>\n <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n @if (isSelectable(node)) {\n <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\n [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n <span class=\"small\">{{node.name}}</span>\n </mat-checkbox>\n } @else {\n <div class=\"tree-node-label-only\">\n <span class=\"small\">{{node.name}}</span>\n </div>\n }\n </mat-tree-node>\n </mat-tree>\n </div>\n </div>\n </mat-tab>\n <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\n style=\"height: 100%;\">\n <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n <div fxFlex>\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\n @if (!hasSelection()) {\n <mat-icon>info</mat-icon>\n <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\n } @else {\n <div fxFlex=\"*\" fxLayoutAlign=\"end\">\n <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\n <mat-icon>deselect</mat-icon> Azzera tutto\n </button>\n </div>\n }\n </div>\n </div>\n <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\n <mat-chip-set>\n @for (id of selection(); track id) {\n @let node = nodeById(id);\n @if (node && isChipVisible(id)) {\n <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\n {{node.name}}\n @if (!disabled()) {\n <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\n }\n </mat-chip>\n }\n }\n </mat-chip-set>\n </div>\n </div>\n </mat-tab>\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.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: FlexLayoutModule }, { kind: "directive", type: i2.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: i2.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: i2.FxShowHideDirective, selector: " [fxShow], [fxHide], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg] ", inputs: ["fxShow", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i2.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: i2.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: i2.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: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
919
932
|
}
|
|
920
933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TreePickerComponent, decorators: [{
|
|
921
934
|
type: Component,
|
|
922
935
|
args: [{ selector: 'tree-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTreeModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatChipsModule,
|
|
923
|
-
MatButtonModule, MatTooltipModule, MatFormFieldModule, MatInputModule,
|
|
936
|
+
MatButtonModule, MatTooltipModule, MatFormFieldModule, MatInputModule, FormField, FlexLayoutModule, SafeHtmlPipe], template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\n <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\n <ng-template mat-tab-label>\n Seleziona\n <mat-icon\n style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\n [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\n matTooltipPosition=\"above\">\n info\n </mat-icon>\n </ng-template>\n <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n <div fxFlex>\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n <div fxFlex fxHide.xs>\n <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\n subscriptSizing=\"dynamic\">\n <mat-label>Cerca...</mat-label>\n <input type=\"text\" (keyup)=\"doFilter()\" matInput [formField]=\"filterForm\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\n (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\n @if (filterText()) {\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\n aria-label=\"Clear\" (click)=\"clearFilter()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n @if (filteredItems().length > 0) {\n <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\n <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\n </div>\n <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\n <button mat-icon-button (click)=\"nextFiltered()\">\n <mat-icon aria-label=\"Vai al prossimo\"\n matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\n </button>\n </div>\n }\n <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\n <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\n <mat-icon>unfold_more</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\n <mat-icon>unfold_less</mat-icon>\n </button>\n <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\n (click)=\"clearAll()\">\n <mat-icon>deselect</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <div fxFlex=\"*\" style=\"overflow-y: auto;\">\n <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\n <!-- Leaf node -->\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\n class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n [class.tree-node-no-select]=\"!isSelectable(node)\"\n [attr.data-node-id]=\"node.id\">\n <button mat-icon-button disabled style=\"visibility: hidden\"></button>\n @if (isSelectable(node)) {\n <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n <span class=\"small\">{{node.name}}</span>\n </mat-checkbox>\n } @else {\n <div class=\"tree-node-label-only\">\n <span class=\"small\">{{node.name}}</span>\n </div>\n }\n </mat-tree-node>\n <!-- Expandable node with children -->\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\n [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n [class.tree-node-no-select]=\"!isSelectable(node)\"\n [attr.data-node-id]=\"node.id\">\n <button mat-icon-button matTreeNodeToggle>\n <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n </button>\n @if (isSelectable(node)) {\n <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\n [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n <span class=\"small\">{{node.name}}</span>\n </mat-checkbox>\n } @else {\n <div class=\"tree-node-label-only\">\n <span class=\"small\">{{node.name}}</span>\n </div>\n }\n </mat-tree-node>\n </mat-tree>\n </div>\n </div>\n </mat-tab>\n <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\n style=\"height: 100%;\">\n <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n <div fxFlex>\n <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\n @if (!hasSelection()) {\n <mat-icon>info</mat-icon>\n <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\n } @else {\n <div fxFlex=\"*\" fxLayoutAlign=\"end\">\n <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\n <mat-icon>deselect</mat-icon> Azzera tutto\n </button>\n </div>\n }\n </div>\n </div>\n <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\n <mat-chip-set>\n @for (id of selection(); track id) {\n @let node = nodeById(id);\n @if (node && isChipVisible(id)) {\n <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\n {{node.name}}\n @if (!disabled()) {\n <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\n }\n </mat-chip>\n }\n }\n </mat-chip-set>\n </div>\n </div>\n </mat-tab>\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"] }]
|
|
924
937
|
}], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptionEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionEmpty", required: false }] }], maxDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepth", required: false }] }], maxDepthOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepthOverrides", required: false }] }], minDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDepth", required: false }] }], selectionCount: [{ type: i0.Output, args: ["selectionCount"] }], changed: [{ type: i0.Output, args: ["changed"] }], _treeRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
|
|
925
938
|
|
|
926
939
|
/**
|