@acorex/components 21.0.0-next.37 → 21.0.0-next.39

package/fesm2022/acorex-components-tree2.mjs

@@ -1,730 +0,0 @@
-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 { AXPlatform } from '@acorex/core/platform';
-import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, model, input, signal, output, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { map } from 'rxjs/operators';
-
-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-';
-        /** Platform service for RTL detection */
-        this.platformService = inject(AXPlatform);
-        /** DestroyRef for cleanup */
-        this.destroyRef = inject(DestroyRef);
-        /** 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" }] : []));
-        /** RTL detection signal */
-        this.isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
-        /** 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" }] : []));
-        /** Computed chevron icons that flip for RTL */
-        this.directionExpandedIcon = computed(() => {
-            const direction = this.isRtl();
-            const defaultIcon = this.expandedIcon();
-            // For RTL, if using default chevron icons, flip them
-            if (direction && defaultIcon === 'fa-solid fa-chevron-down') {
-                return 'fa-solid fa-chevron-down'; // Down stays down
-            }
-            return defaultIcon;
-        }, ...(ngDevMode ? [{ debugName: "directionExpandedIcon" }] : []));
-        this.directionCollapsedIcon = computed(() => {
-            const direction = this.isRtl();
-            const defaultIcon = this.collapsedIcon();
-            // For RTL, flip chevron-right to chevron-left
-            if (direction && defaultIcon === 'fa-solid fa-chevron-right') {
-                return 'fa-solid fa-chevron-left';
-            }
-            // For LTR, flip chevron-left to chevron-right
-            if (!direction && defaultIcon === 'fa-solid fa-chevron-left') {
-                return 'fa-solid fa-chevron-right';
-            }
-            return defaultIcon;
-        }, ...(ngDevMode ? [{ debugName: "directionCollapsedIcon" }] : []));
-        /** 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" }] : []));
-        /** Initialize direction change listener */
-        this.#initDirectionListener = afterNextRender(() => {
-            this.platformService.directionChange
-                .pipe(map((event) => event.data === 'rtl'), takeUntilDestroyed(this.destroyRef))
-                .subscribe((isRtl) => this.isRtl.set(isRtl));
-        });
-    }
-    /** Effect to handle lazy load function changes */
-    #lazyLoadEffect;
-    /** Initialize direction change listener */
-    #initDirectionListener;
-    /**
-     * 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.12", ngImport: i0, type: AXTree2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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'", "class.ax-tree2-rtl": "isRtl", "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\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree2-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (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]=\"!isRtl() ? (level * indentSize()) / (look() === 'with-line' ? 3 : 1) : 0\"\n            [style.padding-right.px]=\"isRtl() ? (level * indentSize()) / (look() === 'with-line' ? 3 : 1) : 0\"\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\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree2-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (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-rtl .ax-tree2-children{padding-left:0;padding-right: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}.ax-tree2-with-lines.ax-tree2-rtl .ax-tree2-children,.ax-tree2-rtl .ax-tree2-with-lines .ax-tree2-children{padding-left:0;padding-right:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines.ax-tree2-rtl .ax-tree2-children:before,.ax-tree2-rtl .ax-tree2-with-lines .ax-tree2-children:before{left:auto;right:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2))}.ax-tree2-with-lines.ax-tree2-rtl .ax-tree2-node:before,.ax-tree2-rtl .ax-tree2-with-lines .ax-tree2-node:before{left:auto;right:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)))}\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.12", 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'",
-                        '[class.ax-tree2-rtl]': 'isRtl',
-                        '[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\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree2-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (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]=\"!isRtl() ? (level * indentSize()) / (look() === 'with-line' ? 3 : 1) : 0\"\n            [style.padding-right.px]=\"isRtl() ? (level * indentSize()) / (look() === 'with-line' ? 3 : 1) : 0\"\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\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree2-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (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-rtl .ax-tree2-children{padding-left:0;padding-right: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}.ax-tree2-with-lines.ax-tree2-rtl .ax-tree2-children,.ax-tree2-rtl .ax-tree2-with-lines .ax-tree2-children{padding-left:0;padding-right:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines.ax-tree2-rtl .ax-tree2-children:before,.ax-tree2-rtl .ax-tree2-with-lines .ax-tree2-children:before{left:auto;right:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2))}.ax-tree2-with-lines.ax-tree2-rtl .ax-tree2-node:before,.ax-tree2-rtl .ax-tree2-with-lines .ax-tree2-node:before{left:auto;right:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)))}\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.12", ngImport: i0, type: Tree2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", 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