@memberjunction/ng-hierarchy-tree 6.1.4 → 6.2.0-edge.1

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

@@ -389,8 +389,24 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         super();
         this.cdr = cdr;
     }
-    svgContainerRef;
-    svgRef;
+    SvgContainerRef;
+    /** @deprecated Use {@link SvgContainerRef}. */
+    get svgContainerRef() {
+        return this.SvgContainerRef;
+    }
+    /** @deprecated Use {@link SvgContainerRef}. */
+    set svgContainerRef(value) {
+        this.SvgContainerRef = value;
+    }
+    SvgRef;
+    /** @deprecated Use {@link SvgRef}. */
+    get svgRef() {
+        return this.SvgRef;
+    }
+    /** @deprecated Use {@link SvgRef}. */
+    set svgRef(value) {
+        this.SvgRef = value;
+    }
     /**
      * Declarative configuration defining the target entity and visual layout properties.
      */
@@ -501,12 +517,12 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         this.loadData();
     }
     ngAfterViewInit() {
-        this.log('[HierarchyTree:ngAfterViewInit] Initializing D3 Zoom & ResizeObserver. svgRef:', !!this.svgRef?.nativeElement, 'containerRect:', this.svgContainerRef?.nativeElement?.getBoundingClientRect());
+        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();
+            this.RenderTree();
         }
     }
     ngOnChanges(changes) {
@@ -527,13 +543,13 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             this.updateActiveNodeSelection(this.ActiveRecordID);
         }
         else if (changes['Data'] && !changes['Data'].isFirstChange()) {
-            this.buildTreeFromData(this.Data || []);
+            this.BuildTreeFromData(this.Data || []);
         }
         else if (changes['FocusRecordID'] && !changes['FocusRecordID'].isFirstChange()) {
-            this.setFocusRoot(this.FocusRecordID);
+            this.SetFocusRoot(this.FocusRecordID);
         }
         else if (changes['ZoomLevel'] && !changes['ZoomLevel'].isFirstChange() && this.ZoomLevel !== undefined) {
-            this.setZoomLevel(this.ZoomLevel, true);
+            this.SetZoomLevel(this.ZoomLevel, true);
         }
     }
     hasDataConfigChanged(newConfig) {
@@ -566,7 +582,7 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             }
             this.SelectedNode = activeNode;
             this.expandAncestors(activeNode);
-            this.renderTree();
+            this.RenderTree();
         }
     }
     ngOnDestroy() {
@@ -639,7 +655,7 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             });
             if (this.Data) {
                 this.log('[HierarchyTree:loadData] Using provided Data prop:', this.Data.length, 'items');
-                this.buildTreeFromData(this.Data);
+                this.BuildTreeFromData(this.Data);
                 return;
             }
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
@@ -665,7 +681,7 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
                 return;
             }
             const rawItems = result.Results || [];
-            this.buildTreeFromData(rawItems);
+            this.BuildTreeFromData(rawItems);
         }
         catch (err) {
             this.ErrorMessage = err instanceof Error ? err.message : 'Error loading hierarchy tree.';
@@ -675,8 +691,8 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             this.Loading = false;
             this.cdr?.detectChanges();
             setTimeout(() => {
-                this.renderTree();
-                this.fitToScreen(false);
+                this.RenderTree();
+                this.FitToScreen(false);
             }, 80);
         }
     }
@@ -698,7 +714,7 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
     /**
      * Constructs the in-memory tree nodes, computes composite keys, descendant counts, and depths.
      */
-    buildTreeFromData(items) {
+    BuildTreeFromData(items) {
         this.nodeMap.clear();
         this.AllNodes = [];
         const parentFieldName = this.resolveParentFieldName();
@@ -804,9 +820,13 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             }
         }
         if (this.FocusRecordID || this.Config?.FocusRecordID) {
-            this.setFocusRoot(this.FocusRecordID || this.Config?.FocusRecordID);
+            this.SetFocusRoot(this.FocusRecordID || this.Config?.FocusRecordID);
         }
     }
+    /** @deprecated Use {@link BuildTreeFromData}. */
+    buildTreeFromData(items) {
+        return this.BuildTreeFromData(items);
+    }
     resolveParentFieldName() {
         if (this.Config?.ParentField)
             return this.Config.ParentField;
@@ -853,9 +873,9 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
     }
     // --- D3 Layout & Visual Rendering ---
     initD3Zoom() {
-        if (!this.svgRef?.nativeElement)
+        if (!this.SvgRef?.nativeElement)
             return;
-        this.svgSelection = d3.select(this.svgRef.nativeElement);
+        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])
@@ -872,29 +892,29 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         this.svgSelection.call(this.zoomBehavior);
     }
     setupResizeObserver() {
-        if (!this.svgContainerRef?.nativeElement)
+        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.RenderTree();
                     }
                 }
             }
         });
-        this.resizeObserver.observe(this.svgContainerRef.nativeElement);
+        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) {
+    RenderTree(preserveTransform = false) {
+        if (!this.SvgRef?.nativeElement || !this.gSelection) {
+            if (this.SvgRef?.nativeElement) {
                 this.initD3Zoom();
             }
             if (!this.gSelection) {
-                setTimeout(() => this.renderTree(preserveTransform), 30);
+                setTimeout(() => this.RenderTree(preserveTransform), 30);
                 return;
             }
         }
@@ -981,14 +1001,18 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         this.cdr?.markForCheck();
         this.cdr?.detectChanges();
         if (!preserveTransform) {
-            this.fitToScreen(true);
+            this.FitToScreen(true);
         }
     }
+    /** @deprecated Use {@link RenderTree}. */
+    renderTree(preserveTransform = false) {
+        return this.RenderTree(preserveTransform);
+    }
     // --- Interactive Actions ---
     /**
      * Toggles the expand/collapse state of a node, firing cancelable Before and After events.
      */
-    toggleNodeExpansion(node, event) {
+    ToggleNodeExpansion(node, event) {
         if (event)
             event.stopPropagation();
         if (node.IsExpanded) {
@@ -1009,23 +1033,39 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             node.Children = [...(node._allChildren || [])];
             this.AfterNodeExpand.emit({ Node: node, OriginalEvent: event });
         }
-        this.renderTree(true);
+        this.RenderTree(true);
     }
-    closeDetailsDrawer() {
+    /** @deprecated Use {@link ToggleNodeExpansion}. */
+    toggleNodeExpansion(node, event) {
+        return this.ToggleNodeExpansion(node, event);
+    }
+    CloseDetailsDrawer() {
         this.ShowDetailsDrawer = false;
         this.cdr?.markForCheck();
     }
-    openDetailsDrawer() {
+    /** @deprecated Use {@link CloseDetailsDrawer}. */
+    closeDetailsDrawer() {
+        return this.CloseDetailsDrawer();
+    }
+    OpenDetailsDrawer() {
         this.ShowDetailsDrawer = true;
         this.cdr?.markForCheck();
     }
-    onCanvasBackgroundClick(event) {
+    /** @deprecated Use {@link OpenDetailsDrawer}. */
+    openDetailsDrawer() {
+        return this.OpenDetailsDrawer();
+    }
+    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) {
+    /** @deprecated Use {@link OnCanvasBackgroundClick}. */
+    onCanvasBackgroundClick(event) {
+        return this.OnCanvasBackgroundClick(event);
+    }
+    OnNodeClick(node, event) {
         event.stopPropagation();
         this.SelectedNode = node;
         this.ShowDetailsDrawer = true;
@@ -1036,30 +1076,42 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         this.NodeSelect.emit({ Node: node, OriginalEvent: event });
         this.cdr?.markForCheck();
     }
-    onNodeDoubleClick(node, event) {
+    /** @deprecated Use {@link OnNodeClick}. */
+    onNodeClick(node, event) {
+        return this.OnNodeClick(node, event);
+    }
+    OnNodeDoubleClick(node, event) {
         event.stopPropagation();
         this.NodeDoubleClick.emit({ Node: node, OriginalEvent: event });
-        this.navigateToRecord(node, event);
+        this.NavigateToRecord(node, event);
     }
-    onNodeAction(node, action, event) {
+    /** @deprecated Use {@link OnNodeDoubleClick}. */
+    onNodeDoubleClick(node, event) {
+        return this.OnNodeDoubleClick(node, event);
+    }
+    OnNodeAction(node, action, event) {
         event.stopPropagation();
         this.NodeAction.emit({ Node: node, Action: action });
         switch (action) {
             case 'open':
-                this.navigateToRecord(node, event);
+                this.NavigateToRecord(node, event);
                 break;
             case 'focus':
-                this.setFocusRoot(node.ID);
+                this.SetFocusRoot(node.ID);
                 break;
             case 'reset-focus':
-                this.resetFocus();
+                this.ResetFocus();
                 break;
             case 'add-child':
                 // Handled via custom subscriber or event
                 break;
         }
     }
-    navigateToRecord(node, event) {
+    /** @deprecated Use {@link OnNodeAction}. */
+    onNodeAction(node, action, event) {
+        return this.OnNodeAction(node, action, event);
+    }
+    NavigateToRecord(node, event) {
         const entityName = this.entityInfo ? this.entityInfo.Name : this.Config.EntityName;
         const navEvent = {
             Kind: 'record',
@@ -1069,7 +1121,11 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         };
         this.Navigate.emit(navEvent);
     }
-    getRecordAttributeEntries(record) {
+    /** @deprecated Use {@link NavigateToRecord}. */
+    navigateToRecord(node, event) {
+        return this.NavigateToRecord(node, event);
+    }
+    GetRecordAttributeEntries(record) {
         const entries = [];
         const skipFields = new Set([
             'id', 'parentid', 'parentproductcategoryid', 'parentcategoryid',
@@ -1089,15 +1145,19 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         }
         return entries.slice(0, 8);
     }
+    /** @deprecated Use {@link GetRecordAttributeEntries}. */
+    getRecordAttributeEntries(record) {
+        return this.GetRecordAttributeEntries(record);
+    }
     // --- Search & Highlight ---
-    onSearchInput() {
+    OnSearchInput() {
         const q = this.SearchQuery.trim().toLowerCase();
         if (!q) {
             for (const n of this.AllNodes) {
                 n.IsHighlighted = false;
             }
             this.MatchingNodeCount = 0;
-            this.renderTree(true);
+            this.RenderTree(true);
             return;
         }
         let count = 0;
@@ -1113,23 +1173,31 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             }
         }
         this.MatchingNodeCount = count;
-        this.renderTree(true);
+        this.RenderTree(true);
         if (firstMatch && firstMatch.x != null && firstMatch.y != null) {
-            this.centerOnNode(firstMatch);
+            this.CenterOnNode(firstMatch);
         }
     }
-    clearSearch() {
+    /** @deprecated Use {@link OnSearchInput}. */
+    onSearchInput() {
+        return this.OnSearchInput();
+    }
+    ClearSearch() {
         this.SearchQuery = '';
-        this.onSearchInput();
+        this.OnSearchInput();
     }
-    centerOnNode(node) {
-        if (!this.svgSelection || !this.zoomBehavior || !this.svgContainerRef?.nativeElement)
+    /** @deprecated Use {@link ClearSearch}. */
+    clearSearch() {
+        return this.ClearSearch();
+    }
+    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 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;
@@ -1142,6 +1210,10 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         const target = d3.zoomIdentity.translate(tx, ty).scale(currentScale);
         this.svgSelection.interrupt().transition().duration(400).ease(d3.easeCubicOut).call(this.zoomBehavior.transform, target);
     }
+    /** @deprecated Use {@link CenterOnNode}. */
+    centerOnNode(node) {
+        return this.CenterOnNode(node);
+    }
     expandAncestors(node) {
         let curr = node.ParentID ? this.nodeMap.get(NormalizeUUID(node.ParentID)) : undefined;
         while (curr) {
@@ -1151,9 +1223,9 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         }
     }
     // --- Subtree Focus ---
-    setFocusRoot(recordId) {
+    SetFocusRoot(recordId) {
         if (!recordId) {
-            this.resetFocus();
+            this.ResetFocus();
             return;
         }
         const target = this.nodeMap.get(NormalizeUUID(recordId));
@@ -1163,55 +1235,79 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             n.IsFocusRoot = false;
         target.IsFocusRoot = true;
         this.FocusedNode = target;
-        this.renderTree();
-        this.onFitToViewClick();
+        this.RenderTree();
+        this.OnFitToViewClick();
     }
-    resetFocus() {
+    /** @deprecated Use {@link SetFocusRoot}. */
+    setFocusRoot(recordId) {
+        return this.SetFocusRoot(recordId);
+    }
+    ResetFocus() {
         for (const n of this.AllNodes)
             n.IsFocusRoot = false;
         this.FocusedNode = null;
-        this.renderTree();
-        this.onFitToViewClick();
+        this.RenderTree();
+        this.OnFitToViewClick();
+    }
+    /** @deprecated Use {@link ResetFocus}. */
+    resetFocus() {
+        return this.ResetFocus();
     }
     // --- Toolbar Actions / Verbs ---
-    expandAll() {
+    ExpandAll() {
         for (const n of this.AllNodes) {
             n.IsExpanded = true;
             n.Children = [...(n._allChildren || [])];
         }
-        this.renderTree(true);
+        this.RenderTree(true);
     }
-    collapseAll() {
+    /** @deprecated Use {@link ExpandAll}. */
+    expandAll() {
+        return this.ExpandAll();
+    }
+    CollapseAll() {
         for (const n of this.AllNodes) {
             if (n.Depth > 0) {
                 n.IsExpanded = false;
                 n.Children = [];
             }
         }
-        this.renderTree(true);
+        this.RenderTree(true);
     }
-    zoomIn() {
+    /** @deprecated Use {@link CollapseAll}. */
+    collapseAll() {
+        return this.CollapseAll();
+    }
+    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.SetZoomLevel(targetScale, true);
         this.ZoomLevel = targetScale;
         this.ZoomChange.emit(targetScale);
     }
-    zoomOut() {
+    /** @deprecated Use {@link ZoomIn}. */
+    zoomIn() {
+        return this.ZoomIn();
+    }
+    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.SetZoomLevel(targetScale, true);
         this.ZoomLevel = targetScale;
         this.ZoomChange.emit(targetScale);
     }
-    setZoomLevel(scale, animated = true) {
+    /** @deprecated Use {@link ZoomOut}. */
+    zoomOut() {
+        return this.ZoomOut();
+    }
+    SetZoomLevel(scale, animated = true) {
         if (!this.svgSelection || !this.zoomBehavior || !scale)
             return;
-        const container = this.svgContainerRef?.nativeElement;
+        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);
@@ -1228,19 +1324,31 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             this.svgSelection.interrupt().call(this.zoomBehavior.transform, target);
         }
     }
-    resetZoom() {
+    /** @deprecated Use {@link SetZoomLevel}. */
+    setZoomLevel(scale, animated = true) {
+        return this.SetZoomLevel(scale, animated);
+    }
+    ResetZoom() {
         if (!this.svgSelection || !this.zoomBehavior)
             return;
-        this.onFitToViewClick();
+        this.OnFitToViewClick();
     }
-    onFitToViewClick() {
-        this.fitToScreen(false, true);
+    /** @deprecated Use {@link ResetZoom}. */
+    resetZoom() {
+        return this.ResetZoom();
+    }
+    OnFitToViewClick() {
+        this.FitToScreen(false, true);
         setTimeout(() => {
-            this.fitToScreen(false, true);
+            this.FitToScreen(false, true);
         }, 320);
     }
-    fitToScreen(immediate = false, forceAutoScale = false) {
-        if (!this.svgSelection || !this.zoomBehavior || !this.svgContainerRef?.nativeElement)
+    /** @deprecated Use {@link OnFitToViewClick}. */
+    onFitToViewClick() {
+        return this.OnFitToViewClick();
+    }
+    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)
@@ -1258,9 +1366,9 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
         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 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;
@@ -1283,19 +1391,31 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
             this.svgSelection.interrupt().transition().duration(300).ease(d3.easeCubicOut).call(this.zoomBehavior.transform, targetTransform);
         }
     }
+    /** @deprecated Use {@link FitToScreen}. */
+    fitToScreen(immediate = false, forceAutoScale = false) {
+        return this.FitToScreen(immediate, forceAutoScale);
+    }
+    ExportAsSVG() {
+        return this.SvgRef?.nativeElement ? this.SvgRef.nativeElement.outerHTML : '';
+    }
+    /** @deprecated Use {@link ExportAsSVG}. */
     exportAsSVG() {
-        return this.svgRef?.nativeElement ? this.svgRef.nativeElement.outerHTML : '';
+        return this.ExportAsSVG();
     }
-    async refresh() {
+    async Refresh() {
         await this.loadData();
     }
+    /** @deprecated Use {@link Refresh}. */
+    async refresh() {
+        return this.Refresh();
+    }
     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);
+            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) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵconditionalCreate(1, HierarchyTreeComponent_Conditional_1_Template, 4, 3, "div", 3);
@@ -1333,10 +1453,10 @@ export class HierarchyTreeComponent extends BaseAngularComponent {
 (() => { (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: i0.ChangeDetectorRef }], { SvgContainerRef: [{
             type: ViewChild,
             args: ['svgContainer', { static: false }]
-        }], svgRef: [{
+        }], SvgRef: [{
             type: ViewChild,
             args: ['svgElement', { static: false }]
         }], Config: [{