@tic-nova/ngx-interactive-org-chart 1.4.0

package/fesm2022/tic-nova-ngx-interactive-org-chart.mjs

@@ -0,0 +1,2047 @@
+import { NgStyle, NgTemplateOutlet, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injector, ElementRef, input, output, viewChild, signal, computed, effect, Component, afterNextRender, ContentChild } from '@angular/core';
+import createPanZoom from 'panzoom';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+function toggleNodeCollapse({ node, targetNode, collapse, }) {
+    if (node.id === targetNode) {
+        const newCollapse = collapse ?? !node.collapsed;
+        return {
+            ...node,
+            collapsed: newCollapse,
+            children: node.children?.map(child => setCollapseRecursively(child, newCollapse)),
+        };
+    }
+    if (node.children?.length) {
+        return {
+            ...node,
+            children: node.children.map(child => toggleNodeCollapse({ node: child, targetNode, collapse })),
+        };
+    }
+    return node;
+}
+function setCollapseRecursively(node, collapse) {
+    return {
+        ...node,
+        collapsed: collapse,
+        children: node.children?.map(child => setCollapseRecursively(child, collapse)),
+    };
+}
+function mapNodesRecursively(node, collapsed) {
+    const mappedChildren = node.children?.map(child => mapNodesRecursively(child, collapsed)) || [];
+    const descendantsCount = mappedChildren.reduce((acc, child) => acc + 1 + (child.descendantsCount ?? 0), 0);
+    return {
+        ...node,
+        id: node.id ?? crypto.randomUUID(),
+        collapsed: collapsed ?? node.collapsed ?? false,
+        hidden: node.hidden ?? false,
+        children: mappedChildren,
+        descendantsCount,
+    };
+}
+
+/**
+ * Essential CSS properties to copy for drag ghost elements.
+ */
+const GHOST_ELEMENT_STYLES = [
+    'background',
+    'background-color',
+    'background-image',
+    'background-size',
+    'background-position',
+    'background-repeat',
+    'color',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'line-height',
+    'text-align',
+    'border',
+    'border-radius',
+    'border-color',
+    'border-width',
+    'border-style',
+    'padding',
+    'box-sizing',
+    'display',
+    'flex-direction',
+    'align-items',
+    'justify-content',
+    'gap',
+    'outline',
+    'outline-color',
+    'outline-width',
+];
+/**
+ * Creates a cloned node element with copied styles for drag preview.
+ * This removes interactive elements and copies essential visual styles.
+ *
+ * @param nodeElement - The original node element to clone
+ * @returns A cloned element with copied styles
+ */
+function cloneNodeWithStyles(nodeElement) {
+    // Clone the node deeply
+    const clone = nodeElement.cloneNode(true);
+    // Remove ID and draggable to avoid conflicts
+    clone.removeAttribute('id');
+    clone.removeAttribute('draggable');
+    // Remove interactive elements
+    const collapseBtn = clone.querySelector('.collapse-btn');
+    if (collapseBtn)
+        collapseBtn.remove();
+    const dragHandle = clone.querySelector('.drag-handle');
+    if (dragHandle)
+        dragHandle.remove();
+    // Get computed styles from original
+    const computed = window.getComputedStyle(nodeElement);
+    // Apply essential visual styles to clone
+    GHOST_ELEMENT_STYLES.forEach(prop => {
+        const value = computed.getPropertyValue(prop);
+        if (value) {
+            clone.style.setProperty(prop, value, 'important');
+        }
+    });
+    // Apply styles to nested elements
+    const sourceChildren = nodeElement.querySelectorAll('*');
+    const cloneChildren = clone.querySelectorAll('*');
+    sourceChildren.forEach((sourceChild, index) => {
+        if (cloneChildren[index]) {
+            const childComputed = window.getComputedStyle(sourceChild);
+            const cloneChild = cloneChildren[index];
+            GHOST_ELEMENT_STYLES.forEach(prop => {
+                const value = childComputed.getPropertyValue(prop);
+                if (value) {
+                    cloneChild.style.setProperty(prop, value, 'important');
+                }
+            });
+        }
+    });
+    return clone;
+}
+/**
+ * Creates a ghost element to follow the touch during drag.
+ * The ghost element is wrapped in a positioned container and scaled to match the current zoom level.
+ *
+ * @param config - Configuration for creating the ghost element
+ * @returns The wrapper element and scaled dimensions
+ */
+function createTouchDragGhost(config) {
+    const { nodeElement, currentScale, touchX, touchY } = config;
+    // Get the unscaled dimensions
+    const unscaledWidth = nodeElement.offsetWidth;
+    const unscaledHeight = nodeElement.offsetHeight;
+    // Clone the node with styles using shared helper
+    const ghost = cloneNodeWithStyles(nodeElement);
+    // Calculate the actual scaled dimensions for positioning
+    const scaleFactor = currentScale * 1.05;
+    const scaledWidth = unscaledWidth * scaleFactor;
+    const scaledHeight = unscaledHeight * scaleFactor;
+    // Create wrapper for positioning
+    const wrapper = document.createElement('div');
+    wrapper.className = 'touch-drag-ghost-wrapper';
+    wrapper.style.position = 'fixed';
+    wrapper.style.pointerEvents = 'none';
+    wrapper.style.zIndex = '10000';
+    // Position wrapper so the scaled ghost is centered on the touch point
+    wrapper.style.left = touchX - scaledWidth / 2 + 'px';
+    wrapper.style.top = touchY - scaledHeight / 2 + 'px';
+    // Set ghost to unscaled dimensions, then apply the zoom scale via transform
+    ghost.style.setProperty('position', 'relative', 'important');
+    ghost.style.setProperty('width', unscaledWidth + 'px', 'important');
+    ghost.style.setProperty('height', unscaledHeight + 'px', 'important');
+    ghost.style.setProperty('margin', '0', 'important');
+    ghost.style.setProperty('opacity', '0.9', 'important');
+    ghost.style.setProperty('transform-origin', 'top left', 'important');
+    // Apply the current zoom scale to match the visible node, then apply slight scale-up for drag effect
+    ghost.style.setProperty('transform', `scale(${scaleFactor})`, 'important');
+    ghost.style.setProperty('box-shadow', '0 15px 40px rgba(0, 0, 0, 0.4)', 'important');
+    ghost.style.setProperty('cursor', 'grabbing', 'important');
+    wrapper.appendChild(ghost);
+    document.body.appendChild(wrapper);
+    return {
+        wrapper,
+        scaledWidth,
+        scaledHeight,
+    };
+}
+/**
+ * Updates the position of a touch drag ghost element wrapper.
+ *
+ * @param wrapper - The ghost wrapper element to reposition
+ * @param x - The new x coordinate
+ * @param y - The new y coordinate
+ * @param scaledWidth - The scaled width of the ghost element
+ * @param scaledHeight - The scaled height of the ghost element
+ */
+function updateTouchGhostPosition(wrapper, x, y, scaledWidth, scaledHeight) {
+    wrapper.style.left = x - scaledWidth / 2 + 'px';
+    wrapper.style.top = y - scaledHeight / 2 + 'px';
+}
+/**
+ * Creates and sets a custom drag image for desktop drag and drop.
+ * This is required for Safari to show a drag preview properly.
+ *
+ * @param event - The drag event
+ * @param nodeElement - The node element being dragged
+ * @returns Cleanup function to remove the temporary drag image
+ */
+function setDesktopDragImage(event, nodeElement) {
+    if (!event.dataTransfer)
+        return;
+    // Create a styled clone for the drag image
+    const dragImage = cloneNodeWithStyles(nodeElement);
+    dragImage.style.position = 'absolute';
+    dragImage.style.top = '-9999px';
+    dragImage.style.left = '-9999px';
+    dragImage.style.opacity = '0.8';
+    document.body.appendChild(dragImage);
+    const rect = nodeElement.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const offsetY = event.clientY - rect.top;
+    event.dataTransfer.setDragImage(dragImage, offsetX, offsetY);
+    setTimeout(() => {
+        if (document.body.contains(dragImage)) {
+            document.body.removeChild(dragImage);
+        }
+    }, 0);
+}
+
+const DEFAULT_THEME = {
+    background: 'rgba(255, 255, 255, 0.95)',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '8px',
+    shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    nodeColor: 'rgba(0, 0, 0, 0.6)',
+    viewportBackground: 'rgba(59, 130, 246, 0.2)',
+    viewportBorderColor: 'rgb(59, 130, 246)',
+    viewportBorderWidth: '2px',
+};
+const REDRAW_DEBOUNCE_MS = 100;
+const CONTENT_PADDING_RATIO = 0.9;
+const CSS_VAR_REGEX = /var\((--[^)]+)\)/;
+class MiniMapComponent {
+    #injector = inject(Injector);
+    #elementRef = inject(ElementRef);
+    panZoomInstance = input.required(...(ngDevMode ? [{ debugName: "panZoomInstance" }] : []));
+    chartContainer = input.required(...(ngDevMode ? [{ debugName: "chartContainer" }] : []));
+    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    width = input(200, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input(150, ...(ngDevMode ? [{ debugName: "height" }] : []));
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    themeOptions = input(...(ngDevMode ? [undefined, { debugName: "themeOptions" }] : []));
+    navigate = output();
+    canvasRef = viewChild('miniMapCanvas', ...(ngDevMode ? [{ debugName: "canvasRef" }] : []));
+    viewportRef = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewportRef" }] : []));
+    viewportStyle = signal({}, ...(ngDevMode ? [{ debugName: "viewportStyle" }] : []));
+    miniMapStyle = computed(() => {
+        const theme = this.themeOptions();
+        return {
+            width: `${this.width()}px`,
+            height: `${this.height()}px`,
+            backgroundColor: theme?.background ?? DEFAULT_THEME.background,
+            borderColor: theme?.borderColor ?? DEFAULT_THEME.borderColor,
+            borderRadius: theme?.borderRadius ?? DEFAULT_THEME.borderRadius,
+            boxShadow: theme?.shadow ?? DEFAULT_THEME.shadow,
+        };
+    }, ...(ngDevMode ? [{ debugName: "miniMapStyle" }] : []));
+    viewportIndicatorStyle = computed(() => {
+        const theme = this.themeOptions();
+        return {
+            ...this.viewportStyle(),
+            backgroundColor: theme?.viewportBackground ?? DEFAULT_THEME.viewportBackground,
+            borderColor: theme?.viewportBorderColor ?? DEFAULT_THEME.viewportBorderColor,
+            borderWidth: theme?.viewportBorderWidth ?? DEFAULT_THEME.viewportBorderWidth,
+        };
+    }, ...(ngDevMode ? [{ debugName: "viewportIndicatorStyle" }] : []));
+    nodeColor = computed(() => this.themeOptions()?.nodeColor ?? DEFAULT_THEME.nodeColor, ...(ngDevMode ? [{ debugName: "nodeColor" }] : []));
+    #animationFrameId = null;
+    #isDragging = false;
+    #mutationObserver = null;
+    #themeObserver = null;
+    #redrawTimeout = null;
+    constructor() {
+        this.#initializeEffects();
+        this.#setupThemeObserver();
+    }
+    ngOnDestroy() {
+        this.#cleanup();
+    }
+    onMouseDown(event) {
+        event.preventDefault();
+        this.#isDragging = true;
+        const handleMouseMove = (e) => {
+            if (this.#isDragging) {
+                this.#navigateToPoint(e);
+            }
+        };
+        const handleMouseUp = () => {
+            this.#isDragging = false;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+    #initializeEffects() {
+        effect(() => {
+            const panZoom = this.panZoomInstance();
+            panZoom ? this.#startTracking() : this.#stopTracking();
+        }, { injector: this.#injector });
+        effect(() => {
+            const container = this.chartContainer();
+            if (container) {
+                this.#setupMutationObserver(container);
+                this.#drawMiniMap();
+            }
+            else {
+                this.#disconnectMutationObserver();
+            }
+        }, { injector: this.#injector });
+        effect(() => {
+            this.themeOptions();
+            this.#scheduleRedraw();
+        }, { injector: this.#injector });
+    }
+    #setupThemeObserver() {
+        this.#themeObserver = new MutationObserver(() => this.#scheduleRedraw());
+        [document.documentElement, document.body].forEach(target => {
+            this.#themeObserver.observe(target, {
+                attributes: true,
+                attributeFilter: ['class', 'data-theme', 'data-mode'],
+            });
+        });
+    }
+    #disconnectThemeObserver() {
+        this.#themeObserver?.disconnect();
+        this.#themeObserver = null;
+    }
+    #setupMutationObserver(container) {
+        this.#disconnectMutationObserver();
+        this.#mutationObserver = new MutationObserver(() => this.#scheduleRedraw());
+        this.#mutationObserver.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class', 'style'],
+        });
+    }
+    #disconnectMutationObserver() {
+        this.#mutationObserver?.disconnect();
+        this.#mutationObserver = null;
+    }
+    #scheduleRedraw() {
+        if (this.#redrawTimeout !== null) {
+            clearTimeout(this.#redrawTimeout);
+        }
+        this.#redrawTimeout = setTimeout(() => {
+            this.#drawMiniMap();
+            this.#redrawTimeout = null;
+        }, REDRAW_DEBOUNCE_MS);
+    }
+    #startTracking() {
+        if (this.#animationFrameId !== null)
+            return;
+        const update = () => {
+            this.#updateViewport();
+            this.#animationFrameId = requestAnimationFrame(update);
+        };
+        this.#animationFrameId = requestAnimationFrame(update);
+    }
+    #stopTracking() {
+        if (this.#animationFrameId !== null) {
+            cancelAnimationFrame(this.#animationFrameId);
+            this.#animationFrameId = null;
+        }
+    }
+    #drawMiniMap() {
+        const canvas = this.canvasRef()?.nativeElement;
+        const container = this.chartContainer();
+        if (!canvas || !container)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        canvas.width = this.width();
+        canvas.height = this.height();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const contentBounds = this.#getContentBounds(container);
+        if (!contentBounds)
+            return;
+        const { scale, offsetX, offsetY } = this.#calculateMiniMapTransform(canvas, contentBounds);
+        const transform = this.#getCurrentTransform();
+        this.#drawNodes(ctx, container, contentBounds, scale, offsetX, offsetY, transform);
+    }
+    #getContentBounds(container) {
+        const nodes = container.querySelectorAll('.node-content');
+        if (nodes.length === 0)
+            return null;
+        const transform = this.#getCurrentTransform();
+        const containerRect = container.getBoundingClientRect();
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        nodes.forEach(node => {
+            const rect = node.getBoundingClientRect();
+            const relX = (rect.left - containerRect.left - transform.x) / transform.scale;
+            const relY = (rect.top - containerRect.top - transform.y) / transform.scale;
+            const width = rect.width / transform.scale;
+            const height = rect.height / transform.scale;
+            minX = Math.min(minX, relX);
+            minY = Math.min(minY, relY);
+            maxX = Math.max(maxX, relX + width);
+            maxY = Math.max(maxY, relY + height);
+        });
+        return {
+            left: minX,
+            top: minY,
+            width: maxX - minX,
+            height: maxY - minY,
+        };
+    }
+    #calculateMiniMapTransform(canvas, contentBounds) {
+        const scaleX = canvas.width / contentBounds.width;
+        const scaleY = canvas.height / contentBounds.height;
+        const scale = Math.min(scaleX, scaleY) * CONTENT_PADDING_RATIO;
+        const offsetX = (canvas.width - contentBounds.width * scale) / 2;
+        const offsetY = (canvas.height - contentBounds.height * scale) / 2;
+        return { scale, offsetX, offsetY };
+    }
+    #drawNodes(ctx, container, contentBounds, scale, offsetX, offsetY, transform) {
+        const resolvedNodeColor = this.#resolveColor(this.nodeColor());
+        ctx.fillStyle = resolvedNodeColor;
+        ctx.strokeStyle = resolvedNodeColor;
+        ctx.lineWidth = 1;
+        const nodes = container.querySelectorAll('.node-content');
+        const containerRect = container.getBoundingClientRect();
+        nodes.forEach(node => {
+            const rect = node.getBoundingClientRect();
+            const relX = (rect.left - containerRect.left - transform.x) / transform.scale;
+            const relY = (rect.top - containerRect.top - transform.y) / transform.scale;
+            const w = rect.width / transform.scale;
+            const h = rect.height / transform.scale;
+            const x = (relX - contentBounds.left) * scale + offsetX;
+            const y = (relY - contentBounds.top) * scale + offsetY;
+            const scaledW = w * scale;
+            const scaledH = h * scale;
+            ctx.fillRect(x, y, scaledW, scaledH);
+        });
+    }
+    #updateViewport() {
+        const panZoom = this.panZoomInstance();
+        const container = this.chartContainer();
+        const canvas = this.canvasRef()?.nativeElement;
+        if (!panZoom || !container || !canvas)
+            return;
+        const transform = panZoom.getTransform();
+        const contentBounds = this.#getContentBounds(container);
+        if (!contentBounds)
+            return;
+        const { scale, offsetX, offsetY } = this.#calculateMiniMapTransform(canvas, contentBounds);
+        const containerRect = container.getBoundingClientRect();
+        const viewportWidth = containerRect.width / transform.scale;
+        const viewportHeight = containerRect.height / transform.scale;
+        const viewportX = -transform.x / transform.scale - contentBounds.left;
+        const viewportY = -transform.y / transform.scale - contentBounds.top;
+        const miniViewportX = viewportX * scale + offsetX;
+        const miniViewportY = viewportY * scale + offsetY;
+        const miniViewportWidth = viewportWidth * scale;
+        const miniViewportHeight = viewportHeight * scale;
+        this.viewportStyle.set({
+            left: `${miniViewportX}px`,
+            top: `${miniViewportY}px`,
+            width: `${miniViewportWidth}px`,
+            height: `${miniViewportHeight}px`,
+        });
+    }
+    #navigateToPoint(event) {
+        const canvas = this.canvasRef()?.nativeElement;
+        const container = this.chartContainer();
+        const panZoom = this.panZoomInstance();
+        if (!canvas || !container || !panZoom)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const clickX = event.clientX - rect.left;
+        const clickY = event.clientY - rect.top;
+        const contentBounds = this.#getContentBounds(container);
+        if (!contentBounds)
+            return;
+        const { scale, offsetX, offsetY } = this.#calculateMiniMapTransform(canvas, contentBounds);
+        const contentX = (clickX - offsetX) / scale + contentBounds.left;
+        const contentY = (clickY - offsetY) / scale + contentBounds.top;
+        const transform = panZoom.getTransform();
+        const containerRect = container.getBoundingClientRect();
+        const newX = -(contentX * transform.scale - containerRect.width / 2);
+        const newY = -(contentY * transform.scale - containerRect.height / 2);
+        panZoom.moveTo(newX, newY);
+        this.navigate.emit({ x: newX, y: newY });
+    }
+    #resolveColor(color) {
+        if (!color.includes('var('))
+            return color;
+        const computedStyle = getComputedStyle(this.#elementRef.nativeElement);
+        const match = color.match(CSS_VAR_REGEX);
+        if (match) {
+            const propertyName = match[1];
+            const resolvedColor = computedStyle.getPropertyValue(propertyName).trim();
+            return resolvedColor || color;
+        }
+        return color;
+    }
+    #getCurrentTransform() {
+        const panZoom = this.panZoomInstance();
+        return panZoom?.getTransform() ?? { scale: 1, x: 0, y: 0 };
+    }
+    #cleanup() {
+        this.#stopTracking();
+        this.#disconnectMutationObserver();
+        this.#disconnectThemeObserver();
+        if (this.#redrawTimeout !== null) {
+            clearTimeout(this.#redrawTimeout);
+            this.#redrawTimeout = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MiniMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MiniMapComponent, isStandalone: true, selector: "ngx-org-chart-mini-map", inputs: { panZoomInstance: { classPropertyName: "panZoomInstance", publicName: "panZoomInstance", isSignal: true, isRequired: true, transformFunction: null }, chartContainer: { classPropertyName: "chartContainer", publicName: "chartContainer", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["miniMapCanvas"], descendants: true, isSignal: true }, { propertyName: "viewportRef", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <div\n    class=\"mini-map-container\"\n    [class]=\"'position-' + position()\"\n    [ngStyle]=\"miniMapStyle()\"\n    (mousedown)=\"onMouseDown($event)\"\n  >\n    <canvas #miniMapCanvas class=\"mini-map-canvas\"></canvas>\n    <div #viewport class=\"viewport-indicator\" [ngStyle]=\"viewportIndicatorStyle()\"></div>\n  </div>\n}\n", styles: [":host{display:contents}.mini-map-container{position:absolute;z-index:1000;border:2px solid;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s ease}.mini-map-container:hover{opacity:1!important}.mini-map-container.position-top-left{top:16px;left:16px}.mini-map-container.position-top-right{top:16px;right:16px}.mini-map-container.position-bottom-left{bottom:16px;left:16px}.mini-map-container.position-bottom-right{bottom:16px;right:16px}.mini-map-canvas{display:block;width:100%;height:100%}.viewport-indicator{position:absolute;border:2px solid;pointer-events:none;border-radius:2px;transition:all .1s ease-out;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MiniMapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-org-chart-mini-map', standalone: true, imports: [NgStyle], template: "@if (visible()) {\n  <div\n    class=\"mini-map-container\"\n    [class]=\"'position-' + position()\"\n    [ngStyle]=\"miniMapStyle()\"\n    (mousedown)=\"onMouseDown($event)\"\n  >\n    <canvas #miniMapCanvas class=\"mini-map-canvas\"></canvas>\n    <div #viewport class=\"viewport-indicator\" [ngStyle]=\"viewportIndicatorStyle()\"></div>\n  </div>\n}\n", styles: [":host{display:contents}.mini-map-container{position:absolute;z-index:1000;border:2px solid;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s ease}.mini-map-container:hover{opacity:1!important}.mini-map-container.position-top-left{top:16px;left:16px}.mini-map-container.position-top-right{top:16px;right:16px}.mini-map-container.position-bottom-left{bottom:16px;left:16px}.mini-map-container.position-bottom-right{bottom:16px;right:16px}.mini-map-canvas{display:block;width:100%;height:100%}.viewport-indicator{position:absolute;border:2px solid;pointer-events:none;border-radius:2px;transition:all .1s ease-out;box-sizing:border-box}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panZoomInstance: [{ type: i0.Input, args: [{ isSignal: true, alias: "panZoomInstance", required: true }] }], chartContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartContainer", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], canvasRef: [{ type: i0.ViewChild, args: ['miniMapCanvas', { isSignal: true }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
+
+const DEFAULT_THEME_OPTIONS = {
+    node: {
+        background: '#ffffff',
+        color: '#4a4a4a',
+        activeOutlineColor: '#3b82f6',
+        outlineWidth: '2px',
+        shadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+        outlineColor: '#d1d5db',
+        highlightShadowColor: 'rgba(121, 59, 246, 0)',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        containerSpacing: '20px',
+        activeColor: '#3b82f6',
+        maxWidth: 'auto',
+        minWidth: 'auto',
+        maxHeight: 'auto',
+        minHeight: 'auto',
+        dragOverOutlineColor: '#3b82f6',
+    },
+    connector: {
+        color: '#d1d5db',
+        activeColor: '#3b82f6',
+        borderRadius: '10px',
+        width: '1.5px',
+    },
+    collapseButton: {
+        size: '20px',
+        borderColor: '#d1d5db',
+        borderRadius: '0.25rem',
+        color: '#4a4a4a',
+        background: '#ffffff',
+        hoverColor: '#3b82f6',
+        hoverBackground: '#f3f4f6',
+        hoverShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        hoverTransformScale: '1.05',
+        focusOutline: '2px solid #3b82f6',
+        countFontSize: '0.75rem',
+    },
+    container: {
+        background: 'transparent',
+        border: 'none',
+    },
+    miniMap: {
+        background: 'rgba(255, 255, 255, 0.95)',
+        borderColor: 'rgba(0, 0, 0, 0.15)',
+        borderRadius: '8px',
+        shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+        nodeColor: 'rgba(0, 0, 0, 0.6)',
+        viewportBackground: 'rgba(59, 130, 246, 0.2)',
+        viewportBorderColor: 'rgb(59, 130, 246)',
+        viewportBorderWidth: '2px',
+    },
+};
+
+// Constants
+const RESET_DELAY = 300; // ms
+const TOUCH_DRAG_THRESHOLD = 10; // pixels
+const AUTO_PAN_EDGE_THRESHOLD = 0.1; // 10% of container dimensions
+const AUTO_PAN_SPEED = 15; // pixels per frame
+class NgxInteractiveOrgChart {
+    #elementRef = inject(ElementRef);
+    #injector = inject(Injector);
+    /**
+     * Optional template for a custom node.
+     * When provided, this template will be used to render each node in the org chart.
+     *
+     * @remarks
+     * The template context includes:
+     * - `$implicit`: The node data
+     * - `node`: The node data (alternative accessor)
+     *
+     * @example
+     * ```html
+     * <ngx-interactive-org-chart>
+     *   <ng-template #nodeTemplate let-node="node">
+     *     <div class="custom-node">
+     *       <h3>{{ node.data?.name }}</h3>
+     *       <p>{{ node.data?.age }}</p>
+     *     </div>
+     *   </ng-template>
+     * </ngx-interactive-org-chart>
+     * ```
+     */
+    customNodeTemplate;
+    /**
+     * Optional template for a custom drag handle.
+     * When provided, only this element will be draggable instead of the entire node.
+     *
+     * @remarks
+     * The template context includes:
+     * - `$implicit`: The node data
+     * - `node`: The node data (alternative accessor)
+     *
+     * @example
+     * ```html
+     * <ngx-interactive-org-chart [draggable]="true">
+     *   <ng-template #dragHandleTemplate let-node="node">
+     *     <button class="drag-handle" title="Drag to move">
+     *       <svg><!-- Drag icon --></svg>
+     *     </button>
+     *   </ng-template>
+     * </ngx-interactive-org-chart>
+     * ```
+     */
+    customDragHandleTemplate;
+    panZoomContainer = viewChild.required('panZoomContainer');
+    orgChartContainer = viewChild.required('orgChartContainer');
+    container = viewChild.required('container');
+    /**
+     * The data for the org chart.
+     */
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * The initial zoom level for the chart.
+     */
+    initialZoom = input(...(ngDevMode ? [undefined, { debugName: "initialZoom" }] : []));
+    /**
+     * The minimum zoom level for the chart
+     */
+    minZoom = input(0.1, ...(ngDevMode ? [{ debugName: "minZoom" }] : []));
+    /**
+     * The maximum zoom level for the chart.
+     */
+    maxZoom = input(5, ...(ngDevMode ? [{ debugName: "maxZoom" }] : []));
+    /**
+     * The speed at which the chart zooms in/out on wheel or pinch.
+     */
+    zoomSpeed = input(1, ...(ngDevMode ? [{ debugName: "zoomSpeed" }] : []));
+    /**
+     * The speed at which the chart zooms in/out on double-click.
+     */
+    zoomDoubleClickSpeed = input(2, ...(ngDevMode ? [{ debugName: "zoomDoubleClickSpeed" }] : []));
+    /**
+     * Whether the nodes can be collapsed/expanded.
+     */
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    /**
+     * The CSS class to apply to each node element.
+     */
+    nodeClass = input(...(ngDevMode ? [undefined, { debugName: "nodeClass" }] : []));
+    /**
+     * If set to `true`, all the nodes will be initially collapsed.
+     */
+    initialCollapsed = input(...(ngDevMode ? [undefined, { debugName: "initialCollapsed" }] : []));
+    /**
+     * Whether to enable RTL (right-to-left) layout.
+     */
+    isRtl = input(...(ngDevMode ? [undefined, { debugName: "isRtl" }] : []));
+    /**
+     * The layout direction of the org chart tree.
+     * - 'vertical': Traditional top-to-bottom tree layout
+     * - 'horizontal': Left-to-right tree layout
+     */
+    layout = input('vertical', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Whether to focus on the node when it is collapsed and focus on its children when it is expanded.
+     */
+    focusOnCollapseOrExpand = input(false, ...(ngDevMode ? [{ debugName: "focusOnCollapseOrExpand" }] : []));
+    /**
+     * Whether to display the count of children for each node on expand/collapse button.
+     */
+    displayChildrenCount = input(true, ...(ngDevMode ? [{ debugName: "displayChildrenCount" }] : []));
+    /**
+     * The ratio of the node's width to the viewport's width when highlighting.
+     */
+    highlightZoomNodeWidthRatio = input(0.3, ...(ngDevMode ? [{ debugName: "highlightZoomNodeWidthRatio" }] : []));
+    /**
+     * The ratio of the node's height to the viewport's height when highlighting.
+     */
+    highlightZoomNodeHeightRatio = input(0.4, ...(ngDevMode ? [{ debugName: "highlightZoomNodeHeightRatio" }] : []));
+    /**
+     * Whether to enable drag and drop functionality for nodes.
+     * When enabled, nodes can be dragged and dropped onto other nodes.
+     *
+     * @remarks
+     * By default, the entire node is draggable. To use a custom drag handle instead,
+     * provide a `dragHandleTemplate` template with the selector `#dragHandleTemplate`.
+     *
+     * @example
+     * ```html
+     * <ngx-interactive-org-chart [draggable]="true">
+     *   <!-- Custom drag handle template -->
+     *   <ng-template #dragHandleTemplate let-node="node">
+     *     <span class="drag-handle">⋮⋮</span>
+     *   </ng-template>
+     * </ngx-interactive-org-chart>
+     * ```
+     */
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
+    /**
+     * Predicate function to determine if a specific node can be dragged.
+     *
+     * @param node - The node to check
+     * @returns true if the node can be dragged, false otherwise
+     *
+     * @example
+     * ```typescript
+     * // Prevent CEO node from being dragged
+     * canDragNode = (node: OrgChartNode) => node.data?.role !== 'CEO';
+     * ```
+     */
+    canDragNode = input(...(ngDevMode ? [undefined, { debugName: "canDragNode" }] : []));
+    /**
+     * Predicate function to determine if a node can accept drops.
+     *
+     * @param draggedNode - The node being dragged
+     * @param targetNode - The potential drop target
+     * @returns true if the drop is allowed, false otherwise
+     *
+     * @example
+     * ```typescript
+     * // Don't allow employees to have subordinates
+     * canDropNode = (dragged: OrgChartNode, target: OrgChartNode) => {
+     *   return target.data?.type !== 'Employee';
+     * };
+     * ```
+     */
+    canDropNode = input(...(ngDevMode ? [undefined, { debugName: "canDropNode" }] : []));
+    /**
+     * The distance in pixels from the viewport edge to trigger auto-panning during drag.
+     * The threshold is calculated automatically as 10% of the container dimensions for better responsiveness across different screen sizes.
+     * @default 0.1
+     */
+    dragEdgeThreshold = input(AUTO_PAN_EDGE_THRESHOLD, ...(ngDevMode ? [{ debugName: "dragEdgeThreshold" }] : []));
+    /**
+     * The speed of auto-panning in pixels per frame during drag.
+     * @default 15
+     */
+    dragAutoPanSpeed = input(AUTO_PAN_SPEED, ...(ngDevMode ? [{ debugName: "dragAutoPanSpeed" }] : []));
+    /**
+     * The minimum zoom level for the chart when highlighting a node.
+     */
+    highlightZoomMinimum = input(0.8, ...(ngDevMode ? [{ debugName: "highlightZoomMinimum" }] : []));
+    /**
+     * The theme options for the org chart.
+     * This allows customization of the chart's appearance, including node styles, connector styles, and
+     * other visual elements.
+     */
+    themeOptions = input(...(ngDevMode ? [undefined, { debugName: "themeOptions" }] : []));
+    /**
+     * Whether to show the mini map navigation tool.
+     * @default false
+     */
+    showMiniMap = input(false, ...(ngDevMode ? [{ debugName: "showMiniMap" }] : []));
+    /**
+     * Position of the mini map on the screen.
+     * @default 'bottom-right'
+     */
+    miniMapPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "miniMapPosition" }] : []));
+    /**
+     * Width of the mini map in pixels.
+     * @default 200
+     */
+    miniMapWidth = input(200, ...(ngDevMode ? [{ debugName: "miniMapWidth" }] : []));
+    /**
+     * Height of the mini map in pixels.
+     * @default 150
+     */
+    miniMapHeight = input(150, ...(ngDevMode ? [{ debugName: "miniMapHeight" }] : []));
+    /**
+     * Event emitted when a node is dropped onto another node.
+     * Provides the dragged node and the target node.
+     */
+    nodeDrop = output();
+    /**
+     * Event emitted when a node drag operation starts.
+     */
+    nodeDragStart = output();
+    /**
+     * Event emitted when a node drag operation ends.
+     */
+    nodeDragEnd = output();
+    defaultThemeOptions = DEFAULT_THEME_OPTIONS;
+    finalThemeOptions = computed(() => {
+        const themeOptions = this.themeOptions();
+        return {
+            node: {
+                ...this.defaultThemeOptions.node,
+                ...themeOptions?.node,
+            },
+            connector: {
+                ...this.defaultThemeOptions.connector,
+                ...themeOptions?.connector,
+            },
+            collapseButton: {
+                ...this.defaultThemeOptions.collapseButton,
+                ...themeOptions?.collapseButton,
+            },
+            container: {
+                ...this.defaultThemeOptions.container,
+                ...themeOptions?.container,
+            },
+            miniMap: {
+                ...this.defaultThemeOptions.miniMap,
+                ...themeOptions?.miniMap,
+            },
+        };
+    }, ...(ngDevMode ? [{ debugName: "finalThemeOptions" }] : []));
+    nodes = signal(null, ...(ngDevMode ? [{ debugName: "nodes" }] : []));
+    scale = signal(0, ...(ngDevMode ? [{ debugName: "scale" }] : []));
+    draggedNode = signal(null, ...(ngDevMode ? [{ debugName: "draggedNode" }] : []));
+    dragOverNode = signal(null, ...(ngDevMode ? [{ debugName: "dragOverNode" }] : []));
+    currentDragOverElement = signal(null, ...(ngDevMode ? [{ debugName: "currentDragOverElement" }] : []));
+    autoPanInterval = null;
+    keyboardListener = null;
+    touchDragState = {
+        active: false,
+        node: null,
+        startX: 0,
+        startY: 0,
+        currentX: 0,
+        currentY: 0,
+        dragThreshold: TOUCH_DRAG_THRESHOLD,
+        ghostElement: null,
+        ghostScaledWidth: 0,
+        ghostScaledHeight: 0,
+    };
+    panZoomInstance = null;
+    containerElement = computed(() => {
+        return this.container()?.nativeElement || null;
+    }, ...(ngDevMode ? [{ debugName: "containerElement" }] : []));
+    /**
+     * A computed property that returns the current scale of the org chart.
+     * @returns {number} The current scale of the org chart.
+     */
+    getScale = computed(() => this.scale(), ...(ngDevMode ? [{ debugName: "getScale" }] : []));
+    /**
+     * A computed property that flattens the org chart nodes into a single array.
+     * It recursively traverses the nodes and their children, returning a flat array of OrgChartNode<T>.
+     * This is useful for operations that require a single list of all nodes, such as searching or displaying all nodes in a list.
+     * @returns {OrgChartNode<T>[]} An array of all nodes in the org chart, flattened from the hierarchical structure.
+     */
+    flattenedNodes = computed(() => {
+        const nodes = this.nodes();
+        if (!nodes)
+            return [];
+        const flatten = (node) => {
+            const children = node.children?.flatMap(flatten) ||
+                [];
+            return [node, ...children];
+        };
+        return nodes ? flatten(nodes) : [];
+    }, ...(ngDevMode ? [{ debugName: "flattenedNodes" }] : []));
+    setNodes = effect(() => {
+        const data = this.data();
+        const initialCollapsed = this.initialCollapsed();
+        if (data) {
+            this.nodes.set(mapNodesRecursively(data, initialCollapsed));
+        }
+    }, ...(ngDevMode ? [{ debugName: "setNodes" }] : []));
+    ngAfterViewInit() {
+        this.initiatePanZoom();
+        this.disableChildDragging();
+    }
+    /**
+     * Initializes the pan-zoom functionality for the org chart.
+     * This method creates a new panZoom instance and sets it up with the container element.
+     * It also ensures that any existing panZoom instance is disposed of before creating a new one.
+     */
+    initiatePanZoom() {
+        if (this.panZoomInstance) {
+            this.panZoomInstance.dispose();
+        }
+        const container = this.panZoomContainer()?.nativeElement;
+        this.panZoomInstance = createPanZoom(container, {
+            initialZoom: this.getFitScale(),
+            initialX: container.offsetWidth / 2,
+            initialY: container.offsetHeight / 2,
+            enableTextSelection: false,
+            minZoom: this.minZoom(),
+            maxZoom: this.maxZoom(),
+            zoomSpeed: this.zoomSpeed(),
+            smoothScroll: true,
+            zoomDoubleClickSpeed: this.zoomDoubleClickSpeed(),
+        });
+        this.calculateScale();
+        this.panZoomInstance?.on('zoom', e => {
+            this.calculateScale();
+        });
+    }
+    /**
+     * Zooms in of the org chart.
+     * @param {Object} options - Options for zooming.
+     * @param {number} [options.by=10] - The percentage to zoom in or out by.
+     * @param {boolean} [options.relative=true] - Whether to zoom relative to the current zoom level.
+     * If true, zooms in by a percentage of the current zoom level.
+     * If false, zooms to an absolute scale.
+     */
+    zoomIn({ by, relative } = { relative: true }) {
+        this.zoom({ type: 'in', by, relative });
+    }
+    /**
+     * Zooms out of the org chart.
+     * @param {Object} options - Options for zooming.
+     * @param {number} [options.by=10] - The percentage to zoom in or out by.
+     * @param {boolean} [options.relative=true] - Whether to zoom relative to the current zoom level.
+     * If true, zooms out by a percentage of the current zoom level.
+     * If false, zooms to an absolute scale.
+     */
+    zoomOut({ by, relative } = { relative: true }) {
+        this.zoom({ type: 'out', by, relative });
+    }
+    /**
+     * Highlights a specific node in the org chart and pans to it.
+     * @param {string} nodeId - The ID of the node to highlight.
+     */
+    highlightNode(nodeId) {
+        this.toggleCollapseAll(false);
+        setTimeout(() => {
+            const nodeElement = this.#elementRef?.nativeElement.querySelector(`#${this.getNodeId(nodeId)}`);
+            this.panZoomToNode({
+                nodeElement,
+            });
+        }, 200);
+    }
+    /**
+     * Pans the view of the org chart.
+     * @param x The horizontal offset to pan to.
+     * @param y The vertical offset to pan to.
+     * @param smooth Whether to animate the panning.
+     * @returns void
+     */
+    pan(x, y, smooth) {
+        const container = this.orgChartContainer()?.nativeElement;
+        if (!container || !this.panZoomInstance) {
+            return;
+        }
+        const containerRect = container.getBoundingClientRect();
+        const panZoomRect = this.panZoomContainer()?.nativeElement.getBoundingClientRect();
+        const transformedX = x - containerRect.x + panZoomRect.x;
+        const transformedY = y - containerRect.y + panZoomRect.y;
+        if (smooth) {
+            this.panZoomInstance.smoothMoveTo(transformedX, transformedY);
+        }
+        else {
+            this.panZoomInstance.moveTo(transformedX, transformedY);
+        }
+    }
+    /**
+     * Resets the pan position of the org chart to center it horizontally and vertically.
+     * This method calculates the center position based on the container's dimensions
+     * and the hosting element's dimensions, then moves the panZoom instance to that position.
+     */
+    resetPan() {
+        const container = this.panZoomContainer()?.nativeElement;
+        if (!container || !this.panZoomInstance) {
+            return;
+        }
+        const containerRect = container.getBoundingClientRect();
+        const hostingElement = this.#elementRef.nativeElement;
+        const windowWidth = hostingElement.getBoundingClientRect().width;
+        const windowHeight = hostingElement.getBoundingClientRect().height;
+        let x = (-1 * containerRect.width) / 2 + windowWidth / 2;
+        if (this.layout() === 'horizontal') {
+            if (this.isRtl()) {
+                x = windowWidth - containerRect.width;
+            }
+            else {
+                x = 0;
+            }
+        }
+        const y = (-1 * containerRect.height) / 2 + windowHeight / 2;
+        this.panZoomInstance?.smoothMoveTo(x, y);
+    }
+    /**
+     * Resets the zoom level of the org chart to fit the content within the container.
+     * This method calculates the optimal scale to fit the content and applies it.
+     * @param {number} [padding=20] - Optional padding around the content when calculating the fit scale.
+     */
+    resetZoom(padding = 20) {
+        if (!this.panZoomInstance) {
+            return;
+        }
+        const container = this.panZoomContainer()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        this.zoomOut({ by: this.getFitScale(padding) });
+    }
+    /**
+     * Resets both the pan position and zoom level of the org chart.
+     * This method first resets the pan position, then resets the zoom level after a short delay.
+     * @param {number} [padding=20] - Optional padding around the content when calculating the fit scale.
+     */
+    resetPanAndZoom(padding = 20) {
+        this.resetPan();
+        setTimeout(() => {
+            this.resetZoom(padding);
+        }, RESET_DELAY);
+    }
+    /**
+     * Toggles the collapse state of all nodes in the org chart.
+     * If `collapse` is provided, it will collapse or expand all nodes accordingly.
+     * If not provided, it will toggle the current state of the root node.
+     */
+    toggleCollapseAll(collapse) {
+        const nodes = this.nodes();
+        if (nodes?.children?.length && this.collapsible()) {
+            this.onToggleCollapse({ node: nodes, collapse });
+        }
+    }
+    /**
+     * Toggles the collapse state of a specific node in the org chart.
+     * If `collapse` is provided, it will collapse or expand the node accordingly.
+     * If not provided, it will toggle the current state of the node.
+     * @param {Object} options - Options for toggling collapse.
+     * @param {OrgChartNode<T>} options.node - The node to toggle.
+     * @param {boolean} [options.collapse] - Whether to collapse or expand the node.
+     * @param {boolean} [options.highlightNode=false] - Whether to highlight the node after toggling.
+     * @param {boolean} [options.playAnimation=false] - Whether to play animation when highlighting.
+     */
+    onToggleCollapse({ node, collapse, highlightNode = false, playAnimation = false, }) {
+        if (!this.collapsible()) {
+            return;
+        }
+        const nodeId = node.id;
+        const wasCollapsed = node.collapsed;
+        const nodes = toggleNodeCollapse({
+            node: this.nodes(),
+            targetNode: nodeId,
+            collapse,
+        });
+        this.nodes.set(nodes);
+        this.panZoomInstance?.resume();
+        if (highlightNode) {
+            setTimeout(() => {
+                const nodeElement = this.#elementRef?.nativeElement.querySelector(`#${wasCollapsed
+                    ? this.getNodeChildrenId(nodeId)
+                    : this.getNodeId(nodeId)}`);
+                this.panZoomToNode({
+                    nodeElement,
+                    skipZoom: true,
+                    playAnimation,
+                });
+            }, 200); // allow the DOM finish animation before highlighting
+        }
+    }
+    zoom({ type, by = 10, relative, }) {
+        const containerEl = this.panZoomContainer()?.nativeElement;
+        const containerRect = containerEl.getBoundingClientRect();
+        const hostElement = this.#elementRef?.nativeElement;
+        const hostElementRect = hostElement.getBoundingClientRect();
+        const { scale } = this.panZoomInstance?.getTransform() ?? {
+            scale: 1,
+        };
+        let centerX = containerRect.width / 2 + containerRect.x - hostElementRect.x;
+        const centerY = containerRect.height / 2 + containerRect.y - hostElementRect.y;
+        if (this.layout() === 'horizontal') {
+            if (this.isRtl()) {
+                centerX = containerRect.width + containerRect.x - hostElementRect.x;
+            }
+            else {
+                centerX = 0;
+            }
+        }
+        const newScale = relative
+            ? type === 'in'
+                ? scale * (1 + by / 100)
+                : scale / (1 + by / 100)
+            : by;
+        this.panZoomInstance?.smoothZoomAbs(centerX, centerY, newScale);
+    }
+    panZoomToNode({ nodeElement, skipZoom, playAnimation = true, }) {
+        const container = this.panZoomContainer()?.nativeElement;
+        if (!container || !nodeElement || !this.panZoomInstance) {
+            return;
+        }
+        const highlightedElements = container.querySelectorAll('.highlighted');
+        highlightedElements.forEach(el => {
+            el.classList.remove('highlighted');
+        });
+        this.panZoomInstance?.pause();
+        this.panZoomInstance?.resume();
+        setTimeout(() => {
+            const hostElementRect = this.#elementRef.nativeElement.getBoundingClientRect();
+            const nodeRect1 = nodeElement.getBoundingClientRect();
+            const clientX = nodeRect1.x - nodeRect1.width / 2 - hostElementRect.x;
+            const clientY = nodeRect1.y - nodeRect1.height / 2 - hostElementRect.y;
+            if (!skipZoom) {
+                const dynamicZoom = this.calculateOptimalZoom(nodeElement);
+                this.panZoomInstance?.smoothZoomAbs(clientX, clientY, dynamicZoom);
+            }
+        }, 10);
+        setTimeout(() => {
+            const containerRect = container.getBoundingClientRect();
+            const nodeRect = nodeElement.getBoundingClientRect();
+            const hostingElement = this.#elementRef.nativeElement;
+            const windowWidth = hostingElement.getBoundingClientRect().width;
+            const windowHeight = hostingElement.getBoundingClientRect().height;
+            const transformedNodeX = -1 * (nodeRect.x - containerRect.x);
+            const transformedNodeY = -1 * (nodeRect.y - containerRect.y);
+            const windowCenterX = windowWidth / 2;
+            const windowCenterY = windowHeight / 2;
+            const x = transformedNodeX + windowCenterX - nodeRect.width / 2;
+            const y = transformedNodeY + windowCenterY - nodeRect.height / 2;
+            this.panZoomInstance?.smoothMoveTo(x, y);
+            if (playAnimation) {
+                nodeElement.classList.add('highlighted');
+                setTimeout(() => {
+                    nodeElement.classList.remove('highlighted');
+                }, 2300);
+            }
+        }, 200); // allow some time for the zoom to take effect
+    }
+    getNodeId(nodeId) {
+        return `node-${nodeId}`;
+    }
+    getNodeChildrenId(nodeId) {
+        return `node-children-${nodeId}`;
+    }
+    /**
+     * Handles the drag start event for a node.
+     * @param event - The drag event
+     * @param node - The node being dragged
+     */
+    onDragStart(event, node) {
+        if (!this.draggable())
+            return;
+        const canDrag = this.canDragNode();
+        if (canDrag && !canDrag(node)) {
+            event.preventDefault();
+            return;
+        }
+        this.draggedNode.set(node);
+        this.nodeDragStart.emit(node);
+        this.panZoomInstance?.pause();
+        const target = event.target;
+        const nodeContent = target.closest('.node-content');
+        if (event.dataTransfer && nodeContent) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', node.id?.toString() || '');
+            // Set custom drag image for Safari compatibility
+            setDesktopDragImage(event, nodeContent);
+        }
+        if (nodeContent) {
+            setTimeout(() => {
+                nodeContent.classList.add('dragging');
+            }, 0);
+        }
+        this.setupKeyboardListener();
+    }
+    /**
+     * Sets up keyboard event listener for drag cancellation.
+     */
+    setupKeyboardListener() {
+        this.removeKeyboardListener();
+        this.keyboardListener = (event) => {
+            if (event.key === 'Escape' && this.draggedNode()) {
+                this.cancelDrag();
+            }
+        };
+        document.addEventListener('keydown', this.keyboardListener);
+    }
+    /**
+     * Removes the keyboard event listener.
+     */
+    removeKeyboardListener() {
+        if (this.keyboardListener) {
+            document.removeEventListener('keydown', this.keyboardListener);
+            this.keyboardListener = null;
+        }
+    }
+    cancelDrag() {
+        if (!this.draggedNode())
+            return;
+        this.stopAutoPan();
+        this.panZoomInstance?.resume();
+        const allNodes = this.#elementRef.nativeElement.querySelectorAll('.node-content');
+        allNodes.forEach(node => {
+            node.classList.remove('drag-over');
+            node.classList.remove('dragging');
+            node.classList.remove('drag-not-allowed');
+        });
+        this.draggedNode.set(null);
+        this.dragOverNode.set(null);
+        this.removeKeyboardListener();
+        // Clean up touch drag state if active
+        if (this.touchDragState.active) {
+            this.removeTouchGhostElement();
+            this.removeTouchListeners();
+            this.resetTouchDragState();
+        }
+    }
+    /**
+     * Handles the drag end event for a node.
+     * @param event - The drag event
+     * @param node - The node that was being dragged
+     */
+    onDragEnd(event, node) {
+        if (!this.draggable())
+            return;
+        this.nodeDragEnd.emit(node);
+        this.draggedNode.set(null);
+        this.dragOverNode.set(null);
+        this.currentDragOverElement.set(null);
+        this.stopAutoPan();
+        this.removeKeyboardListener();
+        this.panZoomInstance?.resume();
+        const target = event.target;
+        const nodeContent = target.closest('.node-content');
+        if (nodeContent) {
+            nodeContent.classList.remove('dragging');
+        }
+        const allNodes = this.#elementRef.nativeElement.querySelectorAll('.node-content');
+        allNodes.forEach(node => node.classList.remove('drag-over'));
+    }
+    /**
+     * Handles the drag over event for a node.
+     * @param event - The drag event
+     * @param node - The node being dragged over
+     */
+    onDragOver(event, node) {
+        if (!this.draggable() || !this.draggedNode())
+            return;
+        event.preventDefault();
+        const draggedNode = this.draggedNode();
+        if (!draggedNode)
+            return;
+        if (this.isNodeDescendant(node, draggedNode)) {
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'none';
+            }
+            return;
+        }
+        const canDrop = this.canDropNode();
+        if (canDrop && !canDrop(draggedNode, node)) {
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = 'none';
+            }
+            return;
+        }
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        this.dragOverNode.set(node);
+    }
+    /**
+     * Handles the drag over event on the container for auto-panning.
+     * @param event - The drag event
+     */
+    onContainerDragOver(event) {
+        if (!this.draggable() || !this.draggedNode())
+            return;
+        event.preventDefault();
+        this.handleAutoPan(event);
+    }
+    /**
+     * Handles the drag enter event for a node.
+     * @param event - The drag event
+     * @param node - The node being entered
+     */
+    onDragEnter(event, node) {
+        if (!this.draggable() || !this.draggedNode())
+            return;
+        const draggedNode = this.draggedNode();
+        if (!draggedNode)
+            return;
+        if (this.isNodeDescendant(node, draggedNode)) {
+            return;
+        }
+        const canDrop = this.canDropNode();
+        if (canDrop && !canDrop(draggedNode, node)) {
+            return;
+        }
+        const target = event.target;
+        const nodeElement = target.closest('.node-content');
+        if (nodeElement) {
+            // Remove highlight from previous element
+            if (this.currentDragOverElement() &&
+                this.currentDragOverElement() !== nodeElement) {
+                this.currentDragOverElement()?.classList.remove('drag-over');
+            }
+            // Add highlight to current element
+            nodeElement.classList.add('drag-over');
+            this.currentDragOverElement.set(nodeElement);
+        }
+    }
+    /**
+     * Handles the drag leave event for a node.
+     * @param event - The drag event
+     */
+    onDragLeave(event) {
+        if (!this.draggable())
+            return;
+        const target = event.target;
+        const nodeElement = target.closest('.node-content');
+        // Only remove highlight if we're leaving the entire node-content element
+        // Check if the event is leaving to go outside the node element
+        if (nodeElement && this.currentDragOverElement() === nodeElement) {
+            const rect = nodeElement.getBoundingClientRect();
+            const isOutside = event.clientX < rect.left ||
+                event.clientX > rect.right ||
+                event.clientY < rect.top ||
+                event.clientY > rect.bottom;
+            if (isOutside) {
+                nodeElement.classList.remove('drag-over');
+                this.currentDragOverElement.set(null);
+            }
+        }
+    }
+    /**
+     * Handles the drop event for a node.
+     * @param event - The drag event
+     * @param targetNode - The node where the drop occurred
+     */
+    onDrop(event, targetNode) {
+        if (!this.draggable())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const draggedNode = this.draggedNode();
+        if (!draggedNode)
+            return;
+        if (this.isNodeDescendant(targetNode, draggedNode)) {
+            return;
+        }
+        const canDrop = this.canDropNode();
+        if (canDrop && !canDrop(draggedNode, targetNode)) {
+            return;
+        }
+        this.nodeDrop.emit({
+            draggedNode,
+            targetNode,
+        });
+        const target = event.target;
+        const nodeElement = target.closest('.node-content');
+        if (nodeElement) {
+            nodeElement.classList.remove('drag-over');
+        }
+        this.currentDragOverElement.set(null);
+        this.dragOverNode.set(null);
+        this.stopAutoPan();
+        this.panZoomInstance?.resume();
+        afterNextRender(() => {
+            this.disableChildDragging();
+        }, {
+            injector: this.#injector,
+        });
+    }
+    /**
+     * Checks if a node is a descendant of another node.
+     * @param node - The node to check
+     * @param potentialAncestor - The potential ancestor node
+     * @returns true if node is a descendant of potentialAncestor
+     */
+    isNodeDescendant(node, potentialAncestor) {
+        if (node.id === potentialAncestor.id) {
+            return true;
+        }
+        if (!potentialAncestor.children?.length) {
+            return false;
+        }
+        return potentialAncestor.children.some(child => this.isNodeDescendant(node, child));
+    }
+    /**
+     * Handles the touch start event for drag on mobile devices.
+     * @param event - The touch event
+     * @param node - The node being touched
+     */
+    onTouchStart(event, node) {
+        if (!this.draggable())
+            return;
+        const canDrag = this.canDragNode();
+        if (canDrag && !canDrag(node)) {
+            return;
+        }
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        this.touchDragState.node = node;
+        this.touchDragState.startX = touch.clientX;
+        this.touchDragState.startY = touch.clientY;
+        this.touchDragState.currentX = touch.clientX;
+        this.touchDragState.currentY = touch.clientY;
+        this.touchDragState.active = false;
+        document.addEventListener('touchmove', this.onTouchMoveDocument, {
+            passive: false,
+        });
+        document.addEventListener('touchend', this.onTouchEndDocument);
+        document.addEventListener('touchcancel', this.onTouchEndDocument);
+    }
+    /**
+     * Handles touch move event during drag on mobile devices.
+     */
+    onTouchMoveDocument = (event) => {
+        if (!this.touchDragState.node)
+            return;
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        this.touchDragState.currentX = touch.clientX;
+        this.touchDragState.currentY = touch.clientY;
+        if (!this.touchDragState.active) {
+            const deltaX = Math.abs(touch.clientX - this.touchDragState.startX);
+            const deltaY = Math.abs(touch.clientY - this.touchDragState.startY);
+            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            if (distance >= this.touchDragState.dragThreshold) {
+                this.touchDragState.active = true;
+                this.draggedNode.set(this.touchDragState.node);
+                this.nodeDragStart.emit(this.touchDragState.node);
+                this.setupKeyboardListener();
+                this.panZoomInstance?.pause();
+                this.createTouchGhostElement(this.touchDragState.node);
+                const nodeElement = this.getNodeElement(this.touchDragState.node);
+                if (nodeElement) {
+                    nodeElement.classList.add('dragging');
+                }
+            }
+        }
+        if (this.touchDragState.active) {
+            event.preventDefault();
+            this.updateTouchGhostPosition(touch.clientX, touch.clientY);
+            this.handleTouchAutoPan(touch.clientX, touch.clientY);
+            const elementUnderTouch = this.getElementUnderTouch(touch.clientX, touch.clientY);
+            if (elementUnderTouch) {
+                const nodeElement = elementUnderTouch.closest('.node-content');
+                if (nodeElement && nodeElement.id) {
+                    const nodeId = this.getNodeIdFromElement(nodeElement);
+                    const node = this.findNodeById(nodeId);
+                    if (node) {
+                        this.handleTouchDragOver(node);
+                    }
+                    else {
+                        this.clearDragOverState();
+                    }
+                }
+                else {
+                    this.clearDragOverState();
+                }
+            }
+            else {
+                this.clearDragOverState();
+            }
+        }
+    };
+    /**
+     * Handles touch end event during drag on mobile devices.
+     */
+    onTouchEndDocument = (event) => {
+        if (!this.touchDragState.node)
+            return;
+        if (this.touchDragState.active) {
+            let targetNode = null;
+            const touch = event.changedTouches[0] ||
+                (event.touches.length > 0 ? event.touches[0] : null);
+            if (touch) {
+                const elementUnderTouch = this.getElementUnderTouch(touch.clientX, touch.clientY);
+                if (elementUnderTouch) {
+                    const nodeElement = elementUnderTouch.closest('.node-content');
+                    if (nodeElement && nodeElement.id) {
+                        const nodeId = this.getNodeIdFromElement(nodeElement);
+                        targetNode = this.findNodeById(nodeId);
+                    }
+                }
+            }
+            const draggedNode = this.draggedNode();
+            if (targetNode && draggedNode && targetNode.id !== draggedNode.id) {
+                const isDescendant = this.isNodeDescendant(targetNode, draggedNode);
+                const canDrop = this.canDropNode();
+                const dropAllowed = !isDescendant && (!canDrop || canDrop(draggedNode, targetNode));
+                if (dropAllowed) {
+                    this.nodeDrop.emit({
+                        draggedNode,
+                        targetNode,
+                    });
+                }
+            }
+            this.removeTouchGhostElement();
+            this.nodeDragEnd.emit(this.touchDragState.node);
+            const nodeElement = this.getNodeElement(this.touchDragState.node);
+            if (nodeElement) {
+                nodeElement.classList.remove('dragging');
+            }
+            this.clearDragOverState();
+            this.draggedNode.set(null);
+            this.stopAutoPan();
+            this.removeKeyboardListener();
+            this.panZoomInstance?.resume();
+        }
+        this.resetTouchDragState();
+        this.removeTouchListeners();
+    };
+    /**
+     * Resets the touch drag state to its initial values.
+     */
+    resetTouchDragState() {
+        this.touchDragState = {
+            active: false,
+            node: null,
+            startX: 0,
+            startY: 0,
+            currentX: 0,
+            currentY: 0,
+            dragThreshold: TOUCH_DRAG_THRESHOLD,
+            ghostElement: null,
+            ghostScaledWidth: 0,
+            ghostScaledHeight: 0,
+        };
+    }
+    /**
+     * Removes touch event listeners from the document.
+     */
+    removeTouchListeners() {
+        document.removeEventListener('touchmove', this.onTouchMoveDocument);
+        document.removeEventListener('touchend', this.onTouchEndDocument);
+        document.removeEventListener('touchcancel', this.onTouchEndDocument);
+    }
+    /**
+     * Creates a ghost element to follow the touch during drag.
+     */
+    createTouchGhostElement(node) {
+        const nodeElement = this.getNodeElement(node);
+        if (!nodeElement)
+            return;
+        const currentScale = this.panZoomInstance?.getTransform()?.scale ?? 1;
+        const result = createTouchDragGhost({
+            nodeElement,
+            currentScale,
+            touchX: this.touchDragState.currentX,
+            touchY: this.touchDragState.currentY,
+        });
+        this.touchDragState.ghostElement = result.wrapper;
+        this.touchDragState.ghostScaledWidth = result.scaledWidth;
+        this.touchDragState.ghostScaledHeight = result.scaledHeight;
+    }
+    /**
+     * Updates the position of the touch ghost element.
+     */
+    updateTouchGhostPosition(x, y) {
+        if (!this.touchDragState.ghostElement)
+            return;
+        updateTouchGhostPosition(this.touchDragState.ghostElement, x, y, this.touchDragState.ghostScaledWidth, this.touchDragState.ghostScaledHeight);
+    }
+    /**
+     * Removes the touch ghost element.
+     */
+    removeTouchGhostElement() {
+        if (this.touchDragState.ghostElement) {
+            this.touchDragState.ghostElement.remove();
+            this.touchDragState.ghostElement = null;
+        }
+    }
+    /**
+     * Gets the element under a touch point.
+     */
+    getElementUnderTouch(x, y) {
+        const ghost = this.touchDragState.ghostElement;
+        const originalDisplay = ghost ? ghost.style.display : '';
+        if (ghost) {
+            ghost.style.display = 'none';
+        }
+        const element = document.elementFromPoint(x, y);
+        if (ghost) {
+            ghost.style.display = originalDisplay;
+        }
+        return element;
+    }
+    /**
+     * Handles touch drag over a node.
+     */
+    handleTouchDragOver(node) {
+        const draggedNode = this.draggedNode();
+        if (!draggedNode)
+            return;
+        if (node.id === draggedNode.id) {
+            this.clearDragOverState();
+            return;
+        }
+        if (this.isNodeDescendant(node, draggedNode)) {
+            this.clearDragOverState();
+            const nodeElement = this.getNodeElement(node);
+            if (nodeElement) {
+                nodeElement.classList.add('drag-not-allowed');
+            }
+            return;
+        }
+        const canDrop = this.canDropNode();
+        if (canDrop && !canDrop(draggedNode, node)) {
+            this.clearDragOverState();
+            const nodeElement = this.getNodeElement(node);
+            if (nodeElement) {
+                nodeElement.classList.add('drag-not-allowed');
+            }
+            return;
+        }
+        if (this.dragOverNode() !== node) {
+            this.clearDragOverState();
+            this.dragOverNode.set(node);
+            const nodeElement = this.getNodeElement(node);
+            if (nodeElement) {
+                nodeElement.classList.add('drag-over');
+            }
+        }
+    }
+    /**
+     * Clears all drag-over visual states.
+     */
+    clearDragOverState() {
+        const allNodes = this.#elementRef.nativeElement.querySelectorAll('.node-content');
+        allNodes.forEach(node => {
+            node.classList.remove('drag-over');
+            node.classList.remove('drag-not-allowed');
+        });
+        this.dragOverNode.set(null);
+    }
+    /**
+     * Gets a node element by node data.
+     */
+    getNodeElement(node) {
+        if (!node.id)
+            return null;
+        const nodeId = this.getNodeId(node.id);
+        return this.#elementRef.nativeElement.querySelector(`#${nodeId}`);
+    }
+    /**
+     * Gets node ID from a DOM element.
+     */
+    getNodeIdFromElement(element) {
+        const id = element.id.replace('node-', '');
+        const numId = parseInt(id, 10);
+        return isNaN(numId) ? id : numId;
+    }
+    /**
+     * Finds a node by ID in the tree.
+     */
+    findNodeById(id) {
+        const nodes = this.nodes();
+        if (!nodes)
+            return null;
+        const search = (node) => {
+            if (node.id === id || node.id?.toString() === id.toString()) {
+                return node;
+            }
+            if (node.children) {
+                for (const child of node.children) {
+                    const found = search(child);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        return search(nodes);
+    }
+    /**
+     * Handles auto-panning during touch drag.
+     */
+    handleTouchAutoPan(x, y) {
+        const hostElement = this.#elementRef.nativeElement;
+        const rect = hostElement.getBoundingClientRect();
+        const touchX = x - rect.left;
+        const touchY = y - rect.top;
+        const thresholdX = rect.width * this.dragEdgeThreshold();
+        const thresholdY = rect.height * this.dragEdgeThreshold();
+        let panX = 0;
+        let panY = 0;
+        if (touchX < thresholdX) {
+            panX = this.dragAutoPanSpeed();
+        }
+        else if (touchX > rect.width - thresholdX) {
+            panX = -this.dragAutoPanSpeed();
+        }
+        if (touchY < thresholdY) {
+            panY = this.dragAutoPanSpeed();
+        }
+        else if (touchY > rect.height - thresholdY) {
+            panY = -this.dragAutoPanSpeed();
+        }
+        if (panX !== 0 || panY !== 0) {
+            this.startAutoPan(panX, panY);
+        }
+        else {
+            this.stopAutoPan();
+        }
+    }
+    handleAutoPan(event) {
+        const hostElement = this.#elementRef.nativeElement;
+        const rect = hostElement.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        const thresholdX = rect.width * this.dragEdgeThreshold();
+        const thresholdY = rect.height * this.dragEdgeThreshold();
+        let panX = 0;
+        let panY = 0;
+        if (mouseX < thresholdX) {
+            panX = this.dragAutoPanSpeed();
+        }
+        else if (mouseX > rect.width - thresholdX) {
+            panX = -this.dragAutoPanSpeed();
+        }
+        if (mouseY < thresholdY) {
+            panY = this.dragAutoPanSpeed();
+        }
+        else if (mouseY > rect.height - thresholdY) {
+            panY = -this.dragAutoPanSpeed();
+        }
+        if (panX !== 0 || panY !== 0) {
+            this.startAutoPan(panX, panY);
+        }
+        else {
+            this.stopAutoPan();
+        }
+    }
+    startAutoPan(panX, panY) {
+        this.stopAutoPan();
+        this.autoPanInterval = window.setInterval(() => {
+            if (!this.panZoomInstance)
+                return;
+            const transform = this.panZoomInstance.getTransform();
+            const newX = transform.x + panX;
+            const newY = transform.y + panY;
+            this.panZoomInstance.moveTo(newX, newY);
+        }, 16); // ~60fps
+    }
+    stopAutoPan() {
+        if (this.autoPanInterval !== null) {
+            clearInterval(this.autoPanInterval);
+            this.autoPanInterval = null;
+        }
+    }
+    calculateScale() {
+        const transform = this.panZoomInstance?.getTransform();
+        const currentScale = transform?.scale ?? 0;
+        const minZoom = this.minZoom();
+        const maxZoom = this.maxZoom();
+        if (minZoom === maxZoom) {
+            this.scale.set(0);
+            return;
+        }
+        const ratio = (currentScale - minZoom) / (maxZoom - minZoom);
+        const scalePercentage = Math.round(ratio * 10000) / 100;
+        this.scale.set(scalePercentage);
+    }
+    getFitScale(padding = 20) {
+        const hostingElement = this.#elementRef?.nativeElement;
+        const contentEl = this.orgChartContainer()?.nativeElement;
+        if (!hostingElement || !contentEl)
+            return 1;
+        const containerRect = hostingElement.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+        const containerHeight = containerRect.height;
+        // Use actual unscaled dimensions of content
+        const contentWidth = contentEl.clientWidth;
+        const contentHeight = contentEl.clientHeight;
+        // Optional padding around the content
+        const availableWidth = containerWidth - padding * 2;
+        const availableHeight = containerHeight - padding * 2;
+        const scaleX = availableWidth / contentWidth;
+        const scaleY = availableHeight / contentHeight;
+        // Never upscale beyond 1
+        const fitScale = Math.min(scaleX, scaleY, 1);
+        return fitScale;
+    }
+    /**
+     * Calculates the optimal zoom level for highlighting a specific node.
+     * The zoom is calculated to ensure the node is appropriately sized relative to the container,
+     * while respecting the minimum and maximum zoom constraints.
+     * @param {HTMLElement} nodeElement - The node element to calculate zoom for.
+     * @returns {number} The optimal zoom level for the node.
+     */
+    calculateOptimalZoom(nodeElement) {
+        const hostingElement = this.#elementRef?.nativeElement;
+        if (!hostingElement || !nodeElement) {
+            return 1.5; // fallback to original value
+        }
+        const containerRect = hostingElement.getBoundingClientRect();
+        const nodeRect = nodeElement.getBoundingClientRect();
+        // Calculate the current transform to get actual node dimensions
+        const currentTransform = this.panZoomInstance?.getTransform();
+        const currentScale = currentTransform?.scale || 1;
+        // Get the actual unscaled node dimensions
+        const actualNodeWidth = nodeRect.width / currentScale;
+        const actualNodeHeight = nodeRect.height / currentScale;
+        // Use configurable ratios for target node size
+        const targetNodeWidthRatio = this.highlightZoomNodeWidthRatio();
+        const targetNodeHeightRatio = this.highlightZoomNodeHeightRatio();
+        // Calculate zoom levels needed for width and height constraints
+        const zoomForWidth = (containerRect.width * targetNodeWidthRatio) / actualNodeWidth;
+        const zoomForHeight = (containerRect.height * targetNodeHeightRatio) / actualNodeHeight;
+        // Use the smaller zoom to ensure the node fits well in both dimensions
+        let optimalZoom = Math.min(zoomForWidth, zoomForHeight);
+        // Apply zoom constraints
+        const minZoom = this.minZoom();
+        const maxZoom = this.maxZoom();
+        optimalZoom = Math.max(minZoom, Math.min(maxZoom, optimalZoom));
+        // Ensure a configurable minimum reasonable zoom for visibility
+        const minimumZoom = this.highlightZoomMinimum();
+        optimalZoom = Math.max(minimumZoom, optimalZoom);
+        return optimalZoom;
+    }
+    ngOnDestroy() {
+        this.stopAutoPan();
+        this.removeKeyboardListener();
+        this.panZoomInstance?.dispose();
+    }
+    /**
+     * Disables native dragging on child elements (images, SVGs, anchors) within nodes.
+     * This prevents child elements from interfering with the node's drag functionality.
+     * Called automatically via effect when nodes change.
+     */
+    disableChildDragging() {
+        const hostingElement = this.#elementRef?.nativeElement;
+        if (!hostingElement)
+            return;
+        const draggableChildren = hostingElement.querySelectorAll('.node-content-wrapper img, .node-content-wrapper a, .node-content-wrapper svg');
+        draggableChildren.forEach((element) => {
+            element.setAttribute('draggable', 'false');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxInteractiveOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgxInteractiveOrgChart, isStandalone: true, selector: "ngx-interactive-org-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, initialZoom: { classPropertyName: "initialZoom", publicName: "initialZoom", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomSpeed: { classPropertyName: "zoomSpeed", publicName: "zoomSpeed", isSignal: true, isRequired: false, transformFunction: null }, zoomDoubleClickSpeed: { classPropertyName: "zoomDoubleClickSpeed", publicName: "zoomDoubleClickSpeed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, nodeClass: { classPropertyName: "nodeClass", publicName: "nodeClass", isSignal: true, isRequired: false, transformFunction: null }, initialCollapsed: { classPropertyName: "initialCollapsed", publicName: "initialCollapsed", isSignal: true, isRequired: false, transformFunction: null }, isRtl: { classPropertyName: "isRtl", publicName: "isRtl", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, focusOnCollapseOrExpand: { classPropertyName: "focusOnCollapseOrExpand", publicName: "focusOnCollapseOrExpand", isSignal: true, isRequired: false, transformFunction: null }, displayChildrenCount: { classPropertyName: "displayChildrenCount", publicName: "displayChildrenCount", isSignal: true, isRequired: false, transformFunction: null }, highlightZoomNodeWidthRatio: { classPropertyName: "highlightZoomNodeWidthRatio", publicName: "highlightZoomNodeWidthRatio", isSignal: true, isRequired: false, transformFunction: null }, highlightZoomNodeHeightRatio: { classPropertyName: "highlightZoomNodeHeightRatio", publicName: "highlightZoomNodeHeightRatio", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, canDragNode: { classPropertyName: "canDragNode", publicName: "canDragNode", isSignal: true, isRequired: false, transformFunction: null }, canDropNode: { classPropertyName: "canDropNode", publicName: "canDropNode", isSignal: true, isRequired: false, transformFunction: null }, dragEdgeThreshold: { classPropertyName: "dragEdgeThreshold", publicName: "dragEdgeThreshold", isSignal: true, isRequired: false, transformFunction: null }, dragAutoPanSpeed: { classPropertyName: "dragAutoPanSpeed", publicName: "dragAutoPanSpeed", isSignal: true, isRequired: false, transformFunction: null }, highlightZoomMinimum: { classPropertyName: "highlightZoomMinimum", publicName: "highlightZoomMinimum", isSignal: true, isRequired: false, transformFunction: null }, themeOptions: { classPropertyName: "themeOptions", publicName: "themeOptions", isSignal: true, isRequired: false, transformFunction: null }, showMiniMap: { classPropertyName: "showMiniMap", publicName: "showMiniMap", isSignal: true, isRequired: false, transformFunction: null }, miniMapPosition: { classPropertyName: "miniMapPosition", publicName: "miniMapPosition", isSignal: true, isRequired: false, transformFunction: null }, miniMapWidth: { classPropertyName: "miniMapWidth", publicName: "miniMapWidth", isSignal: true, isRequired: false, transformFunction: null }, miniMapHeight: { classPropertyName: "miniMapHeight", publicName: "miniMapHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeDrop: "nodeDrop", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd" }, host: { properties: { "style.--node-background": "finalThemeOptions().node!.background", "style.--node-color": "finalThemeOptions().node!.color", "style.--node-shadow": "finalThemeOptions().node!.shadow", "style.--node-outline-color": "finalThemeOptions().node!.outlineColor", "style.--node-outline-width": "finalThemeOptions().node!.outlineWidth", "style.--node-active-outline-color": "finalThemeOptions().node!.activeOutlineColor", "style.--node-highlight-shadow-color": "finalThemeOptions().node!.highlightShadowColor", "style.--node-padding": "finalThemeOptions().node!.padding", "style.--node-border-radius": "finalThemeOptions().node!.borderRadius", "style.--node-active-color": "finalThemeOptions().node!.activeColor", "style.--node-max-width": "finalThemeOptions().node!.maxWidth", "style.--node-min-width": "finalThemeOptions().node!.minWidth", "style.--node-max-height": "finalThemeOptions().node!.maxHeight", "style.--node-min-height": "finalThemeOptions().node!.minHeight", "style.--node-drag-over-outline-color": "finalThemeOptions().node!.dragOverOutlineColor", "style.--connector-color": "finalThemeOptions().connector!.color", "style.--connector-active-color": "finalThemeOptions().connector!.activeColor", "style.--connector-border-radius": "finalThemeOptions().connector!.borderRadius", "style.--node-container-spacing": "finalThemeOptions().node!.containerSpacing", "style.--connector-width": "finalThemeOptions().connector!.width", "style.--collapse-button-size": "finalThemeOptions().collapseButton!.size", "style.--collapse-button-border-color": "finalThemeOptions().collapseButton!.borderColor", "style.--collapse-button-border-radius": "finalThemeOptions().collapseButton!.borderRadius", "style.--collapse-button-color": "finalThemeOptions().collapseButton!.color", "style.--collapse-button-background": "finalThemeOptions().collapseButton!.background", "style.--collapse-button-hover-color": "finalThemeOptions().collapseButton!.hoverColor", "style.--collapse-button-hover-background": "finalThemeOptions().collapseButton!.hoverBackground", "style.--collapse-button-hover-shadow": "finalThemeOptions().collapseButton!.hoverShadow", "style.--collapse-button-hover-transform-scale": "finalThemeOptions().collapseButton!.hoverTransformScale", "style.--collapse-button-focus-outline": "finalThemeOptions().collapseButton!.focusOutline", "style.--collapse-button-count-font-size": "finalThemeOptions().collapseButton!.countFontSize", "style.--container-background": "finalThemeOptions().container!.background", "style.--container-border": "finalThemeOptions().container!.border", "attr.data-layout": "layout()" } }, queries: [{ propertyName: "customNodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true }, { propertyName: "customDragHandleTemplate", first: true, predicate: ["dragHandleTemplate"], descendants: true }], viewQueries: [{ propertyName: "panZoomContainer", first: true, predicate: ["panZoomContainer"], descendants: true, isSignal: true }, { propertyName: "orgChartContainer", first: true, predicate: ["orgChartContainer"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  class=\"org-chart-container\"\n  #container\n  [class.rtl]=\"isRtl()\"\n  (dragover)=\"onContainerDragOver($event)\"\n>\n  <section class=\"org-chart\" #panZoomContainer>\n    @if (nodes()?.id) {\n      <ul class=\"node-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"nodeTemplate\"\n          [ngTemplateOutletContext]=\"{ node: nodes() }\"\n        ></ng-container>\n      </ul>\n    }\n  </section>\n\n  <!-- Mini Map -->\n  @if (showMiniMap()) {\n    <ngx-org-chart-mini-map\n      [panZoomInstance]=\"panZoomInstance\"\n      [chartContainer]=\"containerElement()\"\n      [position]=\"miniMapPosition()\"\n      [width]=\"miniMapWidth()\"\n      [height]=\"miniMapHeight()\"\n      [themeOptions]=\"finalThemeOptions().miniMap\"\n    />\n  }\n</section>\n\n<ng-template #nodeTemplate let-node=\"node\">\n  <li class=\"org-node\" [class.collapsed]=\"node.collapsed\" #orgChartContainer>\n    <a\n      [ngClass]=\"[node?.nodeClass ?? '', nodeClass() ?? '', 'node-content']\"\n      [ngStyle]=\"node.style\"\n      [id]=\"getNodeId(node.id)\"\n      [attr.aria-expanded]=\"node.children?.length ? !node.collapsed : null\"\n      [attr.aria-label]=\"\n        node.name + (node.children?.length ? (node.collapsed ? ' (collapsed)' : ' (expanded)') : '')\n      \"\n      [attr.draggable]=\"draggable() && !customDragHandleTemplate ? true : null\"\n      (dragstart)=\"customDragHandleTemplate ? null : onDragStart($event, node)\"\n      (dragend)=\"customDragHandleTemplate ? null : onDragEnd($event, node)\"\n      (dragover)=\"onDragOver($event, node)\"\n      (dragenter)=\"onDragEnter($event, node)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event, node)\"\n      (touchstart)=\"customDragHandleTemplate ? null : onTouchStart($event, node)\"\n    >\n      <div class=\"node-content-wrapper\">\n        @if (customNodeTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"customNodeTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: node,\n              node: node,\n            }\"\n          ></ng-container>\n        } @else {\n          <span>{{ node.name }}</span>\n        }\n      </div>\n      @if (customDragHandleTemplate && draggable()) {\n        <span\n          class=\"drag-handle\"\n          [attr.draggable]=\"true\"\n          (dragstart)=\"onDragStart($event, node)\"\n          (dragend)=\"onDragEnd($event, node)\"\n          (touchstart)=\"onTouchStart($event, node)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"customDragHandleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: node,\n              node: node,\n            }\"\n          ></ng-container>\n        </span>\n      }\n      @if (collapsible() && node.children?.length) {\n        <button\n          class=\"collapse-btn\"\n          (click)=\"onToggleCollapse({ node, highlightNode: focusOnCollapseOrExpand() })\"\n          [class.collapsed]=\"node.collapsed\"\n          (mouseenter)=\"panZoomInstance?.pause()\"\n          (mousewheel)=\"panZoomInstance?.resume()\"\n          (mouseleave)=\"panZoomInstance?.resume()\"\n          (pointerenter)=\"panZoomInstance?.pause()\"\n          (pointerleave)=\"panZoomInstance?.resume()\"\n          [attr.aria-label]=\"(node.collapsed ? 'Expand' : 'Collapse') + ' ' + node.name\"\n          type=\"button\"\n        >\n          @if (displayChildrenCount()) {\n            <small class=\"children-count\">{{ node.descendantsCount }}</small>\n          }\n          <svg fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n      }\n    </a>\n\n    @if (node.children?.length && !node.hidden && !node.collapsed) {\n      <ul\n        class=\"node-container\"\n        [id]=\"getNodeChildrenId(node.id)\"\n        [class.collapsed]=\"node.collapsed\"\n        [class.instant-animation]=\"true\"\n        [attr.aria-hidden]=\"node.collapsed\"\n        @toggleNode\n      >\n        @for (child of node.children; track child.id) {\n          @if (!child.hidden) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate\"\n              [ngTemplateOutletContext]=\"{\n                node: child,\n                nodeTemplate: nodeTemplate,\n              }\"\n            ></ng-container>\n          }\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--collapse-duration: .3s;--base-delay: .1s;--animation-duration: .5s;cursor:grab}:host:active{cursor:grabbing}:host[data-layout=horizontal] .org-chart{min-width:100%}:host[data-layout=horizontal] .org-chart:first-child{display:flex}:host[data-layout=horizontal] .org-chart:first-child .node-content{align-self:center}:host[data-layout=horizontal] .org-chart:first-child .org-node{display:flex;justify-content:flex-start}:host[data-layout=horizontal] .org-chart .node-container{padding-inline-start:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2);padding-block-start:0;min-width:auto;margin:0;display:flex;flex-direction:column}:host[data-layout=horizontal] .org-chart .node-container .node-container{overflow:hidden;display:flex;flex-direction:column;margin:0;min-width:auto}:host[data-layout=horizontal] .org-chart .node-container .node-container:before{inset-inline-start:0;inset-block-start:50%;border-block-start:var(--connector-width) solid var(--connector-color);height:0;width:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2);animation:lineAppearX var(--animation-duration) ease-out forwards}:host[data-layout=horizontal] .org-chart .org-node{justify-content:flex-start;overflow:visible}:host[data-layout=horizontal] .org-chart .org-node:before,:host[data-layout=horizontal] .org-chart .org-node:after{inset-inline-start:0;inset-block-end:50%;border-inline-start:var(--connector-width) solid var(--connector-color);border-inline-end:0;height:50%;width:var(--node-container-spacing);animation:lineAppearY var(--animation-duration) ease-out forwards}:host[data-layout=horizontal] .org-chart .org-node:after{inset-block-end:auto;inset-block-start:50%;border-block-start:var(--connector-width) solid var(--connector-color)}:host[data-layout=horizontal] .org-chart .org-node:before{border-block-start:none}:host[data-layout=horizontal] .org-chart .org-node:only-child{padding-inline-start:.125rem;padding-block-start:var(--node-container-spacing)}:host[data-layout=horizontal] .org-chart .org-node:only-child:before,:host[data-layout=horizontal] .org-chart .org-node:only-child:after{display:none}:host[data-layout=horizontal] .org-chart .org-node:first-child:before{border:0 none}:host[data-layout=horizontal] .org-chart .org-node:first-child:after{border-end-start-radius:0;border-start-start-radius:var(--connector-border-radius);border-block-start:var(--connector-width) solid var(--connector-color)}:host[data-layout=horizontal] .org-chart .org-node:last-child:after{border:0 none}:host[data-layout=horizontal] .org-chart .org-node:last-child:before{border-block-end:var(--connector-width) solid var(--connector-color);border-block-start:none;border-end-start-radius:var(--connector-border-radius);border-start-end-radius:0}:host[data-layout=horizontal] .org-chart .node-content{white-space:nowrap}:host[data-layout=horizontal] .org-chart .collapse-btn{inset-inline-end:calc(-1 * var(--collapse-button-size) / 2);inset-block-end:unset;inset-block-start:50%;inset-inline-start:unset;transform:translateY(-50%);flex-direction:column-reverse;justify-content:center}:host[data-layout=horizontal] .org-chart .collapse-btn svg{transition:transform var(--collapse-duration) ease;transform:rotate(-90deg)}:host[data-layout=horizontal] .org-chart .collapse-btn.collapsed svg{transform:rotate(90deg)}:host[data-layout=horizontal] .org-chart .collapse-btn .children-count{padding-inline-start:0}:host[data-layout=horizontal] .rtl .org-chart .collapse-btn{inset-inline-start:calc(-1 * var(--collapse-button-size) / 2);inset-inline-end:unset}.org-chart{text-align:center;min-width:100%;width:max-content;scroll-behavior:smooth;border:var(--container-border);background:var(--container-background);cursor:grab}.org-chart:active{cursor:grabbing}.org-chart-container{display:flex;min-height:100%;max-height:100%;width:100%;overflow:hidden;position:relative}.org-chart .node-container{display:flex;flex-wrap:nowrap;justify-content:center;padding-block-start:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2);padding-inline-start:0;position:relative;opacity:1;transition:max-height var(--collapse-duration) ease,opacity var(--collapse-duration) ease,padding var(--collapse-duration) ease,width var(--collapse-duration) ease;box-sizing:border-box;margin:0 auto;min-width:0}.org-chart .node-container.collapsed{max-height:0;opacity:0;padding-block-start:0}.org-chart .node-container:first-child{padding-block-start:.5rem;margin-block:0}.org-chart .node-container .node-container:before{content:\"\";position:absolute;inset-block-start:0;inset-inline-start:50%;border-inline-start:var(--connector-width) solid var(--connector-color);width:0;height:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2 + var(--connector-width));opacity:0;animation:lineAppearY var(--animation-duration) ease-out forwards;animation-delay:calc(var(--base-delay) + .3s);transition:border-color .5s}.org-chart .org-node{display:inline-table;text-align:center;list-style-type:none;position:relative;padding:var(--node-container-spacing);transition:.5s;flex-shrink:0;overflow:hidden}.org-chart .org-node.removing{opacity:0;transform:translateY(1.25rem) scale(.95);transition:.5s}.org-chart .org-node:before,.org-chart .org-node:after{content:\"\";position:absolute;inset-block-start:0;inset-inline-end:50%;border-block-start:var(--connector-width) solid var(--connector-color);width:51%;height:var(--node-container-spacing);opacity:0;animation:lineAppearX var(--animation-duration) ease-out forwards;animation-delay:calc(var(--base-delay) + .2s);transition:border-color .5s}.org-chart .org-node:after{inset-inline-end:auto;inset-inline-start:50%;border-inline-start:var(--connector-width) solid var(--connector-color)}.org-chart .org-node:only-child{padding-block-start:.125rem}.org-chart .org-node:only-child:before,.org-chart .org-node:only-child:after{display:none}.org-chart .org-node:first-child:before{border:0 none}.org-chart .org-node:first-child:after{border-start-start-radius:var(--connector-border-radius);border-inline-start:var(--connector-width) solid var(--connector-color)}.org-chart .org-node:last-child:after{border:0 none}.org-chart .org-node:last-child:before{border-inline-end:var(--connector-width) solid var(--connector-color);border-start-end-radius:var(--connector-border-radius)}.org-chart .org-node .node-content{max-width:var(--node-max-width);max-height:var(--node-max-height);min-width:var(--node-min-width);min-height:var(--node-min-height);background:var(--node-background);color:var(--node-color);box-shadow:var(--node-shadow);padding:var(--node-padding);position:relative;display:inline-grid;border-radius:var(--node-border-radius);text-decoration:none;transition:.5s;outline:var(--node-outline-width) solid var(--node-outline-color);z-index:1;box-sizing:content-box}.org-chart .org-node .node-content .node-content-wrapper{display:contents}.org-chart .org-node .node-content .node-content-wrapper img,.org-chart .org-node .node-content .node-content-wrapper svg{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.org-chart .org-node .node-content.highlighted{animation:pulse 1.5s infinite}.org-chart .org-node .node-content.dragging{opacity:.5;cursor:grabbing}.org-chart .org-node .node-content.drag-over{outline:2px dashed var(--node-drag-over-outline-color);background-color:color-mix(in srgb,var(--node-drag-over-outline-color) 10%,var(--node-background))}.org-chart .org-node .node-content.drag-not-allowed{cursor:not-allowed!important}.org-chart .org-node .node-content[draggable=true]{cursor:move}.org-chart .org-node .node-content .drag-handle{cursor:move;display:inline-flex;align-items:center;justify-content:center}.org-chart .org-node .node-content .drag-handle:active{cursor:grabbing}.org-chart .org-node .node-content:hover{outline:var(--node-outline-width) solid var(--node-active-outline-color)}.org-chart .org-node .node-content:hover+.node-container .node-content{outline:var(--node-outline-width) solid var(--node-active-outline-color)}.org-chart .org-node .node-content:hover+.node-container:before{border-color:var(--connector-active-color)}.org-chart .org-node .node-content:hover+.node-container .org-node:before,.org-chart .org-node .node-content:hover+.node-container .org-node:after{border-color:var(--connector-active-color)}.org-chart .org-node .node-content:hover+.node-container .node-container:before{border-color:var(--connector-active-color)}.org-chart .collapse-btn{all:unset;direction:ltr;display:flex;align-items:center;justify-content:center;color:var(--collapse-button-color);background:var(--collapse-button-background);border:.0625rem solid var(--collapse-button-border-color);border-radius:var(--collapse-button-border-radius);position:absolute;inset-block-end:calc(-1 * var(--collapse-button-size) / 2);inset-inline-start:50%;transform:translate(-50%);z-index:2;cursor:pointer;transition:transform var(--collapse-duration) ease,box-shadow var(--collapse-duration) ease}.org-chart .collapse-btn svg{transition:transform var(--collapse-duration) ease;width:var(--collapse-button-size);height:var(--collapse-button-size)}.org-chart .collapse-btn.collapsed svg{transform:rotate(180deg)}.org-chart .collapse-btn .children-count{padding-inline-start:.25rem;font-size:var(--collapse-button-count-font-size)}.org-chart .collapse-btn:hover{transform:translate(-50%) scale(var(--collapse-button-hover-transform-scale));box-shadow:var(--collapse-button-hover-shadow);color:var(--collapse-button-hover-color);background:var(--collapse-button-hover-background)}.org-chart .collapse-btn:focus-visible{outline:var(--collapse-button-focus-outline);outline-offset:.0625rem}@keyframes lineAppearX{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes lineAppearY{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.org-chart{--base-delay: 0ms;--animation-duration: 0ms;--collapse-duration: 0ms}.org-chart .node-container{transition:none}.org-chart .node-container .node-container:before{opacity:1;animation:none}.org-chart .collapse-btn exc-icon{transition:none}.org-chart .org-node{opacity:1;transform:none;animation:none}.org-chart .org-node:before,.org-chart .org-node:after{opacity:1;animation:none}}@keyframes pulse{0%{box-shadow:0 0}70%{box-shadow:0 0 0 10px var(--node-highlight-shadow-color)}to{box-shadow:0 0 0 0 var(--node-highlight-shadow-color)}}:root .touch-drag-ghost-wrapper{transition:none!important;animation:none!important}:root .touch-drag-ghost-wrapper *{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}:root .touch-drag-ghost-wrapper .collapse-btn,:root .touch-drag-ghost-wrapper .drag-handle{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MiniMapComponent, selector: "ngx-org-chart-mini-map", inputs: ["panZoomInstance", "chartContainer", "position", "width", "height", "visible", "themeOptions"], outputs: ["navigate"] }], animations: [
+            trigger('toggleNode', [
+                transition(':enter', [
+                    style({ width: '0', height: '0', opacity: 0, transform: 'scale(0.8)' }),
+                    animate('300ms ease-out', style({ width: '*', height: '*', opacity: 1, transform: 'scale(1)' })),
+                ]),
+                transition(':leave', [
+                    style({ width: '*', height: '*' }),
+                    animate('300ms ease-out', style({
+                        width: '0',
+                        height: '0',
+                        opacity: 0,
+                        transform: 'scale(0.8)',
+                    })),
+                ]),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxInteractiveOrgChart, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ngx-interactive-org-chart', imports: [NgTemplateOutlet, NgClass, NgStyle, MiniMapComponent], animations: [
+                        trigger('toggleNode', [
+                            transition(':enter', [
+                                style({ width: '0', height: '0', opacity: 0, transform: 'scale(0.8)' }),
+                                animate('300ms ease-out', style({ width: '*', height: '*', opacity: 1, transform: 'scale(1)' })),
+                            ]),
+                            transition(':leave', [
+                                style({ width: '*', height: '*' }),
+                                animate('300ms ease-out', style({
+                                    width: '0',
+                                    height: '0',
+                                    opacity: 0,
+                                    transform: 'scale(0.8)',
+                                })),
+                            ]),
+                        ]),
+                    ], host: {
+                        '[style.--node-background]': 'finalThemeOptions().node!.background',
+                        '[style.--node-color]': 'finalThemeOptions().node!.color',
+                        '[style.--node-shadow]': 'finalThemeOptions().node!.shadow',
+                        '[style.--node-outline-color]': 'finalThemeOptions().node!.outlineColor',
+                        '[style.--node-outline-width]': 'finalThemeOptions().node!.outlineWidth',
+                        '[style.--node-active-outline-color]': 'finalThemeOptions().node!.activeOutlineColor',
+                        '[style.--node-highlight-shadow-color]': 'finalThemeOptions().node!.highlightShadowColor',
+                        '[style.--node-padding]': 'finalThemeOptions().node!.padding',
+                        '[style.--node-border-radius]': 'finalThemeOptions().node!.borderRadius',
+                        '[style.--node-active-color]': 'finalThemeOptions().node!.activeColor',
+                        '[style.--node-max-width]': 'finalThemeOptions().node!.maxWidth',
+                        '[style.--node-min-width]': 'finalThemeOptions().node!.minWidth',
+                        '[style.--node-max-height]': 'finalThemeOptions().node!.maxHeight',
+                        '[style.--node-min-height]': 'finalThemeOptions().node!.minHeight',
+                        '[style.--node-drag-over-outline-color]': 'finalThemeOptions().node!.dragOverOutlineColor',
+                        '[style.--connector-color]': 'finalThemeOptions().connector!.color',
+                        '[style.--connector-active-color]': 'finalThemeOptions().connector!.activeColor',
+                        '[style.--connector-border-radius]': 'finalThemeOptions().connector!.borderRadius',
+                        '[style.--node-container-spacing]': 'finalThemeOptions().node!.containerSpacing',
+                        '[style.--connector-width]': 'finalThemeOptions().connector!.width',
+                        '[style.--collapse-button-size]': 'finalThemeOptions().collapseButton!.size',
+                        '[style.--collapse-button-border-color]': 'finalThemeOptions().collapseButton!.borderColor',
+                        '[style.--collapse-button-border-radius]': 'finalThemeOptions().collapseButton!.borderRadius',
+                        '[style.--collapse-button-color]': 'finalThemeOptions().collapseButton!.color',
+                        '[style.--collapse-button-background]': 'finalThemeOptions().collapseButton!.background',
+                        '[style.--collapse-button-hover-color]': 'finalThemeOptions().collapseButton!.hoverColor',
+                        '[style.--collapse-button-hover-background]': 'finalThemeOptions().collapseButton!.hoverBackground',
+                        '[style.--collapse-button-hover-shadow]': 'finalThemeOptions().collapseButton!.hoverShadow',
+                        '[style.--collapse-button-hover-transform-scale]': 'finalThemeOptions().collapseButton!.hoverTransformScale',
+                        '[style.--collapse-button-focus-outline]': 'finalThemeOptions().collapseButton!.focusOutline',
+                        '[style.--collapse-button-count-font-size]': 'finalThemeOptions().collapseButton!.countFontSize',
+                        '[style.--container-background]': 'finalThemeOptions().container!.background',
+                        '[style.--container-border]': 'finalThemeOptions().container!.border',
+                        '[attr.data-layout]': 'layout()',
+                    }, template: "<section\n  class=\"org-chart-container\"\n  #container\n  [class.rtl]=\"isRtl()\"\n  (dragover)=\"onContainerDragOver($event)\"\n>\n  <section class=\"org-chart\" #panZoomContainer>\n    @if (nodes()?.id) {\n      <ul class=\"node-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"nodeTemplate\"\n          [ngTemplateOutletContext]=\"{ node: nodes() }\"\n        ></ng-container>\n      </ul>\n    }\n  </section>\n\n  <!-- Mini Map -->\n  @if (showMiniMap()) {\n    <ngx-org-chart-mini-map\n      [panZoomInstance]=\"panZoomInstance\"\n      [chartContainer]=\"containerElement()\"\n      [position]=\"miniMapPosition()\"\n      [width]=\"miniMapWidth()\"\n      [height]=\"miniMapHeight()\"\n      [themeOptions]=\"finalThemeOptions().miniMap\"\n    />\n  }\n</section>\n\n<ng-template #nodeTemplate let-node=\"node\">\n  <li class=\"org-node\" [class.collapsed]=\"node.collapsed\" #orgChartContainer>\n    <a\n      [ngClass]=\"[node?.nodeClass ?? '', nodeClass() ?? '', 'node-content']\"\n      [ngStyle]=\"node.style\"\n      [id]=\"getNodeId(node.id)\"\n      [attr.aria-expanded]=\"node.children?.length ? !node.collapsed : null\"\n      [attr.aria-label]=\"\n        node.name + (node.children?.length ? (node.collapsed ? ' (collapsed)' : ' (expanded)') : '')\n      \"\n      [attr.draggable]=\"draggable() && !customDragHandleTemplate ? true : null\"\n      (dragstart)=\"customDragHandleTemplate ? null : onDragStart($event, node)\"\n      (dragend)=\"customDragHandleTemplate ? null : onDragEnd($event, node)\"\n      (dragover)=\"onDragOver($event, node)\"\n      (dragenter)=\"onDragEnter($event, node)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event, node)\"\n      (touchstart)=\"customDragHandleTemplate ? null : onTouchStart($event, node)\"\n    >\n      <div class=\"node-content-wrapper\">\n        @if (customNodeTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"customNodeTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: node,\n              node: node,\n            }\"\n          ></ng-container>\n        } @else {\n          <span>{{ node.name }}</span>\n        }\n      </div>\n      @if (customDragHandleTemplate && draggable()) {\n        <span\n          class=\"drag-handle\"\n          [attr.draggable]=\"true\"\n          (dragstart)=\"onDragStart($event, node)\"\n          (dragend)=\"onDragEnd($event, node)\"\n          (touchstart)=\"onTouchStart($event, node)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"customDragHandleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: node,\n              node: node,\n            }\"\n          ></ng-container>\n        </span>\n      }\n      @if (collapsible() && node.children?.length) {\n        <button\n          class=\"collapse-btn\"\n          (click)=\"onToggleCollapse({ node, highlightNode: focusOnCollapseOrExpand() })\"\n          [class.collapsed]=\"node.collapsed\"\n          (mouseenter)=\"panZoomInstance?.pause()\"\n          (mousewheel)=\"panZoomInstance?.resume()\"\n          (mouseleave)=\"panZoomInstance?.resume()\"\n          (pointerenter)=\"panZoomInstance?.pause()\"\n          (pointerleave)=\"panZoomInstance?.resume()\"\n          [attr.aria-label]=\"(node.collapsed ? 'Expand' : 'Collapse') + ' ' + node.name\"\n          type=\"button\"\n        >\n          @if (displayChildrenCount()) {\n            <small class=\"children-count\">{{ node.descendantsCount }}</small>\n          }\n          <svg fill=\"none\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </button>\n      }\n    </a>\n\n    @if (node.children?.length && !node.hidden && !node.collapsed) {\n      <ul\n        class=\"node-container\"\n        [id]=\"getNodeChildrenId(node.id)\"\n        [class.collapsed]=\"node.collapsed\"\n        [class.instant-animation]=\"true\"\n        [attr.aria-hidden]=\"node.collapsed\"\n        @toggleNode\n      >\n        @for (child of node.children; track child.id) {\n          @if (!child.hidden) {\n            <ng-container\n              [ngTemplateOutlet]=\"nodeTemplate\"\n              [ngTemplateOutletContext]=\"{\n                node: child,\n                nodeTemplate: nodeTemplate,\n              }\"\n            ></ng-container>\n          }\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: [":host{--collapse-duration: .3s;--base-delay: .1s;--animation-duration: .5s;cursor:grab}:host:active{cursor:grabbing}:host[data-layout=horizontal] .org-chart{min-width:100%}:host[data-layout=horizontal] .org-chart:first-child{display:flex}:host[data-layout=horizontal] .org-chart:first-child .node-content{align-self:center}:host[data-layout=horizontal] .org-chart:first-child .org-node{display:flex;justify-content:flex-start}:host[data-layout=horizontal] .org-chart .node-container{padding-inline-start:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2);padding-block-start:0;min-width:auto;margin:0;display:flex;flex-direction:column}:host[data-layout=horizontal] .org-chart .node-container .node-container{overflow:hidden;display:flex;flex-direction:column;margin:0;min-width:auto}:host[data-layout=horizontal] .org-chart .node-container .node-container:before{inset-inline-start:0;inset-block-start:50%;border-block-start:var(--connector-width) solid var(--connector-color);height:0;width:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2);animation:lineAppearX var(--animation-duration) ease-out forwards}:host[data-layout=horizontal] .org-chart .org-node{justify-content:flex-start;overflow:visible}:host[data-layout=horizontal] .org-chart .org-node:before,:host[data-layout=horizontal] .org-chart .org-node:after{inset-inline-start:0;inset-block-end:50%;border-inline-start:var(--connector-width) solid var(--connector-color);border-inline-end:0;height:50%;width:var(--node-container-spacing);animation:lineAppearY var(--animation-duration) ease-out forwards}:host[data-layout=horizontal] .org-chart .org-node:after{inset-block-end:auto;inset-block-start:50%;border-block-start:var(--connector-width) solid var(--connector-color)}:host[data-layout=horizontal] .org-chart .org-node:before{border-block-start:none}:host[data-layout=horizontal] .org-chart .org-node:only-child{padding-inline-start:.125rem;padding-block-start:var(--node-container-spacing)}:host[data-layout=horizontal] .org-chart .org-node:only-child:before,:host[data-layout=horizontal] .org-chart .org-node:only-child:after{display:none}:host[data-layout=horizontal] .org-chart .org-node:first-child:before{border:0 none}:host[data-layout=horizontal] .org-chart .org-node:first-child:after{border-end-start-radius:0;border-start-start-radius:var(--connector-border-radius);border-block-start:var(--connector-width) solid var(--connector-color)}:host[data-layout=horizontal] .org-chart .org-node:last-child:after{border:0 none}:host[data-layout=horizontal] .org-chart .org-node:last-child:before{border-block-end:var(--connector-width) solid var(--connector-color);border-block-start:none;border-end-start-radius:var(--connector-border-radius);border-start-end-radius:0}:host[data-layout=horizontal] .org-chart .node-content{white-space:nowrap}:host[data-layout=horizontal] .org-chart .collapse-btn{inset-inline-end:calc(-1 * var(--collapse-button-size) / 2);inset-block-end:unset;inset-block-start:50%;inset-inline-start:unset;transform:translateY(-50%);flex-direction:column-reverse;justify-content:center}:host[data-layout=horizontal] .org-chart .collapse-btn svg{transition:transform var(--collapse-duration) ease;transform:rotate(-90deg)}:host[data-layout=horizontal] .org-chart .collapse-btn.collapsed svg{transform:rotate(90deg)}:host[data-layout=horizontal] .org-chart .collapse-btn .children-count{padding-inline-start:0}:host[data-layout=horizontal] .rtl .org-chart .collapse-btn{inset-inline-start:calc(-1 * var(--collapse-button-size) / 2);inset-inline-end:unset}.org-chart{text-align:center;min-width:100%;width:max-content;scroll-behavior:smooth;border:var(--container-border);background:var(--container-background);cursor:grab}.org-chart:active{cursor:grabbing}.org-chart-container{display:flex;min-height:100%;max-height:100%;width:100%;overflow:hidden;position:relative}.org-chart .node-container{display:flex;flex-wrap:nowrap;justify-content:center;padding-block-start:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2);padding-inline-start:0;position:relative;opacity:1;transition:max-height var(--collapse-duration) ease,opacity var(--collapse-duration) ease,padding var(--collapse-duration) ease,width var(--collapse-duration) ease;box-sizing:border-box;margin:0 auto;min-width:0}.org-chart .node-container.collapsed{max-height:0;opacity:0;padding-block-start:0}.org-chart .node-container:first-child{padding-block-start:.5rem;margin-block:0}.org-chart .node-container .node-container:before{content:\"\";position:absolute;inset-block-start:0;inset-inline-start:50%;border-inline-start:var(--connector-width) solid var(--connector-color);width:0;height:calc(var(--node-container-spacing) + var(--collapse-button-size) / 2 + var(--connector-width));opacity:0;animation:lineAppearY var(--animation-duration) ease-out forwards;animation-delay:calc(var(--base-delay) + .3s);transition:border-color .5s}.org-chart .org-node{display:inline-table;text-align:center;list-style-type:none;position:relative;padding:var(--node-container-spacing);transition:.5s;flex-shrink:0;overflow:hidden}.org-chart .org-node.removing{opacity:0;transform:translateY(1.25rem) scale(.95);transition:.5s}.org-chart .org-node:before,.org-chart .org-node:after{content:\"\";position:absolute;inset-block-start:0;inset-inline-end:50%;border-block-start:var(--connector-width) solid var(--connector-color);width:51%;height:var(--node-container-spacing);opacity:0;animation:lineAppearX var(--animation-duration) ease-out forwards;animation-delay:calc(var(--base-delay) + .2s);transition:border-color .5s}.org-chart .org-node:after{inset-inline-end:auto;inset-inline-start:50%;border-inline-start:var(--connector-width) solid var(--connector-color)}.org-chart .org-node:only-child{padding-block-start:.125rem}.org-chart .org-node:only-child:before,.org-chart .org-node:only-child:after{display:none}.org-chart .org-node:first-child:before{border:0 none}.org-chart .org-node:first-child:after{border-start-start-radius:var(--connector-border-radius);border-inline-start:var(--connector-width) solid var(--connector-color)}.org-chart .org-node:last-child:after{border:0 none}.org-chart .org-node:last-child:before{border-inline-end:var(--connector-width) solid var(--connector-color);border-start-end-radius:var(--connector-border-radius)}.org-chart .org-node .node-content{max-width:var(--node-max-width);max-height:var(--node-max-height);min-width:var(--node-min-width);min-height:var(--node-min-height);background:var(--node-background);color:var(--node-color);box-shadow:var(--node-shadow);padding:var(--node-padding);position:relative;display:inline-grid;border-radius:var(--node-border-radius);text-decoration:none;transition:.5s;outline:var(--node-outline-width) solid var(--node-outline-color);z-index:1;box-sizing:content-box}.org-chart .org-node .node-content .node-content-wrapper{display:contents}.org-chart .org-node .node-content .node-content-wrapper img,.org-chart .org-node .node-content .node-content-wrapper svg{user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.org-chart .org-node .node-content.highlighted{animation:pulse 1.5s infinite}.org-chart .org-node .node-content.dragging{opacity:.5;cursor:grabbing}.org-chart .org-node .node-content.drag-over{outline:2px dashed var(--node-drag-over-outline-color);background-color:color-mix(in srgb,var(--node-drag-over-outline-color) 10%,var(--node-background))}.org-chart .org-node .node-content.drag-not-allowed{cursor:not-allowed!important}.org-chart .org-node .node-content[draggable=true]{cursor:move}.org-chart .org-node .node-content .drag-handle{cursor:move;display:inline-flex;align-items:center;justify-content:center}.org-chart .org-node .node-content .drag-handle:active{cursor:grabbing}.org-chart .org-node .node-content:hover{outline:var(--node-outline-width) solid var(--node-active-outline-color)}.org-chart .org-node .node-content:hover+.node-container .node-content{outline:var(--node-outline-width) solid var(--node-active-outline-color)}.org-chart .org-node .node-content:hover+.node-container:before{border-color:var(--connector-active-color)}.org-chart .org-node .node-content:hover+.node-container .org-node:before,.org-chart .org-node .node-content:hover+.node-container .org-node:after{border-color:var(--connector-active-color)}.org-chart .org-node .node-content:hover+.node-container .node-container:before{border-color:var(--connector-active-color)}.org-chart .collapse-btn{all:unset;direction:ltr;display:flex;align-items:center;justify-content:center;color:var(--collapse-button-color);background:var(--collapse-button-background);border:.0625rem solid var(--collapse-button-border-color);border-radius:var(--collapse-button-border-radius);position:absolute;inset-block-end:calc(-1 * var(--collapse-button-size) / 2);inset-inline-start:50%;transform:translate(-50%);z-index:2;cursor:pointer;transition:transform var(--collapse-duration) ease,box-shadow var(--collapse-duration) ease}.org-chart .collapse-btn svg{transition:transform var(--collapse-duration) ease;width:var(--collapse-button-size);height:var(--collapse-button-size)}.org-chart .collapse-btn.collapsed svg{transform:rotate(180deg)}.org-chart .collapse-btn .children-count{padding-inline-start:.25rem;font-size:var(--collapse-button-count-font-size)}.org-chart .collapse-btn:hover{transform:translate(-50%) scale(var(--collapse-button-hover-transform-scale));box-shadow:var(--collapse-button-hover-shadow);color:var(--collapse-button-hover-color);background:var(--collapse-button-hover-background)}.org-chart .collapse-btn:focus-visible{outline:var(--collapse-button-focus-outline);outline-offset:.0625rem}@keyframes lineAppearX{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes lineAppearY{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.org-chart{--base-delay: 0ms;--animation-duration: 0ms;--collapse-duration: 0ms}.org-chart .node-container{transition:none}.org-chart .node-container .node-container:before{opacity:1;animation:none}.org-chart .collapse-btn exc-icon{transition:none}.org-chart .org-node{opacity:1;transform:none;animation:none}.org-chart .org-node:before,.org-chart .org-node:after{opacity:1;animation:none}}@keyframes pulse{0%{box-shadow:0 0}70%{box-shadow:0 0 0 10px var(--node-highlight-shadow-color)}to{box-shadow:0 0 0 0 var(--node-highlight-shadow-color)}}:root .touch-drag-ghost-wrapper{transition:none!important;animation:none!important}:root .touch-drag-ghost-wrapper *{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}:root .touch-drag-ghost-wrapper .collapse-btn,:root .touch-drag-ghost-wrapper .drag-handle{display:none!important}\n"] }]
+        }], propDecorators: { customNodeTemplate: [{
+                type: ContentChild,
+                args: ['nodeTemplate', { static: false }]
+            }], customDragHandleTemplate: [{
+                type: ContentChild,
+                args: ['dragHandleTemplate', { static: false }]
+            }], panZoomContainer: [{ type: i0.ViewChild, args: ['panZoomContainer', { isSignal: true }] }], orgChartContainer: [{ type: i0.ViewChild, args: ['orgChartContainer', { isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], initialZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialZoom", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSpeed", required: false }] }], zoomDoubleClickSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomDoubleClickSpeed", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], nodeClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeClass", required: false }] }], initialCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialCollapsed", required: false }] }], isRtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRtl", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], focusOnCollapseOrExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnCollapseOrExpand", required: false }] }], displayChildrenCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayChildrenCount", required: false }] }], highlightZoomNodeWidthRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightZoomNodeWidthRatio", required: false }] }], highlightZoomNodeHeightRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightZoomNodeHeightRatio", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], canDragNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDragNode", required: false }] }], canDropNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDropNode", required: false }] }], dragEdgeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragEdgeThreshold", required: false }] }], dragAutoPanSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragAutoPanSpeed", required: false }] }], highlightZoomMinimum: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightZoomMinimum", required: false }] }], themeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeOptions", required: false }] }], showMiniMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMiniMap", required: false }] }], miniMapPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "miniMapPosition", required: false }] }], miniMapWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "miniMapWidth", required: false }] }], miniMapHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "miniMapHeight", required: false }] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], nodeDragStart: [{ type: i0.Output, args: ["nodeDragStart"] }], nodeDragEnd: [{ type: i0.Output, args: ["nodeDragEnd"] }] } });
+
+/**
+ * Moves a node from its current position to become a child of a target node.
+ * This is a pure function that returns a new tree structure without modifying the original.
+ *
+ * @param rootNode - The root node of the tree
+ * @param draggedNodeId - The ID of the node to move
+ * @param targetNodeId - The ID of the node that will become the parent
+ * @returns A new tree structure with the node moved, or null if the operation fails
+ *
+ * @example
+ * ```typescript
+ * const updatedTree = moveNode(currentTree, '5', '3');
+ * if (updatedTree) {
+ *   this.data.set(updatedTree);
+ * }
+ * ```
+ */
+function moveNode(rootNode, draggedNodeId, targetNodeId) {
+    // First, find and extract the dragged node
+    const draggedNode = findNode(rootNode, draggedNodeId);
+    if (!draggedNode) {
+        return null;
+    }
+    // Check if target is a descendant of dragged node (prevent circular references)
+    if (isNodeDescendant(draggedNode, targetNodeId)) {
+        return null;
+    }
+    // Remove the dragged node from its current position
+    const treeWithoutNode = removeNode(rootNode, draggedNodeId);
+    if (!treeWithoutNode) {
+        return null;
+    }
+    // Add the dragged node to the target node's children
+    const finalTree = addNodeToParent(treeWithoutNode, targetNodeId, draggedNode);
+    return finalTree;
+}
+/**
+ * Finds a node in the tree by its ID.
+ *
+ * @param node - The node to search in
+ * @param nodeId - The ID of the node to find
+ * @returns The found node or null
+ */
+function findNode(node, nodeId) {
+    if (node.id === nodeId) {
+        return node;
+    }
+    if (node.children) {
+        for (const child of node.children) {
+            const found = findNode(child, nodeId);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Checks if a node is a descendant of another node.
+ *
+ * @param node - The potential ancestor node
+ * @param descendantId - The ID of the potential descendant
+ * @returns true if the node with descendantId is a descendant of node
+ */
+function isNodeDescendant(node, descendantId) {
+    if (node.id === descendantId) {
+        return true;
+    }
+    if (!node.children?.length) {
+        return false;
+    }
+    return node.children.some(child => isNodeDescendant(child, descendantId));
+}
+/**
+ * Removes a node from the tree structure.
+ * Returns a new tree without the specified node.
+ *
+ * @param node - The root node to search in
+ * @param nodeIdToRemove - The ID of the node to remove
+ * @returns A new tree structure without the removed node
+ */
+function removeNode(node, nodeIdToRemove) {
+    // Don't remove the root node
+    if (node.id === nodeIdToRemove) {
+        return null;
+    }
+    // Create a shallow copy
+    const clonedNode = {
+        ...node,
+        children: node.children ? [...node.children] : undefined,
+    };
+    if (!clonedNode.children) {
+        return clonedNode;
+    }
+    // Filter out the node to remove and recursively process children
+    const updatedChildren = clonedNode.children
+        .filter(child => child.id !== nodeIdToRemove)
+        .map(child => removeNode(child, nodeIdToRemove))
+        .filter((child) => child !== null);
+    return {
+        ...clonedNode,
+        children: updatedChildren.length > 0 ? updatedChildren : undefined,
+    };
+}
+/**
+ * Adds a node as a child of the target parent node.
+ * Returns a new tree structure with the node added.
+ *
+ * @param node - The root node to search in
+ * @param targetParentId - The ID of the node that will become the parent
+ * @param nodeToAdd - The node to add as a child
+ * @returns A new tree structure with the node added
+ */
+function addNodeToParent(node, targetParentId, nodeToAdd) {
+    if (node.id === targetParentId) {
+        // Found the target parent - add the node to its children
+        const currentChildren = node.children || [];
+        return {
+            ...node,
+            children: [...currentChildren, { ...nodeToAdd }],
+        };
+    }
+    // Recursively search in children
+    if (node.children) {
+        const updatedChildren = node.children
+            .map(child => addNodeToParent(child, targetParentId, nodeToAdd))
+            .filter((child) => child !== null);
+        return {
+            ...node,
+            children: updatedChildren,
+        };
+    }
+    return node;
+}
+
+/*
+ * Public API Surface of org-chart
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MiniMapComponent, NgxInteractiveOrgChart, addNodeToParent, findNode, isNodeDescendant, moveNode, removeNode };
+//# sourceMappingURL=tic-nova-ngx-interactive-org-chart.mjs.map