@arsedizioni/ars-utils 22.6.85 → 22.6.88

package/fesm2022/arsedizioni-ars-utils-ui.controls.tree.mjs

@@ -1,368 +1,841 @@
-import * as i0 from '@angular/core';
-import { input, model, output, viewChild, inject, ElementRef, computed, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { form, FormField } from '@angular/forms/signals';
-import { SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
-import * as i1 from '@angular/material/tree';
-import { MatTree, MatTreeModule } from '@angular/material/tree';
-import * as i2 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i5 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i10 from '@arsedizioni/ars-utils/ui';
-import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
-import * as i8 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-
-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) {
-        const depth = this._maps().depthMap.get(node.id) ?? 0;
-        return depth < this.maxDepth() || this._overrideSubtreeSet().has(node.id);
-    }
-    constructor() {
-        /** Nested tree data to display. */
-        this.tree = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
-        /** Currently selected node ids. Supports two-way binding via [(selection)]. */
-        this.selection = model([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        /** When true, checkboxes and chip remove buttons are disabled (mirrors Material convention). */
-        this.disabled = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        /** Description to display when no selection is made. */
-        this.descriptionEmpty = input('<span>Nessuna selezione: vengono inclusi <strong>tutti gli elementi</strong>.</span>', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "descriptionEmpty" }] : /* istanbul ignore next */ []));
-        /** Maximum number of tree levels to display (default: 3). */
-        this.maxDepth = input(3, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxDepth" }] : /* istanbul ignore next */ []));
-        /**
-         * List of node IDs at depth >= maxDepth that unlock selection for themselves
-         * and all their descendants, regardless of depth.
-         */
-        this.maxDepthOverrides = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxDepthOverrides" }] : /* istanbul ignore next */ []));
-        /**
-         * Number of levels to auto-expand on load.
-         * 0 or undefined = only top level visible (no expansion);
-         * 1 = expand depth-0 nodes; 2 = expand depth-0 and depth-1 nodes; etc.
-         * Must be less than maxDepth.
-         */
-        this.minDepth = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "minDepth" }] : /* istanbul ignore next */ []));
-        /**
-         * Emits the count of visible selected nodes whenever the selection changes.
-         * Emits 0 when nothing is selected (meaning all items are implicitly included).
-         */
-        this.selectionCount = output();
-        /** Emits void whenever the user changes the selection (toggle, remove, clear). */
-        this.changed = output();
-        this._treeRef = viewChild((MatTree), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_treeRef" }] : /* istanbul ignore next */ []));
-        this._elRef = inject(ElementRef);
-        /**
-         * Set of all node IDs selectable via overrides: each listed root and all its descendants.
-         * Recomputed whenever the tree data or the override list changes.
-         */
-        this._overrideSubtreeSet = computed(() => {
-            const overrideIds = new Set(this.maxDepthOverrides());
-            const maps = this._maps();
-            const result = new Set();
-            for (const id of overrideIds) {
-                const root = maps.nodeMap.get(id);
-                if (!root)
-                    continue;
-                const addSubtree = (n) => {
-                    result.add(n.id);
-                    for (const child of (n.children ?? []))
-                        addSubtree(child);
-                };
-                addSubtree(root);
-            }
-            return result;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_overrideSubtreeSet" }] : /* istanbul ignore next */ []));
-        /** All three maps rebuilt lazily as a single computed whenever taxonomy changes. */
-        this._maps = computed(() => {
-            const parentMap = new Map();
-            const depthMap = new Map();
-            const nodeMap = new Map();
-            const build = (nodes, parent, depth = 0) => {
-                for (const node of nodes) {
-                    depthMap.set(node.id, depth);
-                    nodeMap.set(node.id, node);
-                    if (parent)
-                        parentMap.set(node.id, parent);
-                    if (node.children?.length)
-                        build(node.children, node, depth + 1);
-                }
-            };
-            build(this.tree());
-            return { parentMap, depthMap, nodeMap };
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_maps" }] : /* istanbul ignore next */ []));
-        /** O(1) set of selected ids, rebuilt only when selection changes. */
-        this._selectedSet = computed(() => new Set(this.selection()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_selectedSet" }] : /* istanbul ignore next */ []));
-        /** True when at least one node is explicitly selected. */
-        this.hasSelection = computed(() => this.selection().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* 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, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectedVisibleCount" }] : /* istanbul ignore next */ []));
-        this.treeChildrenAccessor = (node) => {
-            return (node.children ?? []);
-        };
-        this.hasChild = (_, node) => !!(node.children?.length);
-        /** Current filter text. */
-        this.filterText = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
-        /** Root signal form bound to the filter text input. */
-        this.filterForm = form(this.filterText);
-        /** Nodes matching the current filter text, in nodeMap iteration order. */
-        this.filteredItems = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
-        /** Index of the currently highlighted filtered node (-1 = none). */
-        this.filterIndex = signal(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filterIndex" }] : /* istanbul ignore next */ []));
-        /** The currently highlighted filtered node, or null. */
-        this.filteredNode = computed(() => {
-            const idx = this.filterIndex();
-            return idx >= 0 ? (this.filteredItems()[idx] ?? null) : null;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filteredNode" }] : /* istanbul ignore next */ []));
-        // Expand nodes up to minDepth whenever new taxonomy data arrives
-        effect(() => {
-            const maps = this._maps();
-            const expandLevels = this.minDepth() ?? 0;
-            setTimeout(() => {
-                const tree = this._treeRef();
-                if (!tree)
-                    return;
-                tree.collapseAll();
-                if (expandLevels <= 0)
-                    return;
-                maps.depthMap.forEach((depth, id) => {
-                    if (depth < expandLevels) {
-                        const node = maps.nodeMap.get(id);
-                        if (node)
-                            tree.expand(node);
-                    }
-                });
-            });
-        });
-        // Emit visible selection count on every selection change
-        effect(() => {
-            this.selectionCount.emit(this.selectedVisibleCount());
-        });
-    }
-    /** Expands all visible nodes in the tree. */
-    expandAll() {
-        this._treeRef()?.expandAll();
-    }
-    /** Collapses all nodes in the tree. */
-    collapseAll() {
-        this._treeRef()?.collapseAll();
-    }
-    /** Clears the entire selection. */
-    clearAll() {
-        this.selection.set([]);
-        this.changed.emit();
-    }
-    /** Searches nodes by text and moves to the first match. */
-    doFilter() {
-        const text = this.filterText().trim().toLowerCase();
-        if (text.length < 3) {
-            this.filteredItems.set([]);
-            this.filterIndex.set(-1);
-            return;
-        }
-        const matches = Array.from(this._maps().nodeMap.values())
-            .filter(n => n.name?.toLowerCase().includes(text));
-        this.filteredItems.set(matches);
-        const idx = matches.length > 0 ? 0 : -1;
-        this.filterIndex.set(idx);
-        if (idx >= 0)
-            this._scrollToFiltered(idx, matches);
-    }
-    /** Clears the filter and restores the original tree state. */
-    clearFilter() {
-        this.filterText.set('');
-        this.filteredItems.set([]);
-        this.filterIndex.set(-1);
-    }
-    /** Moves to the next matching node, cycling back to the first. */
-    nextFiltered() {
-        const items = this.filteredItems();
-        if (!items.length)
-            return;
-        const next = (this.filterIndex() + 1) % items.length;
-        this.filterIndex.set(next);
-        this._scrollToFiltered(next, items);
-    }
-    /** Returns true when the node is the currently highlighted filter match. */
-    isFilteredNode(node) {
-        return this.filteredNode()?.id === node.id;
-    }
-    /** Expands ancestors of the target node and scrolls it into view. */
-    _scrollToFiltered(index, items) {
-        const node = items[index];
-        if (!node)
-            return;
-        const tree = this._treeRef();
-        if (tree) {
-            let parent = this._maps().parentMap.get(node.id);
-            while (parent) {
-                tree.expand(parent);
-                parent = this._maps().parentMap.get(parent.id);
-            }
-        }
-        setTimeout(() => {
-            const el = this._elRef.nativeElement.querySelector(`[data-node-id="${node.id}"]`);
-            el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-        });
-    }
-    /**
-     * Returns true when the node is in the active selection.
-     * @param node - tree node to check
-     * @returns true if selected
-     */
-    isSelected(node) {
-        return this._selectedSet().has(node.id);
-    }
-    /**
-     * Returns true when a subset (but not all) of the node's descendants are selected,
-     * producing the indeterminate checkbox state.
-     * @param node - tree node to evaluate
-     * @returns true if the node is in a partial-selection (indeterminate) state
-     */
-    isIndeterminate(node) {
-        if (!node.children?.length)
-            return false;
-        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;
-    }
-    /**
-     * Toggles the node and all its descendants; then syncs the ancestor chain.
-     * @param node - the node that was clicked
-     */
-    toggleNode(node) {
-        this.selection.update(current => {
-            const set = new Set(current);
-            if (set.has(node.id)) {
-                set.delete(node.id);
-            }
-            else {
-                set.add(node.id);
-            }
-            this._syncParentsInSet(node, set);
-            return Array.from(set);
-        });
-        this.changed.emit();
-    }
-    /**
-     * Deselects the node and all its descendants. Called by the chip remove button.
-     * @param node - the node to remove from the selection
-     */
-    removeNode(node) {
-        this.selection.update(current => {
-            const set = new Set(current);
-            set.delete(node.id);
-            this._syncParentsInSet(node, set);
-            return Array.from(set);
-        });
-        this.changed.emit();
-    }
-    /**
-     * Returns the INode for the given id, or undefined if not found.
-     * @param id - node id to look up
-     * @returns the matching INode
-     */
-    nodeById(id) {
-        return this._maps().nodeMap.get(id);
-    }
-    /**
-     * Returns true when the node at the given id is within the visible depth range
-     * and should appear in the chip list.
-     * @param id - node id to check
-     * @returns true if the node depth is less than maxDepth
-     */
-    isChipVisible(id) {
-        const node = this._maps().nodeMap.get(id);
-        return node ? this._isSelectableNode(node) : false;
-    }
-    /**
-     * 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 selectable descendant INodes
-     */
-    _getSelectableDescendants(node) {
-        const result = [];
-        for (const child of (node.children ?? [])) {
-            const c = child;
-            if (this._isSelectableNode(c))
-                result.push(c);
-            result.push(...this._getSelectableDescendants(c));
-        }
-        return result;
-    }
-    /**
-     * Walks up the ancestor chain from node, selecting a parent only when all
-     * its descendants are in the set, deselecting it otherwise.
-     * @param node - starting node for the upward traversal
-     * @param set - mutable selection set updated in place
-     */
-    _syncParentsInSet(node, set) {
-        let parent = this._maps().parentMap.get(node.id);
-        while (parent) {
-            const descendants = this._getSelectableDescendants(parent);
-            if (descendants.length > 0 && descendants.every(d => set.has(d.id))) {
-                set.add(parent.id);
-            }
-            else {
-                set.delete(parent.id);
-            }
-            parent = this._maps().parentMap.get(parent.id);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TreePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TreePickerComponent, isStandalone: true, selector: "tree-picker", inputs: { tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptionEmpty: { classPropertyName: "descriptionEmpty", publicName: "descriptionEmpty", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, maxDepthOverrides: { classPropertyName: "maxDepthOverrides", publicName: "maxDepthOverrides", isSignal: true, isRequired: false, transformFunction: null }, minDepth: { classPropertyName: "minDepth", publicName: "minDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", selectionCount: "selectionCount", changed: "changed" }, viewQueries: [{ propertyName: "_treeRef", first: true, predicate: (MatTree), descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\n        <ng-template mat-tab-label>\n            Seleziona\n            <mat-icon\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\n                matTooltipPosition=\"above\">\n                info\n            </mat-icon>\n        </ng-template>\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n                    <div fxFlex fxHide.xs>\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\n                            subscriptSizing=\"dynamic\">\n                            <mat-label>Cerca...</mat-label>\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [formField]=\"filterForm\"\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\n                            @if (filterText()) {\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\n                                <mat-icon>close</mat-icon>\n                            </button>\n                            }\n                        </mat-form-field>\n                    </div>\n                    @if (filteredItems().length > 0) {\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\n                    </div>\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <button mat-icon-button (click)=\"nextFiltered()\">\n                            <mat-icon aria-label=\"Vai al prossimo\"\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\n                        </button>\n                    </div>\n                    }\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\n                            <mat-icon>unfold_more</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\n                            <mat-icon>unfold_less</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\n                            (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\n                    <!-- Leaf node -->\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                    <!-- Expandable node with children -->\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button matTreeNodeToggle>\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n                        </button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                </mat-tree>\n            </div>\n        </div>\n    </mat-tab>\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\n        style=\"height: 100%;\">\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\n                    @if (!hasSelection()) {\n                    <mat-icon>info</mat-icon>\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\n                    } @else {\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon> Azzera tutto\n                        </button>\n                    </div>\n                    }\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\n                <mat-chip-set>\n                    @for (id of selection(); track id) {\n                    @let node = nodeById(id);\n                    @if (node && isChipVisible(id)) {\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\n                        {{node.name}}\n                        @if (!disabled()) {\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\n                        }\n                    </mat-chip>\n                    }\n                    }\n                </mat-chip-set>\n            </div>\n        </div>\n    </mat-tab>\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.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.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.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: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i10.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i10.FxShowHideDirective, selector: "    [fxShow],    [fxHide],    [fxShow.xs],    [fxShow.sm],    [fxShow.md],    [fxShow.lg],    [fxShow.xl],    [fxShow.lt-sm],    [fxShow.lt-md],    [fxShow.lt-lg],    [fxShow.lt-xl],    [fxShow.gt-xs],    [fxShow.gt-sm],    [fxShow.gt-md],    [fxShow.gt-lg],    [fxHide.xs],    [fxHide.sm],    [fxHide.md],    [fxHide.lg],    [fxHide.xl],    [fxHide.lt-sm],    [fxHide.lt-md],    [fxHide.lt-lg],    [fxHide.lt-xl],    [fxHide.gt-xs],    [fxHide.gt-sm],    [fxHide.gt-md],    [fxHide.gt-lg]  ", inputs: ["fxShow", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "directive", type: i10.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TreePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tree-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTreeModule, MatCheckboxModule, MatIconModule, MatTabsModule, MatChipsModule,
-                        MatButtonModule, MatTooltipModule, MatFormFieldModule, MatInputModule, FormField, FlexLayoutModule, SafeHtmlPipe], template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\n        <ng-template mat-tab-label>\n            Seleziona\n            <mat-icon\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\n                matTooltipPosition=\"above\">\n                info\n            </mat-icon>\n        </ng-template>\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n                    <div fxFlex fxHide.xs>\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\n                            subscriptSizing=\"dynamic\">\n                            <mat-label>Cerca...</mat-label>\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [formField]=\"filterForm\"\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\n                            @if (filterText()) {\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\n                                <mat-icon>close</mat-icon>\n                            </button>\n                            }\n                        </mat-form-field>\n                    </div>\n                    @if (filteredItems().length > 0) {\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\n                    </div>\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <button mat-icon-button (click)=\"nextFiltered()\">\n                            <mat-icon aria-label=\"Vai al prossimo\"\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\n                        </button>\n                    </div>\n                    }\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\n                            <mat-icon>unfold_more</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\n                            <mat-icon>unfold_less</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\n                            (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\n                    <!-- Leaf node -->\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                    <!-- Expandable node with children -->\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button matTreeNodeToggle>\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n                        </button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                </mat-tree>\n            </div>\n        </div>\n    </mat-tab>\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\n        style=\"height: 100%;\">\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\n                    @if (!hasSelection()) {\n                    <mat-icon>info</mat-icon>\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\n                    } @else {\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon> Azzera tutto\n                        </button>\n                    </div>\n                    }\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\n                <mat-chip-set>\n                    @for (id of selection(); track id) {\n                    @let node = nodeById(id);\n                    @if (node && isChipVisible(id)) {\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\n                        {{node.name}}\n                        @if (!disabled()) {\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\n                        }\n                    </mat-chip>\n                    }\n                    }\n                </mat-chip-set>\n            </div>\n        </div>\n    </mat-tab>\n</mat-tab-group>", styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"] }]
-        }], 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 @arsedizioni/ars-utils/ui.controls.tree
- *
- * `TreePickerComponent` alone. It is the only consumer of `mat-tree`, `mat-tabs`, `mat-input` and
- * `mat-checkbox` in the library: leaving it next to the small controls of `ui.controls` would tie
- * the placement of that whole Material subtree to whichever chunk first reaches a button.
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, computed, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { FormField, form } from "@angular/forms/signals";
+import { SafeHtmlPipe } from "@arsedizioni/ars-utils/core";
+import * as i1 from "@angular/material/tree";
+import { MatTree, MatTreeModule } from "@angular/material/tree";
+import * as i2 from "@angular/material/checkbox";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import * as i3 from "@angular/material/icon";
+import { MatIconModule } from "@angular/material/icon";
+import * as i4 from "@angular/material/tabs";
+import { MatTabsModule } from "@angular/material/tabs";
+import * as i5 from "@angular/material/chips";
+import { MatChipsModule } from "@angular/material/chips";
+import * as i6 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import * as i7 from "@angular/material/tooltip";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import * as i10 from "@arsedizioni/ars-utils/ui";
+import { FlexLayoutModule } from "@arsedizioni/ars-utils/ui";
+import * as i8 from "@angular/material/form-field";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i9 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+var TreePickerComponent = class TreePickerComponent {
+	isSelectable(node) {
+		return this._isSelectableNode(node);
+	}
+	_isSelectableNode(node) {
+		return (this._maps().depthMap.get(node.id) ?? 0) < this.maxDepth() || this._overrideSubtreeSet().has(node.id);
+	}
+	constructor() {
+		this.tree = input([], ...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+		this.selection = model([], ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.descriptionEmpty = input("<span>Nessuna selezione: vengono inclusi <strong>tutti gli elementi</strong>.</span>", ...ngDevMode ? [{ debugName: "descriptionEmpty" }] : /* istanbul ignore next */ []);
+		this.maxDepth = input(3, ...ngDevMode ? [{ debugName: "maxDepth" }] : /* istanbul ignore next */ []);
+		this.maxDepthOverrides = input([], ...ngDevMode ? [{ debugName: "maxDepthOverrides" }] : /* istanbul ignore next */ []);
+		this.minDepth = input(void 0, ...ngDevMode ? [{ debugName: "minDepth" }] : /* istanbul ignore next */ []);
+		this.selectionCount = output();
+		this.changed = output();
+		this._treeRef = viewChild(MatTree, ...ngDevMode ? [{ debugName: "_treeRef" }] : /* istanbul ignore next */ []);
+		this._elRef = inject(ElementRef);
+		this._overrideSubtreeSet = computed(() => {
+			const overrideIds = new Set(this.maxDepthOverrides());
+			const maps = this._maps();
+			const result = /* @__PURE__ */ new Set();
+			for (const id of overrideIds) {
+				const root = maps.nodeMap.get(id);
+				if (!root) continue;
+				const addSubtree = (n) => {
+					result.add(n.id);
+					for (const child of n.children ?? []) addSubtree(child);
+				};
+				addSubtree(root);
+			}
+			return result;
+		}, ...ngDevMode ? [{ debugName: "_overrideSubtreeSet" }] : /* istanbul ignore next */ []);
+		this._maps = computed(() => {
+			const parentMap = /* @__PURE__ */ new Map();
+			const depthMap = /* @__PURE__ */ new Map();
+			const nodeMap = /* @__PURE__ */ new Map();
+			const build = (nodes, parent, depth = 0) => {
+				for (const node of nodes) {
+					depthMap.set(node.id, depth);
+					nodeMap.set(node.id, node);
+					if (parent) parentMap.set(node.id, parent);
+					if (node.children?.length) build(node.children, node, depth + 1);
+				}
+			};
+			build(this.tree());
+			return {
+				parentMap,
+				depthMap,
+				nodeMap
+			};
+		}, ...ngDevMode ? [{ debugName: "_maps" }] : /* istanbul ignore next */ []);
+		this._selectedSet = computed(() => new Set(this.selection()), ...ngDevMode ? [{ debugName: "_selectedSet" }] : /* istanbul ignore next */ []);
+		this.hasSelection = computed(() => this.selection().length > 0, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
+		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) => {
+			return node.children ?? [];
+		};
+		this.hasChild = (_, node) => !!node.children?.length;
+		this.filterText = signal("", ...ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []);
+		this.filterForm = form(this.filterText);
+		this.filteredItems = signal([], ...ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []);
+		this.filterIndex = signal(-1, ...ngDevMode ? [{ debugName: "filterIndex" }] : /* istanbul ignore next */ []);
+		this.filteredNode = computed(() => {
+			const idx = this.filterIndex();
+			return idx >= 0 ? this.filteredItems()[idx] ?? null : null;
+		}, ...ngDevMode ? [{ debugName: "filteredNode" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const maps = this._maps();
+			const expandLevels = this.minDepth() ?? 0;
+			setTimeout(() => {
+				const tree = this._treeRef();
+				if (!tree) return;
+				tree.collapseAll();
+				if (expandLevels <= 0) return;
+				maps.depthMap.forEach((depth, id) => {
+					if (depth < expandLevels) {
+						const node = maps.nodeMap.get(id);
+						if (node) tree.expand(node);
+					}
+				});
+			});
+		});
+		effect(() => {
+			this.selectionCount.emit(this.selectedVisibleCount());
+		});
+	}
+	expandAll() {
+		this._treeRef()?.expandAll();
+	}
+	collapseAll() {
+		this._treeRef()?.collapseAll();
+	}
+	clearAll() {
+		this.selection.set([]);
+		this.changed.emit();
+	}
+	doFilter() {
+		const text = this.filterText().trim().toLowerCase();
+		if (text.length < 3) {
+			this.filteredItems.set([]);
+			this.filterIndex.set(-1);
+			return;
+		}
+		const matches = Array.from(this._maps().nodeMap.values()).filter((n) => n.name?.toLowerCase().includes(text));
+		this.filteredItems.set(matches);
+		const idx = matches.length > 0 ? 0 : -1;
+		this.filterIndex.set(idx);
+		if (idx >= 0) this._scrollToFiltered(idx, matches);
+	}
+	clearFilter() {
+		this.filterText.set("");
+		this.filteredItems.set([]);
+		this.filterIndex.set(-1);
+	}
+	nextFiltered() {
+		const items = this.filteredItems();
+		if (!items.length) return;
+		const next = (this.filterIndex() + 1) % items.length;
+		this.filterIndex.set(next);
+		this._scrollToFiltered(next, items);
+	}
+	isFilteredNode(node) {
+		return this.filteredNode()?.id === node.id;
+	}
+	_scrollToFiltered(index, items) {
+		const node = items[index];
+		if (!node) return;
+		const tree = this._treeRef();
+		if (tree) {
+			let parent = this._maps().parentMap.get(node.id);
+			while (parent) {
+				tree.expand(parent);
+				parent = this._maps().parentMap.get(parent.id);
+			}
+		}
+		setTimeout(() => {
+			this._elRef.nativeElement.querySelector(`[data-node-id="${node.id}"]`)?.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth"
+			});
+		});
+	}
+	isSelected(node) {
+		return this._selectedSet().has(node.id);
+	}
+	isIndeterminate(node) {
+		if (!node.children?.length) return false;
+		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;
+	}
+	toggleNode(node) {
+		this.selection.update((current) => {
+			const set = new Set(current);
+			if (set.has(node.id)) set.delete(node.id);
+			else set.add(node.id);
+			this._syncParentsInSet(node, set);
+			return Array.from(set);
+		});
+		this.changed.emit();
+	}
+	removeNode(node) {
+		this.selection.update((current) => {
+			const set = new Set(current);
+			set.delete(node.id);
+			this._syncParentsInSet(node, set);
+			return Array.from(set);
+		});
+		this.changed.emit();
+	}
+	nodeById(id) {
+		return this._maps().nodeMap.get(id);
+	}
+	isChipVisible(id) {
+		const node = this._maps().nodeMap.get(id);
+		return node ? this._isSelectableNode(node) : false;
+	}
+	_getSelectableDescendants(node) {
+		const result = [];
+		for (const child of node.children ?? []) {
+			const c = child;
+			if (this._isSelectableNode(c)) result.push(c);
+			result.push(...this._getSelectableDescendants(c));
+		}
+		return result;
+	}
+	_syncParentsInSet(node, set) {
+		let parent = this._maps().parentMap.get(node.id);
+		while (parent) {
+			const descendants = this._getSelectableDescendants(parent);
+			if (descendants.length > 0 && descendants.every((d) => set.has(d.id))) set.add(parent.id);
+			else set.delete(parent.id);
+			parent = this._maps().parentMap.get(parent.id);
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TreePickerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: TreePickerComponent,
+			isStandalone: true,
+			selector: "tree-picker",
+			inputs: {
+				tree: {
+					classPropertyName: "tree",
+					publicName: "tree",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selection: {
+					classPropertyName: "selection",
+					publicName: "selection",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				descriptionEmpty: {
+					classPropertyName: "descriptionEmpty",
+					publicName: "descriptionEmpty",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxDepth: {
+					classPropertyName: "maxDepth",
+					publicName: "maxDepth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxDepthOverrides: {
+					classPropertyName: "maxDepthOverrides",
+					publicName: "maxDepthOverrides",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minDepth: {
+					classPropertyName: "minDepth",
+					publicName: "minDepth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				selection: "selectionChange",
+				selectionCount: "selectionCount",
+				changed: "changed"
+			},
+			viewQueries: [{
+				propertyName: "_treeRef",
+				first: true,
+				predicate: MatTree,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\n        <ng-template mat-tab-label>\n            Seleziona\n            <mat-icon\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\n                matTooltipPosition=\"above\">\n                info\n            </mat-icon>\n        </ng-template>\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n                    <div fxFlex fxHide.xs>\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\n                            subscriptSizing=\"dynamic\">\n                            <mat-label>Cerca...</mat-label>\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [formField]=\"filterForm\"\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\n                            @if (filterText()) {\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\n                                <mat-icon>close</mat-icon>\n                            </button>\n                            }\n                        </mat-form-field>\n                    </div>\n                    @if (filteredItems().length > 0) {\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\n                    </div>\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <button mat-icon-button (click)=\"nextFiltered()\">\n                            <mat-icon aria-label=\"Vai al prossimo\"\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\n                        </button>\n                    </div>\n                    }\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\n                            <mat-icon>unfold_more</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\n                            <mat-icon>unfold_less</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\n                            (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\n                    <!-- Leaf node -->\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                    <!-- Expandable node with children -->\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button matTreeNodeToggle>\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n                        </button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                </mat-tree>\n            </div>\n        </div>\n    </mat-tab>\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\n        style=\"height: 100%;\">\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\n                    @if (!hasSelection()) {\n                    <mat-icon>info</mat-icon>\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\n                    } @else {\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon> Azzera tutto\n                        </button>\n                    </div>\n                    }\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\n                <mat-chip-set>\n                    @for (id of selection(); track id) {\n                    @let node = nodeById(id);\n                    @if (node && isChipVisible(id)) {\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\n                        {{node.name}}\n                        @if (!disabled()) {\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\n                        }\n                    </mat-chip>\n                    }\n                    }\n                </mat-chip-set>\n            </div>\n        </div>\n    </mat-tab>\n</mat-tab-group>",
+			styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: MatTreeModule
+				},
+				{
+					kind: "directive",
+					type: i1.MatTreeNodeDef,
+					selector: "[matTreeNodeDef]",
+					inputs: ["matTreeNodeDefWhen", "matTreeNode"]
+				},
+				{
+					kind: "directive",
+					type: i1.MatTreeNodePadding,
+					selector: "[matTreeNodePadding]",
+					inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"]
+				},
+				{
+					kind: "directive",
+					type: i1.MatTreeNodeToggle,
+					selector: "[matTreeNodeToggle]",
+					inputs: ["matTreeNodeToggleRecursive"]
+				},
+				{
+					kind: "component",
+					type: i1.MatTree,
+					selector: "mat-tree",
+					exportAs: ["matTree"]
+				},
+				{
+					kind: "directive",
+					type: i1.MatTreeNode,
+					selector: "mat-tree-node",
+					inputs: ["tabIndex", "disabled"],
+					outputs: ["activation", "expandedChange"],
+					exportAs: ["matTreeNode"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatCheckboxModule
+				},
+				{
+					kind: "component",
+					type: i2.MatCheckbox,
+					selector: "mat-checkbox",
+					inputs: [
+						"aria-label",
+						"aria-labelledby",
+						"aria-describedby",
+						"aria-expanded",
+						"aria-controls",
+						"aria-owns",
+						"id",
+						"required",
+						"labelPosition",
+						"name",
+						"value",
+						"disableRipple",
+						"tabIndex",
+						"color",
+						"disabledInteractive",
+						"checked",
+						"disabled",
+						"indeterminate"
+					],
+					outputs: ["change", "indeterminateChange"],
+					exportAs: ["matCheckbox"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatIconModule
+				},
+				{
+					kind: "component",
+					type: i3.MatIcon,
+					selector: "mat-icon",
+					inputs: [
+						"color",
+						"inline",
+						"svgIcon",
+						"fontSet",
+						"fontIcon"
+					],
+					exportAs: ["matIcon"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatTabsModule
+				},
+				{
+					kind: "directive",
+					type: i4.MatTabLabel,
+					selector: "[mat-tab-label], [matTabLabel]"
+				},
+				{
+					kind: "component",
+					type: i4.MatTab,
+					selector: "mat-tab",
+					inputs: [
+						"disabled",
+						"label",
+						"aria-label",
+						"aria-labelledby",
+						"labelClass",
+						"bodyClass",
+						"id"
+					],
+					exportAs: ["matTab"]
+				},
+				{
+					kind: "component",
+					type: i4.MatTabGroup,
+					selector: "mat-tab-group",
+					inputs: [
+						"color",
+						"fitInkBarToContent",
+						"mat-stretch-tabs",
+						"mat-align-tabs",
+						"dynamicHeight",
+						"selectedIndex",
+						"headerPosition",
+						"animationDuration",
+						"contentTabIndex",
+						"disablePagination",
+						"disableRipple",
+						"preserveContent",
+						"backgroundColor",
+						"aria-label",
+						"aria-labelledby"
+					],
+					outputs: [
+						"selectedIndexChange",
+						"focusChange",
+						"animationDone",
+						"selectedTabChange"
+					],
+					exportAs: ["matTabGroup"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatChipsModule
+				},
+				{
+					kind: "component",
+					type: i5.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.MatChipRemove,
+					selector: "[matChipRemove]"
+				},
+				{
+					kind: "component",
+					type: i5.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: i7.MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatFormFieldModule
+				},
+				{
+					kind: "component",
+					type: i8.MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: i8.MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: i8.MatSuffix,
+					selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+					inputs: ["matTextSuffix"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatInputModule
+				},
+				{
+					kind: "directive",
+					type: i9.MatInput,
+					selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+					inputs: [
+						"disabled",
+						"id",
+						"placeholder",
+						"name",
+						"required",
+						"type",
+						"errorStateMatcher",
+						"aria-describedby",
+						"value",
+						"readonly",
+						"disabledInteractive"
+					],
+					exportAs: ["matInput"]
+				},
+				{
+					kind: "directive",
+					type: FormField,
+					selector: "[formField]",
+					inputs: ["formField"],
+					exportAs: ["formField"]
+				},
+				{
+					kind: "ngmodule",
+					type: FlexLayoutModule
+				},
+				{
+					kind: "directive",
+					type: i10.FxLayoutDirective,
+					selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ",
+					inputs: [
+						"fxLayout",
+						"fxLayout.xs",
+						"fxLayout.sm",
+						"fxLayout.md",
+						"fxLayout.lg",
+						"fxLayout.xl",
+						"fxLayout.lt-sm",
+						"fxLayout.lt-md",
+						"fxLayout.lt-lg",
+						"fxLayout.lt-xl",
+						"fxLayout.gt-xs",
+						"fxLayout.gt-sm",
+						"fxLayout.gt-md",
+						"fxLayout.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i10.FxFlexDirective,
+					selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ",
+					inputs: [
+						"fxFlex",
+						"fxFlex.xs",
+						"fxFlex.sm",
+						"fxFlex.md",
+						"fxFlex.lg",
+						"fxFlex.xl",
+						"fxFlex.lt-sm",
+						"fxFlex.lt-md",
+						"fxFlex.lt-lg",
+						"fxFlex.lt-xl",
+						"fxFlex.gt-xs",
+						"fxFlex.gt-sm",
+						"fxFlex.gt-md",
+						"fxFlex.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i10.FxShowHideDirective,
+					selector: "    [fxShow],    [fxHide],    [fxShow.xs],    [fxShow.sm],    [fxShow.md],    [fxShow.lg],    [fxShow.xl],    [fxShow.lt-sm],    [fxShow.lt-md],    [fxShow.lt-lg],    [fxShow.lt-xl],    [fxShow.gt-xs],    [fxShow.gt-sm],    [fxShow.gt-md],    [fxShow.gt-lg],    [fxHide.xs],    [fxHide.sm],    [fxHide.md],    [fxHide.lg],    [fxHide.xl],    [fxHide.lt-sm],    [fxHide.lt-md],    [fxHide.lt-lg],    [fxHide.lt-xl],    [fxHide.gt-xs],    [fxHide.gt-sm],    [fxHide.gt-md],    [fxHide.gt-lg]  ",
+					inputs: [
+						"fxShow",
+						"fxShow.xs",
+						"fxShow.sm",
+						"fxShow.md",
+						"fxShow.lg",
+						"fxShow.xl",
+						"fxShow.lt-sm",
+						"fxShow.lt-md",
+						"fxShow.lt-lg",
+						"fxShow.lt-xl",
+						"fxShow.gt-xs",
+						"fxShow.gt-sm",
+						"fxShow.gt-md",
+						"fxShow.gt-lg",
+						"fxHide",
+						"fxHide.xs",
+						"fxHide.sm",
+						"fxHide.md",
+						"fxHide.lg",
+						"fxHide.xl",
+						"fxHide.lt-sm",
+						"fxHide.lt-md",
+						"fxHide.lt-lg",
+						"fxHide.lt-xl",
+						"fxHide.gt-xs",
+						"fxHide.gt-sm",
+						"fxHide.gt-md",
+						"fxHide.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i10.FxLayoutAlignDirective,
+					selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ",
+					inputs: [
+						"fxLayoutAlign",
+						"fxLayoutAlign.xs",
+						"fxLayoutAlign.sm",
+						"fxLayoutAlign.md",
+						"fxLayoutAlign.lg",
+						"fxLayoutAlign.xl",
+						"fxLayoutAlign.lt-sm",
+						"fxLayoutAlign.lt-md",
+						"fxLayoutAlign.lt-lg",
+						"fxLayoutAlign.lt-xl",
+						"fxLayoutAlign.gt-xs",
+						"fxLayoutAlign.gt-sm",
+						"fxLayoutAlign.gt-md",
+						"fxLayoutAlign.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i10.FxLayoutGapDirective,
+					selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ",
+					inputs: [
+						"fxLayoutGap",
+						"fxLayoutGap.xs",
+						"fxLayoutGap.sm",
+						"fxLayoutGap.md",
+						"fxLayoutGap.lg",
+						"fxLayoutGap.xl",
+						"fxLayoutGap.lt-sm",
+						"fxLayoutGap.lt-md",
+						"fxLayoutGap.lt-lg",
+						"fxLayoutGap.lt-xl",
+						"fxLayoutGap.gt-xs",
+						"fxLayoutGap.gt-sm",
+						"fxLayoutGap.gt-md",
+						"fxLayoutGap.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i10.FxFlexFillDirective,
+					selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ",
+					inputs: [
+						"fxFlexFill",
+						"fxFill",
+						"fxFlexFill.xs",
+						"fxFlexFill.sm",
+						"fxFlexFill.md",
+						"fxFlexFill.lg",
+						"fxFlexFill.xl",
+						"fxFlexFill.lt-sm",
+						"fxFlexFill.lt-md",
+						"fxFlexFill.lt-lg",
+						"fxFlexFill.lt-xl",
+						"fxFlexFill.gt-xs",
+						"fxFlexFill.gt-sm",
+						"fxFlexFill.gt-md",
+						"fxFlexFill.gt-lg"
+					]
+				},
+				{
+					kind: "pipe",
+					type: SafeHtmlPipe,
+					name: "safeHtml"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TreePickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "tree-picker",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatTreeModule,
+				MatCheckboxModule,
+				MatIconModule,
+				MatTabsModule,
+				MatChipsModule,
+				MatButtonModule,
+				MatTooltipModule,
+				MatFormFieldModule,
+				MatInputModule,
+				FormField,
+				FlexLayoutModule,
+				SafeHtmlPipe
+			],
+			template: "<mat-tab-group class=\"taxonomy-picker-tabs\" style=\"height:100%\">\n    <mat-tab style=\"overflow-x: hidden !important; height: 100%\">\n        <ng-template mat-tab-label>\n            Seleziona\n            <mat-icon\n                style=\"font-size:16px;height:16px;width:16px;margin-left:4px;vertical-align:middle;color:var(--mat-sys-primary)\"\n                [matTooltip]=\"'Nessuna selezione = tutti gli argomenti inclusi;\\r\\nOgni elemento selezionato include sempre tutti i suoi sottoelementi'\"\n                matTooltipPosition=\"above\">\n                info\n            </mat-icon>\n        </ng-template>\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n                    <div fxFlex fxHide.xs>\n                        <mat-form-field style=\"width:200px; padding: 8px 0px\" appearance=\"outline\"\n                            subscriptSizing=\"dynamic\">\n                            <mat-label>Cerca...</mat-label>\n                            <input type=\"text\" (keyup)=\"doFilter()\" matInput [formField]=\"filterForm\"\n                                (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\"\n                                (keydown.arrowDown)=\"$event.preventDefault(); $event.stopPropagation(); nextFiltered()\">\n                            @if (filterText()) {\n                            <button type=\"button\" type=\"button\" tabindex=\"-1\" matSuffix mat-icon-button\n                                aria-label=\"Clear\" (click)=\"clearFilter()\">\n                                <mat-icon>close</mat-icon>\n                            </button>\n                            }\n                        </mat-form-field>\n                    </div>\n                    @if (filteredItems().length > 0) {\n                    <div fxFlex=\"50px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <div class=\"small\">{{filterIndex() + 1}} / {{filteredItems().length}}</div>\n                    </div>\n                    <div fxFlex=\"48px\" fxHide.xs fxLayoutAlign=\"end center\">\n                        <button mat-icon-button (click)=\"nextFiltered()\">\n                            <mat-icon aria-label=\"Vai al prossimo\"\n                                matTooltip=\"Vai al prossimo\">arrow_downward</mat-icon>\n                        </button>\n                    </div>\n                    }\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end center\">\n                        <button mat-icon-button [matTooltip]=\"'Espandi tutto'\" (click)=\"expandAll()\">\n                            <mat-icon>unfold_more</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Comprimi tutto'\" (click)=\"collapseAll()\">\n                            <mat-icon>unfold_less</mat-icon>\n                        </button>\n                        <button mat-icon-button [matTooltip]=\"'Azzera selezione'\" [disabled]=\"!hasSelection()\"\n                            (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon>\n                        </button>\n                    </div>\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto;\">\n                <mat-tree [dataSource]=\"tree()\" [childrenAccessor]=\"treeChildrenAccessor\" class=\"tree\">\n                    <!-- Leaf node -->\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding [matTreeNodePaddingIndent]=\"20\"\n                        class=\"tree-node\" [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button disabled style=\"visibility: hidden\"></button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                    <!-- Expandable node with children -->\n                    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding\n                        [matTreeNodePaddingIndent]=\"20\" #treeNode=\"matTreeNode\" class=\"tree-node\"\n                        [class.tree-node-filtered]=\"filteredNode()?.id === node.id\"\n                        [class.tree-node-no-select]=\"!isSelectable(node)\"\n                        [attr.data-node-id]=\"node.id\">\n                        <button mat-icon-button matTreeNodeToggle>\n                            <mat-icon>{{treeNode.isExpanded ? 'expand_more' : 'chevron_right'}}</mat-icon>\n                        </button>\n                        @if (isSelectable(node)) {\n                        <mat-checkbox [checked]=\"isSelected(node)\" [indeterminate]=\"isIndeterminate(node)\"\n                            [disabled]=\"disabled()\" (change)=\"toggleNode(node)\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </mat-checkbox>\n                        } @else {\n                        <div class=\"tree-node-label-only\">\n                            <span class=\"small\">{{node.name}}</span>\n                        </div>\n                        }\n                    </mat-tree-node>\n                </mat-tree>\n            </div>\n        </div>\n    </mat-tab>\n    <mat-tab [label]=\"hasSelection() ? 'Selezionati (' + selectedVisibleCount() + ')' : 'Selezionati (tutti)'\"\n        style=\"height: 100%;\">\n        <div fxLayout=\"column\" fxFill style=\"overflow: hidden; height: 100%;\">\n            <div fxFlex>\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\" style=\"padding:12px\">\n                    @if (!hasSelection()) {\n                    <mat-icon>info</mat-icon>\n                    <span [innerHTML]=\"descriptionEmpty() | safeHtml\"></span>\n                    } @else {\n                    <div fxFlex=\"*\" fxLayoutAlign=\"end\">\n                        <button mat-button color=\"warn\" style=\"margin-left:auto\" (click)=\"clearAll()\">\n                            <mat-icon>deselect</mat-icon> Azzera tutto\n                        </button>\n                    </div>\n                    }\n                </div>\n            </div>\n            <div fxFlex=\"*\" style=\"overflow-y: auto; padding-bottom: 12px;\">\n                <mat-chip-set>\n                    @for (id of selection(); track id) {\n                    @let node = nodeById(id);\n                    @if (node && isChipVisible(id)) {\n                    <mat-chip (removed)=\"removeNode(node)\" style=\"max-width: 280px;\" [matTooltip]=\"node.name\">\n                        {{node.name}}\n                        @if (!disabled()) {\n                        <button matChipRemove matTooltip=\"Elimina\"><mat-icon>cancel</mat-icon></button>\n                        }\n                    </mat-chip>\n                    }\n                    }\n                </mat-chip-set>\n            </div>\n        </div>\n    </mat-tab>\n</mat-tab-group>",
+			styles: [".tree-picker-tabs ::ng-deep .mat-mdc-tab-body-wrapper{flex:1 1 auto;height:100%}.tree{padding:8px 0 16px;background-color:transparent!important}.tree-node{min-height:36px!important;padding-right:12px;margin-right:0}.tree-node .small-icon-button{width:2rem!important;height:2rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.tree-node .small-icon-button .mat-mdc-button-touch-target{width:2rem!important;height:2rem!important}.tree-node:not(.tree-node-no-select):hover{cursor:pointer;background-color:var(--mat-menu-item-hover-state-layer-color, transparent);border-radius:24px}.tree-node-filtered ::ng-deep .mdc-label,.tree-node-filtered ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-accent, #7894ae)!important}.tree-node-filtered .tree-node-label-only{font-weight:700;color:var(--ars-color-accent, #7894ae);opacity:1}.tree-node-activated ::ng-deep .mdc-label,.tree-node-activated ::ng-deep .mat-mdc-checkbox label{font-weight:700;color:var(--ars-color-secondary, #4a635f)!important}.tree-node-label-only{display:flex;flex-direction:column;justify-content:center;padding-left:30px;opacity:.7}\n"]
+		}]
+	}],
+	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 }]
+		}]
+	}
+});
 export { TreePickerComponent };
-//# sourceMappingURL=arsedizioni-ars-utils-ui.controls.tree.mjs.map
+
+//# sourceMappingURL=arsedizioni-ars-utils-ui.controls.tree.mjs.map