@acorex/components 19.11.0-next.4 → 19.11.0-next.6

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

@@ -4,7 +4,7 @@ import { AXTooltipDirective, AXTooltipModule } from '@acorex/components/tooltip'
 import { AXPlatform } from '@acorex/core/platform';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { input, output, model, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, effect, NgModule } from '@angular/core';
+import { signal, input, output, inject, effect, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, model, computed, NgModule } from '@angular/core';
 import { AXCheckBoxComponent, AXCheckBoxModule } from '@acorex/components/check-box';
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -12,101 +12,6 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { AXFormModule } from '@acorex/components/form';
 
-class AXTreeViewItemComponent extends NXComponent {
-    constructor() {
-        super();
-        this.item = input();
-        this.onNodeExpand = output();
-        this.onNodeClick = output();
-        this.isExpanded = model(false);
-        this.hasChildField = input();
-        this.isActive = model(false);
-        this.onNodeDbClick = output();
-        this.isLoading = input(false);
-        this.disableField = input();
-        this.expandIconField = input(null);
-        this.executorChanges = input(null);
-        this.platformService = inject(AXPlatform);
-        this.expandBehavior = input('both');
-        this.arrowIcon = computed(() => {
-            if (this.expandIconField()) {
-                if (this.isExpanded()) {
-                    return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().expand}`;
-                }
-                else {
-                    return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().unExpand}`;
-                }
-            }
-            else {
-                if (this.isExpanded()) {
-                    return `ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-down`;
-                }
-                else {
-                    return this.platformService.isRtl()
-                        ? 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-left'
-                        : 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-right';
-                }
-            }
-        });
-    }
-    handleArrowNodeClick() {
-        if (this.item()[this.disableField()] || this.isLoading() || this.expandBehavior() === 'dbClick') {
-            return;
-        }
-        this.isExpanded.set(!this.isExpanded());
-        this.onNodeExpand.emit({ component: this, data: this.item(), nativeElement: this.nativeElement });
-    }
-    handleTextClick(item) {
-        this.onNodeClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
-    }
-    handleTextDbClick(item) {
-        if (item[this.disableField()] || this.expandBehavior() === 'click') {
-            return;
-        }
-        if (item?.childrens?.length || item[this.hasChildField()]) {
-            this.isExpanded.set(!this.isExpanded());
-            this.onNodeDbClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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 }, hasChildField: { classPropertyName: "hasChildField", publicName: "hasChildField", 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 }, disableField: { classPropertyName: "disableField", publicName: "disableField", isSignal: true, isRequired: false, transformFunction: null }, expandIconField: { classPropertyName: "expandIconField", publicName: "expandIconField", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeExpand: "onNodeExpand", onNodeClick: "onNodeClick", isExpanded: "isExpandedChange", isActive: "isActiveChange", onNodeDbClick: "onNodeDbClick" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n  @if ((item().childrens && !isLoading()) || (item()[hasChildField()] && !isLoading())) {\n    <i [class.ax-state-disabled]=\"item()[disableField()]\" (click)=\"handleArrowNodeClick()\" class=\"{{ arrowIcon() }}\"></i>\n  } @else if (isLoading()) {\n    <ax-loading></ax-loading>\n  } @else {\n    <i class=\"ax-icon\"></i>\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()[disableField()]\"\n      [axTooltip]=\"item().tooltip\"\n      axTooltipPlacement=\"end-bottom\"\n      (click)=\"handleTextClick(item())\"\n      (dblclick)=\"handleTextDbClick(item())\"\n      class=\"ax-tree-view-items-prefix noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item().active\"\n    >\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    </div>\n  </div>\n</div>\n\n<div class=\"{{ platformService.isRtl() ? 'ax-state-tree-view-rtl' : 'ax-state-tree-view-ltr' }}\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], animations: [
-            trigger('collapseExpand', [
-                state('collapsed', style({
-                    height: '0',
-                    overflow: 'hidden',
-                    opacity: 0,
-                })),
-                state('expanded', style({
-                    height: '*',
-                    overflow: 'hidden',
-                    opacity: 1,
-                })),
-                transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-tree-view-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('collapseExpand', [
-                            state('collapsed', style({
-                                height: '0',
-                                overflow: 'hidden',
-                                opacity: 0,
-                            })),
-                            state('expanded', style({
-                                height: '*',
-                                overflow: 'hidden',
-                                opacity: 1,
-                            })),
-                            transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
-                        ]),
-                    ], imports: [AXLoadingComponent, AXTooltipDirective], template: "<div class=\"ax-tree-view-container\">\n  @if ((item().childrens && !isLoading()) || (item()[hasChildField()] && !isLoading())) {\n    <i [class.ax-state-disabled]=\"item()[disableField()]\" (click)=\"handleArrowNodeClick()\" class=\"{{ arrowIcon() }}\"></i>\n  } @else if (isLoading()) {\n    <ax-loading></ax-loading>\n  } @else {\n    <i class=\"ax-icon\"></i>\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()[disableField()]\"\n      [axTooltip]=\"item().tooltip\"\n      axTooltipPlacement=\"end-bottom\"\n      (click)=\"handleTextClick(item())\"\n      (dblclick)=\"handleTextDbClick(item())\"\n      class=\"ax-tree-view-items-prefix noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item().active\"\n    >\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    </div>\n  </div>\n</div>\n\n<div class=\"{{ platformService.isRtl() ? 'ax-state-tree-view-rtl' : 'ax-state-tree-view-ltr' }}\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [] });
-
-class AXTreeItemClickBaseEvent extends AXClickEvent {
-}
-
 class AXTreeViewComponent extends NXComponent {
     constructor() {
         super(...arguments);
@@ -114,18 +19,26 @@ class AXTreeViewComponent extends NXComponent {
         this.items = input();
         this.showCheckbox = input(true);
         this.selectionMode = input('single');
-        this.selectionBehavior = input(null);
+        this.selectionBehavior = input();
         this.focusNodeEnabled = input(true);
         this.valueField = input('id');
         this.textField = input('text');
         this.visibleField = input('visible');
         this.disableField = input('disabled');
         this.hasChildField = input('hasChild');
+        this.selectedField = input('selected');
+        this.expandedField = input('expanded');
+        this.tooltipField = input('tooltip');
+        this.childrenField = input('children');
+        this.activeField = input('active');
         this.iconField = input('icon');
         this.onSelectionChanged = output();
         this.onNodeClick = output();
         this.onCollapsedChanged = output();
+        this.onNodedbClick = output();
         this.executorChanges = signal(null);
+        this.look = input('defult');
+        this.platformService = inject(AXPlatform);
         this.#effect = effect(() => {
             const itemsInput = this.items();
             if (typeof itemsInput === 'function') {
@@ -144,28 +57,32 @@ class AXTreeViewComponent extends NXComponent {
                 this.itemsPromise = null;
             }
         });
-        this.expandBehavior = input('both');
+        this.expandOn = input('defult');
         this.loadingState = signal({});
     }
+    /** @ignore */
+    get __hostClass() {
+        return [`ax-look-${this.look()}`];
+    }
     get resolvedItems() {
         return this.itemsSignal();
     }
     #effect;
     handleNodeSelectionClick(event, item) {
-        if (item[this.disableField()] || this.isNodeLoading(item.id)) {
+        if (item[this.disableField()] || this.isNodeLoading(item[this.valueField()])) {
             return;
         }
         if (this.selectionMode() === 'single' && event.isUserInteraction) {
             this.handleUnSelectNode(this.itemsSignal());
         }
-        item.selected = event.value;
+        item[this.selectedField()] = event.value;
         if (event.value !== null) {
             switch (this.selectionBehavior()) {
                 case 'autoExpand':
                     if (event.value) {
-                        if (this.itemsPromise && item[this.hasChildField()] && !item?.childrens?.length) {
+                        if (this.itemsPromise && item[this.hasChildField()] && !item?.[this.childrenField()]?.length) {
                             this.fetchData(item);
-                            this.setNodeLoading(item.id, true);
+                            this.setNodeLoading(item[this.valueField()], true);
                         }
                         this.toggleExpand(item);
                     }
@@ -182,7 +99,7 @@ class AXTreeViewComponent extends NXComponent {
                     this.expandAndToggleSelection(item, event.value);
                     break;
                 case 'indeterminate':
-                    if (item?.childrens?.length) {
+                    if (item?.[this.childrenField()]?.length) {
                         this.applySelectionToChildren(item, event.value, item[this.valueField()]);
                     }
                     this.updateParentSelection(item, event.value);
@@ -206,8 +123,8 @@ class AXTreeViewComponent extends NXComponent {
      *
      */
     toggleExpand(item) {
-        if (!item.isExpanded) {
-            item.isExpanded = true;
+        if (!item[this.expandedField()]) {
+            item[this.expandedField()] = true;
         }
     }
     /**
@@ -217,15 +134,15 @@ class AXTreeViewComponent extends NXComponent {
      */
     expandAndToggleSelection(item, selected) {
         this.toggleExpand(item);
-        if (item.childrens?.length) {
+        if (item[this.childrenField()]?.length) {
             this.applySelectionToChildren(item, selected, item[this.valueField()]);
         }
     }
     applySelectionToChildren(item, isSelected, parentId) {
-        item.childrens.forEach((child) => {
+        item[this.childrenField()].forEach((child) => {
             child.parentId = parentId;
             child.selected = isSelected;
-            if (child.childrens?.length) {
+            if (child.children?.length) {
                 this.applySelectionToChildren(child, isSelected, child.id);
             }
         });
@@ -236,11 +153,11 @@ class AXTreeViewComponent extends NXComponent {
      *
      */
     updateParentSelection(item, selected) {
-        item.selected = selected;
+        item[this.selectedField()] = selected;
         let parent = this.findParent(item, this.itemsSignal());
-        while ((parent && parent.selected != false) || (parent && item.selected)) {
-            const allSelected = parent?.childrens?.every((child) => child.selected);
-            const someSelected = parent?.childrens?.some((child) => child.selected || child.indeterminate);
+        while ((parent && parent.selected != false) || (parent && item[this.selectedField()])) {
+            const allSelected = parent?.children?.every((child) => child.selected);
+            const someSelected = parent?.children?.some((child) => child.selected || child.indeterminate);
             if (!allSelected && !someSelected) {
                 parent.selected = false;
                 parent.indeterminate = null;
@@ -262,11 +179,11 @@ class AXTreeViewComponent extends NXComponent {
     }
     findParent(item, nodes) {
         for (const node of nodes) {
-            if (node.childrens?.includes(item)) {
+            if (node[this.childrenField()]?.includes(item)) {
                 return node;
             }
-            else if (node.childrens) {
-                const parent = this.findParent(item, node.childrens);
+            else if (node[this.childrenField()]) {
+                const parent = this.findParent(item, node[this.childrenField()]);
                 if (parent)
                     return parent;
             }
@@ -281,11 +198,11 @@ class AXTreeViewComponent extends NXComponent {
     findSelectedNodes(nodes) {
         let selectedNodes = [];
         nodes.forEach((node) => {
-            if (node.selected) {
+            if (node[this.selectedField()]) {
                 selectedNodes.push(node);
             }
-            if (node.childrens) {
-                selectedNodes = selectedNodes.concat(this.findSelectedNodes(node.childrens));
+            if (node[this.childrenField()]) {
+                selectedNodes = selectedNodes.concat(this.findSelectedNodes(node[this.childrenField()]));
             }
         });
         return selectedNodes;
@@ -297,9 +214,9 @@ class AXTreeViewComponent extends NXComponent {
      */
     handleUnSelectNode(items) {
         items.forEach((child) => {
-            child.selected = false;
-            if (child?.childrens?.length) {
-                this.handleUnSelectNode(child.childrens);
+            child[this.selectedField()] = false;
+            if (child?.[this.childrenField()]?.length) {
+                this.handleUnSelectNode(child[this.childrenField()]);
             }
         });
     }
@@ -309,11 +226,11 @@ class AXTreeViewComponent extends NXComponent {
      *
      */
     fetchData(selectedNode) {
-        this.itemsPromise(selectedNode?.id)
+        this.itemsPromise(selectedNode?.[this.valueField()])
             .then((data) => {
             if (Array.isArray(data)) {
-                if (selectedNode?.id) {
-                    this.findNode(selectedNode.id, data, this.itemsSignal());
+                if (selectedNode?.[this.valueField()]) {
+                    this.findNode(selectedNode[this.valueField()], data, this.itemsSignal());
                 }
                 else {
                     this.itemsSignal.set(data);
@@ -321,21 +238,21 @@ class AXTreeViewComponent extends NXComponent {
             }
         })
             .finally(() => {
-            this.setNodeLoading(selectedNode?.id, false);
+            this.setNodeLoading(selectedNode?.[this.valueField()], false);
         });
     }
     findNode(parentId, _children, source) {
         if (source.length) {
             source.forEach((element) => {
                 if (element[this.valueField()] == parentId) {
-                    if (this.selectionBehavior() === 'indeterminate' && element.selected) {
-                        _children.forEach((child) => (child.selected = true));
+                    if (this.selectionBehavior() === 'indeterminate' && element[this.selectedField()]) {
+                        _children.forEach((child) => (child[this.selectedField()] = true));
                     }
-                    element.childrens = _children;
+                    element[this.childrenField()] = _children;
                 }
                 else {
-                    if (element?.childrens)
-                        this.findNode(parentId, _children, element.childrens);
+                    if (element?.[this.childrenField()])
+                        this.findNode(parentId, _children, element[this.childrenField()]);
                 }
             });
         }
@@ -347,37 +264,20 @@ class AXTreeViewComponent extends NXComponent {
      */
     handleNodeExpandClick(node) {
         const selectedNode = node.data;
-        if (this.itemsPromise && node.data.isExpanded && !node?.data.childrens?.length) {
+        if (this.itemsPromise && node.data.isExpanded && !node?.data.children?.length) {
             this.fetchData(selectedNode);
             this.setNodeLoading(selectedNode.id, true);
         }
         this.onCollapsedChanged.emit({ component: this, data: node.data, nativeElement: this.nativeElement });
     }
-    handleNodeClick(node) {
-        if (node.data[this.disableField()]) {
-            return;
-        }
-        if (this.focusNodeEnabled()) {
-            this.handleUnActiveNode(this.itemsSignal());
-            node.data.active = true;
-        }
-        this.onNodeClick.emit({ component: this, data: node.data, nativeElement: this.nativeElement });
-    }
     handleUnActiveNode(unActiveSource) {
         unActiveSource.forEach((child) => {
-            child.active = false;
-            if (child?.childrens?.length) {
-                this.handleUnActiveNode(child.childrens);
+            child[this.activeField()] = false;
+            if (child?.[this.childrenField()]?.length) {
+                this.handleUnActiveNode(child[this.childrenField()]);
             }
         });
     }
-    handleNodeDbClick(node) {
-        if (this.itemsPromise) {
-            const selectedNode = node.data;
-            this.fetchData(selectedNode);
-            this.setNodeLoading(selectedNode.id, true);
-        }
-    }
     isNodeLoading(nodeId) {
         return this.loadingState()[nodeId] || false;
     }
@@ -390,11 +290,11 @@ class AXTreeViewComponent extends NXComponent {
     executeOnTreeNode(node, operation, value) {
         switch (operation) {
             case 'active':
-                node.active = value;
+                node[this.activeField()] = value;
                 break;
             case 'expand':
-                node.isExpanded = true;
-                if (this.itemsPromise && node[this.hasChildField()] && !node.childrens?.length) {
+                node[this.expandedField()] = true;
+                if (this.itemsPromise && node[this.hasChildField()] && !node[this.childrenField()]?.length) {
                     this.handleNodeExpandClick({ data: node, nativeElement: this.nativeElement, component: this });
                 }
                 break;
@@ -414,17 +314,132 @@ class AXTreeViewComponent extends NXComponent {
          */
         this.executorChanges.set(operation);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", 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 }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandBehavior: { classPropertyName: "expandBehavior", publicName: "expandBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", onNodeClick: "onNodeClick", onCollapsedChanged: "onCollapsedChanged" }, usesInheritance: true, ngImport: i0, template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></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.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [disableField]=\"disableField()\"\n      [hasChildField]=\"hasChildField()\"\n      [expandBehavior]=\"expandBehavior()\"\n      (onNodeExpand)=\"handleNodeExpandClick($event)\"\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onNodeDbClick)=\"handleNodeDbClick($event)\"\n      [executorChanges]=\"this.executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.childrens; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\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-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;cursor:pointer}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 .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-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.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-state-tree-view-rtl{padding-inline-end:1rem}ax-tree-view ax-tree-view-item .ax-state-tree-view-ltr{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-tree-view ax-tree-view-item .arrow-container{position:relative;display:flex;align-items:center}ax-tree-view ax-tree-view-item .vertical-line{width:.125rem;height:100%;background-color:#ccc;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXTreeViewItemComponent, selector: "ax-tree-view-item", inputs: ["item", "isExpanded", "hasChildField", "isActive", "isLoading", "disableField", "expandIconField", "executorChanges", "expandBehavior"], outputs: ["onNodeExpand", "onNodeClick", "isExpandedChange", "isActiveChange", "onNodeDbClick"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", 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 }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, expandOn: { classPropertyName: "expandOn", publicName: "expandOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", onNodeClick: "onNodeClick", onCollapsedChanged: "onCollapsedChanged", onNodedbClick: "onNodedbClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></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.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [executorChanges]=\"executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.children; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\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.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:not(:has(i)){padding-inline-start:1.75rem}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;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:.5rem}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 .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-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.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-state-disabled{cursor:not-allowed!important;opacity:.5!important}\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", "expandIconField", "executorChanges"], outputs: ["isExpandedChange", "isActiveChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "checked", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, AXTreeViewItemComponent, AXCheckBoxComponent, FormsModule, AXDecoratorGenericComponent, AXDecoratorIconComponent], template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></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.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [disableField]=\"disableField()\"\n      [hasChildField]=\"hasChildField()\"\n      [expandBehavior]=\"expandBehavior()\"\n      (onNodeExpand)=\"handleNodeExpandClick($event)\"\n      (onNodeClick)=\"handleNodeClick($event)\"\n      (onNodeDbClick)=\"handleNodeDbClick($event)\"\n      [executorChanges]=\"this.executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.childrens; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\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-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;cursor:pointer}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 .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-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.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-state-tree-view-rtl{padding-inline-end:1rem}ax-tree-view ax-tree-view-item .ax-state-tree-view-ltr{padding-inline-start:1rem}ax-tree-view ax-tree-view-item .ax-state-disabled{cursor:not-allowed!important;opacity:.5!important}ax-tree-view ax-tree-view-item .arrow-container{position:relative;display:flex;align-items:center}ax-tree-view ax-tree-view-item .vertical-line{width:.125rem;height:100%;background-color:#ccc;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}\n"] }]
-        }] });
+            args: [{ selector: 'ax-tree-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        AXTreeViewItemComponent,
+                        AXCheckBoxComponent,
+                        FormsModule,
+                        AXDecoratorGenericComponent,
+                        AXDecoratorIconComponent,
+                    ], template: "@for (node of resolvedItems; track $index) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></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.isExpanded\"\n      [(isActive)]=\"item.active\"\n      [isLoading]=\"isNodeLoading(item.id)\"\n      [executorChanges]=\"executorChanges()\"\n    >\n      @if (this.showCheckbox()) {\n        <ax-check-box\n          [disabled]=\"item[disableField()]\"\n          [indeterminate]=\"item.indeterminate\"\n          [(ngModel)]=\"item.selected\"\n          (onValueChanged)=\"handleNodeSelectionClick($event, item)\"\n        ></ax-check-box>\n      }\n      <ax-prefix>\n        @if (item[iconField()]) {\n          <ax-icon [icon]=\"item[iconField()]\"></ax-icon>\n        } @else {\n          <i></i>\n        }\n      </ax-prefix>\n      @if (item[textField()]) {\n        <ax-text>{{ item[textField()] }}</ax-text>\n      }\n\n      <ax-suffix></ax-suffix>\n      @for (child of item?.children; track $index) {\n        <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n      }\n    </ax-tree-view-item>\n  }\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.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:not(:has(i)){padding-inline-start:1.75rem}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;cursor:pointer}ax-tree-view ax-tree-view-item .ax-tree-view-container:not(:has(i)){padding-inline-start:.5rem}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 .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-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.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-state-disabled{cursor:not-allowed!important;opacity:.5!important}\n"] }]
+        }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXTreeViewItemComponent extends NXComponent {
+    constructor() {
+        super();
+        this.treeView = inject(AXTreeViewComponent);
+        this.item = input();
+        this.isExpanded = model(false);
+        this.isActive = model(false);
+        this.isLoading = input(false);
+        this.expandIconField = input(null);
+        this.executorChanges = input();
+        this.platformService = inject(AXPlatform);
+        this.arrowIcon = computed(() => {
+            if (this.expandIconField()) {
+                if (this.isExpanded()) {
+                    return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().expand}`;
+                }
+                else {
+                    return `ax-tree-view-arrow ax-icon ax-icon-solid ${this.expandIconField().unExpand}`;
+                }
+            }
+            else {
+                if (this.isExpanded()) {
+                    return `ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-down`;
+                }
+                else {
+                    return this.platformService.isRtl()
+                        ? 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-left'
+                        : 'ax-tree-view-arrow ax-icon ax-icon-solid ax-icon-chevron-right';
+                }
+            }
+        });
+    }
+    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 });
+    }
+    handleTextClick(item) {
+        if (this.item()[this.treeView.disableField()]) {
+            return;
+        }
+        if (this.treeView.focusNodeEnabled()) {
+            this.treeView.handleUnActiveNode(this.treeView.itemsSignal());
+            this.item()[this.treeView.activeField()] = true;
+        }
+        this.treeView.onNodeClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
+    }
+    handleTextDbClick(item) {
+        if (item[this.treeView.disableField()] || this.treeView.expandOn() === 'click') {
+            return;
+        }
+        if (item?.[this.treeView.childrenField()]?.length || item[this.treeView.hasChildField()]) {
+            this.isExpanded.set(!this.isExpanded());
+            if (this.treeView.itemsPromise) {
+                this.treeView.fetchData(this.item());
+                this.treeView.setNodeLoading(this.item()[this.treeView.valueField()], true);
+            }
+        }
+        this.treeView.onNodedbClick.emit({ component: this, data: item, nativeElement: this.nativeElement });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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 }, expandIconField: { classPropertyName: "expandIconField", publicName: "expandIconField", isSignal: true, isRequired: false, transformFunction: null }, executorChanges: { classPropertyName: "executorChanges", publicName: "executorChanges", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange", isActive: "isActiveChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-tree-view-container\">\n  @if ((item()[this.treeView.childrenField()] && !isLoading()) || (item()[treeView.hasChildField()] && !isLoading())) {\n    <i\n      [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n      (click)=\"handleArrowNodeClick()\"\n      class=\"{{ arrowIcon() }}\"\n    ></i>\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(item())\"\n      (dblclick)=\"handleTextDbClick(item())\"\n      class=\"ax-tree-view-items-prefix noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item()[treeView.activeField()]\"\n    >\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    </div>\n  </div>\n</div>\n\n<div class=\"ax-tree-view-child\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], animations: [
+            trigger('collapseExpand', [
+                state('collapsed', style({
+                    height: '0',
+                    overflow: 'hidden',
+                    opacity: 0,
+                })),
+                state('expanded', style({
+                    height: '*',
+                    overflow: 'hidden',
+                    opacity: 1,
+                })),
+                transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-tree-view-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('collapseExpand', [
+                            state('collapsed', style({
+                                height: '0',
+                                overflow: 'hidden',
+                                opacity: 0,
+                            })),
+                            state('expanded', style({
+                                height: '*',
+                                overflow: 'hidden',
+                                opacity: 1,
+                            })),
+                            transition('collapsed <=> expanded', [animate('300ms ease-in-out')]),
+                        ]),
+                    ], imports: [AXLoadingComponent, AXTooltipDirective], template: "<div class=\"ax-tree-view-container\">\n  @if ((item()[this.treeView.childrenField()] && !isLoading()) || (item()[treeView.hasChildField()] && !isLoading())) {\n    <i\n      [class.ax-state-disabled]=\"item()[treeView.disableField()]\"\n      (click)=\"handleArrowNodeClick()\"\n      class=\"{{ arrowIcon() }}\"\n    ></i>\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(item())\"\n      (dblclick)=\"handleTextDbClick(item())\"\n      class=\"ax-tree-view-items-prefix noselect-tree-view\"\n      [class.ax-state-tree-view-active]=\"item()[treeView.activeField()]\"\n    >\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    </div>\n  </div>\n</div>\n\n<div class=\"ax-tree-view-child\" [@collapseExpand]=\"isExpanded() ? 'expanded' : 'collapsed'\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class AXTreeItemClickBaseEvent extends AXClickEvent {
+}
 
 class AXTreeViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
             AXCommonModule,
             AXDecoratorModule,
             AXCheckBoxModule,
@@ -434,7 +449,7 @@ class AXTreeViewModule {
             AXLoadingModule,
             AXTreeViewComponent,
             AXTreeViewItemComponent], exports: [AXTreeViewComponent, AXTreeViewItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, imports: [CommonModule,
             AXCommonModule,
             AXDecoratorModule,
             AXCheckBoxModule,
@@ -445,7 +460,7 @@ class AXTreeViewModule {
             AXTreeViewComponent,
             AXTreeViewItemComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXTreeViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: AXTreeViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [