@acorex/components 21.0.0-next.12 → 21.0.0-next.14

package/fesm2022/acorex-components-tree2.mjs

@@ -12,18 +12,22 @@ import { FormsModule } from '@angular/forms';
 
 class AXTree2Component {
     constructor() {
+        // Constants for list ID generation
+        this.ROOT_LIST_ID = 'ax-tree-root-list';
+        this.NODE_DROP_PREFIX = 'ax-tree-node-drop-';
+        this.LIST_PREFIX = 'ax-tree-list-';
         /** Tree data nodes */
         this.nodes = model.required(...(ngDevMode ? [{ debugName: "nodes" }] : []));
         /** Whether to show checkboxes for selection */
         this.showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
         /** Drag and drop mode: 'none' (disabled), 'handler' (drag handle), 'item' (entire item) */
         this.dragMode = input('handler', ...(ngDevMode ? [{ debugName: "dragMode" }] : []));
+        /** Drag operation type: 'order-only' (reorder only), 'move' (move between parents), 'both' (allow both) */
+        this.dragOperationType = input('both', ...(ngDevMode ? [{ debugName: "dragOperationType" }] : []));
         /** Whether to show icons */
         this.showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
         /** Whether to show children count badge */
         this.showChildrenBadge = input(true, ...(ngDevMode ? [{ debugName: "showChildrenBadge" }] : []));
-        /** Whether to animate expand/collapse */
-        this.animated = input(true, ...(ngDevMode ? [{ debugName: "animated" }] : []));
         /** Custom icon for expanded nodes */
         this.expandedIcon = input('fa-solid fa-chevron-down', ...(ngDevMode ? [{ debugName: "expandedIcon" }] : []));
         /** Custom icon for collapsed nodes */
@@ -43,11 +47,15 @@ class AXTree2Component {
         /** Emitted before a drop operation - set canceled to true to prevent drop */
         this.onBeforeDrop = output();
         /** Emitted when a node is toggled (expanded/collapsed) */
-        this.nodeToggle = output();
+        this.onNodeToggle = output();
         /** Emitted when a node is selected/deselected */
-        this.nodeSelect = output();
-        /** Emitted when a node is dropped */
-        this.nodeDrop = output();
+        this.onNodeSelect = output();
+        /** Emitted when nodes are reordered within the same parent */
+        this.onOrderChange = output();
+        /** Emitted when a node is moved to a different parent */
+        this.onMoveChange = output();
+        /** Emitted for any item change (order or move) */
+        this.onItemsChange = output();
         /** Internal signal for tracking loading state */
         this.loadingNodes = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingNodes" }] : []));
         /** Effect to handle lazy load function changes */
@@ -68,8 +76,8 @@ class AXTree2Component {
     async toggleNode(node, event) {
         if (node.disabled)
             return;
-        const hasChildren = node.children && node.children.length > 0;
-        const canLazyLoad = this.enableLazyLoad() && node.childrenCount && node.childrenCount > 0 && !hasChildren;
+        const hasChildren = this.hasChildren(node);
+        const canLazyLoad = this.canLazyLoad(node);
         if (hasChildren || canLazyLoad) {
             const willExpand = !node.expanded;
             if (willExpand && canLazyLoad) {
@@ -78,7 +86,7 @@ class AXTree2Component {
             }
             node.expanded = willExpand;
             this.nodes.set([...this.nodes()]);
-            this.nodeToggle.emit({ component: this, node, nativeEvent: event });
+            this.onNodeToggle.emit({ component: this, node, nativeEvent: event });
         }
     }
     /**
@@ -143,7 +151,7 @@ class AXTree2Component {
         // Update parent states up the tree
         this.updateParentStates(this.nodes(), node);
         this.nodes.set([...this.nodes()]);
-        this.nodeSelect.emit({
+        this.onNodeSelect.emit({
             component: this,
             node,
             isUserInteraction: event.isUserInteraction,
@@ -226,136 +234,65 @@ class AXTree2Component {
      */
     onDrop(event, parentNode) {
         const targetArray = parentNode?.children ?? this.nodes();
-        if (event.previousContainer === event.container) {
-            // Reordering within the same list
-            moveItemInArray(targetArray, event.previousIndex, event.currentIndex);
+        const isReordering = event.previousContainer === event.container;
+        if (isReordering) {
+            this.handleReorder(event, targetArray, parentNode);
         }
         else {
-            // Moving between different lists
-            const sourceListId = event.previousContainer.element.id;
-            const sourceArray = this.getArrayByListId(sourceListId);
-            if (sourceArray) {
-                const movedNode = sourceArray[event.previousIndex];
-                // CRITICAL: Prevent dropping a node into its own descendants (circular reference)
-                if (parentNode && this.isNodeDescendantOf(parentNode, movedNode)) {
-                    console.warn('Cannot drop a node into its own descendants');
-                    // Do NOT transfer the item - just return early
-                    return;
-                }
-                // Emit beforeDrop event - user can cancel by setting canceled = true
-                const beforeDropEvent = {
-                    component: this,
-                    movedNode,
-                    previousParent: this.findParentByListId(sourceListId),
-                    currentParent: parentNode,
-                    previousIndex: event.previousIndex,
-                    currentIndex: event.currentIndex,
-                    canceled: false,
-                };
-                this.onBeforeDrop.emit(beforeDropEvent);
-                if (beforeDropEvent.canceled) {
-                    console.warn('Drop canceled by user in onBeforeDrop event');
-                    return;
-                }
-                transferArrayItem(sourceArray, targetArray, event.previousIndex, event.currentIndex);
-                // Emit drop event
-                this.nodeDrop.emit({
-                    component: this,
-                    node: movedNode,
-                    previousParent: this.findParentByListId(sourceListId),
-                    currentParent: parentNode,
-                    previousIndex: event.previousIndex,
-                    currentIndex: event.currentIndex,
-                });
-            }
+            this.handleMove(event, targetArray, parentNode);
         }
-        // Update the signal to trigger change detection
         this.nodes.set([...this.nodes()]);
     }
     /**
      * Handle drop events when dropping directly onto a node (to make it a child)
      */
     onDropOntoNode(event, targetNode) {
+        if (!this.canMoveToParent())
+            return;
         const sourceListId = event.previousContainer.element.id;
         const sourceArray = this.getArrayByListId(sourceListId);
         if (!sourceArray)
             return;
         const movedNode = sourceArray[event.previousIndex];
-        // CRITICAL: Prevent dropping a node onto itself or its descendants
-        if (movedNode.id === targetNode.id || this.isNodeDescendantOf(targetNode, movedNode)) {
-            console.warn('Cannot drop a node onto itself or its descendants');
+        if (!this.isValidDropTarget(movedNode, targetNode))
             return;
-        }
-        // Emit beforeDrop event - user can cancel by setting canceled = true
-        const beforeDropEvent = {
-            component: this,
-            movedNode,
-            previousParent: this.findParentByListId(sourceListId),
-            currentParent: targetNode,
-            previousIndex: event.previousIndex,
-            currentIndex: 0, // Always first child when dropping onto node
-            canceled: false,
-        };
-        this.onBeforeDrop.emit(beforeDropEvent);
-        if (beforeDropEvent.canceled) {
-            console.warn('Drop canceled by user in onBeforeDrop event');
+        if (!this.emitBeforeDropEvent(movedNode, sourceListId, targetNode, event.previousIndex, 0))
             return;
-        }
-        // Initialize children array if it doesn't exist
-        if (!targetNode.children) {
-            targetNode.children = [];
-        }
-        // Remove from source
+        // Initialize children array and perform transfer
+        targetNode.children ??= [];
         sourceArray.splice(event.previousIndex, 1);
-        // Add as first child of target node
         targetNode.children.unshift(movedNode);
-        // Auto-expand the target node to show the new child
         targetNode.expanded = true;
-        // Emit drop event
-        this.nodeDrop.emit({
-            component: this,
-            node: movedNode,
-            previousParent: this.findParentByListId(sourceListId),
-            currentParent: targetNode,
-            previousIndex: event.previousIndex,
-            currentIndex: 0,
-        });
-        // Update the signal to trigger change detection
+        // Emit events
+        this.emitDropEvents(movedNode, this.findParentByListId(sourceListId), targetNode, event.previousIndex, 0, false);
         this.nodes.set([...this.nodes()]);
     }
     /**
      * Get array reference by drop list ID
      */
     getArrayByListId(listId) {
-        if (listId === 'ax-tree-root-list') {
+        if (listId === this.ROOT_LIST_ID) {
             return this.nodes();
         }
-        // Handle node drop zones (dropping onto a node)
-        if (listId.startsWith('ax-tree-node-drop-')) {
-            const nodeId = listId.replace('ax-tree-node-drop-', '');
+        if (listId.startsWith(this.NODE_DROP_PREFIX)) {
+            const nodeId = listId.replace(this.NODE_DROP_PREFIX, '');
             const node = this.findNodeById(this.nodes(), nodeId);
             return node ? [node] : null;
         }
-        // Handle children list drop zones
-        const nodeId = listId.replace('ax-tree-list-', '');
+        const nodeId = listId.replace(this.LIST_PREFIX, '');
         const node = this.findNodeById(this.nodes(), nodeId);
-        return node?.children || null;
+        return node?.children ?? null;
     }
     /**
      * Find parent node by list ID
      */
     findParentByListId(listId) {
-        if (listId === 'ax-tree-root-list') {
+        if (listId === this.ROOT_LIST_ID) {
             return undefined;
         }
-        // Handle node drop zones
-        if (listId.startsWith('ax-tree-node-drop-')) {
-            const nodeId = listId.replace('ax-tree-node-drop-', '');
-            return this.findNodeById(this.nodes(), nodeId) || undefined;
-        }
-        // Handle children list drop zones
-        const nodeId = listId.replace('ax-tree-list-', '');
-        return this.findNodeById(this.nodes(), nodeId) || undefined;
+        const prefix = listId.startsWith(this.NODE_DROP_PREFIX) ? this.NODE_DROP_PREFIX : this.LIST_PREFIX;
+        const nodeId = listId.replace(prefix, '');
+        return this.findNodeById(this.nodes(), nodeId) ?? undefined;
     }
     /**
      * Find a node by ID in the tree
@@ -400,7 +337,7 @@ class AXTree2Component {
      * Generate unique list ID for each node
      */
     getListId(node) {
-        return node ? `ax-tree-list-${node.id}` : 'ax-tree-root-list';
+        return node ? `${this.LIST_PREFIX}${node.id}` : this.ROOT_LIST_ID;
     }
     /**
      * Expand all nodes in the tree (with lazy loading support)
@@ -421,8 +358,8 @@ class AXTree2Component {
      */
     async setExpandedState(nodes, expanded) {
         for (const node of nodes) {
-            const hasChildren = node.children && node.children.length > 0;
-            const canLazyLoad = this.enableLazyLoad() && node.childrenCount && node.childrenCount > 0 && !hasChildren;
+            const hasChildren = this.hasChildren(node);
+            const canLazyLoad = this.canLazyLoad(node);
             if (hasChildren || canLazyLoad) {
                 if (expanded && canLazyLoad) {
                     await this.loadNodeChildren(node);
@@ -440,6 +377,12 @@ class AXTree2Component {
     getSelectedCount() {
         return this.countSelected(this.nodes());
     }
+    /**
+     * Check if any nodes are selected
+     */
+    hasSelection() {
+        return this.getSelectedCount() > 0;
+    }
     /**
      * Recursively count selected nodes
      */
@@ -483,6 +426,44 @@ class AXTree2Component {
         this.updateAllParentStates(this.nodes());
         this.nodes.set([...this.nodes()]);
     }
+    /**
+     * Select all nodes in the tree
+     */
+    selectAll() {
+        this.setAllSelection(this.nodes(), true);
+        this.nodes.set([...this.nodes()]);
+    }
+    /**
+     * Deselect all nodes in the tree
+     */
+    deselectAll() {
+        this.setAllSelection(this.nodes(), false);
+        this.nodes.set([...this.nodes()]);
+    }
+    /**
+     * Find a node by ID in the tree
+     */
+    findNode(id) {
+        return this.findNodeById(this.nodes(), id);
+    }
+    /**
+     * Refresh the tree to trigger change detection
+     */
+    refresh() {
+        this.nodes.set([...this.nodes()]);
+    }
+    /**
+     * Recursively set selection state for all nodes
+     */
+    setAllSelection(nodes, selected) {
+        nodes.forEach((node) => {
+            node.selected = selected;
+            node.indeterminate = false;
+            if (node.children) {
+                this.setAllSelection(node.children, selected);
+            }
+        });
+    }
     /**
      * Recursively remove selected nodes
      */
@@ -546,12 +527,124 @@ class AXTree2Component {
      * Check if node should show expand toggle
      */
     shouldShowExpandToggle(node) {
-        return ((node.children && node.children.length > 0) ||
-            (this.enableLazyLoad() && node.childrenCount && node.childrenCount > 0) ||
-            false);
+        return this.hasChildren(node) || this.canLazyLoad(node);
+    }
+    // Helper methods for improved code reusability
+    /**
+     * Check if node has children
+     */
+    hasChildren(node) {
+        return Boolean(node.children?.length);
+    }
+    /**
+     * Check if node can be lazy loaded
+     */
+    canLazyLoad(node) {
+        return this.enableLazyLoad() && Boolean(node.childrenCount && node.childrenCount > 0 && !this.hasChildren(node));
+    }
+    /**
+     * Check if move operation is allowed based on dragOperationType
+     */
+    canMoveToParent() {
+        if (this.dragOperationType() === 'order-only') {
+            console.warn('Moving between parents is disabled when dragOperationType is "order-only"');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Check if reorder operation is allowed based on dragOperationType
+     */
+    canReorder() {
+        if (this.dragOperationType() === 'move') {
+            console.warn('Reordering is disabled when dragOperationType is "move"');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Validate if drop target is valid (prevent circular references)
+     */
+    isValidDropTarget(movedNode, targetNode) {
+        if (movedNode.id === targetNode.id || this.isNodeDescendantOf(targetNode, movedNode)) {
+            console.warn('Cannot drop a node onto itself or its descendants');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Handle reordering within the same list
+     */
+    handleReorder(event, targetArray, parentNode) {
+        if (!this.canReorder())
+            return;
+        const movedNode = targetArray[event.previousIndex];
+        moveItemInArray(targetArray, event.previousIndex, event.currentIndex);
+        this.emitDropEvents(movedNode, parentNode, parentNode, event.previousIndex, event.currentIndex, true);
+    }
+    /**
+     * Handle moving between different lists
+     */
+    handleMove(event, targetArray, parentNode) {
+        if (!this.canMoveToParent())
+            return;
+        const sourceListId = event.previousContainer.element.id;
+        const sourceArray = this.getArrayByListId(sourceListId);
+        if (!sourceArray)
+            return;
+        const movedNode = sourceArray[event.previousIndex];
+        // Prevent circular references
+        if (parentNode && !this.isValidDropTarget(movedNode, parentNode))
+            return;
+        // Check if user wants to cancel
+        if (!this.emitBeforeDropEvent(movedNode, sourceListId, parentNode, event.previousIndex, event.currentIndex)) {
+            return;
+        }
+        transferArrayItem(sourceArray, targetArray, event.previousIndex, event.currentIndex);
+        this.emitDropEvents(movedNode, this.findParentByListId(sourceListId), parentNode, event.previousIndex, event.currentIndex, false);
+    }
+    /**
+     * Emit beforeDrop event and return whether to continue
+     */
+    emitBeforeDropEvent(movedNode, sourceListId, currentParent, previousIndex, currentIndex) {
+        const beforeDropEvent = {
+            component: this,
+            movedNode,
+            previousParent: this.findParentByListId(sourceListId),
+            currentParent,
+            previousIndex,
+            currentIndex,
+            canceled: false,
+        };
+        this.onBeforeDrop.emit(beforeDropEvent);
+        if (beforeDropEvent.canceled) {
+            console.warn('Drop canceled by user in onBeforeDrop event');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Emit drop events based on operation type
+     */
+    emitDropEvents(node, previousParent, currentParent, previousIndex, currentIndex, isReorder) {
+        const dropEvent = {
+            component: this,
+            node,
+            previousParent,
+            currentParent,
+            previousIndex,
+            currentIndex,
+        };
+        if (isReorder) {
+            this.onOrderChange.emit(dropEvent);
+        }
+        else {
+            this.onMoveChange.emit(dropEvent);
+        }
+        this.onItemsChange.emit(dropEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXTree2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: AXTree2Component, isStandalone: true, selector: "ax-tree2", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", 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 }, animated: { classPropertyName: "animated", publicName: "animated", 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 }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, enableLazyLoad: { classPropertyName: "enableLazyLoad", publicName: "enableLazyLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", onBeforeDrop: "onBeforeDrop", nodeToggle: "nodeToggle", nodeSelect: "nodeSelect", nodeDrop: "nodeDrop" }, host: { properties: { "class.ax-tree2-default": "look() === 'default'", "class.ax-tree2-card": "look() === 'card'", "class.ax-tree2-with-line": "look() === 'with-line'", "style.--ax-tree-indent-size": "indentSize() + 'px'", "style.--ax-tree-line-offset": "(indentSize() / 2) + 'px'" }, classAttribute: "ax-tree2" }, ngImport: i0, template: "<!-- Root drop list -->\n<div\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree2-drop-list\"\n  [class.ax-tree2-animated]=\"animated()\"\n  [class.ax-tree2-card]=\"look() === 'card'\"\n  [class.ax-tree2-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree2-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree2-comfortable]=\"nodeHeight() === 'comfortable'\"\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-tree2-node\"\n        [class.ax-tree2-node-selected]=\"node.selected\"\n        [class.ax-tree2-node-disabled]=\"node.disabled\"\n        [class.ax-tree2-node-loading]=\"node.loading\"\n      >\n        <div\n          class=\"ax-tree2-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree2-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree2-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-tree2-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree2-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n            }\n            <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree2-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-tree2-children\">\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-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree2-drop-list\"\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-tree2-node\"\n          [class.ax-tree2-node-selected]=\"node.selected\"\n          [class.ax-tree2-node-disabled]=\"node.disabled\"\n          [class.ax-tree2-node-loading]=\"node.loading\"\n        >\n          <div\n            class=\"ax-tree2-node-content\"\n            [style.padding-left.px]=\"(level * indentSize()) / (look() === 'with-line' ? 3 : 1)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree2-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree2-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-tree2-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree2-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n              }\n              <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree2-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-tree2-children\">\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-tree2{display:block;width:100%;--ax-comp-tree2-indent-size: 12px;--ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree2-node-border-radius: 6px;--ax-comp-tree2-node-margin: .125rem;--ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree2-drag-preview-opacity: .9;--ax-comp-tree2-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree2-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree2-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree2-drop-list{min-height:2rem}.ax-tree2-compact .ax-tree2-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree2-comfortable .ax-tree2-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree2-node{position:relative;margin:var(--ax-comp-tree2-node-margin) 0;border-radius:var(--ax-comp-tree2-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree2-node:hover:not(.ax-dragging){background:var(--ax-comp-tree2-node-hover-bg)}.ax-tree2-node.ax-tree2-node-selected{background:var(--ax-comp-tree2-node-selected-bg);border-color:currentColor}.ax-tree2-node.ax-dragging{opacity:var(--ax-comp-tree2-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree2-node.ax-drag-placeholder{background:var(--ax-comp-tree2-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree2-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-tree2-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree2-drop-active-bg);border-radius:var(--ax-comp-tree2-node-border-radius);outline:2px dashed var(--ax-comp-tree2-drop-active-outline);outline-offset:-2px}.ax-tree2-node-content{display:flex;align-items:center;gap:.25rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-tree2-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree2-drag-handle:hover{opacity:1}.ax-tree2-drag-handle:active{cursor:grabbing}.ax-tree2-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree2-expand-toggle:not(.ax-tree2-has-children){opacity:0;pointer-events:none}.ax-tree2-toggle-icon{font-size:.75rem}.ax-tree2-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree2-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree2-children{padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree2-node-loading{opacity:.7}.ax-tree2-card .ax-tree2-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree2-card .ax-tree2-node-content{padding:1rem}.ax-tree2-with-lines .ax-tree2-children{position:relative;padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines .ax-tree2-children:before{content:\"\";position:absolute;left:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines .ax-tree2-node{position:relative}.ax-tree2-with-lines .ax-tree2-node:before{content:\"\";position:absolute;left:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)));top:60%;width:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));height:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines>.ax-tree2-drop-list>.ax-tree2-node:before,.ax-tree2-with-lines>.ax-tree2-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.6", type: AXTree2Component, isStandalone: true, selector: "ax-tree2", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", 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 }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, enableLazyLoad: { classPropertyName: "enableLazyLoad", publicName: "enableLazyLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { properties: { "class.ax-tree2-default": "look() === 'default'", "class.ax-tree2-card": "look() === 'card'", "class.ax-tree2-with-line": "look() === 'with-line'", "style.--ax-tree-indent-size": "indentSize() + 'px'", "style.--ax-tree-line-offset": "(indentSize() / 2) + 'px'" }, classAttribute: "ax-tree2" }, ngImport: i0, template: "<!-- Root drop list -->\n<div\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree2-drop-list\"\n  [class.ax-tree2-card]=\"look() === 'card'\"\n  [class.ax-tree2-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree2-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree2-comfortable]=\"nodeHeight() === 'comfortable'\"\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-tree2-node\"\n        [class.ax-tree2-node-selected]=\"node.selected\"\n        [class.ax-tree2-node-disabled]=\"node.disabled\"\n        [class.ax-tree2-node-loading]=\"node.loading\"\n      >\n        <div\n          class=\"ax-tree2-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree2-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree2-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-tree2-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree2-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n            }\n            <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree2-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-tree2-children\">\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-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree2-drop-list\"\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-tree2-node\"\n          [class.ax-tree2-node-selected]=\"node.selected\"\n          [class.ax-tree2-node-disabled]=\"node.disabled\"\n          [class.ax-tree2-node-loading]=\"node.loading\"\n        >\n          <div\n            class=\"ax-tree2-node-content\"\n            [style.padding-left.px]=\"(level * indentSize()) / (look() === 'with-line' ? 3 : 1)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree2-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree2-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-tree2-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree2-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n              }\n              <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree2-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-tree2-children\">\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-tree2{display:block;width:100%;--ax-comp-tree2-indent-size: 12px;--ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree2-node-border-radius: 6px;--ax-comp-tree2-node-margin: .25rem;--ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree2-drag-preview-opacity: .9;--ax-comp-tree2-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree2-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree2-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree2-drop-list{min-height:2rem}.ax-tree2-compact .ax-tree2-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree2-comfortable .ax-tree2-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree2-node{position:relative;margin:var(--ax-comp-tree2-node-margin) 0;border-radius:var(--ax-comp-tree2-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree2-node:hover:not(.ax-dragging){background:var(--ax-comp-tree2-node-hover-bg)}.ax-tree2-node.ax-tree2-node-selected{background:var(--ax-comp-tree2-node-selected-bg);border-color:currentColor}.ax-tree2-node.ax-dragging{opacity:var(--ax-comp-tree2-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree2-node.ax-drag-placeholder{background:var(--ax-comp-tree2-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree2-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-tree2-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree2-drop-active-bg);border-radius:var(--ax-comp-tree2-node-border-radius);outline:2px dashed var(--ax-comp-tree2-drop-active-outline);outline-offset:-2px}.ax-tree2-node-content{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-tree2-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree2-drag-handle:hover{opacity:1}.ax-tree2-drag-handle:active{cursor:grabbing}.ax-tree2-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree2-expand-toggle:not(.ax-tree2-has-children){opacity:0;pointer-events:none}.ax-tree2-toggle-icon{font-size:.75rem}.ax-tree2-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree2-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree2-children{padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree2-node-loading{opacity:.7}.ax-tree2-card .ax-tree2-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree2-card .ax-tree2-node-content{padding:1rem}.ax-tree2-with-lines .ax-tree2-children{position:relative;padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines .ax-tree2-children:before{content:\"\";position:absolute;left:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines .ax-tree2-node{position:relative}.ax-tree2-with-lines .ax-tree2-node:before{content:\"\";position:absolute;left:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)));top:60%;width:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));height:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines>.ax-tree2-drop-list>.ax-tree2-node:before,.ax-tree2-with-lines>.ax-tree2-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXTree2Component, decorators: [{
             type: Component,
@@ -573,18 +666,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         '[class.ax-tree2-with-line]': "look() === 'with-line'",
                         '[style.--ax-tree-indent-size]': "indentSize() + 'px'",
                         '[style.--ax-tree-line-offset]': "(indentSize() / 2) + 'px'",
-                    }, template: "<!-- Root drop list -->\n<div\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree2-drop-list\"\n  [class.ax-tree2-animated]=\"animated()\"\n  [class.ax-tree2-card]=\"look() === 'card'\"\n  [class.ax-tree2-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree2-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree2-comfortable]=\"nodeHeight() === 'comfortable'\"\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-tree2-node\"\n        [class.ax-tree2-node-selected]=\"node.selected\"\n        [class.ax-tree2-node-disabled]=\"node.disabled\"\n        [class.ax-tree2-node-loading]=\"node.loading\"\n      >\n        <div\n          class=\"ax-tree2-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree2-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree2-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-tree2-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree2-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n            }\n            <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree2-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-tree2-children\">\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-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree2-drop-list\"\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-tree2-node\"\n          [class.ax-tree2-node-selected]=\"node.selected\"\n          [class.ax-tree2-node-disabled]=\"node.disabled\"\n          [class.ax-tree2-node-loading]=\"node.loading\"\n        >\n          <div\n            class=\"ax-tree2-node-content\"\n            [style.padding-left.px]=\"(level * indentSize()) / (look() === 'with-line' ? 3 : 1)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree2-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree2-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-tree2-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree2-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n              }\n              <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree2-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-tree2-children\">\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-tree2{display:block;width:100%;--ax-comp-tree2-indent-size: 12px;--ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree2-node-border-radius: 6px;--ax-comp-tree2-node-margin: .125rem;--ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree2-drag-preview-opacity: .9;--ax-comp-tree2-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree2-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree2-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree2-drop-list{min-height:2rem}.ax-tree2-compact .ax-tree2-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree2-comfortable .ax-tree2-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree2-node{position:relative;margin:var(--ax-comp-tree2-node-margin) 0;border-radius:var(--ax-comp-tree2-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree2-node:hover:not(.ax-dragging){background:var(--ax-comp-tree2-node-hover-bg)}.ax-tree2-node.ax-tree2-node-selected{background:var(--ax-comp-tree2-node-selected-bg);border-color:currentColor}.ax-tree2-node.ax-dragging{opacity:var(--ax-comp-tree2-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree2-node.ax-drag-placeholder{background:var(--ax-comp-tree2-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree2-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-tree2-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree2-drop-active-bg);border-radius:var(--ax-comp-tree2-node-border-radius);outline:2px dashed var(--ax-comp-tree2-drop-active-outline);outline-offset:-2px}.ax-tree2-node-content{display:flex;align-items:center;gap:.25rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-tree2-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree2-drag-handle:hover{opacity:1}.ax-tree2-drag-handle:active{cursor:grabbing}.ax-tree2-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree2-expand-toggle:not(.ax-tree2-has-children){opacity:0;pointer-events:none}.ax-tree2-toggle-icon{font-size:.75rem}.ax-tree2-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree2-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree2-children{padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree2-node-loading{opacity:.7}.ax-tree2-card .ax-tree2-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree2-card .ax-tree2-node-content{padding:1rem}.ax-tree2-with-lines .ax-tree2-children{position:relative;padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines .ax-tree2-children:before{content:\"\";position:absolute;left:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines .ax-tree2-node{position:relative}.ax-tree2-with-lines .ax-tree2-node:before{content:\"\";position:absolute;left:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)));top:60%;width:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));height:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines>.ax-tree2-drop-list>.ax-tree2-node:before,.ax-tree2-with-lines>.ax-tree2-node:before{display:none}\n"] }]
-        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }, { type: i0.Output, args: ["nodesChange"] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", 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 }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], enableLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLazyLoad", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }] } });
+                    }, template: "<!-- Root drop list -->\n<div\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree2-drop-list\"\n  [class.ax-tree2-card]=\"look() === 'card'\"\n  [class.ax-tree2-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree2-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree2-comfortable]=\"nodeHeight() === 'comfortable'\"\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-tree2-node\"\n        [class.ax-tree2-node-selected]=\"node.selected\"\n        [class.ax-tree2-node-disabled]=\"node.disabled\"\n        [class.ax-tree2-node-loading]=\"node.loading\"\n      >\n        <div\n          class=\"ax-tree2-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree2-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree2-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-tree2-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree2-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n            }\n            <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree2-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-tree2-children\">\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-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree2-drop-list\"\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-tree2-node\"\n          [class.ax-tree2-node-selected]=\"node.selected\"\n          [class.ax-tree2-node-disabled]=\"node.disabled\"\n          [class.ax-tree2-node-loading]=\"node.loading\"\n        >\n          <div\n            class=\"ax-tree2-node-content\"\n            [style.padding-left.px]=\"(level * indentSize()) / (look() === 'with-line' ? 3 : 1)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree2-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree2-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-tree2-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></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 (showCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree2-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n              }\n              <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree2-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-tree2-children\">\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-tree2{display:block;width:100%;--ax-comp-tree2-indent-size: 12px;--ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree2-node-border-radius: 6px;--ax-comp-tree2-node-margin: .25rem;--ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree2-drag-preview-opacity: .9;--ax-comp-tree2-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree2-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree2-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree2-drop-list{min-height:2rem}.ax-tree2-compact .ax-tree2-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree2-comfortable .ax-tree2-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree2-node{position:relative;margin:var(--ax-comp-tree2-node-margin) 0;border-radius:var(--ax-comp-tree2-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree2-node:hover:not(.ax-dragging){background:var(--ax-comp-tree2-node-hover-bg)}.ax-tree2-node.ax-tree2-node-selected{background:var(--ax-comp-tree2-node-selected-bg);border-color:currentColor}.ax-tree2-node.ax-dragging{opacity:var(--ax-comp-tree2-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree2-node.ax-drag-placeholder{background:var(--ax-comp-tree2-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree2-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-tree2-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree2-drop-active-bg);border-radius:var(--ax-comp-tree2-node-border-radius);outline:2px dashed var(--ax-comp-tree2-drop-active-outline);outline-offset:-2px}.ax-tree2-node-content{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-tree2-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree2-drag-handle:hover{opacity:1}.ax-tree2-drag-handle:active{cursor:grabbing}.ax-tree2-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree2-expand-toggle:not(.ax-tree2-has-children){opacity:0;pointer-events:none}.ax-tree2-toggle-icon{font-size:.75rem}.ax-tree2-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree2-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree2-children{padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree2-node-loading{opacity:.7}.ax-tree2-card .ax-tree2-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree2-card .ax-tree2-node-content{padding:1rem}.ax-tree2-with-lines .ax-tree2-children{position:relative;padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines .ax-tree2-children:before{content:\"\";position:absolute;left:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines .ax-tree2-node{position:relative}.ax-tree2-with-lines .ax-tree2-node:before{content:\"\";position:absolute;left:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)));top:60%;width:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));height:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines>.ax-tree2-drop-list>.ax-tree2-node:before,.ax-tree2-with-lines>.ax-tree2-node:before{display:none}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }, { type: i0.Output, args: ["nodesChange"] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", 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 }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], enableLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLazyLoad", 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 Tree2Module {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tree2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: Tree2Module, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tree2Module, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tree2Module, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [AXTree2Component],
                 }]
         }] });