@acorex/components 21.0.0-next.30 → 21.0.0-next.32

package/fesm2022/acorex-components-tree2.mjs

@@ -643,10 +643,10 @@ class AXTree2Component {
         }
         this.onItemsChange.emit(dropEvent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTree2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXTree2Component, isStandalone: true, selector: "ax-tree2", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragOperationType: { classPropertyName: "dragOperationType", publicName: "dragOperationType", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, enableLazyLoad: { classPropertyName: "enableLazyLoad", publicName: "enableLazyLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { properties: { "class.ax-tree2-default": "look() === 'default'", "class.ax-tree2-card": "look() === 'card'", "class.ax-tree2-with-line": "look() === 'with-line'", "style.--ax-tree-indent-size": "indentSize() + 'px'", "style.--ax-tree-line-offset": "(indentSize() / 2) + 'px'" }, classAttribute: "ax-tree2" }, ngImport: i0, template: "<!-- Root drop list -->\n<div\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree2-drop-list\"\n  [class.ax-tree2-card]=\"look() === 'card'\"\n  [class.ax-tree2-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree2-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree2-comfortable]=\"nodeHeight() === 'comfortable'\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree2-node\"\n        [class.ax-tree2-node-selected]=\"node.selected\"\n        [class.ax-tree2-node-disabled]=\"node.disabled\"\n        [class.ax-tree2-node-loading]=\"node.loading\"\n      >\n        <div\n          class=\"ax-tree2-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree2-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree2-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree2-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (showCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree2-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n            }\n            <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree2-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree2-children\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree2-drop-list\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree2-node\"\n          [class.ax-tree2-node-selected]=\"node.selected\"\n          [class.ax-tree2-node-disabled]=\"node.disabled\"\n          [class.ax-tree2-node-loading]=\"node.loading\"\n        >\n          <div\n            class=\"ax-tree2-node-content\"\n            [style.padding-left.px]=\"(level * indentSize()) / (look() === 'with-line' ? 3 : 1)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree2-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree2-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree2-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (showCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree2-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n              }\n              <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree2-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree2-children\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree2{display:block;width:100%;--ax-comp-tree2-indent-size: 12px;--ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree2-node-border-radius: 6px;--ax-comp-tree2-node-margin: .25rem;--ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree2-drag-preview-opacity: .9;--ax-comp-tree2-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree2-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree2-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree2-drop-list{min-height:2rem}.ax-tree2-compact .ax-tree2-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree2-comfortable .ax-tree2-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree2-node{position:relative;margin:var(--ax-comp-tree2-node-margin) 0;border-radius:var(--ax-comp-tree2-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree2-node:hover:not(.ax-dragging){background:var(--ax-comp-tree2-node-hover-bg)}.ax-tree2-node.ax-tree2-node-selected{background:var(--ax-comp-tree2-node-selected-bg);border-color:currentColor}.ax-tree2-node.ax-dragging{opacity:var(--ax-comp-tree2-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree2-node.ax-drag-placeholder{background:var(--ax-comp-tree2-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree2-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree2-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree2-drop-active-bg);border-radius:var(--ax-comp-tree2-node-border-radius);outline:2px dashed var(--ax-comp-tree2-drop-active-outline);outline-offset:-2px}.ax-tree2-node-content{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-tree2-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree2-drag-handle:hover{opacity:1}.ax-tree2-drag-handle:active{cursor:grabbing}.ax-tree2-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree2-expand-toggle:not(.ax-tree2-has-children){opacity:0;pointer-events:none}.ax-tree2-toggle-icon{font-size:.75rem}.ax-tree2-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree2-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree2-children{padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree2-node-loading{opacity:.7}.ax-tree2-card .ax-tree2-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree2-card .ax-tree2-node-content{padding:1rem}.ax-tree2-with-lines .ax-tree2-children{position:relative;padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines .ax-tree2-children:before{content:\"\";position:absolute;left:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines .ax-tree2-node{position:relative}.ax-tree2-with-lines .ax-tree2-node:before{content:\"\";position:absolute;left:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)));top:60%;width:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));height:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines>.ax-tree2-drop-list>.ax-tree2-node:before,.ax-tree2-with-lines>.ax-tree2-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXTree2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXTree2Component, isStandalone: true, selector: "ax-tree2", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: true, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragOperationType: { classPropertyName: "dragOperationType", publicName: "dragOperationType", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, nodeHeight: { classPropertyName: "nodeHeight", publicName: "nodeHeight", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, enableLazyLoad: { classPropertyName: "enableLazyLoad", publicName: "enableLazyLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodes: "nodesChange", onBeforeDrop: "onBeforeDrop", onNodeToggle: "onNodeToggle", onNodeSelect: "onNodeSelect", onOrderChange: "onOrderChange", onMoveChange: "onMoveChange", onItemsChange: "onItemsChange" }, host: { properties: { "class.ax-tree2-default": "look() === 'default'", "class.ax-tree2-card": "look() === 'card'", "class.ax-tree2-with-line": "look() === 'with-line'", "style.--ax-tree-indent-size": "indentSize() + 'px'", "style.--ax-tree-line-offset": "(indentSize() / 2) + 'px'" }, classAttribute: "ax-tree2" }, ngImport: i0, template: "<!-- Root drop list -->\n<div\n  [axDropList]=\"dragMode() !== 'none'\"\n  [sortingDisabled]=\"false\"\n  [id]=\"getListId()\"\n  [attr.data-node-id]=\"null\"\n  dropListGroup=\"ax-tree-nodes\"\n  (dropListDropped)=\"onDrop($event)\"\n  class=\"ax-tree2-drop-list\"\n  [class.ax-tree2-card]=\"look() === 'card'\"\n  [class.ax-tree2-with-lines]=\"look() === 'with-line'\"\n  [class.ax-tree2-compact]=\"nodeHeight() === 'compact'\"\n  [class.ax-tree2-comfortable]=\"nodeHeight() === 'comfortable'\"\n>\n  @for (node of nodes(); track node.id) {\n    @if (node.visible !== false) {\n      <div\n        [axDrag]=\"dragMode() !== 'none'\"\n        [dragDisabled]=\"node.disabled\"\n        [dragData]=\"node\"\n        class=\"ax-tree2-node\"\n        [class.ax-tree2-node-selected]=\"node.selected\"\n        [class.ax-tree2-node-disabled]=\"node.disabled\"\n        [class.ax-tree2-node-loading]=\"node.loading\"\n      >\n        <div\n          class=\"ax-tree2-node-content\"\n          [axDropList]=\"dragMode() !== 'none'\"\n          [id]=\"'ax-tree-node-drop-' + node.id\"\n          [attr.data-node-id]=\"node.id\"\n          [attr.data-drop-type]=\"'onto-node'\"\n          dropListGroup=\"ax-tree-nodes\"\n          (dropListDropped)=\"onDropOntoNode($event, node)\"\n        >\n          @if (dragMode() === 'handler') {\n            <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n          }\n          <ax-button\n            class=\"ax-tree2-expand-toggle ax-sm\"\n            (onClick)=\"toggleNode(node, $any($event))\"\n            [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n            [class.ax-tree2-expanded]=\"node.expanded\"\n            [disabled]=\"node.disabled || node.loading\"\n            [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n          >\n            @if (node.loading) {\n              <ax-icon>\n                <i class=\"fa-solid fa-spinner fa-spin ax-tree2-loading-spinner\"></i>\n              </ax-icon>\n            } @else {\n              <ax-icon>\n                <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></i>\n              </ax-icon>\n            }\n          </ax-button>\n          @if (itemTemplate()) {\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()!\"\n              [ngTemplateOutletContext]=\"getTemplateContext(node, 0)\"\n            ></ng-container>\n          } @else {\n            @if (showCheckbox()) {\n              <ax-check-box\n                class=\"ax-tree2-checkbox\"\n                [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                [indeterminate]=\"node.indeterminate || false\"\n                (onValueChanged)=\"toggleSelection(node, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                (pointerdown)=\"$event.stopPropagation()\"\n              ></ax-check-box>\n            }\n            @if (showIcons() && node.icon) {\n              <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n            }\n            <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n            @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n              <ax-badge\n                class=\"ax-tree2-children-badge\"\n                [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n              ></ax-badge>\n            }\n          }\n        </div>\n      </div>\n      @if (node.expanded && node.children && node.children.length > 0) {\n        <div class=\"ax-tree2-children\">\n          <ng-container\n            [ngTemplateOutlet]=\"childrenList\"\n            [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: 1 }\"\n          ></ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n\n<!-- Recursive children template -->\n<ng-template #childrenList let-children=\"children\" let-parent=\"parent\" let-level=\"level\">\n  <div\n    [axDropList]=\"dragMode() !== 'none'\"\n    [id]=\"getListId(parent)\"\n    [attr.data-node-id]=\"parent.id\"\n    dropListGroup=\"ax-tree-nodes\"\n    (dropListDropped)=\"onDrop($event, parent)\"\n    class=\"ax-tree2-drop-list\"\n  >\n    @for (node of children; track node.id) {\n      @if (node.visible !== false) {\n        <div\n          [axDrag]=\"dragMode() !== 'none'\"\n          [dragDisabled]=\"node.disabled\"\n          [dragData]=\"node\"\n          class=\"ax-tree2-node\"\n          [class.ax-tree2-node-selected]=\"node.selected\"\n          [class.ax-tree2-node-disabled]=\"node.disabled\"\n          [class.ax-tree2-node-loading]=\"node.loading\"\n        >\n          <div\n            class=\"ax-tree2-node-content\"\n            [style.padding-left.px]=\"(level * indentSize()) / (look() === 'with-line' ? 3 : 1)\"\n            [axDropList]=\"dragMode() !== 'none'\"\n            [id]=\"'ax-tree-node-drop-' + node.id\"\n            [attr.data-node-id]=\"node.id\"\n            [attr.data-drop-type]=\"'onto-node'\"\n            dropListGroup=\"ax-tree-nodes\"\n            (dropListDropped)=\"onDropOntoNode($event, node)\"\n          >\n            @if (dragMode() === 'handler') {\n              <span class=\"ax-tree2-drag-handle\" axDragHandle title=\"Drag to reorder\"> \u22EE\u22EE </span>\n            }\n            <ax-button\n              class=\"ax-tree2-expand-toggle ax-sm\"\n              (onClick)=\"toggleNode(node, $any($event))\"\n              [class.ax-tree2-has-children]=\"shouldShowExpandToggle(node)\"\n              [class.ax-tree2-expanded]=\"node.expanded\"\n              [disabled]=\"node.disabled || node.loading\"\n              [style.visibility]=\"shouldShowExpandToggle(node) ? 'visible' : 'hidden'\"\n            >\n              @if (node.loading) {\n                <ax-icon>\n                  <i class=\"fa-solid fa-spinner fa-spin ax-tree2-loading-spinner\"></i>\n                </ax-icon>\n              } @else {\n                <ax-icon>\n                  <i [class]=\"node.expanded ? expandedIcon() : collapsedIcon()\" class=\"ax-tree2-toggle-icon\"></i>\n                </ax-icon>\n              }\n            </ax-button>\n\n            @if (itemTemplate()) {\n              <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()!\"\n                [ngTemplateOutletContext]=\"getTemplateContext(node, level)\"\n              ></ng-container>\n            } @else {\n              @if (showCheckbox()) {\n                <ax-check-box\n                  class=\"ax-tree2-checkbox\"\n                  [ngModel]=\"node.indeterminate ? null : node.selected || false\"\n                  [indeterminate]=\"node.indeterminate || false\"\n                  (onValueChanged)=\"toggleSelection(node, $event)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                ></ax-check-box>\n              }\n              @if (showIcons() && node.icon) {\n                <i [class]=\"node.icon\" class=\"ax-tree2-node-icon\"></i>\n              }\n              <span class=\"ax-tree2-node-label\">{{ node.label }}</span>\n              @if (showChildrenBadge() && (node.childrenCount || (node.children && node.children.length > 0))) {\n                <ax-badge\n                  class=\"ax-tree2-children-badge\"\n                  [text]=\"(node.childrenCount ?? node.children?.length ?? 0).toString()\"\n                ></ax-badge>\n              }\n            }\n          </div>\n        </div>\n        @if (node.expanded && node.children && node.children.length > 0) {\n          <div class=\"ax-tree2-children\">\n            <ng-container\n              [ngTemplateOutlet]=\"childrenList\"\n              [ngTemplateOutletContext]=\"{ children: node.children, parent: node, level: level + 1 }\"\n            ></ng-container>\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".ax-tree2{display:block;width:100%;--ax-comp-tree2-indent-size: 12px;--ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-on-lightest-surface), .04);--ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-500), .12);--ax-comp-tree2-node-border-radius: 6px;--ax-comp-tree2-node-margin: .25rem;--ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), .15);--ax-comp-tree2-drag-preview-opacity: .9;--ax-comp-tree2-drag-placeholder-bg: rgba(var(--ax-sys-color-on-lightest-surface), .02);--ax-comp-tree2-drop-active-bg: rgba(var(--ax-sys-color-primary-500), .08);--ax-comp-tree2-drop-active-outline: rgba(var(--ax-sys-color-primary-500), .3)}.ax-tree2-drop-list{min-height:2rem}.ax-tree2-compact .ax-tree2-node-content{padding:.25rem .5rem;gap:.375rem;font-size:.8125rem}.ax-tree2-comfortable .ax-tree2-node-content{padding:.75rem .625rem;gap:.625rem;font-size:.9375rem}.ax-tree2-node{position:relative;margin:var(--ax-comp-tree2-node-margin) 0;border-radius:var(--ax-comp-tree2-node-border-radius);border:1px solid transparent;cursor:move}.ax-tree2-node:hover:not(.ax-dragging){background:var(--ax-comp-tree2-node-hover-bg)}.ax-tree2-node.ax-tree2-node-selected{background:var(--ax-comp-tree2-node-selected-bg);border-color:currentColor}.ax-tree2-node.ax-dragging{opacity:var(--ax-comp-tree2-drag-placeholder-opacity);cursor:grabbing!important}.ax-tree2-node.ax-drag-placeholder{background:var(--ax-comp-tree2-drag-placeholder-bg)}.ax-drag-preview{opacity:var(--ax-comp-tree2-drag-preview-opacity)!important;box-shadow:0 4px 12px rgba(var(--ax-sys-color-on-lightest-surface),.2)!important;cursor:grabbing!important;border:2px dashed currentColor!important}.ax-tree2-node-content.ax-drop-list-sorting-active{background:var(--ax-comp-tree2-drop-active-bg);border-radius:var(--ax-comp-tree2-node-border-radius);outline:2px dashed var(--ax-comp-tree2-drop-active-outline);outline-offset:-2px}.ax-tree2-node-content{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ax-tree2-drag-handle{cursor:grab;opacity:.6;padding:.25rem}.ax-tree2-drag-handle:hover{opacity:1}.ax-tree2-drag-handle:active{cursor:grabbing}.ax-tree2-expand-toggle{background:none;border:none;cursor:pointer;padding:.25rem;min-width:1.5rem;height:1.5rem}.ax-tree2-expand-toggle:not(.ax-tree2-has-children){opacity:0;pointer-events:none}.ax-tree2-toggle-icon{font-size:.75rem}.ax-tree2-node-icon{font-size:1.125rem;flex-shrink:0}.ax-tree2-node-label{flex:1;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-tree2-children{padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-node-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ax-tree2-node-loading{opacity:.7}.ax-tree2-card .ax-tree2-node{border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1);margin:.5rem 0}.ax-tree2-card .ax-tree2-node-content{padding:1rem}.ax-tree2-with-lines .ax-tree2-children{position:relative;padding-left:var(--ax-tree-indent-size, var(--ax-comp-tree2-indent-size))}.ax-tree2-with-lines .ax-tree2-children:before{content:\"\";position:absolute;left:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));top:0;height:calc(100% - .875rem);width:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines .ax-tree2-node{position:relative}.ax-tree2-with-lines .ax-tree2-node:before{content:\"\";position:absolute;left:calc(-1 * var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2)));top:60%;width:var(--ax-tree-line-offset, calc(var(--ax-comp-tree2-indent-size) / 2));height:1px;background:var(--ax-tree-line-color, var(--ax-comp-tree2-line-color))}.ax-tree2-with-lines>.ax-tree2-drop-list>.ax-tree2-node:before,.ax-tree2-with-lines>.ax-tree2-node:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXTree2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXTree2Component, decorators: [{
             type: Component,
             args: [{ selector: 'ax-tree2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
@@ -670,11 +670,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }, { type: i0.Output, args: ["nodesChange"] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], dragOperationType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragOperationType", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], nodeHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeHeight", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], enableLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLazyLoad", required: false }] }], onBeforeDrop: [{ type: i0.Output, args: ["onBeforeDrop"] }], onNodeToggle: [{ type: i0.Output, args: ["onNodeToggle"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onOrderChange: [{ type: i0.Output, args: ["onOrderChange"] }], onMoveChange: [{ type: i0.Output, args: ["onMoveChange"] }], onItemsChange: [{ type: i0.Output, args: ["onItemsChange"] }] } });
 
 class Tree2Module {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tree2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: Tree2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: Tree2Module, imports: [AXTree2Component] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: Tree2Module, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: Tree2Module, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXTree2Component],