@arsedizioni/ars-utils 21.2.310 → 21.2.311
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-help.mjs +19 -36
- package/fesm2022/arsedizioni-ars-utils-help.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-support.ui.mjs +4 -10
- package/fesm2022/arsedizioni-ars-utils-support.ui.mjs.map +1 -1
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs +108 -42
- package/fesm2022/arsedizioni-ars-utils-ui.application.mjs.map +1 -1
- package/package.json +1 -1
- package/types/arsedizioni-ars-utils-clipper.ui.d.ts +1 -1
- package/types/arsedizioni-ars-utils-help.d.ts +4 -7
- package/types/arsedizioni-ars-utils-support.ui.d.ts +2 -4
- package/types/arsedizioni-ars-utils-ui.application.d.ts +32 -14
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, NgModule, effect, Input, Optional, Self, computed, booleanAttribute } from '@angular/core';
|
|
2
|
+
import { input, inject, Renderer2, ElementRef, afterNextRender, Directive, output, ChangeDetectorRef, signal, ChangeDetectionStrategy, Component, Injectable, DestroyRef, viewChild, NgModule, effect, Input, Optional, Self, computed, booleanAttribute, model } from '@angular/core';
|
|
3
3
|
import * as i14 from '@angular/material/paginator';
|
|
4
4
|
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
|
|
5
5
|
import { DialogService, OtpInputComponent, PaginatorIntl, UIService } from '@arsedizioni/ars-utils/ui';
|
|
@@ -401,16 +401,14 @@ class SelectTreeDialogComponent {
|
|
|
401
401
|
this.treeNodes = signal([], ...(ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []));
|
|
402
402
|
/** Currently selected tree node. */
|
|
403
403
|
this.currentNode = signal(undefined, ...(ngDevMode ? [{ debugName: "currentNode" }] : /* istanbul ignore next */ []));
|
|
404
|
-
/** Current filter text
|
|
405
|
-
this.filterText = '';
|
|
404
|
+
/** Current filter text. */
|
|
405
|
+
this.filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
406
406
|
/** Nodes matching the current filter text. */
|
|
407
407
|
this.filteredItems = signal([], ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
|
|
408
408
|
/** Index of the currently highlighted filtered node. */
|
|
409
409
|
this.filterIndex = signal(-1, ...(ngDevMode ? [{ debugName: "filterIndex" }] : /* istanbul ignore next */ []));
|
|
410
410
|
this.canAppend = signal(this.dialogData().canAppend || false, ...(ngDevMode ? [{ debugName: "canAppend" }] : /* istanbul ignore next */ []));
|
|
411
411
|
this.hasChild = (_, node) => !!(node.children?.length);
|
|
412
|
-
}
|
|
413
|
-
ngOnInit() {
|
|
414
412
|
this.tree.dataChange
|
|
415
413
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
416
414
|
.subscribe(data => {
|
|
@@ -462,7 +460,7 @@ class SelectTreeDialogComponent {
|
|
|
462
460
|
* Clear the active filter text.
|
|
463
461
|
*/
|
|
464
462
|
clearFilter() {
|
|
465
|
-
this.filterText
|
|
463
|
+
this.filterText.set('');
|
|
466
464
|
}
|
|
467
465
|
/**
|
|
468
466
|
* Filter the tree nodes by name.
|
|
@@ -470,11 +468,11 @@ class SelectTreeDialogComponent {
|
|
|
470
468
|
*/
|
|
471
469
|
doFilter(text) {
|
|
472
470
|
if (text)
|
|
473
|
-
this.filterText
|
|
471
|
+
this.filterText.set(text);
|
|
474
472
|
const results = [];
|
|
475
|
-
if (this.filterText) {
|
|
473
|
+
if (this.filterText()) {
|
|
476
474
|
this.getAllNodes(this.treeNodes()).forEach(n => {
|
|
477
|
-
if (n.name.toLowerCase().indexOf(this.filterText.toLowerCase()) !== -1) {
|
|
475
|
+
if (n.name.toLowerCase().indexOf(this.filterText().toLowerCase()) !== -1) {
|
|
478
476
|
results.push(n);
|
|
479
477
|
}
|
|
480
478
|
});
|
|
@@ -564,14 +562,14 @@ class SelectTreeDialogComponent {
|
|
|
564
562
|
this.append.emit({ parent: this.currentNode(), owner: this });
|
|
565
563
|
}
|
|
566
564
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SelectTreeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
567
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: SelectTreeDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done", append: "append" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, providers: [TreeDataSource], viewQueries: [{ propertyName: "matTree", first: true, predicate: MatTree, descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title (keyup.ArrowDown)=\"nextFiltered()\" [innerHTML]=\"dialogData().title | safeHtml\"></h2>\r\n<div style=\"padding: 0 24px\">\r\n @if (dialogData().description) {\r\n <div class=\"selecttree-description\" [innerHtml]=\"dialogData().description | safeHtml\"></div>\r\n }\r\n <div style=\"padding-bottom: 10px;\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"50\">\r\n <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\" subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca...</mat-label>\r\n <input type=\"text\" (keyup)=\"doFilter()\" matInput title=\"Digita il testo'\"\r\n [(ngModel)]=\"filterText\">\r\n @if (filterText) {\r\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Clear\"\r\n (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\" fxLayoutAlign=\"end\">\r\n <div fxFlexAlign=\"center\" class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n </div>\r\n }\r\n <div fxFlex=\"50\" fxLayoutAlign=\"end\" style=\"white-space:nowrap\">\r\n <div fxFlexAlign=\"center\">\r\n @if (canAppend()) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"doAppend()\">\r\n <mat-icon aria-label=\"Aggiungi\" matTooltip=\"Aggiungi\">add</mat-icon>\r\n </button>\r\n }\r\n @if (filteredItems().length > 0) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"nextFiltered()\">\r\n <mat-icon aria-label=\"Vai al prossimo\" matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n </button>\r\n }\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.collapseAll()\">\r\n <mat-icon aria-label=\"Comprimi tutto\" matTooltip=\"Comprimi tutto\">unfold_less</mat-icon>\r\n </button>\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.expandAll()\">\r\n <mat-icon aria-label=\"Espandi tutto\" matTooltip=\"Espandi tutto\">unfold_more</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<mat-dialog-content>\r\n <div fxLayout=\"column\" fxFill>\r\n <mat-tree [dataSource]=\"treeNodes()\" [childrenAccessor]=\"childrenAccessor\">\r\n <mat-tree-node [id]=\"node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\" (click)=\"select($event, node);\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <button type=\"button\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase \">\r\n {{node.name}}\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <span fxLayoutAlign=\"end\">({{node.count}})</span>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n\r\n <mat-tree-node #treeNodeRef=\"matTreeNode\" [id]=\"node.id\" *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\" (click)=\"select($event, node);\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Apri/chiudi ' + node.name\"\r\n class=\"small-icon-button\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeNodeRef.isExpanded ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n </div>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase truncated\">\r\n <div>\r\n {{node.name}}\r\n </div>\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <div fxLayoutAlign=\"end\">({{node.count}})</div>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-flat-button (click)=\"ok()\" [disabled]=\"!currentNode()\">{{dialogData().okCaption}}</button>\r\n <button mat-button mat-dialog-close >Annulla</button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.tree{overflow-x:hidden}.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:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:32px!important}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}.selecttree-description{padding:0 24px 24px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i8$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: SelectTreeDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done", append: "append" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, providers: [TreeDataSource], viewQueries: [{ propertyName: "matTree", first: true, predicate: MatTree, descendants: true, isSignal: true }], ngImport: i0, template: "<h2 mat-dialog-title (keyup.ArrowDown)=\"nextFiltered()\" [innerHTML]=\"dialogData().title | safeHtml\"></h2>\r\n<div style=\"padding: 0 24px\">\r\n @if (dialogData().description) {\r\n <div class=\"selecttree-description\" [innerHtml]=\"dialogData().description | safeHtml\"></div>\r\n }\r\n <div style=\"padding-bottom: 10px;\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"50\">\r\n <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\" subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca...</mat-label>\r\n <input type=\"text\" (keyup)=\"doFilter()\" matInput title=\"Digita il testo'\"\r\n [ngModel]=\"filterText()\" (ngModelChange)=\"filterText.set($event)\">\r\n @if (filterText()) {\r\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Clear\"\r\n (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\" fxLayoutAlign=\"end\">\r\n <div fxFlexAlign=\"center\" class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n </div>\r\n }\r\n <div fxFlex=\"50\" fxLayoutAlign=\"end\" style=\"white-space:nowrap\">\r\n <div fxFlexAlign=\"center\">\r\n @if (canAppend()) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"doAppend()\">\r\n <mat-icon aria-label=\"Aggiungi\" matTooltip=\"Aggiungi\">add</mat-icon>\r\n </button>\r\n }\r\n @if (filteredItems().length > 0) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"nextFiltered()\">\r\n <mat-icon aria-label=\"Vai al prossimo\" matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n </button>\r\n }\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.collapseAll()\">\r\n <mat-icon aria-label=\"Comprimi tutto\" matTooltip=\"Comprimi tutto\">unfold_less</mat-icon>\r\n </button>\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.expandAll()\">\r\n <mat-icon aria-label=\"Espandi tutto\" matTooltip=\"Espandi tutto\">unfold_more</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<mat-dialog-content>\r\n <div fxLayout=\"column\" fxFill>\r\n <mat-tree [dataSource]=\"treeNodes()\" [childrenAccessor]=\"childrenAccessor\">\r\n <mat-tree-node [id]=\"node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\" (click)=\"select($event, node);\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <button type=\"button\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase \">\r\n {{node.name}}\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <span fxLayoutAlign=\"end\">({{node.count}})</span>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n\r\n <mat-tree-node #treeNodeRef=\"matTreeNode\" [id]=\"node.id\" *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\" (click)=\"select($event, node);\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Apri/chiudi ' + node.name\"\r\n class=\"small-icon-button\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeNodeRef.isExpanded ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n </div>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase truncated\">\r\n <div>\r\n {{node.name}}\r\n </div>\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <div fxLayoutAlign=\"end\">({{node.count}})</div>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-flat-button (click)=\"ok()\" [disabled]=\"!currentNode()\">{{dialogData().okCaption}}</button>\r\n <button mat-button mat-dialog-close >Annulla</button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.tree{overflow-x:hidden}.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:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:32px!important}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}.selecttree-description{padding:0 24px 24px}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexAlignDirective, selector: " [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i8$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
568
566
|
}
|
|
569
567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: SelectTreeDialogComponent, decorators: [{
|
|
570
568
|
type: Component,
|
|
571
569
|
args: [{ host: { 'Bind': SystemUtils.generateUUID() }, providers: [TreeDataSource], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, FlexLayoutModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule,
|
|
572
570
|
MatIconModule, MatTooltipModule, MatDialogContent, MatTreeModule, MatDialogActions,
|
|
573
|
-
MatDialogClose, SafeHtmlPipe], template: "<h2 mat-dialog-title (keyup.ArrowDown)=\"nextFiltered()\" [innerHTML]=\"dialogData().title | safeHtml\"></h2>\r\n<div style=\"padding: 0 24px\">\r\n @if (dialogData().description) {\r\n <div class=\"selecttree-description\" [innerHtml]=\"dialogData().description | safeHtml\"></div>\r\n }\r\n <div style=\"padding-bottom: 10px;\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"50\">\r\n <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\" subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca...</mat-label>\r\n <input type=\"text\" (keyup)=\"doFilter()\" matInput title=\"Digita il testo'\"\r\n [(ngModel)]=\"filterText\">\r\n @if (filterText) {\r\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Clear\"\r\n (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\" fxLayoutAlign=\"end\">\r\n <div fxFlexAlign=\"center\" class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n </div>\r\n }\r\n <div fxFlex=\"50\" fxLayoutAlign=\"end\" style=\"white-space:nowrap\">\r\n <div fxFlexAlign=\"center\">\r\n @if (canAppend()) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"doAppend()\">\r\n <mat-icon aria-label=\"Aggiungi\" matTooltip=\"Aggiungi\">add</mat-icon>\r\n </button>\r\n }\r\n @if (filteredItems().length > 0) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"nextFiltered()\">\r\n <mat-icon aria-label=\"Vai al prossimo\" matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n </button>\r\n }\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.collapseAll()\">\r\n <mat-icon aria-label=\"Comprimi tutto\" matTooltip=\"Comprimi tutto\">unfold_less</mat-icon>\r\n </button>\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.expandAll()\">\r\n <mat-icon aria-label=\"Espandi tutto\" matTooltip=\"Espandi tutto\">unfold_more</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<mat-dialog-content>\r\n <div fxLayout=\"column\" fxFill>\r\n <mat-tree [dataSource]=\"treeNodes()\" [childrenAccessor]=\"childrenAccessor\">\r\n <mat-tree-node [id]=\"node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\" (click)=\"select($event, node);\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <button type=\"button\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase \">\r\n {{node.name}}\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <span fxLayoutAlign=\"end\">({{node.count}})</span>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n\r\n <mat-tree-node #treeNodeRef=\"matTreeNode\" [id]=\"node.id\" *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\" (click)=\"select($event, node);\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Apri/chiudi ' + node.name\"\r\n class=\"small-icon-button\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeNodeRef.isExpanded ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n </div>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase truncated\">\r\n <div>\r\n {{node.name}}\r\n </div>\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <div fxLayoutAlign=\"end\">({{node.count}})</div>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-flat-button (click)=\"ok()\" [disabled]=\"!currentNode()\">{{dialogData().okCaption}}</button>\r\n <button mat-button mat-dialog-close >Annulla</button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.tree{overflow-x:hidden}.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:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:32px!important}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}.selecttree-description{padding:0 24px 24px}\n"] }]
|
|
574
|
-
}], propDecorators: { done: [{ type: i0.Output, args: ["done"] }], append: [{ type: i0.Output, args: ["append"] }], matTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
|
|
571
|
+
MatDialogClose, SafeHtmlPipe], template: "<h2 mat-dialog-title (keyup.ArrowDown)=\"nextFiltered()\" [innerHTML]=\"dialogData().title | safeHtml\"></h2>\r\n<div style=\"padding: 0 24px\">\r\n @if (dialogData().description) {\r\n <div class=\"selecttree-description\" [innerHtml]=\"dialogData().description | safeHtml\"></div>\r\n }\r\n <div style=\"padding-bottom: 10px;\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n <div fxFlex=\"50\">\r\n <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\" subscriptSizing=\"dynamic\">\r\n <mat-label>Cerca...</mat-label>\r\n <input type=\"text\" (keyup)=\"doFilter()\" matInput title=\"Digita il testo'\"\r\n [ngModel]=\"filterText()\" (ngModelChange)=\"filterText.set($event)\">\r\n @if (filterText()) {\r\n <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button aria-label=\"Clear\"\r\n (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\" fxLayoutAlign=\"end\">\r\n <div fxFlexAlign=\"center\" class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n </div>\r\n }\r\n <div fxFlex=\"50\" fxLayoutAlign=\"end\" style=\"white-space:nowrap\">\r\n <div fxFlexAlign=\"center\">\r\n @if (canAppend()) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"doAppend()\">\r\n <mat-icon aria-label=\"Aggiungi\" matTooltip=\"Aggiungi\">add</mat-icon>\r\n </button>\r\n }\r\n @if (filteredItems().length > 0) {\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"nextFiltered()\">\r\n <mat-icon aria-label=\"Vai al prossimo\" matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n </button>\r\n }\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.collapseAll()\">\r\n <mat-icon aria-label=\"Comprimi tutto\" matTooltip=\"Comprimi tutto\">unfold_less</mat-icon>\r\n </button>\r\n <button fxFlexAlign=\"center\" type=\"button\" mat-icon-button (click)=\"matTree()?.expandAll()\">\r\n <mat-icon aria-label=\"Espandi tutto\" matTooltip=\"Espandi tutto\">unfold_more</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<mat-dialog-content>\r\n <div fxLayout=\"column\" fxFill>\r\n <mat-tree [dataSource]=\"treeNodes()\" [childrenAccessor]=\"childrenAccessor\">\r\n <mat-tree-node [id]=\"node.id\" *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\" (click)=\"select($event, node);\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <button type=\"button\" mat-icon-button disabled class=\"small-icon-button\"></button>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase \">\r\n {{node.name}}\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <span fxLayoutAlign=\"end\">({{node.count}})</span>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n\r\n <mat-tree-node #treeNodeRef=\"matTreeNode\" [id]=\"node.id\" *matTreeNodeDef=\"let node;when: hasChild\" matTreeNodePadding\r\n [matTreeNodePaddingIndent]=\"20\" class=\"tree-node tree-node-simple\"\r\n [class.tree-node-activated]=\"currentNode()?.id === node.id\" (click)=\"select($event, node);\">\r\n <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxFill class=\"small\">\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n <button type=\"button\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Apri/chiudi ' + node.name\"\r\n class=\"small-icon-button\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{treeNodeRef.isExpanded ? 'expand_more' : 'chevron_right'}}\r\n </mat-icon>\r\n </button>\r\n </div>\r\n <div fxFlex=\"*\" fxFlexAlign=\"center\" class=\"uppercase truncated\">\r\n <div>\r\n {{node.name}}\r\n </div>\r\n </div>\r\n <div fxFlex=\"30px\" fxFlexAlign=\"center\">\r\n @if (node.count > 0) {\r\n <div fxLayoutAlign=\"end\">({{node.count}})</div>\r\n }\r\n </div>\r\n </div>\r\n </mat-tree-node>\r\n </mat-tree>\r\n </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n <button mat-flat-button (click)=\"ok()\" [disabled]=\"!currentNode()\">{{dialogData().okCaption}}</button>\r\n <button mat-button mat-dialog-close >Annulla</button>\r\n </div>\r\n</mat-dialog-actions>\r\n", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.tree{overflow-x:hidden}.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:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-simple,.tree-node-simple>div{min-height:32px!important}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}.selecttree-description{padding:0 24px 24px}\n"] }]
|
|
572
|
+
}], ctorParameters: () => [], propDecorators: { done: [{ type: i0.Output, args: ["done"] }], append: [{ type: i0.Output, args: ["append"] }], matTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
|
|
575
573
|
|
|
576
574
|
class SelectPictureDialogComponent {
|
|
577
575
|
constructor() {
|
|
@@ -2238,9 +2236,8 @@ class FileInputComponent {
|
|
|
2238
2236
|
this._value = new FileInfo();
|
|
2239
2237
|
this._required = false;
|
|
2240
2238
|
this._disabled = false;
|
|
2241
|
-
/** The currently displayed file name. Can be bound from outside or updated on file selection. */
|
|
2242
|
-
this.fileName =
|
|
2243
|
-
this.fileNameInput = output();
|
|
2239
|
+
/** The currently displayed file name. Can be bound two-way from outside or updated on file selection. */
|
|
2240
|
+
this.fileName = model(undefined, ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
|
|
2244
2241
|
this.maxSizeMb = input(5, ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : /* istanbul ignore next */ []));
|
|
2245
2242
|
this.minSizeMb = input(0, ...(ngDevMode ? [{ debugName: "minSizeMb" }] : /* istanbul ignore next */ []));
|
|
2246
2243
|
this.isNew = input(false, ...(ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []));
|
|
@@ -2363,7 +2360,7 @@ class FileInputComponent {
|
|
|
2363
2360
|
(!this.maxSizeMb() || fileSizeMb <= this.maxSizeMb()) &&
|
|
2364
2361
|
(!this.minSizeMb() || fileSizeMb >= this.minSizeMb());
|
|
2365
2362
|
this.writeValue(fileInfo);
|
|
2366
|
-
this.
|
|
2363
|
+
this.fileName.set(f.name);
|
|
2367
2364
|
this.fileSize.set(Math.round(fileSizeMb));
|
|
2368
2365
|
}
|
|
2369
2366
|
}
|
|
@@ -2379,7 +2376,7 @@ class FileInputComponent {
|
|
|
2379
2376
|
*/
|
|
2380
2377
|
clearFile() {
|
|
2381
2378
|
if (this.hasFile()) {
|
|
2382
|
-
this.
|
|
2379
|
+
this.fileName.set(undefined);
|
|
2383
2380
|
this.fileSize.set(0);
|
|
2384
2381
|
const fi = new FileInfo();
|
|
2385
2382
|
fi.file = undefined;
|
|
@@ -2403,7 +2400,7 @@ class FileInputComponent {
|
|
|
2403
2400
|
this.preview.emit();
|
|
2404
2401
|
}
|
|
2405
2402
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2406
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, minSizeMb: { classPropertyName: "minSizeMb", publicName: "minSizeMb", isSignal: true, isRequired: false, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, canPreview: { classPropertyName: "canPreview", publicName: "canPreview", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: {
|
|
2403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: FileInputComponent, isStandalone: true, selector: "file-input", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, minSizeMb: { classPropertyName: "minSizeMb", publicName: "minSizeMb", isSignal: true, isRequired: false, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, canPreview: { classPropertyName: "canPreview", publicName: "canPreview", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileName: "fileNameChange", changed: "changed", download: "download", preview: "preview" }, host: { properties: { "id": "id", "class.floating": "shouldLabelFloat", "attr.aria-describedBy": "describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: FileInputComponent }], viewQueries: [{ propertyName: "__file", first: true, predicate: ["__file"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n <input name=\"_fileName\" #_fileName=\"ngModel\" [ngModel]=\"fileName()\" (ngModelChange)=\"fileName.set($event)\" [id]=\"id\" matInput readonly [required]=\"required\"\r\n fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n @if (hasFile()) {\r\n <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (!disabled) {\r\n <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew() && canPreview()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n <mat-icon>save_alt</mat-icon>\r\n </button>\r\n }\r\n @if (hasFile() && fileSize() > 0) {\r\n <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n }\r\n @if (hasFile() && fileSize() == 0) {\r\n <mat-hint align=\"start\">\r\n > 1 MB</mat-hint>\r\n } @if (maxSizeMb()) {\r\n <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n </mat-hint>\r\n }\r\n @if (_fileName.invalid && !hasFile()) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n @if (_fileName.invalid && hasFile()) {\r\n <mat-error>Dimensione non consentita.</mat-error>\r\n }\r\n</mat-form-field>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FileSizeValidatorDirective, selector: "[fileSize]", inputs: ["maxSizeMb", "minSizeMb", "size"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2407
2404
|
}
|
|
2408
2405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2409
2406
|
type: Component,
|
|
@@ -2412,7 +2409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
2412
2409
|
'[id]': 'id',
|
|
2413
2410
|
'[class.floating]': 'shouldLabelFloat',
|
|
2414
2411
|
'[attr.aria-describedBy]': 'describedBy',
|
|
2415
|
-
}, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n <input name=\"_fileName\" #_fileName=\"ngModel\" [ngModel]=\"fileName()\" (ngModelChange)=\"
|
|
2412
|
+
}, template: "<mat-form-field style=\"width:100%\" [appearance]=\"appearance()\">\r\n <mat-label>{{placeholder}}</mat-label>\r\n <input type=\"file\" [hidden]=\"true\" [accept]=\"accept()\" (change)=\"selectFile($event)\" #__file />\r\n <input name=\"_fileName\" #_fileName=\"ngModel\" [ngModel]=\"fileName()\" (ngModelChange)=\"fileName.set($event)\" [id]=\"id\" matInput readonly [required]=\"required\"\r\n fileSize [size]=\"fileSize()\" [maxSizeMb]=\"maxSizeMb()\" [minSizeMb]=\"minSizeMb()\" [disabled]=\"disabled\" />\r\n @if (hasFile()) {\r\n <button type=\"button\" tabindex=\"-1\" mat-icon-button matSuffix aria-label=\"Azzera\" (click)=\"clearFile()\" [disabled]=\"disabled\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n }\r\n @if (!disabled) {\r\n <button type=\"button\" type=\"button\" mat-icon-button matSuffix (click)=\"__file.click()\" aria-label=\"Seleziona file\"\r\n matTooltip=\"Seleziona\" [disabled]=\"disabled\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew() && canPreview()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"previewFile()\" aria-label=\"Anteprima\" matTooltip=\"Anteprima\" [disabled]=\"disabled\">\r\n <mat-icon>preview</mat-icon>\r\n </button>\r\n }\r\n @if (!isNew()) {\r\n <button type=\"button\" mat-icon-button matSuffix (click)=\"downloadFile()\" aria-label=\"Scarica file\"\r\n matTooltip=\"Scarica\" [disabled]=\"disabled\">\r\n <mat-icon>save_alt</mat-icon>\r\n </button>\r\n }\r\n @if (hasFile() && fileSize() > 0) {\r\n <mat-hint align=\"start\">{{fileSize()}} MB</mat-hint>\r\n }\r\n @if (hasFile() && fileSize() == 0) {\r\n <mat-hint align=\"start\">\r\n > 1 MB</mat-hint>\r\n } @if (maxSizeMb()) {\r\n <mat-hint align=\"end\">Massimo {{maxSizeMb()}} MB\r\n </mat-hint>\r\n }\r\n @if (_fileName.invalid && !hasFile()) {\r\n <mat-error>Obbligatorio.</mat-error>\r\n }\r\n @if (_fileName.invalid && hasFile()) {\r\n <mat-error>Dimensione non consentita.</mat-error>\r\n }\r\n</mat-form-field>" }]
|
|
2416
2413
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
2417
2414
|
type: Optional
|
|
2418
2415
|
}, {
|
|
@@ -2423,7 +2420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
|
|
|
2423
2420
|
type: Input
|
|
2424
2421
|
}], placeholder: [{
|
|
2425
2422
|
type: Input
|
|
2426
|
-
}], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }
|
|
2423
|
+
}], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }, { type: i0.Output, args: ["fileNameChange"] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], minSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizeMb", required: false }] }], isNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNew", required: false }] }], canPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "canPreview", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], download: [{ type: i0.Output, args: ["download"] }], preview: [{ type: i0.Output, args: ["preview"] }] } });
|
|
2427
2424
|
|
|
2428
2425
|
class FilePreviewComponent {
|
|
2429
2426
|
constructor() {
|
|
@@ -2847,12 +2844,12 @@ class TreePickerComponent {
|
|
|
2847
2844
|
constructor() {
|
|
2848
2845
|
/** Nested tree data to display. */
|
|
2849
2846
|
this.tree = input([], ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
|
|
2850
|
-
/** Currently selected node ids. */
|
|
2851
|
-
this.selection =
|
|
2852
|
-
/** Emits the updated selection array whenever it changes. */
|
|
2853
|
-
this.selectionInput = output();
|
|
2847
|
+
/** Currently selected node ids. Supports two-way binding via [(selection)]. */
|
|
2848
|
+
this.selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
2854
2849
|
/** When true, checkboxes and chip remove buttons are disabled (mirrors Material convention). */
|
|
2855
2850
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2851
|
+
/** Description to display when no selection is made. */
|
|
2852
|
+
this.descriptionEmpty = input('<span>Nessuna selezione: vengono inclusi <strong>tutti gli elementi</strong>.</span>', ...(ngDevMode ? [{ debugName: "descriptionEmpty" }] : /* istanbul ignore next */ []));
|
|
2856
2853
|
/** Maximum number of tree levels to display (default: 3). */
|
|
2857
2854
|
this.maxDepth = input(3, ...(ngDevMode ? [{ debugName: "maxDepth" }] : /* istanbul ignore next */ []));
|
|
2858
2855
|
/**
|
|
@@ -2870,6 +2867,7 @@ class TreePickerComponent {
|
|
|
2870
2867
|
/** Emits void whenever the user changes the selection (toggle, remove, clear). */
|
|
2871
2868
|
this.changed = output();
|
|
2872
2869
|
this._treeRef = viewChild((MatTree), ...(ngDevMode ? [{ debugName: "_treeRef" }] : /* istanbul ignore next */ []));
|
|
2870
|
+
this._elRef = inject(ElementRef);
|
|
2873
2871
|
/** All three maps rebuilt lazily as a single computed whenever taxonomy changes. */
|
|
2874
2872
|
this._maps = computed(() => {
|
|
2875
2873
|
const parentMap = new Map();
|
|
@@ -2900,7 +2898,18 @@ class TreePickerComponent {
|
|
|
2900
2898
|
return (node.children ?? []);
|
|
2901
2899
|
};
|
|
2902
2900
|
this.hasChild = (_, node) => !!(node.children?.length) && (this._maps().depthMap.get(node.id) ?? 0) < this.maxDepth() - 1;
|
|
2903
|
-
|
|
2901
|
+
/** Current filter text. */
|
|
2902
|
+
this.filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
|
|
2903
|
+
/** Nodes matching the current filter text, in nodeMap iteration order. */
|
|
2904
|
+
this.filteredItems = signal([], ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
|
|
2905
|
+
/** Index of the currently highlighted filtered node (-1 = none). */
|
|
2906
|
+
this.filterIndex = signal(-1, ...(ngDevMode ? [{ debugName: "filterIndex" }] : /* istanbul ignore next */ []));
|
|
2907
|
+
/** The currently highlighted filtered node, or null. */
|
|
2908
|
+
this.filteredNode = computed(() => {
|
|
2909
|
+
const idx = this.filterIndex();
|
|
2910
|
+
return idx >= 0 ? (this.filteredItems()[idx] ?? null) : null;
|
|
2911
|
+
}, ...(ngDevMode ? [{ debugName: "filteredNode" }] : /* istanbul ignore next */ []));
|
|
2912
|
+
// Expand nodes up to minDepth whenever new taxonomy data arrives
|
|
2904
2913
|
effect(() => {
|
|
2905
2914
|
const maps = this._maps();
|
|
2906
2915
|
const expandLevels = this.minDepth() ?? 0;
|
|
@@ -2935,9 +2944,62 @@ class TreePickerComponent {
|
|
|
2935
2944
|
}
|
|
2936
2945
|
/** Clears the entire selection. */
|
|
2937
2946
|
clearAll() {
|
|
2938
|
-
this.
|
|
2947
|
+
this.selection.set([]);
|
|
2939
2948
|
this.changed.emit();
|
|
2940
2949
|
}
|
|
2950
|
+
/** Searches nodes by text and moves to the first match. */
|
|
2951
|
+
doFilter() {
|
|
2952
|
+
const text = this.filterText().trim().toLowerCase();
|
|
2953
|
+
if (text.length < 3) {
|
|
2954
|
+
this.filteredItems.set([]);
|
|
2955
|
+
this.filterIndex.set(-1);
|
|
2956
|
+
return;
|
|
2957
|
+
}
|
|
2958
|
+
const matches = Array.from(this._maps().nodeMap.values())
|
|
2959
|
+
.filter(n => (this._maps().depthMap.get(n.id) ?? 0) < this.maxDepth() && n.name?.toLowerCase().includes(text));
|
|
2960
|
+
this.filteredItems.set(matches);
|
|
2961
|
+
const idx = matches.length > 0 ? 0 : -1;
|
|
2962
|
+
this.filterIndex.set(idx);
|
|
2963
|
+
if (idx >= 0)
|
|
2964
|
+
this._scrollToFiltered(idx, matches);
|
|
2965
|
+
}
|
|
2966
|
+
/** Clears the filter and restores the original tree state. */
|
|
2967
|
+
clearFilter() {
|
|
2968
|
+
this.filterText.set('');
|
|
2969
|
+
this.filteredItems.set([]);
|
|
2970
|
+
this.filterIndex.set(-1);
|
|
2971
|
+
}
|
|
2972
|
+
/** Moves to the next matching node, cycling back to the first. */
|
|
2973
|
+
nextFiltered() {
|
|
2974
|
+
const items = this.filteredItems();
|
|
2975
|
+
if (!items.length)
|
|
2976
|
+
return;
|
|
2977
|
+
const next = (this.filterIndex() + 1) % items.length;
|
|
2978
|
+
this.filterIndex.set(next);
|
|
2979
|
+
this._scrollToFiltered(next, items);
|
|
2980
|
+
}
|
|
2981
|
+
/** Returns true when the node is the currently highlighted filter match. */
|
|
2982
|
+
isFilteredNode(node) {
|
|
2983
|
+
return this.filteredNode()?.id === node.id;
|
|
2984
|
+
}
|
|
2985
|
+
/** Expands ancestors of the target node and scrolls it into view. */
|
|
2986
|
+
_scrollToFiltered(index, items) {
|
|
2987
|
+
const node = items[index];
|
|
2988
|
+
if (!node)
|
|
2989
|
+
return;
|
|
2990
|
+
const tree = this._treeRef();
|
|
2991
|
+
if (tree) {
|
|
2992
|
+
let parent = this._maps().parentMap.get(node.id);
|
|
2993
|
+
while (parent) {
|
|
2994
|
+
tree.expand(parent);
|
|
2995
|
+
parent = this._maps().parentMap.get(parent.id);
|
|
2996
|
+
}
|
|
2997
|
+
}
|
|
2998
|
+
setTimeout(() => {
|
|
2999
|
+
const el = this._elRef.nativeElement.querySelector(`[data-node-id="${node.id}"]`);
|
|
3000
|
+
el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
3001
|
+
});
|
|
3002
|
+
}
|
|
2941
3003
|
/**
|
|
2942
3004
|
* Returns true when the node is in the active selection.
|
|
2943
3005
|
* @param node - tree node to check
|
|
@@ -2965,15 +3027,17 @@ class TreePickerComponent {
|
|
|
2965
3027
|
* @param node - the node that was clicked
|
|
2966
3028
|
*/
|
|
2967
3029
|
toggleNode(node) {
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
set.
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
3030
|
+
this.selection.update(current => {
|
|
3031
|
+
const set = new Set(current);
|
|
3032
|
+
if (set.has(node.id)) {
|
|
3033
|
+
set.delete(node.id);
|
|
3034
|
+
}
|
|
3035
|
+
else {
|
|
3036
|
+
set.add(node.id);
|
|
3037
|
+
}
|
|
3038
|
+
this._syncParentsInSet(node, set);
|
|
3039
|
+
return Array.from(set);
|
|
3040
|
+
});
|
|
2977
3041
|
this.changed.emit();
|
|
2978
3042
|
}
|
|
2979
3043
|
/**
|
|
@@ -2981,10 +3045,12 @@ class TreePickerComponent {
|
|
|
2981
3045
|
* @param node - the node to remove from the selection
|
|
2982
3046
|
*/
|
|
2983
3047
|
removeNode(node) {
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
3048
|
+
this.selection.update(current => {
|
|
3049
|
+
const set = new Set(current);
|
|
3050
|
+
set.delete(node.id);
|
|
3051
|
+
this._syncParentsInSet(node, set);
|
|
3052
|
+
return Array.from(set);
|
|
3053
|
+
});
|
|
2988
3054
|
this.changed.emit();
|
|
2989
3055
|
}
|
|
2990
3056
|
/**
|
|
@@ -3038,13 +3104,13 @@ class TreePickerComponent {
|
|
|
3038
3104
|
}
|
|
3039
3105
|
}
|
|
3040
3106
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TreePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3041
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, minDepth: { classPropertyName: "minDepth", publicName: "minDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionInput: "selectionInput", 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'\" 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 fxLayoutAlign=\"end\" style=\"padding: 12px;\">\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 fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" style=\"padding: 8px 0 16px 0\">\r\n <!-- Leaf node -->\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\" class=\"tree-node\">\r\n <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n {{node.name}}\r\n </mat-checkbox>\r\n </mat-tree-node>\r\n <!-- Expandable node with children -->\r\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\">\r\n <button mat-icon-button matTreeNodeToggle >\r\n <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n </button>\r\n <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n {{node.name}}\r\n </mat-checkbox>\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)'\" 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>Nessuna selezione: vengono inclusi <strong>tutti gli\r\n argomenti</strong>.</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-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:hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-activated,.tree-node-activated>div{font-weight:700!important;color:var(--ars-color-accent, #7894ae)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i8$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.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$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.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: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, 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 @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>\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\"\r\n style=\"padding: 8px 0 16px 0\">\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 [attr.data-node-id]=\"node.id\">\r\n <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n {{node.name}}\r\n </mat-checkbox>\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\" [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 <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n {{node.name}}\r\n </mat-checkbox>\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-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: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}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i8$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8$1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i8$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.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$3.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$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$3.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$1.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultShowHideDirective, selector: " [fxShow], [fxShow.print], [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl], [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl], [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg], [fxHide], [fxHide.print], [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl], [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl], [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3042
3108
|
}
|
|
3043
3109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TreePickerComponent, decorators: [{
|
|
3044
3110
|
type: Component,
|
|
3045
3111
|
args: [{ selector: 'tree-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTreeModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatChipsModule,
|
|
3046
|
-
MatButtonModule, MatTooltipModule, FlexLayoutModule], 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'\"
|
|
3047
|
-
}], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }],
|
|
3112
|
+
MatButtonModule, MatTooltipModule, MatFormFieldModule, MatInputModule, FormsModule, FlexLayoutModule, SafeHtmlPipe], 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 @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>\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\"\r\n style=\"padding: 8px 0 16px 0\">\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 [attr.data-node-id]=\"node.id\">\r\n <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n {{node.name}}\r\n </mat-checkbox>\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\" [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 <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n {{node.name}}\r\n </mat-checkbox>\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-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: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}\n"] }]
|
|
3113
|
+
}], 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 }] }], 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 }] }] } });
|
|
3048
3114
|
|
|
3049
3115
|
/*
|
|
3050
3116
|
* Public API Surface of ars-utils
|