@arsedizioni/ars-utils 21.2.314 → 21.2.315
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.
|
@@ -3123,12 +3123,12 @@ class TreePickerComponent {
|
|
|
3123
3123
|
}
|
|
3124
3124
|
}
|
|
3125
3125
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TreePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3126
|
-
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}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i9.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i9.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i9.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 }); }
|
|
3126
|
+
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)\" class=\"uppercase \">\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)\" class=\"uppercase \"\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}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i9.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i9.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i9.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 }); }
|
|
3127
3127
|
}
|
|
3128
3128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TreePickerComponent, decorators: [{
|
|
3129
3129
|
type: Component,
|
|
3130
3130
|
args: [{ selector: 'tree-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTreeModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatChipsModule,
|
|
3131
|
-
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}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}\n"] }]
|
|
3131
|
+
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)\" class=\"uppercase \">\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)\" class=\"uppercase \"\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}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}\n"] }]
|
|
3132
3132
|
}], 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 }] }] } });
|
|
3133
3133
|
|
|
3134
3134
|
/*
|