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

package/types/tic-nova-ngx-interactive-org-chart.d.ts

@@ -0,0 +1,768 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy, TemplateRef, ElementRef } from '@angular/core';
+import { PanZoom } from 'panzoom';
+
+interface OrgChartNode<T = unknown> {
+    readonly id?: string;
+    readonly name?: string;
+    readonly data?: T;
+    readonly children?: OrgChartNode[];
+    readonly collapsed?: boolean;
+    readonly hidden?: boolean;
+    readonly nodeClass?: string;
+    readonly style?: {
+        [key: string]: string;
+    };
+    readonly descendantsCount?: number;
+}
+interface OrgChartConfigTheme {
+    readonly node: {
+        readonly background: string;
+        readonly color: string;
+        readonly shadow: string;
+        readonly outlineColor: string;
+        readonly outlineWidth?: string;
+        readonly activeOutlineColor: string;
+        readonly highlightShadowColor: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly activeColor: string;
+        readonly containerSpacing?: string;
+        readonly maxWidth: string;
+        readonly minWidth: string;
+        readonly maxHeight: string;
+        readonly minHeight: string;
+        readonly dragOverOutlineColor: string;
+    };
+    readonly connector: {
+        readonly color: string;
+        readonly activeColor: string;
+        readonly borderRadius: string;
+        readonly width: string;
+    };
+    readonly collapseButton: {
+        readonly size: string;
+        readonly borderColor: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly background: string;
+        readonly hoverColor: string;
+        readonly hoverBackground: string;
+        readonly hoverShadow: string;
+        readonly hoverTransformScale: string;
+        readonly focusOutline: string;
+        readonly countFontSize: string;
+    };
+    readonly container: {
+        readonly background: string;
+        readonly border: string;
+    };
+    readonly miniMap: {
+        readonly background: string;
+        readonly borderColor: string;
+        readonly borderRadius: string;
+        readonly shadow: string;
+        readonly nodeColor: string;
+        readonly viewportBackground: string;
+        readonly viewportBorderColor: string;
+        readonly viewportBorderWidth: string;
+    };
+}
+type NgxInteractiveOrgChartTheme = DeepPartial<OrgChartConfigTheme>;
+type NgxInteractiveOrgChartLayout = 'vertical' | 'horizontal';
+interface OrgChartToggleNodeArgs<T> {
+    readonly node: OrgChartNode<T>;
+    readonly targetNode: string;
+    readonly collapse?: boolean;
+}
+interface OrgChartDropNodeEventArgs<T> {
+    readonly draggedNode: OrgChartNode<T>;
+    readonly targetNode: OrgChartNode<T>;
+}
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+declare class NgxInteractiveOrgChart<T> implements AfterViewInit, OnDestroy {
+    #private;
+    /**
+     * 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>
+     * ```
+     */
+    protected readonly customNodeTemplate?: TemplateRef<unknown>;
+    /**
+     * 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>
+     * ```
+     */
+    protected readonly customDragHandleTemplate?: TemplateRef<unknown>;
+    protected readonly panZoomContainer: _angular_core.Signal<ElementRef<HTMLElement>>;
+    private readonly orgChartContainer;
+    private readonly container;
+    /**
+     * The data for the org chart.
+     */
+    readonly data: _angular_core.InputSignal<OrgChartNode<T>>;
+    /**
+     * The initial zoom level for the chart.
+     */
+    readonly initialZoom: _angular_core.InputSignal<number | undefined>;
+    /**
+     * The minimum zoom level for the chart
+     */
+    readonly minZoom: _angular_core.InputSignal<number>;
+    /**
+     * The maximum zoom level for the chart.
+     */
+    readonly maxZoom: _angular_core.InputSignal<number>;
+    /**
+     * The speed at which the chart zooms in/out on wheel or pinch.
+     */
+    readonly zoomSpeed: _angular_core.InputSignal<number>;
+    /**
+     * The speed at which the chart zooms in/out on double-click.
+     */
+    readonly zoomDoubleClickSpeed: _angular_core.InputSignal<number>;
+    /**
+     * Whether the nodes can be collapsed/expanded.
+     */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /**
+     * The CSS class to apply to each node element.
+     */
+    readonly nodeClass: _angular_core.InputSignal<string | undefined>;
+    /**
+     * If set to `true`, all the nodes will be initially collapsed.
+     */
+    readonly initialCollapsed: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Whether to enable RTL (right-to-left) layout.
+     */
+    readonly isRtl: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * The layout direction of the org chart tree.
+     * - 'vertical': Traditional top-to-bottom tree layout
+     * - 'horizontal': Left-to-right tree layout
+     */
+    readonly layout: _angular_core.InputSignal<NgxInteractiveOrgChartLayout>;
+    /**
+     * Whether to focus on the node when it is collapsed and focus on its children when it is expanded.
+     */
+    readonly focusOnCollapseOrExpand: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to display the count of children for each node on expand/collapse button.
+     */
+    readonly displayChildrenCount: _angular_core.InputSignal<boolean>;
+    /**
+     * The ratio of the node's width to the viewport's width when highlighting.
+     */
+    readonly highlightZoomNodeWidthRatio: _angular_core.InputSignal<number>;
+    /**
+     * The ratio of the node's height to the viewport's height when highlighting.
+     */
+    readonly highlightZoomNodeHeightRatio: _angular_core.InputSignal<number>;
+    /**
+     * 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>
+     * ```
+     */
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    /**
+     * 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';
+     * ```
+     */
+    readonly canDragNode: _angular_core.InputSignal<((node: OrgChartNode<T>) => boolean) | undefined>;
+    /**
+     * 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';
+     * };
+     * ```
+     */
+    readonly canDropNode: _angular_core.InputSignal<((draggedNode: OrgChartNode<T>, targetNode: OrgChartNode<T>) => boolean) | undefined>;
+    /**
+     * 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
+     */
+    readonly dragEdgeThreshold: _angular_core.InputSignal<number>;
+    /**
+     * The speed of auto-panning in pixels per frame during drag.
+     * @default 15
+     */
+    readonly dragAutoPanSpeed: _angular_core.InputSignal<number>;
+    /**
+     * The minimum zoom level for the chart when highlighting a node.
+     */
+    readonly highlightZoomMinimum: _angular_core.InputSignal<number>;
+    /**
+     * The theme options for the org chart.
+     * This allows customization of the chart's appearance, including node styles, connector styles, and
+     * other visual elements.
+     */
+    readonly themeOptions: _angular_core.InputSignal<{
+        readonly node?: {
+            readonly background?: string | undefined;
+            readonly color?: string | undefined;
+            readonly shadow?: string | undefined;
+            readonly outlineColor?: string | undefined;
+            readonly outlineWidth?: string | undefined;
+            readonly activeOutlineColor?: string | undefined;
+            readonly highlightShadowColor?: string | undefined;
+            readonly padding?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly activeColor?: string | undefined;
+            readonly containerSpacing?: string | undefined;
+            readonly maxWidth?: string | undefined;
+            readonly minWidth?: string | undefined;
+            readonly maxHeight?: string | undefined;
+            readonly minHeight?: string | undefined;
+            readonly dragOverOutlineColor?: string | undefined;
+        } | undefined;
+        readonly connector?: {
+            readonly color?: string | undefined;
+            readonly activeColor?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly width?: string | undefined;
+        } | undefined;
+        readonly collapseButton?: {
+            readonly size?: string | undefined;
+            readonly borderColor?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly color?: string | undefined;
+            readonly background?: string | undefined;
+            readonly hoverColor?: string | undefined;
+            readonly hoverBackground?: string | undefined;
+            readonly hoverShadow?: string | undefined;
+            readonly hoverTransformScale?: string | undefined;
+            readonly focusOutline?: string | undefined;
+            readonly countFontSize?: string | undefined;
+        } | undefined;
+        readonly container?: {
+            readonly background?: string | undefined;
+            readonly border?: string | undefined;
+        } | undefined;
+        readonly miniMap?: {
+            readonly background?: string | undefined;
+            readonly borderColor?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly shadow?: string | undefined;
+            readonly nodeColor?: string | undefined;
+            readonly viewportBackground?: string | undefined;
+            readonly viewportBorderColor?: string | undefined;
+            readonly viewportBorderWidth?: string | undefined;
+        } | undefined;
+    } | undefined>;
+    /**
+     * Whether to show the mini map navigation tool.
+     * @default false
+     */
+    readonly showMiniMap: _angular_core.InputSignal<boolean>;
+    /**
+     * Position of the mini map on the screen.
+     * @default 'bottom-right'
+     */
+    readonly miniMapPosition: _angular_core.InputSignal<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+    /**
+     * Width of the mini map in pixels.
+     * @default 200
+     */
+    readonly miniMapWidth: _angular_core.InputSignal<number>;
+    /**
+     * Height of the mini map in pixels.
+     * @default 150
+     */
+    readonly miniMapHeight: _angular_core.InputSignal<number>;
+    /**
+     * Event emitted when a node is dropped onto another node.
+     * Provides the dragged node and the target node.
+     */
+    readonly nodeDrop: _angular_core.OutputEmitterRef<OrgChartDropNodeEventArgs<T>>;
+    /**
+     * Event emitted when a node drag operation starts.
+     */
+    readonly nodeDragStart: _angular_core.OutputEmitterRef<OrgChartNode<T>>;
+    /**
+     * Event emitted when a node drag operation ends.
+     */
+    readonly nodeDragEnd: _angular_core.OutputEmitterRef<OrgChartNode<T>>;
+    private readonly defaultThemeOptions;
+    protected readonly finalThemeOptions: _angular_core.Signal<{
+        readonly node?: {
+            readonly background?: string | undefined;
+            readonly color?: string | undefined;
+            readonly shadow?: string | undefined;
+            readonly outlineColor?: string | undefined;
+            readonly outlineWidth?: string | undefined;
+            readonly activeOutlineColor?: string | undefined;
+            readonly highlightShadowColor?: string | undefined;
+            readonly padding?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly activeColor?: string | undefined;
+            readonly containerSpacing?: string | undefined;
+            readonly maxWidth?: string | undefined;
+            readonly minWidth?: string | undefined;
+            readonly maxHeight?: string | undefined;
+            readonly minHeight?: string | undefined;
+            readonly dragOverOutlineColor?: string | undefined;
+        } | undefined;
+        readonly connector?: {
+            readonly color?: string | undefined;
+            readonly activeColor?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly width?: string | undefined;
+        } | undefined;
+        readonly collapseButton?: {
+            readonly size?: string | undefined;
+            readonly borderColor?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly color?: string | undefined;
+            readonly background?: string | undefined;
+            readonly hoverColor?: string | undefined;
+            readonly hoverBackground?: string | undefined;
+            readonly hoverShadow?: string | undefined;
+            readonly hoverTransformScale?: string | undefined;
+            readonly focusOutline?: string | undefined;
+            readonly countFontSize?: string | undefined;
+        } | undefined;
+        readonly container?: {
+            readonly background?: string | undefined;
+            readonly border?: string | undefined;
+        } | undefined;
+        readonly miniMap?: {
+            readonly background?: string | undefined;
+            readonly borderColor?: string | undefined;
+            readonly borderRadius?: string | undefined;
+            readonly shadow?: string | undefined;
+            readonly nodeColor?: string | undefined;
+            readonly viewportBackground?: string | undefined;
+            readonly viewportBorderColor?: string | undefined;
+            readonly viewportBorderWidth?: string | undefined;
+        } | undefined;
+    }>;
+    protected readonly nodes: _angular_core.WritableSignal<OrgChartNode<T> | null>;
+    protected readonly scale: _angular_core.WritableSignal<number>;
+    protected readonly draggedNode: _angular_core.WritableSignal<OrgChartNode<T> | null>;
+    protected readonly dragOverNode: _angular_core.WritableSignal<OrgChartNode<T> | null>;
+    private readonly currentDragOverElement;
+    private autoPanInterval;
+    private keyboardListener;
+    private touchDragState;
+    protected panZoomInstance: PanZoom | null;
+    protected readonly containerElement: _angular_core.Signal<HTMLElement | null>;
+    /**
+     * A computed property that returns the current scale of the org chart.
+     * @returns {number} The current scale of the org chart.
+     */
+    readonly getScale: _angular_core.Signal<number>;
+    /**
+     * 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.
+     */
+    readonly flattenedNodes: _angular_core.Signal<OrgChartNode<T>[]>;
+    private readonly setNodes;
+    ngAfterViewInit(): void;
+    /**
+     * 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(): void;
+    /**
+     * 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 }?: {
+        by?: number;
+        relative?: boolean;
+    }): void;
+    /**
+     * 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 }?: {
+        by?: number;
+        relative?: boolean;
+    }): void;
+    /**
+     * Highlights a specific node in the org chart and pans to it.
+     * @param {string} nodeId - The ID of the node to highlight.
+     */
+    highlightNode(nodeId: string | number): void;
+    /**
+     * 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: number, y: number, smooth: boolean): void;
+    /**
+     * 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(): void;
+    /**
+     * 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?: number): void;
+    /**
+     * 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?: number): void;
+    /**
+     * 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?: boolean): void;
+    /**
+     * 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, playAnimation, }: {
+        node: OrgChartNode<T>;
+        collapse?: boolean;
+        highlightNode?: boolean;
+        playAnimation?: boolean;
+    }): void;
+    protected zoom({ type, by, relative, }: {
+        type: 'in' | 'out';
+        by?: number;
+        relative?: boolean;
+    }): void;
+    protected panZoomToNode({ nodeElement, skipZoom, playAnimation, }: {
+        nodeElement: HTMLElement;
+        skipZoom?: boolean;
+        playAnimation?: boolean;
+    }): void;
+    protected getNodeId(nodeId: string | number): string;
+    protected getNodeChildrenId(nodeId: string | number): string;
+    /**
+     * Handles the drag start event for a node.
+     * @param event - The drag event
+     * @param node - The node being dragged
+     */
+    protected onDragStart(event: DragEvent, node: OrgChartNode<T>): void;
+    /**
+     * Sets up keyboard event listener for drag cancellation.
+     */
+    private setupKeyboardListener;
+    /**
+     * Removes the keyboard event listener.
+     */
+    private removeKeyboardListener;
+    private cancelDrag;
+    /**
+     * Handles the drag end event for a node.
+     * @param event - The drag event
+     * @param node - The node that was being dragged
+     */
+    protected onDragEnd(event: DragEvent, node: OrgChartNode<T>): void;
+    /**
+     * Handles the drag over event for a node.
+     * @param event - The drag event
+     * @param node - The node being dragged over
+     */
+    protected onDragOver(event: DragEvent, node: OrgChartNode<T>): void;
+    /**
+     * Handles the drag over event on the container for auto-panning.
+     * @param event - The drag event
+     */
+    protected onContainerDragOver(event: DragEvent): void;
+    /**
+     * Handles the drag enter event for a node.
+     * @param event - The drag event
+     * @param node - The node being entered
+     */
+    protected onDragEnter(event: DragEvent, node: OrgChartNode<T>): void;
+    /**
+     * Handles the drag leave event for a node.
+     * @param event - The drag event
+     */
+    protected onDragLeave(event: DragEvent): void;
+    /**
+     * Handles the drop event for a node.
+     * @param event - The drag event
+     * @param targetNode - The node where the drop occurred
+     */
+    protected onDrop(event: DragEvent, targetNode: OrgChartNode<T>): void;
+    /**
+     * 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
+     */
+    private isNodeDescendant;
+    /**
+     * Handles the touch start event for drag on mobile devices.
+     * @param event - The touch event
+     * @param node - The node being touched
+     */
+    protected onTouchStart(event: TouchEvent, node: OrgChartNode<T>): void;
+    /**
+     * Handles touch move event during drag on mobile devices.
+     */
+    private onTouchMoveDocument;
+    /**
+     * Handles touch end event during drag on mobile devices.
+     */
+    private onTouchEndDocument;
+    /**
+     * Resets the touch drag state to its initial values.
+     */
+    private resetTouchDragState;
+    /**
+     * Removes touch event listeners from the document.
+     */
+    private removeTouchListeners;
+    /**
+     * Creates a ghost element to follow the touch during drag.
+     */
+    private createTouchGhostElement;
+    /**
+     * Updates the position of the touch ghost element.
+     */
+    private updateTouchGhostPosition;
+    /**
+     * Removes the touch ghost element.
+     */
+    private removeTouchGhostElement;
+    /**
+     * Gets the element under a touch point.
+     */
+    private getElementUnderTouch;
+    /**
+     * Handles touch drag over a node.
+     */
+    private handleTouchDragOver;
+    /**
+     * Clears all drag-over visual states.
+     */
+    private clearDragOverState;
+    /**
+     * Gets a node element by node data.
+     */
+    private getNodeElement;
+    /**
+     * Gets node ID from a DOM element.
+     */
+    private getNodeIdFromElement;
+    /**
+     * Finds a node by ID in the tree.
+     */
+    private findNodeById;
+    /**
+     * Handles auto-panning during touch drag.
+     */
+    private handleTouchAutoPan;
+    private handleAutoPan;
+    private startAutoPan;
+    private stopAutoPan;
+    private calculateScale;
+    private getFitScale;
+    /**
+     * 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.
+     */
+    private calculateOptimalZoom;
+    ngOnDestroy(): void;
+    /**
+     * 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.
+     */
+    private disableChildDragging;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxInteractiveOrgChart<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxInteractiveOrgChart<any>, "ngx-interactive-org-chart", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "initialZoom": { "alias": "initialZoom"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "zoomSpeed": { "alias": "zoomSpeed"; "required": false; "isSignal": true; }; "zoomDoubleClickSpeed": { "alias": "zoomDoubleClickSpeed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "nodeClass": { "alias": "nodeClass"; "required": false; "isSignal": true; }; "initialCollapsed": { "alias": "initialCollapsed"; "required": false; "isSignal": true; }; "isRtl": { "alias": "isRtl"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "focusOnCollapseOrExpand": { "alias": "focusOnCollapseOrExpand"; "required": false; "isSignal": true; }; "displayChildrenCount": { "alias": "displayChildrenCount"; "required": false; "isSignal": true; }; "highlightZoomNodeWidthRatio": { "alias": "highlightZoomNodeWidthRatio"; "required": false; "isSignal": true; }; "highlightZoomNodeHeightRatio": { "alias": "highlightZoomNodeHeightRatio"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "canDragNode": { "alias": "canDragNode"; "required": false; "isSignal": true; }; "canDropNode": { "alias": "canDropNode"; "required": false; "isSignal": true; }; "dragEdgeThreshold": { "alias": "dragEdgeThreshold"; "required": false; "isSignal": true; }; "dragAutoPanSpeed": { "alias": "dragAutoPanSpeed"; "required": false; "isSignal": true; }; "highlightZoomMinimum": { "alias": "highlightZoomMinimum"; "required": false; "isSignal": true; }; "themeOptions": { "alias": "themeOptions"; "required": false; "isSignal": true; }; "showMiniMap": { "alias": "showMiniMap"; "required": false; "isSignal": true; }; "miniMapPosition": { "alias": "miniMapPosition"; "required": false; "isSignal": true; }; "miniMapWidth": { "alias": "miniMapWidth"; "required": false; "isSignal": true; }; "miniMapHeight": { "alias": "miniMapHeight"; "required": false; "isSignal": true; }; }, { "nodeDrop": "nodeDrop"; "nodeDragStart": "nodeDragStart"; "nodeDragEnd": "nodeDragEnd"; }, ["customNodeTemplate", "customDragHandleTemplate"], never, true, never>;
+}
+
+type MiniMapPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface MiniMapTheme {
+    readonly background?: string;
+    readonly borderColor?: string;
+    readonly borderRadius?: string;
+    readonly shadow?: string;
+    readonly nodeColor?: string;
+    readonly viewportBackground?: string;
+    readonly viewportBorderColor?: string;
+    readonly viewportBorderWidth?: string;
+}
+declare class MiniMapComponent implements OnDestroy {
+    #private;
+    readonly panZoomInstance: _angular_core.InputSignal<PanZoom | null>;
+    readonly chartContainer: _angular_core.InputSignal<HTMLElement | null>;
+    readonly position: _angular_core.InputSignal<MiniMapPosition>;
+    readonly width: _angular_core.InputSignal<number>;
+    readonly height: _angular_core.InputSignal<number>;
+    readonly visible: _angular_core.InputSignal<boolean>;
+    readonly themeOptions: _angular_core.InputSignal<MiniMapTheme | undefined>;
+    readonly navigate: _angular_core.OutputEmitterRef<{
+        x: number;
+        y: number;
+    }>;
+    protected readonly canvasRef: _angular_core.Signal<ElementRef<HTMLCanvasElement> | undefined>;
+    protected readonly viewportRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    protected readonly viewportStyle: _angular_core.WritableSignal<Record<string, string>>;
+    protected readonly miniMapStyle: _angular_core.Signal<{
+        width: string;
+        height: string;
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+    }>;
+    protected readonly viewportIndicatorStyle: _angular_core.Signal<{
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: string;
+    }>;
+    protected readonly nodeColor: _angular_core.Signal<string>;
+    constructor();
+    ngOnDestroy(): void;
+    protected onMouseDown(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MiniMapComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MiniMapComponent, "ngx-org-chart-mini-map", never, { "panZoomInstance": { "alias": "panZoomInstance"; "required": true; "isSignal": true; }; "chartContainer": { "alias": "chartContainer"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "themeOptions": { "alias": "themeOptions"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; }, never, never, true, never>;
+}
+
+/**
+ * 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);
+ * }
+ * ```
+ */
+declare function moveNode<T>(rootNode: OrgChartNode<T>, draggedNodeId: string | number, targetNodeId: string | number): OrgChartNode<T> | null;
+/**
+ * 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
+ */
+declare function findNode<T>(node: OrgChartNode<T>, nodeId: string | number): OrgChartNode<T> | 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
+ */
+declare function isNodeDescendant<T>(node: OrgChartNode<T>, descendantId: string | number): boolean;
+/**
+ * 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
+ */
+declare function removeNode<T>(node: OrgChartNode<T>, nodeIdToRemove: string | number): OrgChartNode<T> | null;
+/**
+ * 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
+ */
+declare function addNodeToParent<T>(node: OrgChartNode<T>, targetParentId: string | number, nodeToAdd: OrgChartNode<T>): OrgChartNode<T> | null;
+
+export { MiniMapComponent, NgxInteractiveOrgChart, addNodeToParent, findNode, isNodeDescendant, moveNode, removeNode };
+export type { MiniMapPosition, MiniMapTheme, NgxInteractiveOrgChartLayout, NgxInteractiveOrgChartTheme, OrgChartDropNodeEventArgs, OrgChartNode, OrgChartToggleNodeArgs };