@balkangraph/orgchart.js 8.1.6 → 8.2.2

package/orgchart.d.ts

@@ -1,1980 +1,2094 @@
-declare namespace OrgChart {
-    
-    function isTrial(): boolean;
-
-    function t(templateName: string, minimized?: boolean, scale?: number ) : any;
-
-    enum orientation {
-        top,
-        left,
-        right,
-        bottom,
-        top_left,
-        bottom_left,
-        right_top,
-        left_top
-    }
-    enum action {
-        /**
-         * mouseScrool value
-         */
-        zoom,
-        /**
-         * mouseScrool value
-         */
-        scroll,
-        /**
-         * mouseScrool value
-         */
-        xScroll,
-        /**
-         * mouseScrool value 
-         */
-        yScroll,
-        /**
-        * Zoom on Ctrl + mouseScrool
-        */
-        ctrlZoom,
-        /**
-         * nodeMouseClick value
-         */
-        edit, 
-        /**
-         * nodeMouseClick and nodeMouseDbClick value
-         */
-        details,
-        /**
-         * nodeMouseClick and nodeMouseDbClick value
-         */
-        expandCollapse, 
-        /**
-         * nodeMouseClick, nodeMouseDbClick and mouseScrool value
-         */
-        none,
-        update,
-        centerNode,
-        pan
-    }
-    enum scroll {
-        visible,
-    }
-
-    enum match {
-        height,
-        width,
-        boundary
-    }
-
-    enum anim {
-        inPow,
-        outPow,
-        inOutPow,
-        inSin,
-        outSin,
-        inOutSin,
-        inExp,
-        outExp,
-        inOutExp,
-        inCirc,
-        outCirc,
-        inOutCirc,
-        rebound,
-        inBack,
-        outBack,
-        inOutBack
-    }
-
-    interface Loc {
-        ppdfCmdTitle: string;
-        ppdfSave: string;
-        ppdfCancel: string;
-        ppdfFormat: string;
-        ppdfFitToDrwaing: string;
-        ppdfA4: string;
-        ppdfA3: string;
-        ppdfA2: string;
-        ppdfA1: string;
-        ppdfLetter: string;
-        ppdfLegal: string;
-        ppdfLayout: string;
-        ppdfPortrait: string;
-        ppdfLandscape: string;
-        ppdfFittopagewidth: string;
-        ppdfMargin: string;
-        ppdfHeader: string;
-        ppdfFooter: string;
-        ppdfScale: string;
-    }
-    
-    const templates: any;
-
-    const icon: any;
-
-    const none: any;
-
-    const CENTER: any;
-    const ORIENTATION: any;
-    
-    const COLLAPSE: any;
-    const EXPAND: any;
-
-    const COLLAPSE_PARENT_NEIGHBORS: any;
-    const COLLAPSE_SUB_CHILDRENS: any;
-
-    const normal: any;  
-    const mixed: any;
-    const tree: any;
-    const treeLeftOffset: any;
-    const treeRightOffset: any;
-
-    const slinkTemplates: any;
-    
-    const menuUI: any;
-    
-    const _guid: Function;
-    const randomId: Function;
-
-    var MINIMIZE: string;
-    var MAXIMIZE: string;
-
-    const state: State;
-
-    const events: any;
-    
-    const wrapText: Function;
-   
-    const nodeMenu: any;
-    const toolbarUI: any;
-    const nodeMenuUi: any;
-    const pdfPrevUI: any;
-    const menuUi: any;
-    const editUi: any;
-
-    var SEARCH_PLACEHOLDER: string;
-
-    const RES: any;
-
-    const loc: Loc;
-    
-    const grCloseTag: any;
-}
-
-interface State {
-    clear: Function;
-}
-
-interface Node {
-    id: string | number,
-    pid: string | number,
-    spid: string | number,
-    tags: Array <String>,
-    [name: string]: any
-}
-
-
-
-interface NodeModel {
-    id: string | number,
-    pid: string | number,
-    ppid: string | number,
-    parent: NodeModel,
-    stpid: string | number,
-    stParent: NodeModel,
-    isPartner: boolean,
-    partnerSeparation: number,
-    childrenIds: Array<string | number>,
-    children: Array<NodeModel>,
-    stChildrenIds: Array<string | number>,
-    stChildren: Array<NodeModel>,
-    tags: Array<string>,
-    templateName: string,
-    leftNeighbor: NodeModel,
-    rightNeighbor: NodeModel,
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    isAssistant: boolean,
-    stContainerNodes: Array<NodeModel>,
-    order: number,
-    collapsed: boolean,
-    level: number,
-    min: boolean,
-    subLevels: number,
-    padding: number,
-    lcn: string,
-    isSplit: boolean
-}
-
-interface Menu {
-    add?: any,
-    edit?: any,
-    details?: any,
-    remove?: any,
-    svg?: any,
-    pdf?: any,
-    png?: any,
-    csv?: any,
-    addInGroup?: any,
-    addAsChild?: any,
-    [name: string]: any,
-}
-
-
-interface Tags {
-    [name: string]: Object,
-}
+declare class OrgChart {
+    nodes: { [key: string | number]: OrgChart.node };
+    isVisible: boolean;
 
-interface OrgChartOptions {
     /**
-     * OrgChart JS can be displayed in "dark" or "light" modes by settong the mode option:
-     * Default value: light;
-
-    Code example:
- ```
-    var chart = new OrgChart(document.getElementById("tree"), {
-        mode: 'dark',
-    });
-    ```
+     * @param element HTML element or string selector for example '#tree'
+     * @param options configuration options
      */
-    mode?: string,
+    constructor(element: HTMLElement | string, options?: OrgChart.options);
 
     /**
-     * Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need.
-     * Default value: true
-
-    Code example:
- ```
-    var chart = new OrgChart(document.getElementById("tree"), {
-        lazyLoading: true;
-    });
-    ```
+     * Updates the node data, redraws the chart and fires update event.
+     * @param data node data
+     * @param callback function called when the animation completes
+     * @param fireEvent if it set to true the update event is called
      */
-    lazyLoading?: boolean,
+    updateNode(data: object, callback?: () => void, fireEvent?: boolean): void;
     /**
-     * Enables advanced search.
-
-        Default value: true
-
-        Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-        enableSearch: true,
-    });
-```
-    */
-    enableSearch?: boolean,
+     * Updates the node data
+     * @param newData node data
+     */
+    update(newData: object): OrgChart;
     /**
-     * Specifies the orientation of the OrgChart JS. could accept one of the following values:
-
-- OrgChart.orientation.top
-- OrgChart.orientation.bottom
-- OrgChart.orientation.right
-- OrgChart.orientation.left
-- OrgChart.orientation.top_left
-- OrgChart.orientation.bottom_left
-- OrgChart.orientation.right_top
-- OrgChart.orientation.left_top
-Default value: OrgChart.orientation.top
-
-Code example:
-``` 
-        var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            orientation: OrgChart.orientation.bottom
-        });  
-   ``` 
+     * Removes specified node from nodes collection, redraws the chart and fires remove event.
+     * @param id identification number of the node
+     * @param callback called at the end of animation
+     * @param fireEvent indicates if the remove event will be called or not
      */
-    orientation?: OrgChart.orientation,
+    removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void;
     /**
-     * mouseScrool can accept the following values:
-
-    - OrgChart.action.zoom - will zoom in/out on mouse scroll
-
-    - OrgChart.action.xScroll - left/right move of the chart on mouse scroll
-
-    - OrgChart.action.yScroll - up/down move of the chart on mouse scroll
-
-    - OrgChart.action.none - do nothing on mouse scroll
-
-    Default value: OrgChart.action.zoom
-
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       mouseScrool: OrgChart.action.zoom
-    });
-```
-    */
-    mouseScrool?: OrgChart.action,
+     * Removes specified node from nodes collection
+     * @param id identification number of the node
+     */
+    remove(id: string | number): OrgChart;
     /**
-     * Node binding in OrgChart JS maps node data to node template parameters.
-
-Code example:
-```
-      var chart = new OrgChart(document.getElementById("orgchart"), {
-            nodeBinding: {
-                field_0: "name"
-            },
-            nodes: [
-                { id: 1, name: "Amber McKenzie" },
-                { id: 2, pid: 1, name: "Ava Field" },
-                { id: 3, pid: 1, name: "Peter Stevens" }
-            ]
-        });
- ```   
-In the example above the field name will be bount to field_0 from the template.
-
-Also you can define your own field in the templae, for more information go to Fields page on our website.
+     * Adds new node to the nodes collection, redraws the chart and fires remove event
+     * @param data node data
+     * @param callback called at the end of animation
+     * @param fireEvent indicates if the add event will be called or not
      */
-    nodeBinding?: Object,
+    addNode(data: object, callback?: () => void, fireEvent?: boolean): void;
     /**
-     * With the drag and drop features of OrgChart, you can move nodes easily.
-     * Default value: true
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-            enableDragDrop: true,
-    });
-```
-    */
-    enableDragDrop?: boolean,
-    enableTouch?: boolean,
+     * Adds new node to the nodes collection
+     * @param data node data
+     */
+    add(data: object): OrgChart;
     /**
-     * Enables edit, add, remove and other node operations. Also you can define your own node operation for more information see Node Menu Item
-
-        Default value: null
-
-        Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-	    nodeMenu:{
-                details: {text:"Details"},
-                edit: {text:"Edit"},
-                add: {text:"Add"},
-                remove: {text:"Remove"}       
-            },
-    });
-```
+     * Gets node data.
+     * @param id identification number of the node
      */
-    nodeMenu?: Menu,
+    get(id: string | number): object;
     /**
-     * Context menu. Also you can define your own node operation for more information see Menu
-
-Default value: null
-
-Code example:
-```
-     var chart = new OrgChart(document.getElementById("tree"), {
-	    nodeContextMenu:{
-                details: {text:"Details"},
-            	edit: {text:"Edit"},
-            	add: {text:"Add"},
-            	remove: {text:"Remove"}
-            },
-        ...
-    });
- ```
-    */
-    nodeContextMenu?: Menu,
+     * If specified node has assistant/s or partner/s as children will return false.
+     * @param id identification number of the node
+     */
+    canRemove(id: string | number): boolean;
     /**
-     * Use dragDropMenu with drag & drop and grouping feature.
-
-    Default value: null
-
-    Code example:
-```
-    var chart = new OrgChart(document.getElementById("tree"), {
-	    dragDropMenu: {
-            addInGroup: { text: "Add in group" },
-            addAsChild: { text: "Add as child" }
-        },
-    });
-```
-    */
-    dragDropMenu?: Menu,
+     * Expands specified nodes.
+     * @param id  the id of the node that will not move during the animation 
+     * @param ids node ids that will be expanded
+     * @param callback called after the animation completes
+     */
+    expand(id: string | number, ids: Array<string | number>, callback?: () => void): void;
     /**
-     * Enables export to excel, export to svg and other OrgChart operations. Also you can define your own OrgChart operation for more information see OrgChart.ImportFormCSV
-
-    Default value: null
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       menu: {
-            svg: { text: "Export SVG" },
-            csv: { text: "Export CSV" }
-       },
-    });
-```
-    */
-    menu?: Menu,
+     * Collapses specified nodes.
+     * @param id  the id of the node that will not move
+     * @param ids node ids that will be collapsed
+     * @param callback called after the animation completes
+     */
+    collapse(id: string | number, ids: Array<string | number>, callback?: () => void): void;
     /**
-     * A toolbar is a set of icons or buttons.
-
-Default value: null
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            toolbar: {
-                layout: true,
-                zoom: true,
-                fit: true,
-                expandAll: false
-            },
-            ...
-        }); 
-```    
+     * Expand/Collapse lists of nodes.
+     * @param id the id of the node that will not move
+     * @param expandIds expand all nodes with ids
+     * @param collapseIds collpase all nodes with ids
+     * @param callback called after the animation completes
      */
-    toolbar?: Object,
+    expandCollapse(id: string | number, expandIds: Array<string | number>, collapseIds: Array<string | number>, callback?: () => void): void;
     /**
-     * Stop the org chart locking to the top of the screen once you move it.
-
-Default value: true
-
-Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-        sticky: false
-        ...
-    });
- ```    
+     * Changes roots order.
+     * @param id id of a node that will not change is position, can be null
+     * @param roots roots id array in the required order
+     * @param callback called after the roots are changed and animation completes
      */
-    sticky?: boolean,
+    changeRoots(id: string | number, roots: Array<string | number>, callback?: () => void): void;
     /**
-     * nodeMouseClick can accept the following values:
-
-    - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
-    
-    - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
-     
-    - OrgChart.action.expandCollapse - will expand or collapse the children nodes
-     
-    - OrgChart.action.none - do nothing on node click event
-     
-    Default value: OrgChart.action.details
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       nodeMouseClick: OrgChart.action.edit
-    });
-```    
+     * Maximize the node. Without parameters maximize all nodes.
+     * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes
+     * @param horizontalCenter center horizontally 
+     * @param verticalCenter center vertically 
+     * @param callback called when the animation completes
      */
-    nodeMouseClick?: OrgChart.action,
-
-
-
+    maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void;
     /**
-     * nodeMouseDbClick can accept the following values:
-
-- OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
-- OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
-- OrgChart.action.expandCollapse - will expand or collapse the children nodes
-- OrgChart.action.none - do nothing on node double click event
-
-Default value: OrgChart.none
-
-Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       nodeMouseDbClick: OrgChart.action.edit
-        ...
-    });
-   ```  
+     * Minimize the node. Without parameters minimize all nodes.
+     * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes
+     * @param callback called when the animation completes
      */
-    nodeMouseDbClick?: OrgChart.action,
+    minimize(id?: string | number, callback?: () => void): void;
     /**
-     * showXScroll can accept the following values:
-
-    - OrgChart.none
-
-    - OrgChart.scroll.visible - Will display horisontal scroll bar
-
-    Default value: OrgChart.none
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       showXScroll: OrgChart.scroll.visible
-    });
-```
-    */
-    showXScroll?: OrgChart.scroll,
+     * Load nodes data.
+     * @param data node data array
+     */
+    load(data: Array<object>): OrgChart;
     /**
-     * 
-     * showYScroll can accept the following values:
-
-    - OrgChart.none
-
-    - OrgChart.scroll.visible - Will display vertical scroll bar
-
-    Default value: OrgChart.none
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       showYScroll: OrgChart.scroll.visible
-    });
-```
-    */
-    showYScroll?: OrgChart.scroll,
+     * Loads nodes from xml.
+     * @param xml Xml with node structure
+     */
+    loadXML(xml: string): OrgChart;
     /**
-    Set template if you want to change the appearance of the chart. OrgChart JS comes with number of build-in templates:
-
-    - ana
-    - ula  
-    - olivia   
-    - belinda
-    - rony
-    - mery
-    - polina
-    - mila
-    - diva
-    - luba
-    - base
-    - deborah
-    
-    Also you can define your own template. For more information see Creating Custom Template
-
-    Default value: ana
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-       template: "ana"
-    });
-```
-    */
-    template?: string,
+     * Gets nodes as xml.
+     */
+    getXML(): string;
     /**
-     * With tags option you can:
-
-    - Set specific template for tagged nodes
-
-    - Set the default state (expand/collapse) for tagged nodes
-
-   - Define a group for tagged nodes
-
-    - Set node as assistant for tagged nodes
-
-    - Set node menu items for tagged nodes
-
-
-    Set specific template for tagged nodes. See Multiple Templates in one chart for more details.
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-        tags: {
-            Management: {
-                template: "rony"
-            }
-        },     
-        nodes: [
-            { id: 1, tags: ["Management"] },        
-        ]
-    });
-```
-    Set the default state (expand/collapse) for tagged nodes. See Expand/Collapse for more details.
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-        tags: {
-            hide: {
-                state: OrgChart.COLLAPSE
-            }
-        },
-        nodes: [
-            { id: "1" },
-            { id: "2", tags: ["hide"] },
-            { id: "3" }
-        ]
-    });
-```    
-
-    Define a group for tagged nodes. See Grouping for more details.
-
-    Code example:
-```
-     var chart = new OrgChart(document.getElementById("tree"), {
-        tags: {
-            HRs: {
-                group: true,
-                groupName: "HR Team",
-                groupState: OrgChart.EXPAND,
-                template: "group_grey"
-            }
-        },
-        nodes: [
-            { id: 1, tags: ["HRs"] }
-        ]
-    });     
-```    
-    Set node as assistant for tagged nodes. See Assistant for more details.
-
-    Code example:
-```
-     var chart = new OrgChart(document.getElementById("tree"), {
-        tags: {
-            assistant: {
-                template: "mery"
-            }
-        },
-        nodes: [
-            { id: 1, tags: ["assistant"] }
-        ]
-    });     
-```    
-
-    Set node menu items for tagged nodes. See Node Menu Item for more details.
-
-    Code example:
-``` 
-    var chart = new OrgChart(document.getElementById("tree"), {
-        tags: 
-            customMenuItems: {
-                nodeMenu: {
-                    add: { text: "Add New" }
-                }
-            }
-          },
-    });
-```
+     * Draws the chart.
+     * @param action Action for example OrgChart.action.centerNode, default is OrgChart.action.update
+     * @param actionParams parameters for the action
+     * @param callback called when the animation completes
      */
-    tags?: Tags,
+    draw(action?: OrgChart.action, actionParams?: any, callback?: () => void): void;
     /**
-     * Link binding in OrgChart JS maps node data to link template parameters.
-
-Code example:
-```
-        var chart = new OrgChart(document.getElementById("tree"), {
-            linkBinding: {
-                link_field_0: "createdAt"
-            },
-            nodes: [
-                { id: "1", name: "Amber McKenzie"  },
-                { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
-                { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
-            ]
-        }); 
-```
-        */
-    linkBinding?: Object,
+     * Gets the width of the container.
+     */
+    width(): number;
     /**
-     * Search by the fields defined in searchFields.
-
-Default value: Empty array
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            searchFields: ["name", "title", etc...],
-            ...
-        }); 
- ```
-        */
-    searchFields?: Array<string>,
+     * Gets the height of the container.
+     */
+    height(): number;
     /**
-     * Array of node data JSON objects. nodes option is the data source of the chart.
-
-Code example:
-``` 
-        var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            nodes: [
-                { id: "1" },
-                { id: "2", pid: "1" },
-                { id: "3", pid: "1", tags: ["Sales"] }
-            ]
-        }); 
-    ```
-Node JSON objects could have unlimited number of properties, id, pid and tags are reserved node properties.
-
-- id - unique identifier, it clould be integer or string
-- pid - is the parent id
-- tags - array of strings
-
+     * Gets the view box attribute of the svg html element.
      */
-    nodes?: Array<Object>,
+    getViewBox(): Array<number>;
     /**
-     *  Add C link.
-
-Default value: null
-
-Code example:
-```
-    var chart = new OrgChart(document.getElementById('tree'), {
-            clinks: [
-                {from: 4, to: 0, label: 'text'}, 
-                {from: 4, to: 5, template: 'blue', label: '4 reports to 5' },
-                {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' },
-            ]   
-            ...
-    });
- ```  
+     * Sets the view box attribute of the svg html element.
+     * @param viewBox 
      */
-    clinks?: Array<Object>,
+    setViewBox(viewBox: Array<number>): void;
     /**
-     *  Add S link.
-
-Default value: null
-
-Code example:
-``` 
-     var chart = new OrgChart(document.getElementById('tree'), {
-            slinks: [
-                {from: 4, to: 0, label: 'text'}, 
-                {from: 4, to: 5, template: 'blue', label: 'reports to' },
-                {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' },
-            ]   
-            ...
-        });
-   ``` 
+     * Gets the current scale of the chart.
+     * @param viewBox 
      */
-    slinks?: Array<Object>,
+    getScale(viewBox?: Array<number>): void;
     /**
-     * The gap between each level.
-
-Default value: 60
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            levelSeparation: 50
-        });
- ```
-        */
-    levelSeparation?: number,
+     * Animates specified node with ripple animation - highlight the node.
+     * @param id the id of the node
+     * @param clientX x value of the ripple center in the node
+     * @param clientY y value of the ripple center in the node
+     */
+    ripple(id: string | number, clientX?: number, clientY?: number): void;
     /**
-     * The gap between nodes in a subtree.
-
-Default value: 20
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            siblingSeparation: 50
-        });  
- ```   
+     * Centers specified node on the screen.
+     * @param nodeId the id of the node
+     * @param options { parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false });
+     * @param callback called when the animation completes
      */
-    siblingSeparation?: number,
+    center(nodeId: string | number, options?: {
+        parentState: unknown,
+        childrenState: unknown,
+        rippleId: string | number,
+        vertical: boolean,
+        horizontal: boolean
+    }, callback?: () => void): void;
     /**
-     * The gap between subtrees.
-
-Default value: 40
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            subtreeSeparation: 50
-        }); 
- ```
-        */
-    subtreeSeparation?: number,
+     * Fits the content to the visible area.
+     * @param callback called when the animation completes
+     */
+    fit(callback?: () => void): void;
     /**
-     * The gap between nodes in vertical layout.
-
-Default value: 20
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            mixedHierarchyNodesSeparation: 5
-        }); 
- ```
-        */
-    mixedHierarchyNodesSeparation?: number,
+     * Toggles full screen mode.
+     */
+    toggleFullScreen(): void;
     /**
-     * The padding option sets the padding area on all four sides of the OrgChart.
-
-Default value: 30
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            padding: 20
-        });  
- ```   
+     * Gets the node as {@link OrgChart.node} object.
+     * @param nodeId 
      */
-    padding?: number,
+    getNode(nodeId: string | number): OrgChart.node;
     /**
-     * The layout of the OrgChart
-
-- OrgChart.normal
-- OrgChart.mixed
-- OrgChart.tree
-- OrgChart.treeLeftOffset
-- OrgChart.treeRightOffset
-Default value: OrgChart.normal
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            layout: OrgChart.mixed
-        });  
- ```   
+     * Sets layout.
+     * @param layout layout type
+     * @param lcn lyout config name for the specified sub tree
      */
-    layout?: OrgChart,
+    setLayout(layout: OrgChart.layout | number, lcn?: string): void;
     /**
-     * The scale factor determines what fraction of the entire scale is visible at one time.
-
-- OrgChart.match.height
-- OrgChart.match.width
-- OrgChart.match.boundary
-- [float]
-
-Default value: 1
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            scaleInitial: 0.5
-        });  
- ```
-        For more information go to Layout page on our website.
+     * Sets orientation.
+     * @param orientation  orientation type
+     * @param lcn lyout config name for the specified sub tree
      */
-    scaleInitial?: OrgChart.match | number,
+    setOrientation(orientation: OrgChart.orientation, lcn?: string): void;
     /**
-     * Determines the minimum scale factor.
-
-Default value: 0.1
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            scaleMin: 0.2
-        });  
- ```
-        */
-    scaleMin?: number,
+     * Search in the chart.
+     * @param value search for value
+     * @param searchInFileds search in field names
+     * @param retrieveFields retrive data for fields
+     * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}            
+     */
+    search(value: string, searchInFileds?: Array<string>, retrieveFields?: Array<string>): void;
     /**
-     * Determines the naximum scale factor.
-
-Default value: 5
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            scaleMax: 10
-        });  
- ```
-        */
-    scaleMax?: number,
+     * Gets collpased node ids of the specifeid node
+     * @param node 
+     */
+    getCollapsedIds(node: OrgChart.node): Array<string | number>;
     /**
-     * The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array.
-
-Default value: null
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            ...
-            orderBy: "orderId",
-            nodes: [
-                ...
-                { id: 10, pid: 1, orderId: 2 },
-                { id: 11, pid: 1, orderId: 1 }
-                ...
-            ]
-        }); 
-```
-In the example above node with id 11 will be before node with id 10. orderBy can be set to any property from the node JSON object, string or integer.
-
-
+     * State to url.
+     * {@link https://balkan.app/OrgChartJS/Docs/State | See doc...}  
      */
-    orderBy?: string,
-    editUI?: Object,
-    searchUI?: Object,
-    xScrollUI?: Object,
-    yScrollUI?: Object,
-    nodeMenuUI?: Object,
-    nodeContextMenuUI?: Object,
-    toolbarUI?: Object,
-    notifierUI?: Object,
-    //dragDropMenuUI?: Object, // removed
-    menuUI?: Object,
-    /**
-     * The URL to the export server.
-
-Default value: https://balkan.app/export
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            exportUrl: "https://balkan.app/export",
-            ...
-        }); 
- ```
-        */
-    exportUrl?: string,
+    stateToUrl(): string;
     /**
-     * Collapse specified level of the chart and its children if allChildren is true.
-
-Code example:
-```
-        var chart = new OrgChart(document.getElementById("tree"), { 
-            collapse: {
-                level: 2,
-                allChildren: true
-            },
-            ...
-        });
-   ``` 
+     * Genereates unique identification number that can be used for new nodes
      */
-    collapse?: Object,
+    generateId(): string;
     /**
-     * Expand specified node ids and its children if allChildren is true.
-
-The expand option works only if collapse is set.
-
-In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.
-
-Code example:
-```
-        var chart = new OrgChart(document.getElementById("tree"), { 
-            collapse: {
-                level: 2,
-                allChildren: true
-            },
-            expand:{
-                nodes: [155],
-                allChildren: true
-            }
-            ...
-        });
-   ``` 
+     * Destroys the object.
      */
-    expand?: Object,
+    destroy(): void;
     /**
-     *  The align option specifies the alignment of the nodes inside OrgChart JS.
-
-Default value: OrgChart.CENTER
-
-- OrgChart.CENTER - centered
-- OrgChart.ORIENTATION - according to the orientation option
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            align: OrgChart.ORIENTATION,
-            ...
-        }); 
- ```   
+     * Adds curved link.
+     * @param from from node with id
+     * @param to to node with id
+     * @param label link label
+     * @param template link template, for example 'orange'
      */
-    align?: OrgChart,
-    UI?: OrgChart,
-    /**
-     *Can be used to control the transition of the nodes on expand/collapse operation.
-
-Default value: func: OrgChart.anim.outPow, duration: 200
-
-duration: defines how long time an animation should take to complete
-
-func: Easing functions specify the speed at which an animation progresses at different points within the animation. Can accept one of the following values:
-
-- OrgChart.anim.inPow
-- OrgChart.anim.outPow
-- OrgChart.anim.inOutPow
-- OrgChart.anim.inSin
-- OrgChart.anim.outSin
-- OrgChart.anim.inOutSin
-- OrgChart.anim.inExp
-- OrgChart.anim.outExp
-- OrgChart.anim.inOutExp
-- OrgChart.anim.inCirc
-- OrgChart.anim.outCirc
-- OrgChart.anim.inOutCirc
-- OrgChart.anim.rebound
-- OrgChart.anim.inBack
-- OrgChart.anim.outBack
-- OrgChart.anim.inOutBack
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            anim: {
-                func: OrgChart.anim.outBack,
-                duration: 500
-            },
-            ...
-        });  
- ```
-        */
-    anim?: Object,
+    addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
     /**
-     * Can be used to control the zooming sensitivity.
-
-Default value: speed: 120, smooth: 12
-
-Code example:
-```
-         var chart = new OrgChart(document.getElementById("tree"), {
-            zoom: {
-                speed: 130,
-                smooth: 10
-            },
-            ...
-        }); 
- ```   
+     * Removes curved link.
+     * @param from from node with id
+     * @param to to node with id
      */
-    zoom?: Object,
-    roots?: Array<number>,
-    onUpdate?: string,
-    onRemove?: string,
-    onAdd?: string,
-    onRedraw?: string,
-    onImageUploaded?: string,
-    onClick?: string,
-    onDbClick?: string,
-    onExpCollClick?: string | Function,
-    onExportStart?: string | Function,
-    onExportEnd?: string | Function,
-    onSearchClick?: string | Function,
-    onReady?: string | Function,
-    assistantSeparation?: number,
-    columns?: number,
-
-    state?: Object,
-
-    minPartnerSeparation?: number,
-    partnerChildrenSplitSeparation?: number,
-    partnerNodeSeparation?: number,
-    miniMap?: boolean,
-
-    searchFieldsWeight?: Object,
-    searchDisplayField?: String,
-
-    enableKeyNavigation?: boolean,
-    nodeCircleMenu?: Object,
-
-    editForm?: Object
-
-}
-
-
-
-declare class OrgChart {
-    nodes: Array<Node>;
-    nodeCircleMenuUI: any;
-    editUI: any;
-    menuUI: any;
-    nodeMenu: any;
-    nodeMenuUI: any;
-    toolbarUI: any;
-    nodeContextMenuUI: any;
-    config: any;
-   // static searchUI: any;
-    searchUI: any;
-    _layoutConfigs: any;
-    
-    constructor(element: HTMLElement, options: OrgChartOptions);
-
-
-    /** 
-     * Returns the node data for given node id
-     * 
-     Signature:
-     ```
-     chart.get(nodeId);
- ```
-     Code example:
-```
-        var node = chart.get(5);
- ```   
-     * @param nodeId
-
-     * Returns JSON data */
-
-    get(nodeId: string | number) : Node;
-
+    removeClink(from: string | number, to: string | number): OrgChart;
+    /**
+     * Adds second link.
+     * @param from from node with id
+     * @param to to node with id
+     * @param label link label
+     * @param template link template, for example 'orange'
+     */    
+    addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
+    /**
+     * Removes second link.
+     * @param from from node with id
+     * @param to to node with id
+     */    
+    removeSlink(from: string | number, to: string | number): OrgChart;
+    /**
+     * Gets svg html element
+     */
+    getSvg(): SVGAElement;
     /**
-     * Updates the node JSON object.
-     * 
-      * Signature:
-        ``` 
-         chart.updateNode(nodeJSONdata, callback, fireEvent);
-         ```   
-      * Parameters:
-      * @param nodeJSONdata - node json data
-      * @param callback - (optional) callback function cakked when the animation colpletes
-      * @param fireEvent - (optional) if it set to true the update event is called
-      * 
-      * Code example:
-        ```
-        chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
-        ```   
-        Will update the node with id 4 and will redraw the chart.
-      */
-     
-    updateNode(nodeJSONdata: Object, callback?: Function, fireEvent?: boolean) : void;
-
-     /**
-      * Updates the node JSON object.
-      * 
-      * Signature:
-        ``` 
-        chart.update(nodeJSONdata);
-        ``` 
-      * 
-      Parameters:
-      * @param nodeJSONdata - node json data
-      *
-      Code example:
-        ```
-         chart.update({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
-        ```   
-        Will find the node with id 4 but it will not redraw the chart, you can use this method when you need to update two or more nodes, then call the draw function. Returns the chart object.
-      */
-    update(nodeJSONdata: Object) : Object;
- 
-     /**
-      * Removes specified node from nodes collection.
-      * 
-      *  Signature:
-        ```
-        chart.removeNode(nodeId, callback, fireEvent);        
-        ```   
-      * Parameters: 
-      * @param nodeId - id of the node
-      * @param callback - (optional) callback function will be called at the end of animation
-      * @param fireEvent - (optional) indicates if the remove event will be called or not
-      * 
-      * Code example:
-        ``` 
-        chart.removeNode(5);
-        ```   
-        Will remove node with id 5 and will redraw the chart.
-      */
-     
-    removeNode(nodeId: string | number, callback?: Function, fireEvent?: boolean): void;    
-
+     * Gets node html element
+     * @param id node id
+     */
+    getNodeElement(id: string | number): HTMLElement;
     /**
-     *Removes specified node from nodes collection.
-
-        Signature:
-        ``` 
-        chart.remove(nodeId);
-        ```       
-        Parameters:
-
-     * @param nodeId - id of the node
-     *
-     Code example:
-        ```
-        chart.remove(5);
-        ```   
-    Will remove node with id 5 but it will not redraw the chart, you can use this method when you need to remove two ore more nodes, then call the draw function. Returns the chart object. 
+     * Gets menu button html element
      */
-    remove(nodeId: string | number): Object;   
-
+    getMenuButton(): HTMLElement;
     /**
-     * * Adds new node to the nodes collection.
-     * 
-     * Signature:
-        ```
-         chart.addNode(nodeJSONdata, callback, fireEvent);
-        ```   
-     * 
-     Parameters:
-     * @param nodeJSONdata - node JSON data
-     * @param callback - (optional) callback function will be called at the end of animation
-     * @param fireEvent - (optional) indicates if the add event will be called or not
-     * 
-     * Code example:
-        ```
-        chart.addNode({ id: 4, pid: 2, name: "Name 1", title: "Title 1" });
-        ```    
+     * Exports the details form to PDF.
+     * @param options export options
+     * @param callback called when the export completes
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}        
      */
-
-    addNode(nodeJSONdata: Object, callback?: Function, fireEvent?: boolean): void;
-
+    exportPDFProfile(options: OrgChart.exportOptions, callback?: () => void): void;
     /**
-     * Adds new node to the nodes collection.
-
-    Signature:
-    ```
-            chart.add(nodeJSONdata);
-    ```   
-    Parameters:
-
-    * @param nodeJSONdata - node JSON data
-    *
-    Code example:
-    ```
-            chart.add({ id: 4, pid: 2, name: "Name 1", title: "Title 1" });
-    ```   
-   Will add new node but it will not redraw the chart, you can use this method when you need add two or more nodes, then call the draw function. Returns the chart object.
+     * Exports the details form to PDF.
+     * @param options export options
+     * @param callback called when the export completes
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}        
      */
-    add(nodeJSONdata: Object) : Object;
-
+    exportPNGProfile(options: OrgChart.exportOptions, callback?: () => void): void;
     /**
-     * Adds a link between two nodes.
-
-Signature:
-```
-         chart.link(fromNodeId, toNodeId);
- ```
-
-Parameters:
-
-- fromNodeId - the id of the child node
-- toNodeId - the id of the parent node
-
-Code example:
-```
-         chart.link(5, 6);
-```
-It will create a link from node 5 to node 6.
-     * @param fromNodeId 
-     * @param toNodeId 
+     * Exports to CSV
+     * @param id if not defained exports all nodes if defined exports childrens
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}            
      */
-    link(fromNodeId: string | number, toNodeId: string | number): void;
-
+    exportCSV(id?: string | number): void;
     /**
-     * Adds a link between two nodes.
-
-Signature:
-```
-         chart.linkNode(fromNodeId, toNodeId);
- ```   
-Parameters:
-
-- fromNodeId - the id of the child node
-- toNodeId - the id of the parent node
-
-Code example:
-```
-         chart.linkNode(5, 6);
- ```   
-It will create a link from node 5 to node 6 and will redraw the chart.
-     * @param fromNodeId 
-     * @param toNodeId 
+     * Shares node data, uses build-in  device sharing functionallity.
+     * @param id node id 
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}            
      */
-    linkNode(fromNodeId: string | number, toNodeId: string | number) : void;
-
+    shareProfile(id: string | number): void;
     /**
-     * Center specified node on the screen.
-
-Signature:
-```
-         chart.center(nodeId, options, callback);
- ```   
-Parameters:
-
-- nodeId - the id of the node
-- options - { parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false });
-- callback - callback function (optional)
-
-Code example:
-```
-         chart.center(5,     {
-                parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS,
-                childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS,
-                rippleId: 1,
-                vertical: true,
-                horizontal: false
-            }););
- ```   
-     * @param nodeId 
-     * @param options 
-     * @param callback
+     * Exports to PDF document
+     * @param options export options
+     * @param callback called when the export completes
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}       
      */
-    center(nodeId: string | number, options: Object, callback?: Function ) : void;
-
+    exportPDF(options?: OrgChart.exportOptions, callback?: () => void): void;    
     /**
-     * Animate specified node with ripple animation - highlight the node.
-
-Signature:
-```
-         chart.ripple(nodeId);
-```
-Parameters:
-
-- nodeId - the id of the node
-
-Code example:
-```
-        chart.ripple(5);
-```
-        * @param nodeId 
+     * Exports to PNG document
+     * @param options export options 
+     * @param callback called when the export completes
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}       
      */
-    ripple(nodeId: string | number) : void;
-
+    exportPNG(options?: OrgChart.exportOptions, callback?: () => void): void;
     /**
-     * Gets the current scale of the chart.
-
-Signature:
-``` 
-        chart.getScale();
-   ``` 
-Code example:
-``` 
-        var scale = chart.getScale();
-   ```
-        */
-    getScale() : number;
-
+     * Exports to SVG document
+     * @param options export options 
+     * @param callback called when the export completes
+     * {@link https://balkan.app/OrgChartJS/Docs/Exporting | See doc...}       
+     */    
+    exportSVG(options?: OrgChart.exportOptions, callback?: () => void): void;
     /**
-     * Zoom out or zoom in the chart.
-
-Signature:
-``` 
-        chart.zoom(delta, center, anim, callback);
-   ``` 
-Parameters:
-
-- delta - True for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
-- center - Array [x, y], where x is x percantege from the width and y is y percentage from the height. (optional)
-- anim - true, false (optional)
-- callback - callback frunction (optional)
-
-Code example:
-```
-         chart.zoom(2, [20,20]);
- ```
-         * @param delta 
-     * @param center 
-     * @param [anim] 
-     * @param callback
+     * Imports CSV file.
+     * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}       
      */
-    zoom(delta: boolean | number, center: Array<number>, anim? : boolean, callback?: Function) : void;
-
+    importCSV(): void;
     /**
-     * Exports the chart to svg file.
-
-Signature:
-``` 
-        chart.exportSVG(options, callback);
-   ``` 
-
-Code example:
-``` 
-         chart.exportSVG({
-            filename: "MyOrgChart.svg", 
-            nodeId: 5, 
-            openInNewTab: false,
-            expandChildren: true, 
-            padding: 10
-        });
-   ```
-   Parameters:
-        * @param options - export options
-     * @param callback - (optional) calls when the export completes
+     * Imports XML file.
+     * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}       
+     */    
+    importXML(filename?: string): void;
+    /**
+     * Zoom out or zoom in the chart.
+     * @param delta true for zoom in, false for zoom out or scale number, if scale is > 1 it will zoom in and scale < 1 zoom out.
+     * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height.
+     * @param shouldAnimate should animate 
+     * @param callback called when the animation completes
      */
+    zoom(delta: boolean | number, center?: Array<number>, shouldAnimate?: boolean, callback?: () => void): void;
 
-    exportSVG(options: Object, callback?: Function) : void;
 
     /**
-     * Exports the chart to png file.
-
-Signature:
-```
-         chart.exportPNG(options, callback);
-
- ```   
-Parameters:
-
- * @param options - export options
- * @param callback - (optional) calls when the export completes
-
-Code example:
-```
-        chart.exportPNG({
-            filename: "MyOrgChart.png", 
-            nodeId: 5, 
-            openInNewTab: false,
-            expandChildren: true, 
-            margin: [10,20,10,20],
-            padding: 10
-        });
- ```
+     * The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.     * 
+     * @category Event Listeners
+     * @param type A case-sensitive string representing the event type to listen for.
+     * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
      */
-    exportPNG(options: Object, callback?: Function) : void;
+    on(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "import" | "adding" | "added" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "removed" | "ready" | "ripple", listener: (sender: OrgChart, args: unknown, args1: unknown, args2: unknown) => void | boolean): OrgChart;
 
     /**
-     * Exports the chart to pdf file.
-
-Signature:
-``` 
-        chart.exportPDF(options, callback);
-  ```  
-Parameters:
-
-   * @param options - export options
-   * @param callback - (optional) calls when the export completes
-
-Code example:
-``` 
-        chart.exportPDF({
-            landscape: true, //false
-            format: "A4", //fit
-            filename: "MyOrgChart.pdf", 
-            nodeId: 5, 
-            openInNewTab: false,
-            expandChildren: true, 
-            margin: [10,20,10,20],
-            padding: 10,
-            header: 'My header',
-            footer: 'Page {current-page} of {total-pages}',
-            scale: 'fit' //100
-        });
-   ``` 
-  
+     * The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onField((args) => {
+     *      //return false; to cancel
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
      */
-    exportPDF(options: Object, callback?: Function) : void;
+    onField(listener: (args: { 
+        /**
+         * the node
+         */
+        node: OrgChart.node, 
+        /**
+         * node data json object
+         */
+        data: object, 
+        /**
+         * value of the filed, can be changed in the event
+         */
+        value: unknown, 
+        /**
+         * svg or html element of the filed, can be changed in the event
+         */
+        element: string, 
+        /**
+         * name of the field
+         */
+        name: string 
+    }) => void | boolean): OrgChart;
 
     /**
-     * Exports the chart to CSV file.
-
-Signature:
-```
-          chart.exportCSV(filename);
- ```   
-Parameters:
-
-     * @param filename - optional
-
-
-Code example:
-``` 
-    chart.exportCSV("MyOrgChart.svg");
-   ```
-   
+     * Occurs when the nodes in OrgChart has been created and loaded to the DOM.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onInit(() => {
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
      */
-    exportCSV(filename?: String) : void;
-
+    onInit(listener: () => void): OrgChart;
+    
+    /**
+     * Occurs when the node data has been updated by updateNode method.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onUpdateNode((args) => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */    
+    onUpdateNode(listener: (args: { 
+        /**
+         * old node data
+         */
+        oldData: object,
+        /**
+         * new node data
+         */ 
+        newData: object
+    }) => void): OrgChart;
+    /**
+     * Occurs when a node has been removed by removeNode method. 
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onRemoveNode((args) => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */        
+    onRemoveNode(listener: (args: { 
+        /**
+         * node id
+         */
+        id: number | string, 
+        /**
+         * parent ids and sub tree parents ids that needs to be updated on the server. For example if you remove a node that has children all chilren nodes will change their pid to the parent node id of the removed node.
+         */
+        newPidsAndStpidsForIds: {
+            newPidsForIds: {[key: string | number] : string | number},
+            newStpidsForIds: {[key: string | number] : string | number}
+    }}) => void): OrgChart;
+
+    /**
+     * Occurs when a node has been added by addNode method.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onAddNode((args) => {     
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */  
+    onAddNode(listener: (args: { 
+        /**
+         * new added data node
+         */
+        data: object
+    }) => void): OrgChart;
+    /**
+     * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onDrag(() => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */      
+    onDrag(listener: (args: { 
+        /**
+         * dragged node id
+         */
+        dragId: string | number
+    }) => void): OrgChart;
+    /**
+     * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onDrop(() => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */          
+    onDrop(listener: (args: { 
         /**
-     * Exports the chart to XML file.
+         * dragged node id
+         */
+        dragId: string | number, 
+        /**
+         * dropped node id
+         */
+        dropId: string | number 
+    }) => void): OrgChart;
 
-Signature:
-``` 
-        chart.exportXML(filename);
-   ``` 
-Parameters:
+    /**
+     * The onRedraw event occurs when the chart is redrawed.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onRedraw(() => {
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */        
+    onRedraw(listener: () => void): OrgChart;
+
+    /**
+     * The onExpandCollpaseButtonClick event occurs when the chart is redrawed.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onExpandCollpaseButtonClick(() => {
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */         
+    onExpandCollpaseButtonClick(listener: (args: {
+        /**
+         * Indicates id the operation is collaps or expand
+         */
+        collapsing: boolean,
+        /**
+         * the id of the clicked node
+         */
+        id: number | string,
+        /**
+         *  node ids that will be expanded or collapsed
+         */
+        ids: Array<number | string>
+    }) => void): OrgChart;
+    /**
+     * Occurs in the beginning of the export. Extra css styles can be added to the exported document using this event listener or show loading image.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onExporStart(() => {
+     *  args.styles += '<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">';
+     *  //return false; to cancel the operation
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */             
+    onExporStart(listener: (args: 
+        {
+        /**
+         * the content to be exported
+         * 
+         * this property is initialized only for PDF/PNG/SVG exports
+         */
+        content: string,
+        /**
+         * export options
+         * 
+         * this property is initialized only for PDF/PNG/SVG exports
+         */
+        options: OrgChart.exportOptions,
+        /**
+         * add extra styles
+         * 
+         * this property is initialized only for PDF/PNG/SVG exports
+         */
+        styles: string,
+        /**
+         * an object that discribes pages to be exported
+         * 
+         * this property is initialized only for PDF/PNG exports
+         */
+        pages: any,
+        /**
+         * extension
+         * 
+         * this property is initialized only for CSV/XML
+         */
+        ext: string,
+        /**
+         * filename, you can change the filename here
+         * 
+         * this property is initialized only for CSV/XML exports
+         */
+        filename: string,
+        /**
+         * array of node objects
+         * 
+         * this property is initialized only for CSV/XML exports
+         */
+        nodes: Array<object>
+    }) => void): OrgChart;
+    /**
+     * Occurs in the beginning of the export. Use this event listener to hide loading image or upload exported document to your server using ArrayBuffer argument.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onExporEnd(() => {
+     *  //return false; to cancel the operation for example id you prefer the exported document to not download
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */         
+    onExporEnd(listener: (args: 
+        /**
+         * for PDF/PNG
+         */
+    {
+        /**
+         * the array buffer is the exported document, you can save it on a server or send it via email
+         * 
+         * this property is initialized only for PDF/PNG exports
+         */
+        ArrayBuffer: ArrayBuffer
+        /**
+         * extension
+         * 
+         * this property is initialized only for CSV/XML exports
+         */
+        ext: string,
+        /**
+         * filename, you can change the filename here
+         * 
+         * this property is initialized only for CSV/XML exports
+         */
+        filename: string,
+        /**
+         * an array of node objects
+         * 
+         * this property is initialized only for CSV/XML exports
+         */
+        nodes: Array<object>,
+        /**
+         * csv ot xml string
+         * 
+         * this property is initialized only for CSV/XML/SVG exports
+         */
+        content: string
+        /**
+         * export options
+         * 
+         * this property is initialized only for SVG exports
+         */
+        options: OrgChart.exportOptions,
+        /**
+         * add extra styles
+         * 
+         * this property is initialized only for SVG exports
+         */
+        styles: string,        
+    }) => void): OrgChart;
+    /**
+     * On node click event listener.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onNodeClick(() => {
+     *  //return false; to cancel the operation      
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */   
+    onNodeClick(listener: (args: {
+        /**
+         * node JSON object
+         */
+        node: OrgChart.node,
+        /**
+         * the browser event
+         */
+        event: any
+    }) => void): OrgChart;
+    /**
+     * On node double click event listener.
+     *  ```typescript     
+     * var chart = new OrgChart('#tree', {});
+     * chart.onNodeDoubleClick(() => {
+     *  //return false; to cancel the operation 
+     * });
+     * ```
+     * @category Event Listeners
+     * @param listener 
+     */       
+    onNodeDoubleClick(listener: (args: {
+        /**
+         * clicked node data
+         */
+        data: object
+    }) => void): OrgChart;
 
-- filename - the name of the file
+    editUI: OrgChart.editUI;
+    searchUI: OrgChart.searchUI;
+    nodeMenuUI: OrgChart.menuUI;
+    nodeCircleMenuUI: OrgChart.circleMenuUI;
+    nodeContextMenuUI: OrgChart.menuUI;
+    menuUI: OrgChart.menuUI;
+    toolbarUI: OrgChart.toolbarUI;
 
-Code example:
-``` 
-        chart.exportXML("MyOrgChart.svg");
-   ```
-        * @param filename 
+    static fileUploadDialog(callback: () => void): void;
+    static isMobile(): boolean;
+    /**
+     * Checks if the used libraris is licnsed or not
      */
-    exportXML(filename: string) : void;
-
+    static isTrial(): boolean;
     /**
-     * Import CSV file.
+     * Count all children nodes of the specified id.
+     * @param chart OrgChart instance
+     * @param node 
+     * @param count 
+     */
+    static childrenCount(chart: OrgChart, node: OrgChart.node, count?: number): number;
+    static collapsedChildrenCount(chart: OrgChart, node: OrgChart.node, count?: number): number;
+    static getRootOf(node: OrgChart.node): OrgChart.node;
+    static isNEU(val: unknown): boolean;
+    static gradientCircleForDefs(id: string | number, colors: Array<string> | string, r: number, strokeWidth: number): string;
 
-Signature:
-``` 
-        chart.importCSV();
-   ``` 
-Code example:
-```
-         chart.importCSV();
- ```
-         */
-    importCSV() : void;
 
     /**
-     * Import XML file.
+     * Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
+     */
+    static loading: {
+        show: (chart: OrgChart) => void,
+        hide: (chart: OrgChart) => void
+    }
 
-Signature:
-``` 
-        chart.importXML();
-   ``` 
-Code example:
-``` 
-        chart.importXML();
-   ```
-        */
-    importXML() : void;
+    static clinkTemplates: {
+        orange?: OrgChart.linkTemplate,
+        blue?: OrgChart.linkTemplate,
+        yellow?: OrgChart.linkTemplate,
+        [key: string]: OrgChart.linkTemplate
+    }
 
-    /**
-     * Draws the chart.
+    static slinkTemplates: {
+        orange?: OrgChart.linkTemplate,
+        blue?: OrgChart.linkTemplate,
+        yellow?: OrgChart.linkTemplate,
+        [key: string]: OrgChart.linkTemplate
+    }
 
-Signature:
-``` 
-        chart.draw(action, actionParams, callback);
-   ``` 
-Parameters:
 
-- * @param action - (optional) OrgChart.action.expandCollapse, OrgChart.action.update and OrgChart.action.centerNode
-- * @param actionParams - (optional) parameters of the action
-- * @param callback - (optional) called after the draw
+    static icon: {
+        png: (w: string, h: string, c: string) => string,
+        pdf: (w: string, h: string, c: string) => string,
+        svg: (w: string, h: string, c: string) => string,
+        csv: (w: string, h: string, c: string) => string,
+        excel: (w: string, h: string, c: string) => string,
+        edit: (w: string, h: string, c: string) => string,
+        details: (w: string, h: string, c: string) => string,
+        remove: (w: string, h: string, c: string) => string,
+        add: (w: string, h: string, c: string) => string,
+        xml: (w: string, h: string, c: string) => string,
+        link: (w: string, h: string, c: string) => string,
+        happy: (w: string, h: string, c: string) => string,
+        sad: (w: string, h: string, c: string) => string,
+        share: (w: string, h: string, c: string, x: string, y: string) => string,
+        user: (w: string, h: string, c: string, x: string, y: string) => string
+    }
 
-Code example:
-``` 
-        chart.draw();
-   ```
-         
-     */
-    draw(action? : OrgChart.action, actionParams?: Object, callback?: Function) : void;
 
-    /**
-     * Expand specified nodes.
 
-Signature:
-```
-         chart.expand(id, ids, callback);
- ```   
-Parameters:
 
-- id - the id of the node that will not move
-- ids - node ids that will be expanded
-- callback - (optional) called after the animation completes
 
-Code example:
-``` 
-        chart.expand(5, [155]);
-   ```
-        * @param id 
-     * @param ids 
-     * @param [callback] 
-     */
-    expand(id: string | number, ids: Array<string | number>, callback?: Function) : void;
+    static templates :{ [key: string]: OrgChart.template} ;
 
-    /**
-     * Collapse specified nodes.
 
-Signature:
-``` 
-        chart.collapse(id, ids, callback);
-   ```
-Parameters:
 
-- id - the id of the node that will not move
-- ids - node ids that will be collapsed
-- callback - (optional) called after the animation completes
 
-Code example:
-```
-         chart.collapse(5, [155]);
- ```
-         * @param id 
-     * @param ids 
-     * @param [callback] 
-     */
-    collapse(id: string | number, ids: Array<string | number>, callback?: Function) : void;
+    static events: {
+        on(type: "node-created" | "layout", listener: (args: unknown, args1: unknown, args2: unknown) => void): void
+    };
+    static state: { clear(stateName: string): void };
 
+    static VERSION: string;
     /**
-     * Fits the content to the visible area.
+    * @ignore
+    */
+    static TEXT_THRESHOLD: number;
+    /**
+    * @ignore
+    */
+    static IMAGES_THRESHOLD: number;
+    /**
+    * @ignore
+    */
+    static LINKS_THRESHOLD: number;
+    /**
+    * @ignore
+    */
+    static BUTTONS_THRESHOLD: number;
+    /**
+    * @ignore
+    */
+    static ANIM_THRESHOLD: number;
 
-Signature:
-```
-         chart.fit();
- ```   
-Code example:
-``` 
-        chart.fit();
-   ```
+    /**
+    * @ignore
+    */
+    static IT_IS_LONELY_HERE: string;
+    /**
+    * @ignore
+    */
+    static RES: {
+        /**
+        * @ignore
         */
-    fit(): void;
-
+        IT_IS_LONELY_HERE_LINK: string
+    };
+    /**
+    * @ignore
+    */
+    static FIRE_DRAG_NOT_CLICK_IF_MOVE: number;
+    /**
+    * @ignore
+    */
+    static STRING_TAGS: boolean;
+    /**
+    * @ignore
+    */
+    static SEARCH_PLACEHOLDER: string;
+    /**
+    * @ignore
+    */
+    static IMPORT_MESSAGE: string;
+    /**
+    * @ignore
+    */
+    static FIXED_POSITION_ON_CLICK: boolean;
+    /**
+    * @ignore
+    */
+    static RENDER_LINKS_BEFORE_NODES: boolean;
+    /**
+    * @ignore
+    */
+    static MIXED_LAYOUT_ALL_NODES: boolean;
+    /**
+    * @ignore
+    */
+    static MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN: boolean;
+    /**
+    * @ignore
+    */
+    static LINK_ROUNDED_CORNERS: number;
+    /**
+    * @ignore
+    */
+    static MOVE_STEP: number;
     /**
-     * Load nodes.
+    * @ignore
+    */
+    static MOVE_INTERVAL: number;
+    /**
+    * @ignore
+    */
+    static CLINK_CURVE: number;
+    /**
+    * @ignore
+    */
+    static SEARCH_RESULT_LIMIT: number;
+    /**
+    * @ignore
+    */
+    static MAX_DEPTH: number;
+    /**
+    * @ignore
+    */
+    static SCALE_FACTOR: number;
+    /**
+    * @ignore
+    */
+    static LAZY_LOADING_FACTOR: number;
 
-Signature:
-``` 
-        chart.load(nodesJsonArray);
-   ``` 
-Code example:
-```
-         chart.load([{id: 1}]);
- ```
-     * @param jsonArray 
-     */
-    load(jsonArray: Array<Object>) : void;
+}
 
+declare namespace OrgChart {
     /**
-     *Load nodes from xml.
-
-Signature:
-```
-         chart.loadXML(xmlAsText);
- ```   
-Code example:
-``` 
-        chart.loadXML('<?xml version="1.0" encoding="utf-8" ?><nodes><node id="1" name="plamen"/><node id="2" pid="1" name="ivan"/></nodes>');
-   ```
-        * @param xmlAsText 
+     * deprecated, use OrgChart.align.center isntead
+     * @ignore
      */
-    loadXML(xmlAsText: string) : void;
-
+    const CENTER: number;    
     /**
-     * Gets nodes as xml.
+     * deprecated, use OrgChart.align.orientation isntead
+     * @ignore
+     */
+    const ORIENTATION: number;
 
-Signature:
-```
- 
-        chart.getXML();
     
-Code example:
+    /**
+     * @ignore
+     */
+    const none: number;
 
- 
-        var xml = chart.getXML();
+    /**
+     * @ignore
+     */    
+    const COLLAPSE_PARENT_NEIGHBORS: number;
     
-     * @returns xml 
+    /**
+     * @ignore
      */
-    getXML() : string;
+    const COLLAPSE_SUB_CHILDRENS: number;
 
     /**
-     * Adds clink.
-
-Signature:
-```
-         chart.addClink(fromId, toId, label, template);
- ```   
-Code example:
-```
-         chart.addClink(5, 1, 'lorem ipsum', 'blue');
- ```
- Predefined templates:
-  - orange
-  - blue
-  - yellow
-         * @param fromId 
-     * @param toId 
-     * @param label 
-     * @param template 
+     * deprecated, use OrgChart.layout.normal isntead
+     * @ignore
      */
-    addClink(fromId: string | number, toId: string | number, label?: string, template?: string) : void;
-
+    const normal: number;  
+    
     /**
-     * Removes clink.
-
-Signature:
-``` 
-        chart.removeClink(fromId, toId);
-   ``` 
-Code example:
-``` 
-        chart.removeClink(5, 1);
-   ```
-        * @param fromId 
-     * @param toId 
+     * deprecated, use OrgChart.layout.mixed isntead
+     * @ignore
      */
-    removeClink(fromId: string | number, toId: string | Number): void;
-
+    const mixed: number;
+    /**
+     * deprecated, use OrgChart.layout.tree isntead
+     * @ignore
+     */    
+    const tree: number;
     /**
-     * Expand/Collapse to level.
+     * deprecated, use OrgChart.layout.treeLeftOffset isntead
+     * @ignore
+     */    
+    const treeLeftOffset: any;
+    /**
+     * deprecated, use OrgChart.layout.treeRightOffset isntead
+     * @ignore
+     */        
+    const treeRightOffset: any;
 
-Signature:
-``` 
-        chart.expandCollapseToLevel(id, collapse, expand, callback);
-   ``` 
-Code example:
-```
-         chart.expandCollapseToLevel({
-                level: 2
-            }, {
-                nodes: [155]
-            }, function(){
-                console.log('callback')
-            });
- ```
-            * @param id 
-     * @param collapse 
-     * @param expand 
-     * @param callback 
-     */
-    expandCollapseToLevel(id: string | number, collapse: Object, expand: Object, callback: Function) : void; // How works this one ?
 
+    const scroll: {
+        visible?: boolean,
+        smooth?: number,
+        speed?: number,
+        safari?: { smooth?: number; speed?: number; },
+        edge?: { smooth?: number; speed?: number; },
+        chrome?: { smooth?: number; speed?: number; },
+        firefox?: { smooth?: number; speed?: number; },
+        opera?: { smooth?: number; speed?: number; }
+    };
+
+    interface template  
+         {
+            defs?: string,
+            size?: Array<number>,
+            expandCollapseSize?: number,
+            linkAdjuster?: {
+                fromX?: number,
+                fromY?: number,
+                toX?: number,
+                toY?: number
+            },
+            ripple?: {
+                radius?: number,
+                color?: string,
+                rect?: Array<number>
+            },
+            assistanseLink?: string,
+            svg?: string,
+            link?: string,
+            pointer?: string,
+            node?: string,
+            plus?: string,
+            minus?: string,
+            nodeMenuButton?: string,
+            menuButton?: string,
+            img_0?: string,
+            link_field_0?: string,
+            editFormHeaderColor?: string,
+            nodeCircleMenuButton?: string,
+            min?: template
+        }
+
+    interface editUI {
+        /**
+         * Inits edit ui
+         * @param obj 
+         */
+        init(obj: OrgChart): void;
+        /**
+         * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
+         * @category Event Listeners
+         * @param type A case-sensitive string representing the event type to listen for.
+         * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
+         */
+        on(type: "show" | "element-btn-click" | "button-click" | "hide", listener: (sender: editUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): editUI;
+        /**
+         * Shows the edit form for the specified node id
+         * @param id node id
+         * @param detailsMode If true the edit form is in read only mode
+         * @param dontAnim 
+         */
+        show(id: string | number, detailsMode: boolean, dontAnim: boolean): void;
+        /**
+         * Hides the edit form
+         */
+        hide(): void;
+        content(id: string | number, detailsMode: boolean, dontAnim: boolean, width: string, dontRenderButtons: boolean): string;
+    }
 
-    /**
-     * Destroys the object.
+    interface searchUI {
+        init(obj: OrgChart): void;
+        /**
+         * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
+         * @category Event Listeners
+         * @param type A case-sensitive string representing the event type to listen for.
+         * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
+         */        
+        on(type: "searchclick", listener: (sender: OrgChart, args: unknown, args1: unknown, args2: unknown) => void | boolean): searchUI;
+        /**
+         * Hides the search grid
+         */
+        hide(): void;
+        /**
+         * Finds filed data by specified value
+         * @param value search for value
+         */
+        find(value: string): void;
+        createItem(img: string, id: string | number, first: string, second: string): string;
+    }
 
-Signature:
-``` 
-        chart.destroy();
-   ```
-        */
-    destroy(): void;
+    interface menuUI {
+        init(obj: OrgChart, menu: { [key: string]: menu }): void;
+        /**
+         * The on() method of the menuUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
+         * @category Event Listeners
+         * @param type A case-sensitive string representing the event type to listen for.
+         * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
+         */        
+        on(type: "show", listener: (sender: menuUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): menuUI;
+        /**
+         * Shows menu next to html element
+         * @param stickToElement 
+         * @param firstNodeId 
+         * @param secondNodeId 
+         * @param menu 
+         */
+        showStickIn(stickToElement: HTMLElement, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
+        /**
+         * Hieds the menu
+         */
+        hide(): void;
+        /**
+         * Shows menu by x,y position
+         * @param x 
+         * @param y 
+         * @param firstNodeId 
+         * @param secondNodeId 
+         * @param menu 
+         */
+        show(x: number, y: number, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
+    }
 
-    /**
-     * Adds slink.
+    interface circleMenuUI {
+        /**
+         * Inits circle menu instance
+         * @param obj 
+         * @param menu 
+         */
+        init(obj: OrgChart, menu: { [key: string]: menu }): void;
+        /**
+         * Shows circle menu 
+         * @param nodeId 
+         * @param menu 
+         */
+        show(nodeId: string | number, menu: { [key: string]: menu }): void;
+        /**
+         * Hides circle menu 
+         */
+        hide(): void;
+        /**
+         * The on() method of the circleMenuUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
+         * @category Event Listeners
+         * @param type A case-sensitive string representing the event type to listen for.
+         * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
+         */        
+        on(type: "show" | "drag" | "drop" | "mouseenter" | "mouseout", listener: (sender: circleMenuUI, args: unknown, args1: unknown, args2: unknown) => void | boolean): circleMenuUI;
+    }
 
-Signature:
-``` 
-        chart.addSlink(fromId, toId, label, template);
-   ``` 
-Code example:
-``` 
-        chart.addSlink(5, 1, 'lorem ipsum', 'blue');
-   ```
-        * @param fromId 
-     * @param toId 
-     * @param label 
-     * @param template 
-     */
-    addSlink(fromId: string | number, toId: string | number, label: string, template: string) : void;
+    interface toolbarUI {
+        init(obj: OrgChart, toolbar: toolbar): void;
+        showLayout(): void;
+        hideLayout(): void;
 
 
-    /**
-     * Removes slink.
+        expandAllIcon?: string;
+        fitIcon?: string;
+        openFullScreenIcon?: string;
+        closeFullScreenIcon?: string;
+        zoomInIcon?: string;
+        zoomOutIcon?: string;
+        layoutIcon?: string;
+    }
 
-Signature:
-``` 
-        chart.removeSlink(fromId, toId);
-   ``` 
-Code example:
-``` 
-        chart.removeSlink(5, 1);
-   ```
-        * @param fromId 
-     * @param toId 
-     */
-    removeSlink(fromId: string | number, toId: string | number) : void;
 
-    on(action: string, fun: Function): void;
-    
-    getNode(id: string | number): NodeModel;
 
-    /**
-     * Maximize the node. Without parameters maximize all nodes.
-     * 
-      Signature:
-     * ```
-     * chart.maximize(id, horizontalCenter, verticalCenter, callback);
-     * ```
-     * @param id - (optional) the id of the node
-     * @param horizontalCenter - (optional) center horizontally (true,false)
-     * @param verticalCenter  - (optional) center vertically (true,false)
-     * @param callback - (optional) callback function is called when the animation completes
-     *
-     Code example:
-     * ```
-     * chart.maximize(5);
-     * ``` 
-     */
-    maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: Function) : void;
- 
-       /**
-     * Minimize  the node. Without parameters minimize all nodes.
-     * 
-      Signature:
-     * ```
-     * chart.minimize(id, callback);
-     * ```
-     * @param id - (optional) the id of the node
-     * @param callback - (optional) callback function is called when the animation completes
-     *
-     Code example:
-     * ```
-     * chart.minimize(5);
-     * ``` 
-     */
-    minimize(id?: string | number, callback?: Function) : void;
+    type toolbar = {
+        layout?: boolean,
+        zoom?: boolean,
+        fit?: boolean,
+        expandAll?: boolean,
+        fullScreen?: boolean
+    }
 
-    /**
-     * Set orientation.
-     * 
-     * Signature:
-     * ```
-     * chart.setOrientation(orientation, lyoutConfigName);
-     * ```
-     * 
-     * Parameters:
-     * @param orientation  - orientation type, OrgChart.orientation.top, OrgChart.orientation.bottom, OrgChart.orientation.right, OrgChart.orientation.left, OrgChart.orientation.top_left, OrgChart.orientation.bottom_left, OrgChart.orientation.right_top and OrgChart.orientation.left_top
-     * @param lyoutConfigName  - (optional) lyout config name for the specified sub tree
-     *
-     Code example:
-     ```
-     chart.setOrientation(OrgChart.orientation.bottom);
-     ```   
-     */
-    setOrientation(orientation: OrgChart.orientation, lyoutConfigName?: string) : void;
 
-    /**
-     * Set layout.
-     * 
-     * Signature:
-     * ```
-     * chart.setLayout(layout, lyoutConfigName);
-     * ```
-     * Parameters:
-     * @param layout - layout type, OrgChart.normal, OrgChart.mixed, OrgChart.tree, OrgChart.treeLeftOffset and OrgChart.treeRightOffset
-     * @param lyoutConfigName - (optional) lyout config name for the specified sub tree
-     *
-     * Code example:
-     * ```
-     * chart.setLayout(OrgChart.tree);
-     * ```     
-     */
-    setLayout(layout: OrgChart, lyoutConfigName?: string) : void;
+    type exportOptions = {
+        margin?: Array<number>,
+        padding?: number,
+        landscape?: boolean,
+        filename?: string,
+        scale?: "fit" | number,
+        format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal",
+        header?: string,
+        footer?: string,
+        openInNewTab?: boolean
+    }
 
-    /**
-     * Magnify node.
-     * 
-     * Signature:
-     * ```
-     * chart.magnify(id, scale, front, anim, callback);
-     * ```
-     * Parameters:
-     * @param id - the node id we want to highlight or magnify
-     * @param scale - scale of the magnified node
-     * @param front - (optional) true or false, display magnified node in front of other nodes if it is true
-     * @param anim - (optional) animation effect for the magnified node, if not set the default is chart.config.anim
-     * @param callback - (optional) callback function before the animation start
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.magnify(id, 1.04, false, null);
-     * ```     
-     */
+    type linkTemplate = {
+        defs?: string,
+        link?: string,
+        label?: string,
+        labelPosition?: string
+    }
+    type menu = {
+        [key: string]: {
+            text?: string,
+            icon?: string,
+            onClick?: Function,
+            color?: string,
+            draggable?: boolean
+        }
+    }
+    type editFormElement = {
+        type?: string,
+        label?: string,
+        binding?: string,
+        options?: Array<unknown>,
+        btn?: string,
+        vlidators?: { required?: string, email?: string }
+    }
+    type link = {
+        from?: string | number,
+        to?: string | number,
+        template?: string,
+        label?: string
+    }
+    type orderBy = {
+        field?: string,
+        desc?: boolean
+    }
+    enum orientation {
+        top,
+        bottom,
+        right,
+        left,
+        top_left,
+        bottom_left,
+        right_top,
+        left_top
+    }
+    enum layout {
+        normal,
+        mixed,
+        tree,
+        treeLeftOffset,
+        treeRightOffset
+    }
 
-    magnify(id: string | number, scale: number, front?: boolean, anim?: Object, callback?: Function ) : void;
+    enum align {
+        center,
+        orientation
+    }
+    enum anim {
+        inPow,
+        outPow,
+        inOutPow,
+        inSin,
+        outSin,
+        inOutSin,
+        inExp,
+        outExp,
+        inOutExp,
+        inCirc,
+        outCirc,
+        inOutCirc,
+        rebound,
+        inBack,
+        outBack,
+        inOutBack,
+        impulse,
+        expPulse
+    }
+    enum match {
+        height,
+        width,
+        boundary
+    }
 
-    /**
-     * Magnify back node.
-     * 
-     * Signature:
-     * ```
-     * chart.chart.magnifyBack(id, anim, callback);
-     * ```
-     * Parameters:
-     * @param id - is the node id we want to highlight or magnify
-     * @param anim - (optional) animation effect for the magnified node, if not set the default is chart.config.anim
-     * @param callback - (optional) callback function after the animation ends
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.magnifyBack(id, { func: OrgChart.anim.inSin, duration: 200});
-     * ```     
-     */
-   
-    magnifyBack(id: string | number,  anim?: Object, callback?: Function) : void;
 
-    /**
-     * State to url.
-     * 
-     * Signature:
-     * ```
-     * chart.stateToUrl();
-     * ```
-     * Code example:
-     * ```
-     * chart.stateToUrl();
-     * ```     
-     */
-    stateToUrl() : String;
+    enum action {
+        update,
+        expand,
+        collapse,
+        exporting,
+        init,
+        centerNode,
+        insert,
+        maximize,
+        minimize,
+        edit,
+        details,
+        expandCollapse,
+        pan,
+        zoom,
+        ctrlZoom,
+        xScroll,
+        yScroll,        
+        scroll,
+        none
+    }
 
+    type node = {
         /**
-     * Expand and collapse nodes.
-     * 
-     * Signature:
-     * ```
-     * chart.expandCollapse(id, expandIds, collapseIds);
-     * ```
-     * Parameters:
-     * @param id - fixed node
-     * @param expandIds - array of expanding ids
-     * @param collapseIds -  array of collapsing ids
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.expandCollapse(5, [6, 7], [8, 9]);
-     * ```     
-     */
-
-    expandCollapse(id: string | number, expandIds: Array<string | number>, collapseIds: Array<string | number>) : void;
-
-            /**
-     * Search in the chart.
-     * 
-     * Signature:
-     * ```
-     * chart.search(value, searchInFileds, retrieveFields);
-     * ```
-     * Parameters:
-     * @param value - value to search for
-     * @param searchInFileds - (optional) array of fields to search in
-     * @param retrieveFields - (optional) array of returned fields
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.search("c", ["Name", "Title"], ["Title"]);
-     * ```     
-     */
-
-    search(value: string | number, searchInFileds?: Array<string>, retrieveFields?: Array<string>)  : any;
-
-            /**
-     * Returns the node DOM element.
-     * 
-     * Signature:
-     * ```
-     * chart.getNodeElement(id);
-     * ```
-     * Parameters:
-     * @param id - id of the node
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.getNodeElement(5);
-     * ```     
-     */
+         * the same id you provided in the source node
+         */
+        id?: string | number,
+        /**
+         * same pid you provided in the source node, the default value is null if not provided or if node with the same id does not exist
+         */
+        pid?: string | number,
+        /**
+         *  partner parent id, it is the partner parent node id of the partner node, it is the same ppid you provided in the source node, the default value is undefined.
+         */
+        ppid?: string | number,
+        /**
+         * a reference to the parent node, default value is null, if the nodes is collapse this proprty is not initalized and can be null even if pid is not null
+         */
+        parent?: node,
+        /**
+         * ub tree parent id, it is the parent node id of the root node of the sub tree, it is the same stpid you provided in the source node, the default value is null if not provided or if node with the same id does not exist.
+         */
+        stpid?: string | number,
+        /**
+         * - a reference to the parent node of a sub tree, default value is null, if the parent node is minimized this proprty is not initalized and can be null even if we have stpid
+         */
+        stParent?: node,
+        isPartner?: boolean,
+        partnerSeparation?: number,
+        /**
+         * array of ids, always initialized
+         */
+        childrenIds?: Array<string | number>,
+        /**
+         * array of children nodes, initialized on demand if all children are collpased it will be empty array
+         */
+        children?: Array<node>,
+        /**
+         * array of sub tree children root node ids, always initialized
+         */
+        stChildrenIds?: Array<string | number>,
+        /**
+         * array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array
+         */
+        stChildren?: Array<node>,
+        /**
+         * array of string values, the same array you provided in the source node
+         */
+        tags?: Array<string>,
+        /**
+         * template name, you can specify multiple templates with tags in one chart
+         */
+        templateName?: string,
+        /**
+         * a reference to the left node neighbor, the default value is undefined
+         */
+        leftNeighbor?: node | undefined,
+        /**
+         *  a reference to the right node neighbor, the default value is undefined
+         */
+        rightNeighbor?: node | undefined,
+        /**
+         * x position, default value undefined
+         */
+        x?: number | undefined,
+        /**
+         *  y position, default value undefined
+         */
+        y?: number | undefined,
+        /**
+         * width of the node, default value undefined
+         */
+        w?: number | undefined,
+        /**
+         * height of the node, default value undefined
+         */
+        h?: number | undefined,
+        /**
+         * if the node is assistant is true if not false if the node is not initialized is undefined
+         */
+        isAssistant?: boolean | undefined,
+        /**
+         * sub tree container nodes array, property only for the root node, default value undefined
+         */
+        stContainerNodes?: Array<node> | undefined,
+        /**
+         * it is set only if you define order option, default value undefined
+         */
+        order?: number | undefined,
+        /**
+         * true if the node is collpased, false if it is not and undefined if not initalized
+         */
+        collapsed?: boolean | undefined,
+        /**
+         * a level of the node starting from zero
+         */
+        level?: number,
+        /**
+         * true if the node is minimized, default value undefined
+         */
+        min?: boolean | undefined,
+        /**
+         * sub levels, default value undefined
+         */
+        subLevels?: number | undefined,
+        /**
+         * set only if the node contains sub trees and padding is defined in the template, default value undefined
+         */
+        padding?: number | undefined,
+        /**
+         * layout configuration name, default value undefined
+         */
+        lcn?: string | undefined,
+        /**
+         * for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined
+         */
+        isSplit?: boolean | undefined
+    }
 
-    getNodeElement(id: string | number) : void;
+    interface options  {
+        /**
+         * Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - *true*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      interactive: false
+         * });
+         * ```
+         */
+        interactive?: boolean,
 
-    generateId() : string | number;
+        /**
+         * Color mode. Default value - *light*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      mode: "dark"
+         * });
+         * ```
+         */
+        mode?: "dark" | "light",
+        /**
+         * Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - *true*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      lazyLoading: false
+         * });
+         * ```
+         */
+        lazyLoading?: boolean,
 
-    changeRoots(id: null | string | number, roots: Array<string|number>, callback?: Function ) : void;
-    /**
-     * Exports the node details in PDF
-     * 
-     * Signature:
-     * ```
-     * chart.exportPDFProfile(ioptions, callback);
-     * ```
-     * Parameters:
-     * @param options - options for export
-     * @param callback - callback function
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.exportPDFProfile({id: 5});
-     * ```     
-     */
-    exportPDFProfile(options:  Object, callback?: Function) : void;
+        /**
+         * With the drag and drop features enabled you can move nodes easily and change the tree structure. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      enableDragDrop: true
+         * });
+         * ```
+         */
+        enableDragDrop?: boolean,
 
         /**
-     * Exports the node details in PNG
-     * 
-     * Signature:
-     * ```
-     * chart.exportPNGProfile(ioptions, callback);
-     * ```
-     * Parameters:
-     * @param options - options for export
-     * @param callback - callback function
-     * 
-     *
-     * Code example:
-     * ```
-     * chart.exportPNGProfile({id: 5});
-     * ```     
-     */
-    exportPNGProfile(options:  Object, callback?: Function) : void;
+         * Enables advanced search. Default value is true.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      enableSearch: false
+         * });
+         * ```
+         */
+        enableSearch?: boolean,
 
+        /**
+         * Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      enableTouch: true
+         * });
+         * ```
+         */
+        enableTouch?: boolean,
+        /**
+         * Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the chart. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      enableKeyNavigation: true
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/KeyNavigation | See doc...}
+         */
+        enableKeyNavigation?: boolean,
+        /**
+         * Shows mini map over the expanded tree. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      miniMap: true
+         * });
+         * ```
+         */
+        miniMap?: boolean,
+        /**
+         * Enables edit, add, remove and other node operations. Also you can define your own node operation.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      nodeMenu:{
+         *          details: {text:"Details"},
+         *       	edit: {text:"Edit"},
+         *          add: {text:"Add"},
+         *    	    remove: {text:"Remove"},
+         *          myMenuItem: {text:"My node menu Item", onClick: function {}}
+         *      }
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
+         */
+        nodeMenu?: OrgChart.menu;
+        /**
+         * With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *       nodeCircleMenu: {
+         *           editNode: {
+         *               icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
+         *               text: "Edit node",
+         *               color: "white"
+         *           }, 
+         *           addClink: {
+         *               icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
+         *               text: "Add C link",
+         *               color: '#fff',
+         *               draggable: true
+         *           }
+         *       }
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
+         */
+        nodeCircleMenu?: OrgChart.menu,
+        /**
+         * Customizable context menu. Also you can define your own node operation.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      nodeContextMenu:{
+         *          details: {text:"Details"},
+         *       	edit: {text:"Edit"},
+         *          add: {text:"Add"},
+         *          remove: {text:"Remove"}
+         *          myMenuItem: {text:"My node menu Item", onClick: function {}}
+         *      }
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
+         */
+        nodeContextMenu?: OrgChart.menu,
+        /**
+         * Enables export to excel, export to svg and other OrgChart operations. Also you can define your own OrgChart operation.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      menu:{
+         *          svg: { text: "Export SVG" },
+         *          csv: { text: "Export CSV" }
+         *          myMenuItem: {text:"My node menu Item", onClick: function {}}
+         *      }
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
+         */
+        menu?: OrgChart.menu,
+        /**
+         * With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      toolbar: {
+         *          layout: true,
+         *          zoom: true,
+         *          fit: true,
+         *          expandAll: false,
+         *          fullScreen: true
+         *      },
+         * });
+         * ```
+         */
+        toolbar?: OrgChart.toolbar,
+        /**
+         * Stops the chart locking to the top of the screen once you move it.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      sticky: false
+         * });
+         * ```
+         */
+        sticky?: boolean,
+        /**
+         * nodeMouseClick can accept the following values:
+         * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
+         * - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
+         * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
+         * - OrgChart.action.none - do nothing on node click event
+         * - OrgChart.action.pan - allows you to move the chart in any direction
+         * 
+         * Default value - *OrgChart.action.details*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      nodeMouseClick: OrgChart.action.edit
+         * });
+         * ```
+         */
+        nodeMouseClick?: OrgChart.action,
+        /**
+         * nodeMouseDbClick can accept the following values:
+         * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
+         * - OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only
+         * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
+         * - OrgChart.action.none - do nothing on node click event
+         * 
+         * Default value - *OrgChart.action.none*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      nodeMouseDbClick: OrgChart.action.edit
+         * });
+         * ```
+         */
+        nodeMouseDbClick?: OrgChart.action,
+        /**
+         * mouseScrool can accept the following values:
+         * - OrgChart.action.zoom - will zoom in/out on mouse scroll
+         * - OrgChart.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
+         * - OrgChart.action.xScroll - left/right move of the chart on mouse scroll
+         * - OrgChart.action.yScroll - up/down move of the chart on mouse scroll
+         * - OrgChart.action.none - do nothing on mouse scroll
+         * 
+         * Default value - *OrgChart.action.zoom*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      mouseScrool: OrgChart.action.ctrlZoom
+         * });
+         * ```
+         */
+        mouseScrool?: OrgChart.action,
+        /**
+         * Shows horizontal scrollbar. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      showXScroll: true
+         * });
+         * ```
+         */
+        showXScroll?: boolean ,
+        /**
+         * Shows vertical scrollbar. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      showYScroll: true
+         * });
+         * ```
+         */
+        showYScroll?: boolean ,
+        /**
+         * Set template if you want to change the appearance of the chart. Org Chart JS comes with number of build-in templates:
+         * - ana
+         * - ula
+         * - olivia
+         * - belinda
+         * - rony
+         * - mery
+         * - polina
+         * - mila
+         * - diva
+         * - base
+         * - isla
+         * - deborah
+         * 
+         * Default value - *ana*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      template: 'olivia'
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/PredefinedTemplates | See doc...}
+         */
+        template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string,
+        /**
+         * With tags option you can:
+         * - Set a specific template for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/MultipleTemplates | See doc...}
+         * - Set node as assistant {@link https://balkan.app/OrgChartJS/Docs/Assistant | See doc...}
+         * - Change node menu, circle menu and context menu items for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
+         * - Set the node level {@link https://balkan.app/OrgChartJS/Demos/SubLevels | See demo...}
+         * - Set specific options for sub trees like layout templates etc {@link https://balkan.app/OrgChartJS/Docs/SubTrees | See doc...}          
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      tags: {
+         *          myTag: {template: 'olivia'}
+         *      },
+         *      nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
+         * });
+         * ```
+         */
+        tags?: {
+            [key: string]: {
+                template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string,
+                subLevels?: number,
+                nodeMenu?: OrgChart.menu,
+                nodeCircleMenu?: OrgChart.menu,
+                nodeContextMenu?: OrgChart.menu,
+                subTreeConfig?: {
+                    orientation?: OrgChart.orientation,
+                    levelSeparation?: number,
+                    mixedHierarchyNodesSeparation?: number,
+                    subtreeSeparation?: number,
+                    siblingSeparation?: number,
+                    layout?: OrgChart.layout | number,
+                    columns?: number,
+                    collapse?: {
+                        level?: number,
+                        allChildren?: boolean
+                    }
+                }
+            };
+        },
+        /**
+         * Minimize/Maximize node. The template has to have min defined. Default value - *false*.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *      min: true
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/MinMax | See doc...}
+         */
+        min?: false,
+        /**
+         * Node binding in Org Chart JS maps node data to node template parameters.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   nodeBinding: {
+         *       field_0: "name"
+         *   },
+         *   nodes: [
+         *       { id: 1, name: "Amber McKenzie" }
+         *   ]
+         * });
+         * ```
+         */
+        nodeBinding?: { [key: string]: string },
+        /**
+         * Link binding in Org Chart JS maps node data to link template parameters.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   nodeBinding: {
+         *       link_field_0: "createdAt"
+         *   },
+         *   nodes: [
+         *       { id: "1", name: "Amber McKenzie"  },
+         *       { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
+         *       { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
+         *   ]
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Link | See doc...}
+         */
+        linkBinding?: { [key: string]: string },
+        /**
+         * Search by the fields defined in searchFields.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   searchFields: ["name", "title", etc...]
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
+         */
+        searchFields?: Array<string>,
+        /**
+         * Displays a field in the search result.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   searchDisplayField: "name"
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
+         */
+        searchDisplayField?: string,
+        /**
+         * Search by weight of the fields.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   searchFieldsWeight: {
+         *       "Name": 100, //percent
+         *       "Title": 20 //percent
+         *   }
+         * });
+         * ```
+         * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
+         */
+        searchFieldsWeight?: { [key: string]: number },
+        /**
+         * Array of node data JSON objects. nodes option is the data source of the chart. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties.
+         * - id - unique identifier, it clould be integer or string
+         * - pid - is the parent id
+         * - stpid - subtree parent id
+         * - ppid - parent partner id
+         * - tags - array of strings
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   nodes: [
+         *       { id: 1 },
+         *       { id: 2, pid: 1, tags: ["Sales"] },
+         *       { id: 3, stpid: 2  }
+         *   ]
+         * });
+         * ```
+         */
+        nodes?: Array<string | number>,
+        /**
+         * Adds curved link.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   clinks: [
+         *       from: 4, to: 0, label: 'text'}, 
+         *       {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
+         *       {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
+         *   ]
+         * });
+         * ```
+         */
+        clinks?: Array<OrgChart.link>,
+        /**
+         * Adds second link.
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   slinks: [
+         *       from: 4, to: 0, label: 'text'}, 
+         *       {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
+         *       {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
+         *   ]
+         * });
+         * ```
+         */
+        slinks?: Array<OrgChart.link>,
+        /**
+         * The gap between each level. Default value - *60*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   levelSeparation: 50
+         * });
+         * ```
+         */
+        levelSeparation?: number,
+        /**
+         * The gap between nodes in a subtree. Default value - *20*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   siblingSeparation: 50
+         * });
+         * ```
+         */
+        siblingSeparation?: number,
+        /**
+         * The gap between subtrees. Default value - *40*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   subtreeSeparation: 50
+         * });
+         * ```
+         */
+        subtreeSeparation?: number,
+        /**
+         * The gap between nodes in vertical layout. Default value - *20*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   mixedHierarchyNodesSeparation: 5
+         * });
+         * ```
+         */
+        mixedHierarchyNodesSeparation?: number,
+        /**
+         * Set the assistant separation value. Default value - *100*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   assistantSeparation: 150
+         * });
+         * ```
+         */
+        assistantSeparation?: number,
+        /**
+         * Minimum gap between partner and node with partners. Default value - *50*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   minPartnerSeparation: 100
+         * });
+         * ```
+         */
+        minPartnerSeparation?: number,
+        /**
+         * Gap between partner links. Default value - *20*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   partnerChildrenSplitSeparation: 50
+         * });
+         * ```
+         */
+        partnerChildrenSplitSeparation?: number,
+        /**
+         * Gap between partners. Default value - *15*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   partnerNodeSeparation: 30
+         * });
+         * ```
+         */
+        partnerNodeSeparation?: number,
+        /**
+         * The number of colums if the chart has multiple root nodes. Default value - *10*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   columns: 1
+         * });
+         * ```
+         */
+        columns?: number,
+        /**
+         * The padding option sets the padding area on all four sides of the OrgChart. Default value - *30*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   padding: 20
+         * });
+         * ```
+         */
+        padding?: number,
+        /**
+         * Specifies the orientation of the Org Chart JS. could accept one of the following values:
+         * - OrgChart.orientation.top
+         * - OrgChart.orientation.bottom
+         * - OrgChart.orientation.right
+         * - OrgChart.orientation.left
+         * - OrgChart.orientation.top_left
+         * - OrgChart.orientation.bottom_left
+         * - OrgChart.orientation.right_top
+         * - OrgChart.orientation.left_top
+         * 
+         * Default value - *OrgChart.orientation.top*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   orientation: OrgChart.orientation.bottom
+         * });
+         * ```
+         */
+        orientation?: OrgChart.orientation,
+        /**
+         * Sets the layout algoritm:
+         * - OrgChart.layout.normal
+         * - OrgChart.layout.mixed
+         * - OrgChart.layout.tree
+         * - OrgChart.layout.treeLeftOffset
+         * - OrgChart.layout.treeRightOffset
+         * 
+         * Default value - *OrgChart.layout.normal*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   layout: OrgChart.layout.mixed
+         * });
+         * ```          
+         */
+        layout?: OrgChart.layout | number,
+        /**
+         * The scale factor determines what fraction of the entire scale is visible at one time.
+         * - OrgChart.match.height
+         * - OrgChart.match.width
+         * - OrgChart.match.boundary
+         * - [number]
+         * 
+         * Default value - *1*
+         * ```typescript     
+         * var chart = new OrgChart('#tree', {
+         *   scaleInitial: OrgChart.match.boundary
+         * });
+         * ```          
+         * {@link https://balkan.app/OrgChartJS/Docs/Layout | See doc...}         
+         */
+        scaleInitial?: number | OrgChart.match,
+        /**
+         * Determines the minimum scale factor. Default value - *0.1*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   scaleMin: 0.2
+         * });
+         * ```          
+         */
+        scaleMin?: number,
+        /**
+         * Determines the naximum scale factor. Default value - *5*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   scaleMax: 10
+         * });
+         * ```          
+         */
+        scaleMax?: number,
+        /**
+          * The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - *null*
+          * ```typescript       
+          * var chart = new OrgChart('#tree', {
+          *   orderBy: "orderId",
+          *   nodes: [
+          *       { id: 10, pid: 1, orderId: 2 },
+          *       { id: 11, pid: 1, orderId: 1 }
+          *   ]
+          * });
+          * ```    
+          * ```typescript       
+          * var chart = new OrgChart('#tree', {
+          *   orderBy: [field: "orderId", desc: true],
+          *   nodes: [
+          *       { id: 10, pid: 1, orderId: 2 },
+          *       { id: 11, pid: 1, orderId: 1 }
+          *   ]
+          * });
+          * ```      
+          */
+        orderBy?: string,
+        /**
+          * @ignore
+          */
+        editUI?: OrgChart.editUI,
+        /**
+          * @ignore
+          */
+        searchUI?: OrgChart.searchUI,
+        /**
+          * @ignore
+          */
+        xScrollUI?: any,
+        /**
+          * @ignore
+          */
+        yScrollUI?: any,
+        /**
+          * @ignore
+          */
+        nodeMenuUI?: OrgChart.menuUI,
+        /**
+          * @ignore
+          */
+        nodeCircleMenuUI?: OrgChart.circleMenuUI,
+        /**
+          * @ignore
+          */
+        nodeContextMenuUI?: OrgChart.menuUI,
+        /**
+          * @ignore
+          */
+        toolbarUI?: OrgChart.toolbarUI,
+        /**
+         * @ignore
+         */
+        notifierUI?: any,
+        /**
+         * @ignore
+         */        
+        menuUI?: OrgChart.menuUI,
+        /**
+         * @ignore
+         */
+         UI?: any,        
+        /**
+         * The URL to the export server. Default value - *https://balkan.app/export*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   exportUrl: "https://balkan.app/export"
+         * });
+         * ```          
+         */        
+        exportUrl?: string,
+        /**
+         * Collapse specified level of the chart and its children if allChildren is true.
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   collapse: {level: 2, allChildren: true}
+         * });
+         * ```          
+         */         
+        collapse?: {
+            level: number,
+            allChildren?: boolean
+        },
+        /**
+         * Expand specified node ids and its children if allChildren is true. The expand option works only if collapse is set.
+         * 
+         * In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   collapse: {level: 2, allChildren: true},
+         *   expand: {nodes: [155], allChildren: true}
+         * });
+         * ```          
+         */         
+        expand?: {
+            nodes?: Array<string | number>,
+            allChildren?: boolean
+        },
+        /**
+         * The align option specifies the alignment of the nodes inside Org Chart JS.
+         * - OrgChart.align.center - centered
+         * - OrgChart.align.orientation - according to the orientation option
+         * 
+         * Default value - *OrgChart.align.center*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   align: OrgChart.align.orientation
+         * });
+         * ```          
+         */         
+        align?: OrgChart.align | number,
+        /**
+         * Can be used to control the transition of the nodes on expand/collapse operation. Default value - *func: OrgChart.anim.outPow, duration: 200*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   anim: {func: OrgChart.anim.outBack, duration: 500}
+         * });
+         * ```          
+         */                 
+        anim?: {
+            /**
+             * defines how long time an animation should take to complete
+             */
+            func?: OrgChart.anim,
+            /**
+             * Easing functions specify the speed at which an animation progresses at different points within the animation.
+             */
+            duration?: number
+        },
+        /**
+         * Can be used to control the zooming sensitivity. Default value - *speed: 120, smooth: 12*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   zoom: {speed: 130, smooth: 10}
+         * });
+         * ```          
+         */          
+        zoom?: {
+            speed?: number,
+            smooth?: number
+        },
+        /**
+         * Define nodes as roots. Default value - *null*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   roots: [2, 4]
+         * });
+         * ```          
+         */           
+        roots?: Array<string | number>,
+        /**
+         * Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - *null*
+         * ```typescript       
+         * var chart = new OrgChart('#tree', {
+         *   state: {
+         *       name: 'StateForMyOrgChart',
+         *       readFromLocalStorage: true,
+         *       writeToLocalStorage: true,
+         *       readFromIndexedDB: true,
+         *       writeToIndexedDB: true,
+         *       readFromUrlParams: true,                    
+         *       writeToUrlParams: true
+         *   }
+         * });
+         * ```          
+         */          
+        state?: {
+            name?: string,
+            readFromLocalStorage?: boolean,
+            writeToLocalStorage?: boolean,
+            readFromIndexedDB?: boolean,
+            writeToIndexedDB?: boolean,
+            readFromUrlParams?: boolean,
+            writeToUrlParams?: boolean
+        },
+        /**
+         * Configure the buildin edit form.
+         * {@link https://balkan.app/OrgChartJS/Docs/Edit | See doc...}   
+         */                
+        editForm?: {
+            readOnly?: boolean,
+            titleBinding?: string,
+            photoBinding?: string,
+            addMore?: string,
+            addMoreBtn?: string,
+            addMoreFieldName?: string,
+            generateElementsFromFields?: boolean,
+            buttons?: {
+                [key: string]: {
+                    icon?: string,
+                    text?: string,
+                    hideIfEditMode?: boolean,
+                    hideIfDetailsMode?: boolean
+                }
+            },
+            elements?: { [key: string]: OrgChart.editFormElement | Array<OrgChart.editFormElement> }
+        }
+    }
 }export default OrgChart