@acorex/components 21.0.0-next.36 → 21.0.0-next.38

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

@@ -1,505 +1,1231 @@
-import { AXClickEvent, NXComponent, AXComponent, AXCommonModule } from '@acorex/cdk/common';
-import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
-import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip';
+import { moveItemInArray, transferArrayItem, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
+import { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';
+import { AXBadgeComponent } from '@acorex/components/badge';
+import { AXButtonComponent } from '@acorex/components/button';
+import { AXCheckBoxComponent } from '@acorex/components/check-box';
+import { AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { AXPlatform } from '@acorex/core/platform';
-import { AXTranslatorPipe } from '@acorex/core/translation';
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, model, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, output, effect, Input, HostBinding, NgModule } from '@angular/core';
-import { AXCheckBoxComponent, AXCheckBoxModule } from '@acorex/components/check-box';
-import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
-import * as i1$1 from '@angular/forms';
+import { Injectable, inject, DestroyRef, model, input, output, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { AXFormModule } from '@acorex/components/form';
+import { map } from 'rxjs/operators';
 
-class AXTreeItemClickBaseEvent extends AXClickEvent {
-}
-class AXTreeViewBase {
-}
-
-class AXTreeViewItemComponent extends NXComponent {
-    constructor() {
-        super();
-        this.treeView = inject(AXTreeViewBase);
-        this.item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
-        this.isExpanded = model(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-        this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.executorChanges = input(...(ngDevMode ? [undefined, { debugName: "executorChanges" }] : []));
-        this.platformService = inject(AXPlatform);
-        this.arrowIcon = computed(() => {
-            const baseClasses = 'ax-tree-view-arrow ax-icon ax-icon-solid';
-            const toggleIcons = this.treeView.toggleIcons();
-            if (toggleIcons) {
-                return this.isExpanded() ? `${baseClasses} ${toggleIcons.expanded}` : `${baseClasses} ${toggleIcons.collapsed}`;
-            }
-            if (this.isExpanded()) {
-                return `${baseClasses} ax-icon-chevron-down`;
+/**
+ * Service for tree node operations
+ * Handles all business logic for tree node manipulation
+ */
+class AXTreeViewService {
+    // ==================== Constants ====================
+    static { this.ROOT_LIST_ID = 'ax-tree-view-root-list'; }
+    static { this.NODE_DROP_PREFIX = 'ax-tree-view-node-drop-'; }
+    static { this.LIST_PREFIX = 'ax-tree-view-list-'; }
+    // ==================== Node Finding & Traversal ====================
+    /**
+     * Find a node by ID in the tree
+     */
+    findNodeById(nodes, id) {
+        for (const node of nodes) {
+            if (node.id === id)
+                return node;
+            if (node.children) {
+                const found = this.findNodeById(node.children, id);
+                if (found)
+                    return found;
             }
-            return this.platformService.isRtl()
-                ? `${baseClasses} ax-icon-chevron-left`
-                : `${baseClasses} ax-icon-chevron-right`;
-        }, ...(ngDevMode ? [{ debugName: "arrowIcon" }] : []));
-    }
-    handleArrowNodeClick() {
-        if (this.item()[this.treeView.disableField()] || this.isLoading() || this.treeView.expandOn() === 'dbClick') {
-            return;
-        }
-        this.isExpanded.set(!this.isExpanded());
-        if (this.treeView.itemsPromise && this.isExpanded() && !this.item()[this.treeView.childrenField()]?.length) {
-            this.treeView.fetchData(this.item());
-            this.treeView.setNodeLoading(this.item()[this.treeView.valueField()], true);
         }
-        this.treeView.onCollapsedChanged.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
+        return null;
     }
-    handleTextClick() {
-        if (this.item()[this.treeView.disableField()]) {
-            return;
+    /**
+     * Find parent node of a given node
+     */
+    findParentNode(nodes, targetNode) {
+        for (const node of nodes) {
+            if (node.children?.some((child) => child.id === targetNode.id)) {
+                return node;
+            }
+            if (node.children) {
+                const found = this.findParentNode(node.children, targetNode);
+                if (found)
+                    return found;
+            }
         }
-        if (this.treeView.focusNodeEnabled()) {
-            this.treeView.handleUnActiveNode(this.treeView.itemsSignal());
-            this.item()[this.treeView.activeField()] = true;
+        return undefined;
+    }
+    /**
+     * 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) {
+        if (movedNode.id === targetNode.id || this.isNodeDescendantOf(targetNode, movedNode)) {
+            return false;
         }
-        this.treeView.onNodeClick.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
+        return true;
     }
-    handleTextDbClick() {
-        if (this.item()[this.treeView.disableField()] || this.treeView.expandOn() === 'click') {
-            return;
+    /**
+     * Check if targetNode is a descendant of ancestorNode
+     */
+    isNodeDescendantOf(targetNode, ancestorNode) {
+        if (targetNode.id === ancestorNode.id) {
+            return true;
         }
-        if (this.item()?.[this.treeView.childrenField()] || this.item()[this.treeView.hasChildField()]) {
-            this.isExpanded.set(!this.isExpanded());
-            if (this.treeView.itemsPromise && this.isExpanded()) {
-                this.treeView.fetchData(this.item());
-                this.treeView.setNodeLoading(this.item()[this.treeView.valueField()], true);
+        if (!ancestorNode.children || ancestorNode.children.length === 0) {
+            return false;
+        }
+        for (const child of ancestorNode.children) {
+            if (child.id === targetNode.id) {
+                return true;
+            }
+            if (this.isNodeDescendantOf(targetNode, child)) {
+                return true;
             }
         }
-        this.treeView.onNodedbClick.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
-        this.treeView.onCollapsedChanged.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
+        return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXTreeViewItemComponent, isStandalone: true, selector: "ax-tree-view-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange", isActive: "isActiveChange" }, providers: [{ provide: AXComponent, useExisting: AXTreeViewItemComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n  @if (\n    (treeView.showEmptyNodeMassage() && item().hasOwnProperty(treeView.childrenField())) ||\n    (item()[this.treeView.childrenField()]?.length && !isLoading()) ||\n    (item()[treeView.hasChildField()] && !isLoading())\n  ) {\n    <div class=\"ax-tree-view-icon-container\" (click)=\"handleArrowNodeClick()\">\n      <i [class.ax-state-disabled]=\"item()[treeView.disableField()]\" class=\"{{ arrowIcon() }}\"></i>\n    </div>\n  } @else if (isLoading()) {\n    <ax-loading></ax-loading>\n  }\n\n  <div class=\"ax-tree-view-items\">\n    <ng-content select=\"ax-check-box\"></ng-content>\n    <div\n      [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n      [axTooltip]=\"item()[treeView.tooltipField()]\"\n      axTooltipPlacement=\"end-bottom\"\n      (click)=\"handleTextClick()\"\n      (dblclick)=\"handleTextDbClick()\"\n      class=\"ax-tree-view-items-prefix ax-noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item()[treeView.activeField()]\"\n    >\n      @if (treeView.itemTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"treeView.itemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item() }\"\n        ></ng-container>\n      } @else {\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <ng-content select=\"ax-text\"></ng-content>\n        <ng-content select=\"ax-suffix\"></ng-content>\n      }\n    </div>\n  </div>\n</div>\n\n@if (isExpanded()) {\n  <div\n    animate.enter=\"ax-fade-slide-in\"\n    animate.leave=\"ax-fade-slide-out\"\n    class=\"ax-tree-view-child\"\n    [class.ax-tree-view-empty-child]=\"\n      treeView.showEmptyNodeMassage() &&\n      item().hasOwnProperty(treeView.childrenField()) &&\n      !item()[treeView.childrenField()]?.length\n    \"\n  >\n    @if (\n      treeView.showEmptyNodeMassage() &&\n      item().hasOwnProperty(treeView.childrenField()) &&\n      !item()[treeView.childrenField()]?.length\n    ) {\n      <ng-container [ngTemplateOutlet]=\"empty\"></ng-container>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n}\n\n<ng-template #empty>\n  {{ '@acorex:common.general.no-result-found' | translate | async }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-tree-view-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXLoadingComponent, AXTooltipDirective, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXTreeViewItemComponent }], template: "<div class=\"ax-tree-view-container\">\n  @if (\n    (treeView.showEmptyNodeMassage() && item().hasOwnProperty(treeView.childrenField())) ||\n    (item()[this.treeView.childrenField()]?.length && !isLoading()) ||\n    (item()[treeView.hasChildField()] && !isLoading())\n  ) {\n    <div class=\"ax-tree-view-icon-container\" (click)=\"handleArrowNodeClick()\">\n      <i [class.ax-state-disabled]=\"item()[treeView.disableField()]\" class=\"{{ arrowIcon() }}\"></i>\n    </div>\n  } @else if (isLoading()) {\n    <ax-loading></ax-loading>\n  }\n\n  <div class=\"ax-tree-view-items\">\n    <ng-content select=\"ax-check-box\"></ng-content>\n    <div\n      [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n      [axTooltip]=\"item()[treeView.tooltipField()]\"\n      axTooltipPlacement=\"end-bottom\"\n      (click)=\"handleTextClick()\"\n      (dblclick)=\"handleTextDbClick()\"\n      class=\"ax-tree-view-items-prefix ax-noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item()[treeView.activeField()]\"\n    >\n      @if (treeView.itemTemplate) {\n        <ng-container\n          [ngTemplateOutlet]=\"treeView.itemTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: item() }\"\n        ></ng-container>\n      } @else {\n        <ng-content select=\"ax-prefix\"></ng-content>\n        <ng-content select=\"ax-text\"></ng-content>\n        <ng-content select=\"ax-suffix\"></ng-content>\n      }\n    </div>\n  </div>\n</div>\n\n@if (isExpanded()) {\n  <div\n    animate.enter=\"ax-fade-slide-in\"\n    animate.leave=\"ax-fade-slide-out\"\n    class=\"ax-tree-view-child\"\n    [class.ax-tree-view-empty-child]=\"\n      treeView.showEmptyNodeMassage() &&\n      item().hasOwnProperty(treeView.childrenField()) &&\n      !item()[treeView.childrenField()]?.length\n    \"\n  >\n    @if (\n      treeView.showEmptyNodeMassage() &&\n      item().hasOwnProperty(treeView.childrenField()) &&\n      !item()[treeView.childrenField()]?.length\n    ) {\n      <ng-container [ngTemplateOutlet]=\"empty\"></ng-container>\n    } @else {\n      <ng-content></ng-content>\n    }\n  </div>\n}\n\n<ng-template #empty>\n  {{ '@acorex:common.general.no-result-found' | translate | async }}\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }, { type: i0.Output, args: ["isExpandedChange"] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], executorChanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "executorChanges", required: false }] }] } });
-
-class AXTreeViewComponent extends NXComponent {
-    constructor() {
-        super(...arguments);
-        this.itemsSignal = signal([], ...(ngDevMode ? [{ debugName: "itemsSignal" }] : []));
-        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
-        this.showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
-        this.hasCheckboxField = input('hasCheckbox', ...(ngDevMode ? [{ debugName: "hasCheckboxField" }] : []));
-        this.selectionMode = input('single', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
-        this.selectionBehavior = input(...(ngDevMode ? [undefined, { debugName: "selectionBehavior" }] : []));
-        this.selectionScope = input('all', ...(ngDevMode ? [{ debugName: "selectionScope" }] : []));
-        this.focusNodeEnabled = input(true, ...(ngDevMode ? [{ debugName: "focusNodeEnabled" }] : []));
-        this.valueField = input('id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
-        this.textField = input('text', ...(ngDevMode ? [{ debugName: "textField" }] : []));
-        this.visibleField = input('visible', ...(ngDevMode ? [{ debugName: "visibleField" }] : []));
-        this.disableField = input('disabled', ...(ngDevMode ? [{ debugName: "disableField" }] : []));
-        this.hasChildField = input('hasChild', ...(ngDevMode ? [{ debugName: "hasChildField" }] : []));
-        this.selectedField = input('selected', ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
-        this.expandedField = input('expanded', ...(ngDevMode ? [{ debugName: "expandedField" }] : []));
-        this.tooltipField = input('tooltip', ...(ngDevMode ? [{ debugName: "tooltipField" }] : []));
-        this.childrenField = input('children', ...(ngDevMode ? [{ debugName: "childrenField" }] : []));
-        this.activeField = input('active', ...(ngDevMode ? [{ debugName: "activeField" }] : []));
-        this.indeterminateField = input('indeterminate', ...(ngDevMode ? [{ debugName: "indeterminateField" }] : []));
-        this.parentField = input('parentId', ...(ngDevMode ? [{ debugName: "parentField" }] : []));
-        this.iconField = input('icon', ...(ngDevMode ? [{ debugName: "iconField" }] : []));
-        this.toggleIcons = input(...(ngDevMode ? [undefined, { debugName: "toggleIcons" }] : []));
-        this.look = input('defult', ...(ngDevMode ? [{ debugName: "look" }] : []));
-        this.showEmptyNodeMassage = input(false, ...(ngDevMode ? [{ debugName: "showEmptyNodeMassage" }] : []));
-        this.onSelectionChanged = output();
-        this.onItemSelectedChanged = output();
-        this.onNodeClick = output();
-        this.onCollapsedChanged = output();
-        this.onNodedbClick = output();
-        this.executorChanges = signal(null, ...(ngDevMode ? [{ debugName: "executorChanges" }] : []));
-        this.platformService = inject(AXPlatform);
-        this.#effect = effect(() => {
-            const itemsInput = this.items();
-            if (typeof itemsInput === 'function') {
-                const result = itemsInput();
-                if (result instanceof Promise) {
-                    this.itemsPromise = (options) => itemsInput(options);
-                    this.fetchData();
-                }
-                else {
-                    this.itemsSignal.set(result);
-                    this.itemsPromise = null;
+    /**
+     * Build a flat list of all visible focusable nodes
+     */
+    buildFlatNodeList(nodes) {
+        const flatList = [];
+        const traverse = (nodeList, level, parent) => {
+            for (const node of nodeList) {
+                if (node.visible !== false && !node.disabled) {
+                    flatList.push({ node, level, parent });
+                    if (node.expanded && node.children) {
+                        traverse(node.children, level + 1, node);
+                    }
                 }
             }
-            else {
-                this.itemsSignal.set(itemsInput);
-                this.itemsPromise = null;
-            }
-        }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
-        this.expandOn = input('defult', ...(ngDevMode ? [{ debugName: "expandOn" }] : []));
-        this.loadingState = signal({}, ...(ngDevMode ? [{ debugName: "loadingState" }] : []));
+        };
+        traverse(nodes, 0);
+        return flatList;
     }
-    /** @ignore */
-    get __hostClass() {
-        return [`ax-look-${this.look()}`];
+    // ==================== Node State Checks ====================
+    /**
+     * Check if node has children
+     */
+    hasChildren(node) {
+        return Boolean(node.children?.length);
     }
-    get resolvedItems() {
-        return this.itemsSignal();
+    /**
+     * Check if node can be lazy loaded
+     */
+    canLazyLoad(node, isLazyDataSource) {
+        return isLazyDataSource && Boolean(node.childrenCount && node.childrenCount > 0 && !this.hasChildren(node));
     }
-    #effect;
-    handleNodeSelectionClick(event, item) {
-        if (item[this.disableField()] || this.isNodeLoading(item[this.valueField()])) {
-            return;
-        }
-        if (this.selectionMode() === 'single' && event.isUserInteraction) {
-            this.handleUnSelectNode(this.itemsSignal());
-        }
-        if (event.isUserInteraction) {
-            item[this.selectedField()] = event.value;
-            if (event.value !== null) {
-                switch (this.selectionBehavior()) {
-                    case 'autoExpand':
-                        if (event.value) {
-                            if (this.itemsPromise && item[this.hasChildField()] && !item?.[this.childrenField()]?.length) {
-                                this.setNodeLoading(item[this.valueField()], true);
-                                this.fetchData(item);
-                            }
-                            this.toggleExpand(item);
-                        }
-                        break;
-                    case 'cascade':
-                        this.expandAndToggleSelection(item, event.value);
-                        break;
-                    case 'indeterminate':
-                        if (item?.[this.childrenField()]?.length) {
-                            this.applySelectionToChildren(item, event.value, item[this.valueField()]);
-                        }
-                        this.updateParentSelection(item, event.value);
-                        break;
-                    default:
-                        break;
-                }
+    // ==================== Selection Management ====================
+    /**
+     * Recursively select/deselect all children
+     */
+    selectAllChildren(children, selected) {
+        for (const child of children) {
+            child.selected = selected;
+            child.indeterminate = false;
+            if (child.children) {
+                this.selectAllChildren(child.children, selected);
             }
-            this.onItemSelectedChanged.emit({
-                component: this,
-                data: item,
-                nativeElement: this.nativeElement,
-            });
-            const result = this.findSelectedNodes(this.itemsSignal());
-            this.onSelectionChanged.emit({
-                component: this,
-                data: result,
-                nativeElement: this.nativeElement,
-            });
         }
     }
     /**
-     *
-     * auto expand
-     *
+     * Get selection state of children
      */
-    toggleExpand(item) {
-        if (!item[this.expandedField()]) {
-            item[this.expandedField()] = true;
+    getChildrenSelectionState(children) {
+        let selectedCount = 0;
+        let indeterminateCount = 0;
+        for (const child of children) {
+            if (child.selected && !child.indeterminate) {
+                selectedCount++;
+            }
+            if (child.indeterminate) {
+                indeterminateCount++;
+            }
         }
+        return {
+            allSelected: selectedCount === children.length,
+            someSelected: selectedCount > 0 || indeterminateCount > 0,
+        };
     }
     /**
-     *
-     * expand and change value parent change
-     *
+     * Update parent node states based on children selection (with intermediate state support)
      */
-    async expandAndToggleSelection(item, selected) {
-        if (this.itemsPromise && item[this.hasChildField()] && !item?.[this.childrenField()]?.length) {
-            await this.setNodeLoading(item[this.valueField()], true);
-            await this.fetchData(item);
+    updateParentStates(nodes, changedNode, intermediateState) {
+        const parent = this.findParentNode(nodes, changedNode);
+        if (!parent || !parent.children)
+            return;
+        const { allSelected, someSelected } = this.getChildrenSelectionState(parent.children);
+        if (allSelected) {
+            parent.selected = true;
+            parent.indeterminate = false;
         }
-        this.toggleExpand(item);
-        if (item[this.childrenField()]?.length) {
-            this.applySelectionToChildren(item, selected, item[this.valueField()]);
+        else if (someSelected) {
+            if (intermediateState) {
+                parent.selected = true;
+                parent.indeterminate = true;
+            }
+            else {
+                parent.selected = false;
+                parent.indeterminate = false;
+            }
         }
+        else {
+            parent.selected = false;
+            parent.indeterminate = false;
+        }
+        this.updateParentStates(nodes, parent, intermediateState);
     }
-    applySelectionToChildren(item, isSelected, parentId) {
-        item[this.childrenField()].forEach(async (child) => {
-            if (this.itemsPromise &&
-                child[this.hasChildField()] &&
-                !child?.[this.childrenField()]?.length &&
-                this.selectionBehavior() === 'cascade') {
-                await this.setNodeLoading(child[this.valueField()], true);
-                await this.fetchData(child);
-                this.toggleExpand(child);
+    /**
+     * Recursively deselect all nodes
+     */
+    deselectAllNodes(nodes) {
+        for (const node of nodes) {
+            node.selected = false;
+            node.indeterminate = false;
+            if (node.children) {
+                this.deselectAllNodes(node.children);
             }
-            child[this.parentField()] = parentId;
-            child[this.selectedField()] = isSelected;
-            if (child[this.childrenField()]?.length) {
-                this.applySelectionToChildren(child, isSelected, child[this.valueField()]);
+        }
+    }
+    /**
+     * Recursively set selection state for all nodes
+     */
+    setAllSelection(nodes, selected) {
+        for (const node of nodes) {
+            node.selected = selected;
+            node.indeterminate = false;
+            if (node.children) {
+                this.setAllSelection(node.children, selected);
             }
-        });
+        }
     }
     /**
-     *
-     * indeterminate logic
-     *
+     * Recursively count selected nodes
      */
-    updateParentSelection(item, selected) {
-        item[this.selectedField()] = selected;
-        let parent = this.findParent(item, this.itemsSignal());
-        while ((parent && parent[this.selectedField()] != false) || (parent && item[this.selectedField()])) {
-            const allSelected = parent?.[this.childrenField()]?.every((child) => child[this.selectedField()]);
-            const someSelected = parent?.[this.childrenField()]?.some((child) => child[this.selectedField()] || child[this.indeterminateField()]);
-            if (!allSelected && !someSelected) {
-                parent[this.selectedField()] = false;
-                parent[this.indeterminateField()] = null;
+    countSelected(nodes) {
+        let count = 0;
+        for (const node of nodes) {
+            if (node.selected)
+                count++;
+            if (node.children) {
+                count += this.countSelected(node.children);
             }
-            else if (!allSelected) {
-                parent[this.indeterminateField()] = true;
-                parent[this.selectedField()] = null;
+        }
+        return count;
+    }
+    /**
+     * Recursively collect selected nodes
+     */
+    collectSelected(nodes, result) {
+        for (const node of nodes) {
+            if (node.selected)
+                result.push(node);
+            if (node.children) {
+                this.collectSelected(node.children, result);
             }
-            else if (allSelected) {
-                parent[this.selectedField()] = true;
-                parent[this.indeterminateField()] = false;
+        }
+    }
+    /**
+     * Recursively remove selected nodes
+     */
+    removeSelected(nodes) {
+        for (let i = nodes.length - 1; i >= 0; i--) {
+            if (nodes[i].selected && !nodes[i].indeterminate) {
+                nodes.splice(i, 1);
             }
-            else {
-                parent[this.indeterminateField()] = false;
-                parent[this.selectedField()] = true;
+            else if (nodes[i].children) {
+                this.removeSelected(nodes[i].children ?? []);
             }
-            parent = this.findParent(parent, this.itemsSignal());
         }
     }
-    findParent(item, nodes) {
+    /**
+     * Recursively update all parent states in the tree (used after deletion)
+     */
+    updateAllParentStates(nodes, intermediateState) {
         for (const node of nodes) {
-            if (node[this.childrenField()]?.includes(item)) {
-                return node;
+            if (node.children && node.children.length > 0) {
+                this.updateAllParentStates(node.children, intermediateState);
+                const { allSelected, someSelected } = this.getChildrenSelectionState(node.children);
+                if (allSelected) {
+                    node.selected = true;
+                    node.indeterminate = false;
+                }
+                else if (someSelected) {
+                    if (intermediateState) {
+                        node.selected = true;
+                        node.indeterminate = true;
+                    }
+                    else {
+                        node.selected = false;
+                        node.indeterminate = false;
+                    }
+                }
+                else {
+                    node.selected = false;
+                    node.indeterminate = false;
+                }
             }
-            else if (node[this.childrenField()]) {
-                const parent = this.findParent(item, node[this.childrenField()]);
-                if (parent)
-                    return parent;
+        }
+    }
+    // ==================== Expansion Management ====================
+    /**
+     * Recursively set expanded state (with lazy loading)
+     */
+    async setExpandedState(nodes, expanded, isLazyDataSource, loadNodeChildren) {
+        for (const node of nodes) {
+            const hasChildren = this.hasChildren(node);
+            const canLazyLoad = this.canLazyLoad(node, isLazyDataSource);
+            if (hasChildren || canLazyLoad) {
+                if (expanded && canLazyLoad) {
+                    await loadNodeChildren(node);
+                }
+                node.expanded = expanded;
+                if (node.children) {
+                    await this.setExpandedState(node.children, expanded, isLazyDataSource, loadNodeChildren);
+                }
             }
         }
-        return null;
+    }
+    // ==================== Drag & Drop Helpers ====================
+    /**
+     * Get array reference by drop list ID
+     */
+    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);
+            return node ? [node] : null;
+        }
+        const nodeId = listId.replace(AXTreeViewService.LIST_PREFIX, '');
+        const node = this.findNodeById(nodes, nodeId);
+        return node?.children ?? null;
+    }
+    /**
+     * Find parent node by list ID
+     */
+    findParentByListId(nodes, listId) {
+        if (listId === AXTreeViewService.ROOT_LIST_ID) {
+            return undefined;
+        }
+        const prefix = listId.startsWith(AXTreeViewService.NODE_DROP_PREFIX)
+            ? AXTreeViewService.NODE_DROP_PREFIX
+            : AXTreeViewService.LIST_PREFIX;
+        const nodeId = listId.replace(prefix, '');
+        return this.findNodeById(nodes, nodeId) ?? undefined;
+    }
+    /**
+     * Generate unique list ID for each node
+     */
+    getListId(node) {
+        return node ? `${AXTreeViewService.LIST_PREFIX}${node.id}` : AXTreeViewService.ROOT_LIST_ID;
     }
     /**
-     *
-     * find node selected true for emit Selections
-     *
+     * Get root list ID constant
      */
-    findSelectedNodes(nodes) {
-        let selectedNodes = [];
-        nodes.forEach((node) => {
-            if (node[this.selectedField()]) {
-                selectedNodes.push(node);
+    getRootListId() {
+        return AXTreeViewService.ROOT_LIST_ID;
+    }
+    /**
+     * Get node drop prefix constant
+     */
+    getNodeDropPrefix() {
+        return AXTreeViewService.NODE_DROP_PREFIX;
+    }
+    /**
+     * Get list prefix constant
+     */
+    getListPrefix() {
+        return AXTreeViewService.LIST_PREFIX;
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService, decorators: [{
+            type: Injectable
+        }] });
+
+class AXTreeViewComponent {
+    constructor() {
+        // ==================== Dependencies ====================
+        this.treeService = inject(AXTreeViewService);
+        this.platformService = inject(AXPlatform);
+        this.destroyRef = inject(DestroyRef);
+        // ==================== Inputs ====================
+        /** Tree data source - can be static array or lazy loading function */
+        this.datasource = model.required(...(ngDevMode ? [{ debugName: "datasource" }] : []));
+        /** Selection mode: 'single' (click to select) or 'multiple' (checkbox selection) */
+        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" }] : []));
+        /** 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) */
+        this.dragMode = input('handler', ...(ngDevMode ? [{ debugName: "dragMode" }] : []));
+        /** Drag operation type: 'order-only' (reorder only), 'move' (move between parents), 'both' (allow both) */
+        this.dragOperationType = input('both', ...(ngDevMode ? [{ debugName: "dragOperationType" }] : []));
+        /** Whether to show icons */
+        this.showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
+        /** Whether to show children count badge */
+        this.showChildrenBadge = input(true, ...(ngDevMode ? [{ debugName: "showChildrenBadge" }] : []));
+        /** Custom icon for expanded nodes */
+        this.expandedIcon = input('fa-solid fa-chevron-down', ...(ngDevMode ? [{ debugName: "expandedIcon" }] : []));
+        /** Custom icon for collapsed nodes */
+        this.collapsedIcon = input('fa-solid fa-chevron-right', ...(ngDevMode ? [{ debugName: "collapsedIcon" }] : []));
+        /** Indent size in pixels for each level */
+        this.indentSize = input(12, ...(ngDevMode ? [{ debugName: "indentSize" }] : []));
+        /** Node height in pixels */
+        this.nodeHeight = input('normal', ...(ngDevMode ? [{ debugName: "nodeHeight" }] : []));
+        /** Visual style variant */
+        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        /** Custom template for tree items */
+        this.itemTemplate = input(...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : []));
+        // ==================== Outputs ====================
+        /** Emitted before a drop operation - set canceled to true to prevent drop */
+        this.onBeforeDrop = output();
+        /** Emitted when a node is toggled (expanded/collapsed) */
+        this.onNodeToggle = output();
+        /** Emitted when a node is selected/deselected */
+        this.onNodeSelect = output();
+        /** Emitted when nodes are reordered within the same parent */
+        this.onOrderChange = output();
+        /** Emitted when a node is moved to a different parent */
+        this.onMoveChange = output();
+        /** Emitted for any item change (order or move) */
+        this.onItemsChange = output();
+        // ==================== Internal State ====================
+        /** Internal signal for tree nodes */
+        this.nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+        /** Internal signal for tracking loading state */
+        this.loadingNodes = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingNodes" }] : []));
+        /** Currently focused node ID for keyboard navigation */
+        this.focusedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "focusedNodeId" }] : []));
+        /** RTL detection signal */
+        this.isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+        /** Computed chevron icons that flip for RTL */
+        this.directionExpandedIcon = computed(() => this.expandedIcon(), ...(ngDevMode ? [{ debugName: "directionExpandedIcon" }] : []));
+        this.directionCollapsedIcon = computed(() => {
+            const isRtlDirection = this.isRtl();
+            const defaultIcon = this.collapsedIcon();
+            if (isRtlDirection && defaultIcon === 'fa-solid fa-chevron-right') {
+                return 'fa-solid fa-chevron-left';
+            }
+            if (!isRtlDirection && defaultIcon === 'fa-solid fa-chevron-left') {
+                return 'fa-solid fa-chevron-right';
+            }
+            return defaultIcon;
+        }, ...(ngDevMode ? [{ debugName: "directionCollapsedIcon" }] : []));
+        /** Flag to prevent infinite loops when syncing datasource */
+        this.isUpdatingFromDatasource = false;
+        /** Computed to check if datasource is a function */
+        this.isLazyDataSource = computed(() => typeof this.datasource() === 'function', ...(ngDevMode ? [{ debugName: "isLazyDataSource" }] : []));
+        // ==================== Effects ====================
+        /** Effect to handle datasource changes */
+        this.#datasourceEffect = effect(() => {
+            if (this.isUpdatingFromDatasource)
+                return;
+            const ds = this.datasource();
+            if (Array.isArray(ds)) {
+                this.nodes.set([...ds]);
             }
-            if (node[this.childrenField()]) {
-                selectedNodes = selectedNodes.concat(this.findSelectedNodes(node[this.childrenField()]));
+            else if (typeof ds === 'function') {
+                this.loadRootItems(ds).catch((error) => {
+                    this.handleError('Failed to load root items', error);
+                });
             }
+        }, ...(ngDevMode ? [{ debugName: "#datasourceEffect" }] : []));
+        /** Initialize direction change listener */
+        this.#initDirectionListener = afterNextRender(() => {
+            this.platformService.directionChange
+                .pipe(map((event) => event.data === 'rtl'), takeUntilDestroyed(this.destroyRef))
+                .subscribe((isRtl) => this.isRtl.set(isRtl));
         });
-        return selectedNodes;
     }
+    // ==================== Effects ====================
+    /** Effect to handle datasource changes */
+    #datasourceEffect;
+    /** Initialize direction change listener */
+    #initDirectionListener;
+    // ==================== Public API ====================
     /**
-     *
-     * find for emit Selections single mode
-     *
+     * Expand all nodes in the tree (with lazy loading support)
      */
-    handleUnSelectNode(items) {
-        items.forEach((child) => {
-            child[this.selectedField()] = false;
-            if (child?.[this.childrenField()]?.length) {
-                this.handleUnSelectNode(child[this.childrenField()]);
-            }
-        });
+    async expandAll() {
+        await this.treeService.setExpandedState(this.nodes(), true, this.isLazyDataSource(), (node) => this.loadNodeChildren(node));
+        this.refreshNodes();
     }
     /**
-     *
-     * lazy load logic
-     *
+     * Collapse all nodes in the tree
      */
-    fetchData(selectedNode) {
-        this.itemsPromise(selectedNode?.[this.valueField()])
-            .then((data) => {
-            if (Array.isArray(data)) {
-                if (selectedNode?.[this.valueField()]) {
-                    this.findNode(selectedNode[this.valueField()], data, this.itemsSignal());
-                }
-                else {
-                    const isNodeExpanded = data.filter((child) => child[this.expandedField()]);
-                    isNodeExpanded.forEach((child) => {
-                        this.fetchData(child);
-                    });
-                    this.itemsSignal.set(data);
-                }
+    collapseAll() {
+        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());
+    }
+    /**
+     * Check if any nodes are selected
+     */
+    hasSelection() {
+        return this.getSelectedCount() > 0;
+    }
+    /**
+     * Get all selected nodes
+     */
+    getSelectedNodes() {
+        const selected = [];
+        this.treeService.collectSelected(this.nodes(), selected);
+        return selected;
+    }
+    /**
+     * Delete selected nodes from the tree
+     */
+    deleteSelected() {
+        this.treeService.removeSelected(this.nodes());
+        this.treeService.updateAllParentStates(this.nodes(), this.intermediateState());
+        this.refreshNodes();
+    }
+    /**
+     * Select all nodes in the tree
+     */
+    selectAll() {
+        this.treeService.setAllSelection(this.nodes(), true);
+        this.refreshNodes();
+    }
+    /**
+     * Deselect all nodes in the tree
+     */
+    deselectAll() {
+        this.treeService.setAllSelection(this.nodes(), false);
+        this.refreshNodes();
+    }
+    /**
+     * Find a node by ID in the tree
+     */
+    findNode(id) {
+        return this.treeService.findNodeById(this.nodes(), id);
+    }
+    /**
+     * Refresh the tree to trigger change detection
+     */
+    refresh() {
+        this.refreshNodes();
+    }
+    /**
+     * Check if a node is currently loading
+     */
+    isNodeLoading(nodeId) {
+        return this.loadingNodes().has(nodeId);
+    }
+    /**
+     * Get template context for a node
+     */
+    getTemplateContext(node, level = 0) {
+        return {
+            $implicit: node,
+            node,
+            level,
+            expanded: node.expanded ?? false,
+            childrenCount: node.childrenCount ?? node.children?.length ?? 0,
+            loading: node.loading ?? false,
+        };
+    }
+    /**
+     * Calculate padding-inline for a node based on its level
+     */
+    getNodePaddingInline(level) {
+        const indent = this.indentSize();
+        const currentLook = this.look();
+        const multiplier = currentLook === 'with-line' ? 1 / 3 : 1;
+        return level * indent * multiplier;
+    }
+    /**
+     * Check if node should show expand toggle
+     */
+    shouldShowExpandToggle(node) {
+        return this.treeService.hasChildren(node) || this.treeService.canLazyLoad(node, this.isLazyDataSource());
+    }
+    /**
+     * Check if checkboxes should be shown (only for multiple mode)
+     */
+    shouldShowCheckbox() {
+        return this.selectMode() === 'multiple' && this.showCheckbox();
+    }
+    /**
+     * Generate unique list ID for each node
+     */
+    getListId(node) {
+        return this.treeService.getListId(node);
+    }
+    /**
+     * Check if a node is currently focused
+     */
+    isNodeFocused(nodeId) {
+        return this.focusedNodeId() === nodeId;
+    }
+    /**
+     * Get ARIA level for a node
+     */
+    getNodeAriaLevel(level) {
+        return level + 1;
+    }
+    /**
+     * Get ARIA expanded state for a node
+     */
+    getNodeAriaExpanded(node) {
+        if (!this.shouldShowExpandToggle(node)) {
+            return null;
+        }
+        return node.expanded ? 'true' : 'false';
+    }
+    /**
+     * Get ARIA selected state for a node
+     */
+    getNodeAriaSelected(node) {
+        if (this.selectMode() === 'single') {
+            return node.selected ? 'true' : 'false';
+        }
+        return null;
+    }
+    // ==================== Event Handlers ====================
+    /**
+     * Handle node click - for single selection mode or multiple mode with checkOnClick enabled
+     */
+    onNodeClick(node, event) {
+        if (node.disabled)
+            return;
+        const mode = this.selectMode();
+        const shouldCheckOnClick = this.checkOnClick();
+        if (mode === 'single') {
+            this.handleSingleSelection(node, event);
+        }
+        else if (mode === 'multiple' && shouldCheckOnClick) {
+            this.handleMultipleSelection(node, event);
+        }
+    }
+    /**
+     * Toggle node expansion state with lazy loading support
+     */
+    async toggleNode(node, event) {
+        if (node.disabled)
+            return;
+        if (this.isEvent(event) && typeof event.stopPropagation === 'function') {
+            event.stopPropagation();
+        }
+        const hasChildren = this.treeService.hasChildren(node);
+        const canLazyLoad = this.treeService.canLazyLoad(node, this.isLazyDataSource());
+        if (hasChildren || canLazyLoad) {
+            const willExpand = !node.expanded;
+            if (willExpand && canLazyLoad) {
+                await this.loadNodeChildren(node);
             }
-        })
-            .finally(() => {
-            this.setNodeLoading(selectedNode?.[this.valueField()], false);
+            node.expanded = willExpand;
+            this.refreshNodes();
+            this.onNodeToggle.emit({ component: this, node, nativeEvent: event });
+        }
+    }
+    /**
+     * Toggle node selection state with indeterminate support (for multiple mode)
+     */
+    toggleSelection(node, event) {
+        if (!event.isUserInteraction)
+            return;
+        const mode = this.selectMode();
+        if (mode !== 'multiple')
+            return;
+        const newValue = event.value === null ? true : event.value;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
+        }
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
+        }
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            isUserInteraction: event.isUserInteraction,
         });
     }
-    findNode(parentId, _children, source) {
-        if (source.length) {
-            source.forEach((element) => {
-                if (element[this.valueField()] == parentId) {
-                    if (this.selectionBehavior() === 'indeterminate' && element[this.selectedField()]) {
-                        _children.forEach((child) => (child[this.selectedField()] = true));
+    /**
+     * Handle drop events for tree nodes
+     */
+    onDrop(event, parentNode) {
+        const targetArray = parentNode?.children ?? this.nodes();
+        const isReordering = event.previousContainer === event.container;
+        if (isReordering) {
+            this.handleReorder(event, targetArray, parentNode);
+        }
+        else {
+            this.handleMove(event, targetArray, parentNode);
+        }
+        this.refreshNodes();
+    }
+    /**
+     * Handle drop events when dropping directly onto a node (to make it a child)
+     */
+    onDropOntoNode(event, targetNode) {
+        if (!this.canMoveToParent())
+            return;
+        const sourceListId = event.previousContainer.element.id;
+        const sourceArray = this.getArrayByListId(sourceListId);
+        if (!sourceArray)
+            return;
+        const movedNode = sourceArray[event.previousIndex];
+        if (!this.treeService.isValidDropTarget(movedNode, targetNode))
+            return;
+        if (!this.emitBeforeDropEvent(movedNode, sourceListId, targetNode, event.previousIndex, 0))
+            return;
+        targetNode.children ??= [];
+        sourceArray.splice(event.previousIndex, 1);
+        targetNode.children.unshift(movedNode);
+        targetNode.expanded = true;
+        this.emitDropEvents(movedNode, this.findParentByListId(sourceListId), targetNode, event.previousIndex, 0, false);
+        this.refreshNodes();
+    }
+    /**
+     * Handle node focus event
+     */
+    onNodeFocus(nodeId) {
+        this.focusedNodeId.set(nodeId);
+    }
+    /**
+     * Handle tree container focus - focus first node if none is focused
+     */
+    onTreeFocus(event) {
+        if (event.target === event.currentTarget) {
+            afterNextRender(() => {
+                const flatList = this.treeService.buildFlatNodeList(this.nodes());
+                if (flatList.length > 0) {
+                    const focusedId = this.focusedNodeId();
+                    if (focusedId) {
+                        this.focusNodeById(focusedId);
+                    }
+                    else {
+                        this.focusNodeById(flatList[0].node.id);
                     }
-                    element[this.childrenField()] = _children;
-                }
-                else {
-                    if (element?.[this.childrenField()])
-                        this.findNode(parentId, _children, element[this.childrenField()]);
                 }
             });
         }
     }
     /**
-     *
-     * emit when arrow click
-     *
+     * Handle tree container blur
+     */
+    onTreeBlur(event) {
+        if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) {
+            this.focusedNodeId.set(null);
+        }
+    }
+    /**
+     * Handle keyboard navigation
+     */
+    handleKeyDown(event) {
+        const flatList = this.treeService.buildFlatNodeList(this.nodes());
+        if (flatList.length === 0)
+            return;
+        const currentFocused = this.getFocusedNode();
+        let currentIndex = currentFocused ? flatList.findIndex((item) => item.node.id === currentFocused.id) : -1;
+        if (currentIndex === -1 && event.target === event.currentTarget) {
+            currentIndex = 0;
+        }
+        const navigationResult = this.handleNavigationKey(event, flatList, currentIndex, currentFocused);
+        if (navigationResult.handled) {
+            if (navigationResult.shouldPreventDefault) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            if (navigationResult.targetIndex !== null &&
+                navigationResult.targetIndex >= 0 &&
+                navigationResult.targetIndex < flatList.length) {
+                this.focusNodeById(flatList[navigationResult.targetIndex].node.id);
+            }
+        }
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Load root items when datasource is a function
+     */
+    async loadRootItems(loadFn) {
+        try {
+            const result = loadFn();
+            const rootNodes = result instanceof Promise ? await result : result;
+            this.nodes.set(rootNodes);
+        }
+        catch (error) {
+            this.handleError('Failed to load root items', error);
+            this.nodes.set([]);
+        }
+    }
+    /**
+     * Load children for a node using lazy loading
+     */
+    async loadNodeChildren(node) {
+        if (!this.isLazyDataSource() || node.loading)
+            return;
+        if (this.treeService.hasChildren(node) || !node.childrenCount || node.childrenCount === 0) {
+            return;
+        }
+        const ds = this.datasource();
+        if (typeof ds !== 'function')
+            return;
+        try {
+            node.loading = true;
+            this.loadingNodes.update((set) => new Set(set).add(node.id));
+            this.refreshNodes();
+            const result = ds(node.id);
+            const children = result instanceof Promise ? await result : result;
+            node.children = children;
+            node.childrenCount = children.length;
+        }
+        catch (error) {
+            this.handleError('Failed to load children', error);
+            node.childrenCount = 0;
+        }
+        finally {
+            node.loading = false;
+            this.loadingNodes.update((set) => {
+                const newSet = new Set(set);
+                newSet.delete(node.id);
+                return newSet;
+            });
+            this.refreshNodes();
+        }
+    }
+    /**
+     * Internal method to refresh nodes signal and sync back to datasource if it's an array
+     * Creates new array references for all nested children to ensure reactivity
      */
-    handleNodeExpandClick(node) {
-        const selectedNode = node.data;
-        if (this.itemsPromise && node.data[this.expandedField()] && !node?.data[this.childrenField()]?.length) {
-            this.setNodeLoading(selectedNode[this.valueField()], true);
-            this.fetchData(selectedNode);
+    refreshNodes() {
+        const currentNodes = this.nodes();
+        // Create new array references for all nested children to ensure reactivity
+        // This ensures Angular's change detection picks up changes even with callback datasource
+        this.ensureNewArrayReferences(currentNodes);
+        this.nodes.set([...currentNodes]);
+        if (!this.isLazyDataSource() && !this.isUpdatingFromDatasource) {
+            this.isUpdatingFromDatasource = true;
+            this.datasource.set([...currentNodes]);
+            setTimeout(() => {
+                this.isUpdatingFromDatasource = false;
+            }, 0);
         }
-        this.onCollapsedChanged.emit({ component: this, data: node.data, nativeElement: this.nativeElement });
     }
-    handleUnActiveNode(unActiveSource) {
-        unActiveSource.forEach((child) => {
-            child[this.activeField()] = false;
-            if (child?.[this.childrenField()]?.length) {
-                this.handleUnActiveNode(child[this.childrenField()]);
+    /**
+     * Recursively ensure all children arrays have new references to trigger change detection
+     * Mutates the tree structure by replacing children arrays with new array references
+     */
+    ensureNewArrayReferences(nodes) {
+        for (const node of nodes) {
+            if (node.children && node.children.length > 0) {
+                // Create new array reference for children
+                node.children = [...node.children];
+                // Recursively process nested children
+                this.ensureNewArrayReferences(node.children);
             }
+        }
+    }
+    /**
+     * Handle single selection mode
+     */
+    handleSingleSelection(node, event) {
+        this.treeService.deselectAllNodes(this.nodes());
+        node.selected = true;
+        node.indeterminate = false;
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            nativeEvent: event,
+            isUserInteraction: true,
         });
     }
-    isNodeLoading(nodeId) {
-        return this.loadingState()[nodeId] || false;
-    }
-    setNodeLoading(nodeId, isLoading) {
-        this.loadingState.update((state) => ({
-            ...state,
-            [nodeId]: isLoading,
-        }));
-    }
-    executeOnTreeNode(node, operation, value) {
-        switch (operation) {
-            case 'active':
-                node[this.activeField()] = value;
+    /**
+     * Handle multiple selection mode with checkOnClick
+     */
+    handleMultipleSelection(node, event) {
+        const newValue = !node.selected;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
+        }
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
+        }
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            nativeEvent: event,
+            isUserInteraction: true,
+        });
+    }
+    /**
+     * Get array reference by drop list ID
+     */
+    getArrayByListId(listId) {
+        return this.treeService.getArrayByListId(this.nodes(), listId);
+    }
+    /**
+     * Find parent node by list ID
+     */
+    findParentByListId(listId) {
+        return this.treeService.findParentByListId(this.nodes(), listId);
+    }
+    /**
+     * Check if move operation is allowed based on dragOperationType
+     */
+    canMoveToParent() {
+        return this.dragOperationType() !== 'order-only';
+    }
+    /**
+     * Check if reorder operation is allowed based on dragOperationType
+     */
+    canReorder() {
+        return this.dragOperationType() !== 'move';
+    }
+    /**
+     * Handle reordering within the same list   */
+    handleReorder(event, targetArray, parentNode) {
+        if (!this.canReorder())
+            return;
+        const movedNode = targetArray[event.previousIndex];
+        moveItemInArray(targetArray, event.previousIndex, event.currentIndex);
+        this.emitDropEvents(movedNode, parentNode, parentNode, event.previousIndex, event.currentIndex, true);
+    }
+    /**
+     * Handle moving between different lists
+     */
+    handleMove(event, targetArray, parentNode) {
+        if (!this.canMoveToParent())
+            return;
+        const sourceListId = event.previousContainer.element.id;
+        const sourceArray = this.getArrayByListId(sourceListId);
+        if (!sourceArray)
+            return;
+        const movedNode = sourceArray[event.previousIndex];
+        if (parentNode && !this.treeService.isValidDropTarget(movedNode, parentNode))
+            return;
+        if (!this.emitBeforeDropEvent(movedNode, sourceListId, parentNode, event.previousIndex, event.currentIndex)) {
+            return;
+        }
+        transferArrayItem(sourceArray, targetArray, event.previousIndex, event.currentIndex);
+        this.emitDropEvents(movedNode, this.findParentByListId(sourceListId), parentNode, event.previousIndex, event.currentIndex, false);
+    }
+    /**
+     * Emit beforeDrop event and return whether to continue
+     */
+    emitBeforeDropEvent(movedNode, sourceListId, currentParent, previousIndex, currentIndex) {
+        const beforeDropEvent = {
+            component: this,
+            movedNode,
+            previousParent: this.findParentByListId(sourceListId),
+            currentParent,
+            previousIndex,
+            currentIndex,
+            canceled: false,
+        };
+        this.onBeforeDrop.emit(beforeDropEvent);
+        return !beforeDropEvent.canceled;
+    }
+    /**
+     * Emit drop events based on operation type
+     */
+    emitDropEvents(node, previousParent, currentParent, previousIndex, currentIndex, isReorder) {
+        const dropEvent = {
+            component: this,
+            node,
+            previousParent,
+            currentParent,
+            previousIndex,
+            currentIndex,
+        };
+        if (isReorder) {
+            this.onOrderChange.emit(dropEvent);
+        }
+        else {
+            this.onMoveChange.emit(dropEvent);
+        }
+        this.onItemsChange.emit(dropEvent);
+    }
+    /**
+     * Get the currently focused node
+     */
+    getFocusedNode() {
+        const focusedId = this.focusedNodeId();
+        if (!focusedId)
+            return null;
+        return this.treeService.findNodeById(this.nodes(), focusedId);
+    }
+    /**
+     * Set focus to a node by ID
+     */
+    focusNodeById(nodeId) {
+        this.focusedNodeId.set(nodeId);
+        setTimeout(() => {
+            const element = document.querySelector(`[data-tree-node-id="${nodeId}"]`);
+            if (element) {
+                element.focus();
+                element.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }, 0);
+    }
+    /**
+     * Handle keyboard navigation keys
+     */
+    handleNavigationKey(event, flatList, currentIndex, currentFocused) {
+        let targetIndex = currentIndex;
+        let shouldPreventDefault = true;
+        let handled = true;
+        switch (event.key) {
+            case 'ArrowUp':
+                if (currentIndex > 0) {
+                    targetIndex = currentIndex - 1;
+                }
+                else {
+                    shouldPreventDefault = false;
+                }
                 break;
-            case 'expand':
-                node[this.expandedField()] = true;
-                if (this.itemsPromise && node[this.hasChildField()] && !node[this.childrenField()]?.length) {
-                    this.handleNodeExpandClick({ data: node, nativeElement: this.nativeElement, component: this });
+            case 'ArrowDown':
+                if (currentIndex < flatList.length - 1) {
+                    targetIndex = currentIndex + 1;
+                }
+                else if (currentIndex === -1) {
+                    targetIndex = 0;
+                }
+                else {
+                    shouldPreventDefault = false;
                 }
                 break;
-            case 'visible':
-                node[this.visibleField()] = value;
+            case 'ArrowLeft':
+                if (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) => item.node.id === currentItem.parent.id);
+                        }
+                        else {
+                            shouldPreventDefault = false;
+                        }
+                    }
+                }
+                else {
+                    shouldPreventDefault = false;
+                }
                 break;
-            case 'disabled':
-                node[this.disableField()] = value;
+            case 'ArrowRight':
+                if (currentFocused) {
+                    if (!currentFocused.expanded && this.shouldShowExpandToggle(currentFocused)) {
+                        this.toggleNode(currentFocused, event);
+                        return { handled: true, shouldPreventDefault: true, targetIndex: null };
+                    }
+                    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) => item.node.id === firstChild.id);
+                            if (targetIndex === -1) {
+                                const updatedFlatList = this.treeService.buildFlatNodeList(this.nodes());
+                                targetIndex = updatedFlatList.findIndex((item) => item.node.id === firstChild.id);
+                                if (targetIndex >= 0 && targetIndex < updatedFlatList.length) {
+                                    this.focusNodeById(updatedFlatList[targetIndex].node.id);
+                                    return { handled: true, shouldPreventDefault: true, targetIndex: null };
+                                }
+                            }
+                        }
+                        else {
+                            shouldPreventDefault = false;
+                        }
+                    }
+                    else {
+                        shouldPreventDefault = false;
+                    }
+                }
+                else {
+                    shouldPreventDefault = false;
+                }
+                break;
+            case 'Home':
+                targetIndex = 0;
+                break;
+            case 'End':
+                targetIndex = flatList.length - 1;
+                break;
+            case ' ':
+            case 'Space':
+                if (currentFocused && this.selectMode() === 'multiple') {
+                    event.preventDefault();
+                    this.handleSpaceKeySelection(currentFocused, event);
+                    return { handled: true, shouldPreventDefault: true, targetIndex: null };
+                }
+                shouldPreventDefault = false;
+                break;
+            case 'Enter':
+                if (currentFocused) {
+                    event.preventDefault();
+                    this.handleEnterKeySelection(currentFocused, event);
+                    return { handled: true, shouldPreventDefault: true, targetIndex: null };
+                }
+                shouldPreventDefault = false;
                 break;
             default:
+                if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+                    if (currentFocused && this.selectMode() === 'multiple') {
+                        event.preventDefault();
+                        this.handleCtrlEnterSelection(currentFocused, event);
+                        return { handled: true, shouldPreventDefault: true, targetIndex: null };
+                    }
+                }
+                handled = false;
+                shouldPreventDefault = false;
                 break;
         }
-        /**
-         *
-         * for detect changes treeviewitem
-         *
-         */
-        this.executorChanges.set(operation);
+        return { handled, shouldPreventDefault, targetIndex };
     }
-    refresh() {
-        if (this.itemsPromise) {
-            this.fetchData();
+    /**
+     * Handle Space key selection
+     */
+    handleSpaceKeySelection(node, event) {
+        const newValue = !node.selected;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
         }
-    }
-    async setNodeExpandAndChildren(valueFields, value) {
-        const nodesToExpand = [];
-        for (const valueField of valueFields) {
-            const foundNodes = this.findNodesByValueField(this.itemsSignal(), valueField);
-            nodesToExpand.push(...foundNodes);
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
         }
-        await Promise.all(nodesToExpand.map((node) => this.expandNodeAndAllChildren(node, value)));
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            nativeEvent: event,
+            isUserInteraction: true,
+        });
     }
-    findNodesByValueField(nodes, valueField) {
-        const results = [];
-        for (const node of nodes) {
-            if (node[this.valueField()] === valueField) {
-                results.push(node);
+    /**
+     * Handle Enter key selection
+     */
+    handleEnterKeySelection(node, event) {
+        const mode = this.selectMode();
+        this.treeService.deselectAllNodes(this.nodes());
+        node.selected = true;
+        node.indeterminate = false;
+        if (mode === 'multiple') {
+            if (this.checkChildrenOnSelect() && node.children) {
+                this.treeService.selectAllChildren(node.children, true);
             }
-            if (node[this.childrenField()]?.length) {
-                results.push(...this.findNodesByValueField(node[this.childrenField()], valueField));
+            if (this.intermediateState()) {
+                this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
             }
         }
-        return results;
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            nativeEvent: event,
+            isUserInteraction: true,
+        });
+    }
+    /**
+     * Handle Ctrl/Cmd + Enter key selection
+     */
+    handleCtrlEnterSelection(node, event) {
+        const newValue = !node.selected;
+        node.selected = newValue;
+        node.indeterminate = false;
+        if (this.checkChildrenOnSelect() && node.children) {
+            this.treeService.selectAllChildren(node.children, newValue);
+        }
+        if (this.intermediateState()) {
+            this.treeService.updateParentStates(this.nodes(), node, this.intermediateState());
+        }
+        this.refreshNodes();
+        this.onNodeSelect.emit({
+            component: this,
+            node,
+            nativeEvent: event,
+            isUserInteraction: true,
+        });
     }
-    async expandNodeAndAllChildren(node, value) {
-        node[this.expandedField()] = value;
-        if (value && this.itemsPromise && node[this.hasChildField()] && !node[this.childrenField()]?.length) {
-            await this.setNodeLoading(node[this.valueField()], true);
-            await this.fetchData(node);
+    /**
+     * Type guard to check if value is an Event
+     */
+    isEvent(value) {
+        return value instanceof Event;
+    }
+    /**
+     * Handle errors consistently
+     */
+    handleError(message, error) {
+        if (error instanceof Error) {
+            console.error(`${message}:`, error.message);
         }
-        if (node[this.childrenField()]?.length) {
-            await Promise.all(node[this.childrenField()].map((child) => this.expandNodeAndAllChildren(child, value)));
+        else {
+            console.error(`${message}:`, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewComponent, deps: null, 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: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, hasCheckboxField: { classPropertyName: "hasCheckboxField", publicName: "hasCheckboxField", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, selectionScope: { classPropertyName: "selectionScope", publicName: "selectionScope", isSignal: true, isRequired: false, transformFunction: null }, focusNodeEnabled: { classPropertyName: "focusNodeEnabled", publicName: "focusNodeEnabled", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, visibleField: { classPropertyName: "visibleField", publicName: "visibleField", isSignal: true, isRequired: false, transformFunction: null }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, activeField: { classPropertyName: "activeField", publicName: "activeField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, parentField: { classPropertyName: "parentField", publicName: "parentField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, toggleIcons: { classPropertyName: "toggleIcons", publicName: "toggleIcons", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, showEmptyNodeMassage: { classPropertyName: "showEmptyNodeMassage", publicName: "showEmptyNodeMassage", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, expandOn: { classPropertyName: "expandOn", publicName: "expandOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", onItemSelectedChanged: "onItemSelectedChanged", onNodeClick: "onNodeClick", onCollapsedChanged: "onCollapsedChanged", onNodedbClick: "onNodedbClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
-            { provide: AXComponent, useExisting: AXTreeViewComponent },
-            { provide: AXTreeViewBase, useExisting: AXTreeViewComponent },
-        ], usesInheritance: true, ngImport: i0, template: "@if (resolvedItems?.length) {\n  @for (node of resolvedItems; track $index) {\n    <ng-container [ngTemplateOutlet]=\"recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n  }\n} @else {\n  <ng-container [ngTemplateOutlet]=\"emptyTemplate || empty\"></ng-container>\n}\n\n<ng-template #recursion let-item>\n  @if (item[visibleField()] !== false) {\n    <ax-tree-view-item\n      [item]=\"item\"\n      [isExpanded]=\"item[expandedField()]\"\n      [(isActive)]=\"item[activeField()]\"\n      [isLoading]=\"isNodeLoading(item[valueField()])\"\n      [executorChanges]=\"executorChanges()\"\n    >\n      @if (\n        (showCheckbox() && selectionScope() === 'all' && item[hasCheckboxField()] !== false) ||\n        (showCheckbox() &&\n          selectionScope() === 'parent' &&\n          item[childrenField()]?.length &&\n          item[hasCheckboxField()]) !== false ||\n        (showCheckbox() &&\n          selectionScope() === 'children' &&\n          !item[childrenField()]?.length &&\n          item[hasCheckboxField()] !== false)\n      ) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item[indeterminateField()]\"\n          [(ngModel)]=\"item[selectedField()]\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      @if (item[iconField()]) {\n        <ax-prefix>\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        </ax-prefix>\n      }\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      @for (child of item?.[childrenField()]; track $index) {\n        <ng-container [ngTemplateOutlet]=\"recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\n</ng-template>\n\n<ng-template #empty>\n  {{ '@acorex:common.general.no-result-found' | translate | async }}\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-tree-view-indicator-size: 2px}ax-tree-view:has(>ax-tree-view-item i) ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:1.5rem}ax-tree-view.ax-look-with-line ax-tree-view-item{position:relative}ax-tree-view.ax-look-with-line ax-tree-view-item:before{content:\"\";position:absolute;top:0;inset-inline-start:.625rem;width:1px;height:100%;background-color:#ccc}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container{padding-inline-start:1.25rem}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container .ax-tree-view-icon-container{padding:.25rem}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container{cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-icon-container{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-tree-view-child{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-tree-view-child .ax-tree-view-container:not(:has(.ax-tree-view-icon-container i)){padding-inline-start:1.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-child.ax-tree-view-empty-child{padding-inline-start:2rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:50px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:50px}to{opacity:0;max-height:0}}ax-tree-view ax-tree-view-item .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-tree-view ax-tree-view-item .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXTreeViewItemComponent, selector: "ax-tree-view-item", inputs: ["item", "isExpanded", "isActive", "isLoading", "executorChanges"], outputs: ["isExpandedChange", "isActiveChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }, 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: [{
             type: Component,
-            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ax-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXTreeViewService], imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXDragDirective,
+                        AXDragHandleDirective,
+                        AXDropListDirective,
+                        AXFocusTrapDirective,
                         NgTemplateOutlet,
-                        AXTreeViewItemComponent,
+                        AXButtonComponent,
                         AXCheckBoxComponent,
-                        FormsModule,
-                        AXDecoratorGenericComponent,
+                        AXBadgeComponent,
                         AXDecoratorIconComponent,
-                        AXTranslatorPipe,
-                        AsyncPipe,
-                    ], providers: [
-                        { provide: AXComponent, useExisting: AXTreeViewComponent },
-                        { provide: AXTreeViewBase, useExisting: AXTreeViewComponent },
-                    ], template: "@if (resolvedItems?.length) {\n  @for (node of resolvedItems; track $index) {\n    <ng-container [ngTemplateOutlet]=\"recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n  }\n} @else {\n  <ng-container [ngTemplateOutlet]=\"emptyTemplate || empty\"></ng-container>\n}\n\n<ng-template #recursion let-item>\n  @if (item[visibleField()] !== false) {\n    <ax-tree-view-item\n      [item]=\"item\"\n      [isExpanded]=\"item[expandedField()]\"\n      [(isActive)]=\"item[activeField()]\"\n      [isLoading]=\"isNodeLoading(item[valueField()])\"\n      [executorChanges]=\"executorChanges()\"\n    >\n      @if (\n        (showCheckbox() && selectionScope() === 'all' && item[hasCheckboxField()] !== false) ||\n        (showCheckbox() &&\n          selectionScope() === 'parent' &&\n          item[childrenField()]?.length &&\n          item[hasCheckboxField()]) !== false ||\n        (showCheckbox() &&\n          selectionScope() === 'children' &&\n          !item[childrenField()]?.length &&\n          item[hasCheckboxField()] !== false)\n      ) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item[indeterminateField()]\"\n          [(ngModel)]=\"item[selectedField()]\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      @if (item[iconField()]) {\n        <ax-prefix>\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        </ax-prefix>\n      }\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      @for (child of item?.[childrenField()]; track $index) {\n        <ng-container [ngTemplateOutlet]=\"recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\n</ng-template>\n\n<ng-template #empty>\n  {{ '@acorex:common.general.no-result-found' | translate | async }}\n</ng-template>\n", styles: ["ax-tree-view{--ax-comp-tree-view-arrow-size: .875rem;--ax-comp-tree-view-text-size: .875rem;--ax-comp-tree-view-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-tree-view-active-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-tree-view-hover-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-tree-view-indicator-size: 2px}ax-tree-view:has(>ax-tree-view-item i) ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:1.5rem}ax-tree-view.ax-look-with-line ax-tree-view-item{position:relative}ax-tree-view.ax-look-with-line ax-tree-view-item:before{content:\"\";position:absolute;top:0;inset-inline-start:.625rem;width:1px;height:100%;background-color:#ccc}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container{padding-inline-start:1.25rem}ax-tree-view.ax-look-with-line ax-tree-view-item .ax-tree-view-container .ax-tree-view-icon-container{padding:.25rem}ax-tree-view ax-tree-view-item ax-check-box{margin-inline-start:.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-container{display:flex;align-items:center;margin-bottom:.125rem}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-text{font-size:var(--ax-comp-tree-view-text-size)}ax-tree-view ax-tree-view-item .ax-tree-view-container{cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-checkbox-end-side{display:none!important}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-arrow{font-size:var(--ax-comp-tree-view-arrow-size)!important}ax-tree-view ax-tree-view-item .ax-tree-view-container ax-suffix:empty{display:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-icon-container{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items{display:flex;align-items:center}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;overflow-x:auto;margin-inline-start:.25rem}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-noselect-tree-view{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix.ax-state-tree-view-active{background-color:rgba(var(--ax-comp-tree-view-active-bg-color));color:rgba(var(--ax-comp-tree-view-active-text-color))}ax-tree-view ax-tree-view-item .ax-tree-view-container .ax-tree-view-items .ax-tree-view-items-prefix:hover:not(.ax-state-tree-view-active){background-color:rgba(var(--ax-comp-tree-view-hover-bg-color))}ax-tree-view ax-tree-view-item .ax-tree-view-child{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-tree-view-child .ax-tree-view-container:not(:has(.ax-tree-view-icon-container i)){padding-inline-start:1.5rem}ax-tree-view ax-tree-view-item .ax-tree-view-child.ax-tree-view-empty-child{padding-inline-start:2rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:50px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:50px}to{opacity:0;max-height:0}}ax-tree-view ax-tree-view-item .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-tree-view ax-tree-view-item .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
-        }], propDecorators: { __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], hasCheckboxField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCheckboxField", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], selectionScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionScope", required: false }] }], focusNodeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusNodeEnabled", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], visibleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleField", required: false }] }], disableField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableField", required: false }] }], hasChildField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildField", required: false }] }], selectedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], activeField: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeField", required: false }] }], indeterminateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], iconField: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconField", required: false }] }], toggleIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleIcons", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], showEmptyNodeMassage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyNodeMassage", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], onItemSelectedChanged: [{ type: i0.Output, args: ["onItemSelectedChanged"] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onCollapsedChanged: [{ type: i0.Output, args: ["onCollapsedChanged"] }], onNodedbClick: [{ type: i0.Output, args: ["onNodedbClick"] }], itemTemplate: [{
-                type: Input
-            }], emptyTemplate: [{
-                type: Input
-            }], expandOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOn", required: false }] }] } });
+                    ], host: {
+                        class: 'ax-tree-view',
+                        '[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'",
+                        role: 'tree',
+                        '[attr.aria-label]': '"Tree navigation"',
+                        '(keydown)': 'handleKeyDown($event)',
+                        '(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  [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"] }] } });
 
-const COMPONENT = [AXTreeViewComponent, AXTreeViewItemComponent];
-const MODULES = [
-    CommonModule,
-    AXCommonModule,
-    AXDecoratorModule,
-    AXCheckBoxModule,
-    AXFormModule,
-    FormsModule,
-    AXTooltipModule,
-    AXLoadingModule,
-];
 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, AXTreeViewItemComponent, CommonModule,
-            AXCommonModule,
-            AXDecoratorModule,
-            AXCheckBoxModule,
-            AXFormModule,
-            FormsModule,
-            AXTooltipModule,
-            AXLoadingModule], exports: [AXTreeViewComponent, AXTreeViewItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, imports: [COMPONENT, MODULES] }); }
+    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] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...COMPONENT, ...MODULES],
-                    exports: [...COMPONENT],
+                    imports: [AXTreeViewComponent],
                 }]
         }] });
 
@@ -507,5 +1233,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXTreeItemClickBaseEvent, AXTreeViewBase, AXTreeViewComponent, AXTreeViewItemComponent, AXTreeViewModule };
+export { AXTreeViewComponent, AXTreeViewModule, AXTreeViewService };
 //# sourceMappingURL=acorex-components-tree-view.mjs.map