@acorex/components 20.2.23 → 20.2.27

package/fesm2022/acorex-components-tree2.mjs

@@ -0,0 +1,689 @@
+import { moveItemInArray, transferArrayItem, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
+import { AXBadgeComponent } from '@acorex/components/badge';
+import { AXButtonComponent } from '@acorex/components/button';
+import { AXCheckBoxComponent } from '@acorex/components/check-box';
+import { AXDecoratorIconComponent } from '@acorex/components/decorators';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { model, input, output, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+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" }] : []));
+        /** Custom icon for expanded nodes */
+        this.expandedIcon = input('fa-solid fa-chevron-down', ...(ngDevMode ? [{ debugName: "expandedIcon" }] : []));
+        /** Custom icon for collapsed nodes */
+        this.collapsedIcon = input('fa-solid fa-chevron-right', ...(ngDevMode ? [{ debugName: "collapsedIcon" }] : []));
+        /** Indent size in pixels for each level */
+        this.indentSize = input(12, ...(ngDevMode ? [{ debugName: "indentSize" }] : []));
+        /** Node height in pixels */
+        this.nodeHeight = input('normal', ...(ngDevMode ? [{ debugName: "nodeHeight" }] : []));
+        /** Visual style variant */
+        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        /** Custom template for tree items */
+        this.itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : []));
+        /** Lazy load function for fetching children */
+        this.lazyLoad = input(...(ngDevMode ? [undefined, { debugName: "lazyLoad" }] : []));
+        /** Whether to enable lazy loading */
+        this.enableLazyLoad = input(false, ...(ngDevMode ? [{ debugName: "enableLazyLoad" }] : []));
+        /** Emitted before a drop operation - set canceled to true to prevent drop */
+        this.onBeforeDrop = output();
+        /** Emitted when a node is toggled (expanded/collapsed) */
+        this.onNodeToggle = output();
+        /** Emitted when a node is selected/deselected */
+        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 */
+        this.#lazyLoadEffect = effect(() => {
+            const lazyLoadFn = this.lazyLoad();
+            const enabled = this.enableLazyLoad();
+            if (lazyLoadFn && enabled) {
+                // Initialize lazy loading state
+                this.updateHasChildrenFlags(this.nodes());
+            }
+        }, ...(ngDevMode ? [{ debugName: "#lazyLoadEffect" }] : []));
+    }
+    /** Effect to handle lazy load function changes */
+    #lazyLoadEffect;
+    /**
+     * Toggle node expansion state with lazy loading support
+     */
+    async toggleNode(node, event) {
+        if (node.disabled)
+            return;
+        const hasChildren = this.hasChildren(node);
+        const canLazyLoad = this.canLazyLoad(node);
+        if (hasChildren || canLazyLoad) {
+            const willExpand = !node.expanded;
+            if (willExpand && canLazyLoad) {
+                // Lazy load children before expanding
+                await this.loadNodeChildren(node);
+            }
+            node.expanded = willExpand;
+            this.nodes.set([...this.nodes()]);
+            this.onNodeToggle.emit({ component: this, node, nativeEvent: event });
+        }
+    }
+    /**
+     * Load children for a node using lazy loading
+     */
+    async loadNodeChildren(node) {
+        const lazyLoadFn = this.lazyLoad();
+        if (!lazyLoadFn || node.loading)
+            return;
+        try {
+            node.loading = true;
+            this.loadingNodes.update((set) => new Set(set).add(node.id));
+            this.nodes.set([...this.nodes()]);
+            const children = await lazyLoadFn(node);
+            node.children = children;
+            node.childrenCount = children.length;
+        }
+        catch (error) {
+            console.error('Failed to load children:', error);
+            node.childrenCount = 0;
+        }
+        finally {
+            node.loading = false;
+            this.loadingNodes.update((set) => {
+                const newSet = new Set(set);
+                newSet.delete(node.id);
+                return newSet;
+            });
+            this.nodes.set([...this.nodes()]);
+        }
+    }
+    /**
+     * Update childrenCount flags for lazy loading
+     */
+    updateHasChildrenFlags(nodes) {
+        nodes.forEach((node) => {
+            if (node.childrenCount === undefined && !node.children) {
+                node.childrenCount = 0;
+            }
+            if (node.children) {
+                this.updateHasChildrenFlags(node.children);
+            }
+        });
+    }
+    /**
+     * Toggle node selection state with indeterminate support
+     */
+    toggleSelection(node, event) {
+        // CRITICAL: Only process if this is a real user interaction
+        // Prevents cascade when parent state changes trigger checkbox ngModelChange
+        if (!event.isUserInteraction) {
+            return;
+        }
+        // Handle null value (indeterminate state clicked) - treat as select
+        const newValue = event.value === null ? true : event.value;
+        node.selected = newValue;
+        node.indeterminate = false; // Clear indeterminate when explicitly toggled
+        // Select/deselect all children recursively
+        if (node.children) {
+            this.selectAllChildren(node.children, newValue);
+        }
+        // Update parent states up the tree
+        this.updateParentStates(this.nodes(), node);
+        this.nodes.set([...this.nodes()]);
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            isUserInteraction: event.isUserInteraction,
+        });
+    }
+    /**
+     * Recursively select/deselect all children
+     */
+    selectAllChildren(children, selected) {
+        children.forEach((child) => {
+            child.selected = selected;
+            child.indeterminate = false;
+            if (child.children) {
+                this.selectAllChildren(child.children, selected);
+            }
+        });
+    }
+    /**
+     * Update parent node states based on children selection
+     */
+    updateParentStates(nodes, changedNode) {
+        const parent = this.findParentNode(nodes, changedNode);
+        if (!parent || !parent.children)
+            return;
+        const { allSelected, someSelected } = this.getChildrenSelectionState(parent.children);
+        if (allSelected) {
+            // All children selected → parent is selected
+            parent.selected = true;
+            parent.indeterminate = false;
+        }
+        else if (someSelected) {
+            // Some children selected → parent is indeterminate
+            // Keep selected=true to maintain consistent state and prevent issues with deleteSelected()
+            parent.selected = true;
+            parent.indeterminate = true;
+        }
+        else {
+            // No children selected → parent is unselected
+            parent.selected = false;
+            parent.indeterminate = false;
+        }
+        // Recursively update grandparents
+        this.updateParentStates(nodes, parent);
+    }
+    /**
+     * Get selection state of children
+     */
+    getChildrenSelectionState(children) {
+        let selectedCount = 0;
+        let indeterminateCount = 0;
+        children.forEach((child) => {
+            // Only count fully selected children (not indeterminate)
+            if (child.selected && !child.indeterminate)
+                selectedCount++;
+            if (child.indeterminate)
+                indeterminateCount++;
+        });
+        const allSelected = selectedCount === children.length;
+        const someSelected = selectedCount > 0 || indeterminateCount > 0;
+        return { allSelected, someSelected };
+    }
+    /**
+     * Find parent node of a given node
+     */
+    findParentNode(nodes, targetNode) {
+        for (const node of nodes) {
+            if (node.children?.some((child) => child.id === targetNode.id)) {
+                return node;
+            }
+            if (node.children) {
+                const found = this.findParentNode(node.children, targetNode);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Handle drop events for tree nodes
+     */
+    onDrop(event, parentNode) {
+        const targetArray = parentNode?.children ?? this.nodes();
+        const isReordering = event.previousContainer === event.container;
+        if (isReordering) {
+            this.handleReorder(event, targetArray, parentNode);
+        }
+        else {
+            this.handleMove(event, targetArray, parentNode);
+        }
+        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];
+        if (!this.isValidDropTarget(movedNode, targetNode))
+            return;
+        if (!this.emitBeforeDropEvent(movedNode, sourceListId, targetNode, event.previousIndex, 0))
+            return;
+        // Initialize children array and perform transfer
+        targetNode.children ??= [];
+        sourceArray.splice(event.previousIndex, 1);
+        targetNode.children.unshift(movedNode);
+        targetNode.expanded = true;
+        // 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 === this.ROOT_LIST_ID) {
+            return this.nodes();
+        }
+        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;
+        }
+        const nodeId = listId.replace(this.LIST_PREFIX, '');
+        const node = this.findNodeById(this.nodes(), nodeId);
+        return node?.children ?? null;
+    }
+    /**
+     * Find parent node by list ID
+     */
+    findParentByListId(listId) {
+        if (listId === this.ROOT_LIST_ID) {
+            return 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
+     */
+    findNodeById(nodes, id) {
+        for (const node of nodes) {
+            if (node.id === id)
+                return node;
+            if (node.children) {
+                const found = this.findNodeById(node.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    /**
+     * Check if targetNode is a descendant of ancestorNode (or the same node)
+     * Prevents circular references by checking if target exists in ancestor's children tree
+     */
+    isNodeDescendantOf(targetNode, ancestorNode) {
+        // First check: prevent dropping a node into itself
+        if (targetNode.id === ancestorNode.id) {
+            return true;
+        }
+        if (!ancestorNode.children || ancestorNode.children.length === 0) {
+            return false;
+        }
+        for (const child of ancestorNode.children) {
+            // Direct child match
+            if (child.id === targetNode.id) {
+                return true;
+            }
+            // Recursive check in deeper levels
+            if (this.isNodeDescendantOf(targetNode, child)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Generate unique list ID for each node
+     */
+    getListId(node) {
+        return node ? `${this.LIST_PREFIX}${node.id}` : this.ROOT_LIST_ID;
+    }
+    /**
+     * Expand all nodes in the tree (with lazy loading support)
+     */
+    async expandAll() {
+        await this.setExpandedState(this.nodes(), true);
+        this.nodes.set([...this.nodes()]);
+    }
+    /**
+     * Collapse all nodes in the tree
+     */
+    collapseAll() {
+        this.setExpandedState(this.nodes(), false);
+        this.nodes.set([...this.nodes()]);
+    }
+    /**
+     * Recursively set expanded state (with lazy loading)
+     */
+    async setExpandedState(nodes, expanded) {
+        for (const node of nodes) {
+            const hasChildren = this.hasChildren(node);
+            const canLazyLoad = this.canLazyLoad(node);
+            if (hasChildren || canLazyLoad) {
+                if (expanded && canLazyLoad) {
+                    await this.loadNodeChildren(node);
+                }
+                node.expanded = expanded;
+                if (node.children) {
+                    await this.setExpandedState(node.children, expanded);
+                }
+            }
+        }
+    }
+    /**
+     * Get count of selected nodes
+     */
+    getSelectedCount() {
+        return this.countSelected(this.nodes());
+    }
+    /**
+     * Check if any nodes are selected
+     */
+    hasSelection() {
+        return this.getSelectedCount() > 0;
+    }
+    /**
+     * Recursively count selected nodes
+     */
+    countSelected(nodes) {
+        let count = 0;
+        nodes.forEach((node) => {
+            if (node.selected)
+                count++;
+            if (node.children) {
+                count += this.countSelected(node.children);
+            }
+        });
+        return count;
+    }
+    /**
+     * Get all selected nodes
+     */
+    getSelectedNodes() {
+        const selected = [];
+        this.collectSelected(this.nodes(), selected);
+        return selected;
+    }
+    /**
+     * Recursively collect selected nodes
+     */
+    collectSelected(nodes, result) {
+        nodes.forEach((node) => {
+            if (node.selected)
+                result.push(node);
+            if (node.children) {
+                this.collectSelected(node.children, result);
+            }
+        });
+    }
+    /**
+     * Delete selected nodes from the tree
+     */
+    deleteSelected() {
+        this.removeSelected(this.nodes());
+        // Update all parent states after deletion to clear stale indeterminate states
+        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
+     */
+    removeSelected(nodes) {
+        for (let i = nodes.length - 1; i >= 0; i--) {
+            // Only delete nodes that are fully selected (not indeterminate)
+            // Indeterminate parents should not be deleted
+            if (nodes[i].selected && !nodes[i].indeterminate) {
+                nodes.splice(i, 1);
+            }
+            else if (nodes[i].children) {
+                this.removeSelected(nodes[i].children ?? []);
+            }
+        }
+    }
+    /**
+     * Recursively update all parent states in the tree (used after deletion)
+     */
+    updateAllParentStates(nodes) {
+        nodes.forEach((node) => {
+            if (node.children && node.children.length > 0) {
+                // First, recursively update nested children (bottom-up)
+                this.updateAllParentStates(node.children);
+                // Then update this node's state based on its children
+                const { allSelected, someSelected } = this.getChildrenSelectionState(node.children);
+                if (allSelected) {
+                    node.selected = true;
+                    node.indeterminate = false;
+                }
+                else if (someSelected) {
+                    node.selected = true;
+                    node.indeterminate = true;
+                }
+                else {
+                    node.selected = false;
+                    node.indeterminate = false;
+                }
+            }
+        });
+    }
+    /**
+     * Check if a node is currently loading
+     */
+    isNodeLoading(nodeId) {
+        return this.loadingNodes().has(nodeId);
+    }
+    /**
+     * Get template context for a node
+     */
+    getTemplateContext(node, level = 0) {
+        return {
+            $implicit: node,
+            node,
+            level,
+            expanded: node.expanded ?? false,
+            childrenCount: node.childrenCount ?? node.children?.length ?? 0,
+            loading: node.loading ?? false,
+        };
+    }
+    /**
+     * Check if node should show expand toggle
+     */
+    shouldShowExpandToggle(node) {
+        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 }, 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,
+            args: [{ selector: 'ax-tree2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXDragDirective,
+                        AXDragHandleDirective,
+                        AXDropListDirective,
+                        NgTemplateOutlet,
+                        AXButtonComponent,
+                        AXCheckBoxComponent,
+                        AXBadgeComponent,
+                        AXDecoratorIconComponent,
+                    ], host: {
+                        class: 'ax-tree2',
+                        '[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'",
+                    }, 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: [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: [AXTree2Component],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXTree2Component, Tree2Module };
+//# sourceMappingURL=acorex-components-tree2.mjs.map