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.9", ngImport: i0, type: AXTree2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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.9", 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.9", ngImport: i0, type: Tree2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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
