@acorex/components 20.2.47 → 20.2.49

package/fesm2022/acorex-components-tree-view.mjs

@@ -1,4 +1,5 @@
 import { moveItemInArray, transferArrayItem, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
+import { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';
 import { AXBadgeComponent } from '@acorex/components/badge';
 import { AXButtonComponent } from '@acorex/components/button';
 import { AXCheckBoxComponent } from '@acorex/components/check-box';
@@ -340,6 +341,114 @@ class AXTreeViewService {
     getListPrefix() {
         return AXTreeViewService.LIST_PREFIX;
     }
+    // ==================== Node Utilities ====================
+    /**
+     * Get all nodes in a flat array
+     */
+    getAllNodes(nodes) {
+        const allNodes = [];
+        const traverse = (nodeList) => {
+            for (const node of nodeList) {
+                allNodes.push(node);
+                if (node.children) {
+                    traverse(node.children);
+                }
+            }
+        };
+        traverse(nodes);
+        return allNodes;
+    }
+    /**
+     * Get the path to a node (array of parent nodes from root to node)
+     */
+    getNodePath(nodes, nodeId) {
+        const path = [];
+        const node = this.findNodeById(nodes, nodeId);
+        if (!node) {
+            return path;
+        }
+        let current = node;
+        while (current) {
+            path.unshift(current);
+            const parent = this.findParentNode(nodes, current);
+            current = parent ?? null;
+        }
+        return path;
+    }
+    /**
+     * Get the level/depth of a node (0 = root level)
+     */
+    getNodeLevel(nodes, nodeId) {
+        const path = this.getNodePath(nodes, nodeId);
+        return path.length > 0 ? path.length - 1 : -1;
+    }
+    /**
+     * Get sibling nodes of a given node
+     */
+    getSiblings(nodes, nodeId) {
+        const node = this.findNodeById(nodes, nodeId);
+        if (!node) {
+            return [];
+        }
+        const parent = this.findParentNode(nodes, node);
+        const siblingsArray = parent?.children ?? nodes;
+        return siblingsArray.filter((n) => n.id !== nodeId);
+    }
+    /**
+     * Clone a node (creates a deep copy)
+     */
+    cloneNode(node) {
+        const cloned = {
+            id: `${node.id}-clone-${Date.now()}`,
+            label: node.label,
+            icon: node.icon,
+            expanded: node.expanded,
+            selected: false, // Cloned nodes are not selected by default
+            indeterminate: false,
+            disabled: node.disabled,
+            visible: node.visible,
+            childrenCount: node.childrenCount,
+            loading: false, // Cloned nodes are not loading
+            data: node.data ? JSON.parse(JSON.stringify(node.data)) : undefined,
+        };
+        if (node.children && node.children.length > 0) {
+            cloned.children = node.children.map((child) => this.cloneNode(child));
+            cloned.childrenCount = cloned.children.length;
+        }
+        return cloned;
+    }
+    /**
+     * Validate node structure (check for required fields and circular references)
+     */
+    validateNode(node, visitedIds = new Set()) {
+        const errors = [];
+        if (!node.id) {
+            errors.push('Node must have an id');
+        }
+        if (!node.label) {
+            errors.push('Node must have a label');
+        }
+        if (visitedIds.has(node.id)) {
+            errors.push(`Circular reference detected: node ${node.id} appears multiple times in the tree`);
+        }
+        if (node.children) {
+            const newVisited = new Set(visitedIds);
+            newVisited.add(node.id);
+            for (const child of node.children) {
+                const childValidation = this.validateNode(child, newVisited);
+                if (!childValidation.valid) {
+                    errors.push(...childValidation.errors.map((e) => `Child of ${node.id}: ${e}`));
+                }
+            }
+            if (node.childrenCount !== undefined && node.childrenCount !== node.children.length) {
+                errors.push(`Node ${node.id}: childrenCount (${node.childrenCount}) does not match children array length (${node.children.length})`);
+            }
+        }
+        return {
+            valid: errors.length === 0,
+            errors,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService }); }
 }
@@ -527,6 +636,438 @@ class AXTreeViewComponent {
     isNodeLoading(nodeId) {
         return this.loadingNodes().has(nodeId);
     }
+    /**
+     * Edit/update a node's properties
+     * @param nodeId - The ID of the node to edit
+     * @param updates - Partial node object with properties to update
+     * @returns true if node was found and updated, false otherwise
+     */
+    editNode(nodeId, updates) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return false;
+        }
+        // Update node properties
+        Object.assign(node, updates);
+        // If children array is provided, ensure it exists
+        if (updates.children !== undefined) {
+            node.children = updates.children;
+        }
+        // Update childrenCount if children array is provided
+        if (updates.children !== undefined) {
+            node.childrenCount = updates.children.length;
+        }
+        this.refreshNodes();
+        return true;
+    }
+    /**
+     * Add a child node to a parent node
+     * @param parentId - The ID of the parent node
+     * @param childNode - The child node to add
+     * @param index - Optional index to insert at (default: append to end)
+     * @returns true if parent was found and child was added, false otherwise
+     */
+    addChild(parentId, childNode, index) {
+        const parent = this.findNode(parentId);
+        if (!parent) {
+            return false;
+        }
+        // Ensure children array exists
+        if (!parent.children) {
+            parent.children = [];
+        }
+        // Insert or append child
+        if (index !== undefined && index >= 0 && index <= parent.children.length) {
+            parent.children.splice(index, 0, childNode);
+        }
+        else {
+            parent.children.push(childNode);
+        }
+        // Update childrenCount
+        parent.childrenCount = parent.children.length;
+        // Auto-expand parent if it was collapsed
+        if (!parent.expanded) {
+            parent.expanded = true;
+        }
+        this.refreshNodes();
+        return true;
+    }
+    /**
+     * Remove a node from the tree
+     * @param nodeId - The ID of the node to remove
+     * @returns The removed node if found, null otherwise
+     */
+    removeNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return null;
+        }
+        // Find parent to remove from its children array
+        const parent = this.treeService.findParentNode(this.nodes(), node);
+        const targetArray = parent?.children ?? this.nodes();
+        // Find and remove the node
+        const index = targetArray.findIndex((n) => n.id === nodeId);
+        if (index !== -1) {
+            const removed = targetArray.splice(index, 1)[0];
+            // Update parent's childrenCount if it exists
+            if (parent) {
+                parent.childrenCount = parent.children?.length ?? 0;
+            }
+            // Update parent states if needed
+            if (this.intermediateState()) {
+                this.treeService.updateAllParentStates(this.nodes(), this.intermediateState());
+            }
+            this.refreshNodes();
+            return removed;
+        }
+        return null;
+    }
+    /**
+     * Expand a specific node
+     * @param nodeId - The ID of the node to expand
+     * @returns Promise that resolves when expansion is complete (if lazy loading)
+     */
+    async expandNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return;
+        }
+        const hasChildren = this.treeService.hasChildren(node);
+        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource());
+        if (hasChildren || canLazyLoad) {
+            if (canLazyLoad) {
+                await this.loadNodeChildren(node);
+            }
+            node.expanded = true;
+            this.refreshNodes();
+            this.onNodeToggle.emit({ component: this, node, nativeEvent: new Event('expand') });
+        }
+    }
+    /**
+     * Collapse a specific node
+     * @param nodeId - The ID of the node to collapse
+     */
+    collapseNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return;
+        }
+        if (node.expanded) {
+            node.expanded = false;
+            this.refreshNodes();
+            this.onNodeToggle.emit({ component: this, node, nativeEvent: new Event('collapse') });
+        }
+    }
+    /**
+     * Toggle expansion state of a specific node
+     * @param nodeId - The ID of the node to toggle
+     * @returns Promise that resolves when toggle is complete (if lazy loading)
+     */
+    async toggleNodeExpansion(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return;
+        }
+        if (node.expanded) {
+            this.collapseNode(nodeId);
+        }
+        else {
+            await this.expandNode(nodeId);
+        }
+    }
+    /**
+     * Programmatically select a node
+     * @param nodeId - The ID of the node to select
+     * @returns true if node was found and selected, false otherwise
+     */
+    selectNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node || node.disabled) {
+            return false;
+        }
+        const mode = this.selectMode();
+        if (mode === 'single') {
+            this.treeService.deselectAllNodes(this.nodes());
+            node.selected = true;
+            node.indeterminate = false;
+        }
+        else {
+            node.selected = true;
+            node.indeterminate = false;
+            if (this.checkChildrenOnSelect() && node.children) {
+                this.treeService.selectAllChildren(node.children, true);
+            }
+            if (this.intermediateState()) {
+                this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
+            }
+        }
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            isUserInteraction: false,
+        });
+        return true;
+    }
+    /**
+     * Programmatically deselect a node
+     * @param nodeId - The ID of the node to deselect
+     * @returns true if node was found and deselected, false otherwise
+     */
+    deselectNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return false;
+        }
+        node.selected = false;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, false);
+        }
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
+        }
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            isUserInteraction: false,
+        });
+        return true;
+    }
+    /**
+     * Get parent node of a given node
+     * @param nodeId - The ID of the node
+     * @returns The parent node if found, null otherwise
+     */
+    getParent(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return null;
+        }
+        return this.treeService.findParentNode(this.nodes(), node) ?? null;
+    }
+    /**
+     * Get children of a node
+     * @param nodeId - The ID of the parent node
+     * @returns Array of child nodes, or null if node not found
+     */
+    getChildren(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return null;
+        }
+        return node.children ?? [];
+    }
+    /**
+     * Get all root nodes
+     * @returns Array of root nodes
+     */
+    getRootNodes() {
+        return [...this.nodes()];
+    }
+    /**
+     * Get all nodes in a flat array
+     * @returns Array of all nodes in the tree
+     */
+    getAllNodes() {
+        const allNodes = [];
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                allNodes.push(node);
+                if (node.children) {
+                    traverse(node.children);
+                }
+            }
+        };
+        traverse(this.nodes());
+        return allNodes;
+    }
+    /**
+     * Get the path to a node (array of parent IDs from root to node)
+     * @param nodeId - The ID of the node
+     * @returns Array of node IDs representing the path, or empty array if node not found
+     */
+    getNodePath(nodeId) {
+        const path = [];
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return path;
+        }
+        let current = node;
+        while (current) {
+            path.unshift(current.id);
+            const parent = this.treeService.findParentNode(this.nodes(), current);
+            current = parent ?? null;
+        }
+        return path;
+    }
+    /**
+     * Get the level/depth of a node (0 = root level)
+     * @param nodeId - The ID of the node
+     * @returns The level of the node, or -1 if node not found
+     */
+    getNodeLevel(nodeId) {
+        const path = this.getNodePath(nodeId);
+        return path.length > 0 ? path.length - 1 : -1;
+    }
+    /**
+     * Programmatically move a node to a new parent
+     * @param nodeId - The ID of the node to move
+     * @param newParentId - The ID of the new parent (undefined for root level)
+     * @param index - Optional index to insert at (default: append to end)
+     * @returns true if move was successful, false otherwise
+     */
+    moveNode(nodeId, newParentId, index) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return false;
+        }
+        // Find current parent
+        const currentParent = this.treeService.findParentNode(this.nodes(), node);
+        const currentArray = currentParent?.children ?? this.nodes();
+        // Find and remove from current location
+        const currentIndex = currentArray.findIndex((n) => n.id === nodeId);
+        if (currentIndex === -1) {
+            return false;
+        }
+        const movedNode = currentArray.splice(currentIndex, 1)[0];
+        // Find new parent
+        let targetArray;
+        let newParent;
+        if (newParentId) {
+            newParent = this.findNode(newParentId);
+            if (!newParent) {
+                // Restore node if new parent not found
+                currentArray.splice(currentIndex, 0, movedNode);
+                return false;
+            }
+            // Validate drop target
+            if (!this.treeService.isValidDropTarget(movedNode, newParent)) {
+                // Restore node if invalid drop target
+                currentArray.splice(currentIndex, 0, movedNode);
+                return false;
+            }
+            if (!newParent.children) {
+                newParent.children = [];
+            }
+            targetArray = newParent.children;
+        }
+        else {
+            targetArray = this.nodes();
+        }
+        // Calculate new index before inserting
+        const newIndex = index !== undefined && index >= 0 && index <= targetArray.length ? index : targetArray.length;
+        // Insert at new location
+        if (index !== undefined && index >= 0 && index <= targetArray.length) {
+            targetArray.splice(index, 0, movedNode);
+        }
+        else {
+            targetArray.push(movedNode);
+        }
+        // Update childrenCount
+        if (currentParent) {
+            currentParent.childrenCount = currentParent.children?.length ?? 0;
+        }
+        if (newParent) {
+            newParent.childrenCount = newParent.children?.length ?? 0;
+            newParent.expanded = true; // Auto-expand new parent
+        }
+        // Emit drop events
+        this.emitDropEvents(movedNode, currentParent, newParent, currentIndex, newIndex, false);
+        this.refreshNodes();
+        return true;
+    }
+    /**
+     * Clone a node (creates a deep copy)
+     * @param nodeId - The ID of the node to clone
+     * @returns The cloned node, or null if node not found
+     */
+    cloneNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node) {
+            return null;
+        }
+        return this.treeService.cloneNode(node);
+    }
+    /**
+     * Focus a specific node by ID
+     * @param nodeId - The ID of the node to focus
+     * @returns true if node was found and focused, false otherwise
+     */
+    focusNode(nodeId) {
+        const node = this.findNode(nodeId);
+        if (!node || node.visible === false || node.disabled) {
+            return false;
+        }
+        this.focusNodeById(nodeId);
+        return true;
+    }
+    /**
+     * Get all expanded nodes
+     * @returns Array of expanded nodes
+     */
+    getExpandedNodes() {
+        const expanded = [];
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                if (node.expanded) {
+                    expanded.push(node);
+                }
+                if (node.children) {
+                    traverse(node.children);
+                }
+            }
+        };
+        traverse(this.nodes());
+        return expanded;
+    }
+    /**
+     * Get all collapsed nodes that have children
+     * @returns Array of collapsed nodes with children
+     */
+    getCollapsedNodes() {
+        const collapsed = [];
+        const traverse = (nodes) => {
+            for (const node of nodes) {
+                if (!node.expanded && (node.children?.length || node.childrenCount)) {
+                    collapsed.push(node);
+                }
+                if (node.children) {
+                    traverse(node.children);
+                }
+            }
+        };
+        traverse(this.nodes());
+        return collapsed;
+    }
+    /**
+     * Check if a node is expanded
+     * @param nodeId - The ID of the node
+     * @returns true if node is expanded, false otherwise
+     */
+    isNodeExpanded(nodeId) {
+        const node = this.findNode(nodeId);
+        return node?.expanded ?? false;
+    }
+    /**
+     * Check if a node is selected
+     * @param nodeId - The ID of the node
+     * @returns true if node is selected, false otherwise
+     */
+    isNodeSelected(nodeId) {
+        const node = this.findNode(nodeId);
+        return node?.selected ?? false;
+    }
+    /**
+     * Check if a node has children
+     * @param nodeId - The ID of the node
+     * @returns true if node has children, false otherwise
+     */
+    hasChildren(nodeId) {
+        const node = this.findNode(nodeId);
+        return this.treeService.hasChildren(node ?? { id: '', label: '' });
+    }
     /**
      * Get template context for a node
      */
@@ -706,18 +1247,25 @@ class AXTreeViewComponent {
      */
     onTreeFocus(event) {
         if (event.target === event.currentTarget) {
-            afterNextRender(() => {
-                const flatList = this.treeService.buildFlatNodeList(this.nodes());
-                if (flatList.length > 0) {
-                    const focusedId = this.focusedNodeId();
-                    if (focusedId) {
+            const flatList = this.treeService.buildFlatNodeList(this.nodes());
+            if (flatList.length > 0) {
+                const focusedId = this.focusedNodeId();
+                if (focusedId) {
+                    // Check if the focused node still exists and is visible
+                    const focusedNode = this.treeService.findNodeById(this.nodes(), focusedId);
+                    if (focusedNode && focusedNode.visible !== false) {
                         this.focusNodeById(focusedId);
                     }
                     else {
+                        // Focused node no longer exists, focus first node
                         this.focusNodeById(flatList[0].node.id);
                     }
                 }
-            });
+                else {
+                    // No node is focused, focus first node
+                    this.focusNodeById(flatList[0].node.id);
+                }
+            }
         }
     }
     /**
@@ -805,9 +1353,13 @@ class AXTreeViewComponent {
     }
     /**
      * Internal method to refresh nodes signal and sync back to datasource if it's an array
+     * Creates new array references for all nested children to ensure reactivity
      */
     refreshNodes() {
         const currentNodes = this.nodes();
+        // Create new array references for all nested children to ensure reactivity
+        // This ensures Angular's change detection picks up changes even with callback datasource
+        this.ensureNewArrayReferences(currentNodes);
         this.nodes.set([...currentNodes]);
         if (!this.isLazyDataSource() && !this.isUpdatingFromDatasource) {
             this.isUpdatingFromDatasource = true;
@@ -817,6 +1369,20 @@ class AXTreeViewComponent {
             }, 0);
         }
     }
+    /**
+     * Recursively ensure all children arrays have new references to trigger change detection
+     * Mutates the tree structure by replacing children arrays with new array references
+     */
+    ensureNewArrayReferences(nodes) {
+        for (const node of nodes) {
+            if (node.children && node.children.length > 0) {
+                // Create new array reference for children
+                node.children = [...node.children];
+                // Recursively process nested children
+                this.ensureNewArrayReferences(node.children);
+            }
+        }
+    }
     /**
      * Handle single selection mode
      */
@@ -1165,7 +1731,7 @@ class AXTreeViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkChildrenOnSelect: { classPropertyName: "checkChildrenOnSelect", publicName: "checkChildrenOnSelect", isSignal: true, isRequired: false, transformFunction: null }, intermediateState: { classPropertyName: "intermediateState", publicName: "intermediateState", isSignal: true, isRequired: false, transformFunction: null }, checkOnClick: { classPropertyName: "checkOnClick", publicName: "checkOnClick", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragOperationType: { classPropertyName: "dragOperationType", publicName: "dragOperationType", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree-view-comfortable]=\"nodeHeight() === 'comfortable'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"node.selected\"\n        [class.ax-tree-view-node-disabled]=\"node.disabled\"\n        [class.ax-tree-view-node-loading]=\"node.loading\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-tree-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(node.id)\"\n          [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree-view-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"node.selected\"\n          [class.ax-tree-view-node-disabled]=\"node.disabled\"\n          [class.ax-tree-view-node-loading]=\"node.loading\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(node.id)\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [style.padding-inline-start.px]=\"getNodePaddingInline(level)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-tree-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(node.id)\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree-view-drop-list{min-height:2rem}.ax-tree-view-compact .ax-tree-view-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree-view-comfortable .ax-tree-view-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg);border-color:currentColor}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:-2px}.ax-tree-view-node-content{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:1px solid transparent;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:2px;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree-view-card .ax-tree-view-node-content{padding:1rem}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkChildrenOnSelect: { classPropertyName: "checkChildrenOnSelect", publicName: "checkChildrenOnSelect", isSignal: true, isRequired: false, transformFunction: null }, intermediateState: { classPropertyName: "intermediateState", publicName: "intermediateState", isSignal: true, isRequired: false, transformFunction: null }, checkOnClick: { classPropertyName: "checkOnClick", publicName: "checkOnClick", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragOperationType: { classPropertyName: "dragOperationType", publicName: "dragOperationType", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree-view-comfortable]=\"nodeHeight() === 'comfortable'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"node.selected\"\n        [class.ax-tree-view-node-disabled]=\"node.disabled\"\n        [class.ax-tree-view-node-loading]=\"node.loading\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-tree-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(node.id)\"\n          [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree-view-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"node.selected\"\n          [class.ax-tree-view-node-disabled]=\"node.disabled\"\n          [class.ax-tree-view-node-loading]=\"node.loading\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(node.id)\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [style.padding-inline-start.px]=\"getNodePaddingInline(level)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-tree-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(node.id)\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-card-node-margin: .5rem;--ax-comp-tree-view-card-content-padding: 1rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-compact .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .25rem .5rem);gap:var(--ax-comp-tree-view-content-gap, .375rem);font-size:.8125rem}.ax-tree-view-comfortable .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .75rem .625rem);gap:var(--ax-comp-tree-view-content-gap, .625rem);font-size:.9375rem}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg);border-color:currentColor}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:1px solid transparent;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:var(--ax-comp-tree-view-card-node-margin) 0}.ax-tree-view-card .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-card-content-padding)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
@@ -1175,6 +1741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         AXDragDirective,
                         AXDragHandleDirective,
                         AXDropListDirective,
+                        AXFocusTrapDirective,
                         NgTemplateOutlet,
                         AXButtonComponent,
                         AXCheckBoxComponent,
@@ -1194,7 +1761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '(focus)': 'onTreeFocus($event)',
                         '(blur)': 'onTreeBlur($event)',
                         tabindex: '0',
-                    }, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree-view-comfortable]=\"nodeHeight() === 'comfortable'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"node.selected\"\n        [class.ax-tree-view-node-disabled]=\"node.disabled\"\n        [class.ax-tree-view-node-loading]=\"node.loading\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-tree-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(node.id)\"\n          [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree-view-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"node.selected\"\n          [class.ax-tree-view-node-disabled]=\"node.disabled\"\n          [class.ax-tree-view-node-loading]=\"node.loading\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(node.id)\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [style.padding-inline-start.px]=\"getNodePaddingInline(level)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-tree-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(node.id)\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree-view-drop-list{min-height:2rem}.ax-tree-view-compact .ax-tree-view-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree-view-comfortable .ax-tree-view-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg);border-color:currentColor}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:-2px}.ax-tree-view-node-content{display:flex;align-items:center;gap:.5rem;padding:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:1px solid transparent;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:2px;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree-view-card .ax-tree-view-node-content{padding:1rem}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"] }]
+                    }, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree-view-comfortable]=\"nodeHeight() === 'comfortable'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"node.selected\"\n        [class.ax-tree-view-node-disabled]=\"node.disabled\"\n        [class.ax-tree-view-node-loading]=\"node.loading\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-tree-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(node.id)\"\n          [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree-view-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"node.selected\"\n          [class.ax-tree-view-node-disabled]=\"node.disabled\"\n          [class.ax-tree-view-node-loading]=\"node.loading\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(node.id)\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [style.padding-inline-start.px]=\"getNodePaddingInline(level)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-tree-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(node.id)\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-card-node-margin: .5rem;--ax-comp-tree-view-card-content-padding: 1rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-compact .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .25rem .5rem);gap:var(--ax-comp-tree-view-content-gap, .375rem);font-size:.8125rem}.ax-tree-view-comfortable .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .75rem .625rem);gap:var(--ax-comp-tree-view-content-gap, .625rem);font-size:.9375rem}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg);border-color:currentColor}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:1px solid transparent;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:var(--ax-comp-tree-view-card-node-margin) 0}.ax-tree-view-card .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-card-content-padding)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"] }]
         }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkChildrenOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkChildrenOnSelect", required: false }] }], intermediateState: [{ type: i0.Input, args: [{ isSignal: true, alias: "intermediateState", required: false }] }], checkOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkOnClick", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], dragOperationType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragOperationType", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
 
 class AXTreeViewModule {