@acorex/components 21.0.0-next.45 → 21.0.0-next.46

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

@@ -671,10 +671,10 @@ class AXTreeViewService {
             errors,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewService }); }
+    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.15", ngImport: i0, type: AXTreeViewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewService, decorators: [{
             type: Injectable
         }] });
 
@@ -687,10 +687,8 @@ class AXTreeViewComponent {
         // ==================== 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). Default: `'single'` */
+        /** Selection mode: 'single' (click to select) or 'multiple' (checkbox selection). Default: `'single'`. In multiple mode, checkboxes are automatically shown. */
         this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
-        /** Whether to show checkboxes for selection (only applies to multiple mode). Default: `false`. When false and selectMode is not 'none', clicking on a node toggles its selection. */
-        this.showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
         /** Selection behavior: 'all' (select anything, no special behavior), 'intermediate' (parent indeterminate state when children selected), 'leaf' (only leaf nodes selectable), 'nested' (selecting parent selects all children). Default: `'intermediate'` */
         this.selectionBehavior = input('intermediate', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
         /** Drag area: 'handler' (drag handle), 'item' (entire item). Default: `'handler'` */
@@ -742,6 +740,10 @@ class AXTreeViewComponent {
         this.onNodeToggle = output();
         /** Emitted when a node is selected/deselected */
         this.onNodeSelect = output();
+        /** Emitted when a node is double-clicked */
+        this.onNodeDoubleClick = output();
+        /** Emitted when a node is double-clicked */
+        this.onNodeClick = output();
         /** Emitted when selection changes - returns all currently selected nodes */
         this.onSelectionChange = output();
         /** Emitted when nodes are reordered within the same parent */
@@ -759,6 +761,8 @@ class AXTreeViewComponent {
         this.focusedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "focusedNodeId" }] : []));
         /** RTL detection signal */
         this.isRtl = signal(this.platformService.isRtl(), ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
+        /** active node id */
+        this.activeNodeId = signal(null, ...(ngDevMode ? [{ debugName: "activeNodeId" }] : []));
         /** Computed chevron icons that flip for RTL */
         this.directionExpandedIcon = computed(() => this.expandedIcon(), ...(ngDevMode ? [{ debugName: "directionExpandedIcon" }] : []));
         this.directionCollapsedIcon = computed(() => {
@@ -1404,7 +1408,7 @@ class AXTreeViewComponent {
      * Check if checkboxes should be shown (only for multiple mode)
      */
     shouldShowCheckbox() {
-        return this.selectMode() === 'multiple' && this.showCheckbox();
+        return this.selectMode() === 'multiple';
     }
     /**
      * Check if a node is a leaf (has no children)
@@ -1500,22 +1504,29 @@ class AXTreeViewComponent {
     }
     // ==================== Event Handlers ====================
     /**
-     * Handle node click - for single selection mode or multiple mode when showCheckbox is false
+     * Handle node double click
      */
-    onNodeClick(node, event) {
+    onNodeDoubleClickHandle(node, event) {
         if (this.getNodeDisabled(node))
             return;
-        if (this.selectMode() === 'none')
-            return;
-        if (!this.canSelectNode(node))
+        this.onNodeDoubleClick.emit({
+            component: this,
+            node,
+            nativeEvent: event,
+        });
+    }
+    /**
+     * Handle node click handle
+     */
+    onNodeClickHandle(node, event) {
+        if (this.getNodeDisabled(node))
             return;
         const mode = this.selectMode();
+        this.activeNodeId.set(this.getNodeId(node));
         if (mode === 'single') {
             this.handleSingleSelection(node, event);
         }
-        else if (mode === 'multiple' && !this.showCheckbox()) {
-            this.handleMultipleSelection(node, event);
-        }
+        this.onNodeClick.emit({ component: this, node, nativeEvent: event });
     }
     /**
      * Toggle node expansion state with lazy loading support
@@ -1778,7 +1789,7 @@ class AXTreeViewComponent {
         this.emitSelectionChange();
     }
     /**
-     * Handle multiple selection mode when showCheckbox is false (click to toggle)
+     * Handle multiple selection mode (used internally, but in multiple mode selection is primarily handled by checkboxes)
      */
     handleMultipleSelection(node, event) {
         const newValue = !this.getNodeSelected(node);
@@ -2141,10 +2152,10 @@ class AXTreeViewComponent {
             console.error(`${message}:`, error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXTreeViewComponent, isStandalone: true, selector: "ax-tree-view", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"getNodeDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"getNodeDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && !showCheckbox())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (\n              showChildrenBadge() &&\n              (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n            ) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"getNodeDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"getNodeDisabled(node) ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && !showCheckbox())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (\n                showChildrenBadge() &&\n                (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n              ) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.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 }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, tooltipField: { classPropertyName: "tooltipField", publicName: "tooltipField", isSignal: true, isRequired: false, transformFunction: null }, iconField: { classPropertyName: "iconField", publicName: "iconField", isSignal: true, isRequired: false, transformFunction: null }, expandedField: { classPropertyName: "expandedField", publicName: "expandedField", isSignal: true, isRequired: false, transformFunction: null }, selectedField: { classPropertyName: "selectedField", publicName: "selectedField", isSignal: true, isRequired: false, transformFunction: null }, indeterminateField: { classPropertyName: "indeterminateField", publicName: "indeterminateField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: true, isRequired: false, transformFunction: null }, childrenField: { classPropertyName: "childrenField", publicName: "childrenField", isSignal: true, isRequired: false, transformFunction: null }, childrenCountField: { classPropertyName: "childrenCountField", publicName: "childrenCountField", isSignal: true, isRequired: false, transformFunction: null }, dataField: { classPropertyName: "dataField", publicName: "dataField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { datasource: "datasourceChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeClick: "onNodeClick", onSelectionChange: "onSelectionChange", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { attributes: { "role": "tree", "tabindex": "0" }, listeners: { "keydown": "handleKeyDown($event)", "focus": "onTreeFocus($event)", "blur": "onTreeBlur($event)" }, properties: { "class.ax-tree-view-default": "look() === 'default'", "class.ax-tree-view-card": "look() === 'card'", "class.ax-tree-view-with-line": "look() === 'with-line'", "class.ax-tree-view-rtl": "isRtl", "style.--ax-tree-view-indent-size": "indentSize() + 'px'", "style.--ax-tree-view-line-offset": "(indentSize() / 2) + 'px'", "attr.aria-label": "\"Tree navigation\"" }, classAttribute: "ax-tree-view" }, providers: [AXTreeViewService], ngImport: i0, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"getNodeDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"getNodeDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"onNodeClickHandle(node, $event)\"\n          (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (\n              showChildrenBadge() &&\n              (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n            ) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"getNodeDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"getNodeDisabled(node) ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"onNodeClickHandle(node, $event)\"\n            (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (\n                showChildrenBadge() &&\n                (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n              ) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-on-lighter-surface), .04);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node.ax-tree-view-node-active{background:var(--ax-comp-tree-view-node-active-bg)}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXTreeViewService], imports: [
                         CommonModule,
@@ -2173,15 +2184,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '(keydown)': 'handleKeyDown($event)',
                         '(focus)': 'onTreeFocus($event)',
                         '(blur)': 'onTreeBlur($event)',
-                    }, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"getNodeDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"getNodeDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"\n            (selectMode() === 'single' || (selectMode() === 'multiple' && !showCheckbox())) && onNodeClick(node, $event)\n          \"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (\n              showChildrenBadge() &&\n              (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n            ) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"getNodeDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"getNodeDisabled(node) ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"\n              (selectMode() === 'single' || (selectMode() === 'multiple' && !showCheckbox())) &&\n                onNodeClick(node, $event)\n            \"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (\n                showChildrenBadge() &&\n                (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n              ) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"] }]
-        }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], iconField: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], selectedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedField", required: false }] }], indeterminateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], hiddenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], childrenCountField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenCountField", required: false }] }], dataField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataField", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
+                    }, template: "<!-- Root drop list -->\n<div\n  axFocusTrap\n  [axDropList]=\"dragBehavior() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-view-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree-view-drop-list\"\n  [class.ax-tree-view-card]=\"look() === 'card'\"\n  [class.ax-tree-view-with-lines]=\"look() === 'with-line'\"\n  role=\"group\"\n>\n  @for (node of nodes(); track getNodeId(node)) {\n    @if (getNodeHidden(node) !== true) {\n      <div\n        [axDrag]=\"dragBehavior() !== 'none'\"\n        [dragDisabled]=\"getNodeDisabled(node)\"\n        [dragData]=\"node\"\n        class=\"ax-tree-view-node\"\n        [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n        [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n        [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n        [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n        role=\"treeitem\"\n        [attr.aria-level]=\"getNodeAriaLevel(0)\"\n        [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n        [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n        [attr.aria-disabled]=\"getNodeDisabled(node) || (isLeafOnlyMode() && !isLeafNode(node)) ? 'true' : null\"\n      >\n        <div\n          class=\"ax-tree-view-node-content\"\n          [axDropList]=\"dragBehavior() !== 'none'\"\n          [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n          [attr.data-node-id]=\"getNodeId(node)\"\n          [attr.data-tree-node-id]=\"getNodeId(node)\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-view-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n          (click)=\"onNodeClickHandle(node, $event)\"\n          (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n          (focus)=\"onNodeFocus(getNodeId(node))\"\n          [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n        >\n          @if (shouldShowDragHandle()) {\n            <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree-view-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n            [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (getNodeLoading(node)) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i\n                  [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                  class=\"ax-tree-view-toggle-icon\"\n                ></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (nodeTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (shouldShowCheckboxForNode(node)) {\n              <ax-check-box\n                class=\"ax-tree-view-checkbox\"\n                [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && getNodeIcon(node)) {\n              <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n            }\n            <span\n              class=\"ax-tree-view-node-label\"\n              [axTooltip]=\"getNodeTooltip(node) || ''\"\n              [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n              [axTooltipPlacement]=\"'top-start'\"\n            >\n              {{ getNodeTitle(node) }}\n            </span>\n            @if (\n              showChildrenBadge() &&\n              (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n            ) {\n              <span class=\"ax-tree-view-node-badge\">\n                <ax-badge\n                  class=\"ax-tree-view-children-badge\"\n                  [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                ></ax-badge>\n              </span>\n            }\n          }\n        </div>\n      </div>\n      @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n        <div class=\"ax-tree-view-children\" role=\"group\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragBehavior() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"getNodeId(parent)\"\n    dropListGroup=\"ax-tree-view-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree-view-drop-list\"\n    role=\"group\"\n  >\n    @for (node of children; track getNodeId(node)) {\n      @if (getNodeHidden(node) !== true) {\n        <div\n          [axDrag]=\"dragBehavior() !== 'none'\"\n          [dragDisabled]=\"getNodeDisabled(node)\"\n          [dragData]=\"node\"\n          class=\"ax-tree-view-node\"\n          [class.ax-tree-view-node-active]=\"activeNodeId() === getNodeId(node)\"\n          [class.ax-tree-view-node-selected]=\"getNodeSelected(node)\"\n          [class.ax-tree-view-node-disabled]=\"getNodeDisabled(node)\"\n          [class.ax-tree-view-node-loading]=\"getNodeLoading(node)\"\n          [class.ax-tree-view-node-focused]=\"isNodeFocused(getNodeId(node))\"\n          role=\"treeitem\"\n          [attr.aria-level]=\"getNodeAriaLevel(level)\"\n          [attr.aria-expanded]=\"getNodeAriaExpanded(node)\"\n          [attr.aria-selected]=\"getNodeAriaSelected(node)\"\n          [attr.aria-disabled]=\"getNodeDisabled(node) ? 'true' : null\"\n        >\n          <div\n            class=\"ax-tree-view-node-content\"\n            [axDropList]=\"dragBehavior() !== 'none'\"\n            [id]=\"'ax-tree-view-node-drop-' + getNodeId(node)\"\n            [attr.data-node-id]=\"getNodeId(node)\"\n            [attr.data-tree-node-id]=\"getNodeId(node)\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-view-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n            (click)=\"onNodeClickHandle(node, $event)\"\n            (dblclick)=\"onNodeDoubleClickHandle(node, $event)\"\n            (focus)=\"onNodeFocus(getNodeId(node))\"\n            (blur)=\"focusedNodeId.set(null)\"\n            [tabindex]=\"isNodeFocused(getNodeId(node)) ? 0 : -1\"\n          >\n            @if (shouldShowDragHandle()) {\n              <span class=\"ax-tree-view-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree-view-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree-view-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree-view-expanded]=\"getNodeExpanded(node)\"\n              [disabled]=\"getNodeDisabled(node) || getNodeLoading(node)\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (getNodeLoading(node)) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree-view-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i\n                    [class]=\"getNodeExpanded(node) ? directionExpandedIcon() : directionCollapsedIcon()\"\n                    class=\"ax-tree-view-toggle-icon\"\n                  ></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (nodeTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"nodeTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (shouldShowCheckboxForNode(node)) {\n                <ax-check-box\n                  class=\"ax-tree-view-checkbox\"\n                  [ngModel]=\"getNodeIndeterminate(node) ? null : getNodeSelected(node) || false\"\n                  [indeterminate]=\"getNodeIndeterminate(node) || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && getNodeIcon(node)) {\n                <i [class]=\"getNodeIcon(node)\" class=\"ax-tree-view-node-icon\"></i>\n              }\n              <span\n                class=\"ax-tree-view-node-label\"\n                [axTooltip]=\"getNodeTooltip(node) || ''\"\n                [axTooltipDisabled]=\"!getNodeTooltip(node)\"\n                [axTooltipPlacement]=\"'top-start'\"\n              >\n                {{ getNodeTitle(node) }}\n              </span>\n              @if (\n                showChildrenBadge() &&\n                (getNodeChildrenCount(node) || (getNodeChildren(node) && getNodeChildren(node)!.length > 0))\n              ) {\n                <span class=\"ax-tree-view-node-badge\">\n                  <ax-badge\n                    class=\"ax-tree-view-children-badge\"\n                    [text]=\"(getNodeChildrenCount(node) ?? getNodeChildren(node)?.length ?? 0).toString()\"\n                  ></ax-badge>\n                </span>\n              }\n            }\n          </div>\n        </div>\n        @if (getNodeExpanded(node) && getNodeChildren(node) && getNodeChildren(node)!.length > 0) {\n          <div class=\"ax-tree-view-children\" role=\"group\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: getNodeChildren(node), parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree-view{display:block;width:100%;--ax-comp-tree-view-indent-size: 12px;--ax-comp-tree-view-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree-view-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree-view-node-active-bg: rgba(var(--ax-sys-color-on-lighter-surface), .04);--ax-comp-tree-view-node-border-radius: 6px;--ax-comp-tree-view-node-margin: .25rem;--ax-comp-tree-view-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree-view-drag-preview-opacity: .9;--ax-comp-tree-view-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree-view-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree-view-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3);--ax-comp-tree-view-content-padding: 0;--ax-comp-tree-view-content-gap: .5rem;--ax-comp-tree-view-drop-list-min-height: 2rem;--ax-comp-tree-view-drag-handle-padding: .25rem;--ax-comp-tree-view-badge-padding: .25rem;--ax-comp-tree-view-expand-toggle-padding: .25rem;--ax-comp-tree-view-outline-offset: 2px;--ax-comp-tree-view-outline-offset-negative: -2px}.ax-tree-view-drop-list{min-height:var(--ax-comp-tree-view-drop-list-min-height)}.ax-tree-view-node{position:relative;margin:var(--ax-comp-tree-view-node-margin) 0;border-radius:var(--ax-comp-tree-view-node-border-radius);cursor:move}.ax-tree-view-node.ax-tree-view-node-active{background:var(--ax-comp-tree-view-node-active-bg)}.ax-tree-view-node:hover:not(.ax-dragging){background:var(--ax-comp-tree-view-node-hover-bg)}.ax-tree-view-node.ax-tree-view-node-selected{background:var(--ax-comp-tree-view-node-selected-bg)}.ax-tree-view-node.ax-dragging{opacity:var(--ax-comp-tree-view-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree-view-node.ax-drag-placeholder{background:var(--ax-comp-tree-view-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree-view-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree-view-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree-view-drop-active-bg);border-radius:var(--ax-comp-tree-view-node-border-radius);outline:2px dashed var(--ax-comp-tree-view-drop-active-outline);outline-offset:var(--ax-comp-tree-view-outline-offset-negative)}.ax-tree-view-node-content{display:flex;align-items:center;gap:var(--ax-comp-tree-view-content-gap);padding:var(--ax-comp-tree-view-content-padding);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-node-content:focus{outline:none}.ax-tree-view-node-content:focus-visible{outline:2px solid rgba(var(--ax-sys-color-primary-500),.8);outline-offset:var(--ax-comp-tree-view-outline-offset);border-radius:var(--ax-comp-tree-view-node-border-radius)}.ax-tree-view-drag-handle{cursor:grab;opacity:.6;padding:var(--ax-comp-tree-view-drag-handle-padding);padding-inline-start:calc(var(--ax-comp-tree-view-drag-handle-padding) * 2)}.ax-tree-view-drag-handle:hover{opacity:1}.ax-tree-view-drag-handle:active{cursor:grabbing}.ax-tree-view-expand-toggle{background:none;border:none;cursor:pointer;padding:var(--ax-comp-tree-view-expand-toggle-padding);min-width:1.5rem;height:1.5rem}.ax-tree-view-expand-toggle:not(.ax-tree-view-has-children){opacity:0;pointer-events:none}.ax-tree-view-toggle-icon{font-size:.75rem}.ax-tree-view-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree-view-node-label{flex:1;font-size:.875rem;line-height:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree-view-node-badge{padding:var(--ax-comp-tree-view-badge-padding);padding-inline-end:calc(var(--ax-comp-tree-view-badge-padding) * 1.5)}.ax-tree-view-children{padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree-view-node-loading{opacity:.7}.ax-tree-view-card .ax-tree-view-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.ax-tree-view-card .ax-tree-view-node.ax-tree-view-node-selected{border:1px solid rgba(var(--ax-sys-color-border-surface),1)}.ax-tree-view-with-lines .ax-tree-view-children{position:relative;padding-inline-start:var(--ax-tree-view-indent-size, var(--ax-comp-tree-view-indent-size))}.ax-tree-view-with-lines .ax-tree-view-children:before{content:\"\";position:absolute;inset-inline-start:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines .ax-tree-view-node{position:relative}.ax-tree-view-with-lines .ax-tree-view-node:before{content:\"\";position:absolute;inset-inline-start:calc(-1 * var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2)));top:60%;width:var(--ax-tree-view-line-offset, calc(var(--ax-comp-tree-view-indent-size) / 2));height:1px;background:var(--ax-tree-view-line-color, var(--ax-comp-tree-view-line-color))}.ax-tree-view-with-lines>.ax-tree-view-drop-list>.ax-tree-view-node:before,.ax-tree-view-with-lines>.ax-tree-view-node:before{display:none}\n"] }]
+        }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }, { type: i0.Output, args: ["datasourceChange"] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], titleField: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleField", required: false }] }], tooltipField: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipField", required: false }] }], iconField: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconField", required: false }] }], expandedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedField", required: false }] }], selectedField: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedField", required: false }] }], indeterminateField: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminateField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], hiddenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenField", required: false }] }], childrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenField", required: false }] }], childrenCountField: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenCountField", required: false }] }], dataField: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataField", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onNodeDoubleClick: [{ type: i0.Output, args: ["onNodeDoubleClick"] }], onNodeClick: [{ type: i0.Output, args: ["onNodeClick"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
 
 class AXTreeViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, imports: [AXTreeViewComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXTreeViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTreeViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXTreeViewComponent],