@ux-aspects/ux-aspects/components/organization-chart/organization-chart.component.d.ts

Open source user interface framework for building modern, responsive, mobile big data applications

import { BooleanInput } from '@angular/cdk/coercion';
import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
import { HierarchyPointNode } from 'd3';
import * as i0 from "@angular/core";
export declare class OrganizationChartComponent<T> implements AfterViewInit, OnChanges, OnDestroy {
    private readonly _resizeService;
    private readonly _componentFactoryResolver;
    private readonly _injector;
    private readonly _elementRef;
    private readonly _appRef;
    private readonly _viewContainerRef;
    private readonly _renderer;
    private readonly _focusIndicator;
    private readonly _ngZone;
    /** Define the root node of the chart */
    dataset: OrganizationChartNode<T>;
    /** Define the presentation of the connectors */
    connector: OrganizationChartConnector;
    /** Define the width of a node */
    nodeWidth: number;
    /** Define the height of a node */
    nodeHeight: number;
    /** Define the duration of the transition animations */
    duration: number;
    /** Define the vertical space between nodes */
    verticalSpacing: number;
    /** Define whether or not we can reveal additional parents */
    showReveal: boolean;
    /** Define the aria label for the reveal button */
    revealAriaLabel: string;
    /** Defines whether nodes can be toggled or not */
    set toggleNodesOnClick(toggleNodesOnClick: boolean);
    get toggleNodesOnClick(): boolean;
    /** Programmatically select an item */
    set selected(selected: OrganizationChartNode<T>);
    /** Emit whenever a node is selected */
    selectedChange: EventEmitter<OrganizationChartNode<T>>;
    /** Emit whenever the reveal button is pressed */
    reveal: EventEmitter<void>;
    /** Emit when the transition ends */
    transitionEnd: EventEmitter<void>;
    /** Get the template for the node content */
    revealTemplate: TemplateRef<void>;
    /** Get the template for the node content */
    nodeTemplate: TemplateRef<OrganizationChartNodeContext<T>>;
    /** Access the reveal button element */
    revealElement: ElementRef;
    /** Access the container element for the links */
    linksContainer: ElementRef;
    /** Access the container element for the nodes */
    nodesContainer: ElementRef;
    private _toggleNodesOnClick;
    /** Store the internal selected node */
    private _selected;
    /** Store a flattened array of nodes */
    private _nodeLayout;
    /** Store a flattened array of links */
    private _linkLayout;
    /** Store the links selection */
    private _linksContainer;
    /** Store the links selection */
    private _nodesContainer;
    /** Store all the node elements */
    private _nodes;
    /** Store all the link paths */
    private _links;
    /** Store the zoom behavior */
    private _zoom;
    /** Store the current layout */
    private _layout;
    /** Store the current width of the chart */
    private _width;
    /** Store the current height of the chart */
    private _height;
    /** Store the portal/outlets associated with some data */
    private readonly _portals;
    /** Store the focus indicators associated with nodes */
    private readonly _indicators;
    /** Store whether or not a transition is in progress */
    private _isTransitioning;
    /** Store whether or not a camera pan is in progress */
    private _isPanning;
    /** Determine if the component is initialised */
    private _isInitialised;
    /** Determine if the connector type has changed since the last render */
    private _hasConnectorChanged;
    /** Store the currently focused node if there is one */
    private _focused;
    /** Store any selection made before the chart is initialised */
    private _pendingSelection;
    /** Automatically unsubscribe from all subscriptions on destroy */
    private readonly _onDestroy;
    ngAfterViewInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    /** Perform the actual rendering of the chart */
    render(): void;
    /** Select a specified node */
    select(node: OrganizationChartNode<T> | HierarchyPointNode<OrganizationChartNode<T>>): void;
    /** Deselect the currently selected node */
    private deselect;
    /** Toggle the collapsed state of a node */
    toggle(node: OrganizationChartNode<T> | HierarchyPointNode<OrganizationChartNode<T>>): void;
    /** Expand a node */
    expand(node: OrganizationChartNode<T> | HierarchyPointNode<OrganizationChartNode<T>>): void;
    /** Collapse a node */
    collapse(node: OrganizationChartNode<T> | HierarchyPointNode<OrganizationChartNode<T>>): void;
    /** Move a specific node to the center of the screen */
    centerNode(node: OrganizationChartNode<T> | HierarchyPointNode<OrganizationChartNode<T>>, axis?: OrganizationChartAxis, animate?: boolean): void;
    /** Explicity set the position of the camera */
    setCameraPosition(x: number, y: number, animate?: boolean): void;
    /** Move the camera an amount from its current position */
    moveCamera(x: number, y: number, animate?: boolean): void;
    /** Focus a given node */
    focus(node: OrganizationChartNode<T>): void;
    /** Focus the root node */
    _focusRootNode(): void;
    /** Destroy the outlet and portal associated with a node */
    private destroyNode;
    private updateLayout;
    /** Ensure the selections stay in sync with the view */
    private updateSelections;
    /** Render the content of the node based on the template provided */
    private renderNodeTemplate;
    /** Handle any zoom events (we use zoom for panning behaviour) */
    private applyCameraPosition;
    /** Get the data in with the required layout information */
    private getLayout;
    /** Determine how much horizontal spacing should be between nodes */
    private getNodeSpacing;
    /** Ensure we consistently use the HierarchyPoint data structure */
    private coercePointNode;
    private coerceDataNode;
    /** Handle chart resize events */
    private onResize;
    /** Deteremine if a node is expanded or collapsed */
    private isExpanded;
    /** Get the current position of the camera */
    private getCameraPosition;
    /** Get the SVG line definition for each link */
    private getLinkPath;
    /** Get the link path line defintion when the link is collapsing */
    private getCollapsedLinkPath;
    /** Create a dynamic region that Angular can insert into */
    private createPortalOutlet;
    /** Make the appropriate node tabbable and update aria attributes */
    private setNodeAttributes;
    /** Get the element that represents a given node */
    private getNodeElement;
    /** Get the element that represents a given node */
    private getNodeData;
    /** Handle click events */
    private onClick;
    /** Handle keyboard events */
    private onKeydown;
    /** When a node receives focus */
    private onFocus;
    /** Move focus to the parent node */
    private focusParent;
    /** Move focus to the child node */
    private focusChild;
    /** Move focus to the sibling on the left */
    private focusPreviousSibling;
    /** Move focus to the sibling on the right */
    private focusNextSibling;
    /** Focus a given node */
    private focusNode;
    /** Determine if a node is fully visible within the viewport */
    private isNodeInViewport;
    /** Determine if a node is fully outside of the viewport */
    private isNodeOutsideViewport;
    /** Determine how far a node is from being within the viewport */
    private getDistanceFromViewport;
    /** Begin monitoring the element focus so we only show styling when navigated by keyboard */
    private monitorFocus;
    private ensureNodesAreVisible;
    /** Expand all parent nodes */
    private expandParents;
    /** Get the parent of a given node */
    private getParent;
    /** Get a flat array of all the nodes childrent */
    private getAllChildren;
    static ngAcceptInputType_toggleNodesOnClick: BooleanInput;
    static ɵfac: i0.ɵɵFactoryDeclaration<OrganizationChartComponent<any>, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<OrganizationChartComponent<any>, "ux-organization-chart", never, { "dataset": { "alias": "dataset"; "required": false; }; "connector": { "alias": "connector"; "required": false; }; "nodeWidth": { "alias": "nodeWidth"; "required": false; }; "nodeHeight": { "alias": "nodeHeight"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "verticalSpacing": { "alias": "verticalSpacing"; "required": false; }; "showReveal": { "alias": "showReveal"; "required": false; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; }; "toggleNodesOnClick": { "alias": "toggleNodesOnClick"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "reveal": "reveal"; "transitionEnd": "transitionEnd"; }, ["revealTemplate", "nodeTemplate"], never, false, never>;
}
export interface OrganizationChartNode<T> {
    id: number | string;
    data?: T;
    children?: ReadonlyArray<OrganizationChartNode<T>>;
    expanded?: boolean;
}
export interface OrganizationChartNodeContext<T> {
    data: T;
    node: OrganizationChartNode<T>;
    focused: boolean;
}
export interface OrganizationChartPortalRef {
    outlet: DomPortalOutlet;
    portal: TemplatePortal;
}
export type OrganizationChartConnector = 'elbow' | 'curved';
export declare enum OrganizationChartAxis {
    Horizontal = 0,
    Vertical = 1,
    Both = 2
}