@nanahoshi/mona-ui 0.23.0 → 0.23.1

package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs

@@ -1,14 +1,14 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { Directive, signal, computed, untracked, effect, Injectable, Pipe, inject, DestroyRef, input, ChangeDetectionStrategy, Component, DOCUMENT, NgZone, ElementRef, afterRenderEffect, contentChild, TemplateRef, afterNextRender } from '@angular/core';
+import { Directive, signal, computed, inject, DestroyRef, effect, untracked, Injectable, Pipe, input, ChangeDetectionStrategy, Component, DOCUMENT, NgZone, ElementRef, afterRenderEffect, contentChild, TemplateRef, afterNextRender } from '@angular/core';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MonaI18nService, injectComponentDirection } from '@nanahoshi/mona-ui/i18n';
+import { themeOverlaySurfaceClasses, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { Subject, BehaviorSubject, ReplaySubject, switchMap, debounceTime, distinctUntilChanged, Observable, take, filter, tap, map, asapScheduler, fromEvent, takeWhile } from 'rxjs';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
-import { ImmutableSet, List, from, sequenceEqual, contains, EnumerableSet, forEach } from '@mirei/ts-collections';
+import { ImmutableSet, List, from, sequenceEqual, EnumerableSet, forEach } from '@mirei/ts-collections';
 import { v4 } from 'uuid';
 import { cva } from 'class-variance-authority';
-import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 import { CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
 import { LucideArrowDown, LucideArrowUp, LucideBan, LucideChevronDown, LucideChevronRight, LucideLoaderCircle, LucidePlus } from '@lucide/angular';
 import * as i1 from '@angular/forms';
@@ -66,6 +66,11 @@ class TreeNode {
         this.loading = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.uid = v4();
+        /**
+         * Whether children from an asynchronous children selector have been loaded. Loaded children are cached,
+         * so collapsing and re-expanding the node does not request them again.
+         */
+        this.childrenLoaded = false;
         this.index = "";
         this.parent = null;
         this.data = data;
@@ -103,6 +108,10 @@ function getTreeNodeElementId(uid) {
 var _a;
 class TreeService {
     #checkedKeys;
+    /**
+     * Pending asynchronous child loads by node uid, so a new load for a node cancels the previous one.
+     */
+    #childLoads;
     #data;
     #filteredExpandedKeys;
     #flatIdField;
@@ -117,6 +126,10 @@ class TreeService {
     constructor() {
         this.#checkedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#checkedKeys" }] : /* istanbul ignore next */ []));
+        /**
+         * Pending asynchronous child loads by node uid, so a new load for a node cancels the previous one.
+         */
+        this.#childLoads = new Map();
         this.#data = signal(ImmutableSet.create(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#data" }] : /* istanbul ignore next */ []));
         this.#filteredExpandedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
@@ -132,15 +145,12 @@ class TreeService {
         this.#navigableNodes = computed(() => {
             const visibleUids = this.#visibleUids();
             const allFlatNodes = _a.flatten(this.nodeSet());
+            // flatten() walks the tree depth-first, so its order already is the visual (navigation) order.
             if (visibleUids === null) {
-                return allFlatNodes
-                    .where(n => n.parent === null || !this.isAnyParentCollapsed(n))
-                    .orderBy(n => n.index)
-                    .toImmutableSet();
+                return allFlatNodes.where(n => n.parent === null || !this.isAnyParentCollapsed(n)).toImmutableSet();
             }
             return allFlatNodes
                 .where(n => visibleUids.has(n.uid) && (n.parent === null || !this.isAnyParentCollapsed(n)))
-                .orderBy(n => n.index)
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#navigableNodes" }] : /* istanbul ignore next */ []));
@@ -158,8 +168,8 @@ class TreeService {
             if (!filterText) {
                 return null;
             }
-            const nodeSet = this.nodeSet();
-            return untracked(() => this.computeVisibleUids(nodeSet, filterText));
+            // Tracked on purpose: moves, lazily loaded children and filter option changes re-run the filter.
+            return this.computeVisibleUids(this.nodeSet(), filterText);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#visibleUids" }] : /* istanbul ignore next */ []));
         this.animationTemporarilyDisabled = signal(false, /* @ts-ignore */
@@ -281,6 +291,10 @@ class TreeService {
                 .toImmutableSet();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewNodeSet" }] : /* istanbul ignore next */ []));
+        inject(DestroyRef).onDestroy(() => {
+            this.#childLoads.forEach(subscription => subscription.unsubscribe());
+            this.#childLoads.clear();
+        });
         effect(() => {
             const visibleUids = this.#visibleUids();
             untracked(() => {
@@ -321,6 +335,34 @@ class TreeService {
         }
         this.updateNodeIndices();
     }
+    /**
+     * Expands every expandable, enabled sibling of a node (the `*` key of the WAI-ARIA tree pattern).
+     */
+    expandSiblings(node) {
+        const siblings = node.parent ? node.parent.children() : this.nodeSet();
+        for (const sibling of siblings) {
+            if (this.hasChildren(sibling)) {
+                this.toggleNodeExpand(sibling, true);
+            }
+        }
+    }
+    /**
+     * Finds the next visible node, after the navigated node and wrapping around, whose text starts with `prefix`
+     * (case-insensitive). Used for typeahead.
+     */
+    findNodeByText(prefix) {
+        const normalizedPrefix = prefix.toLowerCase();
+        const nodes = this.#navigableNodes().toArray();
+        const navigatedNode = this.navigatedNode();
+        const start = navigatedNode ? nodes.indexOf(navigatedNode) : -1;
+        for (let offset = 1; offset <= nodes.length; offset++) {
+            const node = nodes[(start + offset) % nodes.length];
+            if (this.getNodeText(node).toLowerCase().startsWith(normalizedPrefix)) {
+                return node;
+            }
+        }
+        return null;
+    }
     getNodeByUid(uid) {
         const nodeDictionary = this.#nodeDictionary();
         return nodeDictionary.get(uid) ?? null;
@@ -330,13 +372,17 @@ class TreeService {
     }
     getNodeText(node) {
         const textField = this.textField();
+        let text;
         if (!textField) {
-            return String(node.data) || "";
+            text = node.data;
         }
-        if (typeof textField === "string") {
-            return node.data[textField];
+        else if (typeof textField === "string") {
+            text = node.data?.[textField];
         }
-        return textField(node.data);
+        else {
+            text = textField(node.data);
+        }
+        return text == null ? "" : String(text);
     }
     hasChildren(node) {
         if (node === null) {
@@ -387,17 +433,23 @@ class TreeService {
     }
     isDisabled(node) {
         const disableOptions = this.disableOptions();
-        const disabledKeys = this.disabledKeys();
         if (!disableOptions.enabled) {
             return false;
         }
-        const key = this.getDisableKey(node);
-        const disabled = disabledKeys.contains(key);
+        const disabledKeys = this.disabledKeys();
+        if (disabledKeys.contains(this.getDisableKey(node))) {
+            return true;
+        }
         if (!disableOptions.disableChildren) {
-            return disabled;
+            return false;
         }
-        const anyParentDisabled = this.isAnyParentDisabled(node);
-        return disabled || (disableOptions.disableChildren && anyParentDisabled);
+        // A single walk up the ancestors: O(depth) instead of re-evaluating every ancestor's own ancestors.
+        for (let parent = node.parent; parent != null; parent = parent.parent) {
+            if (disabledKeys.contains(this.getDisableKey(parent))) {
+                return true;
+            }
+        }
+        return false;
     }
     isExpanded(node) {
         const expandableOptions = this.expandableOptions();
@@ -419,8 +471,7 @@ class TreeService {
         if (node.children().isEmpty()) {
             return false;
         }
-        const hasCheckbox = this.#hasCheckboxPredicate();
-        const childNodes = hasCheckbox !== null ? node.children().where(n => hasCheckbox(n.data, n.uid)) : node.children();
+        const childNodes = this.getCheckStateChildren(node);
         if (childNodes.none()) {
             return false;
         }
@@ -452,18 +503,25 @@ class TreeService {
         }
         return visibleUids.has(node.uid);
     }
-    loadNodeChildren(node) {
+    /**
+     * Loads the children of a node from an asynchronous children selector.
+     * Children are loaded once and cached; pass `reload` to request them again. A new load cancels a pending one.
+     */
+    loadNodeChildren(node, reload = false) {
         const childrenSelector = this.children();
         if (typeof childrenSelector !== "function") {
             return;
         }
+        if (!reload && (node.childrenLoaded || node.loading())) {
+            return;
+        }
         const children = childrenSelector(node.data);
         if (!(children instanceof Observable)) {
             return;
         }
-        node.children.set(ImmutableSet.create());
+        this.#childLoads.get(node.uid)?.unsubscribe();
         node.loading.set(true);
-        children.pipe(take(1)).subscribe({
+        const subscription = children.pipe(take(1)).subscribe({
             next: c => {
                 const childNodes = new List();
                 for (const child of c) {
@@ -473,15 +531,35 @@ class TreeService {
                 }
                 this.loadCheckedKeysForChildren(node, childNodes);
                 node.children.update(list => list.clear().addAll(childNodes));
+                this.updateNodeIndices();
+                node.childrenLoaded = true;
                 node.loading.set(false);
+                this.#childLoads.delete(node.uid);
                 this.restoreExpandedChildren(childNodes);
             },
             error: () => {
                 node.loading.set(false);
+                this.#childLoads.delete(node.uid);
+            },
+            complete: () => {
+                if (node.loading()) {
+                    node.loading.set(false);
+                }
+                this.#childLoads.delete(node.uid);
             }
         });
+        if (node.loading()) {
+            this.#childLoads.set(node.uid, subscription);
+        }
     }
+    /**
+     * Moves a node relative to a target node. Moving a node onto itself or into its own subtree is ignored,
+     * because it would detach the subtree and create a parent cycle.
+     */
     moveNode(sourceNode, targetNode, position) {
+        if (sourceNode === targetNode || targetNode.isDescendantOf(sourceNode)) {
+            return;
+        }
         const oldParent = sourceNode.parent;
         switch (position) {
             case "inside":
@@ -552,20 +630,24 @@ class TreeService {
         if (sequenceEqual(checkedKeys, orderedKeys)) {
             return;
         }
-        const checkedKeysSet = this.#nodeDictionary()
-            .values()
-            .where(n => contains(keys, this.getCheckKey(n)))
-            .toEnumerableSet();
+        const keyList = Array.from(keys);
+        const keySet = new Set(keyList);
         this.#nodeDictionary().forEach(n => {
-            n.value.checked.set(checkedKeysSet.contains(n.value));
+            n.value.checked.set(keySet.has(this.getCheckKey(n.value)));
         });
-        this.#checkedKeys.set(ImmutableSet.create(keys));
+        this.#checkedKeys.set(ImmutableSet.create(keyList));
+        this.applyCheckedKeysToNodes();
     }
     setData(data) {
         this.#data.set(ImmutableSet.create(data));
         this.nodeSet.set(this.createNodes(data));
         this.updateNodeIndices();
         this.applyCheckedKeysToNodes();
+        const navigatedNode = this.navigatedNode();
+        if (navigatedNode && this.#nodeDictionary().get(navigatedNode.uid) == null) {
+            // The node was removed: drop it so aria-activedescendant never points at a missing element.
+            this.navigatedNode.set(null);
+        }
     }
     setDataStructure(structure) {
         this.#structure.set(structure);
@@ -666,11 +748,12 @@ class TreeService {
             });
         }
         if (mode !== "single" && checkParents && !childrenOnly) {
-            const hasCheckbox = this.#hasCheckboxPredicate();
             const parentNodes = this.getParentNodes(node);
             parentNodes.forEach(n => {
-                const siblings = hasCheckbox !== null ? n.children().where(c => hasCheckbox(c.data, c.uid)) : n.children();
-                const allChecked = siblings.all(c => c.checked());
+                const allChecked = this.deriveParentChecked(n);
+                if (allChecked === null) {
+                    return;
+                }
                 const parentKey = this.getCheckKey(n);
                 if (allChecked) {
                     checkedKeys.add(parentKey);
@@ -749,6 +832,22 @@ class TreeService {
     setTextField(selector) {
         this.textField.set(selector);
     }
+    /**
+     * Expands or collapses a node the way user interaction does: disabled nodes are left alone, children of an
+     * asynchronous children selector are loaded on first expand, and `nodeExpand$` is notified.
+     * @returns whether the expand state changed.
+     */
+    toggleNodeExpand(node, expanded) {
+        if (this.isDisabled(node) || this.isExpanded(node) === expanded) {
+            return false;
+        }
+        if (expanded) {
+            this.loadNodeChildren(node);
+        }
+        this.setNodeExpand(node, expanded);
+        this.nodeExpand$.next({ node, expanded });
+        return true;
+    }
     getCheckKey(node) {
         const checkBy = this.checkBy();
         if (!checkBy) {
@@ -784,24 +883,15 @@ class TreeService {
             const allNodes = _a.flatten(this.nodeSet());
             const updatedCheckedKeys = this.#checkedKeys().toEnumerableSet();
             let changed = false;
+            // Children before parents, so derived parents feed their own ancestors. Parents are only ever added:
+            // a parent key supplied by the consumer is kept even when its children are not all checked.
             allNodes.reverse().forEach(node => {
-                const childNodes = node.children();
-                if (!childNodes.isEmpty()) {
-                    const allChildrenChecked = childNodes.all(c => c.checked());
-                    const key = this.getCheckKey(node);
-                    if (allChildrenChecked !== node.checked()) {
-                        node.checked.set(allChildrenChecked);
-                        changed = true;
-                    }
-                    if (allChildrenChecked && !updatedCheckedKeys.contains(key)) {
-                        updatedCheckedKeys.add(key);
-                        changed = true;
-                    }
-                    else if (!allChildrenChecked && updatedCheckedKeys.contains(key)) {
-                        updatedCheckedKeys.remove(key);
-                        changed = true;
-                    }
+                if (this.deriveParentChecked(node) !== true || node.checked()) {
+                    return;
                 }
+                node.checked.set(true);
+                updatedCheckedKeys.add(this.getCheckKey(node));
+                changed = true;
             });
             if (changed) {
                 this.#checkedKeys.set(updatedCheckedKeys.toImmutableSet());
@@ -847,35 +937,33 @@ class TreeService {
         };
         return buildNodes(parentId, null);
     }
-    createHierarchicalNodes(root, parent, nodeDict) {
+    /**
+     * Builds tree nodes for hierarchical data, reusing the existing node of each data item so node state survives
+     * a data refresh. A data object that appears more than once gets a node of its own for every extra occurrence.
+     */
+    createHierarchicalNodes(root, parent, existingNodes, usedNodes) {
         const rootList = new List(root);
         const children = this.children();
-        if (rootList.isEmpty() || !children) {
+        if (rootList.isEmpty()) {
             return null;
         }
         const nodes = new EnumerableSet();
         for (const dataItem of rootList) {
-            const existingNode = nodeDict.firstOrDefault(n => n.value.data === dataItem);
-            let node;
-            if (existingNode) {
-                node = existingNode.value;
-                node.parent = parent;
-            }
-            else {
-                node = new TreeNode(dataItem);
-                node.parent = parent;
-            }
+            const existingNode = existingNodes.get(dataItem);
+            const node = existingNode && !usedNodes.has(existingNode) ? existingNode : new TreeNode(dataItem);
+            node.parent = parent;
+            usedNodes.add(node);
             if (typeof children === "string") {
                 const subNodes = dataItem[children];
                 if (subNodes) {
-                    const childNodes = this.createHierarchicalNodes(subNodes, node, nodeDict);
+                    const childNodes = this.createHierarchicalNodes(subNodes, node, existingNodes, usedNodes);
                     node.children.update(list => list.clear().addAll(childNodes ?? []));
                 }
             }
             else {
                 const result = children(dataItem);
                 if (!(result instanceof Observable)) {
-                    const childNodes = this.createHierarchicalNodes(result, node, nodeDict);
+                    const childNodes = this.createHierarchicalNodes(result, node, existingNodes, usedNodes);
                     node.children.update(list => list.clear().addAll(childNodes ?? []));
                 }
             }
@@ -892,8 +980,33 @@ class TreeService {
         if (structure === "flat") {
             return this.createFlatNodes(data, null).toImmutableSet();
         }
-        const nodeDictionary = this.#nodeDictionary();
-        return this.createHierarchicalNodes(data, null, nodeDictionary) ?? ImmutableSet.create();
+        const existingNodes = new Map();
+        for (const node of this.#nodeDictionary().values()) {
+            if (!existingNodes.has(node.data)) {
+                existingNodes.set(node.data, node);
+            }
+        }
+        return this.createHierarchicalNodes(data, null, existingNodes, new Set()) ?? ImmutableSet.create();
+    }
+    /**
+     * The derived check state of a parent: `true` when all of its check-state children are checked,
+     * or `null` when it has none (its own state then stands).
+     */
+    deriveParentChecked(node) {
+        const children = this.getCheckStateChildren(node);
+        return children.none() ? null : children.all(c => c.checked());
+    }
+    /**
+     * Children that determine a parent's derived check state: those with a checkbox and, unless
+     * `checkDisabledChildren` is set, only enabled ones, because the user cannot change disabled children.
+     */
+    getCheckStateChildren(node) {
+        const hasCheckbox = this.#hasCheckboxPredicate();
+        const checkDisabledChildren = this.checkableOptions().checkDisabledChildren;
+        return node
+            .children()
+            .where(c => (hasCheckbox === null || hasCheckbox(c.data, c.uid)) &&
+            (checkDisabledChildren || !this.isDisabled(c)));
     }
     getExpandKey(node) {
         const expandBy = this.expandBy();
@@ -944,12 +1057,6 @@ class TreeService {
         }
         return false;
     }
-    isAnyParentDisabled(node) {
-        if (node.parent) {
-            return this.isDisabled(node.parent) || this.isAnyParentDisabled(node.parent);
-        }
-        return false;
-    }
     isFiltered(nodeText, filterText) {
         const text = this.filterableOptions().caseSensitive ? nodeText : nodeText.toLowerCase();
         const filter = this.filterableOptions().caseSensitive ? filterText : filterText.toLowerCase();
@@ -1088,7 +1195,7 @@ class TreeService {
         const navigableNodes = this.#navigableNodes();
         const navigatedNode = this.navigatedNode();
         const firstNode = navigableNodes.first();
-        let nextNode = navigableNodes
+        const nextNode = navigableNodes
             .skipWhile(n => n !== navigatedNode)
             .skip(1)
             .firstOrDefault();
@@ -1104,7 +1211,7 @@ class TreeService {
     navigateToPreviousNode() {
         const navigableNodes = this.#navigableNodes();
         const navigatedNode = this.navigatedNode();
-        let previousNode = navigableNodes.takeWhile(n => n !== navigatedNode).lastOrDefault();
+        const previousNode = navigableNodes.takeWhile(n => n !== navigatedNode).lastOrDefault();
         if (previousNode === null) {
             this.navigatedNode.set(navigableNodes.last());
             return navigableNodes.last();
@@ -1124,12 +1231,11 @@ class TreeService {
         const recalculateNodeChain = (start) => {
             let current = start;
             while (current !== null) {
-                const childNodes = current.children();
-                if (childNodes.isEmpty()) {
+                const allChecked = this.deriveParentChecked(current);
+                if (allChecked === null) {
                     current = current.parent;
                     continue;
                 }
-                const allChecked = childNodes.all(c => c.checked());
                 const key = this.getCheckKey(current);
                 if (allChecked !== current.checked()) {
                     current.checked.set(allChecked);
@@ -1620,12 +1726,7 @@ class SubTreeComponent {
     #i18n;
     #zone;
     onExpandStateChange(node) {
-        const expanded = this.treeService.isExpanded(node);
-        if (!expanded) {
-            this.treeService.loadNodeChildren(node);
-        }
-        this.treeService.setNodeExpand(node, !expanded);
-        this.treeService.nodeExpand$.next({ node, expanded: !expanded });
+        this.treeService.toggleNodeExpand(node, !this.treeService.isExpanded(node));
     }
     onNodeDragEnd(event) {
         const nodeDragEndEvent = new NodeDragEndEvent(event.source.data, event.event);
@@ -1703,14 +1804,14 @@ class SubTreeComponent {
         this.treeService.navigatedNode.set(node);
         const element = this.#document
             .querySelector(`li[data-uid="${node.uid}"]`)
-            ?.closest(".mona-tree");
+            ?.closest("[role=tree]");
         if (element == null) {
             return;
         }
         element.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? messages().collapse : messages().expand) +\n                            ' ' +\n                            nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <svg lucideLoaderCircle [size]=\"16\" aria-hidden=\"true\" class=\"animate-spin\"></svg>\n                        } @else if (nodeComponent.expanded()) {\n                            <svg lucideChevronDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                        } @else {\n                            <svg lucideChevronRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <svg lucidePlus [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                            @default {\n                                <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideBan, selector: "svg[lucideBan]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideLoaderCircle, selector: "svg[lucideLoaderCircle], svg[lucideLoader2]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SubTreeComponent, isStandalone: true, selector: "mona-sub-tree", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: true, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : 'none'\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? messages().collapse : messages().expand) +\n                            ' ' +\n                            nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <svg lucideLoaderCircle [size]=\"16\" aria-hidden=\"true\" class=\"animate-spin\"></svg>\n                        } @else if (nodeComponent.expanded()) {\n                            <svg lucideChevronDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                        } @else {\n                            <svg lucideChevronRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <svg lucidePlus [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                            @default {\n                                <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideBan, selector: "svg[lucideBan]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideLoaderCircle, selector: "svg[lucideLoaderCircle], svg[lucideLoader2]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: TreeNodeComponent, selector: "mona-tree-node", inputs: ["depth", "node"] }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "pipe", type: TreeNodeElementIdPipe, name: "treeNodeElementId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SubTreeComponent, decorators: [{
             type: Component,
@@ -1729,7 +1830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         CdkDragPreview,
                         CheckBoxComponent,
                         TreeNodeElementIdPipe
-                    ], template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : null\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? messages().collapse : messages().expand) +\n                            ' ' +\n                            nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <svg lucideLoaderCircle [size]=\"16\" aria-hidden=\"true\" class=\"animate-spin\"></svg>\n                        } @else if (nodeComponent.expanded()) {\n                            <svg lucideChevronDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                        } @else {\n                            <svg lucideChevronRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <svg lucidePlus [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                            @default {\n                                <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
+                    ], template: "<ul\n    [class]=\"listClass()\"\n    [attr.role]=\"parent() ? 'group' : 'none'\"\n    cdkDropList\n    [cdkDropListSortingDisabled]=\"true\"\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\n    @for (node of visibleNodes(); track node.uid) {\n        <li\n            [attr.id]=\"node.uid | treeNodeElementId\"\n            [attr.data-uid]=\"node.uid\"\n            [class]=\"listItemClass()\"\n            [tabindex]=\"-1\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"depth() + 1\"\n            [attr.aria-setsize]=\"visibleNodes().length\"\n            [attr.aria-posinset]=\"$index + 1\"\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\n            [attr.aria-checked]=\"\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\n            \"\n            (focus)=\"treeService.navigatedNode.set(node)\"\n            cdkDrag\n            [cdkDragData]=\"node\"\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\n            <div [class]=\"nodeContainerClass()\">\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\n                    <button\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [class]=\"nodeExpanderClass()\"\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [attr.aria-label]=\"\n                            (nodeComponent.expanded() ? messages().collapse : messages().expand) +\n                            ' ' +\n                            nodeComponent.nodeText()\n                        \"\n                        (click)=\"onExpandStateChange(node)\">\n                        @if (node.loading()) {\n                            <svg lucideLoaderCircle [size]=\"16\" aria-hidden=\"true\" class=\"animate-spin\"></svg>\n                        } @else if (nodeComponent.expanded()) {\n                            <svg lucideChevronDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                        } @else {\n                            <svg lucideChevronRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                        }\n                    </button>\n                }\n                @if (nodeComponent.checkable()) {\n                    <mona-check-box\n                        aria-hidden=\"true\"\n                        [tabIndex]=\"-1\"\n                        [disabled]=\"nodeComponent.disabled()\"\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\n                        [ngModel]=\"nodeComponent.checked()\"\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\n                }\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\n            </div>\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\n                <div\n                    class=\"grid overflow-hidden\"\n                    [animate.enter]=\"nodeExpandEnterClass()\"\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\n                    <div class=\"min-h-0 overflow-hidden\">\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\n                    </div>\n                </div>\n            }\n            @if (!nodeComponent.disabled()) {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\n                    <span>\n                        @switch (treeService.dropPositionSignal()?.position) {\n                            @case (\"before\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"after\") {\n                                @if (treeService.dropAllowed()) {\n                                    <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                } @else {\n                                    <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                                }\n                            }\n                            @case (\"inside\") {\n                                <svg lucidePlus [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                            @default {\n                                <svg lucideBan [size]=\"16\" aria-hidden=\"true\"></svg>\n                            }\n                        }\n                    </span>\n                    <span>{{ nodeComponent.nodeText() }}</span>\n                </div>\n            } @else {\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\n            }\n        </li>\n    }\n</ul>\n", styles: [".mona-tree-node-expand-enter{animation:mona-tree-node-expand-in .15s ease-out}.mona-tree-node-expand-leave{animation:mona-tree-node-expand-out .15s ease-out}@keyframes mona-tree-node-expand-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes mona-tree-node-expand-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}@media(prefers-reduced-motion:reduce){.mona-tree-node-expand-enter,.mona-tree-node-expand-leave{animation-duration:1ms}}\n"] }]
         }], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: true }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }] } });
 
 class TreeDropHintComponent {
@@ -1811,6 +1912,7 @@ class TreeComponent {
     #focusMonitor;
     #hostElementRef;
     #i18n;
+    #typeaheadKey$;
     #zone;
     #lastNavigatedNode;
     constructor() {
@@ -1819,6 +1921,7 @@ class TreeComponent {
         this.#focusMonitor = inject(FocusMonitor);
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
+        this.#typeaheadKey$ = new Subject();
         this.#zone = inject(NgZone);
         this.#lastNavigatedNode = null;
         this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
@@ -1968,28 +2071,42 @@ class TreeComponent {
                 this.treeService.navigate("next");
             }
             else if (event.key === collapseKey) {
+                // WAI-ARIA tree: collapse an open node, otherwise move to the parent.
                 event.preventDefault();
-                if (!navigatedNode || !navigatedNode.nodeItem.hasChildren) {
+                if (!navigatedNode) {
                     return;
                 }
-                const expanded = this.treeService.isExpanded(navigatedNode);
-                const disabled = this.treeService.isDisabled(navigatedNode);
-                if (!disabled && expanded) {
-                    this.treeService.setNodeExpand(navigatedNode, false);
+                const collapsible = this.treeService.hasChildren(navigatedNode) && this.treeService.isExpanded(navigatedNode);
+                if (collapsible && this.treeService.toggleNodeExpand(navigatedNode, false)) {
+                    return;
+                }
+                if (!collapsible && navigatedNode.parent) {
+                    this.treeService.navigatedNode.set(navigatedNode.parent);
                 }
-                this.treeService.navigatedNode.set(navigatedNode);
             }
             else if (event.key === expandKey) {
+                // WAI-ARIA tree: open a closed node, otherwise move to its first child.
                 event.preventDefault();
-                if (!navigatedNode || !navigatedNode.nodeItem.hasChildren) {
+                if (!navigatedNode || !this.treeService.hasChildren(navigatedNode)) {
                     return;
                 }
-                const expanded = this.treeService.isExpanded(navigatedNode);
-                const disabled = this.treeService.isDisabled(navigatedNode);
-                if (!disabled && !expanded) {
-                    this.treeService.setNodeExpand(navigatedNode, true);
+                if (!this.treeService.isExpanded(navigatedNode)) {
+                    this.treeService.toggleNodeExpand(navigatedNode, true);
+                }
+                else if (!navigatedNode.children().isEmpty()) {
+                    this.treeService.navigate("next");
                 }
             }
+            else if (event.key === "*") {
+                event.preventDefault();
+                if (navigatedNode) {
+                    this.treeService.expandSiblings(navigatedNode);
+                }
+            }
+            else if (event.key !== " " && isTypeaheadKey(event.key, event)) {
+                event.preventDefault();
+                this.#typeaheadKey$.next(event.key);
+            }
             else if (event.key === " ") {
                 event.preventDefault();
                 if (!navigatedNode || this.treeService.isDisabled(navigatedNode)) {
@@ -2056,6 +2173,17 @@ class TreeComponent {
         this.setFocusSubscription();
         this.setKeydownSubscription();
         this.setNodeDragHandlerSubscription();
+        this.setTypeaheadSubscription();
+    }
+    setTypeaheadSubscription() {
+        setupTypeahead(this.#typeaheadKey$)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(buffer => {
+            const node = this.treeService.findNodeByText(buffer);
+            if (node) {
+                this.treeService.navigatedNode.set(node);
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeComponent, isStandalone: true, selector: "mona-tree", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.role": "'tree'", "attr.tabindex": "0", "attr.aria-label": "ariaLabel() || null", "attr.aria-multiselectable": "treeService.selectableOptions().mode === 'multiple' || null", "attr.aria-activedescendant": "activeDescendantId()" } }, queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-sub-tree [nodes]=\"treeService.viewNodeSet()\" [parent]=\"null\" [depth]=\"0\"></mona-sub-tree>\n@if (treeService.dragging() && treeService.dropAllowed()) {\n    <mona-tree-drop-hint></mona-tree-drop-hint>\n}\n", dependencies: [{ kind: "component", type: SubTreeComponent, selector: "mona-sub-tree", inputs: ["depth", "nodes", "parent"] }, { kind: "component", type: TreeDropHintComponent, selector: "mona-tree-drop-hint" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2079,15 +2207,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * @param idKey - The property key used to uniquely identify each node (e.g., 'id').
  * @param parentIdKey - The property key holding the parent node's id, or null for roots (e.g., 'parentId').
  * @returns A new array representing the updated flat tree, with the moved node's parentIdKey updated.
+ * The array is returned unchanged when the position is "outside" or the target is the dragged node or one of its
+ * descendants, which would otherwise create a parent cycle.
  */
 function moveFlatTreeNode(treeData, event, idKey, parentIdKey) {
     const workingArray = [...treeData];
     const draggedId = event.nodeItem.data[idKey];
     const targetId = event.targetNode.data[idKey];
     const position = event.position;
-    if (position === "outside") {
+    if (position === "outside" || draggedId === targetId) {
         return workingArray;
     }
+    const itemsById = new Map(workingArray.map(item => [item[idKey], item]));
+    const visited = new Set();
+    for (let current = itemsById.get(targetId); current != null; current = itemsById.get(current[parentIdKey])) {
+        if (current[idKey] === draggedId) {
+            return workingArray;
+        }
+        if (visited.has(current[idKey])) {
+            break;
+        }
+        visited.add(current[idKey]);
+    }
     const draggedIndex = workingArray.findIndex(item => item[idKey] === draggedId);
     if (draggedIndex === -1) {
         return workingArray;
@@ -2133,7 +2274,10 @@ function moveFlatTreeNode(treeData, event, idKey, parentIdKey) {
  * @param event - The drag-and-drop event payload.
  * @param idKey - The property key used to identify nodes (e.g., 'id').
  * @param childrenKey - The property key containing the nested items (e.g., 'items').
- * @returns A new array representing the updated tree structure.
+ * @returns A new top-level array representing the updated tree structure.
+ * Nested children arrays are updated in place, so untouched data items keep their identity (and their tree state).
+ * The move is skipped, returning the tree unchanged, when the position is "outside", the target is missing,
+ * or the target is the dragged node or one of its descendants, so a node is never lost or made its own ancestor.
  */
 function moveTreeNode(treeData, event, idKey, childrenKey) {
     const updatedTree = [...treeData];
@@ -2141,6 +2285,29 @@ function moveTreeNode(treeData, event, idKey, childrenKey) {
     const targetId = event.targetNode.data[idKey];
     const position = event.position;
     let draggedNode = null;
+    if (position === "outside" || draggedId === targetId) {
+        return updatedTree;
+    }
+    function findNode(nodes, id) {
+        for (const node of nodes) {
+            if (node[idKey] === id) {
+                return node;
+            }
+            const children = node[childrenKey];
+            const found = Array.isArray(children) ? findNode(children, id) : null;
+            if (found) {
+                return found;
+            }
+        }
+        return null;
+    }
+    const draggedSource = findNode(updatedTree, draggedId);
+    const draggedChildren = draggedSource?.[childrenKey];
+    if (draggedSource == null ||
+        findNode(updatedTree, targetId) == null ||
+        (Array.isArray(draggedChildren) && findNode(draggedChildren, targetId) != null)) {
+        return updatedTree;
+    }
     function extractNode(nodes) {
         for (let i = 0; i < nodes.length; i++) {
             if (nodes[i][idKey] === draggedId) {