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

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

@@ -4,7 +4,6 @@ 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 { AXTooltipDirective } from '@acorex/components/tooltip';
 import { AXPlatform } from '@acorex/core/platform';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet } from '@angular/common';
@@ -28,13 +27,12 @@ class AXTreeViewService {
     /**
      * Find a node by ID in the tree
      */
-    findNodeById(nodes, id, idField = 'id') {
+    findNodeById(nodes, id) {
         for (const node of nodes) {
-            if (node[idField] === id)
+            if (node.id === id)
                 return node;
-            const children = node['children'];
-            if (children) {
-                const found = this.findNodeById(children, id, idField);
+            if (node.children) {
+                const found = this.findNodeById(node.children, id);
                 if (found)
                     return found;
             }
@@ -44,15 +42,13 @@ class AXTreeViewService {
     /**
      * Find parent node of a given node
      */
-    findParentNode(nodes, targetNode, idField = 'id', childrenField = 'children') {
-        const targetId = targetNode[idField];
+    findParentNode(nodes, targetNode) {
         for (const node of nodes) {
-            const children = node[childrenField];
-            if (children?.some((child) => child[idField] === targetId)) {
+            if (node.children?.some((child) => child.id === targetNode.id)) {
                 return node;
             }
-            if (children) {
-                const found = this.findParentNode(children, targetNode, idField, childrenField);
+            if (node.children) {
+                const found = this.findParentNode(node.children, targetNode);
                 if (found)
                     return found;
             }
@@ -63,10 +59,8 @@ class AXTreeViewService {
      * 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
      */
-    isValidDropTarget(movedNode, targetNode, idField = 'id', childrenField = 'children') {
-        const movedId = movedNode[idField];
-        const targetId = targetNode[idField];
-        if (movedId === targetId || this.isNodeDescendantOf(targetNode, movedNode, idField, childrenField)) {
+    isValidDropTarget(movedNode, targetNode) {
+        if (movedNode.id === targetNode.id || this.isNodeDescendantOf(targetNode, movedNode)) {
             return false;
         }
         return true;
@@ -74,22 +68,18 @@ class AXTreeViewService {
     /**
      * Check if targetNode is a descendant of ancestorNode
      */
-    isNodeDescendantOf(targetNode, ancestorNode, idField = 'id', childrenField = 'children') {
-        const targetId = targetNode[idField];
-        const ancestorId = ancestorNode[idField];
-        if (targetId === ancestorId) {
+    isNodeDescendantOf(targetNode, ancestorNode) {
+        if (targetNode.id === ancestorNode.id) {
             return true;
         }
-        const children = ancestorNode[childrenField];
-        if (!children || children.length === 0) {
+        if (!ancestorNode.children || ancestorNode.children.length === 0) {
             return false;
         }
-        for (const child of children) {
-            const childId = child[idField];
-            if (childId === targetId) {
+        for (const child of ancestorNode.children) {
+            if (child.id === targetNode.id) {
                 return true;
             }
-            if (this.isNodeDescendantOf(targetNode, child, idField, childrenField)) {
+            if (this.isNodeDescendantOf(targetNode, child)) {
                 return true;
             }
         }
@@ -98,18 +88,14 @@ class AXTreeViewService {
     /**
      * Build a flat list of all visible focusable nodes
      */
-    buildFlatNodeList(nodes, hiddenField = 'hidden', disabledField = 'disabled', expandedField = 'expanded', childrenField = 'children') {
+    buildFlatNodeList(nodes) {
         const flatList = [];
         const traverse = (nodeList, level, parent) => {
             for (const node of nodeList) {
-                const hidden = node[hiddenField];
-                const disabled = node[disabledField];
-                if (hidden !== true && !disabled) {
+                if (node.visible !== false && !node.disabled) {
                     flatList.push({ node, level, parent });
-                    const expanded = node[expandedField];
-                    const children = node[childrenField];
-                    if (expanded && children) {
-                        traverse(children, level + 1, node);
+                    if (node.expanded && node.children) {
+                        traverse(node.children, level + 1, node);
                     }
                 }
             }
@@ -121,44 +107,39 @@ class AXTreeViewService {
     /**
      * Check if node has children
      */
-    hasChildren(node, childrenField = 'children') {
-        const children = node[childrenField];
-        return Boolean(children?.length);
+    hasChildren(node) {
+        return Boolean(node.children?.length);
     }
     /**
      * Check if node can be lazy loaded
      */
-    canLazyLoad(node, isLazyDataSource, childrenCountField = 'childrenCount', childrenField = 'children') {
-        const childrenCount = node[childrenCountField];
-        return isLazyDataSource && Boolean(childrenCount && childrenCount > 0 && !this.hasChildren(node, childrenField));
+    canLazyLoad(node, isLazyDataSource) {
+        return isLazyDataSource && Boolean(node.childrenCount && node.childrenCount > 0 && !this.hasChildren(node));
     }
     // ==================== Selection Management ====================
     /**
      * Recursively select/deselect all children
      */
-    selectAllChildren(children, selected, selectedField = 'selected', indeterminateField = 'indeterminate', childrenField = 'children') {
+    selectAllChildren(children, selected) {
         for (const child of children) {
-            child[selectedField] = selected;
-            child[indeterminateField] = false;
-            const childChildren = child[childrenField];
-            if (childChildren) {
-                this.selectAllChildren(childChildren, selected, selectedField, indeterminateField, childrenField);
+            child.selected = selected;
+            child.indeterminate = false;
+            if (child.children) {
+                this.selectAllChildren(child.children, selected);
             }
         }
     }
     /**
      * Get selection state of children
      */
-    getChildrenSelectionState(children, selectedField = 'selected', indeterminateField = 'indeterminate') {
+    getChildrenSelectionState(children) {
         let selectedCount = 0;
         let indeterminateCount = 0;
         for (const child of children) {
-            const selected = child[selectedField];
-            const indeterminate = child[indeterminateField];
-            if (selected && !indeterminate) {
+            if (child.selected && !child.indeterminate) {
                 selectedCount++;
             }
-            if (indeterminate) {
+            if (child.indeterminate) {
                 indeterminateCount++;
             }
         }
@@ -170,69 +151,65 @@ class AXTreeViewService {
     /**
      * Update parent node states based on children selection (with intermediate state support)
      */
-    updateParentStates(nodes, changedNode, intermediateState, idField = 'id', childrenField = 'children', selectedField = 'selected', indeterminateField = 'indeterminate') {
-        const parent = this.findParentNode(nodes, changedNode, idField, childrenField);
-        const parentChildren = parent?.[childrenField];
-        if (!parent || !parentChildren)
+    updateParentStates(nodes, changedNode, intermediateState) {
+        const parent = this.findParentNode(nodes, changedNode);
+        if (!parent || !parent.children)
             return;
-        const { allSelected, someSelected } = this.getChildrenSelectionState(parentChildren, selectedField, indeterminateField);
+        const { allSelected, someSelected } = this.getChildrenSelectionState(parent.children);
         if (allSelected) {
-            parent[selectedField] = true;
-            parent[indeterminateField] = false;
+            parent.selected = true;
+            parent.indeterminate = false;
         }
         else if (someSelected) {
             if (intermediateState) {
-                parent[selectedField] = true;
-                parent[indeterminateField] = true;
+                parent.selected = true;
+                parent.indeterminate = true;
             }
             else {
-                parent[selectedField] = false;
-                parent[indeterminateField] = false;
+                parent.selected = false;
+                parent.indeterminate = false;
             }
         }
         else {
-            parent[selectedField] = false;
-            parent[indeterminateField] = false;
+            parent.selected = false;
+            parent.indeterminate = false;
         }
-        this.updateParentStates(nodes, parent, intermediateState, idField, childrenField, selectedField, indeterminateField);
+        this.updateParentStates(nodes, parent, intermediateState);
     }
     /**
      * Recursively deselect all nodes
      */
-    deselectAllNodes(nodes, selectedField = 'selected', indeterminateField = 'indeterminate', childrenField = 'children') {
+    deselectAllNodes(nodes) {
         for (const node of nodes) {
-            node[selectedField] = false;
-            node[indeterminateField] = false;
-            const children = node[childrenField];
-            if (children) {
-                this.deselectAllNodes(children, selectedField, indeterminateField, childrenField);
+            node.selected = false;
+            node.indeterminate = false;
+            if (node.children) {
+                this.deselectAllNodes(node.children);
             }
         }
     }
     /**
      * Recursively set selection state for all nodes
      */
-    setAllSelection(nodes, selected, selectedField = 'selected', indeterminateField = 'indeterminate', childrenField = 'children') {
+    setAllSelection(nodes, selected) {
         for (const node of nodes) {
-            node[selectedField] = selected;
-            node[indeterminateField] = false;
-            const children = node[childrenField];
-            if (children) {
-                this.setAllSelection(children, selected, selectedField, indeterminateField, childrenField);
+            node.selected = selected;
+            node.indeterminate = false;
+            if (node.children) {
+                this.setAllSelection(node.children, selected);
             }
         }
     }
     /**
      * Recursively count selected nodes
      */
-    countSelected(nodes, selectedField = 'selected', childrenField = 'children') {
+    countSelected(nodes) {
         let count = 0;
         for (const node of nodes) {
-            if (node[selectedField])
+            if (node.selected)
                 count++;
-            const children = node[childrenField];
-            if (children) {
-                count += this.countSelected(children, selectedField, childrenField);
+            if (node.children) {
+                count += this.countSelected(node.children);
             }
         }
         return count;
@@ -240,61 +217,53 @@ class AXTreeViewService {
     /**
      * Recursively collect selected nodes
      */
-    collectSelected(nodes, result, selectedField = 'selected', childrenField = 'children') {
+    collectSelected(nodes, result) {
         for (const node of nodes) {
-            if (node[selectedField])
+            if (node.selected)
                 result.push(node);
-            const children = node[childrenField];
-            if (children) {
-                this.collectSelected(children, result, selectedField, childrenField);
+            if (node.children) {
+                this.collectSelected(node.children, result);
             }
         }
     }
     /**
      * Recursively remove selected nodes
      */
-    removeSelected(nodes, selectedField = 'selected', indeterminateField = 'indeterminate', childrenField = 'children') {
+    removeSelected(nodes) {
         for (let i = nodes.length - 1; i >= 0; i--) {
-            const node = nodes[i];
-            const selected = node[selectedField];
-            const indeterminate = node[indeterminateField];
-            if (selected && !indeterminate) {
+            if (nodes[i].selected && !nodes[i].indeterminate) {
                 nodes.splice(i, 1);
             }
-            else {
-                const children = node[childrenField];
-                if (children) {
-                    this.removeSelected(children, selectedField, indeterminateField, childrenField);
-                }
+            else if (nodes[i].children) {
+                this.removeSelected(nodes[i].children ?? []);
             }
         }
     }
     /**
      * Recursively update all parent states in the tree (used after deletion)
      */
-    updateAllParentStates(nodes, intermediateState, childrenField = 'children', selectedField = 'selected', indeterminateField = 'indeterminate') {
+    updateAllParentStates(nodes, intermediateState) {
         for (const node of nodes) {
-            const children = node[childrenField];
-            if (children && children.length > 0) {
-                this.updateAllParentStates(children, intermediateState, childrenField, selectedField, indeterminateField);
-                const { allSelected, someSelected } = this.getChildrenSelectionState(children, selectedField, indeterminateField);
+            if (node.children && node.children.length > 0) {
+                this.updateAllParentStates(node.children, intermediateState);
+                const { allSelected, someSelected } = this.getChildrenSelectionState(node.children);
                 if (allSelected) {
-                    node[selectedField] = true;
-                    node[indeterminateField] = false;
+                    node.selected = true;
+                    node.indeterminate = false;
                 }
                 else if (someSelected) {
                     if (intermediateState) {
-                        node[selectedField] = true;
-                        node[indeterminateField] = true;
+                        node.selected = true;
+                        node.indeterminate = true;
                     }
                     else {
-                        node[selectedField] = false;
-                        node[indeterminateField] = false;
+                        node.selected = false;
+                        node.indeterminate = false;
                     }
                 }
                 else {
-                    node[selectedField] = false;
-                    node[indeterminateField] = false;
+                    node.selected = false;
+                    node.indeterminate = false;
                 }
             }
         }
@@ -303,18 +272,17 @@ class AXTreeViewService {
     /**
      * Recursively set expanded state (with lazy loading)
      */
-    async setExpandedState(nodes, expanded, isLazyDataSource, loadNodeChildren, expandedField = 'expanded', childrenField = 'children', childrenCountField = 'childrenCount') {
+    async setExpandedState(nodes, expanded, isLazyDataSource, loadNodeChildren) {
         for (const node of nodes) {
-            const hasChildren = this.hasChildren(node, childrenField);
-            const canLazyLoad = this.canLazyLoad(node, isLazyDataSource, childrenCountField, childrenField);
+            const hasChildren = this.hasChildren(node);
+            const canLazyLoad = this.canLazyLoad(node, isLazyDataSource);
             if (hasChildren || canLazyLoad) {
                 if (expanded && canLazyLoad) {
                     await loadNodeChildren(node);
                 }
-                node[expandedField] = expanded;
-                const children = node[childrenField];
-                if (children) {
-                    await this.setExpandedState(children, expanded, isLazyDataSource, loadNodeChildren, expandedField, childrenField, childrenCountField);
+                node.expanded = expanded;
+                if (node.children) {
+                    await this.setExpandedState(node.children, expanded, isLazyDataSource, loadNodeChildren);
                 }
             }
         }
@@ -323,24 +291,23 @@ class AXTreeViewService {
     /**
      * Get array reference by drop list ID
      */
-    getArrayByListId(nodes, listId, idField = 'id', childrenField = 'children') {
+    getArrayByListId(nodes, listId) {
         if (listId === AXTreeViewService.ROOT_LIST_ID) {
             return nodes;
         }
         if (listId.startsWith(AXTreeViewService.NODE_DROP_PREFIX)) {
             const nodeId = listId.replace(AXTreeViewService.NODE_DROP_PREFIX, '');
-            const node = this.findNodeById(nodes, nodeId, idField);
+            const node = this.findNodeById(nodes, nodeId);
             return node ? [node] : null;
         }
         const nodeId = listId.replace(AXTreeViewService.LIST_PREFIX, '');
-        const node = this.findNodeById(nodes, nodeId, idField);
-        const children = node?.[childrenField];
-        return children ?? null;
+        const node = this.findNodeById(nodes, nodeId);
+        return node?.children ?? null;
     }
     /**
      * Find parent node by list ID
      */
-    findParentByListId(nodes, listId, idField = 'id') {
+    findParentByListId(nodes, listId) {
         if (listId === AXTreeViewService.ROOT_LIST_ID) {
             return undefined;
         }
@@ -348,16 +315,13 @@ class AXTreeViewService {
             ? AXTreeViewService.NODE_DROP_PREFIX
             : AXTreeViewService.LIST_PREFIX;
         const nodeId = listId.replace(prefix, '');
-        return this.findNodeById(nodes, nodeId, idField) ?? undefined;
+        return this.findNodeById(nodes, nodeId) ?? undefined;
     }
     /**
      * Generate unique list ID for each node
      */
-    getListId(node, idField = 'id') {
-        if (!node)
-            return AXTreeViewService.ROOT_LIST_ID;
-        const nodeId = node[idField];
-        return `${AXTreeViewService.LIST_PREFIX}${nodeId}`;
+    getListId(node) {
+        return node ? `${AXTreeViewService.LIST_PREFIX}${node.id}` : AXTreeViewService.ROOT_LIST_ID;
     }
     /**
      * Get root list ID constant
@@ -381,14 +345,13 @@ class AXTreeViewService {
     /**
      * Get all nodes in a flat array
      */
-    getAllNodes(nodes, childrenField = 'children') {
+    getAllNodes(nodes) {
         const allNodes = [];
         const traverse = (nodeList) => {
             for (const node of nodeList) {
                 allNodes.push(node);
-                const children = node[childrenField];
-                if (children) {
-                    traverse(children);
+                if (node.children) {
+                    traverse(node.children);
                 }
             }
         };
@@ -422,70 +385,63 @@ class AXTreeViewService {
     /**
      * Get sibling nodes of a given node
      */
-    getSiblings(nodes, nodeId, idField = 'id', childrenField = 'children') {
-        const node = this.findNodeById(nodes, nodeId, idField);
+    getSiblings(nodes, nodeId) {
+        const node = this.findNodeById(nodes, nodeId);
         if (!node) {
             return [];
         }
-        const parent = this.findParentNode(nodes, node, idField, childrenField);
-        const siblingsArray = parent?.[childrenField] ?? nodes;
-        return siblingsArray.filter((n) => n[idField] !== nodeId);
+        const parent = this.findParentNode(nodes, node);
+        const siblingsArray = parent?.children ?? nodes;
+        return siblingsArray.filter((n) => n.id !== nodeId);
     }
     /**
      * Clone a node (creates a deep copy)
      */
-    cloneNode(node, idField = 'id', titleField = 'title', tooltipField = 'tooltip', iconField = 'icon', expandedField = 'expanded', selectedField = 'selected', indeterminateField = 'indeterminate', disabledField = 'disabled', hiddenField = 'hidden', childrenCountField = 'childrenCount', dataField = 'data', childrenField = 'children') {
+    cloneNode(node) {
         const cloned = {
-            [idField]: `${node[idField]}-clone-${Date.now()}`,
-            [titleField]: node[titleField],
-            [tooltipField]: node[tooltipField],
-            [iconField]: node[iconField],
-            [expandedField]: node[expandedField],
-            [selectedField]: false, // Cloned nodes are not selected by default
-            [indeterminateField]: false,
-            [disabledField]: node[disabledField],
-            [hiddenField]: node[hiddenField],
-            [childrenCountField]: node[childrenCountField],
-            [dataField]: node[dataField] ? JSON.parse(JSON.stringify(node[dataField])) : undefined,
+            id: `${node.id}-clone-${Date.now()}`,
+            label: node.label,
+            icon: node.icon,
+            expanded: node.expanded,
+            selected: false, // Cloned nodes are not selected by default
+            indeterminate: false,
+            disabled: node.disabled,
+            visible: node.visible,
+            childrenCount: node.childrenCount,
+            loading: false, // Cloned nodes are not loading
+            data: node.data ? JSON.parse(JSON.stringify(node.data)) : undefined,
         };
-        const children = node[childrenField];
-        if (children && children.length > 0) {
-            cloned[childrenField] = children.map((child) => this.cloneNode(child, idField, titleField, tooltipField, iconField, expandedField, selectedField, indeterminateField, disabledField, hiddenField, childrenCountField, dataField, childrenField));
-            cloned[childrenCountField] = cloned[childrenField].length;
+        if (node.children && node.children.length > 0) {
+            cloned.children = node.children.map((child) => this.cloneNode(child));
+            cloned.childrenCount = cloned.children.length;
         }
         return cloned;
     }
     /**
      * Validate node structure (check for required fields and circular references)
      */
-    validateNode(node, visitedIds = new Set(), idField = 'id', titleField = 'title', childrenField = 'children', childrenCountField = 'childrenCount') {
+    validateNode(node, visitedIds = new Set()) {
         const errors = [];
-        const nodeId = node[idField];
-        const nodeTitle = node[titleField];
-        if (!nodeId) {
-            errors.push(`Node must have an ${idField}`);
+        if (!node.id) {
+            errors.push('Node must have an id');
         }
-        if (!nodeTitle) {
-            errors.push(`Node must have a ${titleField}`);
+        if (!node.label) {
+            errors.push('Node must have a label');
         }
-        if (nodeId && visitedIds.has(nodeId)) {
-            errors.push(`Circular reference detected: node ${nodeId} appears multiple times in the tree`);
+        if (visitedIds.has(node.id)) {
+            errors.push(`Circular reference detected: node ${node.id} appears multiple times in the tree`);
         }
-        const children = node[childrenField];
-        if (children) {
+        if (node.children) {
             const newVisited = new Set(visitedIds);
-            if (nodeId) {
-                newVisited.add(nodeId);
-            }
-            for (const child of children) {
-                const childValidation = this.validateNode(child, newVisited, idField, titleField, childrenField, childrenCountField);
+            newVisited.add(node.id);
+            for (const child of node.children) {
+                const childValidation = this.validateNode(child, newVisited);
                 if (!childValidation.valid) {
-                    errors.push(...childValidation.errors.map((e) => `Child of ${nodeId}: ${e}`));
+                    errors.push(...childValidation.errors.map((e) => `Child of ${node.id}: ${e}`));
                 }
             }
-            const childrenCount = node[childrenCountField];
-            if (childrenCount !== undefined && childrenCount !== children.length) {
-                errors.push(`Node ${nodeId}: ${childrenCountField} (${childrenCount}) does not match ${childrenField} array length (${children.length})`);
+            if (node.childrenCount !== undefined && node.childrenCount !== node.children.length) {
+                errors.push(`Node ${node.id}: childrenCount (${node.childrenCount}) does not match children array length (${node.children.length})`);
             }
         }
         return {
@@ -493,10 +449,10 @@ class AXTreeViewService {
             errors,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -513,8 +469,10 @@ class AXTreeViewComponent {
         this.selectMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
         /** Whether to show checkboxes for selection (only applies to multiple mode) */
         this.showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
-        /** Selection behavior: 'all' (select anything, no special behavior), 'intermediate' (parent indeterminate state when children selected), 'leaf' (only leaf nodes selectable), 'nested' (selecting parent selects all children) */
-        this.selectionBehavior = input('all', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
+        /** When true, selecting a parent also selects all loaded children (only for multiple mode) */
+        this.checkChildrenOnSelect = input(true, ...(ngDevMode ? [{ debugName: "checkChildrenOnSelect" }] : []));
+        /** When true, selecting a child makes parents indeterminate (only for multiple mode) */
+        this.intermediateState = input(true, ...(ngDevMode ? [{ debugName: "intermediateState" }] : []));
         /** When true, clicking on a node toggles its selection (works for both single and multiple modes) */
         this.checkOnClick = input(false, ...(ngDevMode ? [{ debugName: "checkOnClick" }] : []));
         /** Drag and drop mode: 'none' (disabled), 'handler' (drag handle), 'item' (entire item) */
@@ -530,35 +488,13 @@ class AXTreeViewComponent {
         /** 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(16, ...(ngDevMode ? [{ debugName: "indentSize" }] : []));
+        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.nodeTemplate = input(...(ngDevMode ? [undefined, { debugName: "nodeTemplate" }] : []));
-        /** Field name for node ID (default: 'id') */
-        this.idField = input('id', ...(ngDevMode ? [{ debugName: "idField" }] : []));
-        /** Field name for node title (default: 'title') */
-        this.titleField = input('title', ...(ngDevMode ? [{ debugName: "titleField" }] : []));
-        /** Field name for node tooltip (default: 'tooltip') */
-        this.tooltipField = input('tooltip', ...(ngDevMode ? [{ debugName: "tooltipField" }] : []));
-        /** Field name for node icon (default: 'icon') */
-        this.iconField = input('icon', ...(ngDevMode ? [{ debugName: "iconField" }] : []));
-        /** Field name for expanded state (default: 'expanded') */
-        this.expandedField = input('expanded', ...(ngDevMode ? [{ debugName: "expandedField" }] : []));
-        /** Field name for selected state (default: 'selected') */
-        this.selectedField = input('selected', ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
-        /** Field name for indeterminate state (default: 'indeterminate') */
-        this.indeterminateField = input('indeterminate', ...(ngDevMode ? [{ debugName: "indeterminateField" }] : []));
-        /** Field name for disabled state (default: 'disabled') */
-        this.disabledField = input('disabled', ...(ngDevMode ? [{ debugName: "disabledField" }] : []));
-        /** Field name for hidden state (default: 'hidden') */
-        this.hiddenField = input('hidden', ...(ngDevMode ? [{ debugName: "hiddenField" }] : []));
-        /** Field name for children array (default: 'children') */
-        this.childrenField = input('children', ...(ngDevMode ? [{ debugName: "childrenField" }] : []));
-        /** Field name for children count (default: 'childrenCount') */
-        this.childrenCountField = input('childrenCount', ...(ngDevMode ? [{ debugName: "childrenCountField" }] : []));
-        /** Field name for custom data (default: 'data') */
-        this.dataField = input('data', ...(ngDevMode ? [{ debugName: "dataField" }] : []));
+        this.itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : []));
         // ==================== Outputs ====================
         /** Emitted before a drop operation - set canceled to true to prevent drop */
         this.onBeforeDrop = output();
@@ -566,8 +502,6 @@ class AXTreeViewComponent {
         this.onNodeToggle = output();
         /** Emitted when a node is selected/deselected */
         this.onNodeSelect = output();
-        /** Emitted when selection changes - returns all currently selected nodes */
-        this.onSelectionChange = output();
         /** Emitted when nodes are reordered within the same parent */
         this.onOrderChange = output();
         /** Emitted when a node is moved to a different parent */
@@ -600,35 +534,19 @@ class AXTreeViewComponent {
         this.isUpdatingFromDatasource = false;
         /** Computed to check if datasource is a function */
         this.isLazyDataSource = computed(() => typeof this.datasource() === 'function', ...(ngDevMode ? [{ debugName: "isLazyDataSource" }] : []));
-        /** Computed: Returns true when selection is restricted to leaf nodes only */
-        this.isLeafOnlyMode = computed(() => this.selectionBehavior() === 'leaf', ...(ngDevMode ? [{ debugName: "isLeafOnlyMode" }] : []));
-        /** Computed: Returns true when selecting a parent automatically selects all its children */
-        this.cascadesToChildren = computed(() => {
-            const behavior = this.selectionBehavior();
-            return behavior === 'nested' || behavior === 'intermediate-nested';
-        }, ...(ngDevMode ? [{ debugName: "cascadesToChildren" }] : []));
-        /** Computed: Returns true when parent nodes show indeterminate state based on children selection */
-        this.hasIntermediateState = computed(() => {
-            const behavior = this.selectionBehavior();
-            return behavior === 'intermediate' || behavior === 'intermediate-nested';
-        }, ...(ngDevMode ? [{ debugName: "hasIntermediateState" }] : []));
         // ==================== Effects ====================
         /** Effect to handle datasource changes */
-        this.#datasourceEffect = effect(async () => {
-            if (this.isUpdatingFromDatasource) {
+        this.#datasourceEffect = effect(() => {
+            if (this.isUpdatingFromDatasource)
                 return;
-            }
             const ds = this.datasource();
             if (Array.isArray(ds)) {
                 this.nodes.set([...ds]);
             }
             else if (typeof ds === 'function') {
-                try {
-                    await this.loadRootItems(ds);
-                }
-                catch (error) {
+                this.loadRootItems(ds).catch((error) => {
                     this.handleError('Failed to load root items', error);
-                }
+                });
             }
         }, ...(ngDevMode ? [{ debugName: "#datasourceEffect" }] : []));
         /** Initialize direction change listener */
@@ -638,115 +556,6 @@ class AXTreeViewComponent {
                 .subscribe((isRtl) => this.isRtl.set(isRtl));
         });
     }
-    // ==================== Node Property Helpers ====================
-    /**
-     * Get a property value from a node using the configured field name
-     */
-    getNodeProp(node, fieldName, defaultValue) {
-        return node[fieldName] ?? defaultValue;
-    }
-    /**
-     * Set a property value on a node using the configured field name
-     */
-    setNodeProp(node, fieldName, value) {
-        node[fieldName] = value;
-    }
-    /**
-     * Get node ID
-     */
-    getNodeId(node) {
-        return this.getNodeProp(node, this.idField(), '');
-    }
-    /**
-     * Get node title
-     */
-    getNodeTitle(node) {
-        return this.getNodeProp(node, this.titleField(), '');
-    }
-    /**
-     * Get node tooltip
-     */
-    getNodeTooltip(node) {
-        return this.getNodeProp(node, this.tooltipField(), undefined);
-    }
-    /**
-     * Get node icon
-     */
-    getNodeIcon(node) {
-        return this.getNodeProp(node, this.iconField(), undefined);
-    }
-    /**
-     * Get node expanded state
-     */
-    getNodeExpanded(node) {
-        return this.getNodeProp(node, this.expandedField(), false);
-    }
-    /**
-     * Set node expanded state
-     */
-    setNodeExpanded(node, value) {
-        this.setNodeProp(node, this.expandedField(), value);
-    }
-    /**
-     * Get node selected state
-     */
-    getNodeSelected(node) {
-        return this.getNodeProp(node, this.selectedField(), false);
-    }
-    /**
-     * Set node selected state
-     */
-    setNodeSelected(node, value) {
-        this.setNodeProp(node, this.selectedField(), value);
-    }
-    /**
-     * Get node indeterminate state
-     */
-    getNodeIndeterminate(node) {
-        return this.getNodeProp(node, this.indeterminateField(), false);
-    }
-    /**
-     * Set node indeterminate state
-     */
-    setNodeIndeterminate(node, value) {
-        this.setNodeProp(node, this.indeterminateField(), value);
-    }
-    /**
-     * Get node disabled state
-     */
-    getNodeDisabled(node) {
-        return this.getNodeProp(node, this.disabledField(), false);
-    }
-    /**
-     * Get node hidden state
-     */
-    getNodeHidden(node) {
-        return this.getNodeProp(node, this.hiddenField(), false);
-    }
-    /**
-     * Get node children array
-     */
-    getNodeChildren(node) {
-        return this.getNodeProp(node, this.childrenField(), undefined);
-    }
-    /**
-     * Set node children array
-     */
-    setNodeChildren(node, value) {
-        this.setNodeProp(node, this.childrenField(), value);
-    }
-    /**
-     * Get node children count
-     */
-    getNodeChildrenCount(node) {
-        return this.getNodeProp(node, this.childrenCountField(), undefined);
-    }
-    /**
-     * Set node children count
-     */
-    setNodeChildrenCount(node, value) {
-        this.setNodeProp(node, this.childrenCountField(), value);
-    }
     // ==================== Effects ====================
     /** Effect to handle datasource changes */
     #datasourceEffect;
@@ -757,21 +566,21 @@ class AXTreeViewComponent {
      * Expand all nodes in the tree (with lazy loading support)
      */
     async expandAll() {
-        await this.treeService.setExpandedState(this.nodes(), true, this.isLazyDataSource(), (node) => this.loadNodeChildren(node), this.expandedField(), this.childrenField(), this.childrenCountField());
+        await this.treeService.setExpandedState(this.nodes(), true, this.isLazyDataSource(), (node) => this.loadNodeChildren(node));
         this.refreshNodes();
     }
     /**
      * Collapse all nodes in the tree
      */
     collapseAll() {
-        this.treeService.setExpandedState(this.nodes(), false, this.isLazyDataSource(), (node) => this.loadNodeChildren(node), this.expandedField(), this.childrenField(), this.childrenCountField());
+        this.treeService.setExpandedState(this.nodes(), false, this.isLazyDataSource(), (node) => this.loadNodeChildren(node));
         this.refreshNodes();
     }
     /**
      * Get count of selected nodes
      */
     getSelectedCount() {
-        return this.treeService.countSelected(this.nodes(), this.selectedField(), this.childrenField());
+        return this.treeService.countSelected(this.nodes());
     }
     /**
      * Check if any nodes are selected
@@ -784,62 +593,36 @@ class AXTreeViewComponent {
      */
     getSelectedNodes() {
         const selected = [];
-        this.treeService.collectSelected(this.nodes(), selected, this.selectedField(), this.childrenField());
+        this.treeService.collectSelected(this.nodes(), selected);
         return selected;
     }
     /**
      * Delete selected nodes from the tree
      */
     deleteSelected() {
-        this.treeService.removeSelected(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
-        if (!this.isLeafOnlyMode()) {
-            this.treeService.updateAllParentStates(this.nodes(), this.hasIntermediateState(), this.childrenField(), this.selectedField(), this.indeterminateField());
-        }
+        this.treeService.removeSelected(this.nodes());
+        this.treeService.updateAllParentStates(this.nodes(), this.intermediateState());
         this.refreshNodes();
-        this.emitSelectionChange();
     }
     /**
      * Select all nodes in the tree
      */
     selectAll() {
-        if (this.selectMode() === 'none') {
-            return;
-        }
-        if (this.isLeafOnlyMode()) {
-            // Only select leaf nodes
-            const selectLeafs = (nodes) => {
-                for (const node of nodes) {
-                    if (this.isLeafNode(node) && !this.getNodeDisabled(node)) {
-                        this.setNodeSelected(node, true);
-                        this.setNodeIndeterminate(node, false);
-                    }
-                    const children = this.getNodeChildren(node);
-                    if (children) {
-                        selectLeafs(children);
-                    }
-                }
-            };
-            selectLeafs(this.nodes());
-        }
-        else {
-            this.treeService.setAllSelection(this.nodes(), true, this.selectedField(), this.indeterminateField(), this.childrenField());
-        }
+        this.treeService.setAllSelection(this.nodes(), true);
         this.refreshNodes();
-        this.emitSelectionChange();
     }
     /**
      * Deselect all nodes in the tree
      */
     deselectAll() {
-        this.treeService.setAllSelection(this.nodes(), false, this.selectedField(), this.indeterminateField(), this.childrenField());
+        this.treeService.setAllSelection(this.nodes(), false);
         this.refreshNodes();
-        this.emitSelectionChange();
     }
     /**
      * Find a node by ID in the tree
      */
     findNode(id) {
-        return this.treeService.findNodeById(this.nodes(), id, this.idField());
+        return this.treeService.findNodeById(this.nodes(), id);
     }
     /**
      * Refresh the tree to trigger change detection
@@ -853,12 +636,6 @@ class AXTreeViewComponent {
     isNodeLoading(nodeId) {
         return this.loadingNodes().has(nodeId);
     }
-    /**
-     * Get loading state for a node (internal state)
-     */
-    getNodeLoading(node) {
-        return this.loadingNodes().has(this.getNodeId(node));
-    }
     /**
      * Edit/update a node's properties
      * @param nodeId - The ID of the node to edit
@@ -873,14 +650,12 @@ class AXTreeViewComponent {
         // Update node properties
         Object.assign(node, updates);
         // If children array is provided, ensure it exists
-        const childrenField = this.childrenField();
-        if (updates[childrenField] !== undefined) {
-            this.setNodeChildren(node, updates[childrenField]);
+        if (updates.children !== undefined) {
+            node.children = updates.children;
         }
         // Update childrenCount if children array is provided
-        if (updates[childrenField] !== undefined) {
-            const children = updates[childrenField];
-            this.setNodeChildrenCount(node, children?.length);
+        if (updates.children !== undefined) {
+            node.childrenCount = updates.children.length;
         }
         this.refreshNodes();
         return true;
@@ -898,23 +673,21 @@ class AXTreeViewComponent {
             return false;
         }
         // Ensure children array exists
-        let children = this.getNodeChildren(parent);
-        if (!children) {
-            children = [];
-            this.setNodeChildren(parent, children);
+        if (!parent.children) {
+            parent.children = [];
         }
         // Insert or append child
-        if (index !== undefined && index >= 0 && index <= children.length) {
-            children.splice(index, 0, childNode);
+        if (index !== undefined && index >= 0 && index <= parent.children.length) {
+            parent.children.splice(index, 0, childNode);
         }
         else {
-            children.push(childNode);
+            parent.children.push(childNode);
         }
         // Update childrenCount
-        this.setNodeChildrenCount(parent, children.length);
+        parent.childrenCount = parent.children.length;
         // Auto-expand parent if it was collapsed
-        if (!this.getNodeExpanded(parent)) {
-            this.setNodeExpanded(parent, true);
+        if (!parent.expanded) {
+            parent.expanded = true;
         }
         this.refreshNodes();
         return true;
@@ -930,21 +703,19 @@ class AXTreeViewComponent {
             return null;
         }
         // Find parent to remove from its children array
-        const parent = this.treeService.findParentNode(this.nodes(), node, this.idField(), this.childrenField());
-        const parentChildren = parent ? this.getNodeChildren(parent) : undefined;
-        const targetArray = parentChildren ?? this.nodes();
+        const parent = this.treeService.findParentNode(this.nodes(), node);
+        const targetArray = parent?.children ?? this.nodes();
         // Find and remove the node
-        const index = targetArray.findIndex((n) => this.getNodeId(n) === nodeId);
+        const index = targetArray.findIndex((n) => n.id === nodeId);
         if (index !== -1) {
             const removed = targetArray.splice(index, 1)[0];
             // Update parent's childrenCount if it exists
             if (parent) {
-                const updatedChildren = this.getNodeChildren(parent);
-                this.setNodeChildrenCount(parent, updatedChildren?.length ?? 0);
+                parent.childrenCount = parent.children?.length ?? 0;
             }
             // Update parent states if needed
-            if (this.hasIntermediateState()) {
-                this.treeService.updateAllParentStates(this.nodes(), this.hasIntermediateState(), this.childrenField(), this.selectedField(), this.indeterminateField());
+            if (this.intermediateState()) {
+                this.treeService.updateAllParentStates(this.nodes(), this.intermediateState());
             }
             this.refreshNodes();
             return removed;
@@ -961,13 +732,13 @@ class AXTreeViewComponent {
         if (!node) {
             return;
         }
-        const hasChildren = this.treeService.hasChildren(node, this.childrenField());
-        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource(), this.childrenCountField(), this.childrenField());
+        const hasChildren = this.treeService.hasChildren(node);
+        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource());
         if (hasChildren || canLazyLoad) {
             if (canLazyLoad) {
                 await this.loadNodeChildren(node);
             }
-            this.setNodeExpanded(node, true);
+            node.expanded = true;
             this.refreshNodes();
             this.onNodeToggle.emit({ component: this, node, nativeEvent: new Event('expand') });
         }
@@ -981,8 +752,8 @@ class AXTreeViewComponent {
         if (!node) {
             return;
         }
-        if (this.getNodeExpanded(node)) {
-            this.setNodeExpanded(node, false);
+        if (node.expanded) {
+            node.expanded = false;
             this.refreshNodes();
             this.onNodeToggle.emit({ component: this, node, nativeEvent: new Event('collapse') });
         }
@@ -997,7 +768,7 @@ class AXTreeViewComponent {
         if (!node) {
             return;
         }
-        if (this.getNodeExpanded(node)) {
+        if (node.expanded) {
             this.collapseNode(nodeId);
         }
         else {
@@ -1010,28 +781,24 @@ class AXTreeViewComponent {
      * @returns true if node was found and selected, false otherwise
      */
     selectNode(nodeId) {
-        if (this.selectMode() === 'none') {
-            return false;
-        }
         const node = this.findNode(nodeId);
-        if (!node || this.getNodeDisabled(node) || !this.canSelectNode(node)) {
+        if (!node || node.disabled) {
             return false;
         }
         const mode = this.selectMode();
         if (mode === 'single') {
-            this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
-            this.setNodeSelected(node, true);
-            this.setNodeIndeterminate(node, false);
+            this.treeService.deselectAllNodes(this.nodes());
+            node.selected = true;
+            node.indeterminate = false;
         }
         else {
-            this.setNodeSelected(node, true);
-            this.setNodeIndeterminate(node, false);
-            const children = this.getNodeChildren(node);
-            if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-                this.treeService.selectAllChildren(children, true, this.selectedField(), this.indeterminateField(), this.childrenField());
+            node.selected = true;
+            node.indeterminate = false;
+            if (this.checkChildrenOnSelect() && node.children) {
+                this.treeService.selectAllChildren(node.children, true);
             }
-            if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-                this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+            if (this.intermediateState()) {
+                this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
             }
         }
         this.refreshNodes();
@@ -1040,7 +807,6 @@ class AXTreeViewComponent {
             node,
             isUserInteraction: false,
         });
-        this.emitSelectionChange();
         return true;
     }
     /**
@@ -1053,14 +819,13 @@ class AXTreeViewComponent {
         if (!node) {
             return false;
         }
-        this.setNodeSelected(node, false);
-        this.setNodeIndeterminate(node, false);
-        const children = this.getNodeChildren(node);
-        if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-            this.treeService.selectAllChildren(children, false, this.selectedField(), this.indeterminateField(), this.childrenField());
+        node.selected = false;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, false);
         }
-        if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-            this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
         }
         this.refreshNodes();
         this.onNodeSelect.emit({
@@ -1068,7 +833,6 @@ class AXTreeViewComponent {
             node,
             isUserInteraction: false,
         });
-        this.emitSelectionChange();
         return true;
     }
     /**
@@ -1081,7 +845,7 @@ class AXTreeViewComponent {
         if (!node) {
             return null;
         }
-        return this.treeService.findParentNode(this.nodes(), node, this.idField(), this.childrenField()) ?? null;
+        return this.treeService.findParentNode(this.nodes(), node) ?? null;
     }
     /**
      * Get children of a node
@@ -1093,7 +857,7 @@ class AXTreeViewComponent {
         if (!node) {
             return null;
         }
-        return this.getNodeChildren(node) ?? [];
+        return node.children ?? [];
     }
     /**
      * Get all root nodes
@@ -1111,9 +875,8 @@ class AXTreeViewComponent {
         const traverse = (nodes) => {
             for (const node of nodes) {
                 allNodes.push(node);
-                const children = this.getNodeChildren(node);
-                if (children) {
-                    traverse(children);
+                if (node.children) {
+                    traverse(node.children);
                 }
             }
         };
@@ -1133,8 +896,8 @@ class AXTreeViewComponent {
         }
         let current = node;
         while (current) {
-            path.unshift(this.getNodeId(current));
-            const parent = this.treeService.findParentNode(this.nodes(), current, this.idField(), this.childrenField());
+            path.unshift(current.id);
+            const parent = this.treeService.findParentNode(this.nodes(), current);
             current = parent ?? null;
         }
         return path;
@@ -1161,11 +924,10 @@ class AXTreeViewComponent {
             return false;
         }
         // Find current parent
-        const currentParent = this.treeService.findParentNode(this.nodes(), node, this.idField(), this.childrenField());
-        const currentParentChildren = currentParent ? this.getNodeChildren(currentParent) : undefined;
-        const currentArray = currentParentChildren ?? this.nodes();
+        const currentParent = this.treeService.findParentNode(this.nodes(), node);
+        const currentArray = currentParent?.children ?? this.nodes();
         // Find and remove from current location
-        const currentIndex = currentArray.findIndex((n) => this.getNodeId(n) === nodeId);
+        const currentIndex = currentArray.findIndex((n) => n.id === nodeId);
         if (currentIndex === -1) {
             return false;
         }
@@ -1181,17 +943,15 @@ class AXTreeViewComponent {
                 return false;
             }
             // Validate drop target
-            if (!this.treeService.isValidDropTarget(movedNode, newParent, this.idField(), this.childrenField())) {
+            if (!this.treeService.isValidDropTarget(movedNode, newParent)) {
                 // Restore node if invalid drop target
                 currentArray.splice(currentIndex, 0, movedNode);
                 return false;
             }
-            let newParentChildren = this.getNodeChildren(newParent);
-            if (!newParentChildren) {
-                newParentChildren = [];
-                this.setNodeChildren(newParent, newParentChildren);
+            if (!newParent.children) {
+                newParent.children = [];
             }
-            targetArray = newParentChildren;
+            targetArray = newParent.children;
         }
         else {
             targetArray = this.nodes();
@@ -1207,13 +967,11 @@ class AXTreeViewComponent {
         }
         // Update childrenCount
         if (currentParent) {
-            const updatedChildren = this.getNodeChildren(currentParent);
-            this.setNodeChildrenCount(currentParent, updatedChildren?.length ?? 0);
+            currentParent.childrenCount = currentParent.children?.length ?? 0;
         }
         if (newParent) {
-            const updatedChildren = this.getNodeChildren(newParent);
-            this.setNodeChildrenCount(newParent, updatedChildren?.length ?? 0);
-            this.setNodeExpanded(newParent, true); // Auto-expand new parent
+            newParent.childrenCount = newParent.children?.length ?? 0;
+            newParent.expanded = true; // Auto-expand new parent
         }
         // Emit drop events
         this.emitDropEvents(movedNode, currentParent, newParent, currentIndex, newIndex, false);
@@ -1230,7 +988,7 @@ class AXTreeViewComponent {
         if (!node) {
             return null;
         }
-        return this.treeService.cloneNode(node, this.idField(), this.titleField(), this.tooltipField(), this.iconField(), this.expandedField(), this.selectedField(), this.indeterminateField(), this.disabledField(), this.hiddenField(), this.childrenCountField(), this.dataField(), this.childrenField());
+        return this.treeService.cloneNode(node);
     }
     /**
      * Focus a specific node by ID
@@ -1239,7 +997,7 @@ class AXTreeViewComponent {
      */
     focusNode(nodeId) {
         const node = this.findNode(nodeId);
-        if (!node || this.getNodeHidden(node) === true || this.getNodeDisabled(node)) {
+        if (!node || node.visible === false || node.disabled) {
             return false;
         }
         this.focusNodeById(nodeId);
@@ -1253,12 +1011,11 @@ class AXTreeViewComponent {
         const expanded = [];
         const traverse = (nodes) => {
             for (const node of nodes) {
-                if (this.getNodeExpanded(node)) {
+                if (node.expanded) {
                     expanded.push(node);
                 }
-                const children = this.getNodeChildren(node);
-                if (children) {
-                    traverse(children);
+                if (node.children) {
+                    traverse(node.children);
                 }
             }
         };
@@ -1273,13 +1030,11 @@ class AXTreeViewComponent {
         const collapsed = [];
         const traverse = (nodes) => {
             for (const node of nodes) {
-                const children = this.getNodeChildren(node);
-                const childrenCount = this.getNodeChildrenCount(node);
-                if (!this.getNodeExpanded(node) && (children?.length || childrenCount)) {
+                if (!node.expanded && (node.children?.length || node.childrenCount)) {
                     collapsed.push(node);
                 }
-                if (children) {
-                    traverse(children);
+                if (node.children) {
+                    traverse(node.children);
                 }
             }
         };
@@ -1293,7 +1048,7 @@ class AXTreeViewComponent {
      */
     isNodeExpanded(nodeId) {
         const node = this.findNode(nodeId);
-        return node ? this.getNodeExpanded(node) : false;
+        return node?.expanded ?? false;
     }
     /**
      * Check if a node is selected
@@ -1302,7 +1057,7 @@ class AXTreeViewComponent {
      */
     isNodeSelected(nodeId) {
         const node = this.findNode(nodeId);
-        return node ? this.getNodeSelected(node) : false;
+        return node?.selected ?? false;
     }
     /**
      * Check if a node has children
@@ -1311,21 +1066,19 @@ class AXTreeViewComponent {
      */
     hasChildren(nodeId) {
         const node = this.findNode(nodeId);
-        return this.treeService.hasChildren(node ?? {}, this.childrenField());
+        return this.treeService.hasChildren(node ?? { id: '', label: '' });
     }
     /**
      * Get template context for a node
      */
     getTemplateContext(node, level = 0) {
-        const children = this.getNodeChildren(node);
-        const childrenCount = this.getNodeChildrenCount(node);
         return {
             $implicit: node,
             node,
             level,
-            expanded: this.getNodeExpanded(node),
-            childrenCount: childrenCount ?? children?.length ?? 0,
-            loading: this.getNodeLoading(node),
+            expanded: node.expanded ?? false,
+            childrenCount: node.childrenCount ?? node.children?.length ?? 0,
+            loading: node.loading ?? false,
         };
     }
     /**
@@ -1341,8 +1094,7 @@ class AXTreeViewComponent {
      * Check if node should show expand toggle
      */
     shouldShowExpandToggle(node) {
-        return (this.treeService.hasChildren(node, this.childrenField()) ||
-            this.treeService.canLazyLoad(node, this.isLazyDataSource(), this.childrenCountField(), this.childrenField()));
+        return this.treeService.hasChildren(node) || this.treeService.canLazyLoad(node, this.isLazyDataSource());
     }
     /**
      * Check if checkboxes should be shown (only for multiple mode)
@@ -1350,50 +1102,11 @@ class AXTreeViewComponent {
     shouldShowCheckbox() {
         return this.selectMode() === 'multiple' && this.showCheckbox();
     }
-    /**
-     * Check if a node is a leaf (has no children)
-     * A node is a leaf if it has no loaded children AND no childrenCount (or childrenCount is 0)
-     */
-    isLeafNode(node) {
-        const hasChildren = this.treeService.hasChildren(node, this.childrenField());
-        const childrenCount = this.getNodeChildrenCount(node);
-        const hasChildrenCount = childrenCount && childrenCount > 0;
-        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource(), this.childrenCountField(), this.childrenField());
-        // A node is a leaf if:
-        // 1. It has no loaded children
-        // 2. AND it has no childrenCount (or childrenCount is 0)
-        // 3. AND it cannot be lazy loaded
-        return !hasChildren && !hasChildrenCount && !canLazyLoad;
-    }
-    /**
-     * Check if a node can be selected (considering selectMode and isLeafOnlyMode)
-     */
-    canSelectNode(node) {
-        if (this.selectMode() === 'none') {
-            return false;
-        }
-        if (this.isLeafOnlyMode()) {
-            return this.isLeafNode(node);
-        }
-        return true;
-    }
-    /**
-     * Check if checkbox should be shown for a specific node
-     */
-    shouldShowCheckboxForNode(node) {
-        if (!this.shouldShowCheckbox()) {
-            return false;
-        }
-        if (this.isLeafOnlyMode()) {
-            return this.isLeafNode(node);
-        }
-        return true;
-    }
     /**
      * Generate unique list ID for each node
      */
     getListId(node) {
-        return this.treeService.getListId(node, this.idField());
+        return this.treeService.getListId(node);
     }
     /**
      * Check if a node is currently focused
@@ -1414,44 +1127,23 @@ class AXTreeViewComponent {
         if (!this.shouldShowExpandToggle(node)) {
             return null;
         }
-        return this.getNodeExpanded(node) ? 'true' : 'false';
+        return node.expanded ? 'true' : 'false';
     }
     /**
      * Get ARIA selected state for a node
      */
     getNodeAriaSelected(node) {
-        if (this.selectMode() === 'none') {
-            return null;
-        }
-        const selected = this.getNodeSelected(node);
         if (this.selectMode() === 'single') {
-            return selected ? 'true' : 'false';
-        }
-        if (this.selectMode() === 'multiple') {
-            return selected ? 'true' : 'false';
+            return node.selected ? 'true' : 'false';
         }
         return null;
     }
-    /**
-     * Emit selection change event with all selected nodes
-     */
-    emitSelectionChange() {
-        const selectedNodes = this.getSelectedNodes();
-        this.onSelectionChange.emit({
-            component: this,
-            selectedNodes,
-        });
-    }
     // ==================== Event Handlers ====================
     /**
      * Handle node click - for single selection mode or multiple mode with checkOnClick enabled
      */
     onNodeClick(node, event) {
-        if (this.getNodeDisabled(node))
-            return;
-        if (this.selectMode() === 'none')
-            return;
-        if (!this.canSelectNode(node))
+        if (node.disabled)
             return;
         const mode = this.selectMode();
         const shouldCheckOnClick = this.checkOnClick();
@@ -1466,19 +1158,19 @@ class AXTreeViewComponent {
      * Toggle node expansion state with lazy loading support
      */
     async toggleNode(node, event) {
-        if (this.getNodeDisabled(node))
+        if (node.disabled)
             return;
         if (this.isEvent(event) && typeof event.stopPropagation === 'function') {
             event.stopPropagation();
         }
-        const hasChildren = this.treeService.hasChildren(node, this.childrenField());
-        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource(), this.childrenCountField(), this.childrenField());
+        const hasChildren = this.treeService.hasChildren(node);
+        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource());
         if (hasChildren || canLazyLoad) {
-            const willExpand = !this.getNodeExpanded(node);
+            const willExpand = !node.expanded;
             if (willExpand && canLazyLoad) {
                 await this.loadNodeChildren(node);
             }
-            this.setNodeExpanded(node, willExpand);
+            node.expanded = willExpand;
             this.refreshNodes();
             this.onNodeToggle.emit({ component: this, node, nativeEvent: event });
         }
@@ -1489,22 +1181,17 @@ class AXTreeViewComponent {
     toggleSelection(node, event) {
         if (!event.isUserInteraction)
             return;
-        if (this.selectMode() === 'none')
-            return;
-        if (!this.canSelectNode(node))
-            return;
         const mode = this.selectMode();
         if (mode !== 'multiple')
             return;
         const newValue = event.value === null ? true : event.value;
-        this.setNodeSelected(node, newValue);
-        this.setNodeIndeterminate(node, false);
-        const children = this.getNodeChildren(node);
-        if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-            this.treeService.selectAllChildren(children, newValue, this.selectedField(), this.indeterminateField(), this.childrenField());
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
         }
-        if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-            this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
         }
         this.refreshNodes();
         this.onNodeSelect.emit({
@@ -1512,13 +1199,12 @@ class AXTreeViewComponent {
             node,
             isUserInteraction: event.isUserInteraction,
         });
-        this.emitSelectionChange();
     }
     /**
      * Handle drop events for tree nodes
      */
     onDrop(event, parentNode) {
-        const targetArray = parentNode ? (this.getNodeChildren(parentNode) ?? []) : this.nodes();
+        const targetArray = parentNode?.children ?? this.nodes();
         const isReordering = event.previousContainer === event.container;
         if (isReordering) {
             this.handleReorder(event, targetArray, parentNode);
@@ -1539,18 +1225,14 @@ class AXTreeViewComponent {
         if (!sourceArray)
             return;
         const movedNode = sourceArray[event.previousIndex];
-        if (!this.treeService.isValidDropTarget(movedNode, targetNode, this.idField(), this.childrenField()))
+        if (!this.treeService.isValidDropTarget(movedNode, targetNode))
             return;
         if (!this.emitBeforeDropEvent(movedNode, sourceListId, targetNode, event.previousIndex, 0))
             return;
-        let targetChildren = this.getNodeChildren(targetNode);
-        if (!targetChildren) {
-            targetChildren = [];
-            this.setNodeChildren(targetNode, targetChildren);
-        }
+        targetNode.children ??= [];
         sourceArray.splice(event.previousIndex, 1);
-        targetChildren.unshift(movedNode);
-        this.setNodeExpanded(targetNode, true);
+        targetNode.children.unshift(movedNode);
+        targetNode.expanded = true;
         this.emitDropEvents(movedNode, this.findParentByListId(sourceListId), targetNode, event.previousIndex, 0, false);
         this.refreshNodes();
     }
@@ -1565,23 +1247,23 @@ class AXTreeViewComponent {
      */
     onTreeFocus(event) {
         if (event.target === event.currentTarget) {
-            const flatList = this.treeService.buildFlatNodeList(this.nodes(), this.hiddenField(), this.disabledField(), this.expandedField(), this.childrenField());
+            const flatList = this.treeService.buildFlatNodeList(this.nodes());
             if (flatList.length > 0) {
                 const focusedId = this.focusedNodeId();
                 if (focusedId) {
-                    // Check if the focused node still exists and is not hidden
-                    const focusedNode = this.treeService.findNodeById(this.nodes(), focusedId, this.idField());
-                    if (focusedNode && this.getNodeHidden(focusedNode) !== true) {
+                    // Check if the focused node still exists and is visible
+                    const focusedNode = this.treeService.findNodeById(this.nodes(), focusedId);
+                    if (focusedNode && focusedNode.visible !== false) {
                         this.focusNodeById(focusedId);
                     }
                     else {
                         // Focused node no longer exists, focus first node
-                        this.focusNodeById(this.getNodeId(flatList[0].node));
+                        this.focusNodeById(flatList[0].node.id);
                     }
                 }
                 else {
                     // No node is focused, focus first node
-                    this.focusNodeById(this.getNodeId(flatList[0].node));
+                    this.focusNodeById(flatList[0].node.id);
                 }
             }
         }
@@ -1598,13 +1280,11 @@ class AXTreeViewComponent {
      * Handle keyboard navigation
      */
     handleKeyDown(event) {
-        const flatList = this.treeService.buildFlatNodeList(this.nodes(), this.hiddenField(), this.disabledField(), this.expandedField(), this.childrenField());
+        const flatList = this.treeService.buildFlatNodeList(this.nodes());
         if (flatList.length === 0)
             return;
         const currentFocused = this.getFocusedNode();
-        let currentIndex = currentFocused
-            ? flatList.findIndex((item) => this.getNodeId(item.node) === this.getNodeId(currentFocused))
-            : -1;
+        let currentIndex = currentFocused ? flatList.findIndex((item) => item.node.id === currentFocused.id) : -1;
         if (currentIndex === -1 && event.target === event.currentTarget) {
             currentIndex = 0;
         }
@@ -1617,7 +1297,7 @@ class AXTreeViewComponent {
             if (navigationResult.targetIndex !== null &&
                 navigationResult.targetIndex >= 0 &&
                 navigationResult.targetIndex < flatList.length) {
-                this.focusNodeById(this.getNodeId(flatList[navigationResult.targetIndex].node));
+                this.focusNodeById(flatList[navigationResult.targetIndex].node.id);
             }
         }
     }
@@ -1640,34 +1320,32 @@ class AXTreeViewComponent {
      * Load children for a node using lazy loading
      */
     async loadNodeChildren(node) {
-        const nodeId = this.getNodeId(node);
-        if (!this.isLazyDataSource() || this.loadingNodes().has(nodeId))
+        if (!this.isLazyDataSource() || node.loading)
+            return;
+        if (this.treeService.hasChildren(node) || !node.childrenCount || node.childrenCount === 0) {
             return;
-        if (this.treeService.hasChildren(node, this.childrenField())) {
-            const childrenCount = this.getNodeChildrenCount(node);
-            if (!childrenCount || childrenCount === 0) {
-                return;
-            }
         }
         const ds = this.datasource();
         if (typeof ds !== 'function')
             return;
         try {
-            this.loadingNodes.update((set) => new Set(set).add(nodeId));
+            node.loading = true;
+            this.loadingNodes.update((set) => new Set(set).add(node.id));
             this.refreshNodes();
-            const result = ds(nodeId);
+            const result = ds(node.id);
             const children = result instanceof Promise ? await result : result;
-            this.setNodeChildren(node, children);
-            this.setNodeChildrenCount(node, children.length);
+            node.children = children;
+            node.childrenCount = children.length;
         }
         catch (error) {
             this.handleError('Failed to load children', error);
-            this.setNodeChildrenCount(node, 0);
+            node.childrenCount = 0;
         }
         finally {
+            node.loading = false;
             this.loadingNodes.update((set) => {
                 const newSet = new Set(set);
-                newSet.delete(nodeId);
+                newSet.delete(node.id);
                 return newSet;
             });
             this.refreshNodes();
@@ -1697,12 +1375,11 @@ class AXTreeViewComponent {
      */
     ensureNewArrayReferences(nodes) {
         for (const node of nodes) {
-            const children = this.getNodeChildren(node);
-            if (children && children.length > 0) {
+            if (node.children && node.children.length > 0) {
                 // Create new array reference for children
-                this.setNodeChildren(node, [...children]);
+                node.children = [...node.children];
                 // Recursively process nested children
-                this.ensureNewArrayReferences(children);
+                this.ensureNewArrayReferences(node.children);
             }
         }
     }
@@ -1710,9 +1387,9 @@ class AXTreeViewComponent {
      * Handle single selection mode
      */
     handleSingleSelection(node, event) {
-        this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
-        this.setNodeSelected(node, true);
-        this.setNodeIndeterminate(node, false);
+        this.treeService.deselectAllNodes(this.nodes());
+        node.selected = true;
+        node.indeterminate = false;
         this.refreshNodes();
         this.onNodeSelect.emit({
             component: this,
@@ -1720,21 +1397,19 @@ class AXTreeViewComponent {
             nativeEvent: event,
             isUserInteraction: true,
         });
-        this.emitSelectionChange();
     }
     /**
      * Handle multiple selection mode with checkOnClick
      */
     handleMultipleSelection(node, event) {
-        const newValue = !this.getNodeSelected(node);
-        this.setNodeSelected(node, newValue);
-        this.setNodeIndeterminate(node, false);
-        const children = this.getNodeChildren(node);
-        if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-            this.treeService.selectAllChildren(children, newValue, this.selectedField(), this.indeterminateField(), this.childrenField());
+        const newValue = !node.selected;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
         }
-        if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-            this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
         }
         this.refreshNodes();
         this.onNodeSelect.emit({
@@ -1743,19 +1418,18 @@ class AXTreeViewComponent {
             nativeEvent: event,
             isUserInteraction: true,
         });
-        this.emitSelectionChange();
     }
     /**
      * Get array reference by drop list ID
      */
     getArrayByListId(listId) {
-        return this.treeService.getArrayByListId(this.nodes(), listId, this.idField(), this.childrenField());
+        return this.treeService.getArrayByListId(this.nodes(), listId);
     }
     /**
      * Find parent node by list ID
      */
     findParentByListId(listId) {
-        return this.treeService.findParentByListId(this.nodes(), listId, this.idField());
+        return this.treeService.findParentByListId(this.nodes(), listId);
     }
     /**
      * Check if move operation is allowed based on dragOperationType
@@ -1840,7 +1514,7 @@ class AXTreeViewComponent {
         const focusedId = this.focusedNodeId();
         if (!focusedId)
             return null;
-        return this.treeService.findNodeById(this.nodes(), focusedId, this.idField());
+        return this.treeService.findNodeById(this.nodes(), focusedId);
     }
     /**
      * Set focus to a node by ID
@@ -1884,14 +1558,14 @@ class AXTreeViewComponent {
                 break;
             case 'ArrowLeft':
                 if (currentFocused) {
-                    if (this.getNodeExpanded(currentFocused) && this.shouldShowExpandToggle(currentFocused)) {
+                    if (currentFocused.expanded && this.shouldShowExpandToggle(currentFocused)) {
                         this.toggleNode(currentFocused, event);
                         return { handled: true, shouldPreventDefault: true, targetIndex: null };
                     }
                     else {
                         const currentItem = flatList[currentIndex];
                         if (currentItem?.parent) {
-                            targetIndex = flatList.findIndex((item) => this.getNodeId(item.node) === this.getNodeId(currentItem.parent));
+                            targetIndex = flatList.findIndex((item) => item.node.id === currentItem.parent.id);
                         }
                         else {
                             shouldPreventDefault = false;
@@ -1904,21 +1578,22 @@ class AXTreeViewComponent {
                 break;
             case 'ArrowRight':
                 if (currentFocused) {
-                    if (!this.getNodeExpanded(currentFocused) && this.shouldShowExpandToggle(currentFocused)) {
+                    if (!currentFocused.expanded && this.shouldShowExpandToggle(currentFocused)) {
                         this.toggleNode(currentFocused, event);
                         return { handled: true, shouldPreventDefault: true, targetIndex: null };
                     }
-                    else if (this.getNodeExpanded(currentFocused) &&
-                        this.treeService.hasChildren(currentFocused, this.childrenField())) {
-                        const children = this.getNodeChildren(currentFocused);
-                        if (children && children.length > 0) {
+                    else if (currentFocused.expanded &&
+                        this.treeService.hasChildren(currentFocused) &&
+                        currentFocused.children) {
+                        const children = currentFocused.children;
+                        if (children.length > 0) {
                             const firstChild = children[0];
-                            targetIndex = flatList.findIndex((item) => this.getNodeId(item.node) === this.getNodeId(firstChild));
+                            targetIndex = flatList.findIndex((item) => item.node.id === firstChild.id);
                             if (targetIndex === -1) {
-                                const updatedFlatList = this.treeService.buildFlatNodeList(this.nodes(), this.hiddenField(), this.disabledField(), this.expandedField(), this.childrenField());
-                                targetIndex = updatedFlatList.findIndex((item) => this.getNodeId(item.node) === this.getNodeId(firstChild));
+                                const updatedFlatList = this.treeService.buildFlatNodeList(this.nodes());
+                                targetIndex = updatedFlatList.findIndex((item) => item.node.id === firstChild.id);
                                 if (targetIndex >= 0 && targetIndex < updatedFlatList.length) {
-                                    this.focusNodeById(this.getNodeId(updatedFlatList[targetIndex].node));
+                                    this.focusNodeById(updatedFlatList[targetIndex].node.id);
                                     return { handled: true, shouldPreventDefault: true, targetIndex: null };
                                 }
                             }
@@ -1943,7 +1618,7 @@ class AXTreeViewComponent {
                 break;
             case ' ':
             case 'Space':
-                if (currentFocused && this.selectMode() === 'multiple' && this.canSelectNode(currentFocused)) {
+                if (currentFocused && this.selectMode() === 'multiple') {
                     event.preventDefault();
                     this.handleSpaceKeySelection(currentFocused, event);
                     return { handled: true, shouldPreventDefault: true, targetIndex: null };
@@ -1951,7 +1626,7 @@ class AXTreeViewComponent {
                 shouldPreventDefault = false;
                 break;
             case 'Enter':
-                if (currentFocused && this.canSelectNode(currentFocused)) {
+                if (currentFocused) {
                     event.preventDefault();
                     this.handleEnterKeySelection(currentFocused, event);
                     return { handled: true, shouldPreventDefault: true, targetIndex: null };
@@ -1960,7 +1635,7 @@ class AXTreeViewComponent {
                 break;
             default:
                 if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-                    if (currentFocused && this.selectMode() === 'multiple' && this.canSelectNode(currentFocused)) {
+                    if (currentFocused && this.selectMode() === 'multiple') {
                         event.preventDefault();
                         this.handleCtrlEnterSelection(currentFocused, event);
                         return { handled: true, shouldPreventDefault: true, targetIndex: null };
@@ -1976,17 +1651,14 @@ class AXTreeViewComponent {
      * Handle Space key selection
      */
     handleSpaceKeySelection(node, event) {
-        if (!this.canSelectNode(node))
-            return;
-        const newValue = !this.getNodeSelected(node);
-        this.setNodeSelected(node, newValue);
-        this.setNodeIndeterminate(node, false);
-        const children = this.getNodeChildren(node);
-        if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-            this.treeService.selectAllChildren(children, newValue, this.selectedField(), this.indeterminateField(), this.childrenField());
+        const newValue = !node.selected;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
         }
-        if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-            this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
         }
         this.refreshNodes();
         this.onNodeSelect.emit({
@@ -1995,25 +1667,21 @@ class AXTreeViewComponent {
             nativeEvent: event,
             isUserInteraction: true,
         });
-        this.emitSelectionChange();
     }
     /**
      * Handle Enter key selection
      */
     handleEnterKeySelection(node, event) {
-        if (!this.canSelectNode(node))
-            return;
         const mode = this.selectMode();
-        this.treeService.deselectAllNodes(this.nodes(), this.selectedField(), this.indeterminateField(), this.childrenField());
-        this.setNodeSelected(node, true);
-        this.setNodeIndeterminate(node, false);
+        this.treeService.deselectAllNodes(this.nodes());
+        node.selected = true;
+        node.indeterminate = false;
         if (mode === 'multiple') {
-            const children = this.getNodeChildren(node);
-            if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-                this.treeService.selectAllChildren(children, true, this.selectedField(), this.indeterminateField(), this.childrenField());
+            if (this.checkChildrenOnSelect() && node.children) {
+                this.treeService.selectAllChildren(node.children, true);
             }
-            if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-                this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+            if (this.intermediateState()) {
+                this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
             }
         }
         this.refreshNodes();
@@ -2023,23 +1691,19 @@ class AXTreeViewComponent {
             nativeEvent: event,
             isUserInteraction: true,
         });
-        this.emitSelectionChange();
     }
     /**
      * Handle Ctrl/Cmd + Enter key selection
      */
     handleCtrlEnterSelection(node, event) {
-        if (!this.canSelectNode(node))
-            return;
-        const newValue = !this.getNodeSelected(node);
-        this.setNodeSelected(node, newValue);
-        this.setNodeIndeterminate(node, false);
-        const children = this.getNodeChildren(node);
-        if (this.cascadesToChildren() && children && !this.isLeafOnlyMode()) {
-            this.treeService.selectAllChildren(children, newValue, this.selectedField(), this.indeterminateField(), this.childrenField());
+        const newValue = !node.selected;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
         }
-        if (this.hasIntermediateState() && !this.isLeafOnlyMode()) {
-            this.treeService.updateParentStates(this.nodes(), node, this.hasIntermediateState(), this.idField(), this.childrenField(), this.selectedField(), this.indeterminateField());
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
         }
         this.refreshNodes();
         this.onNodeSelect.emit({
@@ -2048,7 +1712,6 @@ class AXTreeViewComponent {
             nativeEvent: event,
             isUserInteraction: true,
         });
-        this.emitSelectionChange();
     }
     /**
      * Type guard to check if value is an Event
@@ -2067,10 +1730,10 @@ class AXTreeViewComponent {
             console.error(`${message}:`, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, checkOnClick: { classPropertyName: "checkOnClick", publicName: "checkOnClick", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragOperationType: { classPropertyName: "dragOperationType", publicName: "dragOperationType", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"getNodeDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"getNodeDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (\n              showChildrenBadge() &&\n              (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n            ) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), 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]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"getNodeDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"getNodeDisabled(node) ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (\n                showChildrenBadge() &&\n                (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n              ) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkChildrenOnSelect: { classPropertyName: "checkChildrenOnSelect", publicName: "checkChildrenOnSelect", isSignal: true, isRequired: false, transformFunction: null }, intermediateState: { classPropertyName: "intermediateState", publicName: "intermediateState", isSignal: true, isRequired: false, transformFunction: null }, checkOnClick: { classPropertyName: "checkOnClick", publicName: "checkOnClick", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragOperationType: { classPropertyName: "dragOperationType", publicName: "dragOperationType", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree-view-comfortable]=\"nodeHeight() === 'comfortable'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"node.selected\"\n        [class.ax-tree-view-node-disabled]=\"node.disabled\"\n        [class.ax-tree-view-node-loading]=\"node.loading\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-tree-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(node.id)\"\n          [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree-view-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"node.selected\"\n          [class.ax-tree-view-node-disabled]=\"node.disabled\"\n          [class.ax-tree-view-node-loading]=\"node.loading\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(node.id)\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [style.padding-inline-start.px]=\"getNodePaddingInline(level)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-tree-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(node.id)\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-card-node-margin: .5rem;--ax-comp-tree-view-card-content-padding: 1rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-compact .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .25rem .5rem);gap:var(--ax-comp-tree-view-content-gap, .375rem);font-size:.8125rem}.ax-tree-view-comfortable .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .75rem .625rem);gap:var(--ax-comp-tree-view-content-gap, .625rem);font-size:.9375rem}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg);border-color:currentColor}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:1px solid transparent;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:var(--ax-comp-tree-view-card-node-margin) 0}.ax-tree-view-card .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-card-content-padding)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXTreeViewService], imports: [
                         CommonModule,
@@ -2084,7 +1747,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         AXCheckBoxComponent,
                         AXBadgeComponent,
                         AXDecoratorIconComponent,
-                        AXTooltipDirective,
                     ], host: {
                         class: 'ax-tree-view',
                         '[class.ax-tree-view-default]': "look() === 'default'",
@@ -2099,15 +1761,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '(focus)': 'onTreeFocus($event)',
                         '(blur)': 'onTreeBlur($event)',
                         tabindex: '0',
-                    }, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"getNodeDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"getNodeDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (\n              showChildrenBadge() &&\n              (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n            ) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), 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]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"getNodeDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"getNodeDisabled(node) ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (\n                showChildrenBadge() &&\n                (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n              ) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"] }]
-        }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], checkOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkOnClick", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], dragOperationType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragOperationType", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], iconField: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], selectedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedField", required: false }] }], indeterminateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], hiddenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], childrenCountField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenCountField", required: false }] }], dataField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataField", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
+                    }, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree-view-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree-view-comfortable]=\"nodeHeight() === 'comfortable'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"node.selected\"\n        [class.ax-tree-view-node-disabled]=\"node.disabled\"\n        [class.ax-tree-view-node-loading]=\"node.loading\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-tree-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(node.id)\"\n          [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree-view-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"node.selected\"\n          [class.ax-tree-view-node-disabled]=\"node.disabled\"\n          [class.ax-tree-view-node-loading]=\"node.loading\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(node.id)\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [style.padding-inline-start.px]=\"getNodePaddingInline(level)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-tree-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && checkOnClick())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(node.id)\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(node.id) ? 0 : -1\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"node.expanded ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span class=\"ax-tree-view-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-card-node-margin: .5rem;--ax-comp-tree-view-card-content-padding: 1rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-compact .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .25rem .5rem);gap:var(--ax-comp-tree-view-content-gap, .375rem);font-size:.8125rem}.ax-tree-view-comfortable .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-content-padding, .75rem .625rem);gap:var(--ax-comp-tree-view-content-gap, .625rem);font-size:.9375rem}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg);border-color:currentColor}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:1px solid transparent;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:var(--ax-comp-tree-view-card-node-margin) 0}.ax-tree-view-card .ax-tree-view-node-content{padding:var(--ax-comp-tree-view-card-content-padding)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"] }]
+        }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkChildrenOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkChildrenOnSelect", required: false }] }], intermediateState: [{ type: i0.Input, args: [{ isSignal: true, alias: "intermediateState", required: false }] }], checkOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkOnClick", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], dragOperationType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragOperationType", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
 
 class AXTreeViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AXTreeViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXTreeViewComponent],