@arsedizioni/ars-utils 21.2.349 → 21.2.351

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

@@ -2882,6 +2882,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }], ctorParameters: () => [], propDecorators: { changed: [{ type: i0.Output, args: ["changed"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], canFilterByText: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText", required: false }] }], canFilterByText2: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText2", required: false }] }], canFilterByText3: [{ type: i0.Input, args: [{ isSignal: true, alias: "canFilterByText3", required: false }] }], initialText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText", required: false }] }], initialText2: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText2", required: false }] }], initialText3: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialText3", required: false }] }], textName: [{ type: i0.Input, args: [{ isSignal: true, alias: "textName", required: false }] }], text2Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2Name", required: false }] }], text3Name: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3Name", required: false }] }], textLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "textLength", required: false }] }], text2Length: [{ type: i0.Input, args: [{ isSignal: true, alias: "text2Length", required: false }] }], text3Length: [{ type: i0.Input, args: [{ isSignal: true, alias: "text3Length", required: false }] }], showTextSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTextSearchButton", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
 class TreePickerComponent {
+    /** Returns true when the node can be selected: depth < maxDepth or explicitly listed in maxDepthOverrides. */
+    isSelectable(node) {
+        return this._isSelectableNode(node);
+    }
+    _isSelectableNode(node) {
+        console.log('Checking if node is selectable:', node.id);
+        const depth = this._maps().depthMap.get(node.id) ?? 0;
+        const selectable = depth < this.maxDepth() || this._overridesSet().has(node.id);
+        console.log('Node', node.id, 'depth:', depth, 'selectable:', selectable);
+        return selectable;
+    }
     constructor() {
         /** Nested tree data to display. */
         this.tree = input([], ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
@@ -2893,6 +2904,11 @@ class TreePickerComponent {
         this.descriptionEmpty = input('<span>Nessuna selezione: vengono inclusi <strong>tutti gli elementi</strong>.</span>', ...(ngDevMode ? [{ debugName: "descriptionEmpty" }] : /* istanbul ignore next */ []));
         /** Maximum number of tree levels to display (default: 3). */
         this.maxDepth = input(3, ...(ngDevMode ? [{ debugName: "maxDepth" }] : /* istanbul ignore next */ []));
+        /**
+         * List of node IDs at depth >= maxDepth that are allowed to be expanded and selected.
+         * Nodes beyond maxDepth not in this list are visible and expandable but have no checkbox.
+         */
+        this.maxDepthOverrides = input([], ...(ngDevMode ? [{ debugName: "maxDepthOverrides" }] : /* istanbul ignore next */ []));
         /**
          * Number of levels to auto-expand on load.
          * 0 or undefined = only top level visible (no expansion);
@@ -2909,6 +2925,8 @@ class TreePickerComponent {
         this.changed = output();
         this._treeRef = viewChild((MatTree), ...(ngDevMode ? [{ debugName: "_treeRef" }] : /* istanbul ignore next */ []));
         this._elRef = inject(ElementRef);
+        /** Set of node IDs that override the maxDepth selection limit. */
+        this._overridesSet = computed(() => new Set(this.maxDepthOverrides()), ...(ngDevMode ? [{ debugName: "_overridesSet" }] : /* istanbul ignore next */ []));
         /** All three maps rebuilt lazily as a single computed whenever taxonomy changes. */
         this._maps = computed(() => {
             const parentMap = new Map();
@@ -2931,14 +2949,15 @@ class TreePickerComponent {
         this._selectedSet = computed(() => new Set(this.selection()), ...(ngDevMode ? [{ debugName: "_selectedSet" }] : /* istanbul ignore next */ []));
         /** True when at least one node is explicitly selected. */
         this.hasSelection = computed(() => this.selection().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
-        /** Count of selected nodes within the visible levels (depth 0 to maxDepth-1), shown in the tab label. */
-        this.selectedVisibleCount = computed(() => this.selection().filter(id => (this._maps().depthMap.get(id) ?? 0) < this.maxDepth()).length, ...(ngDevMode ? [{ debugName: "selectedVisibleCount" }] : /* istanbul ignore next */ []));
+        /** Count of selected nodes within selectable levels (depth < maxDepth or in overrides), shown in the tab label. */
+        this.selectedVisibleCount = computed(() => this.selection().filter(id => {
+            const node = this._maps().nodeMap.get(id);
+            return node ? this._isSelectableNode(node) : false;
+        }).length, ...(ngDevMode ? [{ debugName: "selectedVisibleCount" }] : /* istanbul ignore next */ []));
         this.treeChildrenAccessor = (node) => {
-            if ((this._maps().depthMap.get(node.id) ?? 0) >= this.maxDepth() - 1)
-                return [];
             return (node.children ?? []);
         };
-        this.hasChild = (_, node) => !!(node.children?.length) && (this._maps().depthMap.get(node.id) ?? 0) < this.maxDepth() - 1;
+        this.hasChild = (_, node) => !!(node.children?.length);
         /** Current filter text. */
         this.filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
         /** Nodes matching the current filter text, in nodeMap iteration order. */
@@ -2997,7 +3016,7 @@ class TreePickerComponent {
             return;
         }
         const matches = Array.from(this._maps().nodeMap.values())
-            .filter(n => (this._maps().depthMap.get(n.id) ?? 0) < this.maxDepth() && n.name?.toLowerCase().includes(text));
+            .filter(n => n.name?.toLowerCase().includes(text));
         this.filteredItems.set(matches);
         const idx = matches.length > 0 ? 0 : -1;
         this.filterIndex.set(idx);
@@ -3058,7 +3077,7 @@ class TreePickerComponent {
     isIndeterminate(node) {
         if (!node.children?.length)
             return false;
-        const descendants = this._getDescendants(node);
+        const descendants = this._getSelectableDescendants(node);
         const set = this._selectedSet();
         const count = descendants.filter(d => set.has(d.id)).length;
         return count > 0 && count < descendants.length;
@@ -3109,19 +3128,22 @@ class TreePickerComponent {
      * @returns true if the node depth is less than maxDepth
      */
     isChipVisible(id) {
-        return (this._maps().depthMap.get(id) ?? 0) < this.maxDepth();
+        const node = this._maps().nodeMap.get(id);
+        return node ? this._isSelectableNode(node) : false;
     }
     /**
-     * Returns all descendants of node in depth-first order, including nodes
-     * beyond the 3-level display limit.
+     * Returns only the selectable descendants of node (depth < maxDepth or in overrides),
+     * used for indeterminate state and parent auto-selection logic.
      * @param node - root of the subtree to traverse
-     * @returns flat array of all descendant INodes
+     * @returns flat array of selectable descendant INodes
      */
-    _getDescendants(node) {
+    _getSelectableDescendants(node) {
         const result = [];
         for (const child of (node.children ?? [])) {
-            result.push(child);
-            result.push(...this._getDescendants(child));
+            const c = child;
+            if (this._isSelectableNode(c))
+                result.push(c);
+            result.push(...this._getSelectableDescendants(c));
         }
         return result;
     }
@@ -3134,8 +3156,8 @@ class TreePickerComponent {
     _syncParentsInSet(node, set) {
         let parent = this._maps().parentMap.get(node.id);
         while (parent) {
-            const descendants = this._getDescendants(parent);
-            if (descendants.every(d => set.has(d.id))) {
+            const descendants = this._getSelectableDescendants(parent);
+            if (descendants.length > 0 && descendants.every(d => set.has(d.id))) {
                 set.add(parent.id);
             }
             else {
@@ -3145,13 +3167,13 @@ class TreePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TreePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [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                            <span class=\"small\">{{node.name}}</span>\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                            <span class=\"small\">{{node.name}}</span>\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{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node: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$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.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$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TreePickerComponent, isStandalone: true, selector: "tree-picker", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptionEmpty: { classPropertyName: "descriptionEmpty", publicName: "descriptionEmpty", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, maxDepthOverrides: { classPropertyName: "maxDepthOverrides", publicName: "maxDepthOverrides", isSignal: true, isRequired: false, transformFunction: null }, minDepth: { classPropertyName: "minDepth", publicName: "minDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionCount: "selectionCount", changed: "changed" }, viewQueries: [{ propertyName: "_treeRef", first: true, predicate: (MatTree), descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\r\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\r\n        <ng-template mat-tab-label>\r\n            Seleziona\r\n            <mat-icon\r\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\r\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\r\n                matTooltipPosition=\"above\">\r\n                info\r\n            </mat-icon>\r\n        </ng-template>\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n                    <div fxFlex fxHide.xs>\r\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\r\n                            subscriptSizing=\"dynamic\">\r\n                            <mat-label>Cerca...</mat-label>\r\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [ngModel]=\"filterText()\"\r\n                                (ngModelChange)=\"filterText.set($event)\"\r\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"tree-node-label-only-heading\">Questo argomento riguarda:</span>\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                    <!-- Expandable node with children -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\r\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\r\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\" [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button matTreeNodeToggle>\r\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n                        </button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"tree-node-label-only-heading\">Questo argomento riguarda:</span>\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\r\n        style=\"height: 100%;\">\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\r\n                    @if (!hasSelection()) {\r\n                    <mat-icon>info</mat-icon>\r\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\r\n                    } @else {\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\r\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon> Azzera tutto\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\r\n                <mat-chip-set>\r\n                    @for (id of selection(); track id) {\r\n                    @let node = nodeById(id);\r\n                    @if (node && isChipVisible(id)) {\r\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\r\n                        {{node.name}}\r\n                        @if (!disabled()) {\r\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\r\n                        }\r\n                    </mat-chip>\r\n                    }\r\n                    }\r\n                </mat-chip-set>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node: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}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}.tree-node-label-only .tree-node-label-only-heading{font-size:.65rem;font-style:italic;line-height:1;margin-bottom:2px}\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$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4$2.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$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TreePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tree-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTreeModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatChipsModule,
-                        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                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [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                            <span class=\"small\">{{node.name}}</span>\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                            <span class=\"small\">{{node.name}}</span>\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{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node: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"] }]
-        }], 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 }] }] } });
+                        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                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\r\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\r\n                            @if (filterText()) {\r\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\r\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\r\n                                <mat-icon>close</mat-icon>\r\n                            </button>\r\n                            }\r\n                        </mat-form-field>\r\n                    </div>\r\n                    @if (filteredItems().length > 0) {\r\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\r\n                    </div>\r\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button (click)=\"nextFiltered()\">\r\n                            <mat-icon aria-label=\"Vai al prossimo\"\r\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\r\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\r\n                            <mat-icon>unfold_more</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\r\n                            <mat-icon>unfold_less</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\r\n                            (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\r\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\r\n                    <!-- Leaf node -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\r\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\r\n                        [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"tree-node-label-only-heading\">Questo argomento riguarda:</span>\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                    <!-- Expandable node with children -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\r\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\r\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\" [attr.data-node-id]=\"node.id\">\r\n                        <button mat-icon-button matTreeNodeToggle>\r\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\r\n                        </button>\r\n                        @if (isSelectable(node)) {\r\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\r\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </mat-checkbox>\r\n                        } @else {\r\n                        <div class=\"tree-node-label-only\">\r\n                            <span class=\"tree-node-label-only-heading\">Questo argomento riguarda:</span>\r\n                            <span class=\"small\">{{node.name}}</span>\r\n                        </div>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\r\n        style=\"height: 100%;\">\r\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\r\n            <div fxFlex>\r\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\r\n                    @if (!hasSelection()) {\r\n                    <mat-icon>info</mat-icon>\r\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\r\n                    } @else {\r\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\r\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\r\n                            <mat-icon>deselect</mat-icon> Azzera tutto\r\n                        </button>\r\n                    </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\r\n                <mat-chip-set>\r\n                    @for (id of selection(); track id) {\r\n                    @let node = nodeById(id);\r\n                    @if (node && isChipVisible(id)) {\r\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\r\n                        {{node.name}}\r\n                        @if (!disabled()) {\r\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\r\n                        }\r\n                    </mat-chip>\r\n                    }\r\n                    }\r\n                </mat-chip-set>\r\n            </div>\r\n        </div>\r\n    </mat-tab>\r\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node: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}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}.tree-node-label-only .tree-node-label-only-heading{font-size:.65rem;font-style:italic;line-height:1;margin-bottom:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tree: [{ type: i0.Input, args: [{ isSignal: true, alias: "tree", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptionEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionEmpty", required: false }] }], maxDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepth", required: false }] }], maxDepthOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDepthOverrides", required: false }] }], minDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDepth", required: false }] }], selectionCount: [{ type: i0.Output, args: ["selectionCount"] }], changed: [{ type: i0.Output, args: ["changed"] }], _treeRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTree), { isSignal: true }] }] } });
 
 /*
  * Public API Surface of ars-utils