@memberjunction/ng-trees 5.42.0 → 5.44.0

package/dist/lib/ng-trees.module.d.ts

@@ -3,9 +3,10 @@ import * as i1 from "./tree/tree.component";
 import * as i2 from "./tree-dropdown/tree-dropdown.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/forms";
+import * as i5 from "@memberjunction/ng-ui-components";
 export declare class NgTreesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgTreesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgTreesModule, [typeof i1.TreeComponent, typeof i2.TreeDropdownComponent], [typeof i3.CommonModule, typeof i4.FormsModule], [typeof i1.TreeComponent, typeof i2.TreeDropdownComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgTreesModule, [typeof i1.TreeComponent, typeof i2.TreeDropdownComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.MJEmptyStateComponent], [typeof i1.TreeComponent, typeof i2.TreeDropdownComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgTreesModule>;
 }
 //# sourceMappingURL=ng-trees.module.d.ts.map

package/dist/lib/ng-trees.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ng-trees.module.d.ts","sourceRoot":"","sources":["../../src/lib/ng-trees.module.ts"],"names":[],"mappings":";;;;;AAcA,qBAca,aAAa;yCAAb,aAAa;0CAAb,aAAa;0CAAb,aAAa;CAAI"}
+{"version":3,"file":"ng-trees.module.d.ts","sourceRoot":"","sources":["../../src/lib/ng-trees.module.ts"],"names":[],"mappings":";;;;;;AAeA,qBAea,aAAa;yCAAb,aAAa;0CAAb,aAAa;0CAAb,aAAa;CAAI"}

package/dist/lib/ng-trees.module.js

@@ -6,6 +6,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { MJEmptyStateComponent } from '@memberjunction/ng-ui-components';
 // Components
 import { TreeComponent } from './tree/tree.component';
 import { TreeDropdownComponent } from './tree-dropdown/tree-dropdown.component';
@@ -14,7 +15,8 @@ export class NgTreesModule {
     static ɵfac = function NgTreesModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NgTreesModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: NgTreesModule });
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
-            FormsModule] });
+            FormsModule,
+            MJEmptyStateComponent] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgTreesModule, [{
         type: NgModule,
@@ -25,7 +27,8 @@ export class NgTreesModule {
                 ],
                 imports: [
                     CommonModule,
-                    FormsModule
+                    FormsModule,
+                    MJEmptyStateComponent
                 ],
                 exports: [
                     TreeComponent,
@@ -35,6 +38,7 @@ export class NgTreesModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(NgTreesModule, { declarations: [TreeComponent,
         TreeDropdownComponent], imports: [CommonModule,
-        FormsModule], exports: [TreeComponent,
+        FormsModule,
+        MJEmptyStateComponent], exports: [TreeComponent,
         TreeDropdownComponent] }); })();
 //# sourceMappingURL=ng-trees.module.js.map

package/dist/lib/ng-trees.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-trees.module.js","sourceRoot":"","sources":["../../src/lib/ng-trees.module.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,aAAa;AACb,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAgBhF,MAAM,OAAO,aAAa;uGAAb,aAAa;4DAAb,aAAa;gEARlB,YAAY;YACZ,WAAW;;iFAON,aAAa;cAdzB,QAAQ;eAAC;gBACN,YAAY,EAAE;oBACV,aAAa;oBACb,qBAAqB;iBACxB;gBACD,OAAO,EAAE;oBACL,YAAY;oBACZ,WAAW;iBACd;gBACD,OAAO,EAAE;oBACL,aAAa;oBACb,qBAAqB;iBACxB;aACJ;;wFACY,aAAa,mBAZlB,aAAa;QACb,qBAAqB,aAGrB,YAAY;QACZ,WAAW,aAGX,aAAa;QACb,qBAAqB","sourcesContent":["/**\n * NgTrees Module for @memberjunction/ng-trees\n *\n * Provides tree and tree dropdown components for hierarchical entity selection.\n */\n\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n// Components\nimport { TreeComponent } from './tree/tree.component';\nimport { TreeDropdownComponent } from './tree-dropdown/tree-dropdown.component';\n\n@NgModule({\n    declarations: [\n        TreeComponent,\n        TreeDropdownComponent\n    ],\n    imports: [\n        CommonModule,\n        FormsModule\n    ],\n    exports: [\n        TreeComponent,\n        TreeDropdownComponent\n    ]\n})\nexport class NgTreesModule { }\n"]}
+{"version":3,"file":"ng-trees.module.js","sourceRoot":"","sources":["../../src/lib/ng-trees.module.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEzE,aAAa;AACb,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;;AAiBhF,MAAM,OAAO,aAAa;uGAAb,aAAa;4DAAb,aAAa;gEATlB,YAAY;YACZ,WAAW;YACX,qBAAqB;;iFAOhB,aAAa;cAfzB,QAAQ;eAAC;gBACN,YAAY,EAAE;oBACV,aAAa;oBACb,qBAAqB;iBACxB;gBACD,OAAO,EAAE;oBACL,YAAY;oBACZ,WAAW;oBACX,qBAAqB;iBACxB;gBACD,OAAO,EAAE;oBACL,aAAa;oBACb,qBAAqB;iBACxB;aACJ;;wFACY,aAAa,mBAblB,aAAa;QACb,qBAAqB,aAGrB,YAAY;QACZ,WAAW;QACX,qBAAqB,aAGrB,aAAa;QACb,qBAAqB","sourcesContent":["/**\n * NgTrees Module for @memberjunction/ng-trees\n *\n * Provides tree and tree dropdown components for hierarchical entity selection.\n */\n\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MJEmptyStateComponent } from '@memberjunction/ng-ui-components';\n\n// Components\nimport { TreeComponent } from './tree/tree.component';\nimport { TreeDropdownComponent } from './tree-dropdown/tree-dropdown.component';\n\n@NgModule({\n    declarations: [\n        TreeComponent,\n        TreeDropdownComponent\n    ],\n    imports: [\n        CommonModule,\n        FormsModule,\n        MJEmptyStateComponent\n    ],\n    exports: [\n        TreeComponent,\n        TreeDropdownComponent\n    ]\n})\nexport class NgTreesModule { }\n"]}

package/dist/lib/tree/tree.component.js

@@ -10,6 +10,7 @@ import { createDefaultTreeNode } from '../models/tree-types';
 import { BeforeNodeSelectEventArgs, AfterNodeSelectEventArgs, BeforeNodeDeselectEventArgs, AfterNodeDeselectEventArgs, BeforeNodeExpandEventArgs, AfterNodeExpandEventArgs, BeforeNodeCollapseEventArgs, AfterNodeCollapseEventArgs, BeforeNodeClickEventArgs, AfterNodeClickEventArgs, BeforeNodeDoubleClickEventArgs, AfterNodeDoubleClickEventArgs, BeforeDataLoadEventArgs, AfterDataLoadEventArgs, BeforeKeyboardNavigateEventArgs, AfterKeyboardNavigateEventArgs } from '../events/tree-events';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
+import * as i2 from "@memberjunction/ng-ui-components";
 const _c0 = a0 => ({ node: a0 });
 const _c1 = (a0, a1) => ({ "fa-chevron-right": a0, "fa-chevron-down": a1 });
 function TreeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -49,23 +50,16 @@ function TreeComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } }
 function TreeComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 18);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 5);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.EmptyIcon + " tree-empty__icon");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.EmptyMessage);
+    i0.ɵɵproperty("Icon", ctx_r1.EmptyIcon)("Title", ctx_r1.EmptyMessage);
 } }
 function TreeComponent_Conditional_5_For_2_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function TreeComponent_Conditional_5_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, TreeComponent_Conditional_5_For_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 19);
+    i0.ɵɵtemplate(0, TreeComponent_Conditional_5_For_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 18);
 } if (rf & 2) {
     const node_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(2);
@@ -88,20 +82,20 @@ function TreeComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeater(ctx_r1.Nodes);
 } }
 function TreeComponent_ng_template_6_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 31);
+    i0.ɵɵelement(0, "i", 30);
 } if (rf & 2) {
     const node_r7 = i0.ɵɵnextContext(2).node;
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c1, !node_r7.Expanded, node_r7.Expanded));
 } }
 function TreeComponent_ng_template_6_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 32);
+    i0.ɵɵelement(0, "span", 31);
 } }
 function TreeComponent_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵlistener("click", function TreeComponent_ng_template_6_Conditional_1_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const node_r7 = i0.ɵɵnextContext().node; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onToggleClick(node_r7, $event)); });
-    i0.ɵɵconditionalCreate(1, TreeComponent_ng_template_6_Conditional_1_Conditional_1_Template, 1, 4, "i", 31);
-    i0.ɵɵconditionalCreate(2, TreeComponent_ng_template_6_Conditional_1_Conditional_2_Template, 1, 0, "span", 32);
+    i0.ɵɵconditionalCreate(1, TreeComponent_ng_template_6_Conditional_1_Conditional_1_Template, 1, 4, "i", 30);
+    i0.ɵɵconditionalCreate(2, TreeComponent_ng_template_6_Conditional_1_Conditional_2_Template, 1, 0, "span", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r7 = i0.ɵɵnextContext().node;
@@ -111,10 +105,10 @@ function TreeComponent_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(node_r7.Children.length === 0 ? 2 : -1);
 } }
 function TreeComponent_ng_template_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 22);
+    i0.ɵɵelement(0, "span", 21);
 } }
 function TreeComponent_ng_template_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelementStart(0, "span", 32);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -124,7 +118,7 @@ function TreeComponent_ng_template_6_Conditional_3_Template(rf, ctx) { if (rf &
     i0.ɵɵclassMap(node_r7.Icon);
 } }
 function TreeComponent_ng_template_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelementStart(0, "span", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -133,7 +127,7 @@ function TreeComponent_ng_template_6_Conditional_6_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate1(" ", node_r7.Description, " ");
 } }
 function TreeComponent_ng_template_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵelementStart(0, "span", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -142,15 +136,15 @@ function TreeComponent_ng_template_6_Conditional_7_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate1(" ", node_r7.Badge, " ");
 } }
 function TreeComponent_ng_template_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 28);
-    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementEnd();
 } }
 function TreeComponent_ng_template_6_Conditional_9_For_2_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function TreeComponent_ng_template_6_Conditional_9_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, TreeComponent_ng_template_6_Conditional_9_For_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 19);
+    i0.ɵɵtemplate(0, TreeComponent_ng_template_6_Conditional_9_For_2_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 18);
 } if (rf & 2) {
     const child_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(3);
@@ -164,7 +158,7 @@ function TreeComponent_ng_template_6_Conditional_9_For_2_Template(rf, ctx) { if
     i0.ɵɵconditional(child_r9.Visible ? 0 : -1);
 } }
 function TreeComponent_ng_template_6_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelementStart(0, "div", 34);
     i0.ɵɵrepeaterCreate(1, TreeComponent_ng_template_6_Conditional_9_For_2_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().trackNode, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -176,19 +170,19 @@ function TreeComponent_ng_template_6_Conditional_9_Template(rf, ctx) { if (rf &
 } }
 function TreeComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelementStart(0, "div", 19);
     i0.ɵɵlistener("click", function TreeComponent_ng_template_6_Template_div_click_0_listener($event) { const node_r7 = i0.ɵɵrestoreView(_r6).node; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNodeClick(node_r7, $event)); })("dblclick", function TreeComponent_ng_template_6_Template_div_dblclick_0_listener($event) { const node_r7 = i0.ɵɵrestoreView(_r6).node; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNodeDoubleClick(node_r7, $event)); });
-    i0.ɵɵconditionalCreate(1, TreeComponent_ng_template_6_Conditional_1_Template, 3, 2, "span", 21);
-    i0.ɵɵconditionalCreate(2, TreeComponent_ng_template_6_Conditional_2_Template, 1, 0, "span", 22);
-    i0.ɵɵconditionalCreate(3, TreeComponent_ng_template_6_Conditional_3_Template, 2, 4, "span", 23);
-    i0.ɵɵelementStart(4, "span", 24);
-    i0.ɵɵelement(5, "span", 25);
-    i0.ɵɵconditionalCreate(6, TreeComponent_ng_template_6_Conditional_6_Template, 2, 1, "span", 26);
+    i0.ɵɵconditionalCreate(1, TreeComponent_ng_template_6_Conditional_1_Template, 3, 2, "span", 20);
+    i0.ɵɵconditionalCreate(2, TreeComponent_ng_template_6_Conditional_2_Template, 1, 0, "span", 21);
+    i0.ɵɵconditionalCreate(3, TreeComponent_ng_template_6_Conditional_3_Template, 2, 4, "span", 22);
+    i0.ɵɵelementStart(4, "span", 23);
+    i0.ɵɵelement(5, "span", 24);
+    i0.ɵɵconditionalCreate(6, TreeComponent_ng_template_6_Conditional_6_Template, 2, 1, "span", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, TreeComponent_ng_template_6_Conditional_7_Template, 2, 1, "span", 27);
-    i0.ɵɵconditionalCreate(8, TreeComponent_ng_template_6_Conditional_8_Template, 2, 0, "span", 28);
+    i0.ɵɵconditionalCreate(7, TreeComponent_ng_template_6_Conditional_7_Template, 2, 1, "span", 26);
+    i0.ɵɵconditionalCreate(8, TreeComponent_ng_template_6_Conditional_8_Template, 2, 0, "span", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, TreeComponent_ng_template_6_Conditional_9_Template, 3, 2, "div", 29);
+    i0.ɵɵconditionalCreate(9, TreeComponent_ng_template_6_Conditional_9_Template, 3, 2, "div", 28);
 } if (rf & 2) {
     const node_r7 = ctx.node;
     const ctx_r1 = i0.ɵɵnextContext();
@@ -1625,12 +1619,12 @@ export class TreeComponent {
     static ɵfac = function TreeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeComponent, selectors: [["mj-tree"]], hostBindings: function TreeComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function TreeComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); });
-        } }, inputs: { BranchConfig: "BranchConfig", LeafConfig: "LeafConfig", SelectionMode: "SelectionMode", SelectableTypes: "SelectableTypes", SelectedIDs: "SelectedIDs", ExpandedIDs: "ExpandedIDs", ShowExpandCollapseAll: "ShowExpandCollapseAll", EnableKeyboardNavigation: "EnableKeyboardNavigation", KeyboardConfig: "KeyboardConfig", StyleConfig: "StyleConfig", IndentSize: "IndentSize", ShowLoading: "ShowLoading", EmptyMessage: "EmptyMessage", EmptyIcon: "EmptyIcon", AutoLoad: "AutoLoad", ShowIcons: "ShowIcons", ShowDescriptions: "ShowDescriptions", ShowBadges: "ShowBadges", AnimateExpandCollapse: "AnimateExpandCollapse" }, outputs: { BeforeNodeSelect: "BeforeNodeSelect", AfterNodeSelect: "AfterNodeSelect", BeforeNodeDeselect: "BeforeNodeDeselect", AfterNodeDeselect: "AfterNodeDeselect", BeforeNodeExpand: "BeforeNodeExpand", AfterNodeExpand: "AfterNodeExpand", BeforeNodeCollapse: "BeforeNodeCollapse", AfterNodeCollapse: "AfterNodeCollapse", BeforeNodeClick: "BeforeNodeClick", AfterNodeClick: "AfterNodeClick", BeforeNodeDoubleClick: "BeforeNodeDoubleClick", AfterNodeDoubleClick: "AfterNodeDoubleClick", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad", BeforeKeyboardNavigate: "BeforeKeyboardNavigate", AfterKeyboardNavigate: "AfterKeyboardNavigate", SelectionChange: "SelectionChange" }, standalone: false, decls: 8, vars: 6, consts: [["nodeTemplate", ""], ["tabindex", "0", 3, "ngClass"], [1, "tree-loading"], [1, "tree-error"], [1, "tree-toolbar"], [1, "tree-empty"], [1, "tree-content"], [1, "tree-loading__spinner"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "tree-loading__text"], [1, "fa-solid", "fa-exclamation-triangle", "tree-error__icon"], [1, "tree-error__message"], [1, "tree-error__retry", 3, "click"], [1, "fa-solid", "fa-refresh"], ["title", "Expand All", 1, "tree-toolbar__btn", 3, "click"], [1, "fa-solid", "fa-plus-square"], ["title", "Collapse All", 1, "tree-toolbar__btn", 3, "click"], [1, "fa-solid", "fa-minus-square"], [1, "tree-empty__message"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["role", "treeitem", 3, "click", "dblclick", "ngClass"], [1, "tree-node-toggle"], [1, "tree-node-leaf-spacer"], [1, "tree-node-icon", 3, "color"], [1, "tree-node-content"], [1, "tree-node-label", 3, "innerHTML"], [1, "tree-node-description"], [1, "tree-node-badge"], [1, "tree-node-selected-indicator"], ["role", "group", 1, "tree-node-children", 3, "tree-node-children--animated"], [1, "tree-node-toggle", 3, "click"], [1, "fa-solid", "tree-node-toggle__icon", 3, "ngClass"], [1, "tree-node-toggle__spacer"], [1, "tree-node-icon"], [1, "fa-solid", "fa-check"], ["role", "group", 1, "tree-node-children"]], template: function TreeComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { BranchConfig: "BranchConfig", LeafConfig: "LeafConfig", SelectionMode: "SelectionMode", SelectableTypes: "SelectableTypes", SelectedIDs: "SelectedIDs", ExpandedIDs: "ExpandedIDs", ShowExpandCollapseAll: "ShowExpandCollapseAll", EnableKeyboardNavigation: "EnableKeyboardNavigation", KeyboardConfig: "KeyboardConfig", StyleConfig: "StyleConfig", IndentSize: "IndentSize", ShowLoading: "ShowLoading", EmptyMessage: "EmptyMessage", EmptyIcon: "EmptyIcon", AutoLoad: "AutoLoad", ShowIcons: "ShowIcons", ShowDescriptions: "ShowDescriptions", ShowBadges: "ShowBadges", AnimateExpandCollapse: "AnimateExpandCollapse" }, outputs: { BeforeNodeSelect: "BeforeNodeSelect", AfterNodeSelect: "AfterNodeSelect", BeforeNodeDeselect: "BeforeNodeDeselect", AfterNodeDeselect: "AfterNodeDeselect", BeforeNodeExpand: "BeforeNodeExpand", AfterNodeExpand: "AfterNodeExpand", BeforeNodeCollapse: "BeforeNodeCollapse", AfterNodeCollapse: "AfterNodeCollapse", BeforeNodeClick: "BeforeNodeClick", AfterNodeClick: "AfterNodeClick", BeforeNodeDoubleClick: "BeforeNodeDoubleClick", AfterNodeDoubleClick: "AfterNodeDoubleClick", BeforeDataLoad: "BeforeDataLoad", AfterDataLoad: "AfterDataLoad", BeforeKeyboardNavigate: "BeforeKeyboardNavigate", AfterKeyboardNavigate: "AfterKeyboardNavigate", SelectionChange: "SelectionChange" }, standalone: false, decls: 8, vars: 6, consts: [["nodeTemplate", ""], ["tabindex", "0", 3, "ngClass"], [1, "tree-loading"], [1, "tree-error"], [1, "tree-toolbar"], ["Size", "compact", 1, "tree-empty", 3, "Icon", "Title"], [1, "tree-content"], [1, "tree-loading__spinner"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "tree-loading__text"], [1, "fa-solid", "fa-exclamation-triangle", "tree-error__icon"], [1, "tree-error__message"], [1, "tree-error__retry", 3, "click"], [1, "fa-solid", "fa-refresh"], ["title", "Expand All", 1, "tree-toolbar__btn", 3, "click"], [1, "fa-solid", "fa-plus-square"], ["title", "Collapse All", 1, "tree-toolbar__btn", 3, "click"], [1, "fa-solid", "fa-minus-square"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["role", "treeitem", 3, "click", "dblclick", "ngClass"], [1, "tree-node-toggle"], [1, "tree-node-leaf-spacer"], [1, "tree-node-icon", 3, "color"], [1, "tree-node-content"], [1, "tree-node-label", 3, "innerHTML"], [1, "tree-node-description"], [1, "tree-node-badge"], [1, "tree-node-selected-indicator"], ["role", "group", 1, "tree-node-children", 3, "tree-node-children--animated"], [1, "tree-node-toggle", 3, "click"], [1, "fa-solid", "tree-node-toggle__icon", 3, "ngClass"], [1, "tree-node-toggle__spacer"], [1, "tree-node-icon"], [1, "fa-solid", "fa-check"], ["role", "group", 1, "tree-node-children"]], template: function TreeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, TreeComponent_Conditional_1_Template, 5, 0, "div", 2);
             i0.ɵɵconditionalCreate(2, TreeComponent_Conditional_2_Template, 7, 1, "div", 3);
             i0.ɵɵconditionalCreate(3, TreeComponent_Conditional_3_Template, 5, 0, "div", 4);
-            i0.ɵɵconditionalCreate(4, TreeComponent_Conditional_4_Template, 4, 3, "div", 5);
+            i0.ɵɵconditionalCreate(4, TreeComponent_Conditional_4_Template, 1, 2, "mj-empty-state", 5);
             i0.ɵɵconditionalCreate(5, TreeComponent_Conditional_5_Template, 3, 0, "div", 6);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(6, TreeComponent_ng_template_6_Template, 10, 15, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
@@ -1646,11 +1640,11 @@ export class TreeComponent {
             i0.ɵɵconditional(ctx.IsLoaded && ctx.Nodes.length === 0 && !ctx.ErrorMessage && !ctx.IsLoading ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Nodes.length > 0 && !ctx.IsLoading ? 5 : -1);
-        } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n    \n\n    --tree-bg: var(--mj-bg-surface);\n    --tree-border-color: var(--mj-border-default);\n    --tree-text-color: var(--mj-text-primary);\n    --tree-text-secondary: var(--mj-text-muted);\n    --tree-text-muted: var(--mj-text-disabled);\n\n    \n\n    --tree-node-hover-bg: var(--mj-bg-surface-sunken);\n    --tree-node-selected-bg: var(--mj-brand-primary-subtle);\n    --tree-node-selected-border: var(--mj-brand-primary);\n    --tree-node-focused-outline: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n    --tree-node-match-bg: var(--mj-status-warning-subtle);\n\n    \n\n    --tree-icon-color: var(--mj-brand-primary);\n    --tree-icon-leaf-color: var(--mj-text-muted);\n    --tree-toggle-color: var(--mj-text-disabled);\n\n    \n\n    --tree-node-padding-y: 8px;\n    --tree-node-padding-x: 12px;\n    --tree-node-gap: 8px;\n    --tree-icon-size: 16px;\n    --tree-toggle-size: 12px;\n\n    \n\n    --tree-transition-duration: 150ms;\n    --tree-animation-easing: ease-out;\n\n    \n\n    --tree-badge-bg: var(--mj-border-default);\n    --tree-badge-color: var(--mj-text-muted);\n    --tree-badge-size: 12px;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n\n\n\n\n\n.tree-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--tree-bg);\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n    outline: none;\n}\n\n.tree-container[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n\n\n\n\n\n.tree-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-loading__spinner[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-2xl);\n    color: var(--tree-icon-color);\n}\n\n.tree-loading__text[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.tree-error[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    text-align: center;\n}\n\n.tree-error__icon[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--mj-status-error);\n}\n\n.tree-error__message[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    color: var(--tree-text-secondary);\n    max-width: 280px;\n}\n\n.tree-error__retry[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--tree-border-color);\n    border-radius: var(--mj-radius-md);\n    background: var(--tree-bg);\n    color: var(--tree-text-color);\n    font-size: var(--mj-text-sm);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-error__retry[_ngcontent-%COMP%]:hover {\n    background: var(--tree-node-hover-bg);\n    border-color: var(--tree-icon-color);\n    color: var(--tree-icon-color);\n}\n\n\n\n\n\n\n.tree-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-empty__icon[_ngcontent-%COMP%] {\n    font-size: 40px;\n    opacity: 0.5;\n}\n\n.tree-empty__message[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.tree-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--tree-border-color);\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-toolbar__btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    border-radius: var(--mj-radius-sm);\n    background: transparent;\n    color: var(--tree-text-secondary);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-toolbar__btn[_ngcontent-%COMP%]:hover {\n    background: var(--tree-bg);\n    color: var(--tree-icon-color);\n}\n\n\n\n\n\n\n.tree-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 4px 0;\n}\n\n\n\n\n\n\n.tree-node[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: var(--tree-node-gap);\n    padding: var(--tree-node-padding-y) var(--tree-node-padding-x);\n    cursor: pointer;\n    user-select: none;\n    border-left: 3px solid transparent;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n    min-height: 36px;\n}\n\n.tree-node[_ngcontent-%COMP%]:hover {\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-node--selected[_ngcontent-%COMP%] {\n    background: var(--tree-node-selected-bg);\n    border-left-color: var(--tree-node-selected-border);\n}\n\n.tree-node--selected[_ngcontent-%COMP%]:hover {\n    background: var(--tree-node-selected-bg);\n}\n\n.tree-node--focused[_ngcontent-%COMP%] {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n\n\n.tree-search-highlight[_ngcontent-%COMP%] {\n    background: var(--tree-node-match-bg);\n    padding: 1px 2px;\n    border-radius: 2px;\n    font-weight: 500;\n}\n\n\n\n\n\n\n.tree-node-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    border-radius: var(--mj-radius-sm);\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node-toggle[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.08);\n}\n\n.tree-node-toggle__icon[_ngcontent-%COMP%] {\n    font-size: var(--tree-toggle-size);\n    color: var(--tree-toggle-color);\n    transition: transform var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node--expanded[_ngcontent-%COMP%]   .tree-node-toggle__icon[_ngcontent-%COMP%] {\n    color: var(--tree-icon-color);\n}\n\n.tree-node-toggle__spacer[_ngcontent-%COMP%] {\n    width: var(--tree-toggle-size);\n}\n\n.tree-node-leaf-spacer[_ngcontent-%COMP%] {\n    width: 20px;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n.tree-node-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tree-icon-size);\n    flex-shrink: 0;\n    font-size: var(--tree-icon-size);\n    color: var(--tree-icon-color);\n}\n\n.tree-node--leaf[_ngcontent-%COMP%]   .tree-node-icon[_ngcontent-%COMP%] {\n    color: var(--tree-icon-leaf-color);\n}\n\n\n\n\n\n\n.tree-node-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.tree-node-label[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    font-weight: 500;\n    color: var(--tree-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tree-node--leaf[_ngcontent-%COMP%]   .tree-node-label[_ngcontent-%COMP%] {\n    font-weight: 400;\n}\n\n.tree-node-description[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--tree-text-muted);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n\n\n\n.tree-node-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: var(--tree-badge-bg);\n    color: var(--tree-badge-color);\n    font-size: var(--tree-badge-size);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n.tree-node-selected-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--mj-radius-full);\n    background: var(--tree-node-selected-border);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n.tree-node-children[_ngcontent-%COMP%] {\n    overflow: hidden;\n}\n\n.tree-node-children--animated[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_tree-expand var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n@keyframes _ngcontent-%COMP%_tree-expand {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\n\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--tree-border-color);\n    border-radius: var(--mj-radius-sm);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--tree-toggle-color);\n}\n\n\n\n\n\n\n@media (max-width: 480px) {\n    [_nghost-%COMP%] {\n        --tree-node-padding-y: 10px;\n        --tree-node-padding-x: 10px;\n        --tree-icon-size: 18px;\n    }\n\n    .tree-node-label[_ngcontent-%COMP%] {\n        font-size: var(--mj-text-base);\n    }\n}"] });
+        } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.MJEmptyStateComponent], styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n    \n\n    --tree-bg: var(--mj-bg-surface);\n    --tree-border-color: var(--mj-border-default);\n    --tree-text-color: var(--mj-text-primary);\n    --tree-text-secondary: var(--mj-text-muted);\n    --tree-text-muted: var(--mj-text-disabled);\n\n    \n\n    --tree-node-hover-bg: var(--mj-bg-surface-sunken);\n    --tree-node-selected-bg: var(--mj-brand-primary-subtle);\n    --tree-node-selected-border: var(--mj-brand-primary);\n    --tree-node-focused-outline: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n    --tree-node-match-bg: var(--mj-status-warning-subtle);\n\n    \n\n    --tree-icon-color: var(--mj-brand-primary);\n    --tree-icon-leaf-color: var(--mj-text-muted);\n    --tree-toggle-color: var(--mj-text-disabled);\n\n    \n\n    --tree-node-padding-y: 8px;\n    --tree-node-padding-x: 12px;\n    --tree-node-gap: 8px;\n    --tree-icon-size: 16px;\n    --tree-toggle-size: 12px;\n\n    \n\n    --tree-transition-duration: 150ms;\n    --tree-animation-easing: ease-out;\n\n    \n\n    --tree-badge-bg: var(--mj-border-default);\n    --tree-badge-color: var(--mj-text-muted);\n    --tree-badge-size: 12px;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n\n\n\n\n\n.tree-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--tree-bg);\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n    outline: none;\n}\n\n.tree-container[_ngcontent-%COMP%]:focus-visible {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n\n\n\n\n\n.tree-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-loading__spinner[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-2xl);\n    color: var(--tree-icon-color);\n}\n\n.tree-loading__text[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.tree-error[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    text-align: center;\n}\n\n.tree-error__icon[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--mj-status-error);\n}\n\n.tree-error__message[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    color: var(--tree-text-secondary);\n    max-width: 280px;\n}\n\n.tree-error__retry[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--tree-border-color);\n    border-radius: var(--mj-radius-md);\n    background: var(--tree-bg);\n    color: var(--tree-text-color);\n    font-size: var(--mj-text-sm);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-error__retry[_ngcontent-%COMP%]:hover {\n    background: var(--tree-node-hover-bg);\n    border-color: var(--tree-icon-color);\n    color: var(--tree-icon-color);\n}\n\n\n\n\n\n\n.tree-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-empty__icon[_ngcontent-%COMP%] {\n    font-size: 40px;\n    opacity: 0.5;\n}\n\n.tree-empty__message[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n}\n\n\n\n\n\n\n.tree-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--tree-border-color);\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-toolbar__btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    border-radius: var(--mj-radius-sm);\n    background: transparent;\n    color: var(--tree-text-secondary);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-toolbar__btn[_ngcontent-%COMP%]:hover {\n    background: var(--tree-bg);\n    color: var(--tree-icon-color);\n}\n\n\n\n\n\n\n.tree-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 4px 0;\n}\n\n\n\n\n\n\n.tree-node[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: var(--tree-node-gap);\n    padding: var(--tree-node-padding-y) var(--tree-node-padding-x);\n    cursor: pointer;\n    user-select: none;\n    border-left: 3px solid transparent;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n    min-height: 36px;\n}\n\n.tree-node[_ngcontent-%COMP%]:hover {\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-node--selected[_ngcontent-%COMP%] {\n    background: var(--tree-node-selected-bg);\n    border-left-color: var(--tree-node-selected-border);\n}\n\n.tree-node--selected[_ngcontent-%COMP%]:hover {\n    background: var(--tree-node-selected-bg);\n}\n\n.tree-node--focused[_ngcontent-%COMP%] {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n\n\n.tree-search-highlight[_ngcontent-%COMP%] {\n    background: var(--tree-node-match-bg);\n    padding: 1px 2px;\n    border-radius: 2px;\n    font-weight: 500;\n}\n\n\n\n\n\n\n.tree-node-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    border-radius: var(--mj-radius-sm);\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node-toggle[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.08);\n}\n\n.tree-node-toggle__icon[_ngcontent-%COMP%] {\n    font-size: var(--tree-toggle-size);\n    color: var(--tree-toggle-color);\n    transition: transform var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node--expanded[_ngcontent-%COMP%]   .tree-node-toggle__icon[_ngcontent-%COMP%] {\n    color: var(--tree-icon-color);\n}\n\n.tree-node-toggle__spacer[_ngcontent-%COMP%] {\n    width: var(--tree-toggle-size);\n}\n\n.tree-node-leaf-spacer[_ngcontent-%COMP%] {\n    width: 20px;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n.tree-node-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tree-icon-size);\n    flex-shrink: 0;\n    font-size: var(--tree-icon-size);\n    color: var(--tree-icon-color);\n}\n\n.tree-node--leaf[_ngcontent-%COMP%]   .tree-node-icon[_ngcontent-%COMP%] {\n    color: var(--tree-icon-leaf-color);\n}\n\n\n\n\n\n\n.tree-node-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.tree-node-label[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-sm);\n    font-weight: 500;\n    color: var(--tree-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tree-node--leaf[_ngcontent-%COMP%]   .tree-node-label[_ngcontent-%COMP%] {\n    font-weight: 400;\n}\n\n.tree-node-description[_ngcontent-%COMP%] {\n    font-size: var(--mj-text-xs);\n    color: var(--tree-text-muted);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n\n\n\n.tree-node-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: var(--tree-badge-bg);\n    color: var(--tree-badge-color);\n    font-size: var(--tree-badge-size);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n.tree-node-selected-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--mj-radius-full);\n    background: var(--tree-node-selected-border);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n.tree-node-children[_ngcontent-%COMP%] {\n    overflow: hidden;\n}\n\n.tree-node-children--animated[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_tree-expand var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n@keyframes _ngcontent-%COMP%_tree-expand {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\n\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--tree-border-color);\n    border-radius: var(--mj-radius-sm);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--tree-toggle-color);\n}\n\n\n\n\n\n\n@media (max-width: 480px) {\n    [_nghost-%COMP%] {\n        --tree-node-padding-y: 10px;\n        --tree-node-padding-x: 10px;\n        --tree-icon-size: 18px;\n    }\n\n    .tree-node-label[_ngcontent-%COMP%] {\n        font-size: var(--mj-text-base);\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-tree', template: "<!-- Tree Component Template -->\n<div [ngClass]=\"getContainerClasses()\" tabindex=\"0\">\n\n  <!-- Loading State -->\n  @if (IsLoading && ShowLoading) {\n    <div class=\"tree-loading\">\n      <div class=\"tree-loading__spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      </div>\n      <span class=\"tree-loading__text\">Loading...</span>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (ErrorMessage && !IsLoading) {\n    <div class=\"tree-error\">\n      <i class=\"fa-solid fa-exclamation-triangle tree-error__icon\"></i>\n      <span class=\"tree-error__message\">{{ ErrorMessage }}</span>\n      <button class=\"tree-error__retry\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-refresh\"></i>\n        Retry\n      </button>\n    </div>\n  }\n\n  <!-- Toolbar -->\n  @if (ShowExpandCollapseAll && Nodes.length > 0 && !IsLoading) {\n    <div class=\"tree-toolbar\">\n      <button\n        class=\"tree-toolbar__btn\"\n        (click)=\"ExpandAll()\"\n        title=\"Expand All\">\n        <i class=\"fa-solid fa-plus-square\"></i>\n      </button>\n      <button\n        class=\"tree-toolbar__btn\"\n        (click)=\"CollapseAll()\"\n        title=\"Collapse All\">\n        <i class=\"fa-solid fa-minus-square\"></i>\n      </button>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (IsLoaded && Nodes.length === 0 && !ErrorMessage && !IsLoading) {\n    <div class=\"tree-empty\">\n      <i [class]=\"EmptyIcon + ' tree-empty__icon'\"></i>\n      <span class=\"tree-empty__message\">{{ EmptyMessage }}</span>\n    </div>\n  }\n\n  <!-- Tree Content -->\n  @if (Nodes.length > 0 && !IsLoading) {\n    <div class=\"tree-content\">\n      @for (node of Nodes; track trackNode($index, node)) {\n        @if (node.Visible) {\n          <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { node: node }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Recursive Node Template -->\n<ng-template #nodeTemplate let-node=\"node\">\n  <div\n    [ngClass]=\"getNodeClasses(node)\"\n    [style.padding-left]=\"getNodePadding(node)\"\n    [attr.data-node-id]=\"node.ID\"\n    [attr.data-node-type]=\"node.Type\"\n    [attr.aria-expanded]=\"node.Type === 'branch' ? node.Expanded : null\"\n    [attr.aria-selected]=\"node.Selected\"\n    role=\"treeitem\"\n    (click)=\"onNodeClick(node, $event)\"\n    (dblclick)=\"onNodeDoubleClick(node, $event)\">\n\n    <!-- Toggle Button (for branches with children) -->\n    @if (node.Type === 'branch') {\n      <span\n        class=\"tree-node-toggle\"\n        (click)=\"onToggleClick(node, $event)\">\n        @if (node.Children.length > 0) {\n          <i\n            class=\"fa-solid tree-node-toggle__icon\"\n                [ngClass]=\"{\n                    'fa-chevron-right': !node.Expanded,\n                    'fa-chevron-down': node.Expanded\n                }\">\n          </i>\n        }\n        @if (node.Children.length === 0) {\n          <span\n            class=\"tree-node-toggle__spacer\">\n          </span>\n        }\n      </span>\n    }\n\n    <!-- Leaf Spacer (to align with branches, only when not at root level) -->\n    @if (node.Type === 'leaf' && node.Level > 0) {\n      <span\n        class=\"tree-node-leaf-spacer\"\n        >\n      </span>\n    }\n\n    <!-- Icon -->\n    @if (ShowIcons) {\n      <span\n        class=\"tree-node-icon\"\n        [style.color]=\"node.Color || null\">\n        <i [class]=\"node.Icon\"></i>\n      </span>\n    }\n\n    <!-- Content -->\n    <span class=\"tree-node-content\">\n      <!-- Label with search highlight -->\n      <span class=\"tree-node-label\" [innerHTML]=\"getHighlightedLabel(node)\"></span>\n\n      <!-- Description -->\n      @if (ShowDescriptions && node.Description) {\n        <span\n          class=\"tree-node-description\"\n          >\n          {{ node.Description }}\n        </span>\n      }\n    </span>\n\n    <!-- Badge -->\n    @if (ShowBadges && node.Badge) {\n      <span\n        class=\"tree-node-badge\"\n        >\n        {{ node.Badge }}\n      </span>\n    }\n\n    <!-- Selection Indicator -->\n    @if (node.Selected) {\n      <span class=\"tree-node-selected-indicator\">\n        <i class=\"fa-solid fa-check\"></i>\n      </span>\n    }\n  </div>\n\n  <!-- Children (if expanded) -->\n  @if (node.Type === 'branch' && node.Expanded && node.Children.length > 0) {\n    <div\n      class=\"tree-node-children\"\n      [class.tree-node-children--animated]=\"AnimateExpandCollapse\"\n      role=\"group\">\n      @for (child of node.Children; track trackNode($index, child)) {\n        @if (child.Visible) {\n          <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { node: child }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: ["/**\n * Tree Component Styles\n *\n * Uses CSS custom properties for easy theming.\n * Containers can override these variables to customize appearance.\n */\n\n/* ========================================\n   CSS Variables (Theming)\n   ======================================== */\n\n:host {\n    /* Colors */\n    --tree-bg: var(--mj-bg-surface);\n    --tree-border-color: var(--mj-border-default);\n    --tree-text-color: var(--mj-text-primary);\n    --tree-text-secondary: var(--mj-text-muted);\n    --tree-text-muted: var(--mj-text-disabled);\n\n    /* Node Colors */\n    --tree-node-hover-bg: var(--mj-bg-surface-sunken);\n    --tree-node-selected-bg: var(--mj-brand-primary-subtle);\n    --tree-node-selected-border: var(--mj-brand-primary);\n    --tree-node-focused-outline: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n    --tree-node-match-bg: var(--mj-status-warning-subtle);\n\n    /* Icon Colors */\n    --tree-icon-color: var(--mj-brand-primary);\n    --tree-icon-leaf-color: var(--mj-text-muted);\n    --tree-toggle-color: var(--mj-text-disabled);\n\n    /* Spacing */\n    --tree-node-padding-y: 8px;\n    --tree-node-padding-x: 12px;\n    --tree-node-gap: 8px;\n    --tree-icon-size: 16px;\n    --tree-toggle-size: 12px;\n\n    /* Animation */\n    --tree-transition-duration: 150ms;\n    --tree-animation-easing: ease-out;\n\n    /* Badge */\n    --tree-badge-bg: var(--mj-border-default);\n    --tree-badge-color: var(--mj-text-muted);\n    --tree-badge-size: 12px;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n/* ========================================\n   Container\n   ======================================== */\n\n.tree-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--tree-bg);\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n    outline: none;\n}\n\n.tree-container:focus-visible {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n/* ========================================\n   Loading State\n   ======================================== */\n\n.tree-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-loading__spinner {\n    font-size: var(--mj-text-2xl);\n    color: var(--tree-icon-color);\n}\n\n.tree-loading__text {\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Error State\n   ======================================== */\n\n.tree-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    text-align: center;\n}\n\n.tree-error__icon {\n    font-size: 32px;\n    color: var(--mj-status-error);\n}\n\n.tree-error__message {\n    font-size: var(--mj-text-sm);\n    color: var(--tree-text-secondary);\n    max-width: 280px;\n}\n\n.tree-error__retry {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--tree-border-color);\n    border-radius: var(--mj-radius-md);\n    background: var(--tree-bg);\n    color: var(--tree-text-color);\n    font-size: var(--mj-text-sm);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-error__retry:hover {\n    background: var(--tree-node-hover-bg);\n    border-color: var(--tree-icon-color);\n    color: var(--tree-icon-color);\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n.tree-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-empty__icon {\n    font-size: 40px;\n    opacity: 0.5;\n}\n\n.tree-empty__message {\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.tree-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--tree-border-color);\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-toolbar__btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    border-radius: var(--mj-radius-sm);\n    background: transparent;\n    color: var(--tree-text-secondary);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-toolbar__btn:hover {\n    background: var(--tree-bg);\n    color: var(--tree-icon-color);\n}\n\n/* ========================================\n   Tree Content\n   ======================================== */\n\n.tree-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 4px 0;\n}\n\n/* ========================================\n   Tree Node\n   ======================================== */\n\n.tree-node {\n    display: flex;\n    align-items: center;\n    gap: var(--tree-node-gap);\n    padding: var(--tree-node-padding-y) var(--tree-node-padding-x);\n    cursor: pointer;\n    user-select: none;\n    border-left: 3px solid transparent;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n    min-height: 36px;\n}\n\n.tree-node:hover {\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-node--selected {\n    background: var(--tree-node-selected-bg);\n    border-left-color: var(--tree-node-selected-border);\n}\n\n.tree-node--selected:hover {\n    background: var(--tree-node-selected-bg);\n}\n\n.tree-node--focused {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n/* Search highlight for matching text portion */\n.tree-search-highlight {\n    background: var(--tree-node-match-bg);\n    padding: 1px 2px;\n    border-radius: 2px;\n    font-weight: 500;\n}\n\n/* ========================================\n   Toggle Button\n   ======================================== */\n\n.tree-node-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    border-radius: var(--mj-radius-sm);\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node-toggle:hover {\n    background: rgba(0, 0, 0, 0.08);\n}\n\n.tree-node-toggle__icon {\n    font-size: var(--tree-toggle-size);\n    color: var(--tree-toggle-color);\n    transition: transform var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node--expanded .tree-node-toggle__icon {\n    color: var(--tree-icon-color);\n}\n\n.tree-node-toggle__spacer {\n    width: var(--tree-toggle-size);\n}\n\n.tree-node-leaf-spacer {\n    width: 20px;\n    flex-shrink: 0;\n}\n\n/* ========================================\n   Node Icon\n   ======================================== */\n\n.tree-node-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tree-icon-size);\n    flex-shrink: 0;\n    font-size: var(--tree-icon-size);\n    color: var(--tree-icon-color);\n}\n\n.tree-node--leaf .tree-node-icon {\n    color: var(--tree-icon-leaf-color);\n}\n\n/* ========================================\n   Node Content\n   ======================================== */\n\n.tree-node-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.tree-node-label {\n    font-size: var(--mj-text-sm);\n    font-weight: 500;\n    color: var(--tree-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tree-node--leaf .tree-node-label {\n    font-weight: 400;\n}\n\n.tree-node-description {\n    font-size: var(--mj-text-xs);\n    color: var(--tree-text-muted);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* ========================================\n   Node Badge\n   ======================================== */\n\n.tree-node-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: var(--tree-badge-bg);\n    color: var(--tree-badge-color);\n    font-size: var(--tree-badge-size);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n/* ========================================\n   Selection Indicator\n   ======================================== */\n\n.tree-node-selected-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--mj-radius-full);\n    background: var(--tree-node-selected-border);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n/* ========================================\n   Children Container\n   ======================================== */\n\n.tree-node-children {\n    overflow: hidden;\n}\n\n.tree-node-children--animated {\n    animation: tree-expand var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n@keyframes tree-expand {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n.tree-content::-webkit-scrollbar {\n    width: 8px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n    background: var(--tree-border-color);\n    border-radius: var(--mj-radius-sm);\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n    background: var(--tree-toggle-color);\n}\n\n/* ========================================\n   Responsive Adjustments\n   ======================================== */\n\n@media (max-width: 480px) {\n    :host {\n        --tree-node-padding-y: 10px;\n        --tree-node-padding-x: 10px;\n        --tree-icon-size: 18px;\n    }\n\n    .tree-node-label {\n        font-size: var(--mj-text-base);\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-tree', template: "<!-- Tree Component Template -->\n<div [ngClass]=\"getContainerClasses()\" tabindex=\"0\">\n\n  <!-- Loading State -->\n  @if (IsLoading && ShowLoading) {\n    <div class=\"tree-loading\">\n      <div class=\"tree-loading__spinner\">\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      </div>\n      <span class=\"tree-loading__text\">Loading...</span>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (ErrorMessage && !IsLoading) {\n    <div class=\"tree-error\">\n      <i class=\"fa-solid fa-exclamation-triangle tree-error__icon\"></i>\n      <span class=\"tree-error__message\">{{ ErrorMessage }}</span>\n      <button class=\"tree-error__retry\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-refresh\"></i>\n        Retry\n      </button>\n    </div>\n  }\n\n  <!-- Toolbar -->\n  @if (ShowExpandCollapseAll && Nodes.length > 0 && !IsLoading) {\n    <div class=\"tree-toolbar\">\n      <button\n        class=\"tree-toolbar__btn\"\n        (click)=\"ExpandAll()\"\n        title=\"Expand All\">\n        <i class=\"fa-solid fa-plus-square\"></i>\n      </button>\n      <button\n        class=\"tree-toolbar__btn\"\n        (click)=\"CollapseAll()\"\n        title=\"Collapse All\">\n        <i class=\"fa-solid fa-minus-square\"></i>\n      </button>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (IsLoaded && Nodes.length === 0 && !ErrorMessage && !IsLoading) {\n    <mj-empty-state class=\"tree-empty\" Size=\"compact\"\n      [Icon]=\"EmptyIcon\" [Title]=\"EmptyMessage\" />\n  }\n\n  <!-- Tree Content -->\n  @if (Nodes.length > 0 && !IsLoading) {\n    <div class=\"tree-content\">\n      @for (node of Nodes; track trackNode($index, node)) {\n        @if (node.Visible) {\n          <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { node: node }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Recursive Node Template -->\n<ng-template #nodeTemplate let-node=\"node\">\n  <div\n    [ngClass]=\"getNodeClasses(node)\"\n    [style.padding-left]=\"getNodePadding(node)\"\n    [attr.data-node-id]=\"node.ID\"\n    [attr.data-node-type]=\"node.Type\"\n    [attr.aria-expanded]=\"node.Type === 'branch' ? node.Expanded : null\"\n    [attr.aria-selected]=\"node.Selected\"\n    role=\"treeitem\"\n    (click)=\"onNodeClick(node, $event)\"\n    (dblclick)=\"onNodeDoubleClick(node, $event)\">\n\n    <!-- Toggle Button (for branches with children) -->\n    @if (node.Type === 'branch') {\n      <span\n        class=\"tree-node-toggle\"\n        (click)=\"onToggleClick(node, $event)\">\n        @if (node.Children.length > 0) {\n          <i\n            class=\"fa-solid tree-node-toggle__icon\"\n                [ngClass]=\"{\n                    'fa-chevron-right': !node.Expanded,\n                    'fa-chevron-down': node.Expanded\n                }\">\n          </i>\n        }\n        @if (node.Children.length === 0) {\n          <span\n            class=\"tree-node-toggle__spacer\">\n          </span>\n        }\n      </span>\n    }\n\n    <!-- Leaf Spacer (to align with branches, only when not at root level) -->\n    @if (node.Type === 'leaf' && node.Level > 0) {\n      <span\n        class=\"tree-node-leaf-spacer\"\n        >\n      </span>\n    }\n\n    <!-- Icon -->\n    @if (ShowIcons) {\n      <span\n        class=\"tree-node-icon\"\n        [style.color]=\"node.Color || null\">\n        <i [class]=\"node.Icon\"></i>\n      </span>\n    }\n\n    <!-- Content -->\n    <span class=\"tree-node-content\">\n      <!-- Label with search highlight -->\n      <span class=\"tree-node-label\" [innerHTML]=\"getHighlightedLabel(node)\"></span>\n\n      <!-- Description -->\n      @if (ShowDescriptions && node.Description) {\n        <span\n          class=\"tree-node-description\"\n          >\n          {{ node.Description }}\n        </span>\n      }\n    </span>\n\n    <!-- Badge -->\n    @if (ShowBadges && node.Badge) {\n      <span\n        class=\"tree-node-badge\"\n        >\n        {{ node.Badge }}\n      </span>\n    }\n\n    <!-- Selection Indicator -->\n    @if (node.Selected) {\n      <span class=\"tree-node-selected-indicator\">\n        <i class=\"fa-solid fa-check\"></i>\n      </span>\n    }\n  </div>\n\n  <!-- Children (if expanded) -->\n  @if (node.Type === 'branch' && node.Expanded && node.Children.length > 0) {\n    <div\n      class=\"tree-node-children\"\n      [class.tree-node-children--animated]=\"AnimateExpandCollapse\"\n      role=\"group\">\n      @for (child of node.Children; track trackNode($index, child)) {\n        @if (child.Visible) {\n          <ng-container *ngTemplateOutlet=\"nodeTemplate; context: { node: child }\"></ng-container>\n        }\n      }\n    </div>\n  }\n</ng-template>\n", styles: ["/**\n * Tree Component Styles\n *\n * Uses CSS custom properties for easy theming.\n * Containers can override these variables to customize appearance.\n */\n\n/* ========================================\n   CSS Variables (Theming)\n   ======================================== */\n\n:host {\n    /* Colors */\n    --tree-bg: var(--mj-bg-surface);\n    --tree-border-color: var(--mj-border-default);\n    --tree-text-color: var(--mj-text-primary);\n    --tree-text-secondary: var(--mj-text-muted);\n    --tree-text-muted: var(--mj-text-disabled);\n\n    /* Node Colors */\n    --tree-node-hover-bg: var(--mj-bg-surface-sunken);\n    --tree-node-selected-bg: var(--mj-brand-primary-subtle);\n    --tree-node-selected-border: var(--mj-brand-primary);\n    --tree-node-focused-outline: color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n    --tree-node-match-bg: var(--mj-status-warning-subtle);\n\n    /* Icon Colors */\n    --tree-icon-color: var(--mj-brand-primary);\n    --tree-icon-leaf-color: var(--mj-text-muted);\n    --tree-toggle-color: var(--mj-text-disabled);\n\n    /* Spacing */\n    --tree-node-padding-y: 8px;\n    --tree-node-padding-x: 12px;\n    --tree-node-gap: 8px;\n    --tree-icon-size: 16px;\n    --tree-toggle-size: 12px;\n\n    /* Animation */\n    --tree-transition-duration: 150ms;\n    --tree-animation-easing: ease-out;\n\n    /* Badge */\n    --tree-badge-bg: var(--mj-border-default);\n    --tree-badge-color: var(--mj-text-muted);\n    --tree-badge-size: 12px;\n\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\n/* ========================================\n   Container\n   ======================================== */\n\n.tree-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    background: var(--tree-bg);\n    border-radius: var(--mj-radius-md);\n    overflow: hidden;\n    outline: none;\n}\n\n.tree-container:focus-visible {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n/* ========================================\n   Loading State\n   ======================================== */\n\n.tree-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-loading__spinner {\n    font-size: var(--mj-text-2xl);\n    color: var(--tree-icon-color);\n}\n\n.tree-loading__text {\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Error State\n   ======================================== */\n\n.tree-error {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 32px 16px;\n    gap: 12px;\n    text-align: center;\n}\n\n.tree-error__icon {\n    font-size: 32px;\n    color: var(--mj-status-error);\n}\n\n.tree-error__message {\n    font-size: var(--mj-text-sm);\n    color: var(--tree-text-secondary);\n    max-width: 280px;\n}\n\n.tree-error__retry {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    border: 1px solid var(--tree-border-color);\n    border-radius: var(--mj-radius-md);\n    background: var(--tree-bg);\n    color: var(--tree-text-color);\n    font-size: var(--mj-text-sm);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-error__retry:hover {\n    background: var(--tree-node-hover-bg);\n    border-color: var(--tree-icon-color);\n    color: var(--tree-icon-color);\n}\n\n/* ========================================\n   Empty State\n   ======================================== */\n\n.tree-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px 16px;\n    gap: 12px;\n    color: var(--tree-text-muted);\n}\n\n.tree-empty__icon {\n    font-size: 40px;\n    opacity: 0.5;\n}\n\n.tree-empty__message {\n    font-size: var(--mj-text-sm);\n}\n\n/* ========================================\n   Toolbar\n   ======================================== */\n\n.tree-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--tree-border-color);\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-toolbar__btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border: none;\n    border-radius: var(--mj-radius-sm);\n    background: transparent;\n    color: var(--tree-text-secondary);\n    cursor: pointer;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-toolbar__btn:hover {\n    background: var(--tree-bg);\n    color: var(--tree-icon-color);\n}\n\n/* ========================================\n   Tree Content\n   ======================================== */\n\n.tree-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 4px 0;\n}\n\n/* ========================================\n   Tree Node\n   ======================================== */\n\n.tree-node {\n    display: flex;\n    align-items: center;\n    gap: var(--tree-node-gap);\n    padding: var(--tree-node-padding-y) var(--tree-node-padding-x);\n    cursor: pointer;\n    user-select: none;\n    border-left: 3px solid transparent;\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n    min-height: 36px;\n}\n\n.tree-node:hover {\n    background: var(--tree-node-hover-bg);\n}\n\n.tree-node--selected {\n    background: var(--tree-node-selected-bg);\n    border-left-color: var(--tree-node-selected-border);\n}\n\n.tree-node--selected:hover {\n    background: var(--tree-node-selected-bg);\n}\n\n.tree-node--focused {\n    outline: 2px solid var(--tree-node-focused-outline);\n    outline-offset: -2px;\n}\n\n/* Search highlight for matching text portion */\n.tree-search-highlight {\n    background: var(--tree-node-match-bg);\n    padding: 1px 2px;\n    border-radius: 2px;\n    font-weight: 500;\n}\n\n/* ========================================\n   Toggle Button\n   ======================================== */\n\n.tree-node-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    border-radius: var(--mj-radius-sm);\n    transition: all var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node-toggle:hover {\n    background: rgba(0, 0, 0, 0.08);\n}\n\n.tree-node-toggle__icon {\n    font-size: var(--tree-toggle-size);\n    color: var(--tree-toggle-color);\n    transition: transform var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n.tree-node--expanded .tree-node-toggle__icon {\n    color: var(--tree-icon-color);\n}\n\n.tree-node-toggle__spacer {\n    width: var(--tree-toggle-size);\n}\n\n.tree-node-leaf-spacer {\n    width: 20px;\n    flex-shrink: 0;\n}\n\n/* ========================================\n   Node Icon\n   ======================================== */\n\n.tree-node-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tree-icon-size);\n    flex-shrink: 0;\n    font-size: var(--tree-icon-size);\n    color: var(--tree-icon-color);\n}\n\n.tree-node--leaf .tree-node-icon {\n    color: var(--tree-icon-leaf-color);\n}\n\n/* ========================================\n   Node Content\n   ======================================== */\n\n.tree-node-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.tree-node-label {\n    font-size: var(--mj-text-sm);\n    font-weight: 500;\n    color: var(--tree-text-color);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.tree-node--leaf .tree-node-label {\n    font-weight: 400;\n}\n\n.tree-node-description {\n    font-size: var(--mj-text-xs);\n    color: var(--tree-text-muted);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* ========================================\n   Node Badge\n   ======================================== */\n\n.tree-node-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: var(--tree-badge-bg);\n    color: var(--tree-badge-color);\n    font-size: var(--tree-badge-size);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n/* ========================================\n   Selection Indicator\n   ======================================== */\n\n.tree-node-selected-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    border-radius: var(--mj-radius-full);\n    background: var(--tree-node-selected-border);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    flex-shrink: 0;\n}\n\n/* ========================================\n   Children Container\n   ======================================== */\n\n.tree-node-children {\n    overflow: hidden;\n}\n\n.tree-node-children--animated {\n    animation: tree-expand var(--tree-transition-duration) var(--tree-animation-easing);\n}\n\n@keyframes tree-expand {\n    from {\n        opacity: 0;\n        transform: translateY(-8px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n.tree-content::-webkit-scrollbar {\n    width: 8px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n    background: var(--tree-border-color);\n    border-radius: var(--mj-radius-sm);\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n    background: var(--tree-toggle-color);\n}\n\n/* ========================================\n   Responsive Adjustments\n   ======================================== */\n\n@media (max-width: 480px) {\n    :host {\n        --tree-node-padding-y: 10px;\n        --tree-node-padding-x: 10px;\n        --tree-icon-size: 18px;\n    }\n\n    .tree-node-label {\n        font-size: var(--mj-text-base);\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { BranchConfig: [{
             type: Input
         }], LeafConfig: [{