import { AfterViewInit, ElementRef, OnDestroy, TemplateRef } from '@angular/core';
import { NgxInteractiveOrgChartLayout, OrgChartNode } from '../../models';
import { PanZoom } from 'panzoom';
import * as i0 from "@angular/core";
export declare class NgxInteractiveOrgChart<T> implements AfterViewInit, OnDestroy {
    #private;
    protected readonly customNodeTemplate?: TemplateRef<unknown>;
    protected readonly panZoomContainer: import("@angular/core").Signal<ElementRef<HTMLElement>>;
    private readonly orgChartContainer;
    /**
     * The data for the org chart.
     */
    readonly data: import("@angular/core").InputSignal<OrgChartNode<T>>;
    /**
     * The initial zoom level for the chart.
     */
    readonly initialZoom: import("@angular/core").InputSignal<number | undefined>;
    /**
     * The minimum zoom level for the chart
     */
    readonly minZoom: import("@angular/core").InputSignal<number>;
    /**
     * The maximum zoom level for the chart.
     */
    readonly maxZoom: import("@angular/core").InputSignal<number>;
    /**
     * The speed at which the chart zooms in/out on wheel or pinch.
     */
    readonly zoomSpeed: import("@angular/core").InputSignal<number>;
    /**
     * The speed at which the chart zooms in/out on double-click.
     */
    readonly zoomDoubleClickSpeed: import("@angular/core").InputSignal<number>;
    /**
     * Whether the nodes can be collapsed/expanded.
     */
    readonly collapsible: import("@angular/core").InputSignal<boolean>;
    /**
     * The CSS class to apply to each node element.
     */
    readonly nodeClass: import("@angular/core").InputSignal<string | undefined>;
    /**
     * If set to `true`, all the nodes will be initially collapsed.
     */
    readonly initialCollapsed: import("@angular/core").InputSignal<boolean | undefined>;
    /**
     * Whether to enable RTL (right-to-left) layout.
     */
    readonly isRtl: import("@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: import("@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: import("@angular/core").InputSignal<boolean>;
    /**
     * Whether to display the count of children for each node on expand/collapse button.
     */
    readonly displayChildrenCount: import("@angular/core").InputSignal<boolean>;
    /**
     * The ratio of the node's width to the viewport's width when highlighting.
     */
    readonly highlightZoomNodeWidthRatio: import("@angular/core").InputSignal<number>;
    /**
     * The ratio of the node's height to the viewport's height when highlighting.
     */
    readonly highlightZoomNodeHeightRatio: import("@angular/core").InputSignal<number>;
    /**
     * The minimum zoom level for the chart when highlighting a node.
     */
    readonly highlightZoomMinimum: import("@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: import("@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;
        } | 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;
    } | undefined>;
    private readonly defaultThemeOptions;
    protected panZoomInstance: PanZoom | null;
    protected readonly finalThemeOptions: import("@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;
        } | 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;
    }>;
    protected readonly nodes: import("@angular/core").WritableSignal<OrgChartNode<T> | null>;
    protected readonly scale: import("@angular/core").WritableSignal<number>;
    /**
     * A computed property that returns the current scale of the org chart.
     * @returns {number} The current scale of the org chart.
     */
    readonly getScale: import("@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: import("@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;
    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;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxInteractiveOrgChart<any>, never>;
    static ɵcmp: i0.ɵɵ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; }; "highlightZoomMinimum": { "alias": "highlightZoomMinimum"; "required": false; "isSignal": true; }; "themeOptions": { "alias": "themeOptions"; "required": false; "isSignal": true; }; }, {}, ["customNodeTemplate"], never, true, never>;
}