@memberjunction/ng-hierarchy-tree 0.0.0 → 6.1.0-edge.4

package/dist/lib/components/hierarchy-tree.component.js

@@ -0,0 +1,1393 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RunView, CompositeKey } from '@memberjunction/core';
+import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import * as d3 from 'd3';
+import { CancelableHierarchyNodeEvent } from '../events/hierarchy-tree.events';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+const _c0 = ["svgContainer"];
+const _c1 = ["svgElement"];
+const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.key;
+function HierarchyTreeComponent_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementEnd();
+} }
+function HierarchyTreeComponent_Conditional_1_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r2.MatchingNodeCount, " found");
+} }
+function HierarchyTreeComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelementStart(2, "input", 20);
+    i0.ɵɵtwoWayListener("ngModelChange", function HierarchyTreeComponent_Conditional_1_Conditional_1_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.SearchQuery, $event) || (ctx_r2.SearchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function HierarchyTreeComponent_Conditional_1_Conditional_1_Template_input_input_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSearchInput()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, HierarchyTreeComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 21);
+    i0.ɵɵconditionalCreate(4, HierarchyTreeComponent_Conditional_1_Conditional_1_Conditional_4_Template, 2, 1, "span", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.SearchQuery);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.SearchQuery ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.SearchQuery && ctx_r2.MatchingNodeCount > 0 ? 4 : -1);
+} }
+function HierarchyTreeComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Focusing subtree: ");
+    i0.ɵɵelementStart(4, "strong");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "button", 26);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.resetFocus()); });
+    i0.ɵɵelement(7, "i", 27);
+    i0.ɵɵtext(8, " View Full Hierarchy ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.FocusedNode.Name);
+} }
+function HierarchyTreeComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "button", 28);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.expandAll()); });
+    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 30);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.collapseAll()); });
+    i0.ɵɵelement(4, "i", 31);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "div", 32);
+    i0.ɵɵelementStart(6, "button", 33);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.zoomIn()); });
+    i0.ɵɵelement(7, "i", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 35);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.zoomOut()); });
+    i0.ɵɵelement(9, "i", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 37);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onFitToViewClick()); });
+    i0.ɵɵelement(11, "i", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(12, "div", 32);
+    i0.ɵɵelementStart(13, "button", 39);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_1_Conditional_3_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.refresh()); });
+    i0.ɵɵelement(14, "i", 40);
+    i0.ɵɵelementEnd()();
+} }
+function HierarchyTreeComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵconditionalCreate(1, HierarchyTreeComponent_Conditional_1_Conditional_1_Template, 5, 3, "div", 16);
+    i0.ɵɵconditionalCreate(2, HierarchyTreeComponent_Conditional_1_Conditional_2_Template, 9, 1, "div", 17);
+    i0.ɵɵconditionalCreate(3, HierarchyTreeComponent_Conditional_1_Conditional_3_Template, 15, 0, "div", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.Config.ShowSearch ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.FocusedNode ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.Config.ShowToolbar ? 3 : -1);
+} }
+function HierarchyTreeComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "div", 41);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading hierarchy...");
+    i0.ɵɵelementEnd()();
+} }
+function HierarchyTreeComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 43);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.loadData()); });
+    i0.ɵɵtext(5, "Retry");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.ErrorMessage);
+} }
+function HierarchyTreeComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No hierarchy records found.");
+    i0.ɵɵelementEnd()();
+} }
+function HierarchyTreeComponent_For_17_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r9 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(node_r9.Subtitle);
+} }
+function HierarchyTreeComponent_For_17_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_For_17_Conditional_0_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const node_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleNodeExpansion(node_r9, $event)); });
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r9 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵclassProp("collapsed", !node_r9.IsExpanded);
+    i0.ɵɵproperty("title", node_r9.IsExpanded ? "Collapse sub-branch" : "Expand " + node_r9.DirectChildCount + " children");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", node_r9.IsExpanded)("fa-chevron-right", !node_r9.IsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(node_r9.DirectChildCount);
+} }
+function HierarchyTreeComponent_For_17_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 55);
+    i0.ɵɵtext(1, "Leaf");
+    i0.ɵɵelementEnd();
+} }
+function HierarchyTreeComponent_For_17_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 56)(1, "button", 59);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_For_17_Conditional_0_Conditional_13_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r11); const node_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeAction(node_r9, "focus", $event)); });
+    i0.ɵɵelement(2, "i", 25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 60);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_For_17_Conditional_0_Conditional_13_Template_button_click_3_listener($event) { i0.ɵɵrestoreView(_r11); const node_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeAction(node_r9, "open", $event)); });
+    i0.ɵɵelement(4, "i", 61);
+    i0.ɵɵelementEnd()();
+} }
+function HierarchyTreeComponent_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "foreignObject", 45);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(1, "div", 46);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_For_17_Conditional_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r8); const node_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeClick(node_r9, $event)); })("dblclick", function HierarchyTreeComponent_For_17_Conditional_0_Template_div_dblclick_1_listener($event) { i0.ɵɵrestoreView(_r8); const node_r9 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeDoubleClick(node_r9, $event)); });
+    i0.ɵɵelement(2, "div", 47);
+    i0.ɵɵelementStart(3, "div", 48)(4, "div", 49);
+    i0.ɵɵelement(5, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 50)(7, "div", 51);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, HierarchyTreeComponent_For_17_Conditional_0_Conditional_9_Template, 2, 1, "div", 52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 53);
+    i0.ɵɵconditionalCreate(11, HierarchyTreeComponent_For_17_Conditional_0_Conditional_11_Template, 4, 8, "button", 54)(12, HierarchyTreeComponent_For_17_Conditional_0_Conditional_12_Template, 2, 0, "span", 55);
+    i0.ɵɵconditionalCreate(13, HierarchyTreeComponent_For_17_Conditional_0_Conditional_13_Template, 5, 0, "div", 56);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const node_r9 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("x", node_r9.x)("y", node_r9.y)("width", ctx_r2.Config.NodeWidth || 230)("height", ctx_r2.Config.NodeHeight || 90);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("selected", node_r9.IsSelected)("highlighted", node_r9.IsHighlighted)("focus-root", node_r9.IsFocusRoot);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", node_r9.Color || ctx_r2.Config.DefaultColor);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", node_r9.Color || ctx_r2.Config.DefaultColor);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(node_r9.Icon || ctx_r2.Config.DefaultIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", node_r9.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(node_r9.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r9.Subtitle ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(node_r9.DirectChildCount > 0 ? 11 : 12);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.AllowNodeActions ? 13 : -1);
+} }
+function HierarchyTreeComponent_For_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, HierarchyTreeComponent_For_17_Conditional_0_Template, 14, 21, ":svg:foreignObject", 45);
+} if (rf & 2) {
+    const node_r9 = ctx.$implicit;
+    i0.ɵɵconditional(node_r9.x != null && node_r9.y != null ? 0 : -1);
+} }
+function HierarchyTreeComponent_Conditional_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 67);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedNode.Subtitle);
+} }
+function HierarchyTreeComponent_Conditional_19_Conditional_27_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 82)(1, "dt", 83);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "dd", 84);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const attr_r13 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(attr_r13.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", attr_r13.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(attr_r13.value);
+} }
+function HierarchyTreeComponent_Conditional_19_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74)(1, "h5", 80);
+    i0.ɵɵtext(2, "Attributes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "dl", 81);
+    i0.ɵɵrepeaterCreate(4, HierarchyTreeComponent_Conditional_19_Conditional_27_For_5_Template, 5, 3, "div", 82, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r2.getRecordAttributeEntries(ctx_r2.SelectedNode.Record));
+} }
+function HierarchyTreeComponent_Conditional_19_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_19_Conditional_34_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleNodeExpansion(ctx_r2.SelectedNode)); });
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-folder-open", ctx_r2.SelectedNode.IsExpanded)("fa-folder", !ctx_r2.SelectedNode.IsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedNode.IsExpanded ? "Collapse" : "Expand");
+} }
+function HierarchyTreeComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62)(1, "div", 63)(2, "div", 64);
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 65)(5, "h4", 66);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, HierarchyTreeComponent_Conditional_19_Conditional_7_Template, 2, 1, "p", 67);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "button", 68);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_19_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDetailsDrawer()); });
+    i0.ɵɵelement(9, "i", 24);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 69)(11, "div", 70)(12, "div", 71)(13, "span", 72);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 73);
+    i0.ɵɵtext(16, "Hierarchy Level");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 71)(18, "span", 72);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span", 73);
+    i0.ɵɵtext(21, "Direct Children");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 71)(23, "span", 72);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "span", 73);
+    i0.ɵɵtext(26, "Total Subtree");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(27, HierarchyTreeComponent_Conditional_19_Conditional_27_Template, 6, 0, "div", 74);
+    i0.ɵɵelementStart(28, "div", 75)(29, "button", 76);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_19_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.navigateToRecord(ctx_r2.SelectedNode)); });
+    i0.ɵɵelement(30, "i", 61);
+    i0.ɵɵelementStart(31, "span");
+    i0.ɵɵtext(32, "Open Record");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(33, "div", 77);
+    i0.ɵɵconditionalCreate(34, HierarchyTreeComponent_Conditional_19_Conditional_34_Template, 4, 5, "button", 78);
+    i0.ɵɵelementStart(35, "button", 79);
+    i0.ɵɵlistener("click", function HierarchyTreeComponent_Conditional_19_Template_button_click_35_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setFocusRoot(ctx_r2.SelectedNode.ID)); });
+    i0.ɵɵelement(36, "i", 25);
+    i0.ɵɵelementStart(37, "span");
+    i0.ɵɵtext(38, "Focus Tree");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", ctx_r2.SelectedNode.Color || ctx_r2.Config.DefaultColor);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.SelectedNode.Icon || ctx_r2.Config.DefaultIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", ctx_r2.SelectedNode.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedNode.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.SelectedNode.Subtitle ? 7 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedNode.Depth);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedNode.DirectChildCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.SelectedNode.TotalDescendantCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.SelectedNode.Record && ctx_r2.getRecordAttributeEntries(ctx_r2.SelectedNode.Record).length > 0 ? 27 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r2.SelectedNode.DirectChildCount > 0 ? 34 : -1);
+} }
+/**
+ * Modern, interactive, canvas-based visual hierarchy and organizational chart component.
+ *
+ * Automatically generates a dynamic, zoomable tree visualization for any MemberJunction entity
+ * with a self-referencing parent foreign key (such as Corporate Subsidiaries, Product Categories,
+ * Committee Governance structures, Tag Taxonomies, and Management Lines).
+ *
+ * Features:
+ * - **Metadata Driven**: Auto-derives primary keys (including composite keys) and parent fields from MJ metadata.
+ * - **Interactive Canvas**: D3-powered smooth pan, zoom, auto-fit, and mini-toolbar controls.
+ * - **Collapsible Subtrees**: Interactive `[+]` / `[-]` badges with direct and total descendant counts.
+ * - **Live Search & Path Expansion**: Instant keyword search that highlights matches and auto-expands ancestor branches.
+ * - **Subtree Focus**: Isolate any node as the root of the view with 1-click return to full hierarchy.
+ * - **Full Design Token Theming**: Uses `--mj-*` surface, border, typography, and accent tokens.
+ * - **Extensive Cancelable Events**: Before/After events for expansion, collapse, reparenting, and navigation.
+ *
+ * @example
+ * ```html
+ * <mj-hierarchy-tree
+ *     [Config]="{
+ *         EntityName: 'MJ_BizApps_Common: Organizations',
+ *         ParentField: 'ParentID',
+ *         SubtitleField: 'OrganizationType',
+ *         DefaultIcon: 'fa-solid fa-building'
+ *     }"
+ *     (Navigate)="onNavigate($event)">
+ * </mj-hierarchy-tree>
+ * ```
+ */
+export class HierarchyTreeComponent extends BaseAngularComponent {
+    cdr;
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+    }
+    svgContainerRef;
+    svgRef;
+    /**
+     * Declarative configuration defining the target entity and visual layout properties.
+     */
+    Config;
+    /**
+     * Optional pre-loaded data array. If provided, the component skips the automated
+     * `RunView` query and constructs the tree directly from these items.
+     */
+    Data;
+    /**
+     * Optional active / selected record ID. When provided, the node is highlighted and all ancestors
+     * are expanded so it is visible in full tree context.
+     */
+    ActiveRecordID;
+    /**
+     * Primary key ID to focus as the subtree root.
+     */
+    FocusRecordID;
+    /**
+     * Controls whether action buttons (Open Record, Focus, Add Child) appear on node cards.
+     */
+    AllowNodeActions = true;
+    /**
+     * Emitted when a node is clicked.
+     */
+    NodeClick = new EventEmitter();
+    /**
+     * Emitted when a node is double-clicked.
+     */
+    NodeDoubleClick = new EventEmitter();
+    /**
+     * Emitted when a node is selected / set as active.
+     */
+    NodeSelect = new EventEmitter();
+    /**
+     * Emitted before a node expands its children. Cancelable.
+     */
+    BeforeNodeExpand = new EventEmitter();
+    /**
+     * Emitted after a node has expanded its children.
+     */
+    AfterNodeExpand = new EventEmitter();
+    /**
+     * Emitted before a node collapses its children. Cancelable.
+     */
+    BeforeNodeCollapse = new EventEmitter();
+    /**
+     * Emitted after a node has collapsed its children.
+     */
+    AfterNodeCollapse = new EventEmitter();
+    /**
+     * Emitted before a node is reparented. Cancelable.
+     */
+    BeforeReparent = new EventEmitter();
+    /**
+     * Emitted after a node has been reparented.
+     */
+    AfterReparent = new EventEmitter();
+    /**
+     * Emitted when an action button (e.g. Open, Add Child, Focus) is invoked on a node.
+     */
+    NodeAction = new EventEmitter();
+    /**
+     * Optional persisted zoom scale factor to restore.
+     */
+    ZoomLevel;
+    /**
+     * Emitted when the user zooms in or out on the hierarchy canvas.
+     */
+    ZoomChange = new EventEmitter();
+    /**
+     * Emitted when the user requests navigation to a full entity record.
+     */
+    Navigate = new EventEmitter();
+    // --- State ---
+    Loading = false;
+    ErrorMessage = null;
+    SearchQuery = '';
+    MatchingNodeCount = 0;
+    FocusedNode = null;
+    SelectedNode = null;
+    ShowDetailsDrawer = false;
+    /** Flattened list of all loaded hierarchy nodes for search and lookup. */
+    AllNodes = [];
+    nodeMap = new Map();
+    /** The root nodes of the active view. */
+    RootNodes = [];
+    /** D3 zoom behavior and SVG group selection */
+    zoomBehavior = null;
+    svgSelection = null;
+    gSelection = null;
+    currentZoomTransform = d3.zoomIdentity;
+    resizeObserver = null;
+    entityInfo = null;
+    previousConfigState = {};
+    ngOnInit() {
+        this.initializeConfig();
+        this.log('[HierarchyTree:ngOnInit] Initializing with Config:', this.Config);
+        if (this.Config) {
+            this.previousConfigState = {
+                EntityName: this.Config.EntityName,
+                ExtraFilter: this.Config.ExtraFilter,
+                OrderBy: this.Config.OrderBy,
+                MaxRows: this.Config.MaxRows,
+                ParentField: this.Config.ParentField
+            };
+        }
+        this.loadData();
+    }
+    ngAfterViewInit() {
+        this.log('[HierarchyTree:ngAfterViewInit] Initializing D3 Zoom & ResizeObserver. svgRef:', !!this.svgRef?.nativeElement, 'containerRect:', this.svgContainerRef?.nativeElement?.getBoundingClientRect());
+        this.initD3Zoom();
+        this.setupResizeObserver();
+        if (this.AllNodes.length > 0) {
+            this.log('[HierarchyTree:ngAfterViewInit] AllNodes already loaded (' + this.AllNodes.length + '), triggering renderTree');
+            this.renderTree();
+        }
+    }
+    ngOnChanges(changes) {
+        this.log('[HierarchyTree:ngOnChanges] Changes detected:', Object.keys(changes));
+        if (changes['Config'] && !changes['Config'].isFirstChange()) {
+            this.initializeConfig();
+            if (this.hasDataConfigChanged(this.Config)) {
+                this.log('[HierarchyTree:ngOnChanges] Data config changed, triggering loadData');
+                this.loadData();
+            }
+            else {
+                const activeId = this.ActiveRecordID || this.Config?.ActiveRecordID;
+                this.log('[HierarchyTree:ngOnChanges] Config changed but data identical, updating active node:', activeId);
+                this.updateActiveNodeSelection(activeId);
+            }
+        }
+        else if (changes['ActiveRecordID'] && !changes['ActiveRecordID'].isFirstChange()) {
+            this.updateActiveNodeSelection(this.ActiveRecordID);
+        }
+        else if (changes['Data'] && !changes['Data'].isFirstChange()) {
+            this.buildTreeFromData(this.Data || []);
+        }
+        else if (changes['FocusRecordID'] && !changes['FocusRecordID'].isFirstChange()) {
+            this.setFocusRoot(this.FocusRecordID);
+        }
+        else if (changes['ZoomLevel'] && !changes['ZoomLevel'].isFirstChange() && this.ZoomLevel !== undefined) {
+            this.setZoomLevel(this.ZoomLevel, true);
+        }
+    }
+    hasDataConfigChanged(newConfig) {
+        if (!newConfig)
+            return false;
+        const prev = this.previousConfigState;
+        const hasChanged = prev.EntityName !== newConfig.EntityName ||
+            prev.ExtraFilter !== newConfig.ExtraFilter ||
+            prev.OrderBy !== newConfig.OrderBy ||
+            prev.MaxRows !== newConfig.MaxRows ||
+            prev.ParentField !== newConfig.ParentField;
+        if (hasChanged) {
+            this.previousConfigState = {
+                EntityName: newConfig.EntityName,
+                ExtraFilter: newConfig.ExtraFilter,
+                OrderBy: newConfig.OrderBy,
+                MaxRows: newConfig.MaxRows,
+                ParentField: newConfig.ParentField
+            };
+        }
+        return hasChanged;
+    }
+    updateActiveNodeSelection(activeId) {
+        if (!activeId)
+            return;
+        const activeNode = this.nodeMap.get(NormalizeUUID(activeId));
+        if (activeNode && (!this.SelectedNode || !UUIDsEqual(this.SelectedNode.ID, activeNode.ID))) {
+            for (const n of this.AllNodes) {
+                n.IsSelected = UUIDsEqual(n.ID, activeNode.ID);
+            }
+            this.SelectedNode = activeNode;
+            this.expandAncestors(activeNode);
+            this.renderTree();
+        }
+    }
+    ngOnDestroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    // --- Configuration Initialization ---
+    initializeConfig() {
+        if (!this.Config)
+            return;
+        this.Config = {
+            DefaultIcon: 'fa-solid fa-sitemap',
+            // Design token, not a literal — the accent is bound to [style.background]/[style.color],
+            // so a var() resolves at paint time and follows the active theme. The fallback keeps the
+            // original rendering wherever the token stylesheet isn't loaded.
+            DefaultColor: 'var(--mj-brand-primary, #38bdf8)',
+            Orientation: 'top-to-bottom',
+            NodeStyle: 'card',
+            AllowDragDropReparent: false,
+            AllowNodeActions: true,
+            ShowSearch: true,
+            ShowToolbar: true,
+            NodeWidth: 230,
+            NodeHeight: 90,
+            SiblingSpacing: 40,
+            LevelSpacing: 75,
+            Height: '100%',
+            MinHeight: '500px',
+            NavigateOnNodeClick: true,
+            AutoRootFocus: true,
+            Verbose: false,
+            ...this.Config
+        };
+    }
+    log(message, ...args) {
+        if (this.Config?.Verbose) {
+            console.log(message, ...args);
+        }
+    }
+    // --- Data Loading & Tree Construction ---
+    /**
+     * Loads records from the server via `RunView` using entity metadata.
+     */
+    async loadData() {
+        if (!this.Config?.EntityName)
+            return;
+        this.Loading = true;
+        this.ErrorMessage = null;
+        this.cdr?.detectChanges();
+        try {
+            // ProviderToUse, not `new Metadata()` — this is an L1 widget, so it must read metadata
+            // from whatever provider the host bound via @Input() Provider (BaseAngularComponent
+            // falls back to the ambient one). Binding the global provider here would silently query
+            // the wrong database wherever the component is hosted against a non-default connection.
+            const configEntityLower = this.Config.EntityName.toLowerCase();
+            const configEntityStripped = this.Config.EntityName.replace(/^mj[:_\s]+/i, '').trim().toLowerCase();
+            this.entityInfo = this.ProviderToUse.Entities.find((e) => {
+                const eNameLower = e.Name.toLowerCase();
+                const eNameStripped = e.Name.replace(/^mj[:_\s]+/i, '').trim().toLowerCase();
+                return eNameLower === configEntityLower || eNameStripped === configEntityStripped;
+            }) || null;
+            const targetEntityName = this.entityInfo ? this.entityInfo.Name : this.Config.EntityName;
+            this.log('[HierarchyTree:loadData] Starting load for:', targetEntityName, {
+                configuredEntity: this.Config.EntityName,
+                resolvedEntity: this.entityInfo?.Name,
+                activeRecordId: this.ActiveRecordID || this.Config?.ActiveRecordID,
+                focusRecordId: this.FocusRecordID || this.Config?.FocusRecordID,
+                extraFilter: this.Config.ExtraFilter
+            });
+            if (this.Data) {
+                this.log('[HierarchyTree:loadData] Using provided Data prop:', this.Data.length, 'items');
+                this.buildTreeFromData(this.Data);
+                return;
+            }
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const defaultOrderBy = `${this.resolveNameFieldName()} ASC`;
+            const rvParams = {
+                EntityName: targetEntityName,
+                ExtraFilter: this.Config.ExtraFilter || '',
+                OrderBy: this.Config.OrderBy || defaultOrderBy,
+                ResultType: 'simple',
+                MaxRows: this.Config.MaxRows ?? 0
+            };
+            this.log('[HierarchyTree:loadData] Calling RunView with params:', rvParams);
+            const result = await rv.RunView(rvParams);
+            this.log('[HierarchyTree:loadData] RunView response:', {
+                success: result.Success,
+                rowCount: result.RowCount,
+                resultsLength: result.Results?.length,
+                errorMessage: result.ErrorMessage,
+                sampleRow: result.Results?.[0]
+            });
+            if (!result.Success) {
+                this.ErrorMessage = result.ErrorMessage || 'Failed to load hierarchy data.';
+                return;
+            }
+            const rawItems = result.Results || [];
+            this.buildTreeFromData(rawItems);
+        }
+        catch (err) {
+            this.ErrorMessage = err instanceof Error ? err.message : 'Error loading hierarchy tree.';
+            console.error('[HierarchyTree:loadData] Error:', err);
+        }
+        finally {
+            this.Loading = false;
+            this.cdr?.detectChanges();
+            setTimeout(() => {
+                this.renderTree();
+                this.fitToScreen(false);
+            }, 80);
+        }
+    }
+    /**
+     * Helper to retrieve a property value from a record item in a case-insensitive manner.
+     */
+    getItemValue(item, fieldName) {
+        if (!item || !fieldName)
+            return undefined;
+        if (item[fieldName] !== undefined)
+            return item[fieldName];
+        const lower = fieldName.toLowerCase();
+        for (const [k, v] of Object.entries(item)) {
+            if (k.toLowerCase() === lower)
+                return v;
+        }
+        return undefined;
+    }
+    /**
+     * Constructs the in-memory tree nodes, computes composite keys, descendant counts, and depths.
+     */
+    buildTreeFromData(items) {
+        this.nodeMap.clear();
+        this.AllNodes = [];
+        const parentFieldName = this.resolveParentFieldName();
+        const nameFieldName = this.resolveNameFieldName();
+        const subtitleFieldName = this.Config?.SubtitleField;
+        const iconFieldName = this.Config?.IconField;
+        const colorFieldName = this.Config?.ColorField;
+        this.log(`[HierarchyTree:buildTreeFromData] Input items: ${items.length}, parentField="${parentFieldName}", nameField="${nameFieldName}"`);
+        // 1. Create flat nodes
+        for (const item of items) {
+            const { pk, id } = this.extractPrimaryKey(item);
+            const parentVal = this.getItemValue(item, parentFieldName);
+            const parentId = parentVal != null && String(parentVal).trim() !== '' ? String(parentVal) : null;
+            const nameVal = this.getItemValue(item, nameFieldName) ?? this.getItemValue(item, 'Name') ?? 'Unnamed';
+            const name = String(nameVal);
+            const subtitleVal = this.getItemValue(item, subtitleFieldName);
+            const subtitle = subtitleVal != null ? String(subtitleVal) : undefined;
+            const iconVal = this.getItemValue(item, iconFieldName);
+            const icon = iconVal != null ? String(iconVal) : this.Config.DefaultIcon;
+            const colorVal = this.getItemValue(item, colorFieldName);
+            const color = colorVal != null ? String(colorVal) : this.Config.DefaultColor;
+            const node = {
+                ID: id,
+                PrimaryKey: pk,
+                Name: name,
+                Subtitle: subtitle || undefined,
+                Icon: icon,
+                Color: color,
+                ParentID: parentId,
+                DirectChildCount: 0,
+                TotalDescendantCount: 0,
+                Depth: 0,
+                IsExpanded: true,
+                IsSelected: false,
+                IsHighlighted: false,
+                IsFocusRoot: false,
+                Record: item,
+                Children: []
+            };
+            this.nodeMap.set(NormalizeUUID(id), node);
+            this.AllNodes.push(node);
+        }
+        // 2. Build parent-child relationships and detect cycles
+        const roots = [];
+        for (const node of this.AllNodes) {
+            if (node.ParentID && this.nodeMap.has(NormalizeUUID(node.ParentID))) {
+                const parentNode = this.nodeMap.get(NormalizeUUID(node.ParentID));
+                if (!this.wouldCreateCycle(node, parentNode)) {
+                    parentNode.Children.push(node);
+                }
+                else {
+                    console.warn(`[HierarchyTree] Circular reference detected between ${node.ID} and ${parentNode.ID}. Promoting to root.`);
+                    roots.push(node);
+                }
+            }
+            else {
+                roots.push(node);
+            }
+        }
+        // 3. Compute counts and depths
+        for (const root of roots) {
+            this.computeSubtreeMetrics(root, 0);
+        }
+        // 4. Preserve _allChildren for collapse/expand
+        for (const node of this.AllNodes) {
+            node._allChildren = [...node.Children];
+        }
+        this.RootNodes = roots;
+        this.log(`[HierarchyTree:buildTreeFromData] Built ${this.AllNodes.length} nodes, ${roots.length} root(s):`, roots.map(r => ({ Name: r.Name, ID: r.ID, Children: r.Children.length, TotalDescendants: r.TotalDescendantCount })));
+        // 5. Apply active record selection & auto-expand ancestors
+        const activeId = this.ActiveRecordID || this.Config?.ActiveRecordID;
+        if (activeId) {
+            const activeNode = this.nodeMap.get(NormalizeUUID(activeId));
+            if (activeNode) {
+                activeNode.IsSelected = true;
+                activeNode.IsHighlighted = true;
+                this.SelectedNode = activeNode;
+                // Expand all ancestors so the active node is visible in full context
+                let curr = activeNode.ParentID ? this.nodeMap.get(NormalizeUUID(activeNode.ParentID)) : undefined;
+                while (curr) {
+                    curr.IsExpanded = true;
+                    curr.Children = [...(curr._allChildren || [])];
+                    curr = curr.ParentID ? this.nodeMap.get(NormalizeUUID(curr.ParentID)) : undefined;
+                }
+                // If AutoRootFocus is enabled and multiple roots exist, focus on the active root tree
+                if (this.Config.AutoRootFocus !== false && roots.length > 1 && !this.FocusRecordID && !this.Config.FocusRecordID) {
+                    let rootAncestor = activeNode;
+                    while (rootAncestor.ParentID && this.nodeMap.has(NormalizeUUID(rootAncestor.ParentID))) {
+                        rootAncestor = this.nodeMap.get(NormalizeUUID(rootAncestor.ParentID));
+                    }
+                    rootAncestor.IsFocusRoot = true;
+                    this.FocusedNode = rootAncestor;
+                }
+            }
+        }
+        // 6. Apply initial expand depth if configured (and not explicitly expanded by active node)
+        if (this.Config.InitialExpandDepth && this.Config.InitialExpandDepth > 0 && !activeId) {
+            for (const node of this.AllNodes) {
+                if (node.Depth >= this.Config.InitialExpandDepth) {
+                    node.IsExpanded = false;
+                    node.Children = [];
+                }
+            }
+        }
+        if (this.FocusRecordID || this.Config?.FocusRecordID) {
+            this.setFocusRoot(this.FocusRecordID || this.Config?.FocusRecordID);
+        }
+    }
+    resolveParentFieldName() {
+        if (this.Config?.ParentField)
+            return this.Config.ParentField;
+        if (this.entityInfo) {
+            // Check self-referencing foreign keys
+            const selfFk = this.entityInfo.Fields.find((f) => f.RelatedEntity && f.RelatedEntity.toLowerCase() === this.entityInfo.Name.toLowerCase());
+            if (selfFk)
+                return selfFk.Name;
+        }
+        return 'ParentID';
+    }
+    resolveNameFieldName() {
+        if (this.Config?.NameField)
+            return this.Config.NameField;
+        if (this.entityInfo?.NameField)
+            return this.entityInfo.NameField.Name;
+        return 'Name';
+    }
+    extractPrimaryKey(item) {
+        const pk = new CompositeKey();
+        if (this.entityInfo && this.entityInfo.PrimaryKeys.length > 0) {
+            for (const k of this.entityInfo.PrimaryKeys) {
+                pk.KeyValuePairs.push({
+                    FieldName: k.Name,
+                    Value: this.getItemValue(item, k.Name)
+                });
+            }
+        }
+        else {
+            pk.KeyValuePairs.push({
+                FieldName: 'ID',
+                Value: this.getItemValue(item, 'ID') ?? this.getItemValue(item, 'id') ?? ''
+            });
+        }
+        const id = pk.KeyValuePairs.length === 1 ? String(pk.KeyValuePairs[0].Value) : pk.ToURLSegment();
+        return { pk, id };
+    }
+    wouldCreateCycle(node, proposedParent) {
+        let curr = proposedParent;
+        while (curr) {
+            if (UUIDsEqual(curr.ID, node.ID))
+                return true;
+            curr = curr.ParentID ? this.nodeMap.get(NormalizeUUID(curr.ParentID)) : undefined;
+        }
+        return false;
+    }
+    computeSubtreeMetrics(node, depth) {
+        node.Depth = depth;
+        node.DirectChildCount = node.Children.length;
+        let descendantCount = node.Children.length;
+        for (const child of node.Children) {
+            descendantCount += this.computeSubtreeMetrics(child, depth + 1);
+        }
+        node.TotalDescendantCount = descendantCount;
+        return descendantCount;
+    }
+    // --- D3 Layout & Visual Rendering ---
+    initD3Zoom() {
+        if (!this.svgRef?.nativeElement)
+            return;
+        this.svgSelection = d3.select(this.svgRef.nativeElement);
+        this.gSelection = this.svgSelection.select('g.mj-hierarchy-canvas');
+        this.zoomBehavior = d3.zoom()
+            .scaleExtent([0.1, 4.0])
+            .on('zoom', (event) => {
+            this.currentZoomTransform = event.transform;
+            if (this.gSelection) {
+                this.gSelection.attr('transform', event.transform.toString());
+            }
+            if (event.sourceEvent != null) {
+                this.ZoomLevel = event.transform.k;
+                this.ZoomChange.emit(event.transform.k);
+            }
+        });
+        this.svgSelection.call(this.zoomBehavior);
+    }
+    setupResizeObserver() {
+        if (!this.svgContainerRef?.nativeElement)
+            return;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.contentRect.width > 50 && entry.contentRect.height > 50) {
+                    if (this.AllNodes.length > 0) {
+                        this.renderTree();
+                    }
+                }
+            }
+        });
+        this.resizeObserver.observe(this.svgContainerRef.nativeElement);
+    }
+    /**
+     * Computes the D3 hierarchy tree layout and updates the SVG rendering.
+     */
+    renderTree(preserveTransform = false) {
+        if (!this.svgRef?.nativeElement || !this.gSelection) {
+            if (this.svgRef?.nativeElement) {
+                this.initD3Zoom();
+            }
+            if (!this.gSelection) {
+                setTimeout(() => this.renderTree(preserveTransform), 30);
+                return;
+            }
+        }
+        // Reset positions across all nodes
+        for (const n of this.AllNodes) {
+            n.x = undefined;
+            n.y = undefined;
+        }
+        const isVertical = this.Config.Orientation !== 'left-to-right';
+        const nodeWidth = this.Config.NodeWidth || 230;
+        const nodeHeight = this.Config.NodeHeight || 90;
+        const siblingGap = this.Config.SiblingSpacing || 40;
+        const levelGap = this.Config.LevelSpacing || 75;
+        const activeRoots = this.FocusedNode ? [this.FocusedNode] : this.RootNodes;
+        this.log(`[HierarchyTree:renderTree] Starting render for ${activeRoots.length} active root(s):`, activeRoots.map(r => r.Name));
+        if (activeRoots.length === 0) {
+            this.gSelection.selectAll('*').remove();
+            return;
+        }
+        // 1. Create root hierarchy
+        let rootHierarchy;
+        if (activeRoots.length === 1) {
+            rootHierarchy = d3.hierarchy(activeRoots[0], (d) => (d.IsExpanded ? d.Children : []));
+        }
+        else {
+            // Multiple roots: wrap under a synthetic virtual root
+            const virtualRoot = {
+                ID: '__virtual_root__',
+                PrimaryKey: new CompositeKey(),
+                Name: 'Root',
+                DirectChildCount: activeRoots.length,
+                TotalDescendantCount: activeRoots.length,
+                Depth: -1,
+                IsExpanded: true,
+                IsSelected: false,
+                IsHighlighted: false,
+                IsFocusRoot: false,
+                Children: activeRoots
+            };
+            rootHierarchy = d3.hierarchy(virtualRoot, (d) => (d.IsExpanded ? d.Children : []));
+        }
+        // 2. Compute tree layout
+        const treeLayout = d3.tree()
+            .nodeSize(isVertical ? [nodeWidth + siblingGap, nodeHeight + levelGap] : [nodeHeight + siblingGap, nodeWidth + levelGap])
+            .separation((a, b) => (a.parent === b.parent ? 1.05 : 1.2));
+        const treeData = treeLayout(rootHierarchy);
+        // Filter out virtual root if multi-root
+        const nodes = treeData.descendants().filter((d) => d.data.ID !== '__virtual_root__');
+        const links = treeData.links().filter((d) => d.source.data.ID !== '__virtual_root__');
+        // Update positions on node data (centered on D3 node point)
+        for (const n of nodes) {
+            n.data.x = isVertical ? n.x - nodeWidth / 2 : n.y;
+            n.data.y = isVertical ? n.y : n.x - nodeHeight / 2;
+        }
+        this.log(`[HierarchyTree:renderTree] Tree layout computed: ${nodes.length} nodes, ${links.length} links. Node positions:`, nodes.map(n => ({ Name: n.data.Name, x: n.data.x, y: n.data.y })));
+        // 3. Render Links
+        const linkPathGen = (d) => {
+            const sx = isVertical ? d.source.data.x + nodeWidth / 2 : d.source.data.x + nodeWidth;
+            const sy = isVertical ? d.source.data.y + nodeHeight : d.source.data.y + nodeHeight / 2;
+            const tx = isVertical ? d.target.data.x + nodeWidth / 2 : d.target.data.x;
+            const ty = isVertical ? d.target.data.y : d.target.data.y + nodeHeight / 2;
+            if (isVertical) {
+                const midY = (sy + ty) / 2;
+                return `M ${sx} ${sy} C ${sx} ${midY}, ${tx} ${midY}, ${tx} ${ty}`;
+            }
+            else {
+                const midX = (sx + tx) / 2;
+                return `M ${sx} ${sy} C ${midX} ${sy}, ${midX} ${ty}, ${tx} ${ty}`;
+            }
+        };
+        const linkGroup = this.gSelection.select('g.mj-links-group');
+        const linkSelection = linkGroup.selectAll('path.mj-tree-link')
+            .data(links, (d) => `${d.source.data.ID}->${d.target.data.ID}`);
+        linkSelection.exit().remove();
+        linkSelection.enter()
+            .append('path')
+            .attr('class', 'mj-tree-link')
+            .merge(linkSelection)
+            .attr('d', linkPathGen)
+            .attr('stroke', (d) => (d.target.data.IsHighlighted ? 'var(--mj-brand-primary, #38bdf8)' : 'var(--mj-border-default, #223254)'))
+            .attr('stroke-width', (d) => (d.target.data.IsHighlighted ? 2.5 : 1.5))
+            .attr('fill', 'none');
+        this.AllNodes = [...this.AllNodes];
+        this.cdr?.markForCheck();
+        this.cdr?.detectChanges();
+        if (!preserveTransform) {
+            this.fitToScreen(true);
+        }
+    }
+    // --- Interactive Actions ---
+    /**
+     * Toggles the expand/collapse state of a node, firing cancelable Before and After events.
+     */
+    toggleNodeExpansion(node, event) {
+        if (event)
+            event.stopPropagation();
+        if (node.IsExpanded) {
+            const beforeEvt = new CancelableHierarchyNodeEvent(node, event);
+            this.BeforeNodeCollapse.emit(beforeEvt);
+            if (beforeEvt.IsCanceled)
+                return;
+            node.IsExpanded = false;
+            node.Children = [];
+            this.AfterNodeCollapse.emit({ Node: node, OriginalEvent: event });
+        }
+        else {
+            const beforeEvt = new CancelableHierarchyNodeEvent(node, event);
+            this.BeforeNodeExpand.emit(beforeEvt);
+            if (beforeEvt.IsCanceled)
+                return;
+            node.IsExpanded = true;
+            node.Children = [...(node._allChildren || [])];
+            this.AfterNodeExpand.emit({ Node: node, OriginalEvent: event });
+        }
+        this.renderTree(true);
+    }
+    closeDetailsDrawer() {
+        this.ShowDetailsDrawer = false;
+        this.cdr?.markForCheck();
+    }
+    openDetailsDrawer() {
+        this.ShowDetailsDrawer = true;
+        this.cdr?.markForCheck();
+    }
+    onCanvasBackgroundClick(event) {
+        const target = event.target;
+        if (target?.closest('.mj-details-drawer') || target?.closest('.mj-node-card') || target?.closest('.mj-tool-btn')) {
+            return;
+        }
+    }
+    onNodeClick(node, event) {
+        event.stopPropagation();
+        this.SelectedNode = node;
+        this.ShowDetailsDrawer = true;
+        for (const n of this.AllNodes) {
+            n.IsSelected = UUIDsEqual(n.ID, node.ID);
+        }
+        this.NodeClick.emit({ Node: node, OriginalEvent: event });
+        this.NodeSelect.emit({ Node: node, OriginalEvent: event });
+        this.cdr?.markForCheck();
+    }
+    onNodeDoubleClick(node, event) {
+        event.stopPropagation();
+        this.NodeDoubleClick.emit({ Node: node, OriginalEvent: event });
+        this.navigateToRecord(node, event);
+    }
+    onNodeAction(node, action, event) {
+        event.stopPropagation();
+        this.NodeAction.emit({ Node: node, Action: action });
+        switch (action) {
+            case 'open':
+                this.navigateToRecord(node, event);
+                break;
+            case 'focus':
+                this.setFocusRoot(node.ID);
+                break;
+            case 'reset-focus':
+                this.resetFocus();
+                break;
+            case 'add-child':
+                // Handled via custom subscriber or event
+                break;
+        }
+    }
+    navigateToRecord(node, event) {
+        const entityName = this.entityInfo ? this.entityInfo.Name : this.Config.EntityName;
+        const navEvent = {
+            Kind: 'record',
+            EntityName: entityName,
+            PrimaryKey: node.PrimaryKey,
+            OpenInNewTab: event ? event.ctrlKey || event.metaKey : false
+        };
+        this.Navigate.emit(navEvent);
+    }
+    getRecordAttributeEntries(record) {
+        const entries = [];
+        const skipFields = new Set([
+            'id', 'parentid', 'parentproductcategoryid', 'parentcategoryid',
+            'companyid', '__mj_version', 'createdat', 'updatedat', 'name'
+        ]);
+        for (const [k, v] of Object.entries(record)) {
+            if (skipFields.has(k.toLowerCase()) || k.startsWith('__mj_') || v == null)
+                continue;
+            const strVal = typeof v === 'object' ? JSON.stringify(v) : String(v);
+            if (strVal.trim() === '')
+                continue;
+            entries.push({
+                key: k,
+                label: k.replace(/([A-Z])/g, ' $1').trim(),
+                value: strVal
+            });
+        }
+        return entries.slice(0, 8);
+    }
+    // --- Search & Highlight ---
+    onSearchInput() {
+        const q = this.SearchQuery.trim().toLowerCase();
+        if (!q) {
+            for (const n of this.AllNodes) {
+                n.IsHighlighted = false;
+            }
+            this.MatchingNodeCount = 0;
+            this.renderTree(true);
+            return;
+        }
+        let count = 0;
+        let firstMatch = null;
+        for (const n of this.AllNodes) {
+            const matches = n.Name.toLowerCase().includes(q) || (n.Subtitle && n.Subtitle.toLowerCase().includes(q));
+            n.IsHighlighted = !!matches;
+            if (matches) {
+                count++;
+                if (!firstMatch)
+                    firstMatch = n;
+                this.expandAncestors(n);
+            }
+        }
+        this.MatchingNodeCount = count;
+        this.renderTree(true);
+        if (firstMatch && firstMatch.x != null && firstMatch.y != null) {
+            this.centerOnNode(firstMatch);
+        }
+    }
+    clearSearch() {
+        this.SearchQuery = '';
+        this.onSearchInput();
+    }
+    centerOnNode(node) {
+        if (!this.svgSelection || !this.zoomBehavior || !this.svgContainerRef?.nativeElement)
+            return;
+        if (node.x == null || node.y == null)
+            return;
+        const rect = this.svgContainerRef.nativeElement.getBoundingClientRect();
+        const width = rect.width > 50 ? rect.width : (this.svgContainerRef.nativeElement.clientWidth || 800);
+        const height = rect.height > 50 ? rect.height : (this.svgContainerRef.nativeElement.clientHeight || 500);
+        const rightMargin = (this.ShowDetailsDrawer && this.SelectedNode) ? 340 : 0;
+        const visibleWidth = Math.max(width - rightMargin, 200);
+        const currentScale = this.currentZoomTransform?.k || this.ZoomLevel || 1;
+        const nodeWidth = this.Config.NodeWidth || 230;
+        const nodeHeight = this.Config.NodeHeight || 90;
+        const nodeCenterX = node.x + nodeWidth / 2;
+        const nodeCenterY = node.y + nodeHeight / 2;
+        const tx = visibleWidth / 2 - nodeCenterX * currentScale;
+        const ty = height / 2 - nodeCenterY * currentScale;
+        const target = d3.zoomIdentity.translate(tx, ty).scale(currentScale);
+        this.svgSelection.interrupt().transition().duration(400).ease(d3.easeCubicOut).call(this.zoomBehavior.transform, target);
+    }
+    expandAncestors(node) {
+        let curr = node.ParentID ? this.nodeMap.get(NormalizeUUID(node.ParentID)) : undefined;
+        while (curr) {
+            curr.IsExpanded = true;
+            curr.Children = [...(curr._allChildren || [])];
+            curr = curr.ParentID ? this.nodeMap.get(NormalizeUUID(curr.ParentID)) : undefined;
+        }
+    }
+    // --- Subtree Focus ---
+    setFocusRoot(recordId) {
+        if (!recordId) {
+            this.resetFocus();
+            return;
+        }
+        const target = this.nodeMap.get(NormalizeUUID(recordId));
+        if (!target)
+            return;
+        for (const n of this.AllNodes)
+            n.IsFocusRoot = false;
+        target.IsFocusRoot = true;
+        this.FocusedNode = target;
+        this.renderTree();
+        this.onFitToViewClick();
+    }
+    resetFocus() {
+        for (const n of this.AllNodes)
+            n.IsFocusRoot = false;
+        this.FocusedNode = null;
+        this.renderTree();
+        this.onFitToViewClick();
+    }
+    // --- Toolbar Actions / Verbs ---
+    expandAll() {
+        for (const n of this.AllNodes) {
+            n.IsExpanded = true;
+            n.Children = [...(n._allChildren || [])];
+        }
+        this.renderTree(true);
+    }
+    collapseAll() {
+        for (const n of this.AllNodes) {
+            if (n.Depth > 0) {
+                n.IsExpanded = false;
+                n.Children = [];
+            }
+        }
+        this.renderTree(true);
+    }
+    zoomIn() {
+        if (!this.svgSelection || !this.zoomBehavior)
+            return;
+        const currentScale = this.currentZoomTransform?.k || 1;
+        const targetScale = Math.min(currentScale * 1.25, 4.0);
+        this.setZoomLevel(targetScale, true);
+        this.ZoomLevel = targetScale;
+        this.ZoomChange.emit(targetScale);
+    }
+    zoomOut() {
+        if (!this.svgSelection || !this.zoomBehavior)
+            return;
+        const currentScale = this.currentZoomTransform?.k || 1;
+        const targetScale = Math.max(currentScale * 0.8, 0.1);
+        this.setZoomLevel(targetScale, true);
+        this.ZoomLevel = targetScale;
+        this.ZoomChange.emit(targetScale);
+    }
+    setZoomLevel(scale, animated = true) {
+        if (!this.svgSelection || !this.zoomBehavior || !scale)
+            return;
+        const container = this.svgContainerRef?.nativeElement;
+        const rect = container?.getBoundingClientRect();
+        const width = rect?.width && rect.width > 50 ? rect.width : (container?.clientWidth || 800);
+        const height = rect?.height && rect.height > 50 ? rect.height : (container?.clientHeight || 500);
+        const current = this.currentZoomTransform || d3.zoomIdentity;
+        const cx = width / 2;
+        const cy = height / 2;
+        const newX = cx - (cx - current.x) * (scale / (current.k || 1));
+        const newY = cy - (cy - current.y) * (scale / (current.k || 1));
+        const target = d3.zoomIdentity.translate(newX, newY).scale(scale);
+        if (animated) {
+            this.svgSelection.interrupt().transition().duration(250).ease(d3.easeCubicOut).call(this.zoomBehavior.transform, target);
+        }
+        else {
+            this.svgSelection.interrupt().call(this.zoomBehavior.transform, target);
+        }
+    }
+    resetZoom() {
+        if (!this.svgSelection || !this.zoomBehavior)
+            return;
+        this.onFitToViewClick();
+    }
+    onFitToViewClick() {
+        this.fitToScreen(false, true);
+        setTimeout(() => {
+            this.fitToScreen(false, true);
+        }, 320);
+    }
+    fitToScreen(immediate = false, forceAutoScale = false) {
+        if (!this.svgSelection || !this.zoomBehavior || !this.svgContainerRef?.nativeElement)
+            return;
+        const visibleNodes = this.AllNodes.filter((n) => n.x != null && n.y != null);
+        if (visibleNodes.length === 0)
+            return;
+        const nodeWidth = this.Config.NodeWidth || 230;
+        const nodeHeight = this.Config.NodeHeight || 90;
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        for (const n of visibleNodes) {
+            minX = Math.min(minX, n.x);
+            maxX = Math.max(maxX, n.x + nodeWidth);
+            minY = Math.min(minY, n.y);
+            maxY = Math.max(maxY, n.y + nodeHeight);
+        }
+        const treeWidth = Math.max(maxX - minX, 1);
+        const treeHeight = Math.max(maxY - minY, 1);
+        const treeCenterX = (minX + maxX) / 2;
+        const treeCenterY = (minY + maxY) / 2;
+        const rect = this.svgContainerRef.nativeElement.getBoundingClientRect();
+        const width = rect.width > 50 ? rect.width : (this.svgContainerRef.nativeElement.clientWidth || 800);
+        const height = rect.height > 50 ? rect.height : (this.svgContainerRef.nativeElement.clientHeight || 500);
+        const rightMargin = (this.ShowDetailsDrawer && this.SelectedNode) ? 340 : 0;
+        const visibleWidth = Math.max(width - rightMargin, 200);
+        const padding = 40;
+        const availWidth = Math.max(visibleWidth - padding * 2, 100);
+        const availHeight = Math.max(height - padding * 2, 100);
+        const autoScale = Math.max(Math.min(availWidth / treeWidth, availHeight / treeHeight, 1.05), 0.15);
+        const scale = (forceAutoScale || !this.ZoomLevel) ? autoScale : this.ZoomLevel;
+        if (forceAutoScale) {
+            this.ZoomLevel = autoScale;
+            this.ZoomChange.emit(autoScale);
+        }
+        const tx = visibleWidth / 2 - treeCenterX * scale;
+        const ty = height / 2 - treeCenterY * scale;
+        const targetTransform = d3.zoomIdentity.translate(tx, ty).scale(scale);
+        this.log(`[HierarchyTree:fitToScreen] Container=${width}x${height} (visible=${visibleWidth}), visibleNodes=${visibleNodes.length}, bounds=[${minX.toFixed(1)}, ${minY.toFixed(1)}] to [${maxX.toFixed(1)}, ${maxY.toFixed(1)}] (${treeWidth.toFixed(1)}x${treeHeight.toFixed(1)}), autoScale=${autoScale.toFixed(3)}, usingScale=${scale.toFixed(3)}, translate=(${tx.toFixed(1)}, ${ty.toFixed(1)})`);
+        if (immediate) {
+            this.svgSelection.interrupt().call(this.zoomBehavior.transform, targetTransform);
+        }
+        else {
+            this.svgSelection.interrupt().transition().duration(300).ease(d3.easeCubicOut).call(this.zoomBehavior.transform, targetTransform);
+        }
+    }
+    exportAsSVG() {
+        return this.svgRef?.nativeElement ? this.svgRef.nativeElement.outerHTML : '';
+    }
+    async refresh() {
+        await this.loadData();
+    }
+    static ɵfac = function HierarchyTreeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HierarchyTreeComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HierarchyTreeComponent, selectors: [["mj-hierarchy-tree"]], viewQuery: function HierarchyTreeComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgContainerRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.svgRef = _t.first);
+        } }, inputs: { Config: "Config", Data: "Data", ActiveRecordID: "ActiveRecordID", FocusRecordID: "FocusRecordID", AllowNodeActions: "AllowNodeActions", ZoomLevel: "ZoomLevel" }, outputs: { NodeClick: "NodeClick", NodeDoubleClick: "NodeDoubleClick", NodeSelect: "NodeSelect", BeforeNodeExpand: "BeforeNodeExpand", AfterNodeExpand: "AfterNodeExpand", BeforeNodeCollapse: "BeforeNodeCollapse", AfterNodeCollapse: "AfterNodeCollapse", BeforeReparent: "BeforeReparent", AfterReparent: "AfterReparent", NodeAction: "NodeAction", ZoomChange: "ZoomChange", Navigate: "Navigate" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 20, vars: 9, consts: [["svgContainer", ""], ["svgElement", ""], [1, "mj-hierarchy-wrapper"], [1, "mj-hierarchy-toolbar"], [1, "mj-canvas-container", 3, "click"], [1, "mj-state-overlay"], [1, "mj-state-overlay", "mj-error-state"], [1, "mj-state-overlay", "mj-empty-state"], [1, "mj-hierarchy-svg"], ["id", "mj-tree-grid", "width", "24", "height", "24", "patternUnits", "userSpaceOnUse"], ["cx", "12", "cy", "12", "r", "1", "fill", "var(--mj-border-subtle, #1e293b)", "opacity", "0.4"], ["width", "100%", "height", "100%", "fill", "url(#mj-tree-grid)"], [1, "mj-hierarchy-canvas"], [1, "mj-links-group"], [1, "mj-nodes-group"], ["aria-label", "Node details panel", 1, "mj-details-drawer"], [1, "mj-search-box"], [1, "mj-focus-indicator"], [1, "mj-toolbar-actions"], [1, "fa-solid", "fa-magnifying-glass", "mj-search-icon"], ["type", "text", "placeholder", "Search hierarchy...", 1, "mj-search-input", 3, "ngModelChange", "input", "ngModel"], ["type", "button", "title", "Clear search", 1, "mj-clear-btn"], [1, "mj-match-badge"], ["type", "button", "title", "Clear search", 1, "mj-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-crosshairs"], ["type", "button", "title", "Show entire hierarchy", 1, "mj-reset-focus-btn", 3, "click"], [1, "fa-solid", "fa-rotate-left"], ["type", "button", "title", "Expand all subtrees", 1, "mj-tool-btn", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["type", "button", "title", "Collapse all subtrees", 1, "mj-tool-btn", 3, "click"], [1, "fa-solid", "fa-folder"], [1, "mj-tool-divider"], ["type", "button", "title", "Zoom in", 1, "mj-tool-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["type", "button", "title", "Zoom out", 1, "mj-tool-btn", 3, "click"], [1, "fa-solid", "fa-minus"], ["type", "button", "title", "Fit hierarchy to view", 1, "mj-tool-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["type", "button", "title", "Reload hierarchy data", 1, "mj-tool-btn", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "mj-spinner"], [1, "fa-solid", "fa-circle-exclamation", "mj-error-icon"], ["type", "button", 1, "mj-retry-btn", 3, "click"], [1, "fa-solid", "fa-sitemap", "mj-empty-icon"], [1, "mj-node-foreign-object"], [1, "mj-node-card", 3, "click", "dblclick"], [1, "mj-card-accent"], [1, "mj-node-header"], [1, "mj-node-icon"], [1, "mj-node-title-group"], [1, "mj-node-name", 3, "title"], [1, "mj-node-subtitle"], [1, "mj-node-footer"], ["type", "button", 1, "mj-expand-badge", 3, "collapsed", "title"], [1, "mj-leaf-indicator"], [1, "mj-node-actions"], ["type", "button", 1, "mj-expand-badge", 3, "click", "title"], [1, "fa-solid"], ["type", "button", "title", "Focus on this subtree", 1, "mj-node-action-btn", 3, "click"], ["type", "button", "title", "Open record in Explorer", 1, "mj-node-action-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "mj-drawer-header"], [1, "mj-drawer-title-group"], [1, "mj-drawer-icon"], [1, "mj-drawer-titles"], [1, "mj-drawer-name", 3, "title"], [1, "mj-drawer-subtitle"], ["type", "button", "title", "Close details", 1, "mj-drawer-close-btn", 3, "click"], [1, "mj-drawer-body"], [1, "mj-drawer-stats"], [1, "mj-stat-card"], [1, "mj-stat-num"], [1, "mj-stat-label"], [1, "mj-drawer-section"], [1, "mj-drawer-actions"], ["type", "button", "title", "Open this record in Explorer", 1, "mj-drawer-btn-primary", 3, "click"], [1, "mj-drawer-btn-row"], ["type", "button", 1, "mj-drawer-btn-secondary"], ["type", "button", "title", "Focus hierarchy on this subtree", 1, "mj-drawer-btn-secondary", 3, "click"], [1, "mj-section-heading"], [1, "mj-attr-list"], [1, "mj-attr-row"], [1, "mj-attr-dt"], [1, "mj-attr-dd", 3, "title"], ["type", "button", 1, "mj-drawer-btn-secondary", 3, "click"]], template: function HierarchyTreeComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵconditionalCreate(1, HierarchyTreeComponent_Conditional_1_Template, 4, 3, "div", 3);
+            i0.ɵɵelementStart(2, "div", 4, 0);
+            i0.ɵɵlistener("click", function HierarchyTreeComponent_Template_div_click_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCanvasBackgroundClick($event)); });
+            i0.ɵɵconditionalCreate(4, HierarchyTreeComponent_Conditional_4_Template, 4, 0, "div", 5)(5, HierarchyTreeComponent_Conditional_5_Template, 6, 1, "div", 6)(6, HierarchyTreeComponent_Conditional_6_Template, 4, 0, "div", 7);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(7, "svg", 8, 1)(9, "defs")(10, "pattern", 9);
+            i0.ɵɵelement(11, "circle", 10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(12, "rect", 11);
+            i0.ɵɵelementStart(13, "g", 12);
+            i0.ɵɵelement(14, "g", 13);
+            i0.ɵɵelementStart(15, "g", 14);
+            i0.ɵɵrepeaterCreate(16, HierarchyTreeComponent_For_17_Template, 1, 1, null, null, _forTrack0);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(18, "aside", 15);
+            i0.ɵɵconditionalCreate(19, HierarchyTreeComponent_Conditional_19_Template, 39, 12);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("height", ctx.Config.Height || "100%")("min-height", ctx.Config.MinHeight || "500px");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Config.ShowToolbar || ctx.Config.ShowSearch ? 1 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.Loading ? 4 : ctx.ErrorMessage ? 5 : ctx.AllNodes.length === 0 ? 6 : -1);
+            i0.ɵɵadvance(12);
+            i0.ɵɵrepeater(ctx.AllNodes);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("open", ctx.SelectedNode != null && ctx.ShowDetailsDrawer);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SelectedNode ? 19 : -1);
+        } }, dependencies: [CommonModule, FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["[_nghost-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 500px;\n    position: relative;\n    box-sizing: border-box;\n    font-family: inherit;\n    flex: 1;\n}\n\n.mj-hierarchy-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    flex: 1;\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 12px;\n    overflow: hidden;\n    position: relative;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n}\n\n\n\n.mj-hierarchy-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface, #0f172a);\n    border-bottom: 1px solid var(--mj-border-default, #1e293b);\n    gap: 12px;\n    z-index: 10;\n    flex-wrap: wrap;\n}\n\n\n\n.mj-search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 8px;\n    padding: 4px 10px;\n    min-width: 240px;\n    max-width: 340px;\n    flex: 1;\n    transition: border-color 0.18s ease;\n}\n\n.mj-search-box[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 18%, transparent);\n}\n\n.mj-search-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-search-input[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    outline: none;\n    color: var(--mj-text-primary, #f8fafc);\n    font-size: 12.5px;\n    width: 100%;\n}\n\n.mj-search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-clear-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    font-size: 11px;\n    padding: 2px 4px;\n    border-radius: 4px;\n}\n\n.mj-clear-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary, #f8fafc);\n}\n\n.mj-match-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    padding: 2px 7px;\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 15%, transparent);\n    color: var(--mj-brand-primary, #38bdf8);\n    white-space: nowrap;\n}\n\n\n\n.mj-focus-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n    color: var(--mj-brand-primary, #38bdf8);\n    background: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 10%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 30%, transparent);\n    padding: 4px 10px;\n    border-radius: 6px;\n}\n\n.mj-reset-focus-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 4px;\n    padding: 3px 8px;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    margin-left: 6px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-reset-focus-btn[_ngcontent-%COMP%]:hover {\n    opacity: 0.9;\n}\n\n\n\n.mj-toolbar-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-left: auto;\n}\n\n.mj-tool-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    background: transparent;\n    border: 1px solid var(--mj-border-subtle, #1e293b);\n    border-radius: 6px;\n    color: var(--mj-text-secondary, #94a3b8);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.18s ease;\n}\n\n.mj-tool-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-elevated, #1e293b);\n    color: var(--mj-text-primary, #f8fafc);\n    border-color: var(--mj-border-default, #334155);\n}\n\n.mj-tool-divider[_ngcontent-%COMP%] {\n    width: 1px;\n    height: 18px;\n    background: var(--mj-border-subtle, #1e293b);\n    margin: 0 4px;\n}\n\n\n\n.mj-canvas-container[_ngcontent-%COMP%] {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    min-height: 450px;\n    cursor: grab;\n}\n\n.mj-canvas-container[_ngcontent-%COMP%]:active {\n    cursor: grabbing;\n}\n\n.mj-hierarchy-svg[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    display: block;\n}\n\n\n\n.mj-state-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    background: var(--mj-bg-overlay);\n    backdrop-filter: blur(4px);\n    z-index: 20;\n    color: var(--mj-text-secondary, #94a3b8);\n    font-size: 13px;\n}\n\n.mj-spinner[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: 3px solid color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 20%, transparent);\n    border-top-color: var(--mj-brand-primary, #38bdf8);\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_mj-spin 0.8s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-error-icon[_ngcontent-%COMP%], .mj-empty-icon[_ngcontent-%COMP%] {\n    font-size: 28px;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-retry-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 14px;\n    font-size: 12px;\n    font-weight: 700;\n    border-radius: 6px;\n    cursor: pointer;\n}\n\n\n\n.mj-node-foreign-object[_ngcontent-%COMP%] {\n    overflow: visible;\n}\n\n\n\n.mj-node-card[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    background: var(--mj-bg-surface-card, #111a2e);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 10px;\n    padding: 8px 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);\n    position: relative;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    user-select: none;\n}\n\n.mj-node-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    transform: translateY(-2px);\n    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 20%, transparent);\n}\n\n.mj-node-card.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 40%, transparent), 0 6px 20px rgba(0, 0, 0, 0.6);\n}\n\n.mj-node-card.highlighted[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-warning);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 40%, transparent), 0 6px 20px rgba(0, 0, 0, 0.6);\n}\n\n.mj-node-card.focus-root[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-success);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n\n\n.mj-card-accent[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 8px;\n    right: 8px;\n    height: 3px;\n    border-radius: 3px 3px 0 0;\n    opacity: 0.85;\n}\n\n\n\n.mj-node-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-top: 4px;\n}\n\n.mj-node-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    background: rgba(255, 255, 255, 0.05);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 13px;\n    flex-shrink: 0;\n}\n\n.mj-node-title-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    flex: 1;\n}\n\n.mj-node-name[_ngcontent-%COMP%] {\n    font-size: 12.5px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #f8fafc);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n}\n\n.mj-node-subtitle[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted, #94a3b8);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n}\n\n\n\n.mj-node-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-top: 6px;\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n\n\n.mj-expand-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 9999px;\n    padding: 2px 8px;\n    color: var(--mj-text-secondary, #94a3b8);\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mj-expand-badge[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.mj-expand-badge.collapsed[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 15%, transparent);\n    color: var(--mj-brand-primary, #38bdf8);\n    border-color: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 35%, transparent);\n}\n\n.mj-leaf-indicator[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted, #64748b);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding-left: 2px;\n}\n\n\n\n.mj-node-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-node-action-btn[_ngcontent-%COMP%] {\n    width: 22px;\n    height: 22px;\n    border-radius: 4px;\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted, #64748b);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10.5px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mj-node-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border-color: var(--mj-border-default, #223254);\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n\n\n\n\n.mj-details-drawer[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 330px;\n    max-width: 85%;\n    background: var(--mj-bg-surface, #0f172a);\n    border-left: 1px solid var(--mj-border-default, #1e293b);\n    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45);\n    z-index: 30;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);\n    pointer-events: none;\n    user-select: text;\n}\n\n.mj-details-drawer.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n    pointer-events: auto;\n}\n\n.mj-drawer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 16px 18px;\n    background: var(--mj-bg-surface-elevated, #151f36);\n    border-bottom: 1px solid var(--mj-border-default, #1e293b);\n    gap: 12px;\n}\n\n.mj-drawer-title-group[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n    flex: 1;\n}\n\n.mj-drawer-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    background: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.mj-drawer-titles[_ngcontent-%COMP%] {\n    min-width: 0;\n    flex: 1;\n}\n\n.mj-drawer-name[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #f8fafc);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n}\n\n.mj-drawer-subtitle[_ngcontent-%COMP%] {\n    margin: 2px 0 0 0;\n    font-size: 12px;\n    color: var(--mj-text-muted, #94a3b8);\n    line-height: 1.3;\n}\n\n.mj-drawer-close-btn[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted, #94a3b8);\n    cursor: pointer;\n    font-size: 14px;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.mj-drawer-close-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.08);\n    color: var(--mj-text-primary, #f8fafc);\n    border-color: var(--mj-border-default, #223254);\n}\n\n.mj-drawer-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 18px;\n    display: flex;\n    flex-direction: column;\n    gap: 18px;\n}\n\n.mj-drawer-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 8px;\n}\n\n.mj-stat-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 8px;\n    padding: 8px 6px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.mj-stat-num[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-brand-primary, #38bdf8);\n    line-height: 1.2;\n}\n\n.mj-stat-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-muted, #64748b);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    margin-top: 2px;\n}\n\n.mj-drawer-section[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-section-heading[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-attr-list[_ngcontent-%COMP%] {\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 8px;\n    padding: 10px 12px;\n}\n\n.mj-attr-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n    padding-bottom: 4px;\n}\n\n.mj-attr-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n    padding-bottom: 0;\n}\n\n.mj-attr-dt[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted, #94a3b8);\n    font-weight: 500;\n}\n\n.mj-attr-dd[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary, #f8fafc);\n    font-weight: 600;\n    text-align: right;\n    max-width: 170px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mj-drawer-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: auto;\n    padding-top: 12px;\n}\n\n.mj-drawer-btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    padding: 9px 16px;\n    font-size: 13px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: all 0.18s ease;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 30%, transparent);\n}\n\n.mj-drawer-btn-primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: 0 4px 14px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 45%, transparent);\n    transform: translateY(-1px);\n}\n\n.mj-drawer-btn-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.mj-drawer-btn-secondary[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 8px;\n    padding: 7px 12px;\n    color: var(--mj-text-primary, #f8fafc);\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mj-drawer-btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-border-default, #223254);\n    border-color: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-brand-primary, #38bdf8);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HierarchyTreeComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-hierarchy-tree', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"mj-hierarchy-wrapper\" [style.height]=\"Config.Height || '100%'\" [style.min-height]=\"Config.MinHeight || '500px'\">\n    <!-- Top Controls Bar -->\n    @if (Config.ShowToolbar || Config.ShowSearch) {\n        <div class=\"mj-hierarchy-toolbar\">\n            <!-- Search Box -->\n            @if (Config.ShowSearch) {\n                <div class=\"mj-search-box\">\n                    <i class=\"fa-solid fa-magnifying-glass mj-search-icon\"></i>\n                    <input\n                        type=\"text\"\n                        class=\"mj-search-input\"\n                        placeholder=\"Search hierarchy...\"\n                        [(ngModel)]=\"SearchQuery\"\n                        (input)=\"onSearchInput()\"\n                    />\n                    @if (SearchQuery) {\n                        <button type=\"button\" class=\"mj-clear-btn\" (click)=\"clearSearch()\" title=\"Clear search\">\n                            <i class=\"fa-solid fa-xmark\"></i>\n                        </button>\n                    }\n                    @if (SearchQuery && MatchingNodeCount > 0) {\n                        <span class=\"mj-match-badge\">{{ MatchingNodeCount }} found</span>\n                    }\n                </div>\n            }\n\n            <!-- Focus Subtree Indicator -->\n            @if (FocusedNode) {\n                <div class=\"mj-focus-indicator\">\n                    <i class=\"fa-solid fa-crosshairs\"></i>\n                    <span>Focusing subtree: <strong>{{ FocusedNode.Name }}</strong></span>\n                    <button type=\"button\" class=\"mj-reset-focus-btn\" (click)=\"resetFocus()\" title=\"Show entire hierarchy\">\n                        <i class=\"fa-solid fa-rotate-left\"></i> View Full Hierarchy\n                    </button>\n                </div>\n            }\n\n            <!-- Toolbar Action Buttons -->\n            @if (Config.ShowToolbar) {\n                <div class=\"mj-toolbar-actions\">\n                    <button type=\"button\" class=\"mj-tool-btn\" (click)=\"expandAll()\" title=\"Expand all subtrees\">\n                        <i class=\"fa-solid fa-folder-open\"></i>\n                    </button>\n                    <button type=\"button\" class=\"mj-tool-btn\" (click)=\"collapseAll()\" title=\"Collapse all subtrees\">\n                        <i class=\"fa-solid fa-folder\"></i>\n                    </button>\n                    <div class=\"mj-tool-divider\"></div>\n                    <button type=\"button\" class=\"mj-tool-btn\" (click)=\"zoomIn()\" title=\"Zoom in\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                    </button>\n                    <button type=\"button\" class=\"mj-tool-btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\n                        <i class=\"fa-solid fa-minus\"></i>\n                    </button>\n                    <button type=\"button\" class=\"mj-tool-btn\" (click)=\"onFitToViewClick()\" title=\"Fit hierarchy to view\">\n                        <i class=\"fa-solid fa-expand\"></i>\n                    </button>\n                    <div class=\"mj-tool-divider\"></div>\n                    <button type=\"button\" class=\"mj-tool-btn\" (click)=\"refresh()\" title=\"Reload hierarchy data\">\n                        <i class=\"fa-solid fa-rotate-right\"></i>\n                    </button>\n                </div>\n            }\n        </div>\n    }\n\n    <!-- SVG Canvas Container -->\n    <div #svgContainer class=\"mj-canvas-container\" (click)=\"onCanvasBackgroundClick($event)\">\n        @if (Loading) {\n            <div class=\"mj-state-overlay\">\n                <div class=\"mj-spinner\"></div>\n                <span>Loading hierarchy...</span>\n            </div>\n        } @else if (ErrorMessage) {\n            <div class=\"mj-state-overlay mj-error-state\">\n                <i class=\"fa-solid fa-circle-exclamation mj-error-icon\"></i>\n                <span>{{ ErrorMessage }}</span>\n                <button type=\"button\" class=\"mj-retry-btn\" (click)=\"loadData()\">Retry</button>\n            </div>\n        } @else if (AllNodes.length === 0) {\n            <div class=\"mj-state-overlay mj-empty-state\">\n                <i class=\"fa-solid fa-sitemap mj-empty-icon\"></i>\n                <span>No hierarchy records found.</span>\n            </div>\n        }\n\n        <svg #svgElement class=\"mj-hierarchy-svg\">\n            <defs>\n                <pattern id=\"mj-tree-grid\" width=\"24\" height=\"24\" patternUnits=\"userSpaceOnUse\">\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" fill=\"var(--mj-border-subtle, #1e293b)\" opacity=\"0.4\" />\n                </pattern>\n            </defs>\n\n            <!-- Background grid -->\n            <rect width=\"100%\" height=\"100%\" fill=\"url(#mj-tree-grid)\" />\n\n            <!-- Main Canvas Group (Zoomable & Pannable) -->\n            <g class=\"mj-hierarchy-canvas\">\n                <!-- Connective Link Curves -->\n                <g class=\"mj-links-group\"></g>\n\n                <!-- Interactive Node Cards via ForeignObject -->\n                <g class=\"mj-nodes-group\">\n                    @for (node of AllNodes; track node.ID) {\n                        @if (node.x != null && node.y != null) {\n                            <foreignObject\n                                [attr.x]=\"node.x\"\n                                [attr.y]=\"node.y\"\n                                [attr.width]=\"Config.NodeWidth || 230\"\n                                [attr.height]=\"Config.NodeHeight || 90\"\n                                class=\"mj-node-foreign-object\"\n                            >\n                                <div\n                                    class=\"mj-node-card\"\n                                    [class.selected]=\"node.IsSelected\"\n                                    [class.highlighted]=\"node.IsHighlighted\"\n                                    [class.focus-root]=\"node.IsFocusRoot\"\n                                    (click)=\"onNodeClick(node, $event)\"\n                                    (dblclick)=\"onNodeDoubleClick(node, $event)\"\n                                >\n                                    <!-- Accent Top Border -->\n                                    <div class=\"mj-card-accent\" [style.background]=\"node.Color || Config.DefaultColor\"></div>\n\n                                    <!-- Node Card Header -->\n                                    <div class=\"mj-node-header\">\n                                        <div class=\"mj-node-icon\" [style.color]=\"node.Color || Config.DefaultColor\">\n                                            <i [class]=\"node.Icon || Config.DefaultIcon\"></i>\n                                        </div>\n                                        <div class=\"mj-node-title-group\">\n                                            <div class=\"mj-node-name\" [title]=\"node.Name\">{{ node.Name }}</div>\n                                            @if (node.Subtitle) {\n                                                <div class=\"mj-node-subtitle\">{{ node.Subtitle }}</div>\n                                            }\n                                        </div>\n                                    </div>\n\n                                    <!-- Node Card Footer & Actions -->\n                                    <div class=\"mj-node-footer\">\n                                        <!-- Subtree Expansion Pill -->\n                                        @if (node.DirectChildCount > 0) {\n                                            <button\n                                                type=\"button\"\n                                                class=\"mj-expand-badge\"\n                                                [class.collapsed]=\"!node.IsExpanded\"\n                                                (click)=\"toggleNodeExpansion(node, $event)\"\n                                                [title]=\"node.IsExpanded ? 'Collapse sub-branch' : 'Expand ' + node.DirectChildCount + ' children'\"\n                                            >\n                                                <i class=\"fa-solid\" [class.fa-chevron-down]=\"node.IsExpanded\" [class.fa-chevron-right]=\"!node.IsExpanded\"></i>\n                                                <span>{{ node.DirectChildCount }}</span>\n                                            </button>\n                                        } @else {\n                                            <span class=\"mj-leaf-indicator\">Leaf</span>\n                                        }\n\n                                        <!-- Quick Action Buttons -->\n                                        @if (AllowNodeActions) {\n                                            <div class=\"mj-node-actions\">\n                                                <button\n                                                    type=\"button\"\n                                                    class=\"mj-node-action-btn\"\n                                                    (click)=\"onNodeAction(node, 'focus', $event)\"\n                                                    title=\"Focus on this subtree\"\n                                                >\n                                                    <i class=\"fa-solid fa-crosshairs\"></i>\n                                                </button>\n                                                <button\n                                                    type=\"button\"\n                                                    class=\"mj-node-action-btn\"\n                                                    (click)=\"onNodeAction(node, 'open', $event)\"\n                                                    title=\"Open record in Explorer\"\n                                                >\n                                                    <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                                                </button>\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </foreignObject>\n                        }\n                    }\n                </g>\n            </g>\n        </svg>\n\n        <!-- Slide-In Node Details Drawer -->\n        <aside\n            class=\"mj-details-drawer\"\n            [class.open]=\"SelectedNode != null && ShowDetailsDrawer\"\n            aria-label=\"Node details panel\"\n        >\n            @if (SelectedNode) {\n                <div class=\"mj-drawer-header\">\n                    <div class=\"mj-drawer-title-group\">\n                        <div class=\"mj-drawer-icon\" [style.color]=\"SelectedNode.Color || Config.DefaultColor\">\n                            <i [class]=\"SelectedNode.Icon || Config.DefaultIcon\"></i>\n                        </div>\n                        <div class=\"mj-drawer-titles\">\n                            <h4 class=\"mj-drawer-name\" [title]=\"SelectedNode.Name\">{{ SelectedNode.Name }}</h4>\n                            @if (SelectedNode.Subtitle) {\n                                <p class=\"mj-drawer-subtitle\">{{ SelectedNode.Subtitle }}</p>\n                            }\n                        </div>\n                    </div>\n                    <button\n                        type=\"button\"\n                        class=\"mj-drawer-close-btn\"\n                        (click)=\"closeDetailsDrawer()\"\n                        title=\"Close details\"\n                    >\n                        <i class=\"fa-solid fa-xmark\"></i>\n                    </button>\n                </div>\n\n                <div class=\"mj-drawer-body\">\n                    <div class=\"mj-drawer-stats\">\n                        <div class=\"mj-stat-card\">\n                            <span class=\"mj-stat-num\">{{ SelectedNode.Depth }}</span>\n                            <span class=\"mj-stat-label\">Hierarchy Level</span>\n                        </div>\n                        <div class=\"mj-stat-card\">\n                            <span class=\"mj-stat-num\">{{ SelectedNode.DirectChildCount }}</span>\n                            <span class=\"mj-stat-label\">Direct Children</span>\n                        </div>\n                        <div class=\"mj-stat-card\">\n                            <span class=\"mj-stat-num\">{{ SelectedNode.TotalDescendantCount }}</span>\n                            <span class=\"mj-stat-label\">Total Subtree</span>\n                        </div>\n                    </div>\n\n                    @if (SelectedNode.Record && getRecordAttributeEntries(SelectedNode.Record).length > 0) {\n                        <div class=\"mj-drawer-section\">\n                            <h5 class=\"mj-section-heading\">Attributes</h5>\n                            <dl class=\"mj-attr-list\">\n                                @for (attr of getRecordAttributeEntries(SelectedNode.Record); track attr.key) {\n                                    <div class=\"mj-attr-row\">\n                                        <dt class=\"mj-attr-dt\">{{ attr.label }}</dt>\n                                        <dd class=\"mj-attr-dd\" [title]=\"attr.value\">{{ attr.value }}</dd>\n                                    </div>\n                                }\n                            </dl>\n                        </div>\n                    }\n\n                    <div class=\"mj-drawer-actions\">\n                        <button\n                            type=\"button\"\n                            class=\"mj-drawer-btn-primary\"\n                            (click)=\"navigateToRecord(SelectedNode)\"\n                            title=\"Open this record in Explorer\"\n                        >\n                            <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                            <span>Open Record</span>\n                        </button>\n\n                        <div class=\"mj-drawer-btn-row\">\n                            @if (SelectedNode.DirectChildCount > 0) {\n                                <button\n                                    type=\"button\"\n                                    class=\"mj-drawer-btn-secondary\"\n                                    (click)=\"toggleNodeExpansion(SelectedNode)\"\n                                >\n                                    <i class=\"fa-solid\" [class.fa-folder-open]=\"SelectedNode.IsExpanded\" [class.fa-folder]=\"!SelectedNode.IsExpanded\"></i>\n                                    <span>{{ SelectedNode.IsExpanded ? 'Collapse' : 'Expand' }}</span>\n                                </button>\n                            }\n                            <button\n                                type=\"button\"\n                                class=\"mj-drawer-btn-secondary\"\n                                (click)=\"setFocusRoot(SelectedNode.ID)\"\n                                title=\"Focus hierarchy on this subtree\"\n                            >\n                                <i class=\"fa-solid fa-crosshairs\"></i>\n                                <span>Focus Tree</span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            }\n        </aside>\n    </div>\n</div>\n", styles: [":host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 500px;\n    position: relative;\n    box-sizing: border-box;\n    font-family: inherit;\n    flex: 1;\n}\n\n.mj-hierarchy-wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    flex: 1;\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 12px;\n    overflow: hidden;\n    position: relative;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n}\n\n/* Toolbar */\n.mj-hierarchy-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface, #0f172a);\n    border-bottom: 1px solid var(--mj-border-default, #1e293b);\n    gap: 12px;\n    z-index: 10;\n    flex-wrap: wrap;\n}\n\n/* Search Box */\n.mj-search-box {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 8px;\n    padding: 4px 10px;\n    min-width: 240px;\n    max-width: 340px;\n    flex: 1;\n    transition: border-color 0.18s ease;\n}\n\n.mj-search-box:focus-within {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 18%, transparent);\n}\n\n.mj-search-icon {\n    font-size: 12px;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-search-input {\n    background: transparent;\n    border: none;\n    outline: none;\n    color: var(--mj-text-primary, #f8fafc);\n    font-size: 12.5px;\n    width: 100%;\n}\n\n.mj-search-input::placeholder {\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-clear-btn {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted, #64748b);\n    cursor: pointer;\n    font-size: 11px;\n    padding: 2px 4px;\n    border-radius: 4px;\n}\n\n.mj-clear-btn:hover {\n    color: var(--mj-text-primary, #f8fafc);\n}\n\n.mj-match-badge {\n    font-size: 11px;\n    font-weight: 700;\n    padding: 2px 7px;\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 15%, transparent);\n    color: var(--mj-brand-primary, #38bdf8);\n    white-space: nowrap;\n}\n\n/* Focus Subtree Indicator */\n.mj-focus-indicator {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n    color: var(--mj-brand-primary, #38bdf8);\n    background: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 10%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 30%, transparent);\n    padding: 4px 10px;\n    border-radius: 6px;\n}\n\n.mj-reset-focus-btn {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 4px;\n    padding: 3px 8px;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    margin-left: 6px;\n    transition: opacity 0.15s ease;\n}\n\n.mj-reset-focus-btn:hover {\n    opacity: 0.9;\n}\n\n/* Toolbar Buttons */\n.mj-toolbar-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    margin-left: auto;\n}\n\n.mj-tool-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    background: transparent;\n    border: 1px solid var(--mj-border-subtle, #1e293b);\n    border-radius: 6px;\n    color: var(--mj-text-secondary, #94a3b8);\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.18s ease;\n}\n\n.mj-tool-btn:hover {\n    background: var(--mj-bg-surface-elevated, #1e293b);\n    color: var(--mj-text-primary, #f8fafc);\n    border-color: var(--mj-border-default, #334155);\n}\n\n.mj-tool-divider {\n    width: 1px;\n    height: 18px;\n    background: var(--mj-border-subtle, #1e293b);\n    margin: 0 4px;\n}\n\n/* Canvas Area */\n.mj-canvas-container {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    min-height: 450px;\n    cursor: grab;\n}\n\n.mj-canvas-container:active {\n    cursor: grabbing;\n}\n\n.mj-hierarchy-svg {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    display: block;\n}\n\n/* State Overlays */\n.mj-state-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    background: var(--mj-bg-overlay);\n    backdrop-filter: blur(4px);\n    z-index: 20;\n    color: var(--mj-text-secondary, #94a3b8);\n    font-size: 13px;\n}\n\n.mj-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 20%, transparent);\n    border-top-color: var(--mj-brand-primary, #38bdf8);\n    border-radius: 50%;\n    animation: mj-spin 0.8s linear infinite;\n}\n\n@keyframes mj-spin {\n    to { transform: rotate(360deg); }\n}\n\n.mj-error-icon, .mj-empty-icon {\n    font-size: 28px;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-retry-btn {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 14px;\n    font-size: 12px;\n    font-weight: 700;\n    border-radius: 6px;\n    cursor: pointer;\n}\n\n/* Node ForeignObject Container */\n.mj-node-foreign-object {\n    overflow: visible;\n}\n\n/* Interactive Node Card */\n.mj-node-card {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    background: var(--mj-bg-surface-card, #111a2e);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 10px;\n    padding: 8px 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);\n    position: relative;\n    cursor: pointer;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    user-select: none;\n}\n\n.mj-node-card:hover {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    transform: translateY(-2px);\n    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 20%, transparent);\n}\n\n.mj-node-card.selected {\n    border-color: var(--mj-brand-primary, #38bdf8);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 40%, transparent), 0 6px 20px rgba(0, 0, 0, 0.6);\n}\n\n.mj-node-card.highlighted {\n    border-color: var(--mj-status-warning);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 40%, transparent), 0 6px 20px rgba(0, 0, 0, 0.6);\n}\n\n.mj-node-card.focus-root {\n    border-color: var(--mj-status-success);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n/* Accent Top Bar */\n.mj-card-accent {\n    position: absolute;\n    top: 0;\n    left: 8px;\n    right: 8px;\n    height: 3px;\n    border-radius: 3px 3px 0 0;\n    opacity: 0.85;\n}\n\n/* Header */\n.mj-node-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-top: 4px;\n}\n\n.mj-node-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: 6px;\n    background: rgba(255, 255, 255, 0.05);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 13px;\n    flex-shrink: 0;\n}\n\n.mj-node-title-group {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    flex: 1;\n}\n\n.mj-node-name {\n    font-size: 12.5px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #f8fafc);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n}\n\n.mj-node-subtitle {\n    font-size: 11px;\n    color: var(--mj-text-muted, #94a3b8);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n}\n\n/* Footer */\n.mj-node-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-top: 6px;\n    border-top: 1px solid rgba(255, 255, 255, 0.06);\n}\n\n/* Expansion Pill Badge */\n.mj-expand-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 9999px;\n    padding: 2px 8px;\n    color: var(--mj-text-secondary, #94a3b8);\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mj-expand-badge:hover {\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.mj-expand-badge.collapsed {\n    background: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 15%, transparent);\n    color: var(--mj-brand-primary, #38bdf8);\n    border-color: color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 35%, transparent);\n}\n\n.mj-leaf-indicator {\n    font-size: 10px;\n    color: var(--mj-text-muted, #64748b);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding-left: 2px;\n}\n\n/* Actions */\n.mj-node-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.mj-node-action-btn {\n    width: 22px;\n    height: 22px;\n    border-radius: 4px;\n    background: transparent;\n    border: 1px solid transparent;\n    color: var(--mj-text-muted, #64748b);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10.5px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mj-node-action-btn:hover {\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border-color: var(--mj-border-default, #223254);\n    color: var(--mj-brand-primary, #38bdf8);\n}\n\n/* ============================================================================\n * Slide-In Node Details Drawer\n * ============================================================================ */\n.mj-details-drawer {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 330px;\n    max-width: 85%;\n    background: var(--mj-bg-surface, #0f172a);\n    border-left: 1px solid var(--mj-border-default, #1e293b);\n    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45);\n    z-index: 30;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);\n    pointer-events: none;\n    user-select: text;\n}\n\n.mj-details-drawer.open {\n    transform: translateX(0);\n    pointer-events: auto;\n}\n\n.mj-drawer-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 16px 18px;\n    background: var(--mj-bg-surface-elevated, #151f36);\n    border-bottom: 1px solid var(--mj-border-default, #1e293b);\n    gap: 12px;\n}\n\n.mj-drawer-title-group {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    min-width: 0;\n    flex: 1;\n}\n\n.mj-drawer-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    background: rgba(255, 255, 255, 0.05);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n\n.mj-drawer-titles {\n    min-width: 0;\n    flex: 1;\n}\n\n.mj-drawer-name {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--mj-text-primary, #f8fafc);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.3;\n}\n\n.mj-drawer-subtitle {\n    margin: 2px 0 0 0;\n    font-size: 12px;\n    color: var(--mj-text-muted, #94a3b8);\n    line-height: 1.3;\n}\n\n.mj-drawer-close-btn {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted, #94a3b8);\n    cursor: pointer;\n    font-size: 14px;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n}\n\n.mj-drawer-close-btn:hover {\n    background: rgba(255, 255, 255, 0.08);\n    color: var(--mj-text-primary, #f8fafc);\n    border-color: var(--mj-border-default, #223254);\n}\n\n.mj-drawer-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 18px;\n    display: flex;\n    flex-direction: column;\n    gap: 18px;\n}\n\n.mj-drawer-stats {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 8px;\n}\n\n.mj-stat-card {\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 8px;\n    padding: 8px 6px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n}\n\n.mj-stat-num {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-brand-primary, #38bdf8);\n    line-height: 1.2;\n}\n\n.mj-stat-label {\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-text-muted, #64748b);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    margin-top: 2px;\n}\n\n.mj-drawer-section {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-section-heading {\n    margin: 0;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    color: var(--mj-text-muted, #64748b);\n}\n\n.mj-attr-list {\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    background: var(--mj-bg-surface-sunken, #080d1a);\n    border: 1px solid var(--mj-border-default, #1e293b);\n    border-radius: 8px;\n    padding: 10px 12px;\n}\n\n.mj-attr-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n    padding-bottom: 4px;\n}\n\n.mj-attr-row:last-child {\n    border-bottom: none;\n    padding-bottom: 0;\n}\n\n.mj-attr-dt {\n    color: var(--mj-text-muted, #94a3b8);\n    font-weight: 500;\n}\n\n.mj-attr-dd {\n    margin: 0;\n    color: var(--mj-text-primary, #f8fafc);\n    font-weight: 600;\n    text-align: right;\n    max-width: 170px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.mj-drawer-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: auto;\n    padding-top: 12px;\n}\n\n.mj-drawer-btn-primary {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    background: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    padding: 9px 16px;\n    font-size: 13px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: all 0.18s ease;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 30%, transparent);\n}\n\n.mj-drawer-btn-primary:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: 0 4px 14px color-mix(in srgb, var(--mj-brand-primary, #38bdf8) 45%, transparent);\n    transform: translateY(-1px);\n}\n\n.mj-drawer-btn-row {\n    display: flex;\n    gap: 8px;\n}\n\n.mj-drawer-btn-secondary {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    background: var(--mj-bg-surface-elevated, #1a2744);\n    border: 1px solid var(--mj-border-default, #223254);\n    border-radius: 8px;\n    padding: 7px 12px;\n    color: var(--mj-text-primary, #f8fafc);\n    font-size: 12px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.mj-drawer-btn-secondary:hover {\n    background: var(--mj-border-default, #223254);\n    border-color: var(--mj-brand-primary, #38bdf8);\n    color: var(--mj-brand-primary, #38bdf8);\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { svgContainerRef: [{
+            type: ViewChild,
+            args: ['svgContainer', { static: false }]
+        }], svgRef: [{
+            type: ViewChild,
+            args: ['svgElement', { static: false }]
+        }], Config: [{
+            type: Input
+        }], Data: [{
+            type: Input
+        }], ActiveRecordID: [{
+            type: Input
+        }], FocusRecordID: [{
+            type: Input
+        }], AllowNodeActions: [{
+            type: Input
+        }], NodeClick: [{
+            type: Output
+        }], NodeDoubleClick: [{
+            type: Output
+        }], NodeSelect: [{
+            type: Output
+        }], BeforeNodeExpand: [{
+            type: Output
+        }], AfterNodeExpand: [{
+            type: Output
+        }], BeforeNodeCollapse: [{
+            type: Output
+        }], AfterNodeCollapse: [{
+            type: Output
+        }], BeforeReparent: [{
+            type: Output
+        }], AfterReparent: [{
+            type: Output
+        }], NodeAction: [{
+            type: Output
+        }], ZoomLevel: [{
+            type: Input
+        }], ZoomChange: [{
+            type: Output
+        }], Navigate: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HierarchyTreeComponent, { className: "HierarchyTreeComponent", filePath: "src/lib/components/hierarchy-tree.component.ts", lineNumber: 73 }); })();
+//# sourceMappingURL=hierarchy-tree.component.js.map