@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,2263 @@
+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 { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+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 { v4 } from 'uuid';
+import { cva } from 'class-variance-authority';
+import { CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { CheckBoxComponent } from '@nanahoshi/mona-ui/check-box';
+import { NgTemplateOutlet } from '@angular/common';
+import { twMerge } from 'tailwind-merge';
+
+class TreeNodeTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: TreeNodeTemplateDirective, isStandalone: true, selector: "ng-template[monaTreeNodeTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaTreeNodeTemplate]"
+                }]
+        }] });
+
+class NodeCheckEvent extends PreventableEvent {
+    #node;
+    constructor(node, event) {
+        super("nodeCheck", event);
+        this.#node = node;
+    }
+    get nodeItem() {
+        return {
+            data: this.#node.data,
+            hasChildren: this.#node.children().length > 0,
+            uid: this.#node.uid
+        };
+    }
+}
+
+class NodeSelectEvent extends PreventableEvent {
+    #node;
+    constructor(node, event) {
+        super("nodeSelect", event);
+        this.#node = node;
+    }
+    get nodeItem() {
+        return {
+            data: this.#node.data,
+            hasChildren: this.#node.children().length > 0,
+            uid: this.#node.uid
+        };
+    }
+}
+
+class TreeNode {
+    constructor(data) {
+        this.checked = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.children = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.uid = v4();
+        this.index = "";
+        this.parent = null;
+        this.data = data;
+    }
+    clone() {
+        const node = new TreeNode(this.data);
+        node.index = this.index;
+        node.children.set(ImmutableSet.create(this.children().select(c => c.clone())));
+        node.parent = this.parent;
+        return node;
+    }
+    isDescendantOf(node) {
+        let parent = this.parent;
+        while (parent != null) {
+            if (parent === node) {
+                return true;
+            }
+            parent = parent.parent;
+        }
+        return false;
+    }
+    get nodeItem() {
+        return {
+            data: this.data,
+            hasChildren: this.children().length > 0,
+            uid: this.uid
+        };
+    }
+}
+
+function getTreeNodeElementId(uid) {
+    return `mona-tree-node-${uid}`;
+}
+
+var _a;
+class TreeService {
+    #checkedKeys;
+    #data;
+    #filteredExpandedKeys;
+    #flatIdField;
+    #flatParentIdField;
+    #hasCheckboxPredicate;
+    #hasChildrenPredicate;
+    #navigableNodes;
+    #nodeDictionary;
+    #structure;
+    #unfilteredExpandedKeys;
+    #visibleUids;
+    constructor() {
+        this.#checkedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#checkedKeys" }] : /* istanbul ignore next */ []));
+        this.#data = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#data" }] : /* istanbul ignore next */ []));
+        this.#filteredExpandedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#filteredExpandedKeys" }] : /* istanbul ignore next */ []));
+        this.#flatIdField = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#flatIdField" }] : /* istanbul ignore next */ []));
+        this.#flatParentIdField = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#flatParentIdField" }] : /* istanbul ignore next */ []));
+        this.#hasCheckboxPredicate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasCheckboxPredicate" }] : /* istanbul ignore next */ []));
+        this.#hasChildrenPredicate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasChildrenPredicate" }] : /* istanbul ignore next */ []));
+        this.#navigableNodes = computed(() => {
+            const visibleUids = this.#visibleUids();
+            const allFlatNodes = _a.flatten(this.nodeSet());
+            if (visibleUids === null) {
+                return allFlatNodes
+                    .where(n => n.parent === null || !this.isAnyParentCollapsed(n))
+                    .orderBy(n => n.index)
+                    .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 */ []));
+        this.#nodeDictionary = computed(() => {
+            const nodes = this.nodeSet();
+            return this.createNodeDictionary(nodes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#nodeDictionary" }] : /* istanbul ignore next */ []));
+        this.#structure = signal("hierarchical", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#structure" }] : /* istanbul ignore next */ []));
+        this.#unfilteredExpandedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#unfilteredExpandedKeys" }] : /* istanbul ignore next */ []));
+        this.#visibleUids = computed(() => {
+            const filterText = this.filterText();
+            if (!filterText) {
+                return null;
+            }
+            const nodeSet = this.nodeSet();
+            return untracked(() => this.computeVisibleUids(nodeSet, filterText));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#visibleUids" }] : /* istanbul ignore next */ []));
+        this.animationTemporarilyDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animationTemporarilyDisabled" }] : /* istanbul ignore next */ []));
+        this.animationEnabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animationEnabled" }] : /* istanbul ignore next */ []));
+        this.blur$ = new Subject();
+        this.checkBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkBy" }] : /* istanbul ignore next */ []));
+        this.checkableOptions = signal({
+            checkChildren: true,
+            checkDisabledChildren: false,
+            checkParents: true,
+            childrenOnly: false,
+            enabled: false,
+            mode: "multiple"
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkableOptions" }] : /* istanbul ignore next */ []));
+        this.checkedKeys$ = toObservable(this.#checkedKeys);
+        this.children = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
+        this.disableBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableBy" }] : /* istanbul ignore next */ []));
+        this.disableOptions = signal({
+            disableChildren: true,
+            enabled: false
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableOptions" }] : /* istanbul ignore next */ []));
+        this.disabledKeys = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledKeys" }] : /* istanbul ignore next */ []));
+        this.draggableOptions = signal({ enabled: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggableOptions" }] : /* istanbul ignore next */ []));
+        this.dragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        this.dragging$ = toObservable(this.dragging);
+        this.dropAllowed = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropAllowed" }] : /* istanbul ignore next */ []));
+        this.dropPositionChange$ = new BehaviorSubject(null);
+        this.dropPositionSignal = toSignal(this.dropPositionChange$, { initialValue: null });
+        this.expandBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandBy" }] : /* istanbul ignore next */ []));
+        this.expandableOptions = signal({ enabled: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandableOptions" }] : /* istanbul ignore next */ []));
+        this.expandedKeys = computed(() => {
+            const filterText = this.filterText();
+            if (filterText) {
+                return this.#filteredExpandedKeys();
+            }
+            return this.#unfilteredExpandedKeys();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+        this.expandedKeys$ = toObservable(this.expandedKeys);
+        this.filterableOptions = signal({
+            enabled: false,
+            debounce: 0,
+            caseSensitive: false,
+            operator: "contains"
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterableOptions" }] : /* istanbul ignore next */ []));
+        this.filter$ = new ReplaySubject(1);
+        this.filterChange$ = new Subject();
+        this.filterPlaceholder = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+        this.filterText = toSignal(toObservable(this.filterableOptions).pipe(switchMap(opts => this.filter$.pipe(debounceTime(opts.debounce), distinctUntilChanged()))), { initialValue: "" });
+        this.focus$ = new Subject();
+        this.navigatedNode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedNode" }] : /* istanbul ignore next */ []));
+        this.nodeCheck$ = new Subject();
+        this.nodeCheckChange$ = new Subject();
+        this.nodeClick$ = new Subject();
+        this.nodeDrag$ = new Subject();
+        this.nodeDragEnd$ = new Subject();
+        this.nodeDragStart$ = new Subject();
+        this.nodeDrop$ = new Subject();
+        this.nodeExpand$ = new Subject();
+        this.nodeSelect$ = new Subject();
+        this.nodeSelectChange$ = new Subject();
+        this.nodeSet = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeSet" }] : /* istanbul ignore next */ []));
+        this.nodeTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+        this.selectBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectBy" }] : /* istanbul ignore next */ []));
+        this.selectableOptions = signal({
+            childrenOnly: false,
+            enabled: false,
+            mode: "single",
+            toggleable: false
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectableOptions" }] : /* istanbul ignore next */ []));
+        this.selectedKeys = signal(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        this.selectedKeys$ = toObservable(this.selectedKeys);
+        this.selectedNodes = computed(() => {
+            const selectedKeys = this.selectedKeys();
+            const nodeDictionary = this.#nodeDictionary();
+            return selectedKeys
+                .select(k => {
+                return nodeDictionary.values().firstOrDefault(n => {
+                    const key = this.getSelectKey(n);
+                    return key === k;
+                });
+            })
+                .where(n => n != null)
+                .cast()
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNodes" }] : /* istanbul ignore next */ []));
+        this.selectionChange$ = new Subject();
+        this.textField = signal("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        this.viewNodeSet = computed(() => {
+            const visibleUids = this.#visibleUids();
+            if (visibleUids === null) {
+                return this.nodeSet();
+            }
+            return this.nodeSet()
+                .where(n => visibleUids.has(n.uid))
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewNodeSet" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const visibleUids = this.#visibleUids();
+            untracked(() => {
+                if (visibleUids === null) {
+                    return;
+                }
+                const expandedKeys = _a.flatten(this.nodeSet())
+                    .where(n => visibleUids.has(n.uid) && !n.children().isEmpty())
+                    .select(n => this.getExpandKey(n))
+                    .toImmutableSet();
+                this.#filteredExpandedKeys.set(expandedKeys);
+            });
+        });
+    }
+    static flatten(nodes) {
+        const flattenedNodes = new List();
+        for (const node of nodes) {
+            flattenedNodes.add(node);
+            if (!node.children().isEmpty()) {
+                flattenedNodes.addAll(_a.flatten(node.children()));
+            }
+        }
+        return flattenedNodes;
+    }
+    clearFilter() {
+        this.filter$.next("");
+    }
+    detachNode(node) {
+        if (node.parent) {
+            node.parent.children.update(list => {
+                const parent = node.parent;
+                return list.clear().addAll(parent.children().where(n => n !== node));
+            });
+            node.parent = null;
+        }
+        else {
+            this.nodeSet.update(nodes => nodes.remove(node));
+        }
+        this.updateNodeIndices();
+    }
+    getNodeByUid(uid) {
+        const nodeDictionary = this.#nodeDictionary();
+        return nodeDictionary.get(uid) ?? null;
+    }
+    getNodeElementId(uid) {
+        return getTreeNodeElementId(uid);
+    }
+    getNodeText(node) {
+        const textField = this.textField();
+        if (!textField) {
+            return String(node.data) || "";
+        }
+        if (typeof textField === "string") {
+            return node.data[textField];
+        }
+        return textField(node.data);
+    }
+    hasChildren(node) {
+        if (node === null) {
+            return false;
+        }
+        const hasChildrenPredicate = this.#hasChildrenPredicate();
+        if (hasChildrenPredicate) {
+            return hasChildrenPredicate(node.data);
+        }
+        return !node.children().isEmpty();
+    }
+    insertNodeAtIndex(node, parentUid, index) {
+        if (parentUid !== null) {
+            const parent = this.getNodeByUid(parentUid);
+            if (!parent || node.isDescendantOf(parent)) {
+                return;
+            }
+            parent.children.update(set => {
+                const tempList = set.toList();
+                tempList.addAt(node, index);
+                return tempList.toImmutableSet();
+            });
+            node.parent = parent;
+        }
+        else {
+            this.nodeSet.update(nodes => {
+                const tempList = nodes.toList();
+                tempList.addAt(node, index);
+                return tempList.toImmutableSet();
+            });
+            node.parent = null;
+        }
+        this.updateNodeIndices();
+    }
+    isCheckable(node) {
+        const checkableOptions = this.checkableOptions();
+        if (!checkableOptions.enabled) {
+            return false;
+        }
+        const hasCheckbox = this.#hasCheckboxPredicate();
+        if (hasCheckbox !== null && !hasCheckbox(node.data, node.uid)) {
+            return false;
+        }
+        return !(checkableOptions.childrenOnly && !node.children().isEmpty());
+    }
+    isChecked(node) {
+        return node.checked();
+    }
+    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);
+        if (!disableOptions.disableChildren) {
+            return disabled;
+        }
+        const anyParentDisabled = this.isAnyParentDisabled(node);
+        return disabled || (disableOptions.disableChildren && anyParentDisabled);
+    }
+    isExpanded(node) {
+        const expandableOptions = this.expandableOptions();
+        const expandedKeys = this.expandedKeys();
+        if (!expandableOptions.enabled) {
+            return true;
+        }
+        if (node.children().isEmpty()) {
+            return false;
+        }
+        const key = this.getExpandKey(node);
+        return expandedKeys.contains(key);
+    }
+    isIndeterminate(node) {
+        const checkableOptions = this.checkableOptions();
+        if (!checkableOptions.enabled || !checkableOptions.checkParents || checkableOptions.mode === "single") {
+            return false;
+        }
+        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();
+        if (childNodes.none()) {
+            return false;
+        }
+        const checkedCount = childNodes.where(n => this.isChecked(n)).count();
+        const indeterminateCount = childNodes.where(n => this.isIndeterminate(n)).count();
+        const childCount = childNodes.count();
+        return (checkedCount > 0 && checkedCount < childCount) || indeterminateCount > 0;
+    }
+    isNavigated(node) {
+        const navigatedNode = this.navigatedNode();
+        return navigatedNode === node;
+    }
+    isSelected(node) {
+        const selectableOptions = this.selectableOptions();
+        const selectedKeys = this.selectedKeys();
+        if (!selectableOptions.enabled) {
+            return false;
+        }
+        const key = this.getSelectKey(node);
+        return selectedKeys.contains(key);
+    }
+    isTreeFiltered() {
+        return this.filterText() !== "";
+    }
+    isVisible(node) {
+        const visibleUids = this.#visibleUids();
+        if (visibleUids === null) {
+            return true;
+        }
+        return visibleUids.has(node.uid);
+    }
+    loadNodeChildren(node) {
+        const childrenSelector = this.children();
+        if (typeof childrenSelector !== "function") {
+            return;
+        }
+        const children = childrenSelector(node.data);
+        if (!(children instanceof Observable)) {
+            return;
+        }
+        node.children.set(ImmutableSet.create());
+        node.loading.set(true);
+        children.pipe(take(1)).subscribe({
+            next: c => {
+                const childNodes = new List();
+                for (const child of c) {
+                    const childNode = new TreeNode(child);
+                    childNode.parent = node;
+                    childNodes.add(childNode);
+                }
+                this.loadCheckedKeysForChildren(node, childNodes);
+                node.children.update(list => list.clear().addAll(childNodes));
+                node.loading.set(false);
+                this.restoreExpandedChildren(childNodes);
+            },
+            error: () => {
+                node.loading.set(false);
+            }
+        });
+    }
+    moveNode(sourceNode, targetNode, position) {
+        const oldParent = sourceNode.parent;
+        switch (position) {
+            case "inside":
+                this.moveNodeInside(sourceNode, targetNode);
+                break;
+            case "before":
+                this.moveNodeBefore(sourceNode, targetNode);
+                break;
+            case "after":
+                this.moveNodeAfter(sourceNode, targetNode);
+                break;
+        }
+        this.updateNodeIndices();
+        this.recalculateCheckedAncestors(oldParent, sourceNode.parent);
+    }
+    navigate(direction) {
+        const navigableNodes = this.#navigableNodes();
+        const navigatedNode = this.navigatedNode();
+        if (navigableNodes.isEmpty()) {
+            return null;
+        }
+        if (direction === "first") {
+            const first = navigableNodes.first();
+            this.navigatedNode.set(first);
+            return first;
+        }
+        if (direction === "last") {
+            const last = navigableNodes.last();
+            this.navigatedNode.set(last);
+            return last;
+        }
+        const firstNode = navigableNodes.first();
+        if (navigatedNode === null) {
+            this.navigatedNode.set(firstNode);
+            return firstNode;
+        }
+        if (direction === "next") {
+            return this.navigateToNextNode();
+        }
+        if (direction === "previous") {
+            return this.navigateToPreviousNode();
+        }
+        return null;
+    }
+    notifySelectionChange(node) {
+        this.selectionChange$.next(node.nodeItem);
+    }
+    setAnimationEnabled(enabled) {
+        this.animationEnabled.set(enabled);
+    }
+    setChildrenSelector(selector) {
+        if (this.children() === selector) {
+            return;
+        }
+        this.children.set(selector);
+        this.nodeSet.set(this.createNodes(this.#data()));
+        this.updateNodeIndices();
+    }
+    setCheckBy(selector) {
+        this.checkBy.set(selector);
+    }
+    setCheckableOptions(options) {
+        this.checkableOptions.update(o => ({ ...o, ...options }));
+    }
+    setCheckedKeys(keys) {
+        const checkedKeys = this.#checkedKeys().orderBy(k => k);
+        const orderedKeys = from(keys).orderBy(k => k);
+        if (sequenceEqual(checkedKeys, orderedKeys)) {
+            return;
+        }
+        const checkedKeysSet = this.#nodeDictionary()
+            .values()
+            .where(n => contains(keys, this.getCheckKey(n)))
+            .toEnumerableSet();
+        this.#nodeDictionary().forEach(n => {
+            n.value.checked.set(checkedKeysSet.contains(n.value));
+        });
+        this.#checkedKeys.set(ImmutableSet.create(keys));
+    }
+    setData(data) {
+        this.#data.set(ImmutableSet.create(data));
+        this.nodeSet.set(this.createNodes(data));
+        this.updateNodeIndices();
+        this.applyCheckedKeysToNodes();
+    }
+    setDataStructure(structure) {
+        this.#structure.set(structure);
+    }
+    setDisableBy(selector) {
+        this.disableBy.set(selector);
+    }
+    setDisableOptions(options) {
+        this.disableOptions.update(o => ({ ...o, ...options }));
+    }
+    setDisabledKeys(keys) {
+        const disabledKeys = this.disabledKeys().orderBy(k => k);
+        const orderedKeys = from(keys).orderBy(k => k);
+        if (sequenceEqual(disabledKeys, orderedKeys)) {
+            return;
+        }
+        this.disabledKeys.set(ImmutableSet.create(keys));
+    }
+    setDraggableOptions(options) {
+        this.draggableOptions.update(o => ({ ...o, ...options }));
+    }
+    setExpandBy(selector) {
+        this.expandBy.set(selector);
+    }
+    setExpandableOptions(options) {
+        this.expandableOptions.update(o => ({ ...o, ...options }));
+    }
+    setExpandedKeys(keys) {
+        const unfilteredKeys = this.#unfilteredExpandedKeys().orderBy(k => k);
+        const orderedKeys = from(keys).orderBy(k => k);
+        if (sequenceEqual(unfilteredKeys, orderedKeys)) {
+            return;
+        }
+        this.#unfilteredExpandedKeys.set(ImmutableSet.create(keys));
+    }
+    setFilterableOptions(options) {
+        this.filterableOptions.update(o => ({ ...o, ...options }));
+    }
+    setFlatIdField(field) {
+        this.#flatIdField.set(field);
+    }
+    setFlatParentIdField(field) {
+        this.#flatParentIdField.set(field);
+    }
+    setHasCheckboxPredicate(fn) {
+        this.#hasCheckboxPredicate.set(fn);
+    }
+    setHasChildrenPredicate(predicate) {
+        this.#hasChildrenPredicate.set(predicate);
+    }
+    setNodeCheck(node, checked) {
+        const checkableOptions = this.checkableOptions();
+        if (!checkableOptions.enabled) {
+            return;
+        }
+        const checkParents = checkableOptions.checkParents;
+        const checkChildren = checkableOptions.checkChildren;
+        const childrenOnly = checkableOptions.childrenOnly;
+        const checkDisabledChildren = checkableOptions.checkDisabledChildren;
+        const mode = checkableOptions.mode;
+        const key = this.getCheckKey(node);
+        const checkedKeys = this.#checkedKeys().toEnumerableSet();
+        const nodeDictionary = this.#nodeDictionary();
+        if (mode === "single") {
+            nodeDictionary
+                .values()
+                .where(n => n !== node)
+                .forEach(n => n.checked.set(false));
+            checkedKeys.clear();
+            if (checked) {
+                checkedKeys.add(key);
+            }
+        }
+        else if (checked) {
+            checkedKeys.add(key);
+        }
+        else {
+            checkedKeys.remove(key);
+        }
+        node.checked.set(checked);
+        if (mode !== "single" && checkChildren) {
+            const hasCheckbox = this.#hasCheckboxPredicate();
+            const childNodes = this.getChildNodes(node);
+            childNodes.forEach(n => {
+                if (hasCheckbox !== null && !hasCheckbox(n.data, n.uid)) {
+                    return;
+                }
+                if (checkDisabledChildren || !this.isDisabled(n)) {
+                    const childKey = this.getCheckKey(n);
+                    if (checked) {
+                        checkedKeys.add(childKey);
+                    }
+                    else {
+                        checkedKeys.remove(childKey);
+                    }
+                    n.checked.set(checked);
+                }
+            });
+        }
+        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 parentKey = this.getCheckKey(n);
+                if (allChecked) {
+                    checkedKeys.add(parentKey);
+                }
+                else {
+                    checkedKeys.remove(parentKey);
+                }
+                n.checked.set(allChecked);
+            });
+        }
+        this.#checkedKeys.set(checkedKeys.toImmutableSet());
+    }
+    setNodeExpand(node, expanded) {
+        const key = this.getExpandKey(node);
+        const expandedKeysSignal = this.isTreeFiltered() ? this.#filteredExpandedKeys : this.#unfilteredExpandedKeys;
+        expandedKeysSignal.update(keys => {
+            if (expanded) {
+                return keys.add(key);
+            }
+            return keys.remove(key);
+        });
+        this.navigatedNode.set(node);
+    }
+    setNodeSelect(node, selected) {
+        const selectableOptions = this.selectableOptions();
+        if (!selectableOptions.enabled) {
+            return;
+        }
+        const childrenOnly = selectableOptions.childrenOnly;
+        if (childrenOnly && this.hasChildren(node)) {
+            return;
+        }
+        const key = this.getSelectKey(node);
+        const mode = selectableOptions.mode;
+        this.selectedKeys.update(keys => {
+            if (mode === "single") {
+                const toggleable = selectableOptions.toggleable;
+                if (toggleable && keys.contains(key)) {
+                    return keys.remove(key);
+                }
+                else {
+                    return keys.clear().add(key);
+                }
+            }
+            if (selected) {
+                return keys.add(key);
+            }
+            return keys.remove(key);
+        });
+        this.navigatedNode.set(node);
+    }
+    setSelectBy(selector) {
+        this.selectBy.set(selector);
+    }
+    setSelectableOptions(options) {
+        this.selectableOptions.update(o => ({ ...o, ...options }));
+    }
+    setSelectedDataItems(dataItems) {
+        const selectBy = this.selectBy();
+        if (!selectBy) {
+            this.selectedKeys.update(set => set.clear().addAll(dataItems));
+        }
+        else {
+            const selectedKeys = from(dataItems).select(d => this.getDataItemSelectKey(d));
+            this.selectedKeys.update(set => set.clear().addAll(selectedKeys));
+        }
+    }
+    setSelectedKeys(keys) {
+        const selectedKeys = this.selectedKeys().orderBy(k => k);
+        const orderedKeys = from(keys).orderBy(k => k);
+        if (sequenceEqual(selectedKeys, orderedKeys)) {
+            return;
+        }
+        this.selectedKeys.set(ImmutableSet.create(keys));
+    }
+    setTextField(selector) {
+        this.textField.set(selector);
+    }
+    getCheckKey(node) {
+        const checkBy = this.checkBy();
+        if (!checkBy) {
+            return node.data;
+        }
+        if (typeof checkBy === "string") {
+            return node.data[checkBy];
+        }
+        return checkBy(node.data);
+    }
+    getDisableKey(node) {
+        const disableBy = this.disableBy();
+        if (!disableBy) {
+            return node.data;
+        }
+        if (typeof disableBy === "string") {
+            return node.data[disableBy];
+        }
+        return disableBy(node.data);
+    }
+    applyCheckedKeysToNodes() {
+        const checkableOptions = this.checkableOptions();
+        const checkedKeys = this.#checkedKeys();
+        if (checkedKeys.isEmpty()) {
+            return;
+        }
+        this.#nodeDictionary().forEach(entry => {
+            const node = entry.value;
+            const key = this.getCheckKey(node);
+            node.checked.set(checkedKeys.contains(key));
+        });
+        if (checkableOptions.enabled && checkableOptions.checkParents && checkableOptions.mode !== "single") {
+            const allNodes = _a.flatten(this.nodeSet());
+            const updatedCheckedKeys = this.#checkedKeys().toEnumerableSet();
+            let changed = false;
+            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 (changed) {
+                this.#checkedKeys.set(updatedCheckedKeys.toImmutableSet());
+            }
+        }
+    }
+    computeVisibleUids(nodes, filterText) {
+        const visible = new Set();
+        for (const node of nodes) {
+            const childVisible = this.computeVisibleUids(node.children(), filterText);
+            for (const uid of childVisible) {
+                visible.add(uid);
+            }
+            if (childVisible.size > 0 || this.isFiltered(this.getNodeText(node), filterText)) {
+                visible.add(node.uid);
+            }
+        }
+        return visible;
+    }
+    createFlatNodes(data, parentId) {
+        const flatIdField = this.#flatIdField();
+        const flatParentIdField = this.#flatParentIdField();
+        const childrenByParentId = new Map();
+        for (const item of data) {
+            const dataItem = item;
+            const pid = dataItem[flatParentIdField] ?? null;
+            if (!childrenByParentId.has(pid)) {
+                childrenByParentId.set(pid, []);
+            }
+            childrenByParentId.get(pid).push(item);
+        }
+        const buildNodes = (pid, parent) => {
+            const items = childrenByParentId.get(pid) ?? [];
+            const nodes = new List();
+            for (const item of items) {
+                const dataItem = item;
+                const node = new TreeNode(item);
+                node.parent = parent;
+                node.children.set(buildNodes(dataItem[flatIdField], node));
+                nodes.add(node);
+            }
+            return nodes.toImmutableSet();
+        };
+        return buildNodes(parentId, null);
+    }
+    createHierarchicalNodes(root, parent, nodeDict) {
+        const rootList = new List(root);
+        const children = this.children();
+        if (rootList.isEmpty() || !children) {
+            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;
+            }
+            if (typeof children === "string") {
+                const subNodes = dataItem[children];
+                if (subNodes) {
+                    const childNodes = this.createHierarchicalNodes(subNodes, node, nodeDict);
+                    node.children.update(list => list.clear().addAll(childNodes ?? []));
+                }
+            }
+            else {
+                const result = children(dataItem);
+                if (!(result instanceof Observable)) {
+                    const childNodes = this.createHierarchicalNodes(result, node, nodeDict);
+                    node.children.update(list => list.clear().addAll(childNodes ?? []));
+                }
+            }
+            nodes.add(node);
+        }
+        return nodes.toImmutableSet();
+    }
+    createNodeDictionary(nodes) {
+        const flattenedNodes = _a.flatten(nodes);
+        return flattenedNodes.toImmutableDictionary(n => n.uid, n => n);
+    }
+    createNodes(data) {
+        const structure = this.#structure();
+        if (structure === "flat") {
+            return this.createFlatNodes(data, null).toImmutableSet();
+        }
+        const nodeDictionary = this.#nodeDictionary();
+        return this.createHierarchicalNodes(data, null, nodeDictionary) ?? ImmutableSet.create();
+    }
+    getExpandKey(node) {
+        const expandBy = this.expandBy();
+        if (!expandBy) {
+            return node.data;
+        }
+        if (typeof expandBy === "string") {
+            return node.data[expandBy];
+        }
+        return expandBy(node.data);
+    }
+    getChildNodes(node) {
+        const nodes = _a.flatten([node]);
+        return nodes.where(n => n !== node).toImmutableSet();
+    }
+    getDataItemSelectKey(dataItem) {
+        const selectBy = this.selectBy();
+        if (!selectBy) {
+            return dataItem;
+        }
+        if (typeof selectBy === "string") {
+            return dataItem[selectBy] ?? dataItem;
+        }
+        return selectBy(dataItem);
+    }
+    getParentNodes(node) {
+        const nodes = new List();
+        let current = node.parent;
+        while (current !== null) {
+            nodes.add(current);
+            current = current.parent;
+        }
+        return nodes.toImmutableSet();
+    }
+    getSelectKey(node) {
+        const selectBy = this.selectBy();
+        if (!selectBy) {
+            return node.data;
+        }
+        if (typeof selectBy === "string") {
+            return node.data[selectBy];
+        }
+        return selectBy(node.data);
+    }
+    isAnyParentCollapsed(node) {
+        if (node.parent) {
+            return !this.isExpanded(node.parent) || this.isAnyParentCollapsed(node.parent);
+        }
+        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();
+        const operator = this.filterableOptions().operator;
+        if (typeof operator === "function") {
+            return operator(text, filter);
+        }
+        if (operator === "contains") {
+            return text.indexOf(filter) >= 0;
+        }
+        if (operator === "endsWith") {
+            return text.endsWith(filter);
+        }
+        if (operator === "startsWith") {
+            return text.startsWith(filter);
+        }
+        return text.indexOf(filter) >= 0;
+    }
+    loadCheckedKeysForChildren(node, childNodes) {
+        const checkedKeys = this.#checkedKeys();
+        if (node.checked() && this.checkableOptions().checkChildren) {
+            const checkDisabledChildren = this.checkableOptions().checkDisabledChildren;
+            const childKeys = new EnumerableSet();
+            forEach(childNodes, n => {
+                if (checkDisabledChildren || !this.isDisabled(n)) {
+                    const childKey = this.getCheckKey(n);
+                    childKeys.add(childKey);
+                    n.checked.set(true);
+                }
+            });
+            this.#checkedKeys.set(checkedKeys.addAll(childKeys));
+        }
+        else {
+            forEach(childNodes, n => {
+                const childKey = this.getCheckKey(n);
+                if (checkedKeys.contains(childKey)) {
+                    n.checked.set(true);
+                }
+            });
+        }
+    }
+    moveNodeAfter(sourceNode, targetNode) {
+        if (sourceNode.parent) {
+            sourceNode.parent.children.update(list => {
+                const sourceNodeParent = sourceNode.parent;
+                return list.clear().addAll(sourceNodeParent.children().where(n => n !== sourceNode));
+            });
+        }
+        if (targetNode.parent) {
+            const index = targetNode.parent.children().toImmutableList().indexOf(targetNode);
+            if (index === -1) {
+                return;
+            }
+            targetNode.parent.children.update(set => {
+                const tempList = set.toList();
+                tempList.addAt(sourceNode, index + 1);
+                return tempList.toImmutableSet();
+            });
+            if (!sourceNode.parent) {
+                this.nodeSet.update(nodes => nodes.remove(sourceNode));
+            }
+            sourceNode.parent = targetNode.parent;
+        }
+        else {
+            const index = this.nodeSet()
+                .where(n => n !== sourceNode)
+                .toList()
+                .indexOf(targetNode);
+            if (index === -1) {
+                return;
+            }
+            this.nodeSet.update(nodes => {
+                const newNodes = nodes.where(n => n !== sourceNode).toList();
+                newNodes.addAt(sourceNode, index + 1);
+                return newNodes.toImmutableSet();
+            });
+            sourceNode.parent = null;
+        }
+    }
+    moveNodeBefore(sourceNode, targetNode) {
+        if (sourceNode.parent) {
+            sourceNode.parent.children.update(list => {
+                const sourceNodeParent = sourceNode.parent;
+                return list.clear().addAll(sourceNodeParent.children().where(n => n !== sourceNode));
+            });
+        }
+        if (targetNode.parent) {
+            const index = targetNode.parent.children().toImmutableList().indexOf(targetNode);
+            if (index === -1) {
+                return;
+            }
+            targetNode.parent.children.update(set => {
+                const tempList = set.toList();
+                tempList.addAt(sourceNode, index);
+                return tempList.toImmutableSet();
+            });
+            if (!sourceNode.parent) {
+                this.nodeSet.update(nodes => nodes.remove(sourceNode));
+            }
+            sourceNode.parent = targetNode.parent;
+        }
+        else {
+            const index = this.nodeSet()
+                .where(n => n !== sourceNode)
+                .toList()
+                .indexOf(targetNode);
+            if (index === -1) {
+                return;
+            }
+            this.nodeSet.update(nodes => {
+                const newNodes = nodes.where(n => n !== sourceNode).toList();
+                newNodes.addAt(sourceNode, index);
+                return newNodes.toImmutableSet();
+            });
+            sourceNode.parent = null;
+        }
+    }
+    moveNodeInside(sourceNode, targetNode) {
+        if (sourceNode.parent === targetNode || this.isDisabled(targetNode)) {
+            return;
+        }
+        if (sourceNode.parent) {
+            sourceNode.parent.children.update(list => {
+                const sourceNodeParent = sourceNode.parent;
+                return list.clear().addAll(sourceNodeParent.children().where(n => n !== sourceNode));
+            });
+        }
+        else {
+            this.nodeSet.update(nodes => nodes.remove(sourceNode));
+        }
+        targetNode.children.update(list => list.add(sourceNode));
+        sourceNode.parent = targetNode;
+        this.nodeSet.update(n => n.toImmutableSet());
+    }
+    navigateToNextNode() {
+        const navigableNodes = this.#navigableNodes();
+        const navigatedNode = this.navigatedNode();
+        const firstNode = navigableNodes.first();
+        let nextNode = navigableNodes
+            .skipWhile(n => n !== navigatedNode)
+            .skip(1)
+            .firstOrDefault();
+        if (nextNode === null) {
+            this.navigatedNode.set(firstNode);
+            return firstNode;
+        }
+        else {
+            this.navigatedNode.set(nextNode);
+            return nextNode;
+        }
+    }
+    navigateToPreviousNode() {
+        const navigableNodes = this.#navigableNodes();
+        const navigatedNode = this.navigatedNode();
+        let previousNode = navigableNodes.takeWhile(n => n !== navigatedNode).lastOrDefault();
+        if (previousNode === null) {
+            this.navigatedNode.set(navigableNodes.last());
+            return navigableNodes.last();
+        }
+        else {
+            this.navigatedNode.set(previousNode);
+            return previousNode;
+        }
+    }
+    recalculateCheckedAncestors(oldParent, newParent) {
+        const checkableOptions = this.checkableOptions();
+        if (!checkableOptions.enabled || !checkableOptions.checkParents || checkableOptions.mode === "single") {
+            return;
+        }
+        const checkedKeys = this.#checkedKeys().toEnumerableSet();
+        let changed = false;
+        const recalculateNodeChain = (start) => {
+            let current = start;
+            while (current !== null) {
+                const childNodes = current.children();
+                if (childNodes.isEmpty()) {
+                    current = current.parent;
+                    continue;
+                }
+                const allChecked = childNodes.all(c => c.checked());
+                const key = this.getCheckKey(current);
+                if (allChecked !== current.checked()) {
+                    current.checked.set(allChecked);
+                    changed = true;
+                }
+                if (allChecked && !checkedKeys.contains(key)) {
+                    checkedKeys.add(key);
+                    changed = true;
+                }
+                else if (!allChecked && checkedKeys.contains(key)) {
+                    checkedKeys.remove(key);
+                    changed = true;
+                }
+                current = current.parent;
+            }
+        };
+        recalculateNodeChain(oldParent);
+        if (newParent !== oldParent) {
+            recalculateNodeChain(newParent);
+        }
+        if (changed) {
+            this.#checkedKeys.set(checkedKeys.toImmutableSet());
+        }
+    }
+    restoreExpandedChildren(childNodes) {
+        const expandedKeys = this.expandedKeys();
+        for (const childNode of childNodes) {
+            const key = this.getExpandKey(childNode);
+            if (expandedKeys.contains(key)) {
+                this.loadNodeChildren(childNode);
+            }
+        }
+    }
+    updateNodeIndices() {
+        const updateRecursively = (nodes, parent) => {
+            let index = 0;
+            for (const node of nodes) {
+                node.index = parent == null ? String(index++) : `${parent.index}.${index++}`;
+                updateRecursively(node.children(), node);
+            }
+        };
+        updateRecursively(this.nodeSet(), null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeService }); }
+}
+_a = TreeService;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const subTreeListVariants = cva(`
+        list-none flex flex-col
+    `);
+const subTreeListItemVariants = cva(`
+        relative overflow-hidden outline-none
+        ps-6
+    `);
+const treeBaseVariants = cva(`
+        relative outline-none select-none
+        text-md
+    `);
+const treeDropHintBaseVariants = cva(`
+        fixed z-1 w-10 h-0.5
+        bg-primary opacity-80
+        pointer-events-none
+    `);
+const treeDropHintIconVariants = cva(`
+        absolute flex items-center justify-center
+        -top-3.25 -left-3.5 text-xl
+    `);
+const treeNodeBaseVariants = cva(`
+        px-2 py-1 cursor-default
+    `, {
+    variants: {
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-default",
+            false: ""
+        },
+        highlighted: {
+            true: "inset-ring-1 inset-ring-gray-400/70",
+            false: ""
+        },
+        selected: {
+            true: "bg-primary text-primary-foreground",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            selected: false,
+            class: "hover:bg-hover active:bg-active"
+        },
+        {
+            disabled: false,
+            selected: true,
+            class: "hover:bg-primary-hover"
+        }
+    ]
+});
+const treeNodeContainerVariants = cva(`
+        flex items-center
+    `);
+const treeNodeDraggingVariants = cva(`
+        flex items-center justify-center
+        px-2! py-1! top-3!
+        bg-background! text-foreground!
+        border! border-border!
+        shadow-md
+    `);
+const treeNodeExpanderVariants = cva(`
+        min-w-6 h-full -ms-6
+        flex items-center justify-center
+        cursor-pointer text-sm text-foreground
+    `);
+
+const subTreeListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return subTreeListVariants;
+        default:
+            return subTreeListVariants;
+    }
+};
+const subTreeListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return subTreeListItemVariants;
+        default:
+            return subTreeListItemVariants;
+    }
+};
+const treeBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeBaseVariants;
+        default:
+            return treeBaseVariants;
+    }
+};
+const treeDropHintBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeDropHintBaseVariants;
+        default:
+            return treeDropHintBaseVariants;
+    }
+};
+const treeDropHintIconThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeDropHintIconVariants;
+        default:
+            return treeDropHintIconVariants;
+    }
+};
+const treeNodeBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeNodeBaseVariants;
+        default:
+            return treeNodeBaseVariants;
+    }
+};
+const treeNodeContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeNodeContainerVariants;
+        default:
+            return treeNodeContainerVariants;
+    }
+};
+const treeNodeDraggingThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeNodeDraggingVariants;
+        default:
+            return treeNodeDraggingVariants;
+    }
+};
+const treeNodeExpanderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return treeNodeExpanderVariants;
+        default:
+            return treeNodeExpanderVariants;
+    }
+};
+
+class NodeEvent extends PreventableEvent {
+    #node;
+    constructor(type, node, event) {
+        super(type, event);
+        this.#node = node;
+    }
+    get nodeItem() {
+        return {
+            data: this.#node.data,
+            hasChildren: this.#node.children().length > 0,
+            uid: this.#node.uid
+        };
+    }
+}
+
+class NodeDragEndEvent extends NodeEvent {
+    constructor(node, event) {
+        super("nodeDragEnd", node, event);
+    }
+}
+
+class NodeDragEvent {
+    #event;
+    #node;
+    #targetNode;
+    #type = "nodeDrag";
+    constructor(node, targetNode, event) {
+        this.#node = node;
+        this.#event = event;
+        this.#targetNode = targetNode;
+    }
+    get nodeItem() {
+        return this.#node.nodeItem;
+    }
+    get originalEvent() {
+        return this.#event;
+    }
+    get targetNodeItem() {
+        return this.#targetNode?.nodeItem ?? null;
+    }
+    get type() {
+        return this.#type;
+    }
+}
+class InternalNodeDragEvent {
+    #dragEvent;
+    #dropAllowed;
+    constructor(dragEvent, dropAllowed) {
+        this.#dragEvent = dragEvent;
+        this.#dropAllowed = dropAllowed;
+    }
+    get dragEvent() {
+        return this.#dragEvent;
+    }
+    get dropAllowed() {
+        return this.#dropAllowed;
+    }
+}
+
+class NodeDragStartEvent extends NodeEvent {
+    constructor(node, event) {
+        super("nodeDragStart", node, event);
+    }
+}
+
+class NodeDropEvent extends NodeEvent {
+    #params;
+    constructor(params) {
+        super("nodeDrop", params.sourceNode, params.event);
+        this.#params = params;
+    }
+    get position() {
+        return this.#params.position;
+    }
+    get sourceNode() {
+        return this.#params.sourceNode.nodeItem;
+    }
+    get targetNode() {
+        return this.#params.targetNode.nodeItem;
+    }
+    get treeView() {
+        return this.#params.treeView;
+    }
+}
+class NodeDropEventSansTree extends NodeEvent {
+    #params;
+    constructor(params) {
+        super("nodeDropSansTree", params.sourceNode, params.event);
+        this.#params = params;
+    }
+    get event() {
+        return this.#params.event;
+    }
+    get position() {
+        return this.#params.position;
+    }
+    get sourceNode() {
+        return this.#params.sourceNode;
+    }
+    get targetNode() {
+        return this.#params.targetNode;
+    }
+}
+
+class TreeNodeElementIdPipe {
+    transform(uid) {
+        return getTreeNodeElementId(uid);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeElementIdPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeElementIdPipe, isStandalone: true, name: "treeNodeElementId" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeElementIdPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "treeNodeElementId"
+                }]
+        }] });
+
+class NodeClickEvent extends PreventableEvent {
+    #node;
+    constructor(node, event) {
+        super("nodeClick", event);
+        this.#node = node;
+    }
+    get nodeItem() {
+        return {
+            data: this.#node.data,
+            hasChildren: this.#node.children().length > 0,
+            uid: this.#node.uid
+        };
+    }
+}
+
+class TreeNodeComponent {
+    #destroyRef;
+    #themeService;
+    #dragging;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#themeService = inject(ThemeService);
+        this.treeService = inject((TreeService));
+        this.#dragging = toSignal(this.treeService.dragging$, {
+            initialValue: false
+        });
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const highlighted = this.navigated();
+            const selected = this.selected();
+            return treeNodeBaseThemeVariants(theme)({ disabled, highlighted, selected });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.checkable = computed(() => {
+            const node = this.node();
+            if (node === null) {
+                return false;
+            }
+            return this.treeService.isCheckable(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkable" }] : /* istanbul ignore next */ []));
+        this.checkboxCheck$ = new Subject();
+        this.checkboxClick$ = new Subject();
+        this.checked = computed(() => {
+            const node = this.node();
+            this.#dragging();
+            if (node === null) {
+                return false;
+            }
+            return this.treeService.isChecked(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => {
+            const node = this.node();
+            if (node === null) {
+                return false;
+            }
+            return this.treeService.isDisabled(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.expandable = computed(() => {
+            const node = this.node();
+            const expandableOptions = this.treeService.expandableOptions();
+            const childrenSelector = this.treeService.children();
+            const children = node?.children() ?? [];
+            if (node === null) {
+                return false;
+            }
+            if (!expandableOptions.enabled) {
+                return false;
+            }
+            if (typeof childrenSelector === "function") {
+                return this.treeService.hasChildren(node);
+            }
+            return children.length > 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => {
+            const node = this.node();
+            if (node === null) {
+                return true;
+            }
+            return this.treeService.isExpanded(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.indeterminate = computed(() => {
+            const node = this.node();
+            this.#dragging();
+            if (node === null) {
+                return false;
+            }
+            return this.treeService.isIndeterminate(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        this.navigated = computed(() => {
+            const node = this.node();
+            if (node === null) {
+                return false;
+            }
+            return this.treeService.isNavigated(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigated" }] : /* istanbul ignore next */ []));
+        this.nodeText = computed(() => {
+            const node = this.node();
+            if (node === null) {
+                return "";
+            }
+            return this.treeService.getNodeText(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeText" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => {
+            const node = this.node();
+            if (node === null) {
+                return false;
+            }
+            return this.treeService.isSelected(node);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.depth = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+        this.node = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        this.setCheckboxClickSubscription();
+    }
+    onNodeClick(event) {
+        const node = this.node();
+        if (node === null) {
+            return;
+        }
+        if (this.treeService.isDisabled(node)) {
+            return;
+        }
+        if (event.type === "contextmenu") {
+            event.preventDefault();
+            return;
+        }
+        const nodeClickEvent = this.notifyNodeClick(event);
+        if (nodeClickEvent.isDefaultPrevented()) {
+            return;
+        }
+        this.treeService.navigatedNode.set(node);
+        const selectableOptions = this.treeService.selectableOptions();
+        if (!selectableOptions.enabled) {
+            return;
+        }
+        if (selectableOptions.childrenOnly && this.treeService.hasChildren(node)) {
+            return;
+        }
+        const nodeSelectEvent = new NodeSelectEvent(node, event);
+        this.treeService.nodeSelect$.next(nodeSelectEvent);
+        if (nodeSelectEvent.isDefaultPrevented()) {
+            return;
+        }
+        const newSelected = !this.selected();
+        this.treeService.setNodeSelect(node, newSelected);
+        this.treeService.nodeSelectChange$.next({ node, selected: newSelected });
+        this.treeService.notifySelectionChange(node);
+    }
+    onNodeContextMenu(event) {
+        const node = this.node();
+        if (node === null) {
+            return;
+        }
+        if (this.treeService.isDisabled(node)) {
+            return;
+        }
+        this.treeService.navigatedNode.set(node);
+    }
+    notifyNodeClick(event) {
+        const node = this.node();
+        const nodeClickEvent = new NodeClickEvent(node, event);
+        this.treeService.nodeClick$.next(nodeClickEvent);
+        return nodeClickEvent;
+    }
+    setCheckboxClickSubscription() {
+        this.checkboxClick$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => this.checkable() && !this.disabled()), tap(e => {
+            e.preventDefault();
+            e.stopPropagation();
+        }), map(event => {
+            const node = this.node();
+            const nodeCheckEvent = new NodeCheckEvent(node, event);
+            this.treeService.nodeCheck$.next(nodeCheckEvent);
+            return nodeCheckEvent;
+        }))
+            .subscribe(event => {
+            const node = this.node();
+            if (event.isDefaultPrevented()) {
+                event.originalEvent?.preventDefault();
+                return;
+            }
+            const checked = this.treeService.isChecked(node);
+            this.treeService.setNodeCheck(node, !checked);
+            this.treeService.nodeCheckChange$.next({ node, checked: !checked });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeNodeComponent, isStandalone: true, selector: "mona-tree-node", inputs: { depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\r\n    @if (treeService.nodeTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\r\n            [ngTemplateOutletContext]=\"{\r\n                $implicit: node()?.data,\r\n                element: element.parentElement\r\n            }\"></ng-container>\r\n    } @else {\r\n        <span class=\"truncate\">{{ nodeText() }}</span>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tree-node", changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<div [class]=\"baseClass()\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeContextMenu($event)\" #element>\r\n    @if (treeService.nodeTemplate()) {\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"treeService.nodeTemplate()\"\r\n            [ngTemplateOutletContext]=\"{\r\n                $implicit: node()?.data,\r\n                element: element.parentElement\r\n            }\"></ng-container>\r\n    } @else {\r\n        <span class=\"truncate\">{{ nodeText() }}</span>\r\n    }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }] } });
+
+class SubTreeComponent {
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#themeService = inject(ThemeService);
+        this.#zone = inject(NgZone);
+        this.listClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return subTreeListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.listItemClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return subTreeListItemThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        this.nodeContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return treeNodeContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeContainerClass" }] : /* istanbul ignore next */ []));
+        this.nodeDraggingClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return treeNodeDraggingThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeDraggingClass" }] : /* istanbul ignore next */ []));
+        this.nodeExpandEnterClass = computed(() => this.nodeAnimationDisabled() ? "" : "mona-tree-node-expand-enter", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeExpandEnterClass" }] : /* istanbul ignore next */ []));
+        this.nodeExpandLeaveClass = computed(() => this.nodeAnimationDisabled() ? "" : "mona-tree-node-expand-leave", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeExpandLeaveClass" }] : /* istanbul ignore next */ []));
+        this.nodeExpanderClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return treeNodeExpanderThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeExpanderClass" }] : /* istanbul ignore next */ []));
+        this.treeService = inject(TreeService);
+        this.visibleNodes = computed(() => {
+            return this.nodes()
+                .where(n => this.treeService.isVisible(n))
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
+        this.depth = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+        this.nodes = input.required({ ...(ngDevMode ? { debugName: "nodes" } : /* istanbul ignore next */ {}), transform: value => ImmutableSet.create(value) });
+        this.parent = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    }
+    #document;
+    #themeService;
+    #zone;
+    nodeAnimationDisabled() {
+        return (!this.treeService.animationEnabled() ||
+            this.treeService.animationTemporarilyDisabled() ||
+            this.treeService.filterText().length !== 0);
+    }
+    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 });
+    }
+    onNodeDragEnd(event) {
+        const nodeDragEndEvent = new NodeDragEndEvent(event.source.data, event.event);
+        this.treeService.nodeDragEnd$.next(nodeDragEndEvent);
+        if (nodeDragEndEvent.isDefaultPrevented()) {
+            return;
+        }
+        this.treeService.dropAllowed.set(false);
+        this.treeService.dragging.set(false);
+    }
+    onNodeDragMove(event, node) {
+        this.treeService.dropPositionChange$.pipe(take(1)).subscribe(e => {
+            if (e == null) {
+                return;
+            }
+            const nodeDragEvent = new NodeDragEvent(node, e.targetNode, event.event);
+            const dropAllowed = e.position !== "outside" &&
+                e.targetNode != null &&
+                e.targetNode !== node &&
+                !e.targetNode.isDescendantOf(node);
+            const internalNodeDragEvent = new InternalNodeDragEvent(nodeDragEvent, dropAllowed);
+            this.treeService.dropAllowed.set(dropAllowed);
+            this.treeService.nodeDrag$.next(internalNodeDragEvent);
+        });
+    }
+    onNodeDragStart(event) {
+        const node = event.source.data;
+        if (this.treeService.isDisabled(node)) {
+            event.event.stopPropagation();
+            return;
+        }
+        const nodeDragStartEvent = new NodeDragStartEvent(node, event.event);
+        this.treeService.nodeDragStart$.next(nodeDragStartEvent);
+        if (nodeDragStartEvent.isDefaultPrevented()) {
+            return;
+        }
+        this.treeService.dragging.set(true);
+    }
+    onNodeDrop(event) {
+        this.treeService.dropPositionChange$.pipe(take(1)).subscribe(e => {
+            if (e == null) {
+                return;
+            }
+            const sourceNode = event.item.data;
+            const targetNode = e.targetNode;
+            if (targetNode === null ||
+                sourceNode === targetNode ||
+                targetNode.isDescendantOf(sourceNode) ||
+                e.position === "outside") {
+                return;
+            }
+            this.treeService.animationTemporarilyDisabled.set(true);
+            const nodeDropEvent = new NodeDropEventSansTree({
+                event: event.event,
+                sourceNode,
+                targetNode,
+                position: e.position
+            });
+            this.treeService.nodeDrop$.next(nodeDropEvent);
+            if (nodeDropEvent.isDefaultPrevented()) {
+                this.treeService.animationTemporarilyDisabled.set(false);
+                return;
+            }
+            this.treeService.dropPositionChange$.next(null);
+            this.focusNode(sourceNode);
+            this.#zone.runOutsideAngular(() => asapScheduler.schedule(() => this.treeService.animationTemporarilyDisabled.set(false)));
+        });
+    }
+    focusNode(node) {
+        this.treeService.navigatedNode.set(node);
+        const element = this.#document
+            .querySelector(`li[data-uid="${node.uid}"]`)
+            ?.closest(".mona-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\r\n    [class]=\"listClass()\"\r\n    [attr.role]=\"parent() ? 'group' : null\"\r\n    cdkDropList\r\n    [cdkDropListSortingDisabled]=\"true\"\r\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\r\n    @for (node of visibleNodes(); track node.uid) {\r\n        <li\r\n            [attr.id]=\"node.uid | treeNodeElementId\"\r\n            [attr.data-uid]=\"node.uid\"\r\n            [class]=\"listItemClass()\"\r\n            [tabindex]=\"-1\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"depth() + 1\"\r\n            [attr.aria-setsize]=\"visibleNodes().length\"\r\n            [attr.aria-posinset]=\"$index + 1\"\r\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\r\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\r\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\r\n            [attr.aria-checked]=\"\r\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\r\n            \"\r\n            (focus)=\"treeService.navigatedNode.set(node)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"node\"\r\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\r\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\r\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\r\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\r\n            <div [class]=\"nodeContainerClass()\">\r\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        tabindex=\"-1\"\r\n                        [class]=\"nodeExpanderClass()\"\r\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\r\n                        [attr.aria-label]=\"\r\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\r\n                        \"\r\n                        (click)=\"onExpandStateChange(node)\">\r\n                        @if (node.loading()) {\r\n                            <i class=\"ri-loader-2-line\"></i>\r\n                        } @else if (nodeComponent.expanded()) {\r\n                            <i class=\"ri-arrow-down-s-fill\"></i>\r\n                        } @else {\r\n                            <i class=\"ri-arrow-right-s-fill\"></i>\r\n                        }\r\n                    </button>\r\n                }\r\n                @if (nodeComponent.checkable()) {\r\n                    <mona-check-box\r\n                        aria-hidden=\"true\"\r\n                        [tabIndex]=\"-1\"\r\n                        [disabled]=\"nodeComponent.disabled()\"\r\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\r\n                        [ngModel]=\"nodeComponent.checked()\"\r\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\r\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\r\n                }\r\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\r\n            </div>\r\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\r\n                <div\r\n                    class=\"grid overflow-hidden\"\r\n                    [animate.enter]=\"nodeExpandEnterClass()\"\r\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\r\n                    <div class=\"min-h-0 overflow-hidden\">\r\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\r\n                    </div>\r\n                </div>\r\n            }\r\n            @if (!nodeComponent.disabled()) {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\r\n                    <span>\r\n                        @switch (treeService.dropPositionSignal()?.position) {\r\n                            @case (\"before\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-up-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"after\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-down-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"inside\") {\r\n                                <i class=\"ri-add-line\"></i>\r\n                            }\r\n                            @default {\r\n                                <i class=\"ri-prohibited-2-line\"></i>\r\n                            }\r\n                        }\r\n                    </span>\r\n                    <span>{{ nodeComponent.nodeText() }}</span>\r\n                </div>\r\n            } @else {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\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: 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,
+            args: [{ selector: "mona-sub-tree", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TreeNodeComponent,
+                        FormsModule,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragPreview,
+                        CheckBoxComponent,
+                        TreeNodeElementIdPipe
+                    ], template: "<ul\r\n    [class]=\"listClass()\"\r\n    [attr.role]=\"parent() ? 'group' : null\"\r\n    cdkDropList\r\n    [cdkDropListSortingDisabled]=\"true\"\r\n    (cdkDropListDropped)=\"onNodeDrop($event)\">\r\n    @for (node of visibleNodes(); track node.uid) {\r\n        <li\r\n            [attr.id]=\"node.uid | treeNodeElementId\"\r\n            [attr.data-uid]=\"node.uid\"\r\n            [class]=\"listItemClass()\"\r\n            [tabindex]=\"-1\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"depth() + 1\"\r\n            [attr.aria-setsize]=\"visibleNodes().length\"\r\n            [attr.aria-posinset]=\"$index + 1\"\r\n            [attr.aria-expanded]=\"nodeComponent.expandable() ? nodeComponent.expanded() : null\"\r\n            [attr.aria-selected]=\"treeService.selectableOptions().enabled ? nodeComponent.selected() : null\"\r\n            [attr.aria-disabled]=\"nodeComponent.disabled() ? true : null\"\r\n            [attr.aria-checked]=\"\r\n                nodeComponent.checkable() ? (nodeComponent.indeterminate() ? 'mixed' : nodeComponent.checked()) : null\r\n            \"\r\n            (focus)=\"treeService.navigatedNode.set(node)\"\r\n            cdkDrag\r\n            [cdkDragData]=\"node\"\r\n            [cdkDragDisabled]=\"!treeService.draggableOptions().enabled\"\r\n            (cdkDragStarted)=\"onNodeDragStart($event)\"\r\n            (cdkDragEnded)=\"onNodeDragEnd($event)\"\r\n            (cdkDragMoved)=\"onNodeDragMove($event, node)\">\r\n            <div [class]=\"nodeContainerClass()\">\r\n                @if (treeService.expandableOptions().enabled && nodeComponent.expandable()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        tabindex=\"-1\"\r\n                        [class]=\"nodeExpanderClass()\"\r\n                        [class.mona-disabled]=\"nodeComponent.disabled()\"\r\n                        [attr.aria-label]=\"\r\n                            (nodeComponent.expanded() ? 'Collapse' : 'Expand') + ' ' + nodeComponent.nodeText()\r\n                        \"\r\n                        (click)=\"onExpandStateChange(node)\">\r\n                        @if (node.loading()) {\r\n                            <i class=\"ri-loader-2-line\"></i>\r\n                        } @else if (nodeComponent.expanded()) {\r\n                            <i class=\"ri-arrow-down-s-fill\"></i>\r\n                        } @else {\r\n                            <i class=\"ri-arrow-right-s-fill\"></i>\r\n                        }\r\n                    </button>\r\n                }\r\n                @if (nodeComponent.checkable()) {\r\n                    <mona-check-box\r\n                        aria-hidden=\"true\"\r\n                        [tabIndex]=\"-1\"\r\n                        [disabled]=\"nodeComponent.disabled()\"\r\n                        [indeterminate]=\"nodeComponent.indeterminate()\"\r\n                        [ngModel]=\"nodeComponent.checked()\"\r\n                        (click)=\"nodeComponent.checkboxClick$.next($event)\"\r\n                        (ngModelChange)=\"nodeComponent.checkboxCheck$.next($event)\"></mona-check-box>\r\n                }\r\n                <mona-tree-node [node]=\"node\" [depth]=\"depth()\" #nodeComponent></mona-tree-node>\r\n            </div>\r\n            @if (node.children().length > 0 && nodeComponent.expanded()) {\r\n                <div\r\n                    class=\"grid overflow-hidden\"\r\n                    [animate.enter]=\"nodeExpandEnterClass()\"\r\n                    [animate.leave]=\"nodeExpandLeaveClass()\">\r\n                    <div class=\"min-h-0 overflow-hidden\">\r\n                        <mona-sub-tree [nodes]=\"node.children()\" [depth]=\"depth() + 1\" [parent]=\"node\"></mona-sub-tree>\r\n                    </div>\r\n                </div>\r\n            }\r\n            @if (!nodeComponent.disabled()) {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\">\r\n                    <span>\r\n                        @switch (treeService.dropPositionSignal()?.position) {\r\n                            @case (\"before\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-up-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"after\") {\r\n                                @if (treeService.dropAllowed()) {\r\n                                    <i class=\"ri-arrow-down-line\"></i>\r\n                                } @else {\r\n                                    <i class=\"ri-prohibited-2-line\"></i>\r\n                                }\r\n                            }\r\n                            @case (\"inside\") {\r\n                                <i class=\"ri-add-line\"></i>\r\n                            }\r\n                            @default {\r\n                                <i class=\"ri-prohibited-2-line\"></i>\r\n                            }\r\n                        }\r\n                    </span>\r\n                    <span>{{ nodeComponent.nodeText() }}</span>\r\n                </div>\r\n            } @else {\r\n                <div *cdkDragPreview [class]=\"nodeDraggingClass()\"></div>\r\n            }\r\n        </li>\r\n    }\r\n</ul>\r\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 {
+    #dropPositionChange;
+    #hostElementRef;
+    #themeService;
+    constructor() {
+        this.#dropPositionChange = toSignal(inject(TreeService).dropPositionChange$, {
+            initialValue: null
+        });
+        this.#hostElementRef = inject(ElementRef);
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return treeDropHintBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.dropHintStyles = computed(() => {
+            const dropPositionData = this.#dropPositionChange();
+            if (!dropPositionData) {
+                return { display: "none" };
+            }
+            const node = dropPositionData.targetNode;
+            if (!node) {
+                return { display: "none" };
+            }
+            const nodeElement = this.#hostElementRef.nativeElement.parentElement?.querySelector(`[data-uid="${node.uid}"] > div`);
+            if (!nodeElement) {
+                return { display: "none" };
+            }
+            const rect = nodeElement.getBoundingClientRect();
+            const position = dropPositionData.position;
+            const leftOffset = 0;
+            if (position === "before") {
+                return {
+                    display: "flex",
+                    top: `${rect.top}px`,
+                    left: `${rect.left + leftOffset}px`
+                };
+            }
+            else if (position === "after") {
+                return {
+                    display: "flex",
+                    top: `${rect.bottom}px`,
+                    left: `${rect.left + leftOffset}px`
+                };
+            }
+            else {
+                return { display: "none" };
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropHintStyles" }] : /* istanbul ignore next */ []));
+        this.iconClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const icon = "ri-arrow-right-s-fill";
+            const variantClass = treeDropHintIconThemeVariants(theme)();
+            return twMerge(icon, variantClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        afterRenderEffect({
+            write: () => {
+                const styles = this.dropHintStyles();
+                Object.assign(this.#hostElementRef.nativeElement.style, styles);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: TreeDropHintComponent, isStandalone: true, selector: "mona-tree-drop-hint", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<i [class]=\"iconClass()\"></i>\r\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeDropHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tree-drop-hint", changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        "[class]": "baseClass()"
+                    }, template: "<i [class]=\"iconClass()\"></i>\r\n" }]
+        }], ctorParameters: () => [] });
+
+class TreeComponent {
+    #destroyRef;
+    #focusMonitor;
+    #hostElementRef;
+    #themeService;
+    #zone;
+    #lastNavigatedNode;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#focusMonitor = inject(FocusMonitor);
+        this.#hostElementRef = inject(ElementRef);
+        this.#themeService = inject(ThemeService);
+        this.#zone = inject(NgZone);
+        this.#lastNavigatedNode = null;
+        this.activeDescendantId = computed(() => {
+            const node = this.treeService.navigatedNode();
+            return node === null ? null : this.treeService.getNodeElementId(node.uid);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return treeBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.treeService = inject(TreeService);
+        this.nodeTemplate = contentChild(TreeNodeTemplateDirective, { ...(ngDevMode ? { debugName: "nodeTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.data = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const node = this.treeService.navigatedNode();
+            untracked(() => {
+                if (node !== null) {
+                    this.#lastNavigatedNode = node;
+                }
+            });
+        });
+        effect(() => {
+            const nodeTemplate = this.nodeTemplate() ?? null;
+            untracked(() => {
+                this.treeService.nodeTemplate.set(nodeTemplate);
+            });
+        });
+        effect(() => {
+            const data = this.data();
+            untracked(() => {
+                if (data != null) {
+                    this.treeService.setData(data);
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+    }
+    handleMouseMoveWhileDragging(event) {
+        if (this.isMouseOutsideTree(event)) {
+            this.treeService.dropPositionChange$.next({
+                targetNode: null,
+                position: "outside"
+            });
+            return;
+        }
+        const element = event.target;
+        const closest = element.closest("li");
+        if (!closest) {
+            return;
+        }
+        const nodeUid = closest.getAttribute("data-uid");
+        if (!nodeUid) {
+            return;
+        }
+        const node = this.treeService.getNodeByUid(nodeUid);
+        if (!node) {
+            return;
+        }
+        const nodeElement = closest.querySelector("mona-tree-node");
+        if (!nodeElement) {
+            return;
+        }
+        this.notifyDropPositionChange(event, nodeElement, node);
+    }
+    isMouseOutsideTree(event) {
+        const rect = this.#hostElementRef.nativeElement.getBoundingClientRect();
+        return event.clientY < rect.top || event.clientY > rect.bottom;
+    }
+    notifyDropPositionChange(event, nodeElement, node) {
+        const rect = nodeElement.getBoundingClientRect();
+        if (event.clientY > rect.top && event.clientY - rect.top <= 8) {
+            this.treeService.dropPositionChange$.next({
+                targetNode: node,
+                position: "before"
+            });
+        }
+        else if (event.clientY < rect.bottom && rect.bottom - event.clientY <= 8) {
+            this.treeService.dropPositionChange$.next({
+                targetNode: node,
+                position: "after"
+            });
+        }
+        else if (event.clientY < rect.top || event.clientY > rect.bottom) {
+            this.treeService.dropPositionChange$.next({
+                targetNode: null,
+                position: "outside"
+            });
+        }
+        else {
+            this.treeService.dropPositionChange$.next({
+                targetNode: node,
+                position: "inside"
+            });
+        }
+    }
+    setFocusSubscription() {
+        this.#focusMonitor
+            .monitor(this.#hostElementRef.nativeElement, true)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(origin => {
+            if (origin) {
+                asapScheduler.schedule(() => {
+                    if (this.treeService.navigatedNode() === null) {
+                        if (this.#lastNavigatedNode !== null) {
+                            this.treeService.navigatedNode.set(this.#lastNavigatedNode);
+                        }
+                        else {
+                            this.treeService.navigate("next");
+                        }
+                    }
+                });
+                return;
+            }
+            asapScheduler.schedule(() => {
+                this.treeService.navigatedNode.set(null);
+            });
+        });
+        fromEvent(this.#hostElementRef.nativeElement, "focusin")
+            .pipe(filter(e => !this.#hostElementRef.nativeElement.contains(e.relatedTarget)), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(e => this.treeService.focus$.next(e));
+        fromEvent(this.#hostElementRef.nativeElement, "focusout")
+            .pipe(filter(e => !this.#hostElementRef.nativeElement.contains(e.relatedTarget)), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(e => this.treeService.blur$.next(e));
+    }
+    setKeydownSubscription() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const navigatedNode = this.treeService.navigatedNode();
+            if (event.key === "ArrowUp") {
+                event.preventDefault();
+                this.treeService.navigate("previous");
+            }
+            else if (event.key === "ArrowDown") {
+                event.preventDefault();
+                this.treeService.navigate("next");
+            }
+            else if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                if (!navigatedNode || !navigatedNode.nodeItem.hasChildren) {
+                    return;
+                }
+                const expanded = this.treeService.isExpanded(navigatedNode);
+                const disabled = this.treeService.isDisabled(navigatedNode);
+                if (!disabled && expanded) {
+                    this.treeService.setNodeExpand(navigatedNode, false);
+                }
+                this.treeService.navigatedNode.set(navigatedNode);
+            }
+            else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                if (!navigatedNode || !navigatedNode.nodeItem.hasChildren) {
+                    return;
+                }
+                const expanded = this.treeService.isExpanded(navigatedNode);
+                const disabled = this.treeService.isDisabled(navigatedNode);
+                if (!disabled && !expanded) {
+                    this.treeService.setNodeExpand(navigatedNode, true);
+                }
+            }
+            else if (event.key === " ") {
+                event.preventDefault();
+                if (!navigatedNode || this.treeService.isDisabled(navigatedNode)) {
+                    return;
+                }
+                if (!this.treeService.isCheckable(navigatedNode)) {
+                    return;
+                }
+                const nodeCheckEvent = new NodeCheckEvent(navigatedNode, event);
+                this.treeService.nodeCheck$.next(nodeCheckEvent);
+                if (!nodeCheckEvent.isDefaultPrevented()) {
+                    const newCheckState = !this.treeService.isChecked(navigatedNode);
+                    this.treeService.setNodeCheck(navigatedNode, newCheckState);
+                    this.treeService.nodeCheckChange$.next({
+                        node: navigatedNode,
+                        checked: newCheckState
+                    });
+                }
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                this.treeService.navigate("first");
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                this.treeService.navigate("last");
+            }
+            else if (event.key === "Enter") {
+                event.preventDefault();
+                if (!navigatedNode || this.treeService.isDisabled(navigatedNode)) {
+                    return;
+                }
+                const selectableOptions = this.treeService.selectableOptions();
+                if (!selectableOptions.enabled) {
+                    return;
+                }
+                if (selectableOptions.childrenOnly && this.treeService.hasChildren(navigatedNode)) {
+                    return;
+                }
+                const nodeSelectEvent = new NodeSelectEvent(navigatedNode, event);
+                this.treeService.nodeSelect$.next(nodeSelectEvent);
+                if (!nodeSelectEvent.isDefaultPrevented()) {
+                    const newSelected = !this.treeService.isSelected(navigatedNode);
+                    this.treeService.setNodeSelect(navigatedNode, newSelected);
+                    this.treeService.nodeSelectChange$.next({
+                        node: navigatedNode,
+                        selected: newSelected
+                    });
+                    this.treeService.notifySelectionChange(navigatedNode);
+                }
+            }
+        });
+    }
+    setNodeDragHandlerSubscription() {
+        this.#zone.runOutsideAngular(() => {
+            this.treeService.dragging$
+                .pipe(takeUntilDestroyed(this.#destroyRef), switchMap(dragging => dragging
+                ? fromEvent(document, "mousemove").pipe(takeWhile(() => this.treeService.dragging()))
+                : []))
+                .subscribe(event => this.handleMouseMoveWhileDragging(event));
+        });
+    }
+    setSubscriptions() {
+        this.setFocusSubscription();
+        this.setKeydownSubscription();
+        this.setNodeDragHandlerSubscription();
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-tree", imports: [SubTreeComponent, TreeDropHintComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "[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()"
+                    }, 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" }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], nodeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TreeNodeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+/**
+ * Moves a node within a generic flat tree structure that uses parentId references.
+ * @param treeData - The flat array of tree nodes.
+ * @param event - The drag-and-drop event payload.
+ * @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.
+ */
+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") {
+        return workingArray;
+    }
+    const draggedIndex = workingArray.findIndex(item => item[idKey] === draggedId);
+    if (draggedIndex === -1) {
+        return workingArray;
+    }
+    const [draggedNode] = workingArray.splice(draggedIndex, 1);
+    const targetIndex = workingArray.findIndex(item => item[idKey] === targetId);
+    if (targetIndex === -1) {
+        workingArray.splice(draggedIndex, 0, draggedNode);
+        return workingArray;
+    }
+    const targetNode = workingArray[targetIndex];
+    if (position === "before") {
+        const updatedNode = { ...draggedNode, [parentIdKey]: targetNode[parentIdKey] };
+        workingArray.splice(targetIndex, 0, updatedNode);
+    }
+    else if (position === "after") {
+        const updatedNode = { ...draggedNode, [parentIdKey]: targetNode[parentIdKey] };
+        workingArray.splice(targetIndex + 1, 0, updatedNode);
+    }
+    else if (position === "inside") {
+        const updatedNode = { ...draggedNode, [parentIdKey]: targetNode[idKey] };
+        function findLastDescendantIndex(anchorId) {
+            let lastIndex = workingArray.findIndex(item => item[idKey] === anchorId);
+            for (let i = 0; i < workingArray.length; i++) {
+                if (workingArray[i][parentIdKey] === anchorId) {
+                    const childLastIndex = findLastDescendantIndex(workingArray[i][idKey]);
+                    if (childLastIndex > lastIndex) {
+                        lastIndex = childLastIndex;
+                    }
+                }
+            }
+            return lastIndex;
+        }
+        const insertAfterIndex = findLastDescendantIndex(targetId);
+        workingArray.splice(insertAfterIndex + 1, 0, updatedNode);
+    }
+    return workingArray;
+}
+
+/**
+ * Moves a node within a generic hierarchical tree structure.
+ * @param treeData - The array of tree nodes.
+ * @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.
+ */
+function moveTreeNode(treeData, event, idKey, childrenKey) {
+    const updatedTree = [...treeData];
+    const draggedId = event.nodeItem.data[idKey];
+    const targetId = event.targetNode.data[idKey];
+    const position = event.position;
+    let draggedNode = null;
+    function extractNode(nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+            if (nodes[i][idKey] === draggedId) {
+                draggedNode = nodes.splice(i, 1)[0];
+                return true;
+            }
+            const children = nodes[i][childrenKey];
+            if (children && Array.isArray(children)) {
+                if (extractNode(children)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    function insertNode(nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+            if (nodes[i][idKey] === targetId) {
+                if (position === "inside") {
+                    if (!nodes[i][childrenKey]) {
+                        nodes[i][childrenKey] = [];
+                    }
+                    const children = nodes[i][childrenKey];
+                    children.push(draggedNode);
+                }
+                else if (position === "before") {
+                    nodes.splice(i, 0, draggedNode);
+                }
+                else if (position === "after") {
+                    nodes.splice(i + 1, 0, draggedNode);
+                }
+                return true;
+            }
+            const children = nodes[i][childrenKey];
+            if (children && Array.isArray(children)) {
+                if (insertNode(children)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    extractNode(updatedTree);
+    if (draggedNode) {
+        insertNode(updatedTree);
+    }
+    return updatedTree;
+}
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/tree
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InternalNodeDragEvent, NodeCheckEvent, NodeClickEvent, NodeDragEndEvent, NodeDragEvent, NodeDragStartEvent, NodeDropEvent, NodeDropEventSansTree, NodeEvent, NodeSelectEvent, TreeComponent, TreeNode, TreeNodeTemplateDirective, TreeService, moveFlatTreeNode, moveTreeNode };
+//# sourceMappingURL=nanahoshi-mona-ui-internal-tree.mjs.map