ngx-interactive-org-chart

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></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"> *  * <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 };