├── bower.json
├── package.json
├── README.md
└── orgchart.d.ts


/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "orgchart.js",
 3 |     "authors": [
 4 |       "BALKAN App"
 5 |     ],
 6 |     "description": "OrgChart JS is a simple, flexible and highly customizable organization chart plugin.",
 7 |     "main": "orgchart.js",
 8 |     "keywords": [
 9 |       "diagram",
10 |       "chart",
11 |       "tree",
12 |       "orgchart",
13 |       "graph",
14 |       "svg",
15 |       "hierarchy",
16 |       "family-tree",
17 |       "decision-tree",
18 |       "visualization",
19 |       "tree-layout",
20 |       "hierarchical",
21 |       "javascript",
22 |       "js",
23 |       "html",
24 |       "html5"
25 |     ],
26 |     "license": "MIT",
27 |     "homepage": "https://balkan.app"
28 |   }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {"author":{"name":"BALKAN App"},"bugs":{"email":"support@balkan.app","url":"https://github.com/BALKANGraph/OrgChartJS/issues"},"deprecated":false,"description":"Ultimate Organizational Chart JavaScript library, Interactive Diagrams","files":["orgchart.js","orgchart.d.ts","package.json","README.md"],"homepage":"https://balkan.app/","keywords":["diagram","chart","tree","orgchart","graph","svg","hierarchy","family-tree","decision-tree","visualization","tree-layout","hierarchical","javascript","js","html","html5"],"license":"SEE LICENSE IN https://balkan.app","main":"orgchart.js","types":"orgchart.d.ts","name":"@balkangraph/orgchart.js","repository":{"type":"git","url":"https://github.com/BALKANGraph/OrgChartJS"},"dependencies":{},"version":"9.00.03"}


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ![OrgChart JS](https://balkangraph.com/content/img/icon-orgchart-js.png) OrgChart JS
 2 | Build organizational chart app with BALKAN OrgChart JS JavaScript library. **OrgChart JS** is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.
 3 | 
 4 | ![OrgChart JS](https://balkan.app/Content/Img/oc.png)
 5 | 
 6 | ## [Demos](https://balkan.app/OrgChartJS/Demos/BasicUsage)        [Docs](https://balkan.app/OrgChartJS/Docs/GettingStarted)        [Download](https://balkan.app/OrgChartJS/Download)       [Support](https://balkan.app/OrgChartJS/Support)
 7 | 
 8 | ## Features
 9 | - Supports both local data and remote data (JSON)
10 | - Smooth expand/collapse effects
11 | - Align the chart in 8 orientations
12 | - Allows user to change orgchart structure by drag/drop nodes
13 | - Supports pan and zoom
14 | - Edit Form
15 | - Node Customization
16 | - Search
17 | - Scroll Bars
18 | - Lazy Loading
19 | - Mixed Hierarchy
20 | - Exporting
21 | - Assistant
22 | - Partners
23 | - Sub Trees
24 | - Family Tree
25 | 
26 | ## Installation
27 | Option 1 - [standalone build](https://balkan.app/OrgChartJS/Docs/GettingStarted)
28 | 
29 | Option 2 - NPM
30 | ```
31 | npm i @balkangraph/orgchart.js
32 | ```
33 | 
34 | Option 3 - Bower
35 | ```
36 | bower install orgchart.js
37 | ```
38 | 
39 | 
40 | ## Usage
41 | ```
42 | <script src="https://balkan.app/js/orgchart.js"></script>
43 | <div id="tree"/>
44 | <script> 
45 | var chart = new OrgChart(document.getElementById("tree"), {
46 |     nodeBinding: {
47 |         field_0: "name"
48 |     },
49 |     nodes: [
50 |         { id: 1, name: "Amber McKenzie" },
51 |         { id: 2, pid: 1, name: "Ava Field" },
52 |         { id: 3, pid: 1, name: "Peter Stevens" }
53 |     ]
54 | });
55 | </script>
56 | ```
57 | 
58 | 
59 | ## 1 click to talk 2 us
60 | 
61 | [![OrgChart](https://balkangraph.com/content/img/phone-icon4.png)](https://webcall.me/BALKANGraph)
62 | 


--------------------------------------------------------------------------------
/orgchart.d.ts:
--------------------------------------------------------------------------------
   1 | 
   2 | 
   3 | 
   4 | /**
   5 |  * ```typescript  
   6 |  * <!DOCTYPE html>
   7 |  * <html>
   8 |  *  <head>    
   9 |  *    <meta charset="utf-8">
  10 |  *    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11 |  *    <title>OrgChartJS</title>
  12 |  *    <style>
  13 |  *        html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: Helvetica; }
  14 |  *        #tree { width: 100%; height: 100%; }
  15 |  *    </style>
  16 |  * </head>
  17 |  * <body>
  18 |  *    <script src="https://cdn.balkan.app/orgchart.js"></script>
  19 |  *    <div id="tree"></div>
  20 |  *    <script>
  21 |  *        let chart = new OrgChart(document.getElementById("tree"), {
  22 |  *            mouseScrool: OrgChart.action.scroll,
  23 |  *            enableDragDrop: true,
  24 |  *            nodeBinding: { field_0: "name" },
  25 |  *            nodes: [
  26 |  *                { id: 1, name: "Amber McKenzie" },
  27 |  *                { id: 2, pid: 1, name: "Ava Field" },
  28 |  *                { id: 3, pid: 1, name: "Peter Stevens" }
  29 |  *            ]
  30 |  *        });
  31 |  *    </script>
  32 |  * </body>
  33 |  * </html>
  34 |  * ```
  35 |  */
  36 | declare class OrgChart {
  37 |     /**
  38 |      * ```typescript     
  39 |      * let chart = new OrgChart('#tree', {});
  40 |      * ```
  41 |      * @param element HTML element or string selector for example '#tree'
  42 |      * @param options configuration options
  43 |      */
  44 |     constructor(element?: HTMLElement | string, options?: OrgChart.options);
  45 | 
  46 | 
  47 |         /**
  48 |          * SVG icons
  49 |          * @param w - width 
  50 |          * @param h - height
  51 |          * @param c - color
  52 |          * @param x - X position
  53 |          * @param y  - Y position
  54 |          * @returns string with the SVG definition
  55 |          */
  56 |     static icon: {
  57 |         /**
  58 |          *  ```typescript  
  59 |          * let pngIcon = OrgChart.icon.png(24, 24, "#7A7A7A");
  60 |          * ```
  61 |          */
  62 |         png: (w: string| number, h: string | number, c: string) => string,
  63 |         /**
  64 |          *  ```typescript  
  65 |          * let pdfIcon = OrgChart.icon.pdf(24, 24, "#7A7A7A");
  66 |          * ```
  67 |          */
  68 |         pdf: (w: string | number, h: string | number, c: string) => string,
  69 |         /**
  70 |          *  ```typescript  
  71 |          * let svgIcon = OrgChart.icon.svg(24, 24, "#7A7A7A");
  72 |          * ```
  73 |          */
  74 |         svg: (w: string| number, h: string| number, c: string | number) => string,
  75 |         /**
  76 |          * ```typescript
  77 |          * let csvIcon = OrgChart.icon.csv(24, 24, "#7A7A7A");
  78 |          * ```
  79 |          */
  80 |         csv: (w: string| number, h: string| number, c: string| number) => string,
  81 |         /**
  82 |          * ```typescript
  83 |          * let excelIcon = OrgChart.icon.excel(24, 24, "#7A7A7A");
  84 |          * ```
  85 |          */
  86 |         excel: (w: string| number, h: string| number, c: string| number) => string,
  87 |         /**
  88 |          * ```typescript
  89 |          * let powerPointIcon = OrgChart.icon.powerpoint(24, 24, "#7A7A7A");
  90 |          * ```
  91 |          */
  92 |         powerpoint: (w: string| number, h: string| number, c: string| number) => string,
  93 |         /**
  94 |          * ```typescript
  95 |          * let powerPointPreviewIcon = OrgChart.icon.pppreview(24, 24, "#7A7A7A");
  96 |          * ```
  97 |          */
  98 |         pppreview: (w: string| number, h: string| number, c: string| number) => string,
  99 |         /**
 100 |          * ```typescript
 101 |          * let editIcon = OrgChart.icon.edit(24, 24, "#7A7A7A");
 102 |          * ```
 103 |          */
 104 |         edit: (w: string| number, h: string| number, c: string| number) => string,
 105 |         /**
 106 |          * ```typescript
 107 |          * let detailsIcon = OrgChart.icon.details(24, 24, "#7A7A7A");
 108 |          * ```
 109 |          */
 110 |         details: (w: string| number, h: string| number, c: string| number) => string,
 111 |         /**
 112 |          * ```typescript
 113 |          * let removeIcon = OrgChart.icon.remove(24, 24, "#7A7A7A");
 114 |          * ```
 115 |          */
 116 |         remove: (w: string| number, h: string| number, c: string| number) => string,
 117 |         /**
 118 |          * ```typescript
 119 |          * let addIcon = OrgChart.icon.add(24, 24, "#7A7A7A");
 120 |          * ```
 121 |          */
 122 |         add: (w: string| number, h: string| number, c: string| number) => string,
 123 |         /**
 124 |          * ```typescript
 125 |          * let xmlIcon = OrgChart.icon.xml(24, 24, "#7A7A7A");
 126 |          * ```
 127 |          */
 128 |         xml: (w: string| number, h: string| number, c: string| number) => string,
 129 |         /**
 130 |          * ```typescript
 131 |          * let visioIcon = OrgChart.icon.visio(24, 24, "#7A7A7A");
 132 |          * ```
 133 |          */
 134 |         visio: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 135 |         /**
 136 |          * ```typescript
 137 |          * let linkIcon = OrgChart.icon.link(24, 24, "#7A7A7A");
 138 |          * ```
 139 |          */
 140 |         link: (w: string| number, h: string| number, c: string| number) => string,
 141 |         /**
 142 |          * ```typescript
 143 |          * let happyIcon = OrgChart.icon.happy(24, 24, "#7A7A7A");
 144 |          * ```
 145 |          */
 146 |         happy: (w: string| number, h: string| number, c: string| number) => string,
 147 |         /**
 148 |          * ```typescript
 149 |          * let sadIcon = OrgChart.icon.sad(24, 24, "#7A7A7A");
 150 |          * ```
 151 |          */
 152 |         sad: (w: string| number, h: string| number, c: string| number) => string,
 153 |         /**
 154 |          * ```typescript
 155 |          * let shareIcon = OrgChart.icon.share(24, 24, "#7A7A7A");
 156 |          * ```
 157 |          */
 158 |         share: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 159 |         /**
 160 |          * ```typescript
 161 |          * let userIcon = OrgChart.icon.user(24, 24, "#7A7A7A");
 162 |          * ```
 163 |          */
 164 |         user: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 165 |         /**
 166 |          * ```typescript
 167 |          * let undoIcon = OrgChart.icon.undo(24, 24, "#7A7A7A");
 168 |          * ```
 169 |          */
 170 |         undo: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 171 |         /**
 172 |          * ```typescript
 173 |          * let redoIcon = OrgChart.icon.redo(24, 24, "#7A7A7A");
 174 |          * ```
 175 |          */
 176 |         redo: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 177 | 
 178 |        
 179 |         /**
 180 |          * ```typescript
 181 |          * let fitIcon = OrgChart.icon.fit(24, 24, "#7A7A7A");
 182 |          * ```
 183 |          */
 184 |         fit: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 185 | 
 186 | 
 187 |         /**
 188 |          * ```typescript
 189 |          * let expand_allIcon = OrgChart.icon.expand_all(24, 24, "#7A7A7A");
 190 |          * ```
 191 |          */
 192 |         expand_all: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 193 | 
 194 |                 /**
 195 |          * ```typescript
 196 |          * let full_screenIcon = OrgChart.icon.full_screen(24, 24, "#7A7A7A");
 197 |          * ```
 198 |          */
 199 |         full_screen: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 200 |         /**
 201 |          * ```typescript
 202 |          * let zoom_inIcon = OrgChart.icon.zoom_in(24, 24, "#7A7A7A");
 203 |          * ```
 204 |          */
 205 |         zoom_in: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 206 |         /**
 207 |          * ```typescript
 208 |          * let zoom_outIcon = OrgChart.icon.zoom_out(24, 24, "#7A7A7A");
 209 |          * ```
 210 |          */
 211 |         zoom_out: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 212 |         /**
 213 |          * ```typescript
 214 |          * let layout_mixedIcon = OrgChart.icon.layout_mixed(24, 24, "#7A7A7A");
 215 |          * ```
 216 |          */
 217 |         layout_mixed: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 218 |         /**
 219 |          * ```typescript
 220 |          * let layout_normalIcon = OrgChart.icon.layout_normal(24, 24, "#7A7A7A");
 221 |          * ```
 222 |          */
 223 |         layout_normal: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 224 |         /**
 225 |          * ```typescript
 226 |          * let layout_right_offsetIcon = OrgChart.icon.layout_right_offset(24, 24, "#7A7A7A");
 227 |          * ```
 228 |          */
 229 |         layout_right_offset: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 230 |         /**
 231 |          * ```typescript
 232 |          * let layout_left_offsetIcon = OrgChart.icon.layout_left_offset(24, 24, "#7A7A7A");
 233 |          * ```
 234 |          */
 235 |         layout_left_offset: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 236 |         /**
 237 |          * ```typescript
 238 |          * let layout_treeIcon = OrgChart.icon.layout_tree(24, 24, "#7A7A7A");
 239 |          * ```
 240 |          */
 241 |         layout_tree: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 242 |         /**
 243 |          * ```typescript
 244 |          * let layout_gridIcon = OrgChart.icon.layout_grid(24, 24, "#7A7A7A");
 245 |          * ```
 246 |          */
 247 |         layout_grid: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 248 |         /**
 249 |          * ```typescript
 250 |          * let cursorIcon = OrgChart.icon.cursor(24, 24, "#7A7A7A");
 251 |          * ```
 252 |          */
 253 |         cursor: (w: string| number, h: string| number, c: string| number, x?: string| number, y?: string| number) => string,
 254 | 
 255 | 
 256 |     }
 257 | 
 258 | 
 259 | 
 260 |     /**
 261 |      * Can update link (Does the node is dropping under itself)
 262 |      * ```typescript
 263 |      * let canDropTheNode = chart.canUpdateLink(draggedNodeId, droppedNodeId));
 264 |      * ```
 265 |      * @param id child id
 266 |      * @param pid parent id
 267 |      */
 268 |     canUpdateLink(id: string | number, pid: string | number): boolean;
 269 |     
 270 | 
 271 |     /**
 272 |      * The on() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.     * 
 273 |      * ```typescript
 274 |      * let chart = new OrgChart('#tree', {});
 275 |      * chart.on('init', function () {
 276 |      *      // console.log("initiated")
 277 |      * })
 278 |      * chart.load(nodes);
 279 |      * ```
 280 |      * @category Event Listeners
 281 |      * @param type A case-sensitive string representing the event type to listen for.
 282 |      * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
 283 |      */
 284 |     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" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener: (sender: OrgChart, args?: any, args1?: any, args2?: any) => void | boolean): OrgChart;
 285 | 
 286 |     /**
 287 |      * Removes an event listener previously registered. The event listener to be removed is identified using a combination of the event type and the event listener function itself. Returns true if success and false if fail.
 288 |      * ```typescript
 289 |      * let chart = new OrgChart('#tree', {});
 290 |      * let listener = function(sender, args){
 291 |      *      console.log(sender.removeListener('update', listener));
 292 |      * };
 293 |      * chart.on('update', listener);
 294 |      * chart.load(nodes)
 295 |      * ```
 296 |     };
 297 | 
 298 |     family.on('update', listener);
 299 |      * @param type A string which specifies the type of event for which to remove an event listener
 300 |      * @param listener The event listener function of the event handler to remove from the event target
 301 |      */
 302 |     removeListener(type: "init" | "field" | "update" | "add" | "remove" | "renderbuttons" | "label" | "render-link" | "drag" | "drop" | "redraw" | "expcollclick" | "exportstart" | "exportend" | "click" | "dbclick" | "slink-click" | "clink-click" | "up-click" | "searchclick" | "import" | "updated" | "key-down" | "visibility-change" | "renderdefs" | "render" | "prerender" | "screen-reader-text" | "ready" | "ripple" | "node-initialized" | "nodes-initialized" | "node-layout", listener?: () => void): boolean;
 303 | 
 304 | 
 305 |     /**
 306 |      * Occurs when the node data has been updated by updateNode method.
 307 |      *  ```typescript     
 308 |      * var chart = new OrgChart('#tree', {});
 309 |      * chart.onUpdateNode((args) => {
 310 |      *  //return false; to cancel the operation
 311 |      * });
 312 |      * ```
 313 |      * @category Event Listeners
 314 |      * @param listener 
 315 |      */
 316 |     onUpdateNode(listener: (args: {
 317 |         /**
 318 |          * old node data
 319 |          */
 320 |         oldData: nodeData,
 321 |         /**
 322 |          * new node data
 323 |          */
 324 |         newData: nodeData
 325 |     }) => void): OrgChart;
 326 | 
 327 |         /**
 328 |      * Occurs when new nodes are added, removed, updated or imported, also when slink or clink is added or removed and after undo or redo operations.
 329 |      * Use this event listener to synch your server side database with this.config.nodes, this.config.clinks, this.config.slinks etc.
 330 |      *  ```typescript     
 331 |      * var chart = new OrgChart('#tree', {});
 332 |      * chart.onUpdated(() => {
 333 |      *  //Update your server database with this.config.nodes, this.config.clinks, this.config.slinks etc.
 334 |      * });
 335 |      * ```
 336 |      * @category Event Listeners
 337 |      */
 338 |     onUpdated(): OrgChart;
 339 | 
 340 |     
 341 |     /**
 342 |      * Occurs when a node has been removed by removeNode method. 
 343 |      *  ```typescript     
 344 |      * var chart = new OrgChart('#tree', {});
 345 |      * chart.onRemoveNode((args) => {
 346 |      *  //return false; to cancel the operation
 347 |      * });
 348 |      * ```
 349 |      * @category Event Listeners
 350 |      * @param listener 
 351 |      */
 352 |     onRemoveNode(listener: (args: {
 353 |         /**
 354 |          * node id
 355 |          */
 356 |         id: number | string,
 357 |         /**
 358 |          * 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.
 359 |          */
 360 |         newPidsAndStpidsForIds: {
 361 |             newPidsForIds: { [key in any]: string | number },
 362 |             newStpidsForIds: { [key in any]: string | number }
 363 |         }
 364 |     }) => void): OrgChart;
 365 | 
 366 |     /**
 367 |      * Occurs when a node has been added by addNode method.
 368 |      *  ```typescript     
 369 |      * var chart = new OrgChart('#tree', {});
 370 |      * chart.onAddNode((args) => {     
 371 |      *  //return false; to cancel the operation
 372 |      * });
 373 |      * ```
 374 |      * @category Event Listeners
 375 |      * @param listener 
 376 |      */
 377 |     onAddNode(listener: (args: {
 378 |         /**
 379 |          * new added data node
 380 |          */
 381 |         data: nodeData
 382 |     }) => void): OrgChart;
 383 |     /**
 384 |      * The onDrag event occurs when a node is dragged. *enableDragDrop* option has to be turned on.
 385 |      *  ```typescript     
 386 |      * var chart = new OrgChart('#tree', {});
 387 |      * chart.onDrag(() => {
 388 |      *  //return false; to cancel the operation
 389 |      * });
 390 |      * ```
 391 |      * @category Event Listeners
 392 |      * @param listener 
 393 |      */
 394 |     onDrag(listener: (args: {
 395 |         /**
 396 |          * dragged node id
 397 |          */
 398 |         dragId: string | number, 
 399 |         event: MouseEvent,
 400 |         /**
 401 |          * array of node ids
 402 |          * 
 403 |          * this property is initialized only if movable option is set
 404 |          */
 405 |         nodeIds: Array<string | number>
 406 |     }) => void): OrgChart;
 407 |     /**
 408 |      * The onDrop event occurs when a node is dropped. *enableDragDrop* option has to be turned on.
 409 |      *  ```typescript     
 410 |      * var chart = new OrgChart('#tree', {});
 411 |      * chart.onDrop(() => {
 412 |      *  //return false; to cancel the operation
 413 |      * });
 414 |      * ```
 415 |      * @category Event Listeners
 416 |      * @param listener 
 417 |      */
 418 |     onDrop(listener: (args: {
 419 |         /**
 420 |          * dragged node id
 421 |          */
 422 |         dragId: string | number,
 423 |         /**
 424 |          * dropped node id
 425 |          */
 426 |         dropId: string | number,
 427 |         /**
 428 |          * draging element
 429 |          */
 430 |         dragNodeElement: HTMLElement,
 431 |         /**
 432 |          * Mouse event
 433 |          */
 434 |         event: MouseEvent
 435 |     }) => void): OrgChart;
 436 | 
 437 |     /**
 438 |      * All chart nodes
 439 |      * ```typescript  
 440 |      * let chart = new OrgChart('#tree', {});
 441 |      * chart.onInit(() => {
 442 |      *      let nodes = chart.nodes;
 443 |      * });
 444 |      * chart.load(nodes)
 445 |      * ```
 446 |      */
 447 |     nodes: { [key in any]: OrgChart.node };
 448 | 
 449 |     /**
 450 |      * Returns true if chart is visible
 451 |      * ```typescript  
 452 |      * let chart = new OrgChart('#tree', {});
 453 |      * chart.onInit(() => {
 454 |      *      console.log(chart.isVisible);
 455 |      * });
 456 |      * chart.load(nodes)
 457 |      * ```
 458 |      */
 459 |     isVisible: boolean;
 460 | 
 461 |    /**
 462 |     * Returns the visible nodes ids
 463 |     * ```typescript  
 464 |     * let chart = new OrgChart('#tree', {});
 465 |     * chart.onInit(() => {
 466 |     *      console.log(chart.visibleNodeIds);
 467 |     * });
 468 |     * chart.load(nodes)
 469 |     * ```
 470 |     */
 471 |     visibleNodeIds: Array<number | string>;
 472 | 
 473 |     /**
 474 |      * Updates the node data
 475 |      * ```typescript     
 476 |      * let chart = new OrgChart('#tree', {});
 477 |      * ...
 478 |      * chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
 479 |      * chart.draw();
 480 |      * ```
 481 |      * @param newData node data
 482 |      */
 483 |     update(newData: object): OrgChart;
 484 | 
 485 |     /**
 486 |      * Removes specified node from nodes collection
 487 |      * ```typescript     
 488 |      * let chart = new OrgChart('#tree', {});
 489 |      * ...
 490 |      * chart.remove(2);
 491 |      * chart.draw();
 492 |      * ```
 493 |      
 494 |      * @param id identification number of the node
 495 |      */
 496 |     remove(id: string | number): OrgChart;
 497 |     /**
 498 |      * Adds new node to the nodes collection
 499 |      * ```typescript     
 500 |      * let chart = new OrgChart('#tree', {});
 501 |      * ...
 502 |      * chart.add({ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager" })
 503 |      * chart.draw();
 504 |      * ```
 505 |      
 506 |      * @param data node data
 507 |      */
 508 |     add(data: object): OrgChart;
 509 | 
 510 |     /**
 511 |      * Adds new node to the nodes collection, redraws the chart and fires remove event
 512 |      * ```typescript     
 513 |      * let chart = new OrgChart('#tree', {});
 514 |      * ...
 515 |      * chart.addNode({ id: 1, name: "Denny Curtis", title: "CEO" });
 516 |      * ```
 517 |      * @param data node data
 518 |      * @param callback called at the end of animation
 519 |      * @param fireEvent indicates if the add event will be called or not
 520 |      */
 521 |     addNode(data: nodeData, callback?: () => void, fireEvent?: boolean): void;  
 522 | 
 523 |     /**
 524 |      * Removes specified node from nodes collection, redraws the chart and fires remove event.
 525 |      * ```typescript
 526 |      * var chart = new OrgChart('#tree', {});
 527 |      * chart.removeNode(2);
 528 |      * ```
 529 |      * @param id identification number of the node
 530 |      * @param callback called at the end of animation
 531 |      * @param fireEvent indicates if the remove event will be called or not
 532 |      */
 533 |     removeNode(id: string | number, callback?: () => void, fireEvent?: boolean): void;
 534 | 
 535 |     
 536 |     /**
 537 |      * Gets node data.
 538 |      * ```typescript     
 539 |      * let chart = new OrgChart('#tree', {});
 540 |      * ...
 541 |      * let node = chart.get(2);
 542 |      * ```
 543 |      * @param id identification number of the node
 544 |      */
 545 |     get(id: string | number): nodeData;
 546 |     /**
 547 |      * If specified node has assistant/s or partner/s as children will return false.
 548 |      * ```typescript     
 549 |      * let chart = new OrgChart('#tree', {});
 550 |      * ...
 551 |      * let canRemove = chart.canRemove(2);
 552 |      * ```
 553 |      * @param id identification number of the node
 554 |      */
 555 |     canRemove(id: string | number): boolean;
 556 |     /**
 557 |      * Expands specified nodes.
 558 |      * ```typescript     
 559 |      * let chart = new OrgChart('#tree', {});
 560 |      * ...
 561 |      * chart.expand(1, [2]);
 562 |      * ```
 563 |      * @param id  the id of the node that will not move during the animation 
 564 |      * @param ids node ids that will be expanded
 565 |      * @param callback called after the animation completes
 566 |      */
 567 |     expand(id: string | number, ids: Array<string | number> | "all", callback?: () => void): void;
 568 |     /**
 569 |      * Collapses specified nodes.
 570 |      * ```typescript     
 571 |      * let chart = new OrgChart('#tree', {});
 572 |      * ...
 573 |      * chart.collapse(1, [2]);
 574 |      * ```
 575 |      * @param id  the id of the node that will not move
 576 |      * @param ids node ids that will be collapsed
 577 |      * @param callback called after the animation completes
 578 |      */
 579 |     collapse(id: string | number, ids: Array<string | number>, callback?: () => void): void;
 580 |     /**
 581 |      * Expand/Collapse lists of nodes.
 582 |      * ```typescript     
 583 |      * let chart = new OrgChart('#tree', {});
 584 |      * ...
 585 |      * chart.expandCollapse(1, [2], [3]);
 586 |      * ```
 587 |      * @param id the id of the node that will not move
 588 |      * @param expandIds expand all nodes with ids
 589 |      * @param collapseIds collpase all nodes with ids
 590 |      * @param callback called after the animation completes
 591 |      */
 592 |     expandCollapse(id: string | number, expandIds: Array<string | number>, collapseIds: Array<string | number>, callback?: () => void): void;
 593 |     /**
 594 |      * Changes roots order.     
 595 |      * ```typescript     
 596 |      * let chart = new OrgChart('#tree', {});
 597 |      * ...
 598 |      * chart.changeRoots(1, [2]);
 599 |      * ```
 600 |      * @param id id of a node that will not change is position, can be null
 601 |      * @param roots roots id array in the required order
 602 |      * @param callback called after the roots are changed and animation completes
 603 |      */
 604 |     changeRoots(id: string | number, roots: Array<string | number>, callback?: () => void): void;
 605 |     /**
 606 |      * Maximize the node. Without parameters maximize all nodes.
 607 |      * ```typescript     
 608 |      * let chart = new OrgChart('#tree', {});
 609 |      * ...
 610 |      * chart.maximize();
 611 |      * ```
 612 |      * @param id the id of the node, if id is null, undefined ot empty string will maximize all nodes
 613 |      * @param horizontalCenter center horizontally 
 614 |      * @param verticalCenter center vertically 
 615 |      * @param callback called when the animation completes
 616 |      */
 617 |     maximize(id?: string | number, horizontalCenter?: boolean, verticalCenter?: boolean, callback?: () => void): void;
 618 |     /**
 619 |      * ```typescript     
 620 |      * let chart = new OrgChart('#tree', {});
 621 |      * ...
 622 |      * chart.minimize();
 623 |      * ```
 624 |      * Minimize the node. Without parameters minimize all nodes.
 625 |      * @param id the id of the node, if id is null, undefined ot empty string will minimize all nodes
 626 |      * @param callback called when the animation completes
 627 |      */
 628 |     minimize(id?: string | number, callback?: () => void): void;
 629 |     /**
 630 |      * Load nodes data.
 631 |      * ```typescript     
 632 |      * let chart = new OrgChart('#tree', {});
 633 |      * ...
 634 |      * chart.load([
 635 |      *  { id: 1, name: "Denny Curtis" },
 636 |      *  { id: 2, pid: 1, name: "Ashley Barnett" },
 637 |      *  { id: 3, pid: 1, name: "Caden Ellison" }
 638 |      * ]);
 639 |      * ```
 640 |      * @param data nodes data array
 641 |      * @param callback function called after the load
 642 |      */
 643 |     load(data: Array<nodeData>, callback?: () => void): OrgChart;
 644 | 
 645 | 
 646 | 
 647 |     /**
 648 |      * Updates the node data, redraws the chart and fires update event.
 649 |      * ```typescript     
 650 |      * let chart = new OrgChart('#tree', {});
 651 |      * ...
 652 |      * chart.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
 653 |      * ```
 654 |      * @param data node data
 655 |      * @param callback function called when the animation completes
 656 |      * @param fireEvent if it set to true the update event is called
 657 |      */
 658 |     updateNode(data: nodeData, callback?: () => void, fireEvent?: boolean): void;
 659 | 
 660 |     /**
 661 |      * Loads nodes from xml.
 662 |      * ```typescript     
 663 |      * let chart = new OrgChart('#tree', {});
 664 |      * let xml = '<?xml version="1.0" encoding="utf-8" ?><nodes><node id="1" pids="2" name="Amber McKenzie" gender="female"/><node id="2" pids="1" name="Ava Field" gender="male"/><node id="3" pids="4,5" mid="1" fid="2" name="Peter Stevens" gender="male"/></nodes>';
 665 |      * chart.loadXML(xml);
 666 |      * ```
 667 |      * @param xml Xml with node structure
 668 |      * @param callback function called after the load
 669 |      */
 670 |     loadXML(xml: string, callback?: () => void): OrgChart;
 671 |     /**
 672 |      * Gets nodes as xml.
 673 |      * ```typescript     
 674 |      * let chart = new OrgChart('#tree', {});
 675 |      * let xml = chart.getXML();
 676 |      * ```
 677 |      */
 678 |     getXML(): string;
 679 |     /**
 680 |      * Draws the chart.
 681 |      * ```typescript     
 682 |      * let chart = new OrgChart('#tree', {});
 683 |      * ...
 684 |      * chart.update({ id: 1, name: "Updated Name", title: "Updated Title" });
 685 |      * chart.draw();
 686 |      * ```
 687 |      * @param action Action for example OrgChart.action.centerNode, default is OrgChart.action.update
 688 |      * @param actionParams parameters for the action
 689 |      * @param callback called when the animation completes
 690 |      */
 691 |     draw(action?: OrgChart.action, actionParams?: any, callback?: () => void): void;
 692 |     /**
 693 |      * Gets the width of the container.
 694 |      * ```typescript     
 695 |      * let chart = new OrgChart('#tree', {});
 696 |      * ...
 697 |      * let width = chart.width();
 698 |      * ```
 699 |      */
 700 |     width(): number;
 701 |     /**
 702 |      * ```typescript     
 703 |      * let chart = new OrgChart('#tree', {});
 704 |      * ...
 705 |      * let height = chart.height();
 706 |      * ```
 707 |      * Gets the height of the container.
 708 |      */
 709 |     height(): number;
 710 |     /**
 711 |      * Gets the view box attribute of the svg html element.
 712 |      * ```typescript     
 713 |      * let chart = new OrgChart('#tree', {});
 714 |      * ...
 715 |      * let viewBox = chart.getViewBox();
 716 |      * ```
 717 |      */
 718 |     getViewBox(): Array<number>;
 719 |     /**
 720 |      * Sets the view box attribute of the svg html element.
 721 |      * ```typescript     
 722 |      * let chart = new OrgChart('#tree', {});
 723 |      * ...
 724 |      * chart.setViewBox();
 725 |      * ```
 726 |      * @param viewBox 
 727 |      */
 728 |     setViewBox(viewBox: Array<number>): void;
 729 |     /**
 730 |      * Gets the current scale of the chart.
 731 |      * ```typescript     
 732 |      * let chart = new OrgChart('#tree', {});
 733 |      * ...
 734 |      * let scale = chart.getScale();
 735 |      * ```
 736 |      * @param viewBox 
 737 |      */
 738 |     getScale(viewBox?: Array<number>): number;
 739 | 
 740 |     /**
 741 |      * Sets the current scale of the chart. 
 742 |      * Returns the actual scale limited by scaleMax and scaleMin
 743 |      * ```typescript     
 744 |      * let chart = new OrgChart('#tree', {});
 745 |      * ...
 746 |      * chart.setScale(1.2);
 747 |      * ```
 748 |      * @param newScale new scale value
 749 |      */
 750 |     setScale(newScale: number): number;
 751 |     /**
 752 |      * Animates specified node with ripple animation - highlight the node.
 753 |      * ```typescript     
 754 |      * let chart = new OrgChart('#tree', {});
 755 |      * ...
 756 |      * chart.ripple(2);
 757 |      * ```
 758 |      * @param id the id of the node
 759 |      * @param clientX x value of the ripple center in the node
 760 |      * @param clientY y value of the ripple center in the node
 761 |      */
 762 |     ripple(id: string | number, clientX?: number, clientY?: number): void;
 763 |     /**
 764 |      * Centers specified node on the screen.
 765 |      * ```typescript     
 766 |      * let chart = new OrgChart('#tree', {});
 767 |      * ...
 768 |      * chart.center(2);
 769 |      * ```
 770 |      * @param nodeId the id of the node
 771 |      * @param options parentState: OrgChart.COLLAPSE_PARENT_NEIGHBORS, childrenState: OrgChart.COLLAPSE_SUB_CHILDRENS, rippleId: rippleId, vertical: false, horizontal: false
 772 |      * @param callback called when the animation completes
 773 |      */
 774 |     center(nodeId: string | number, options?: {
 775 |         parentState: any,
 776 |         childrenState: any,
 777 |         rippleId: string | number,
 778 |         vertical: boolean,
 779 |         horizontal: boolean
 780 |     } | null, callback?: () => void): void;
 781 | 
 782 | 
 783 | 
 784 |     /**
 785 |      * Fits the content to the visible area.
 786 |      * ```typescript     
 787 |      * let chart = new OrgChart('#tree', {});
 788 |      * ...
 789 |      * chart.fit();
 790 |      * ```
 791 |      * @param callback called when the animation completes
 792 |      */
 793 |     fit(callback?: () => void): void;
 794 | 
 795 |         /**
 796 |      * Fits the content to the visible area if it is ouside of the visible area.
 797 |      * ```typescript     
 798 |      * let chart = new OrgChart('#tree', {});
 799 |      * ...
 800 |      * chart.fitOfOutside();
 801 |      * ```
 802 |      * @param callback called when the animation completes
 803 |      */
 804 |     fitIfOutside(callback?: () => void): void;
 805 | 
 806 |     /**
 807 |      * Toggles full screen mode.
 808 |      * ```typescript     
 809 |      * let chart = new OrgChart('#tree', {});
 810 |      * ...
 811 |      * chart.toggleFullScreen();
 812 |      * ```
 813 |      */
 814 |     toggleFullScreen(): void;
 815 |     /**
 816 |      * Gets the node as {@link OrgChart.node} object.
 817 |      * ```typescript     
 818 |      * let chart = new OrgChart('#tree', {});
 819 |      * ...
 820 |      * let node = chart.getNode(2);
 821 |      * ```
 822 |      * @param nodeId 
 823 |      */
 824 |     getNode(nodeId: string | number): OrgChart.node;
 825 | 
 826 | 
 827 |     /**
 828 |      * Sets layout.
 829 |      * ```typescript     
 830 |      * let chart = new OrgChart('#tree', {});
 831 |      * ...
 832 |      * chart.setLayout(OrgChart.tree);
 833 |      * ```
 834 |      * @param layout layout type
 835 |      * @param lcn lyout config name for the specified sub tree
 836 |      */
 837 | 
 838 |     setLayout(layout: OrgChart.layout | number, lcn?: string): void;
 839 |     /**
 840 |      * Sets orientation.
 841 |      * ```typescript     
 842 |      * let chart = new OrgChart('#tree', {});
 843 |      * ...
 844 |      * chart.setOrientation(2);
 845 |      * ```
 846 |      * @param orientation  orientation type
 847 |      * @param lcn lyout config name for the specified sub tree
 848 |      * @param callback called at the end of animation
 849 |      */
 850 |     setOrientation(orientation: OrgChart.orientation, lcn?: string, callback?: () => void): void;
 851 | 
 852 |     /**
 853 |      * ```typescript     
 854 |      * let chart = new OrgChart('#tree', {});
 855 |      * ...
 856 |      * chart.moveNodesToVisibleArea([2, 3]);
 857 |      * ```
 858 |      * Moves specified nodes to the visible area.
 859 |      * @param ids  Array of node ids
 860 |      * @param callback called at the end of animation
 861 |      */
 862 |     moveNodesToVisibleArea(ids: Array<number | string>, callback?: () => void): void;
 863 | 
 864 |     /**
 865 |      * Search in the chart.
 866 |      * ```typescript     
 867 |      * let chart = new OrgChart('#tree', {});
 868 |      * ...
 869 |      * chart.search("Ava");
 870 |      * ```
 871 |      * @param value search for value
 872 |      * @param searchInFields search in field names
 873 |      * @param retrieveFields retrive data for fields
 874 |      * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}            
 875 |      */
 876 |     search(value: string, searchInFields?: Array<string>, retrieveFields?: Array<string>): Array<{
 877 |         id: number | string,
 878 |         name: string,
 879 |         __score: number,
 880 |         __searchField: string,
 881 |         __searchMarks: string
 882 |     }>;
 883 |     /**
 884 |      * Gets collpased node ids of the specifeid node
 885 |      * ```typescript     
 886 |      * let chart = new OrgChart('#tree', {});
 887 |      * ...
 888 |      * let ids = chart.getCollapsedIds(2);
 889 |      * ```
 890 |      * @param node 
 891 |      */
 892 |     getCollapsedIds(node: OrgChart.node): Array<string | number>;
 893 |     /**
 894 |      * State to url.
 895 |      * ```typescript     
 896 |      * let chart = new OrgChart('#tree', {});
 897 |      * ...
 898 |      * let url = chart.stateToUrl();
 899 |      * ```
 900 |      * {@link https://balkan.app/OrgChartJS/Docs/State | See doc...}  
 901 |      */
 902 |     stateToUrl(): string;
 903 |     /**
 904 |      * Genereates unique identification number that can be used for new nodes
 905 |      * ```typescript     
 906 |      * let chart = new OrgChart('#tree', {});
 907 |      * ...
 908 |      * let id = chart.generateId();
 909 |      * ```
 910 |      */
 911 |     generateId(): string;
 912 |     /**
 913 |      * Destroys the object.
 914 |      * ```typescript     
 915 |      * let chart = new OrgChart('#tree', {});
 916 |      * ...
 917 |      * chart.destroy();
 918 |      * ```
 919 |      */
 920 |     destroy(): void;
 921 |     /**
 922 |      * Replaces the id, pid, stpid, ppid and the ids in clinks, slinks, dottedLines, groupDottedLines.
 923 |      * After the replacment updates the UI
 924 |      * ```typescript     
 925 |      * let chart = new OrgChart('#tree', {});
 926 |      * ...
 927 |      * chart.replaceIds[{2:21, 3:31});
 928 |      * ```
 929 |      * @param old_new_ids dictionary containing old and new ids
 930 |      * @param callback called when the replacment completes
 931 |      */
 932 |     replaceIds(old_new_ids:  {
 933 |         [key: string]: string | number
 934 |     }, callback?: () => void): void;
 935 |     /**
 936 |      * Adds curved link.
 937 |      * ```typescript     
 938 |      * let chart = new OrgChart('#tree', {});
 939 |      * ...
 940 |      * chart.addClink(4, 0, 'text')
 941 |      * chart.draw();
 942 |      * ```
 943 |      * @param from from node with id
 944 |      * @param to to node with id
 945 |      * @param label link label
 946 |      * @param template link template, for example 'orange'
 947 |      */
 948 |     addClink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
 949 |     /**
 950 |      * Removes curved link.
 951 |      * ```typescript     
 952 |      * let chart = new OrgChart('#tree', {});
 953 |      * ...
 954 |      * chart.removeClink(4, 0)
 955 |      * chart.draw();
 956 |      * ```
 957 |      * @param from from node with id
 958 |      * @param to to node with id
 959 |      */
 960 |     removeClink(from: string | number, to: string | number): OrgChart;
 961 |     /**
 962 |      * Adds second link.
 963 |      * ```typescript     
 964 |      * let chart = new OrgChart('#tree', {});
 965 |      * ...
 966 |      * chart.addSlink(4, 0, 'text')
 967 |      * chart.draw();
 968 |      * ```
 969 |      * @param from from node with id
 970 |      * @param to to node with id
 971 |      * @param label link label
 972 |      * @param template link template, for example 'orange'
 973 |      */    
 974 |     addSlink(from: string | number, to: string | number, label?: string, template?: string): OrgChart;
 975 |     /**
 976 |      * Removes second link.
 977 |      * ```typescript     
 978 |      * let chart = new OrgChart('#tree', {});
 979 |      * ...
 980 |      * chart.removeSlink(4, 0)
 981 |      * chart.draw();
 982 |      * ```
 983 |      * @param from from node with id
 984 |      * @param to to node with id
 985 |      */    
 986 |     removeSlink(from: string | number, to: string | number): OrgChart;
 987 |     /**
 988 |      * Gets svg html element
 989 |      * ```typescript     
 990 |      * let chart = new OrgChart('#tree', {});
 991 |      * ...
 992 |      * let svg = chart.getSvg();
 993 |      * ```
 994 |      */
 995 |     getSvg(): SVGAElement;
 996 |     /**
 997 |      * Gets node html element
 998 |      * ```typescript     
 999 |      * let chart = new OrgChart('#tree', {});
1000 |      * ...
1001 |      * let nodeElement = chart.getNodeElement(2);
1002 |      * ```
1003 |      * @param id node id
1004 |      */
1005 |     getNodeElement(id: string | number): HTMLElement;
1006 |     /**
1007 |      * Gets menu button html element
1008 |      * ```typescript     
1009 |      * let chart = new OrgChart('#tree', {});
1010 |      * ...
1011 |      * let menuButton = chart.getMenuButton(2);
1012 |      * ```
1013 |      */
1014 |     getMenuButton(): HTMLElement;
1015 | 
1016 | 
1017 |     /**
1018 |      * Exports to CSV
1019 |      * ```typescript     
1020 |      * let chart = new OrgChart('#tree', {});
1021 |      * ...
1022 |      * chart.exportToCSV();
1023 |      * ```
1024 |      * @param filename The name of the exported file
1025 |      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
1026 |      */
1027 |     exportToCSV(filename?: string | OrgChart.exportCSVXMLJSONOptions): void;
1028 |     /**
1029 |      * Exports to XML   
1030 |      * ```typescript     
1031 |      * let chart = new OrgChart('#tree', {});
1032 |      * ...
1033 |      * chart.exportToXML();
1034 |      * ```
1035 |      * @param filename The name of the exported file
1036 |      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
1037 |      */
1038 |     exportToXML(filename: string | OrgChart.exportCSVXMLJSONOptions): void;
1039 |     /**
1040 |      * Exports to JSON   
1041 |      * ```typescript     
1042 |      * let chart = new OrgChart('#tree', {});
1043 |      * ...
1044 |      * chart.exportToJSON();
1045 |      * ```
1046 |      * @param filename The name of the exported file
1047 |      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
1048 |      */
1049 |      exportToJSON(filename?: string | OrgChart.exportCSVXMLJSONOptions ): void;
1050 | 
1051 |     /**
1052 |      * ```typescript     
1053 |      * let chart = new OrgChart('#tree', {});
1054 |      * ...
1055 |      * chart.shareProfile(2);
1056 |      * ```
1057 |      * Shares node data, uses build-in  device sharing functionallity.
1058 |      * @param id node id          
1059 |      */
1060 |     shareProfile(id: string | number): void;
1061 | 
1062 |     /**
1063 |      * Exports to Visio document
1064 |      * ```typescript     
1065 |      * let chart = new OrgChart('#tree', {});
1066 |      * ...
1067 |      * chart.exportToVisio();
1068 |      * ```
1069 |      * @param options export options 
1070 |      * @param callback called when the export completes
1071 |      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther | See doc...}       
1072 |      */    
1073 |     exportToVisio(options?: OrgChart.exportVisioOptions, callback?: () => void): void;
1074 |     exportToPowerPoint(options?: OrgChart.exportPowerPontOptions, callback?: () => void): void;
1075 |     exportToPDF(options?: OrgChart.exportPDFOptions, callback?: () => void): void;
1076 |     exportToPNG(options?: OrgChart.exportPNGOptions, callback?: () => void): void;
1077 |     exportToSVG(options?: OrgChart.exportSVGOptions, callback?: () => void): void;
1078 |     exportToPDFProfile(nodeId: number | string, callback?: () => void):  void;
1079 | 
1080 | 
1081 |     
1082 | 
1083 |     /**
1084 |      * Imports CSV file.
1085 |      * ```typescript     
1086 |      * let chart = new OrgChart('#tree', {});
1087 |      * ...
1088 |      * chart.importCSV();
1089 |      * ```
1090 |      * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}       
1091 |      */
1092 |     importCSV(): void;
1093 |     /**
1094 |      * Imports XML file.
1095 |      * ```typescript     
1096 |      * let chart = new OrgChart('#tree', {});
1097 |      * ...
1098 |      * chart.importXML();
1099 |      * ```
1100 |      * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}       
1101 |      */    
1102 |     importXML(): void;
1103 | 
1104 |     /**
1105 |      * Imports JSON file.
1106 |      * ```typescript     
1107 |      * let chart = new OrgChart('#tree', {});
1108 |      * ...
1109 |      * chart.importJSON();
1110 |      * ```
1111 |      * {@link https://balkan.app/OrgChartJS/Docs/Importing | See doc...}       
1112 |      */    
1113 |     importJSON(): void;
1114 | 
1115 |     /**
1116 |      * Zoom out or zoom in the chart.
1117 |      * ```typescript     
1118 |      * let chart = new OrgChart('#tree', {});
1119 |      * ...
1120 |      * chart.zoom(true);
1121 |      * ```
1122 |      * @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.
1123 |      * @param center array [x, y], where x is x percantege from the width and y is y percentage from the height.
1124 |      * @param shouldAnimate should animate 
1125 |      * @param callback called when the animation completes
1126 |      */
1127 |     zoom(delta: boolean | number, center?: Array<number>, shouldAnimate?: boolean, callback?: () => void): void;
1128 |     
1129 |     /**
1130 |      * Magnify(Zoom in) specific node in the chart.
1131 |      * ```typescript     
1132 |      * let chart = new OrgChart('#tree', {});
1133 |      * ...
1134 |      * chart.magnify(2, 1.25);
1135 |      * ```
1136 |      * @param id id of the node
1137 |      * @param scale scale to magnify
1138 |      * @param front show on front or back 
1139 |      * @param anim animation type
1140 |      */
1141 |      magnify(id: string | number, scale: number, front?: boolean, anim?: OrgChart.anim | null, callback?: () => void): void;     
1142 | 
1143 |     /**
1144 |      * Starts the move 
1145 |      * ```typescript     
1146 |      * let chart = new OrgChart('#tree', {});
1147 |      * ...
1148 |      * chart.moveStart({right: true});
1149 |      * ```
1150 |      * @param movePosition move position
1151 |      * @param tick callback function in each step
1152 |      * @param func the name of the animation function, for example OrgChart.anim.inSin
1153 |      * @param duration duration before going to 100 percent speed
1154 |      */
1155 |     moveStart(movePosition: OrgChart.move, tick?: () => void, func?: OrgChart.anim, duration?: number): void;
1156 | 
1157 |     /**
1158 |      * Ends the move
1159 |      * ```typescript     
1160 |      * let chart = new OrgChart('#tree', {});
1161 |      * ...
1162 |      * chart.moveEnd();
1163 |      */
1164 |     moveEnd(): void;
1165 | 
1166 |     /**
1167 |      * Undo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
1168 |      * ```typescript     
1169 |      * let chart = new OrgChart('#tree', {});
1170 |      * ...
1171 |      * chart.undo();
1172 |      * ```
1173 |      * @param callback called when the animation completes
1174 |      */
1175 |     undo(callback?: () => void): void;
1176 |     /**
1177 |      * Redo data operations like adding/removing nodes. Set undoRedoStorageName option before calling this method.
1178 |      * ```typescript     
1179 |      * let chart = new OrgChart('#tree', {});
1180 |      * ...
1181 |      * chart.redo();
1182 |      * ```
1183 |      * @param callback called when the animation completes
1184 |      */
1185 |     redo(callback?: () => void): void;
1186 | 
1187 |     /**
1188 |      * Clears all Redo stack steps.
1189 |      * ```typescript     
1190 |      * let chart = new OrgChart('#tree', {});
1191 |      * ...
1192 |      * chart.clearRedo();
1193 |      * ```
1194 |      */
1195 |     clearRedo(): void;
1196 |     
1197 |     /**
1198 |      * Clears all Undo stack steps.
1199 |      * ```typescript     
1200 |      * let chart = new OrgChart('#tree', {});
1201 |      * ...
1202 |      * chart.clearUndo();
1203 |      * ```
1204 |      */
1205 |     clearUndo(): void;
1206 |     /**
1207 |      * Returns the number of Undo stack steps
1208 |      * ```typescript     
1209 |      * let chart = new OrgChart('#tree', {});
1210 |      * ...
1211 |      * let undoSteps = chart.undoStepsCount();
1212 |      * ```
1213 |      */
1214 |     undoStepsCount(): number;
1215 |     /**
1216 |      * Returns the number of Redo stack steps
1217 |      * ```typescript     
1218 |      * let chart = new OrgChart('#tree', {});
1219 |      * ...
1220 |      * let redoSteps = chart.redoStepsCount();
1221 |      * ```
1222 |      */    
1223 |     redoStepsCount(): number;    
1224 | 
1225 | 
1226 |     /**
1227 |      * The onField() method of the OrgChart class sets up a function that will be called whenever the specified event is delivered to the target.
1228 |      *  ```typescript     
1229 |      * let chart = new OrgChart('#tree', {});
1230 |      * chart.onField((args) => {
1231 |      *      //return false; to cancel
1232 |      * });
1233 |      * chart.load(nodes);
1234 |      * ```
1235 |      * @category Event Listeners
1236 |      * @param listener 
1237 |      */
1238 |     onField(listener: (this: OrgChart, args: { 
1239 |         /**
1240 |          * the node
1241 |          */
1242 |         node: OrgChart.node, 
1243 |         /**
1244 |          * node data json object
1245 |          */
1246 |         data: object, 
1247 |         /**
1248 |          * value of the filed, can be changed in the event
1249 |          */
1250 |         value: any, 
1251 |         /**
1252 |          * svg or html element of the filed, can be changed in the event
1253 |          */
1254 |         element: string, 
1255 |         /**
1256 |          * name of the field
1257 |          */
1258 |         name: string         
1259 |         /**
1260 |          * field template name
1261 |          */
1262 |         field: string 
1263 |     }) => void | boolean): OrgChart;
1264 | 
1265 |     /**
1266 |      * Occurs when the nodes in OrgChart has been created and loaded to the DOM.
1267 |      * ```typescript     
1268 |      * let chart = new OrgChart('#tree', {});
1269 |      * chart.onInit(() => {
1270 |      * });
1271 |      * chart.load(nodes);
1272 |      * ```
1273 |      * @category Event Listeners
1274 |      * @param listener 
1275 |      */
1276 |     onInit(listener: (this: OrgChart) => void): OrgChart;
1277 |     
1278 |     /**
1279 |      * The onRedraw event occurs when the chart is redrawed.
1280 |      *  ```typescript     
1281 |      * let chart = new OrgChart('#tree', {});
1282 |      * chart.onRedraw(() => {
1283 |      * });
1284 |      * chart.load(nodes);
1285 |      * ```
1286 |      * @category Event Listeners
1287 |      * @param listener 
1288 |      */        
1289 |     onRedraw(listener: (this: OrgChart) => void): OrgChart;
1290 | 
1291 |     /**
1292 |      * The onExpandCollapseButtonClick event occurs when the chart is redrawed.
1293 |      * ```typescript     
1294 |      * let chart = new OrgChart('#tree', {});
1295 |      * chart.onExpandCollapseButtonClick(() => {
1296 |      *  //return false; to cancel the operation
1297 |      * });
1298 |      * chart.load(nodes);
1299 |      * ```
1300 |      * @category Event Listeners
1301 |      * @param listener 
1302 |      */         
1303 |     onExpandCollapseButtonClick(listener: (this: OrgChart, args: {
1304 |         /**
1305 |          * Indicates id the operation is collaps or expand
1306 |          */
1307 |         collapsing: boolean,
1308 |         /**
1309 |          * the id of the clicked node
1310 |          */
1311 |         id: number | string,
1312 |         /**
1313 |          *  node ids that will be expanded or collapsed
1314 |          */
1315 |         ids: Array<number | string>
1316 |     }) => void): OrgChart;
1317 | 
1318 |     /**
1319 |      * 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.
1320 |      *  ```typescript     
1321 |      * let chart = new OrgChart('#tree', {});
1322 |      * chart.onExportStart(() => {
1323 |      *  args.styles += '<link href="[link to my styles]" rel="stylesheet">';
1324 |      *  //return false; to cancel the operation
1325 |      * });
1326 |      * chart.load(nodes);
1327 |      * ```
1328 |      * @category Event Listeners
1329 |      * @param listener 
1330 |      */             
1331 |     onExportStart(listener: (this: OrgChart, args: {
1332 |             options: {
1333 |                 childLevels?: number,
1334 |                 expandChildren?: boolean,
1335 |                 fileName?: string,
1336 |                 footer?: string,
1337 |                 header?: string,
1338 |                 height?: number,
1339 |                 width?: number,
1340 |                 landscape?: boolean,
1341 |                 margin?: Array<number>,
1342 |                 min?: boolean,
1343 |                 openInNewTab?: boolean,
1344 |                 padding?: number,
1345 |                 parentLevels?: number,
1346 |                 type?: string,
1347 |                 pages?: Array<{            
1348 |                     chartInstance?: OrgChart,
1349 |                     childLevels?: number,
1350 |                     expandChildren?: boolean,
1351 |                     footer?: string,
1352 |                     header?: string,
1353 |                     margin?: Array<number>,
1354 |                     min?: boolean,
1355 |                     padding?: number,
1356 |                     parentLevels?: number,
1357 |                     isProfile?: boolean,
1358 |                     nodeId?: number | string,
1359 |                     content?:  string,
1360 |                     height?: number,
1361 |                     width?: number,
1362 |                 }>
1363 |             },
1364 |             pages?: Array<SVGElement>,            
1365 |             styles?: string
1366 |     }) => void): OrgChart;
1367 | 
1368 |     /**
1369 |      * 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.
1370 |      *  ```typescript     
1371 |      * let chart = new OrgChart('#tree', {});
1372 |      * chart.onExportEnd(() => {
1373 |      *  //return false; to cancel the operation for example id you prefer the exported document to not download
1374 |      * });
1375 |      * chart.load(nodes);
1376 |      * ```
1377 |      * @category Event Listeners
1378 |      * @param listener 
1379 |      */         
1380 |     onExportEnd(listener: (this: OrgChart, args: 
1381 |         /**
1382 |          * for PDF/PNG
1383 |          */
1384 |     {
1385 |         /**
1386 |          * the array buffer is the exported document, you can save it on a server or send it via email
1387 |          * 
1388 |          * this property is initialized only for PDF/PNG exports
1389 |          */
1390 |         ArrayBuffer: ArrayBuffer
1391 |         /**
1392 |          * extension
1393 |          * 
1394 |          * this property is initialized only for CSV/XML exports
1395 |          */
1396 |         ext: string,
1397 |         /**
1398 |          * filename, you can change the filename here
1399 |          * 
1400 |          * this property is initialized only for CSV/XML exports
1401 |          */
1402 |         filename: string,
1403 |         /**
1404 |          * an array of node objects
1405 |          * 
1406 |          * this property is initialized only for CSV/XML exports
1407 |          */
1408 |         nodes: Array<object>,
1409 |         /**
1410 |          * csv ot xml string
1411 |          * 
1412 |          * this property is initialized only for CSV/XML/SVG exports
1413 |          */
1414 |         content: string,
1415 |         /**
1416 |          * add extra styles
1417 |          * 
1418 |          * this property is initialized only for SVG exports
1419 |          */
1420 |         styles: string,        
1421 |     }) => void): OrgChart;
1422 | 
1423 |     /**
1424 |      * On node click event listener.
1425 |      *  ```typescript     
1426 |      * let chart = new OrgChart('#tree', {});
1427 |      * chart.onNodeClick(() => {
1428 |      *  //return false; to cancel the operation      
1429 |      * });
1430 |      * chart.load(nodes);
1431 |      * ```
1432 |      * @category Event Listeners
1433 |      * @param listener 
1434 |      */   
1435 |     onNodeClick(listener: (this: OrgChart, args: {
1436 |         /**
1437 |          * node JSON object
1438 |          */
1439 |         node: OrgChart.node,
1440 |         /**
1441 |          * the browser event
1442 |          */
1443 |         event: any
1444 |     }) => void): OrgChart;
1445 | 
1446 | 
1447 |         /**
1448 |      * On canvas SVG click event listener.
1449 |      *  ```typescript     
1450 |      * let chart = new OrgChart('#tree', {});
1451 |      * chart.onCanvasClick(() => {  
1452 |      * });
1453 |      * chart.load(nodes);
1454 |      * ```
1455 |      * @category Event Listeners
1456 |      * @param listener 
1457 |      */   
1458 |     onCanvasClick(listener: (this: OrgChart, args: {
1459 |         /**
1460 |          * the browser event
1461 |          */
1462 |         event: any
1463 |     }) => void): OrgChart;
1464 | 
1465 |     /**
1466 |      * In onAIToolCalls we parse the AI responce to our functions
1467 |      * ```typescript
1468 |      * chart.onAIToolCalls(function(args){
1469 |      *  for(var toolCall of args.toolCalls){
1470 |      *      if (toolCall.FunctionName == 'sendEmail'){
1471 |      *          toolCall.FunctionResult = sendEmail(toolCall.FunctionArguments);
1472 |      *      }
1473 |      *  }
1474 |      * });
1475 |      * ```
1476 |      * [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
1477 |      * @param listener 
1478 |      */
1479 |     onAIToolCalls(listener: (this: OrgChart, args: {
1480 |         toolCalls: Array<{
1481 |             FunctionName : string,
1482 |             FunctionResult  : string,
1483 |             FunctionArguments  : { [key: string]: any }
1484 |         }>
1485 |     }) => void): OrgChart;
1486 | 
1487 |     /**
1488 |      * On node double click event listener.
1489 |      * ```typescript     
1490 |      * let chart = new OrgChart('#tree', {});
1491 |      * chart.onNodeDoubleClick(() => {
1492 |      *  //return false; to cancel the operation 
1493 |      * });
1494 |      * chart.load(nodes);
1495 |      * ```
1496 |      * @category Event Listeners
1497 |      * @param listener 
1498 |      */       
1499 |     onNodeDoubleClick(listener: (this: OrgChart, args: {
1500 |         /**
1501 |          * clicked node data
1502 |          */
1503 |         data: object
1504 |     }) => void): OrgChart;
1505 | 
1506 |     /**
1507 |      * The tree div element.
1508 |      * ```typescript  
1509 |      * let chart = new OrgChart('#tree', {});
1510 |      * let element = chart.element;
1511 |      * ```
1512 |      */
1513 |     element: HTMLElement;
1514 | 
1515 |     /**
1516 |      * The tree div element.
1517 |      * ```typescript  
1518 |      * let chart = new OrgChart('#tree', {});
1519 |      * let mainElement = chart.mainElement;
1520 |      * ```
1521 |      */
1522 |     mainElement: HTMLElement;
1523 | 
1524 |     get leftElement(): HTMLElement;
1525 | 
1526 | 
1527 |     /**
1528 |      * The chart editUI object.
1529 |      * ```typescript  
1530 |      * let chart = new OrgChart('#tree', {});
1531 |      * let editUI = chart.editUI;
1532 |      * ```
1533 |      */
1534 |     editUI: OrgChart.editUI;
1535 | 
1536 |     /**
1537 |      * The chart aiUI object.
1538 |      * ```typescript  
1539 |      * let chart = new OrgChart('#tree', {});
1540 |      * let aiUI = chart.aiUI;
1541 |      * ```
1542 |      */
1543 |     aiUI: OrgChart.aiUI;
1544 | 
1545 |     /**
1546 |      * The chart orgScribeUI object.
1547 |      * ```typescript  
1548 |      * let chart = new OrgChart('#tree', {});
1549 |      * let orgScribeUI = chart.orgScribeUI;
1550 |      * ```
1551 |      */
1552 |     orgScribeUI: OrgChart.orgScribeUI;
1553 | 
1554 |     /**
1555 |      * The chart searchUI object.
1556 |      * ```typescript  
1557 |      * let chart = new OrgChart('#tree', {});
1558 |      * let searchUI = chart.searchUI;
1559 |      * ```
1560 |      */
1561 |     searchUI: OrgChart.searchUI;
1562 |     
1563 |     /**
1564 |      * The chart nodeMenuUI object.
1565 |      * ```typescript  
1566 |      * let chart = new OrgChart('#tree', {});
1567 |      * let nodeMenuUI = chart.nodeMenuUI;
1568 |      * ```
1569 |      */
1570 |     nodeMenuUI: OrgChart.menuUI;
1571 | 
1572 |     powerPointPreviewUI: OrgChart.powerPointPreviewUI;
1573 | 
1574 |     pdfPreviewUI: OrgChart.pdfPreviewUI;
1575 |     svgPreviewUI: OrgChart.pngPreviewUI;
1576 |     pngPreviewUI: OrgChart.pngPreviewUI;
1577 | 
1578 |     /**
1579 |      * The chart filterUI object.
1580 |      * ```typescript  
1581 |      * let chart = new OrgChart('#tree', {});
1582 |      * let filterUI = chart.filterUI;
1583 |      * ```
1584 |      */
1585 |     filterUI: OrgChart.filterUI;
1586 | 
1587 |     /**
1588 |      * @ignore
1589 |      */
1590 |     xScrollUI: OrgChart.xScrollUI;
1591 |     
1592 |     /**
1593 |      * @ignore
1594 |      */
1595 |     yScrollUI: OrgChart.yScrollUI;
1596 |     
1597 |     /**
1598 |      * The chart undoRedoUI object.
1599 |      * ```typescript  
1600 |      * let chart = new OrgChart('#tree', {});
1601 |      * let undoRedoUI = chart.undoRedoUI;
1602 |      * ```
1603 |      */
1604 |     undoRedoUI: OrgChart.undoRedoUI;
1605 | 
1606 |     /**
1607 |      * The chart nodeCircleMenuUI object.
1608 |      * ```typescript  
1609 |      * let chart = new OrgChart('#tree', {});
1610 |      * let nodeCircleMenuUI = chart.nodeCircleMenuUI;
1611 |      * ```
1612 |      */
1613 |     nodeCircleMenuUI: OrgChart.circleMenuUI;
1614 | 
1615 |     /**
1616 |      * The chart controlsUI object.
1617 |      * ```typescript  
1618 |      * let chart = new OrgChart('#tree', {});
1619 |      * let controlsUI = chart.controlsUI;
1620 |      * ```
1621 |      */
1622 |     controlsUI: OrgChart.controlsUI;    
1623 | 
1624 |     /**
1625 |      * The chart nodeContextMenuUI object.
1626 |      * ```typescript  
1627 |      * let chart = new OrgChart('#tree', {});
1628 |      * let nodeContextMenuUI = chart.nodeContextMenuUI;
1629 |      * ```
1630 |      */
1631 |     nodeContextMenuUI: OrgChart.menuUI;
1632 | 
1633 |     /**
1634 |      * The chart menuUI object.
1635 |      * ```typescript  
1636 |      * let chart = new OrgChart('#tree', {});
1637 |      * let menuUI = chart.menuUI;
1638 |      * ```
1639 |      */
1640 |     menuUI: OrgChart.menuUI;
1641 | 
1642 |     /**
1643 |      * The chart toolbarUI object.
1644 |      * ```typescript  
1645 |      * let chart = new OrgChart('#tree', {});
1646 |      * let toolbarUI = chart.toolbarUI;
1647 |      * ```
1648 |      */
1649 |     toolbarUI: OrgChart.toolbarUI;  
1650 |     
1651 |     /**
1652 |      * The chart config object.
1653 |      * ```typescript  
1654 |      * let chart = new OrgChart('#tree', {});
1655 |      * let config = chart.config;
1656 |      * ```
1657 |      */
1658 |     config: OrgChart.options;
1659 | 
1660 |     /**
1661 |      * All root nodes in the chart
1662 |      * ```typescript  
1663 |      * let chart = new OrgChart('#tree', {});
1664 |      * chart.onInit(() => {
1665 |      *      let roots = chart.roots
1666 |      * });
1667 |      * chart.load(nodes)
1668 |      * ```
1669 |      */
1670 |     roots: Array<OrgChart.node>;
1671 | 
1672 |    /**
1673 |     * Opens file upload dialog
1674 |     * ```typescript  
1675 |     * let chart = new OrgChart('#tree', {});
1676 |     * 
1677 |     * chart.editUI.on('element-btn-click', function (sender, args) {
1678 |     *     OrgChart.fileUploadDialog(function (file) {
1679 |     *         var formData = new FormData();
1680 |     *         formData.append('file', file);
1681 |     *         alert('upload the file');
1682 |     *     })
1683 |     * });
1684 |     * 
1685 |     * chart.load(nodes)
1686 |     * ```
1687 |     */
1688 |     
1689 |     static fileUploadDialog(callback: (file: any) => void): void;
1690 | 
1691 | 
1692 |     /**
1693 |      * Checks if the screen is mobile
1694 |      * ```typescript  
1695 |      * console.log(OrgChart.isMobile());
1696 |      * ```
1697 |      */
1698 |     static isMobile(): boolean;
1699 |     /**
1700 |      * Checks if the used library is licnsed or not
1701 |      * ```typescript  
1702 |      * console.log(OrgChart.isTrial());
1703 |      * ```
1704 |      */
1705 |     static isTrial(): boolean;
1706 |     /**
1707 |      * Count all children nodes of the specified id.
1708 |      * ```typescript  
1709 |      * let chart = new OrgChart('#tree', {});
1710 |      * chart.onInit(() => {
1711 |      *      console.log(OrgChart.childrenCount(chart, chart.getNode(2)))
1712 |      * });
1713 |      * chart.load(nodes)
1714 |      * ```
1715 |      * @param chart OrgChart instance
1716 |      * @param node 
1717 |      * @param count 
1718 |      */
1719 |     static childrenCount(chart: OrgChart, node: OrgChart.node): number;
1720 | 
1721 |     /**
1722 |      * Count the total (to the leafs) children nodes of the specified id.
1723 |      * ```typescript  
1724 |      * let chart = new OrgChart('#tree', {});
1725 |      * chart.onInit(() => {
1726 |      *      console.log(OrgChart.childrenTotalCount(chart, chart.getNode(2)))
1727 |      * });
1728 |      * chart.load(nodes)
1729 |      * ```
1730 |      * @param chart OrgChart instance
1731 |      * @param node 
1732 |      * @param count 
1733 |      */
1734 |     static childrenTotalCount(chart: OrgChart, node: OrgChart.node): number;
1735 | 
1736 |     /**
1737 |      * Count the collapsed children nodes of the specified id.
1738 |      * ```typescript  
1739 |      * let chart = new OrgChart('#tree', {});
1740 |      * chart.onInit(() => {
1741 |      *      console.log(OrgChart.collapsedChildrenCount(chart, chart.getNode(2)))
1742 |      * });
1743 |      * chart.load(nodes)
1744 |      * ```
1745 |      * @param chart OrgChart instance
1746 |      * @param node 
1747 |      * @param count 
1748 |      */
1749 |     static collapsedChildrenCount(chart: OrgChart, node: OrgChart.node): number;
1750 | 
1751 |     /**
1752 |      * Count the total (to the leafs) collapsed children nodes of the specified id.
1753 |      * ```typescript  
1754 |      * let chart = new OrgChart('#tree', {});
1755 |      * chart.onInit(() => {
1756 |      *      console.log(OrgChart.collapsedChildrenCount(chart, chart.getNode(2)))
1757 |      * });
1758 |      * chart.load(nodes)
1759 |      * ```
1760 |      * @param chart OrgChart instance
1761 |      * @param node 
1762 |      * @param count 
1763 |      */
1764 |     static collapsedChildrenTotalCount(chart: OrgChart, node: OrgChart.node): number;
1765 | 
1766 |     /**
1767 |      * Get the root node of the specified id.
1768 |      * ```typescript  
1769 |      * let chart = new OrgChart('#tree', {});
1770 |      * chart.onInit(() => {
1771 |      *      let root = OrgChart.getRootOf(chart.getNode(4));
1772 |      * });
1773 |      * chart.load(nodes)
1774 |      * ```
1775 |      * @param node 
1776 |      */
1777 |     static getRootOf(node: OrgChart.node): OrgChart.node;
1778 | 
1779 |     /**
1780 |      * is null, empty or undefined
1781 |      * ```typescript  
1782 |      * console.log(OrgChart.isNEU(any_prmeter))
1783 |      * ```
1784 |      * @param val 
1785 |      */
1786 |     static isNEU(val: any): boolean;
1787 | 
1788 |     /**
1789 |      * Defines gradient circle form array of colors
1790 |      * ```typescript  
1791 |      * OrgChart.templates.myTemplate.defs = OrgChart.gradientCircleForDefs('circle', ['#FF0000', '#FFD800'], 60, 10);
1792 |      * ```
1793 |      * @param id - id of the element
1794 |      * @param colors - array of colors
1795 |      * @param r - radius
1796 |      * @param strokeWidth - stroke width
1797 |      */
1798 |     static gradientCircleForDefs(id: string | number, colors: Array<string> | string, r: number, strokeWidth: number): string;
1799 |     
1800 |     /**
1801 |      * Convert CSV to nodes
1802 |      * ```typescript  
1803 |      * let chart = new OrgChart('#tree', {});
1804 |      * fetch('https://balkan.app/content/data.csv')
1805 |      *   .then(response => response.text())
1806 |      *   .then(text => {
1807 |      *       var nodes = OrgChart.convertCsvToNodes(text);
1808 |      *       chart.load(nodes);
1809 |      *   });
1810 |      * ```
1811 |      * @param text 
1812 |      */
1813 |     static convertCsvToNodes(text: string) : Array<Object>;
1814 | 
1815 |     /**
1816 |      * @ignore
1817 |      */
1818 |     static roundPathCorners(commands: string | Array<Array<any>>, radius: number, useFractionalRadius: boolean) : string;
1819 |     
1820 |     /**
1821 |      * @ignore
1822 |      */
1823 |     static convertNodesToCsv(nodes: Array<Object>) : string;
1824 | 
1825 |      /**
1826 |      * Replace a text in a field
1827 |      * See [Text Overflow](https://balkan.app/OrgChartJS/Docs/TextOverflow) doc page for more details
1828 |      * ```typescript
1829 |      * let chart = new OrgChart('#tree', {});
1830 |      * chart.onField(function (args) {
1831 |      *   var val = OrgChart.wrapText(args.value, OrgChart.templates.ana.field_1)
1832 |      *   args.value = val;
1833 |      * });
1834 |      * chart.load(nodes);
1835 |      * ```
1836 |      */
1837 |     static wrapText(text: string, field: Object): string;
1838 | 
1839 |     static filterUI: {
1840 |         /**
1841 |          * Change the text "Filter by"
1842 |          * ```typescript
1843 |          * OrgChart.filterUI.textFilterBy = 'Filtre par';
1844 |          * ```
1845 |          */
1846 |         textFilterBy: string,
1847 |         /**
1848 |          * Chart the text "all"
1849 |          * ```typescript
1850 |          * OrgChart.filterUI.all = '[Toute]'
1851 |          * ```
1852 |          */
1853 |         all: string,
1854 |     };
1855 | 
1856 |     static aiUI: {
1857 |         /**
1858 |          * Change the title 
1859 |          * ```typescript
1860 |          * OrgChart.aiUI.title = 'AI for My Company';
1861 |          * ```
1862 |          */
1863 |         title: string
1864 |     };
1865 | 
1866 | 
1867 |     /**
1868 |      * Shows/hides lloading image. Usefull when export large data to pdf. You can override and show your own loading image.
1869 |      */
1870 |     static loading: {
1871 |         /**
1872 |          * ```typescript
1873 |          * let chart = new OrgChart('#tree', {});
1874 |          * chart.on('init', function (sender) {
1875 |          *   OrgChart.loading.show(sender);
1876 |          *});
1877 |          * ```
1878 |          * @param chart 
1879 |          * @returns void
1880 |          */
1881 |         show: (chart: OrgChart) => void,
1882 |         /**
1883 |          * ```typescript
1884 |          * let chart = new OrgChart('#tree', {});
1885 |          * fetch('https://balkan.app/content/100k.json')
1886 |          *   .then((response) => response.json())
1887 |          *   .then((data) => chart.load(data, function () {
1888 |          *       OrgChart.loading.hide(chart);
1889 |          *   }));
1890 |          * ```
1891 |          * @param chart 
1892 |          * @returns void
1893 |          */
1894 |         hide: (chart: OrgChart) => void
1895 |     }
1896 |     /**
1897 |      * ```typescript
1898 |      * OrgChart.clinkTemplates.myTemplate = Object.assign({}, OrgChart.clinkTemplates.orange);
1899 |      * OrgChart.clinkTemplates.myTemplate.label = 
1900 |      *  '<text transform="translate(300, 750) rotate(-90)" fill="#F57C00" text-anchor="middle" x="{x}" y="{y}">{val}</text>';
1901 |      * ```
1902 |      */
1903 |     static clinkTemplates: {
1904 |         [key: string]: OrgChart.linkTemplate
1905 |     }
1906 |     /**
1907 |      * ```typescript
1908 |      * OrgChart.slinkTemplates.myTemplate = Object.assign({}, OrgChart.slinkTemplates.orange);
1909 |      * OrgChart.slinkTemplates.myTemplate.labelPosition = 'start';
1910 |      *  
1911 |      * ```
1912 |      */
1913 |     static slinkTemplates: {
1914 |         [key: string]: OrgChart.linkTemplate
1915 |     }
1916 | 
1917 |     /**
1918 |      * ```typescript
1919 |      * OrgChart.templates.mainTemplate = Object.assign({}, OrgChart.templates.ana);
1920 |      * OrgChart.templates.mainTemplate.node = 
1921 |      *  `<rect x="0" y="0" height="80" width="300" fill="#039BE5" stroke-width="1" stroke="#686868" rx="40" ry="40"></rect>`;
1922 |      * ```
1923 |      */
1924 |     static templates: { [key: string]: OrgChart.template} ;
1925 |     
1926 | 
1927 |     /**
1928 |      * You can change the smooth and the speed of the scroll
1929 |      * or you can change the values for any specific browser
1930 |      * ```typescript
1931 |      * OrgChart.scroll.smooth = 12;
1932 |      * OrgChart.scroll.speed = 120;  
1933 |      * OrgChart.scroll.safari = {
1934 |      *  smooth: 12,
1935 |      *  speed: 500
1936 |      * }
1937 |      * let chart = new OrgChart(document.getElementById("tree"), {
1938 |      *     ...
1939 |      *    showXScroll: true,
1940 |      * });
1941 |      * ``` 
1942 |      */
1943 |     static scroll: {
1944 |         smooth?: number,
1945 |         speed?: number,
1946 |         safari?: { smooth?: number; speed?: number; },
1947 |         edge?: { smooth?: number; speed?: number; },
1948 |         chrome?: { smooth?: number; speed?: number; },
1949 |         firefox?: { smooth?: number; speed?: number; },
1950 |         opera?: { smooth?: number; speed?: number; }
1951 |     };
1952 |     
1953 |     /**
1954 |      * @ignore
1955 |      */
1956 |     static events: {
1957 |         /**
1958 |          * layout event listener is obsolete, use node-layout instead
1959 |          * @param type 
1960 |          * @param listener 
1961 |          */
1962 |         on(type: "layout", listener: (args: any, args1: any, args2: any) => void): void
1963 |     };
1964 |     
1965 |     /**
1966 |      * @ignore
1967 |      */
1968 |     static state: { clear(stateName: string): void };
1969 | 
1970 |     /**
1971 |      * Animate an element
1972 |      * ```typescript
1973 |      * editForm.prototype.show = function (nodeId) {
1974 |      *      OrgChart.animate(div, { opacity: 0, right: -100 }, { opacity: 1, right: 10 }, 300, OrgChart.anim.outSin);
1975 |      * };
1976 |      * ```
1977 |      * @param element - element 
1978 |      * @param attrStart - object with start CSS properties
1979 |      * @param attrEnd - object with end CSS properties
1980 |      * @param duration - duration in miliseconds
1981 |      * @param func - funcition to animate with
1982 |      * @param callback - callback function
1983 |      */
1984 |     static animate(element: Object, attrStart?: Object, attrEnd?: Object, duration?: number, func?: OrgChart.anim, callback?: Function, tick?: boolean): void;
1985 | 
1986 |     /**
1987 |      * Minimap options.
1988 |      * ```typescript
1989 |      * OrgChart.miniMap.colors = ["#FFCA28", "#F57C00", "#039be5", "#757575"];
1990 |      * OrgChart.miniMap.selectorBackgroundColor = "#888888";
1991 |      * OrgChart.miniMap.focusStroke = "#039BE5";
1992 |      * OrgChart.miniMap.opacity = 0.8;
1993 |      * OrgChart.miniMap.border = '2px solid #039BE5';
1994 |      * OrgChart.miniMap.width = 200;
1995 |      * OrgChart.miniMap.height = 100;
1996 |      * OrgChart.miniMap.padding = 10;
1997 |      * OrgChart.miniMap.position = {
1998 |      *      top: 'padding',
1999 |      *      left: 'padding',
2000 |      *      right: undefined,
2001 |      *      bottom: undefined
2002 |      * };
2003 |      * ```
2004 |      */
2005 |     static miniMap: {
2006 |         colors: Array<string>,
2007 |         selectorBackgroundColor: string,
2008 |         focusStroke: string,
2009 |         opacity: number,
2010 |         border: string,
2011 |         width: number,
2012 |         height: number,
2013 |         padding: number,
2014 |         position: Object
2015 |     };
2016 | 
2017 |     /**
2018 |      * OrgChart version
2019 |      * ```typescript
2020 |      * OrgChart.VERSION;
2021 |      * ```
2022 |      */
2023 |     static VERSION: string;
2024 |     /**
2025 |     * @ignore
2026 |     */
2027 |     static TEXT_THRESHOLD: number;
2028 |     /**
2029 |     * @ignore
2030 |     */
2031 |     static IMAGES_THRESHOLD: number;
2032 |     /**
2033 |     * @ignore
2034 |     */
2035 |     static LINKS_THRESHOLD: number;
2036 |     /**
2037 |     * @ignore
2038 |     */
2039 |     static BUTTONS_THRESHOLD: number;
2040 |     /**
2041 |     * @ignore
2042 |     */
2043 |     static ANIM_THRESHOLD: number;
2044 | 
2045 |     /**
2046 |     * @ignore
2047 |     */
2048 |     static IT_IS_LONELY_HERE: string;
2049 |     /**
2050 |      * The text that we have if the chart is empty.
2051 |      * ```TypeScript
2052 |      * OrgChart.IT_IS_LONELY_HERE_LINK = "Click here to add your first node"
2053 |      * ```
2054 |      */
2055 |     static IT_IS_LONELY_HERE_LINK: string;
2056 |     /**
2057 |     * @ignore
2058 |     */
2059 |     static RES: {
2060 |         /**
2061 |         * @ignore
2062 |         */
2063 |         IT_IS_LONELY_HERE_LINK: string
2064 |     };
2065 | 
2066 | 
2067 |     /**
2068 |     * @ignore
2069 |     */
2070 |     static FIRE_DRAG_NOT_CLICK_IF_MOVE: number;
2071 |     /**
2072 |     * @ignore
2073 |     */
2074 |     static STRING_TAGS: boolean;
2075 |     /**
2076 |      * Search placeholder
2077 |      * ```TypeScript
2078 |      * OrgChart.SEARCH_PLACEHOLDER = "Chercher"; // the default value is "Search"
2079 |      * ```
2080 |      */
2081 |     static SEARCH_PLACEHOLDER: string;
2082 |     /**
2083 |      * Search help symbol. 
2084 |      * ```TypeScript
2085 |      * OrgChart.SEARCH_HELP_SYMBOL = "help";
2086 |      * ```
2087 |      */
2088 |     static SEARCH_HELP_SYMBOL: string;
2089 | 
2090 |     /**
2091 |      * Close search result list by click outside list and clean search input 
2092 |      * ```TypeScript
2093 |      * OrgChart.SEARCH_CLOSE_RESULT_ON_ESCAPE_OR_CLICKOUTSIDE = true; // default value is false
2094 |      * ```
2095 |      */
2096 |     static SEARCH_CLOSE_RESULT_ON_ESCAPE_OR_CLICKOUTSIDE: boolean;
2097 |     /**
2098 |     * @ignore
2099 |     */
2100 |     static IMPORT_MESSAGE: string;
2101 |     /**
2102 |     * @ignore
2103 |     */
2104 |     static FIXED_POSITION_ON_CLICK: boolean;
2105 |     /**
2106 |     * Render links before nodes, default is false
2107 |     * ```typescript
2108 |     * OrgChart.RENDER_LINKS_BEFORE_NODES = true;
2109 |     * ```
2110 |     */
2111 |     static RENDER_LINKS_BEFORE_NODES: boolean;
2112 |     /**
2113 |     * Render clinks before nodes, default is false
2114 |     * ```typescript
2115 |     * OrgChart.RENDER_CLINKS_BEFORE_NODES = true;
2116 |     * ```
2117 |     */
2118 |     static RENDER_CLINKS_BEFORE_NODES: boolean;
2119 |     /**
2120 |     * If false arrange vertically the nodes wothout children
2121 |     * Default value: true
2122 |     * ```typescript
2123 |     * OrgChart.MIXED_LAYOUT_ALL_NODES = false;
2124 |     * ```
2125 |     */
2126 |     static MIXED_LAYOUT_ALL_NODES: boolean;
2127 |     /**
2128 |     * Set mixed layout if there are collapsed children
2129 |     * Defaul value: false
2130 |     * ```typescript
2131 |     * OrgChart.MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN = true;
2132 |     * ```
2133 |     */
2134 |     static MIXED_LAYOUT_FOR_NODES_WITH_COLLAPSED_CHILDREN: boolean;
2135 |     /**
2136 |     * Use mixed layout for example tree or treeLeftOffset if number of children is more then specified value
2137 |     * Default value: 1
2138 |     * ```typescript
2139 |     * OrgChart.MIXED_LAYOUT_IF_NUMBER_OF_CHILDREN_IS_MORE_THEN = 0;
2140 |     * ```
2141 |     */
2142 |     static MIXED_LAYOUT_IF_NUMBER_OF_CHILDREN_IS_MORE_THEN: number;
2143 |     /**
2144 |     * Set the radius of the roundet links
2145 |     * ```typescript
2146 |     * OrgChart.LINK_ROUNDED_CORNERS = 20;
2147 |     * ```
2148 |     */
2149 |     static LINK_ROUNDED_CORNERS: number;
2150 |     /**
2151 |     * @ignore
2152 |     */
2153 |     static MOVE_STEP: number;
2154 |     /**
2155 |     * Set the clink curve value
2156 |     * set to 0 for a straight clicnk
2157 |     * ```typescript
2158 |     * OrgChart.CLINK_CURVE = 1.5;
2159 |     * ```
2160 |     */
2161 |     static CLINK_CURVE: number;
2162 |     /**
2163 |     * Set the limit of the search result items
2164 |     * ```typescript
2165 |     * OrgChart.SEARCH_RESULT_LIMIT = 5;
2166 |     * ```
2167 |     */
2168 |     static SEARCH_RESULT_LIMIT: number;
2169 |     /**
2170 |     * @ignore
2171 |     */
2172 |     static MAX_DEPTH: number;
2173 |     /**
2174 |     * @ignore
2175 |     */
2176 |     static SCALE_FACTOR: number;
2177 |     /**
2178 |      * Determines when the invisible nodes will become visible.
2179 |      * The number tells on how many free pixel to show nodes
2180 |      * The defaul value is *auto*
2181 |      * ```typescript
2182 |      * OrgChart.LAZY_LOADING_FACTOR = 10;
2183 |      * ```
2184 |     */
2185 |     static LAZY_LOADING_FACTOR: number | string;
2186 |     /**
2187 |      * Can be used to instruct the browser to defer loading of OrgChart that are off-screen until the user scrolls near them.
2188 |      * The init event listener will be called as soon as the OrgChart become visible.
2189 |      * Default value: true
2190 |      * ```typescript
2191 |      * OrgChart.LAZY_LOADING = false;
2192 |      * ```
2193 |      */
2194 |     static LAZY_LOADING: boolean;
2195 | 
2196 |     /**
2197 |      * Minimum in search input before triggering the search.
2198 |      * ```typescript
2199 |      * OrgChart.MINIMUM_SYMBOLS_IN_SEARCH_INPUT = 3;
2200 |      * ```
2201 |      */
2202 |     static MINIMUM_SYMBOLS_IN_SEARCH_INPUT: number;
2203 | 
2204 |     
2205 |     /**
2206 |      * System instructions let you steer the behavior of a model based on your specific needs and use cases.
2207 |      * ```typescript
2208 |      * OrgChart.AI_SYSTEM_MESSAGES = ["You are an HR assistant for interactive Organizational Char in MyCompamyName."];
2209 |      * ```
2210 |      */
2211 |     static AI_SYSTEM_MESSAGES: Array<string>;
2212 |    
2213 | 
2214 |     /**
2215 |      * A string used for indentation of child nodes.
2216 |      * Each tree level increases the indentation by one repetition of this string.
2217 |      * Example: if offset = " ", then level 1 children are indented by " ",
2218 |      * level 2 by "  ", and so on.
2219 |      * ```typescript
2220 |      * OrgChart.ORGSCRIBE_OFFSET = '-';
2221 |      * ```
2222 |      */
2223 |     static ORGSCRIBE_OFFSET: Array<string>;
2224 | 
2225 |     /**
2226 |      * The scroll step in TreeGrid layout OrgChart.layout.treeGrid
2227 |      */
2228 |     static TREEGRID_WHEEL_STEP: string;
2229 | 
2230 | 
2231 |     /**
2232 |      * The width on pixels of the scroll bar in TreeGrid layout OrgChart.layout.treeGrid
2233 |      */
2234 |     static TREEGRID_SCROLLBAR_WIDTH: number;
2235 | 
2236 | 
2237 | 
2238 |     /**
2239 |      * Hides the Edit Form when the chart is moved with pan
2240 |      * ```typescript
2241 |      * OrgChart.HIDE_EDIT_FORM_ON_PAN = false; // the default value is true
2242 |      * ```
2243 |      */
2244 |     static HIDE_EDIT_FORM_ON_PAN: boolean;
2245 | 
2246 |     /**
2247 |     * @ignore
2248 |     */
2249 |     static ARRAY_FIELDS: Array<string>;
2250 | 
2251 |     /**
2252 |      * Csv import and export delimiter/separator
2253 |      * ```typescript
2254 |      * OrgChart.CSV_DELIMITER = ',';
2255 |      * ```
2256 |      */
2257 |     static CSV_DELIMITER: string;
2258 | 
2259 |     /**
2260 |      * Edit Form close button
2261 |      * ```typescript
2262 |      * OrgChart.EDITFORM_CLOSE_BTN = '<div data-edit-from-close style="text-align:right; font-size: 34px; padding: 7px 7px 0 0; cursor: pointer;">X</div>';
2263 |      * ```
2264 |      */
2265 |     static EDITFORM_CLOSE_BTN: string;
2266 |     /**
2267 |      * Escape HTML to prevent Cross-site scripting (also known as XSS) attacks 
2268 |      * ```typescript
2269 |      * OrgChart.ESCAPE_HTML = true; // the default value is false
2270 |      * ```
2271 |      */
2272 |     static ESCAPE_HTML: boolean;
2273 | 
2274 |     /**
2275 |      * Align children of assistant vertically 
2276 |      * ```typescript
2277 |      * OrgChart.VERTICAL_CHILDREN_ASSISTANT = true;
2278 |      * ```
2279 |      */
2280 |     static VERTICAL_CHILDREN_ASSISTANT: boolean;
2281 | 
2282 |     /**
2283 |     * Cut nodes when export with pages, dafault is false
2284 |      * ```typescript
2285 |      * OrgChart.EXPORT_PAGES_CUT_NODES = true;
2286 |      * ```
2287 |     */
2288 |     static EXPORT_PAGES_CUT_NODES: boolean;
2289 | 
2290 |     /**
2291 |     * Reset movable nodes to its original position when expand or collapse
2292 |     * Works with *movable nodes* functionality
2293 |      * ```typescript
2294 |      * OrgChart.RESET_MOVABLE_ONEXPANDCOLLAPSE = true;
2295 |      * ```
2296 |     */
2297 |     static RESET_MOVABLE_ONEXPANDCOLLAPSE: boolean;    
2298 | 
2299 |     /**
2300 |     * Filter menu is ordered alphabetically by default
2301 |      * ```typescript
2302 |      * OrgChart.FILTER_ALPHABETICALLY = false;
2303 |      * ```
2304 |     */
2305 |     static FILTER_ALPHABETICALLY: boolean;   
2306 | 
2307 |     /**
2308 |     * Generates random id for a node
2309 |     * ```typescript
2310 |     * let id = OrgChart.randomId();
2311 |     * ```
2312 |     */
2313 |     static randomId(): any;
2314 | 
2315 |     /**
2316 |      * @ignore
2317 |      */
2318 |     static searchUI: any;
2319 |     /**
2320 |      * @ignore
2321 |      */
2322 |     static editUI: any;
2323 |     // static menuUI: any;
2324 |     /**
2325 |      * @ignore
2326 |      */
2327 |     static attr: any;
2328 |     /**
2329 |      * @ignore
2330 |      */
2331 |     static toolbarUI: any;
2332 |     /**
2333 |      * @ignore
2334 |      */
2335 |     static elements: any;
2336 |     /**
2337 |      * @ignore
2338 |      */
2339 |     static expcollOpenTag: any;
2340 |         /**
2341 |      * @ignore
2342 |      */
2343 |     static upOpenTag: any;
2344 |         /**
2345 |      * @ignore
2346 |      */
2347 |     static grCloseTag: any;
2348 | }
2349 | 
2350 | /**
2351 |  * The node JSON data
2352 |  * ```ts
2353 |  * { id: 2, pid: 1, tags: ["HR"], name: "Anna Smith" }
2354 |  * ```
2355 |  */
2356 | interface nodeData {
2357 | 
2358 |     /**
2359 |      * the id of the node
2360 |      */
2361 |     id: number | string,
2362 | 
2363 |     /**
2364 |      * the parent id
2365 |      */
2366 |     pid?: number | string,
2367 | 
2368 |     /**
2369 |      * the parent partner id
2370 |      */
2371 |     ppid?: number | string,
2372 | 
2373 |     /**
2374 |      * the subtree parent id
2375 |      */
2376 |     stPid?: number | string,
2377 | 
2378 |     /**
2379 |      * Set custom configuration for the tagged node
2380 |      *{@link https://balkan.app/OrgChartJS/Docs/Tags | See Tags doc page...} 
2381 |      */
2382 |     tags?: Array<string>,
2383 |     [key: string]: any
2384 | }
2385 | 
2386 | declare namespace OrgChart {   
2387 |     
2388 |     // interface node {
2389 |     //     /**
2390 |     //      * 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
2391 |     //      */
2392 |     //     pid?: string | number,
2393 |     // }
2394 |     /**
2395 |      * deprecated, use OrgChart.align.center isntead
2396 |      * @ignore
2397 |      */
2398 |     const CENTER: number;
2399 |     /**
2400 |      * deprecated, use OrgChart.align.orientation isntead
2401 |      * @ignore
2402 |      */
2403 |     const ORIENTATION: number;
2404 | 
2405 | 
2406 |     /**
2407 |      * deprecated, use OrgChart.layout.normal isntead
2408 |      * @ignore
2409 |      */
2410 |     const normal: number;
2411 | 
2412 |     /**
2413 |      * deprecated, use OrgChart.layout.mixed isntead
2414 |      * @ignore
2415 |      */
2416 |     const mixed: number;
2417 |     /**
2418 |      * deprecated, use OrgChart.layout.tree isntead
2419 |      * @ignore
2420 |      */
2421 |     const tree: number;
2422 |     /**
2423 |      * deprecated, use OrgChart.layout.treeLeftOffset isntead
2424 |      * @ignore
2425 |      */
2426 |     const treeLeftOffset: any;
2427 |     /**
2428 |      * deprecated, use OrgChart.layout.treeRightOffset isntead
2429 |      * @ignore
2430 |      */
2431 |     const treeRightOffset: any;
2432 | 
2433 |     interface options {
2434 |         /**
2435 |          * With the drag and drop features enabled you can move nodes easily and change the tree structure. Default value - *false*.
2436 |          * ```typescript     
2437 |          * var chart = new OrgChart('#tree', {
2438 |          *      enableDragDrop: true
2439 |          * });
2440 |          * ```
2441 |          */
2442 |         enableDragDrop?: boolean,
2443 |                 /**
2444 |          * Collapse specified level of the chart and its children if allChildren is true.
2445 |          * ```typescript       
2446 |          * var chart = new OrgChart('#tree', {
2447 |          *   collapse: {level: 2, allChildren: true}
2448 |          * });
2449 |          * ```          
2450 |          */         
2451 |         collapse?: {
2452 |             level: number,
2453 |             allChildren?: boolean
2454 |         },
2455 |                 /**
2456 |          * Expand specified node ids and its children if allChildren is true. The expand option works only if collapse is set.
2457 |          * 
2458 |          * In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.
2459 |          * ```typescript       
2460 |          * var chart = new OrgChart('#tree', {
2461 |          *   collapse: {level: 2, allChildren: true},
2462 |          *   expand: {nodes: [155], allChildren: true}
2463 |          * });
2464 |          * ```          
2465 |          */         
2466 |         expand?: {
2467 |             nodes?: Array<string | number>,
2468 |             allChildren?: boolean
2469 |         },
2470 |     }
2471 |     
2472 |     /**
2473 |      * deprecated
2474 |      * @ignore
2475 |      */
2476 |     const none: number;
2477 | 
2478 |     /**
2479 |      * @ignore
2480 |      */    
2481 |     const COLLAPSE_PARENT_NEIGHBORS: number;
2482 |     
2483 |     /**
2484 |      * @ignore
2485 |      */
2486 |     const COLLAPSE_SUB_CHILDRENS: number;
2487 | 
2488 | 
2489 |     /**
2490 |      * The OrgChart node model
2491 |      * ```typescript
2492 |      * var chart = new OrgChart('#tree', {});
2493 |      * chart.onInit(() => {
2494 |      *  let node = chart.getNode(2);
2495 |      *  console.log(node);
2496 |      * });
2497 |      * chart.load(nodes)
2498 |      * ```
2499 |      */
2500 |     interface node {
2501 |         /**
2502 |          * the same id you provided in the source node
2503 |          */
2504 |         id?: string | number,
2505 |         /**
2506 |          *  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.
2507 |          */
2508 |         pid?: string | number,
2509 |         /**
2510 |          * parent id, it is the parent node id, it is the same pid you provided in the source node, the default value is undefined.
2511 |          */
2512 |         ppid?: string | number,
2513 |         /**
2514 |          * 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
2515 |          */
2516 |         parent?: node,
2517 |         /**
2518 |          * 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.
2519 |          */
2520 |         stpid?: string | number,
2521 |         /**
2522 |          * - 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
2523 |          */
2524 |         stParent?: node,
2525 |         isPartner?: boolean,
2526 |         partnerSeparation?: number,
2527 |         /**
2528 |          * array of ids, always initialized
2529 |          */
2530 |         childrenIds?: Array<string | number>,
2531 |         /**
2532 |          * array of children nodes, initialized on demand if all children are collpased it will be empty array
2533 |          */
2534 |         children?: Array<node>,
2535 |         /**
2536 |          * array of sub tree children root node ids, always initialized
2537 |          */
2538 |         stChildrenIds?: Array<string | number>,
2539 |         /**
2540 |          * array of sub tree children root nodes, initialized on demand if the node is minimized it will be empty array
2541 |          */
2542 |         stChildren?: Array<node>,
2543 |         /**
2544 |          * array of string values, the same array you provided in the source node
2545 |          */
2546 |         tags?: Array<string>,
2547 |         /**
2548 |          * template name, you can specify multiple templates with tags in one chart
2549 |          */
2550 |         templateName?: string,
2551 |         /**
2552 |          * a reference to the left node neighbor, the default value is undefined
2553 |          */
2554 |         leftNeighbor?: node | undefined,
2555 |         /**
2556 |          *  a reference to the right node neighbor, the default value is undefined
2557 |          */
2558 |         rightNeighbor?: node | undefined,
2559 |         /**
2560 |          * x position, default value undefined
2561 |          */
2562 |         x?: number | undefined,
2563 |         /**
2564 |          *  y position, default value undefined
2565 |          */
2566 |         y?: number | undefined,
2567 |         /**
2568 |          * width of the node, default value undefined
2569 |          */
2570 |         w?: number | undefined,
2571 |         /**
2572 |          * height of the node, default value undefined
2573 |          */
2574 |         h?: number | undefined,
2575 |         /**
2576 |          * if the node is assistant is true if not false if the node is not initialized is undefined
2577 |          */
2578 |         isAssistant?: boolean | undefined,
2579 |         /**
2580 |          * sub tree container nodes array, property only for the root node, default value undefined
2581 |          */
2582 |         stContainerNodes?: Array<node> | undefined,
2583 |         /**
2584 |          * it is set only if you define order option, default value undefined
2585 |          */
2586 |         order?: number | undefined,
2587 |         /**
2588 |          * true if the node is collpased, false if it is not and undefined if not initalized
2589 |          */
2590 |         collapsed?: boolean | undefined,
2591 |         /**
2592 |          * a level of the node starting from zero
2593 |          */
2594 |         level?: number,
2595 |         /**
2596 |          * true if the node is minimized, default value undefined
2597 |          */
2598 |         min?: boolean | undefined,
2599 |         /**
2600 |          * sub levels, default value undefined
2601 |          */
2602 |         subLevels?: number | undefined,
2603 |         /**
2604 |          * set only if the node contains sub trees and padding is defined in the template, default value undefined
2605 |          */
2606 |         padding?: number | undefined,
2607 |         /**
2608 |          * layout configuration name, default value undefined
2609 |          */
2610 |         lcn?: string | undefined,
2611 |         /**
2612 |          * for assistant nodes and mixed layout we create dynamic nodes called splits, default value undefined
2613 |          */
2614 |         isSplit?: boolean | undefined,
2615 |         /**
2616 |          * indicates if the node is child of partner node
2617 |          */
2618 |         isChildOfPartner?: boolean,
2619 |         /**
2620 |          * move the the node on x axis 
2621 |          */
2622 |         movex?: number | undefined,
2623 |         /**
2624 |          * move the the node on y axis 
2625 |          */
2626 |         movey?: number | undefined,
2627 |         /**
2628 |          * Pinned nodes at the top in TreeGrid layout, works with OrgChart.layout.
2629 |          * By default is undefined it is initialized only with  OrgChart.layout.treeGrid lyouts.
2630 |          */
2631 |         treeGridPinnedIds?: Array<string | number> | undefined,
2632 |         /**
2633 |          * Gets the number of pixels by which the TreeGrid content is scrolled from its top edge.
2634 |          * By default is undefined it is initialized only with  OrgChart.layout.treeGrid lyouts.
2635 |          */
2636 |         treeGridScrollTop?: number | undefined,        
2637 |         /**
2638 |          * Gets the max number of pixels by which the TreeGrid content can be scrolled from its top edge.
2639 |          * By default is undefined it is initialized only with  OrgChart.layout.treeGrid lyouts.
2640 |          */
2641 |         treeGridScrollTopMax?: number | undefined, 
2642 |         
2643 |         /**
2644 |          * Gets the type of the tree grid, foxed or auto.
2645 |          * By default is undefined it is initialized only with  OrgChart.layout.treeGrid lyouts
2646 |          */
2647 |         isTreeGrid?: boolean | undefined
2648 |     }
2649 | 
2650 |     /**
2651 |      * Template definition
2652 |      * ```typescript
2653 |      * OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
2654 |      * ```
2655 |      */
2656 |     interface template  
2657 |          {
2658 |             /**
2659 |              * SVG <defs?> of the template
2660 |              * ```typescript
2661 |              * OrgChart.templates.myTemplate.defs = 
2662 |              *  `<filter id="{randId}" x="0" y="0" width="200%" height="200%">
2663 |              *      <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5"></feOffset>
2664 |              *      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
2665 |              *      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
2666 |              *  </filter>`;
2667 |              * ```
2668 |              */
2669 |             defs?: string,
2670 | 
2671 |              /**
2672 |              * Size of the template
2673 |              * ```typescript
2674 |              * OrgChart.templates.myTemplate.size = [200, 100];
2675 |              * ```
2676 |              */
2677 |             size?: Array<number>,
2678 | 
2679 |             /**
2680 |              * Size of the expandCollapse button
2681 |              * ```typescript
2682 |              * OrgChart.templates.myTemplate.expandCollapseSize = 30;
2683 |              * ```
2684 |              */
2685 |             expandCollapseSize?: number,
2686 | 
2687 |             /**
2688 |              * Adjust link positions
2689 |              * ```typescript
2690 |              * OrgChart.templates.myTemplate.linkAdjuster = {
2691 |              *  fromX: 0,
2692 |              *  fromY: -10,
2693 |              *  toX: 0,
2694 |              *  toY: 0
2695 |              * }
2696 |              * ```
2697 |              */
2698 |             linkAdjuster?: {
2699 |                 fromX?: number,
2700 |                 fromY?: number,
2701 |                 toX?: number,
2702 |                 toY?: number
2703 |             },
2704 | 
2705 |             /**
2706 |              * Ripple
2707 |              * ```typescript
2708 |              * OrgChart.templates.myTemplate.ripple = 
2709 |              *  radius: 100,
2710 |              *  color: "#e6e6e6",
2711 |              *  rect: null
2712 |              * }
2713 |              * ```
2714 |              */
2715 |             ripple?: {
2716 |                 radius?: number,
2717 |                 color?: string,
2718 |                 rect?: Array<number>
2719 |             },
2720 | 
2721 |             /**
2722 |              * Assistance link
2723 |              * ```typescript
2724 |              * OrgChart.templates.myTemplate.assistanseLink = 
2725 |              *  `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none" 
2726 |              *  d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />`;
2727 |              * }
2728 |              * ```
2729 |              */
2730 |             assistanseLink?: string,
2731 | 
2732 |             /**
2733 |              * Template main svg definition
2734 |              * ```typescript
2735 |              * OrgChart.templates.myTemplate.svg =
2736 |              *  `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
2737 |              *      style="display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}
2738 |              *  </svg>`;
2739 |              * ```
2740 |              */
2741 |             svg?: string,
2742 | 
2743 |             /**
2744 |              * Link
2745 |              * Defines the link color, width and curve
2746 |              * ```typescript
2747 |              * OrgChart.templates.myTemplate.link = 
2748 |              *  `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />`;
2749 |              * ```
2750 |              */
2751 |             link?: string,
2752 | 
2753 |             /**
2754 |              * Pointer
2755 |              * ```typescript
2756 |              * OrgChart.templates.myTemplate.pointer =
2757 |              *  `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)"> 
2758 |              *      <radialGradient id="pointerGradient">
2759 |              *          <stop stop-color="#ffffff" offset="0" />
2760 |              *          <stop stop-color="#C1C1C1" offset="1" />
2761 |              *      </radialGradient>
2762 |              *      <circle cx="16" cy="16" r="16" stroke-width="1" stroke="#acacac" fill="url(#pointerGradient)"></circle>
2763 |              *  </g>`;
2764 |              * ```
2765 |              */
2766 |             pointer?: string,
2767 | 
2768 |             /**
2769 |              * Node definition - A string that should contains SVG markup.
2770 |              * ```typescript
2771 |              * OrgChart.templates.myTemplate.node =
2772 |              *  `<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;
2773 |              * ```
2774 |              */
2775 |             node?: string,
2776 | 
2777 |              /**
2778 |              * Plus/expand button
2779 |              * ```typescript
2780 |              * OrgChart.templates.myTemplate.plus =
2781 |              *  `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
2782 |              *  <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>
2783 |              *  <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`;
2784 |              * ```
2785 |              */
2786 |             plus?: string,
2787 | 
2788 |             /**
2789 |              * Minus/collapse button
2790 |              * ```typescript
2791 |              *  OrgChart.templates.myTemplate.minus =
2792 |              *  `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
2793 |              *  <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`;
2794 |              * ```
2795 |              */
2796 |             minus?: string,
2797 | 
2798 |             /**
2799 |              * Node menu button
2800 |              * ```typescript
2801 |              *  OrgChart.templates.myTemplate.nodeMenuButton = 
2802 |              *      `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
2803 |              *          <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
2804 |              *          <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
2805 |              *          <circle cx="7" cy="0" r="2" fill="#ffffff"></circle><circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
2806 |              *      </g>`;
2807 |              * ```
2808 |              */
2809 |             nodeMenuButton?: string,
2810 | 
2811 |             /**
2812 |              * Menu button
2813 |              * ```typescript
2814 |              *  OrgChart.templates.myTemplate.menuButton = 
2815 |              *      `<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" data-ctrl-menu="">
2816 |              *          <hr style="background-color: #7A7A7A; height: 3px; border: none;">
2817 |              *          <hr style="background-color: #7A7A7A; height: 3px; border: none;">
2818 |              *          <hr style="background-color: #7A7A7A; height: 3px; border: none;">
2819 |              *      </div>`;
2820 |              * ```
2821 |              */
2822 |             menuButton?: string,
2823 | 
2824 |             /**
2825 |              * Node image
2826 |              * ```typescript
2827 |              *  OrgChart.templates.myTemplate.img_0 =  
2828 |              *     `<clipPath id="{randId}"><circle cx="50" cy="30" r="40"></circle></clipPath>
2829 |              *     <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="-10" width="80" height="80">
2830 |              *     </image>`;
2831 |              * ```
2832 |              */
2833 |             img_0?: string,
2834 | 
2835 |             /**
2836 |              * Link label
2837 |              * ```typescript
2838 |              *  OrgChart.templates.myTemplate.link_field_0 =  
2839 |              *     `<text text-anchor="middle" fill="#aeaeae" data-width="290" x="0" y="0" style="font-size:10px;">{val}</text>`;
2840 |              * ```
2841 |              */
2842 |             link_field_0?: string,
2843 | 
2844 |             /**
2845 |              * Edit form header color
2846 |              * ```typescript
2847 |              *  OrgChart.templates.myTemplate.editFormHeaderColor = '#039BE5'
2848 |              * ```
2849 |              */
2850 |             editFormHeaderColor?: string,
2851 | 
2852 |             /**
2853 |              * EMode circle menu button
2854 |              * ```typescript
2855 |              *  OrgChart.templates.myTemplate.nodeCircleMenuButton = {
2856 |              *      radius: 18,
2857 |              *      x: 250,
2858 |              *      y: 60,
2859 |              *      color: '#fff',
2860 |              *      stroke: '#aeaeae'
2861 |              *  }
2862 |              * ```
2863 |              */
2864 |             nodeCircleMenuButton?: object,
2865 | 
2866 |             /**
2867 |              * Minimized template
2868 |              * ```typescript
2869 |              * OrgChart.templates.myTemplate.min = Object.assign({}, OrgChart.templates.ana);
2870 |              * OrgChart.templates.myTemplate.min.size = [250, 60];
2871 |              * OrgChart.templates.myTemplate.min.img_0 = "";
2872 |              * OrgChart.templates.myTemplate.min.field_0 =
2873 |              *  `<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="40" text-anchor="middle">{val}</text>`;
2874 |              * OrgChart.templates.myTemplate.min.field_1 = "";
2875 |              * ```
2876 |              */
2877 |             min?: OrgChart.template,
2878 | 
2879 |             /**
2880 |              * A custom field definition
2881 |              * ```typescript
2882 |              *  OrgChart.templates.myTemplate.number =
2883 |              *      `<text width="230" style="font-size: 11px;"  fill="#64696b" x="150" y="53"  text-anchor="start">{val}</text>`;
2884 |              * ```
2885 |              */
2886 |             [name: string]: any
2887 |         }
2888 | 
2889 | 
2890 |     /**
2891 |      * Edit/Details Form User Interface
2892 |      * ```typescript
2893 |      * let chart = new OrgChart("#tree", {
2894 |      * });
2895 |      * chart.onInit(function(){
2896 |      *  chart.editUI.show(1); 
2897 |      * });
2898 |      * chart.load(nodes)
2899 |      * ```
2900 |      */
2901 |     interface editUI {
2902 |         /**
2903 |          * Inits edit ui
2904 |          * @param obj 
2905 |          */
2906 |         init(obj: OrgChart): void;
2907 |         /**
2908 |          * The on() method of the editUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
2909 |          * @category Event Listeners
2910 |          * @param type A case-sensitive string representing the event type to listen for.
2911 |          * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
2912 |          */
2913 |         on(type: "show" | "shown" | "save" | "cancel" | "element-btn-click" | "button-click" | "hide", listener: (sender: editUI, args: any, args1: any, args2: any) => void | boolean): editUI;
2914 |         /**
2915 |          * Shows the edit form for the specified node id
2916 |          * @param id node id
2917 |          * @param detailsMode If true the edit form is in read only mode
2918 |          * @param dontAnim 
2919 |          */
2920 |         show(id: string | number, detailsMode?: boolean, dontAnim?: boolean): void;
2921 |         /**
2922 |          * Hides the edit form
2923 |          */
2924 |         hide(): void;
2925 |         content(id: string | number, detailsMode: boolean, dontAnim: boolean, width: string, dontRenderButtons: boolean): string;
2926 | 
2927 |         setAvatar(url: string): void;
2928 |         // static renderHeaderContent(title: string, photo: string, node: OrgChart.node, data: object): string;        
2929 |     }
2930 | 
2931 |     /**
2932 |      * AI User Interface
2933 |      * ```typescript
2934 |      * let chart = new OrgChart("#tree", {
2935 |      *  enableAI: true,
2936 |      * });
2937 |      * chart.onInit(function(){
2938 |      *  chart.aiUI.show(); 
2939 |      * });
2940 |      * chart.load(nodes)
2941 |      * ```
2942 |      */
2943 |     interface aiUI {
2944 |         /**
2945 |          * The width of the ai UI
2946 |          */
2947 |         get width(): number;
2948 |         /**
2949 |          * Prompt text box
2950 |          */
2951 |         inputElement: HTMLInputElement;
2952 |         /**
2953 |          * Inits ai ui
2954 |          * @param obj 
2955 |          */
2956 |         init(obj: OrgChart): void;        
2957 |         /**
2958 |          * Shows the ai form 
2959 |          * @param dontFocus if true the imput will not be focused
2960 |          * @param dontAnim If true hsoe withput animation
2961 |          */
2962 |         show(dontFocus?: boolean, dontAnim?: boolean): void;
2963 |         /**
2964 |          * Hides the ai form
2965 |          */
2966 |         hide(): void;
2967 |         /**
2968 |          * Returns true if the ai UI is visible
2969 |          */
2970 |         isVisible(): boolean;
2971 |     }
2972 | 
2973 | 
2974 | /**
2975 |      * Orgscribe User Interface - Orgscribe like Markdown for orgcharts
2976 |      * ```typescript
2977 |      * let chart = new OrgChart("#tree", {});
2978 |      * chart.onInit(function(){
2979 |      *  chart.orgScribeUIUI.show(); 
2980 |      * });
2981 |      * chart.load(nodes)
2982 |      * ```
2983 |      */
2984 |     interface orgScribeUI {
2985 |         /**
2986 |          * The width of the orgscribe UI
2987 |          */
2988 |         get width(): number;
2989 |         /**
2990 |          * Text area
2991 |          */
2992 |         textAreaElement: HTMLInputElement;
2993 |         /**
2994 |          * Inits orgscribe ui
2995 |          * @param obj 
2996 |          */
2997 |         init(obj: OrgChart): void;        
2998 |         /**
2999 |          * Shows the orgscribe form 
3000 |          * @param dontFocus if true the imput will not be focused
3001 |          * @param dontAnim If true hsoe withput animation
3002 |          */
3003 |         show(dontFocus?: boolean, dontAnim?: boolean): void;
3004 |         /**
3005 |          * Hides the orgscribe form
3006 |          */
3007 |         hide(): void;
3008 |         /**
3009 |          * Returns true if the orgscribe UI is visible
3010 |          */
3011 |         isVisible(): boolean;
3012 |     }    
3013 | 
3014 |     interface searchUI {
3015 |         /**
3016 |          * @ignore
3017 |          */
3018 |         init(obj: OrgChart): void;
3019 | 
3020 |         /**
3021 |          * The on() method of the searchUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
3022 |          * ```typescript
3023 |          * let chart = new OrgChart("#tree", {});
3024 |          * chart.searchUI.on('searchclick', function (sender, args) {
3025 |          *  sender.hide();
3026 |          * });
3027 |          * chart.load(nodes)
3028 |          * ```
3029 |          * @category Event Listeners
3030 |          * @param type A case-sensitive string representing the event type to listen for.
3031 |          * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
3032 |          */        
3033 |         on(type: "add-item" | "show-items" | "hide" | "searchclick" , listener: (sender: searchUI, args: any, args1: any, args2: any) => void | boolean): searchUI;
3034 | 
3035 |         /**
3036 |          * Hides the search grid
3037 |          * ```typescript
3038 |          * let chart = new OrgChart("#tree", {});
3039 |          * chart.searchUI.on('searchclick', function (sender, args) {
3040 |          *  sender.hide();
3041 |          * });
3042 |          * chart.load(nodes)
3043 |          * ```
3044 |          */
3045 |         hide(): void;
3046 | 
3047 |         /**
3048 |          * Finds filed data by specified value
3049 |          * ```typescript
3050 |          * let chart = new OrgChart("#tree", {});
3051 |          * chart.onInit(() => {
3052 |          *  chart.searchUI.find("Denny");
3053 |          * });
3054 |          * chart.load(nodes)
3055 |          * ```
3056 |          * @param value search for value
3057 |          */
3058 |         find(value: string): void;
3059 | 
3060 |         /**
3061 |          * ```typescript
3062 |          * OrgChart.searchUI.createItem = function (img, id, first, second) {
3063 |          *  return 
3064 |          *      `<tr data-search-item-id="${id}">
3065 |          *          <td class="boc-search-image-td">
3066 |          *              <div class="boc-search-photo" style="background-image: url(${img})"></div>
3067 |          *          </td>
3068 |          *          <td class="boc-search-text-td">${first} <br/>${second}</td>
3069 |          *      </tr>`;
3070 |          * };
3071 |          * ```
3072 |          * @param img 
3073 |          * @param id 
3074 |          * @param first 
3075 |          * @param second 
3076 |          */
3077 |         createItem(img: string, id: string | number, first: string, second: string): string;
3078 | 
3079 |         /**
3080 |          * @ignore
3081 |          */
3082 |         helpView(): string;
3083 | 
3084 |         /**
3085 |          * @ignore
3086 |          */
3087 |         addMatchTag(id: string | number) : boolean;
3088 | 
3089 |         /**
3090 |          * Input field
3091 |          * ```typescript
3092 |          * let chart = new OrgChart("#tree", {});
3093 |          * chart.onInit(() => {
3094 |          *  chart.searchUI.input.focus();
3095 |          * });
3096 |          * chart.load(nodes)
3097 |          * ```
3098 |          */
3099 |         input: HTMLElement;
3100 | 
3101 |         /**
3102 |          * @ignore
3103 |          */
3104 |         searchTableWrapper: HTMLElement; 
3105 | 
3106 |         /**
3107 |          * @ignore
3108 |          */
3109 |         lastSearch: Array<object>;        
3110 |         /**
3111 |          * @ignore
3112 |          */
3113 |         instance: OrgChart;
3114 |         /**
3115 |          * @ignore
3116 |          */
3117 |         searchFieldsAbbreviation: {[key: string]: string};        
3118 |     }
3119 | 
3120 |     
3121 |     interface filterUI {
3122 |         /**
3123 |          * @ignore
3124 |          */
3125 |         init(instance: OrgChart): void;   
3126 | 
3127 |         /**
3128 |          * @ignore
3129 |          */
3130 |         update(): void;
3131 | 
3132 |         /**
3133 |          * Opens filter Tab 
3134 |          * ```typescript
3135 |          * let chart = new OrgChart("#tree", {
3136 |          * })
3137 |          * chart.onInit(() => {
3138 |          *  chart.filterUI.show("city")
3139 |          * })
3140 |          * chart.load(nodes)
3141 |          * ```
3142 |          * @param filterTabName the name of the filter tab
3143 |          */
3144 |         show(filterTabName: string): void;
3145 | 
3146 |         /**
3147 |          * Opens filter Tab 
3148 |          * ```typescript
3149 |          * chart.element.addEventListener('click', function(event){
3150 |          *  if (event.target == chart.getSvg()){
3151 |          *      chart.filterUI.hide();
3152 |          *  }
3153 |          * });
3154 |          * ```
3155 |          */
3156 |         hide(): void;
3157 | 
3158 |         /**
3159 |          * @ignore
3160 |          */
3161 |         addFilterTag(data: object): boolean;
3162 |                 /**
3163 |          * The on() method of the filterUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
3164 |          * @category Event Listeners
3165 |          * @param type A case-sensitive string representing the event type to listen for.
3166 |          * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
3167 |          */
3168 | 
3169 |         /**
3170 |          * Opens filter Tab 
3171 |          * ```typescript
3172 |          * let chart = new OrgChart("#tree", {
3173 |          * })
3174 |          * chart.filterUI.on('add-filter', function(sender, args){
3175 |          *  let names = Object.keys(sender.filterBy);
3176 |          *  let index = names.indexOf(args.name);
3177 |          *  if (index == names.length - 1) {
3178 |          *      args.html += `<div data-btn-reset style="color: #039BE5;">reset</div>`;
3179 |          *  } 
3180 |          * });
3181 |          * chart.load(nodes)
3182 |          * ```
3183 |          */
3184 |         on(type: "update" | "add-item" | "add-filter" | "show-items" , listener: (sender: filterUI, args: any, args1: any, args2: any) => void | boolean): filterUI;
3185 |         
3186 |         /**
3187 |          * Contains all filters
3188 |          * ```typescript
3189 |          * let chart = new OrgChart("#tree", {
3190 |          * });
3191 |          * chart.onInit(() => {
3192 |          *  let filterBy = chart.filterUI.filterBy
3193 |          * }
3194 |          * chart.load(nodes)
3195 |          * ```
3196 |          */
3197 |         filterBy?: any;
3198 | 
3199 |         /**
3200 |          * @ignore
3201 |          */
3202 |         element: HTMLElement;
3203 | 
3204 |         /**
3205 |          * @ignore
3206 |          */
3207 |         instance: OrgChart;
3208 |     }
3209 | 
3210 |     /**
3211 |      * @ignore
3212 |      */
3213 |     interface xScrollUI {
3214 |         addListener(svg: HTMLElement): void;   
3215 |         create(width: number): void;   
3216 |         setPosition(width: number): void;   
3217 |         on(type: "change", listener: (sender: xScrollUI, args: any, args1: any, args2: any) => void | boolean): xScrollUI;
3218 |         element: HTMLElement;
3219 |     }
3220 | 
3221 |     /**
3222 |      * @ignore
3223 |      */
3224 |     interface yScrollUI {
3225 |         addListener(svg: HTMLElement): void;   
3226 |         create(width: number): void;   
3227 |         setPosition(width: number): void;   
3228 |         on(type: "change", listener: (sender: yScrollUI, args: any, args1: any, args2: any) => void | boolean): yScrollUI;
3229 |         element: HTMLElement;
3230 |     }
3231 | 
3232 | 
3233 |     /**
3234 |      * Menu UI
3235 |      * ```typescript
3236 |      * let chart = new OrgChart("#tree", {
3237 |      * })
3238 |      * chart.onInit(() => {
3239 |      *  chart.menuUI.show(chart.getMenuButton());
3240 |      * })
3241 |      * chart.load(nodes)
3242 |      * ```
3243 |      */
3244 |     interface menuUI  {
3245 |         init(obj: OrgChart, menu: { [key: string]: menu }): void;
3246 |         /**
3247 |          * The on() method of the menuUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
3248 |          * @category Event Listeners
3249 |          * @param type A case-sensitive string representing the event type to listen for.
3250 |          * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
3251 |          */        
3252 |         on(type: "show", listener: (sender: menuUI, args: any, args1: any, args2: any) => void | boolean): menuUI;
3253 |         /**
3254 |          * Shows menu next to html element
3255 |          * @param stickToElement 
3256 |          * @param firstNodeId 
3257 |          * @param secondNodeId 
3258 |          * @param menu 
3259 |          */
3260 |         showStickIn(stickToElement: HTMLElement, firstNodeId: string | number, secondNodeId: string | number, menu: { [key: string]: menu }): void;
3261 |         /**
3262 |          * Returns true if the menu is visible
3263 |          */
3264 |         isVisible(): boolean;
3265 | 
3266 |         /**
3267 |          * Hieds the menu
3268 |          */
3269 |         hide(): void;
3270 |         /**
3271 |          * Shows menu by x,y position
3272 |          * @param x 
3273 |          * @param y 
3274 |          * @param firstNodeId 
3275 |          * @param secondNodeId 
3276 |          * @param menu 
3277 |          */
3278 |         show(x: number | HTMLElement, y?: number, firstNodeId?: string | number, secondNodeId?: string | number, menu?: { [key: string]: menu }): void;
3279 |     }
3280 | 
3281 | 
3282 |         /**
3283 |      * Menu UI
3284 |      * ```typescript
3285 |      * let chart = new OrgChart("#tree", {
3286 |      * })
3287 |      * chart.onInit(() => {
3288 |      *  chart.controlsUI.show();
3289 |      * })
3290 |      * chart.load(nodes)
3291 |      * ```
3292 |      */
3293 |     interface controlsUI  {
3294 |         init(obj: OrgChart): void;
3295 | 
3296 |         /**
3297 |          * Hieds controls
3298 |          */
3299 |         hide(): void;
3300 |         /**
3301 |          * Shows controls
3302 |          */
3303 |         show(): void;
3304 |     }
3305 | 
3306 |     interface powerPointPreviewUI  {
3307 |         /**
3308 |          * The width of the EXPORT UI
3309 |          */
3310 |         get width(): number;
3311 |         get instance(): OrgChart;
3312 |         get options(): OrgChart.exportPowerPontOptions;
3313 | 
3314 |         locExport: string;
3315 |         locCancel: string;
3316 |         locParentLevels: string;
3317 |         locChildLevels: string;
3318 |         locClickToAdd: string;
3319 |         locAddNew: string;
3320 |         locRemove: string;
3321 | 
3322 |         init(obj: OrgChart): void;
3323 |         isVisible(): boolean;
3324 |         hide(): void;
3325 |         show(options: OrgChart.exportPowerPontOptions): void;
3326 |     }
3327 | 
3328 |     interface pdfPreviewUI  {
3329 |         /**
3330 |          * The width of the EXPORT UI
3331 |          */
3332 |         get width(): number;
3333 |         get instance(): OrgChart;
3334 |         get options(): OrgChart.exportPDFOptions;
3335 |         
3336 |         locExport: string;
3337 |         locCancel: string;
3338 |         locParentLevels: string;
3339 |         locChildLevels: string;
3340 |         locClickToAdd: string;
3341 |         locAddNew: string;
3342 |         locRemove: string;
3343 |         locPrintTree: string;
3344 |         locPrintProfile: string;
3345 |         locLandscape: string;
3346 |         locPortrait: string;
3347 | 
3348 |         init(obj: OrgChart): void;
3349 |         isVisible(): boolean;
3350 |         hide(): void;
3351 |         show(options: OrgChart.exportPDFOptions): void;
3352 |         
3353 |     }
3354 | 
3355 | 
3356 |     interface pngPreviewUI  {
3357 |         /**
3358 |          * The width of the EXPORT UI
3359 |          */
3360 |         get width(): number;
3361 |         get instance(): OrgChart;
3362 |         get options(): OrgChart.exportPNGOptions;
3363 |         
3364 |         
3365 |         locExport: string;
3366 |         locCancel: string;
3367 |         locParentLevels: string;
3368 |         locChildLevels: string;
3369 |         locClickToAdd: string;
3370 |         locAddNew: string;
3371 |         locRemove: string;
3372 | 
3373 |         init(obj: OrgChart): void;
3374 |         isVisible(): boolean;
3375 |         hide(): void;
3376 |         show(options: OrgChart.exportPNGOptions): void;
3377 |     }
3378 | 
3379 |     
3380 |     interface svgPreviewUI extends OrgChart.pngPreviewUI {}
3381 | 
3382 |     /**
3383 |      * Circle Menu UI
3384 |      *  ```typescript     
3385 |      * var chart = new OrgChart('#tree', {});
3386 |      * chart.onInit(() => {
3387 |      *  chart.nodeCircleMenuUI.show(1);
3388 |      * });
3389 |      * ```
3390 |      */
3391 |     interface circleMenuUI {
3392 |         /**
3393 |          * Inits circle menu instance
3394 |          * @param obj 
3395 |          * @param menu 
3396 |          */
3397 |         init(obj: OrgChart, menu: { [key: string]: menu }): void;
3398 |         /**
3399 |          * Shows circle menu 
3400 |          * 
3401 |          * 
3402 |          * @param nodeId 
3403 |          * @param menu 
3404 |          */
3405 |         show(nodeId: string | number, menu?: { [key: string]: menu }): void;
3406 |         
3407 |         /**
3408 |          * Indicates if the circle menu is open or close (visible or unvisible)
3409 |          */
3410 |         isVisible(): boolean;
3411 | 
3412 |         /**
3413 |          * Hides circle menu 
3414 |          */
3415 |         hide(): void;
3416 |         /**
3417 |          * The on() method of the circleMenuUI interface sets up a function that will be called whenever the specified event is delivered to the target.     * 
3418 |          * @category Event Listeners
3419 |          * @param type A case-sensitive string representing the event type to listen for.
3420 |          * @param listener The object that receives a notification when an event of the specified type occurs. This must be a JavaScript function. 
3421 |          */        
3422 |         on(type: "click" | "show" | "drag" | "drop" | "mouseenter" | "mouseout", listener: (sender: circleMenuUI, args: any, args1: any, args2: any) => void | boolean): circleMenuUI;
3423 |     }
3424 | 
3425 |     interface undoRedoUI {
3426 |         /**
3427 |          * Inits undoRedoUI
3428 |          * @ignore
3429 |          * @param instance 
3430 |          */
3431 |         init(instance: OrgChart): void;
3432 |         /**
3433 |          * Refreshes the UI buttonss
3434 |          * @ignore
3435 |          */
3436 |         refresh(): void;
3437 |         /** 
3438 |          * @ignore
3439 |          */
3440 |         on(type: "change", listener: (sender: undoRedoUI, args: any) => void | boolean): undoRedoUI;
3441 |         /**
3442 |          * Occurs when the undo redo buttons needs to updated.
3443 |          *  ```typescript     
3444 |          * var chart = new OrgChart('#tree', {});
3445 |          * chart.undoRedoUI.onChange((args) => {
3446 |          * //return false; to cancel the operation
3447 |          * });
3448 |          * ```
3449 |          * @category Event Listeners
3450 |          * @param listener 
3451 |          */
3452 |         onChange(listener: (args: {
3453 |             /**
3454 |              * Undo stack steps count
3455 |              */
3456 |             undoStepsCount: number,
3457 |             /**
3458 |              * Redo stack steps count
3459 |              */
3460 |             redoStepsCount: number
3461 |         }) => void): undoRedoUI;
3462 |         instance: OrgChart;
3463 |     }
3464 | 
3465 | 
3466 | 
3467 |     interface keyNavigation {
3468 |         /**
3469 |          * Set focus to specified id on initial load
3470 |          *  ```typescript     
3471 |          * var chart = new OrgChart('#tree', {
3472 |          *      keyNavigation:{
3473 |          *          focusId: 2
3474 |          *      }
3475 |          * });
3476 |          * ```
3477 |          */
3478 |         focusId: number | string
3479 |     }
3480 | 
3481 |     /**
3482 |      * Toolbar UI
3483 |      */
3484 |     interface toolbarUI {
3485 |         /**
3486 |          * @ignore
3487 |          * @param obj 
3488 |          * @param toolbar 
3489 |          */
3490 |         init(obj: OrgChart, toolbar: toolbar): void;
3491 | 
3492 |         /**
3493 |          * Shows the layout
3494 |          *  ```typescript     
3495 |          * var chart = new OrgChart('#tree', {});
3496 |          * chart.onInit(function(){
3497 |          *  this.toolbarUI.showLayout();
3498 |          * });
3499 |          * chart.load(nodes)
3500 |          * ```
3501 |          */
3502 |         showLayout(): void;
3503 | 
3504 |         /**
3505 |          * Hides the layout
3506 |          *  ```typescript     
3507 |          * var chart = new OrgChart('#tree', {});
3508 |          * chart.onInit(function(){
3509 |          *  this.toolbarUI.hideLayout();
3510 |          * });
3511 |          * chart.load(nodes)
3512 |          * ```
3513 |          */
3514 |         hideLayout(): void;
3515 | 
3516 |         /**
3517 |          * ```typescript
3518 |          * OrgChart.toolbarUI.expandAllIcon =
3519 |          *  `<svg style="margin-bottom:7px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3); border: 1px solid #cacaca;background-color: #f9f9f9;display: block;cursor: pointer;" width="32px" height="32px">
3520 |          *      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#757575" /></marker>
3521 |          *      <line x1="11" y1="11" x2="6" y2="6" stroke="#757575" stroke-width="2" marker-end="url(#arrow)" />
3522 |          *      <line x1="21" y1="11" x2="26" y2="6" stroke="#757575" stroke-width="2" marker-end="url(#arrow)" />
3523 |          *      <line x1="21" y1="21" x2="26" y2="26" stroke="#757575" stroke-width="2" marker-end="url(#arrow)" />
3524 |          *      <line x1="11" y1="21" x2="6" y2="26" stroke="#757575" stroke-width="2" marker-end="url(#arrow)" />
3525 |          *      <rect x="12" y="12" width="8" height="8" fill="#757575"></rect>
3526 |          *  </svg>`;
3527 |          * ```
3528 |          */
3529 |         expandAllIcon?: string;
3530 | 
3531 |         /**
3532 |          * ```typescript
3533 |          * OrgChart.toolbarUI.fitIcon =
3534 |          *  `<svg style="margin-bottom:7px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3); border: 1px solid #cacaca;background-color: #f9f9f9;display: block;cursor: pointer;" width="32px" height="32px">
3535 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M4,11 L4,4 L11,4"></path>
3536 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M28,11 L28,4 L21,4"></path>
3537 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M28,21 L28,28 L21,28"></path>
3538 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M4,21 L4,28 L11,28"></path>
3539 |          *      <circle cx="16" cy="16" r="5" fill="#757575"></circle>
3540 |          *  </svg>`;
3541 |          * ```
3542 |          */
3543 |         fitIcon?: string;
3544 | 
3545 |         /**
3546 |          * ```typescript
3547 |          * OrgChart.toolbarUI.openFullScreenIcon =
3548 |          *  `<svg  style="margin-bottom:7px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3); border: 1px solid #cacaca;background-color: #f9f9f9;display: block;cursor: pointer;" width="32px" height="32px">
3549 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M4,11 L4,4 L11,4"></path>
3550 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M28,11 L28,4 L21,4"></path>
3551 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M28,21 L28,28 L21,28"></path>
3552 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M4,21 L4,28 L11,28"></path>
3553 |          *      <line x1="5" y1="5" x2="27" y2="27" stroke-width="3" stroke="#757575"></line>
3554 |          *      <line x1="5" y1="27" x2="27" y2="5" stroke-width="3" stroke="#757575"></line>
3555 |          *  </svg>`;
3556 |          * ```
3557 |          */
3558 |         openFullScreenIcon?: string;
3559 | 
3560 |         /**
3561 |          * ```typescript
3562 |          * OrgChart.toolbarUI.closeFullScreenIcon =
3563 |          *  `<svg style="margin-bottom:7px;box-shadow: 0px 1px 4px rgba(0,0,0,0.3); border: 1px solid #cacaca;background-color: #f9f9f9;display: block;cursor: pointer;" width="32px" height="32px">
3564 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M4,11 L4,4 L11,4"></path>
3565 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M28,11 L28,4 L21,4"></path>
3566 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M28,21 L28,28 L21,28"></path>
3567 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M4,21 L4,28 L11,28"></path>
3568 |          *      <rect x="11" y="11" width="10" height="10" stroke-width="3" fill="none" stroke="#757575" ></rect>
3569 |          *  </svg>`;
3570 |          * ```
3571 |          */
3572 |         closeFullScreenIcon?: string;
3573 | 
3574 |         /**
3575 |          * ```typescript
3576 |          * OrgChart.toolbarUI.zoomInIcon =
3577 |          *  `<svg style="box-shadow: 0px 1px 4px rgba(0,0,0,0.3); border-left: 1px solid #cacaca; border-right: 1px solid #cacaca; border-top: 1px solid #cacaca; background-color: #f9f9f9;display: block; cursor: pointer;" width="32px" height="32px" >
3578 |          *      <g>
3579 |          *          <rect fill="#f9f9f9" x="0" y="0" width="32" height="32" ></rect>
3580 |          *          <line x1="8" y1="16" x2="24" y2="16" stroke-width="3" stroke="#757575"></line>
3581 |          *          <line x1="16" y1="8" x2="16" y2="24" stroke-width="3" stroke="#757575"></line>
3582 |          *      </g>
3583 |          *      <line x1="4" y1="32" x2="28" y2="32" stroke-width="1" stroke="#cacaca"></line>
3584 |          *  </svg>`;
3585 |          * ```
3586 |          */
3587 |         zoomInIcon?: string;
3588 | 
3589 |         /**
3590 |          * ```typescript
3591 |          * OrgChart.toolbarUI.zoomOutIcon =
3592 |          *  `<svg style="box-shadow: 0px 1px 4px rgba(0,0,0,0.3); margin-bottom:7px; border-left: 1px solid #cacaca; border-right: 1px solid #cacaca; border-bottom: 1px solid #cacaca; background-color: #f9f9f9;display: block; cursor: pointer;" width="32px" height="32px" >
3593 |          *      <g>
3594 |          *          <rect fill="#f9f9f9" x="0" y="0" width="32" height="32" ></rect>
3595 |          *          <line x1="8" y1="16" x2="24" y2="16" stroke-width="3" stroke="#757575"></line>
3596 |          *      </g>
3597 |          *  </svg>`;
3598 |          * ```
3599 |          */
3600 |         zoomOutIcon?: string;
3601 | 
3602 |         /**
3603 |          * ```typescript
3604 |          * OrgChart.toolbarUI.layoutIcon =
3605 |          *  `<svg ` + OrgChart.attr.tlbr + `="layout" style="box-shadow: 0px 1px 4px rgba(0,0,0,0.3); border: 1px solid #cacaca;background-color: #f9f9f9;display: block;cursor: pointer;" width="32px" height="32px">
3606 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M8,24 L16,14 L24,24"></path>
3607 |          *      <path stroke-width="3" fill="none" stroke="#757575" d="M8,16 L16,8 L24,16"></path>
3608 |          *  </svg>`;
3609 |          * ```
3610 |          */
3611 |         layoutIcon?: string;
3612 |     }
3613 | 
3614 |     /**
3615 |      * When you implement function calling in a prompt, you create a tools object, which contains one or more function declarations.
3616 |      * ```typescript     
3617 |      * var chart = new OrgChart('#tree', {
3618 |      *  enableAI: true,
3619 |      *      aiChatTools: [{
3620 |      *          functionName: 'sendEmail',
3621 |      *          functionDescription: 'Send an email to a given employee with a subject and message.',
3622 |      *          functionParameters: {
3623 |      *              type: "object",
3624 |      *                  properties: {
3625 |      *                      to: {
3626 |      *                          type: "string",
3627 |      *                          description: "The employee email address."
3628 |      *                      },
3629 |      *                      subject: {
3630 |      *                          type: "string",
3631 |      *                          description: "Email subject line."
3632 |      *                      },
3633 |      *                      body: {
3634 |      *                          type: "string",
3635 |      *                          description: "Body of the email message."
3636 |      *                      }
3637 |      *                  },
3638 |      *                  required: [
3639 |      *                      "to",
3640 |      *                      "subject",
3641 |      *                      "body"
3642 |      *                  },
3643 |      *                  additionalProperties: false
3644 |      *              },
3645 |      *              strict: true
3646 |      *      }]
3647 |      * });
3648 |      * ```
3649 |      * [Go to AI doc page for more details](https://balkan.app/OrgChartJS/Docs/AI)
3650 |      */
3651 |     interface aiChatTool  {
3652 |         /**
3653 |          * The unique identifier for the function within the API call.
3654 |          */
3655 |         functionName?: string,
3656 |         /**
3657 |          * A comprehensive explanation of the function's purpose and capabilities.
3658 |          */
3659 |         functionDescription?: string,
3660 |         /**
3661 |          * Defines the input data required by the function.
3662 |          */
3663 |         functionParameters?: {
3664 |             /**
3665 |              * Specifies the overall data type, such as object.
3666 |              */
3667 |             type?: "object",
3668 |             /**
3669 |              * Lists individual parameters.
3670 |              */
3671 |             properties?: {
3672 |                 [key: string]: {
3673 |                     /**
3674 |                      * The data type of the parameter, such as string, integer, boolean.
3675 |                      */
3676 |                     type?: string,
3677 |                     /**
3678 |                      * A clear explanation of the parameter's purpose and expected format.
3679 |                      */
3680 |                     description?: string
3681 |                 }
3682 |             }, 
3683 |             /**
3684 |              * An array of strings listing the parameter names that are mandatory for the function to operate.
3685 |              */
3686 |             required?: Array<string>         
3687 |         }
3688 |     }
3689 | 
3690 |     /**
3691 |      * Toolbar buttons. Set to true if you'd like to show a button
3692 |      * 
3693 |      * For better experiense please use the new feature Controls instead of Toolbars.
3694 |      */
3695 |     interface toolbar  {
3696 | 
3697 |         /**
3698 |          * Shows the layout options
3699 |          * ```typescript     
3700 |          * var chart = new OrgChart('#tree', {
3701 |          *      toolbar: {
3702 |          *          layout: true
3703 |          *      }
3704 |          * });
3705 |          * ```
3706 |          */
3707 |         layout?: boolean,
3708 | 
3709 |         /**
3710 |          * 
3711 |          * Zoom plus and minus buttons
3712 |          * ```typescript     
3713 |          * var chart = new OrgChart('#tree', {
3714 |          *      toolbar: {
3715 |          *          zoom: true
3716 |          *      }
3717 |          * });
3718 |          * ```
3719 |          */
3720 |         zoom?: boolean,
3721 | 
3722 |         /**
3723 |          * Fit to screen option
3724 |          * ```typescript     
3725 |          * var chart = new OrgChart('#tree', {
3726 |          *      toolbar: {
3727 |          *          fit: true
3728 |          *      }
3729 |          * });
3730 |          * ```
3731 |          */
3732 |         fit?: boolean,
3733 | 
3734 |         /**
3735 |          * Expand all nodes button
3736 |          * ```typescript     
3737 |          * var chart = new OrgChart('#tree', {
3738 |          *      toolbar: {
3739 |          *          expandAll: true
3740 |          *      }
3741 |          * });
3742 |          * ```
3743 |          */
3744 |         expandAll?: boolean,
3745 | 
3746 |         /**
3747 |          * Switch to fullscreen button
3748 |          * ```typescript     
3749 |          * var chart = new OrgChart('#tree', {
3750 |          *      toolbar: {
3751 |          *          fullScreen: true
3752 |          *      }
3753 |          * });
3754 |          * ```
3755 |          */
3756 |         fullScreen?: boolean
3757 |     }
3758 | 
3759 |     /**
3760 |      * miniMap options
3761 |      */
3762 |     interface miniMap  {
3763 | 
3764 |         /**
3765 |          * Array of colors to use for the miniMap
3766 |          * ```typescript
3767 |          * OrgChart.miniMap.colors = ["#FFCA28", "#F57C00", "#039be5", "#757575"];
3768 |          * ```
3769 |          */
3770 |         colors?: Array<string>,
3771 | 
3772 |         /**
3773 |          * The background color in the miniMAp
3774 |          * ```typescript
3775 |          * OrgChart.miniMap.selectorBackgroundColor = "#888888";
3776 |          * ```
3777 |          */
3778 |         selectorBackgroundColor?: string,
3779 | 
3780 |         
3781 |         /**
3782 |          * The background of the focus
3783 |          * ```typescript
3784 |          * OrgChart.miniMap.backgroundColor = "#fff";
3785 |          * ```
3786 |          */
3787 |         backgroundColor?: string,
3788 | 
3789 |         /**
3790 |          * The stroke of the focus
3791 |          * ```typescript
3792 |          * OrgChart.miniMap.focusStroke = "#039BE5";
3793 |          * ```
3794 |          */
3795 |         focusStroke?: string,
3796 | 
3797 |         /**
3798 |          * The background opacity
3799 |          * ```typescript
3800 |          * OrgChart.miniMap.opacity = 0.8;
3801 |          * ```
3802 |          */
3803 |         opacity?: Number,
3804 | 
3805 |         /**
3806 |          * The miniMap border
3807 |          * ```typescript
3808 |          * OrgChart.miniMap.border = '2px solid #039BE5';
3809 |          * ```
3810 |          */
3811 |         border?: string,
3812 |         
3813 |         /**
3814 |          * The miniMap width
3815 |          * ```typescript
3816 |          * OrgChart.miniMap.width = 200;
3817 |          * ```
3818 |          */
3819 |         width?: Number,
3820 | 
3821 |         /**
3822 |          * The miniMap height
3823 |          * ```typescript
3824 |          * OrgChart.miniMap.width = 100;
3825 |          * ```
3826 |          */
3827 |         height?: Number,
3828 | 
3829 |         /**
3830 |          * The miniMap padding
3831 |          * ```typescript
3832 |          * OrgChart.miniMap.padding = 10;
3833 |          * ```
3834 |          */
3835 |         padding?: Number,
3836 | 
3837 |         /**
3838 |          * The miniMap position
3839 |          * ```typescript
3840 |          * OrgChart.miniMap.padding = {
3841 |          *  top: 'padding',
3842 |          *  left: 'padding',
3843 |          *  right: undefined,
3844 |          *  bottom: undefined
3845 |          * }
3846 |          * ```
3847 |          */
3848 |         position?: OrgChart.position,
3849 | 
3850 |         /**
3851 |          * Draggable option
3852 |          * default option: true
3853 |          * ```typescript
3854 |          * OrgChart.miniMap.draggable = false;
3855 |          * ```
3856 |          */
3857 |         draggable?: boolean
3858 |     }
3859 | 
3860 |     /**
3861 |      * MiniMap position
3862 |      * ```typescript
3863 |      * OrgChart.miniMap.position = {
3864 |      *      top: 'padding',
3865 |      *      left: 'padding',
3866 |      *      right: undefined,
3867 |      *      bottom: undefined
3868 |      * };
3869 |      * ```
3870 |      */
3871 |     interface position  {
3872 |         top?: string,
3873 |         left?: string,
3874 |         right?: string,
3875 |         bottom?: string
3876 |     }
3877 | 
3878 | 
3879 | 
3880 | 
3881 |     
3882 |     interface exportPowerPontOptions {
3883 |         openInNewTab?: boolean,
3884 |         fileName?: string,
3885 |         // width?: number,
3886 |         // height?: number,        
3887 |         padding?: number,
3888 |         margin?: Array<number>,
3889 |         expandChildren?: boolean,
3890 |         childLevels?: number,
3891 |         parentLevels?: number,
3892 |         min?: boolean,
3893 |         pages?: Array<{
3894 |             chartInstance?: OrgChart,
3895 |             nodeId?: number | string,
3896 |             expandChildren?: boolean,
3897 |             childLevels?: number,
3898 |             parentLevels?: number,
3899 |             min?: boolean,
3900 |             header?: string,
3901 |             footer?: string,
3902 |             content?:  string
3903 |         }>,
3904 |         format?: "Screen" | "Widescreen" | "Standard",
3905 |         header?: string,
3906 |         footer?: string
3907 |     }
3908 | 
3909 |     interface exportPDFOptions {
3910 |         openInNewTab?: boolean,
3911 |         fileName?: string,
3912 |         landscape?: boolean,
3913 |         // width?: number,
3914 |         // height?: number,        
3915 |         padding?: number,
3916 |         margin?: Array<number>,
3917 |         expandChildren?: boolean,
3918 |         childLevels?: number,
3919 |         parentLevels?: number,
3920 |         min?: boolean,
3921 |         pages?: Array<{            
3922 |             isProfile?: boolean,
3923 |             chartInstance?: OrgChart,
3924 |             nodeId?: number | string,
3925 |             expandChildren?: boolean,
3926 |             childLevels?: number,
3927 |             parentLevels?: number,
3928 |             min?: boolean,
3929 |             header?: string,
3930 |             footer?: string,
3931 |             content?:  string
3932 |         }>,
3933 |         format?: "A1" | "A2" | "A3" | "A4" | "A5" | "A4" | "Letter" | "Legal" | "auto",
3934 |         header?: string,
3935 |         footer?: string
3936 |     }
3937 | 
3938 |     interface exportPNGOptions {
3939 |         openInNewTab?: boolean,
3940 |         fileName?: string,
3941 |         //landscape?: boolean,  
3942 |         padding?: number,
3943 |         margin?: Array<number>,
3944 |         expandChildren?: boolean,
3945 |         childLevels?: number,
3946 |         parentLevels?: number,
3947 |         min?: boolean,
3948 |         pages?: Array<{
3949 |             chartInstance?: OrgChart,
3950 |             nodeId?: number | string,
3951 |             expandChildren?: boolean,
3952 |             childLevels?: number,
3953 |             parentLevels?: number,
3954 |             min?: boolean,
3955 |             header?: string,
3956 |             footer?: string,
3957 |             content?:  string
3958 |         }>,
3959 | 
3960 |         header?: string,
3961 |         footer?: string
3962 |     }
3963 | 
3964 |     interface exportSVGOptions extends  exportPNGOptions {}
3965 | 
3966 |     interface exportVisioOptions {
3967 |         fileName?: string,
3968 |         padding?: number,
3969 |         margin?: Array<number>,
3970 |         expandChildren?: boolean,
3971 |         childLevels?: number,
3972 |         parentLevels?: number,
3973 |         min?: boolean,
3974 |         header?: string,
3975 |         footer?: string
3976 |     }  
3977 | 
3978 | 
3979 | 
3980 |     /**
3981 |      * Exports to CSV, XML or JSON options
3982 |      * ```typescript     
3983 |      *  document.getElementById('export').addEventListener('click', function () {
3984 |      *      chart.exportToCSV('My.csv');
3985 |      *  });
3986 |      * ```
3987 |      * {@link https://balkan.app/OrgChartJS/Docs/ExportingOther#options | See doc...}            
3988 |      */
3989 |     interface exportCSVXMLJSONOptions  {
3990 |         filename?: string,
3991 |         expandChildren?: boolean,
3992 |         min?: boolean,
3993 |         nodeId? : number | string
3994 |     }
3995 |     
3996 |     /**
3997 |      * ```typescript
3998 |      * OrgChart.clinkTemplates.myTemplate = Object.assign({}, OrgChart.clinkTemplates.orange);
3999 |      * OrgChart.clinkTemplates.myTemplate.label = 
4000 |      *  '<text transform="translate(300, 750) rotate(-90)" fill="#F57C00" text-anchor="middle" x="{x}" y="{y}">{val}</text>';
4001 |      * ```
4002 |      */
4003 |     interface linkTemplate {
4004 |         defs?: string,
4005 |         link?: string,
4006 |         label?: string,
4007 |         labelPosition?: string
4008 |     }
4009 | 
4010 |         /**
4011 |          * Menu options
4012 |          * ```typescript     
4013 |          * var chart = new OrgChart('#tree', {
4014 |          *      nodeMenu:{
4015 |          *          call: {
4016 |          *              icon: webcallMeIcon,
4017 |          *              text: "Call now",
4018 |          *              onClick: callHandler
4019 |          *          }
4020 |          *      }
4021 |          * });
4022 |          * ```
4023 |          * {@link https://balkan.app/OrgChartJS/Docs/Menus#yourMenu | See doc...}
4024 |          */
4025 |     interface menu  {
4026 |         [key: string]: {
4027 |             text: string,
4028 |             icon?: string,
4029 |             onClick?: Function
4030 |         }
4031 |     }
4032 | 
4033 |         /**
4034 |          * Menu options
4035 |          * ```typescript     
4036 |          * var chart = new OrgChart('#tree', {
4037 |          *      controls:{
4038 |          *          call: {
4039 |          *              icon: webcallMeIcon,
4040 |          *              title: "Call now",
4041 |          *              onClick: callHandler
4042 |          *          }
4043 |          *      }
4044 |          * });
4045 |          * ```
4046 |          * {@link https://balkan.app/OrgChartJS/Docs/Controls | See doc...}
4047 |          */
4048 |     interface controls  {
4049 |         [key: string]: {
4050 |             title: string,
4051 |             icon?: string,
4052 |             onClick?: Function
4053 |         }
4054 |     }    
4055 |         /**
4056 |          * 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.
4057 |          * ```typescript     
4058 |          * var chart = new OrgChart('#tree', {
4059 |          *       nodeCircleMenu: {
4060 |          *           editNode: {
4061 |          *               icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
4062 |          *               text: "Edit node",
4063 |          *               color: "white"
4064 |          *           }, 
4065 |          *           addClink: {
4066 |          *               icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
4067 |          *               text: "Add C link",
4068 |          *               color: '#fff',
4069 |          *               draggable: true
4070 |          *           }
4071 |          *       }
4072 |          * });
4073 |          * ```
4074 |          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
4075 |          */
4076 |     interface circleMenu  {
4077 |         [key: string]: {
4078 |             text: string,
4079 |             icon?: string,
4080 |             color?: string,
4081 |             draggable?: boolean
4082 |         }
4083 |     }
4084 | 
4085 |         /**
4086 |          * Edit form element
4087 |          * ```typescript       
4088 |          * let chart = new OrgChart('#tree', {
4089 |          *      editForm: {
4090 |          *          elements: [
4091 |          *              { type: 'textbox', label: 'Full Name', binding: 'Name' },
4092 |          *              { type: 'textbox', label: 'Phone number', binding: 'phone' }        
4093 |          *          ]
4094 |          *      }
4095 |          * });
4096 |          * ```    
4097 |          * {@link https://balkan.app/OrgChartJS/Docs/Edit | See doc...}   
4098 |          */    
4099 |     interface editFormElement {
4100 |         type?: string,
4101 |         label?: string,
4102 |         binding?: string,
4103 |         options?: Array<any>,
4104 |         btn?: string,
4105 |         vlidators?: { required?: string, email?: string }
4106 |     }
4107 | 
4108 |     /**
4109 |      * Defines a Slink or Clink.
4110 |      * ```typescript     
4111 |      * let chart = new OrgChart('#tree', {
4112 |      *   clinks: [
4113 |      *       { from: 4, to: 0, label: 'text' }, 
4114 |      *       { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
4115 |      *       { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
4116 |      *   ]
4117 |      * });
4118 |      * ```
4119 |      */
4120 |     interface link {
4121 |         from?: string | number,
4122 |         to?: string | number,
4123 |         template?: string,
4124 |         label?: string
4125 |     }
4126 | 
4127 |     /**
4128 |      * @ignore
4129 |      */
4130 |     interface backdrop {
4131 |         id?: string | number,
4132 |         levels?: number,
4133 |         color?: string,
4134 |         opacity?: number,
4135 |         except?: Array<string | number>
4136 |     }
4137 | 
4138 |     /**
4139 |      * Node object that shows a secondary connection
4140 |      * ```typescript
4141 |      * let chart = new OrgChart('#tree', {
4142 |      *  dottedLines: [
4143 |      *      { from: 5, to: 1 }
4144 |      *  ]
4145 |      * });
4146 |      * ```
4147 |      * {@link https://balkan.app/OrgChartJS/Docs/DottedLine | See doc...}
4148 |      */
4149 |     interface dottedLine {
4150 |         from?: string | number,
4151 |         to?: string | number,
4152 |         tags?: Array<string>
4153 |     }
4154 | 
4155 |     /**
4156 |      * The orderBy contains the field name and the *desc* value   
4157 |      * ```typescript       
4158 |      * let chart = new OrgChart('#tree', {
4159 |      *   orderBy: [
4160 |      *      { field: 'name', desc: false },
4161 |      *      { field: 'surname', desc: true },
4162 |      *  ]
4163 |      * });
4164 |      * ```      
4165 |      */
4166 |     interface orderBy {
4167 |         field?: string,
4168 |         desc?: boolean
4169 |     }
4170 | 
4171 |     /**
4172 |      * Contains the move position
4173 |      * ```typescript
4174 |      * document.getElementById('btn_left').addEventListener('mousedown', function(){
4175 |      *  chart.moveStart({
4176 |      *      left: true
4177 |      *  });
4178 |      * });
4179 |      * ```
4180 |      */
4181 |     interface move {
4182 |         left?: boolean,
4183 |         right?: boolean,
4184 |         up?: boolean,
4185 |         down?: boolean,
4186 |     }
4187 | 
4188 |     /**
4189 |      * Set the chart orientation
4190 |      */
4191 |     enum orientation {
4192 | 
4193 |         /**
4194 |          * top orientation (default)
4195 |          * OrgChart.orientation.top = 0;
4196 |          * ```typescript
4197 |          * let chart = new OrgChart('#tree', {
4198 |          *  orientation: OrgChart.orientation.left,
4199 |          *  tags: {
4200 |          *      "tag1": {
4201 |          *          subTreeConfig: {
4202 |          *              orientation: OrgChart.orientation.top
4203 |          *          }
4204 |          *      }
4205 |          *  }
4206 |          * });
4207 |          * ```
4208 |          */
4209 |         top,
4210 | 
4211 |         /**
4212 |          * Bottom orientation
4213 |          * OrgChart.orientation.bottom = 1;
4214 |          * ```typescript
4215 |          * let chart = new OrgChart('#tree', {
4216 |          *  orientation: OrgChart.orientation.bottom,
4217 |          * });
4218 |          * ```
4219 |          */
4220 |         bottom,
4221 | 
4222 |         /**
4223 |          * Right orientation
4224 |          * OrgChart.orientation.right = 2;
4225 |          * ```typescript
4226 |          * let chart = new OrgChart('#tree', {
4227 |          *  orientation: OrgChart.orientation.right,
4228 |          * });
4229 |          * ```
4230 |          */
4231 |         right,
4232 | 
4233 |         /**
4234 |          * Left orientation
4235 |          * OrgChart.orientation.left = 3;
4236 |          * ```typescript
4237 |          * let chart = new OrgChart('#tree', {
4238 |          *  orientation: OrgChart.orientation.left,
4239 |          * });
4240 |          * ```
4241 |          */
4242 |         left,
4243 | 
4244 |         /**
4245 |          * Top lrft orientation
4246 |          * OrgChart.orientation.top_left = 4;
4247 |          * ```typescript
4248 |          * let chart = new OrgChart('#tree', {
4249 |          *  orientation: OrgChart.orientation.top_left,
4250 |          * });
4251 |          * ```
4252 |          */
4253 |         top_left,
4254 | 
4255 |         /**
4256 |          * Bottom lrft orientation
4257 |          * OrgChart.orientation.bottom_left = 5;
4258 |          * ```typescript
4259 |          * let chart = new OrgChart('#tree', {
4260 |          *  orientation: OrgChart.orientation.bottom_left,
4261 |          * });
4262 |          * ```
4263 |          */
4264 |         bottom_left,
4265 | 
4266 |         /**
4267 |          * Right top orientation
4268 |          * OrgChart.orientation.right_top = 6;
4269 |          * ```typescript
4270 |          * let chart = new OrgChart('#tree', {
4271 |          *  orientation: OrgChart.orientation.right_top,
4272 |          * });
4273 |          * ```
4274 |          */
4275 |         right_top,
4276 | 
4277 |         /**
4278 |          * Left top orientation
4279 |          * OrgChart.orientation.left_top = 7;
4280 |          * ```typescript
4281 |          * let chart = new OrgChart('#tree', {
4282 |          *  orientation: OrgChart.orientation.left_top,
4283 |          * });
4284 |          * ```
4285 |          */
4286 |         left_top
4287 |     }
4288 | 
4289 |     /**
4290 |      * Specifies the layout of the chart
4291 |      */
4292 |     enum layout {
4293 | 
4294 |         /**
4295 |          * The default layout
4296 |          * OrgChart.layout.normal = OrgChart.normal = 0;
4297 |          * ```typescript
4298 |          * let chart = new OrgChart('#tree', {
4299 |          *  layout: OrgChart.mixed
4300 |          * });
4301 |          * chart.on('node-layout', function(sender, args){
4302 |          *  if (args.pnode.id == 100){
4303 |          *      args.layout = OrgChart.layout.normal;
4304 |          *  }
4305 |          * });
4306 |          * chart.load(nodes)
4307 |          * ```
4308 |          */
4309 |         normal,
4310 | 
4311 |         /**
4312 |          * mixed layout
4313 |          * OrgChart.layout.mixed = OrgChart.mixed = 1;
4314 |          * ```typescript
4315 |          * let chart = new OrgChart('#tree', {
4316 |          *  layout: OrgChart.layout.mixed
4317 |          * });
4318 |          * ```
4319 |          */
4320 |         mixed,
4321 | 
4322 |         /**
4323 |          * tree layout
4324 |          * OrgChart.layout.tree = OrgChart.tree = 2;
4325 |          * ```typescript
4326 |          * let chart = new OrgChart('#tree', {
4327 |          *  layout: OrgChart.layout.tree
4328 |          * });
4329 |          * ```
4330 |          */
4331 |         tree,
4332 | 
4333 |         /**
4334 |          * treeLeftOffset layout
4335 |          * OrgChart.layout.treeLeftOffset = OrgChart.treeLeftOffset = 3;
4336 |          * ```typescript
4337 |          * let chart = new OrgChart('#tree', {
4338 |          *  layout: OrgChart.layout.treeLeftOffset
4339 |          * });
4340 |          * ```
4341 |          */
4342 |         treeLeftOffset,
4343 | 
4344 |         /**
4345 |          * treeRightOffset layout
4346 |          * OrgChart.layout.treeRightOffset = OrgChart.treeRightOffset = 4;
4347 |          * ```typescript
4348 |          * let chart = new OrgChart('#tree', {
4349 |          *  layout: OrgChart.layout.treeRightOffset
4350 |          * });
4351 |          * ```
4352 |          */
4353 |         treeRightOffset,
4354 | 
4355 |         /**
4356 |          * treeLeft layout
4357 |          * OrgChart.layout.treeLeft = 5;
4358 |          * ```typescript
4359 |          * let chart = new OrgChart('#tree', {
4360 |          *  layout: OrgChart.layout.treeLeft
4361 |          * });
4362 |          * ```
4363 |          */
4364 |         treeLeft,
4365 | 
4366 |         /**
4367 |          * treeRight layout
4368 |          * OrgChart.layout.treeRight = 6;
4369 |          * ```typescript
4370 |          * let chart = new OrgChart('#tree', {
4371 |          *  layout: OrgChart.layout.treeRight
4372 |          * });
4373 |          * ```
4374 |          */
4375 |         treeRight,
4376 | 
4377 |         /**
4378 |          * Create a grid layoput authomatically calculating authomatically the columns
4379 |          * OrgChart.layout.grid = -1;
4380 |          * ```typescript
4381 |          * let chart = new OrgChart('#tree', {
4382 |          *  layout: OrgChart.layout.grid
4383 |          * });
4384 |          * ```
4385 |          * [See grid doc page for more details][https://balkan.app/OrgChartJS/Docs/Layout#grid]
4386 |          */
4387 |         grid,
4388 |         /**
4389 |          * Tree grid layout with fixed height of the group node         
4390 |         * ```typescript
4391 |          * let chart = new OrgChart('#tree', {
4392 |          *  tags: {
4393 |          *      treeGridGroupTag: {
4394 |          *          template: 'treeGrid',
4395 |          *          subTreeConfig: {
4396 |          *              template: 'treeGrid',
4397 |          *              layout: OrgChart.layout.treeGrid
4398 |          *          }
4399 |          *      }
4400 |          *  }
4401 |          * });
4402 |          * ```
4403 |          * [See grid doc page for more details][https://balkan.app/OrgChartJS/Docs/Layout#treeGrid]
4404 |          */       
4405 |         treeGrid
4406 |     }
4407 | 
4408 |     /**
4409 |      * Specifies the alignment of the nodes inside OrgChart JS
4410 |      */
4411 |     enum align {
4412 | 
4413 |         /**
4414 |          * Centered
4415 |          * ```typescript
4416 |          * var chart = new OrgChart('#tree', {
4417 |          *  align: OrgChart.align.center
4418 |          * });
4419 |          * ```
4420 |          */
4421 |         center,
4422 | 
4423 |         /**
4424 |          * According to the orientation option
4425 |          * ```typescript
4426 |          * let chart = new OrgChart('#tree', {
4427 |          *  align: OrgChart.align.orientation
4428 |          * });
4429 |          * ```
4430 |          */
4431 |         orientation
4432 |     }
4433 | 
4434 |     /**
4435 |      * Animations for the transition of the nodes
4436 |      * ```typescript
4437 |      * let chart = new OrgChart('#tree', {
4438 |      *  anim: {func: OrgChart.anim.outBack, duration: 500}
4439 |      * });
4440 |      * ```
4441 |      */
4442 |     enum anim {
4443 |         inPow,
4444 |         outPow,
4445 |         inOutPow,
4446 |         inSin,
4447 |         outSin,
4448 |         inOutSin,
4449 |         inExp,
4450 |         outExp,
4451 |         inOutExp,
4452 |         inCirc,
4453 |         outCirc,
4454 |         inOutCirc,
4455 |         rebound,
4456 |         inBack,
4457 |         outBack,
4458 |         inOutBack,
4459 |         impulse,
4460 |         expPulse
4461 |     }
4462 | 
4463 |     /**
4464 |      * Specifies a scale that match the boundaries
4465 |      */
4466 |     enum match {
4467 | 
4468 |         /**
4469 |          * Match height
4470 |          * ```typescript
4471 |          * let chart = new OrgChart('#tree', {
4472 |          *  scaleInitial: OrgChart.match.height
4473 |          * });
4474 |          * ```
4475 |          */
4476 |         height,
4477 | 
4478 |         /**
4479 |          * Match width
4480 |          * ```typescript
4481 |          * let chart = new OrgChart('#tree', {
4482 |          *  scaleInitial: OrgChart.match.width
4483 |          * });
4484 |          * ```
4485 |          */
4486 |         width,
4487 | 
4488 |         /**
4489 |          * Match boundary
4490 |          * ```typescript
4491 |          * let chart = new OrgChart('#tree', {
4492 |          *  scaleInitial: OrgChart.match.boundary
4493 |          * });
4494 |          * ```
4495 |          */
4496 |         boundary,
4497 | 
4498 |         /**
4499 |          * Match boundary if outside of the visible area
4500 |          * ```typescript
4501 |          * let chart = new OrgChart('#tree', {
4502 |          *  scaleInitial: OrgChart.match.boundaryIfOutside
4503 |          * });
4504 |          * ```
4505 |          */
4506 |         boundaryIfOutside
4507 |     }
4508 | 
4509 | 
4510 |         /**
4511 |          * Add movable functionality
4512 |          */
4513 |     enum movable {
4514 | 
4515 |         /**
4516 |          * Moves the node
4517 |          * OrgChart.movable.node = 'node';
4518 |          * ```typescript
4519 |          * let chart = new OrgChart('#tree', {
4520 |          *  movable: OrgChart.movable.node
4521 |          * });
4522 |          * ```
4523 |          */
4524 |         node,
4525 | 
4526 |         /**
4527 |          * Moves the tree
4528 |          * OrgChart.movable.tree = 'tree';
4529 |          * ```typescript
4530 |          * let chart = new OrgChart('#tree', {
4531 |          *  movable: OrgChart.movable.tree
4532 |          * });
4533 |          * ```
4534 |          */
4535 |         tree,
4536 | 
4537 |         /**
4538 |          * Detaches the tree
4539 |          * OrgChart.movable.detachTree = 'detachTree';
4540 |          * ```typescript
4541 |          * let chart = new OrgChart('#tree', {
4542 |          *  movable: OrgChart.movable.detachTree
4543 |          * });
4544 |          * ```
4545 |          */
4546 |         detachTree
4547 |     }
4548 | 
4549 |     /**
4550 |      * [Example with all actions](https://code.balkan.app/org-chart-js/which-action-triggers-redraw#JS)
4551 |      */
4552 |     enum action {
4553 | 
4554 |         /**
4555 |          * OrgChart.action.update = 7;
4556 |          * ```typescript
4557 |          * let chart = new OrgChart('#tree', {
4558 |          * });
4559 |          * chart.onRedraw(() => {
4560 |          *  if (chart.manager.action == OrgChart.action.update) {
4561 |          *      alert("chart updated");
4562 |          *  }
4563 |          * });
4564 |          * chart.load(nodes)
4565 |          * ```
4566 |          */
4567 |         update,
4568 | 
4569 |         /**
4570 |          * OrgChart.action.expand = 0;
4571 |          * ```typescript
4572 |          * let chart = new OrgChart('#tree', {
4573 |          * });
4574 |          * chart.onRedraw(() => {
4575 |          *  if (chart.manager.action == OrgChart.action.expand) {
4576 |          *      chart.fit();
4577 |          *  }
4578 |          * });
4579 |          * chart.load(nodes)
4580 |          * ```
4581 |          */
4582 |         expand,
4583 | 
4584 |         /**
4585 |          * OrgChart.action.collapse = 1;
4586 |          * ```typescript
4587 |          * let chart = new OrgChart('#tree', {
4588 |          * });
4589 |          * chart.onRedraw(() => {
4590 |          *  if (chart.manager.action == OrgChart.action.collapse) {
4591 |          *      chart.fit();
4592 |          *  }
4593 |          * });
4594 |          * chart.load(nodes)
4595 |          * ```
4596 |          */
4597 |         collapse,
4598 | 
4599 |         /**
4600 |          * OrgChart.action.exporting = 14;
4601 |          * ```typescript
4602 |          * let chart = new OrgChart('#tree', {
4603 |          * });
4604 |          * chart.on("field", function (sender, args) {
4605 |          *  if (sender.manager.action == OrgChart.action.exporting) {
4606 |          *      args.value = "hidden";
4607 |          *  }
4608 |          * });
4609 |          * chart.load(nodes)
4610 |          * ```
4611 |          */
4612 |         exporting,
4613 | 
4614 |         /**
4615 |          * Reload/Initialize the chart
4616 |          * OrgChart.action.init = 6;
4617 |          * ```typescript
4618 |          * document.getElementById("btn").addEventListener("click", function () {
4619 |          *  chart.add({ id: 4, pid: 2, name: "Elliot Patel", title: "Sales" });
4620 |          *  chart.draw(OrgChart.action.init);
4621 |          * });
4622 |          * ```
4623 |          */
4624 |         init,
4625 | 
4626 |         /**
4627 |          * OrgChart.action.centerNode = 9;
4628 |          * ```typescript
4629 |          * let chart = new OrgChart('#tree', {
4630 |          * });
4631 |          * chart.onInit(() => {
4632 |          *  chart.center(2);
4633 |          *  console.log(chart.manager.action);
4634 |          * });
4635 |          * chart.load(nodes)
4636 |          * ```
4637 |          */
4638 |         centerNode,
4639 | 
4640 |         /**
4641 |          * @ignore
4642 |          */
4643 |         insert,
4644 | 
4645 |         /**
4646 |          * @ignore
4647 |          */
4648 |         maximize,
4649 | 
4650 |         /**
4651 |          * @ignore
4652 |          */
4653 |         minimize,
4654 | 
4655 |         /**
4656 |          * Opens edit form on node click
4657 |          * OrgChart.action.edit = 1;
4658 |          * ```typescript
4659 |          * let chart = new OrgChart('#tree', {
4660 |          *  nodeMouseClick: OrgChart.action.edit
4661 |          * });
4662 |          * ```
4663 |          */
4664 |         edit,
4665 | 
4666 |         /**
4667 |          * Opens the details form
4668 |          * OrgChart.action.details = 13;
4669 |          * ```typescript
4670 |          * let chart = new OrgChart('#tree', {
4671 |          *  nodeMouseClick: OrgChart.action.edit // default value
4672 |          * });
4673 |          * chart.onNodeClick(function (args) {
4674 |          *  if (args.node.templateName == "group") 
4675 |          *      chart.config.nodeMouseClick = OrgChart.action.pan;
4676 |          *  esle
4677 |          *      chart.config.nodeMouseClick = OrgChart.action.details;
4678 |          * });
4679 |          * ```
4680 |          */
4681 |         details,
4682 | 
4683 |         /**
4684 |          * Expand/Collapse on node click
4685 |          * OrgChart.action.expandCollapse = 501;
4686 |          * ```typescript
4687 |          * let chart = new OrgChart('#tree', {
4688 |          *  odeMouseClick: OrgChart.action.expandCollapse,
4689 |          * });
4690 |          * ```
4691 |          */
4692 |         expandCollapse,
4693 | 
4694 |         /**
4695 |          * Expand/Collapse on node click
4696 |          * OrgChart.action.expandCollapse = 501;
4697 |          * ```typescript
4698 |          * let chart = new OrgChart('#tree', {
4699 |          *  odeMouseClick: OrgChart.action.expandCollapse,
4700 |          * });
4701 |          * ```
4702 |          */
4703 |         pan,
4704 | 
4705 |         /**
4706 |          * Set mouse scroll to zoom
4707 |          * OrgChart.action.zoom = 2;
4708 |          * ```typescript
4709 |          * let chart = new OrgChart('#tree', {
4710 |          *  mouseScrool: OrgChart.action.zoom,
4711 |          * });
4712 |          * ```
4713 |          */
4714 |         zoom,
4715 | 
4716 |         /**
4717 |          * Set Ctrl + mouse scroll to zoom
4718 |          * OrgChart.action.ctrlZoom = 22;
4719 |          * ```typescript
4720 |          * let chart = new OrgChart('#tree', {
4721 |          *  mouseScrool: OrgChart.action.ctrlZoom,
4722 |          * });
4723 |          * ```
4724 |          */
4725 |         ctrlZoom,
4726 | 
4727 |         /**
4728 |          * Set mouse scroll to horizontal scroll
4729 |          * OrgChart.action.xScroll = 3;
4730 |          * ```typescript
4731 |          * let chart = new OrgChart('#tree', {
4732 |          *  mouseScrool: OrgChart.action.xScroll,
4733 |          * });
4734 |          * ```
4735 |          */
4736 |         xScroll,
4737 | 
4738 |         /**
4739 |          * Set mouse scroll to vertical scroll
4740 |          * OrgChart.action.yScroll = 4;
4741 |          * ```typescript
4742 |          * let chart = new OrgChart('#tree', {
4743 |          *  mouseScrool: OrgChart.action.yScroll,
4744 |          * });
4745 |          * ```
4746 |          */
4747 |         yScroll,    
4748 |         
4749 |         /**
4750 |          * Navigate with the mouse:
4751 |          * Scroll up/down
4752 |          * Press Shift key to scroll left/right
4753 |          * Press Ctrl key to zoom with mouse scroll button
4754 |          * On Apple Magic Mouse or Logitech G502 you can scroll left/right/up/down without pressing the Shift key
4755 |          * OrgChart.action.scroll = 41;
4756 |          * ```typescript
4757 |          * let chart = new OrgChart('#tree', {
4758 |          *  mouseScrool: OrgChart.action.scroll,
4759 |          * });
4760 |          * ```
4761 |          */
4762 |         scroll,
4763 | 
4764 |         /**
4765 |          * Do nothing on mouse scroll
4766 |          * OrgChart.action.none = 5;
4767 |          * ```typescript
4768 |          * let chart = new OrgChart('#tree', {
4769 |          *  odeMouseClick: OrgChart.action.nonde,
4770 |          * });
4771 |          * ```
4772 |          */
4773 |         none
4774 |     }
4775 | 
4776 | 
4777 |     
4778 | 
4779 |     
4780 | 
4781 |     interface options  {
4782 |         /**
4783 |          * Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - *true*.
4784 |          * ```typescript     
4785 |          * var chart = new OrgChart('#tree', {
4786 |          *      interactive: false
4787 |          * });
4788 |          * ```
4789 |          */
4790 |         interactive?: boolean,
4791 | 
4792 |         /**
4793 |          * Color mode. Default value - *light*.
4794 |          * ```typescript     
4795 |          * var chart = new OrgChart('#tree', {
4796 |          *      mode: "dark"
4797 |          * });
4798 |          * ```
4799 |          */
4800 |         mode?: "dark" | "light",
4801 |         /**
4802 |          * 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.
4803 |          * The default value is *auto*
4804 |          * ```typescript     
4805 |          * var chart = new OrgChart('#tree', {
4806 |          *      lazyLoading: false
4807 |          * });
4808 |          * ```
4809 |          */
4810 |         lazyLoading?: boolean | string,
4811 | 
4812 |  
4813 | 
4814 |         /**
4815 |          * Enables advanced search. Default value is true.
4816 |          * ```typescript     
4817 |          * var chart = new OrgChart('#tree', {
4818 |          *      enableSearch: false
4819 |          * });
4820 |          * ```
4821 |          */
4822 |         enableSearch?: boolean,
4823 |         
4824 | 
4825 |         /**
4826 |          * Enables artificial intelligence. Default value is false.
4827 |          * ```typescript     
4828 |          * var chart = new OrgChart('#tree', {
4829 |          *      enableAI: false
4830 |          * });
4831 |          * ```
4832 |          */
4833 |         enableAI?: boolean,
4834 | 
4835 |         /**
4836 |          * You can disable chart pan. Default value - *true*.
4837 |          * ```typescript     
4838 |          * var chart = new OrgChart('#tree', {
4839 |          *      enablePan: false
4840 |          * });
4841 |          * ```
4842 |          */
4843 |         enablePan?: boolean,
4844 | 
4845 |  
4846 |         /**
4847 |          * Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the chart. Default value - *false*.
4848 |          * ```typescript     
4849 |          * var chart = new OrgChart('#tree', {
4850 |          *      keyNavigation: true
4851 |          * });
4852 |          * var chart = new OrgChart('#tree', {
4853 |          *      keyNavigation: { focusId: 5 }
4854 |          * });
4855 |          * ```
4856 |          * {@link https://balkan.app/OrgChartJS/Docs/KeyNavigation | See doc...}
4857 |          */
4858 |          keyNavigation?: boolean | OrgChart.keyNavigation,
4859 |         /**
4860 |          * Shows mini map over the expanded tree. Default value - *false*.
4861 |          * ```typescript     
4862 |          * var chart = new OrgChart('#tree', {
4863 |          *      miniMap: true
4864 |          * });
4865 |          * ```
4866 |          */
4867 |         miniMap?: boolean,
4868 | 
4869 |         /**
4870 |          * Enables edit, add, remove and other node operations. Also you can define your own node operation.
4871 |          * ```typescript     
4872 |          * var chart = new OrgChart('#tree', {
4873 |          *      controls:{
4874 |          *          fit: {title:"Fit to Screen"},
4875 |          *       	zoom_in: {title:"Zoom In"},
4876 |          *       	zoom_out: {textitle:"Zoom Out"},
4877 |          *          myMenuItem: {title:"My control", onClick: function {}}
4878 |          *      }
4879 |          * });
4880 |          * ```
4881 |          * {@link https://balkan.app/OrgChartJS/Docs/Controls | See doc...}
4882 |          */
4883 |         controls?: OrgChart.controls;
4884 | 
4885 | 
4886 |         /**
4887 |          * Enables edit, add, remove and other node operations. Also you can define your own node operation.
4888 |          * ```typescript     
4889 |          * var chart = new OrgChart('#tree', {
4890 |          *      nodeMenu:{
4891 |          *          details: {text:"Details"},
4892 |          *       	edit: {text:"Edit"},
4893 |          *          add: {text:"Add"},
4894 |          *    	    remove: {text:"Remove"},
4895 |          *          myMenuItem: {text:"My node menu Item", onClick: function {}}
4896 |          *      }
4897 |          * });
4898 |          * ```
4899 |          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
4900 |          */
4901 |         nodeMenu?: OrgChart.menu;
4902 |         /**
4903 |          * 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.
4904 |          * ```typescript     
4905 |          * var chart = new OrgChart('#tree', {
4906 |          *       nodeCircleMenu: {
4907 |          *           editNode: {
4908 |          *               icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
4909 |          *               text: "Edit node",
4910 |          *               color: "white"
4911 |          *           }, 
4912 |          *           addClink: {
4913 |          *               icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
4914 |          *               text: "Add C link",
4915 |          *               color: '#fff',
4916 |          *               draggable: true
4917 |          *           }
4918 |          *       }
4919 |          * });
4920 |          * ```
4921 |          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
4922 |          */
4923 |         nodeCircleMenu?: OrgChart.circleMenu,
4924 |         /**
4925 |          * Customizable context menu. Also you can define your own node operation.
4926 |          * ```typescript     
4927 |          * var chart = new OrgChart('#tree', {
4928 |          *      nodeContextMenu:{
4929 |          *          details: {text:"Details"},
4930 |          *       	edit: {text:"Edit"},
4931 |          *          add: {text:"Add"},
4932 |          *          remove: {text:"Remove"}
4933 |          *          myMenuItem: {text:"My node menu Item", onClick: function {}}
4934 |          *      }
4935 |          * });
4936 |          * ```
4937 |          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
4938 |          */
4939 |         nodeContextMenu?: OrgChart.menu,
4940 |         /**
4941 |          * Enables export to csv, export to svg and other OrgChart operations. Also you can define your own OrgChart operation.
4942 |          * ```typescript     
4943 |          * var chart = new OrgChart('#tree', {
4944 |          *      menu:{
4945 |          *          svg: { text: "Export SVG" },
4946 |          *          csv: { text: "Export CSV" }
4947 |          *          myMenuItem: {text:"My node menu Item", onClick: function {}}
4948 |          *      }
4949 |          * });
4950 |          * ```
4951 |          * {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
4952 |          */
4953 |         menu?: OrgChart.menu,
4954 | 
4955 |         /**
4956 |          * Array of tools called by the AI     
4957 |          * ```typescript     
4958 |          * var chart = new OrgChart('#tree', {
4959 |          *      aiChatTools: [{
4960 |          *          functionName: 'fit',  
4961 |          *          functionDescription: 'Fit chart to the screen.',    
4962 |          *      }]
4963 |          * });
4964 |          * ```        
4965 |          * {@link https://balkan.app/OrgChartJS/Docs/AI | See doc...}   
4966 |          */
4967 |         aiChatTools?: Array<OrgChart.aiChatTool>,
4968 |         /**
4969 |          * Shows a toolbar
4970 |          * 
4971 |          * The toolbar options allow you to change the layout, zoom in/out, expand all nodes, etc.
4972 |          * ```typescript     
4973 |          * var chart = new OrgChart('#tree', {
4974 |          *      toolbar: {
4975 |          *          layout: true,
4976 |          *          zoom: true,
4977 |          *          fit: true,
4978 |          *          expandAll: false,
4979 |          *          fullScreen: true
4980 |          *      },
4981 |          * });
4982 |          * ```
4983 |          */
4984 |         toolbar?: OrgChart.toolbar,
4985 |         /**
4986 |          * Stops the chart locking to the top of the screen once you move it.
4987 |          * ```typescript     
4988 |          * var chart = new OrgChart('#tree', {
4989 |          *      sticky: false
4990 |          * });
4991 |          * ```
4992 |          */
4993 |         sticky?: boolean,
4994 |         /**
4995 |          * nodeMouseClick can accept the following values:
4996 |          * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
4997 |          * - 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.
4998 |          * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
4999 |          * - OrgChart.action.none - do nothing on node click event
5000 |          * - OrgChart.action.pan - allows you to move the chart in any direction
5001 |          * 
5002 |          * Default value - *OrgChart.action.details*
5003 |          * ```typescript     
5004 |          * var chart = new OrgChart('#tree', {
5005 |          *      nodeMouseClick: OrgChart.action.edit
5006 |          * });
5007 |          * ```
5008 |          */
5009 |         nodeMouseClick?: OrgChart.action,
5010 |         /**
5011 |          * nodeMouseDbClick can accept the following values:
5012 |          * - OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
5013 |          * - 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
5014 |          * - OrgChart.action.expandCollapse - will expand or collapse the children nodes
5015 |          * - OrgChart.action.none - do nothing on node click event
5016 |          * 
5017 |          * Default value - *OrgChart.action.none*
5018 |          * ```typescript     
5019 |          * var chart = new OrgChart('#tree', {
5020 |          *      nodeMouseDbClick: OrgChart.action.edit
5021 |          * });
5022 |          * ```
5023 |          */
5024 |         nodeMouseDbClick?: OrgChart.action,
5025 |         /**
5026 |          * mouseScrool can accept the following values:
5027 |          * - OrgChart.action.zoom - will zoom in/out on mouse scroll
5028 |          * - OrgChart.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
5029 |          * - OrgChart.action.xScroll - left/right move of the chart on mouse scroll
5030 |          * - OrgChart.action.yScroll - up/down move of the chart on mouse scroll
5031 |          * - OrgChart.action.none - do nothing on mouse scroll
5032 |          * 
5033 |          * Default value - *OrgChart.action.zoom*
5034 |          * ```typescript     
5035 |          * var chart = new OrgChart('#tree', {
5036 |          *      mouseScrool: OrgChart.action.ctrlZoom
5037 |          * });
5038 |          * ```
5039 |          */
5040 |         mouseScrool?: OrgChart.action,
5041 |         /**
5042 |          * Shows horizontal scrollbar. Default value - *false*.
5043 |          * ```typescript     
5044 |          * var chart = new OrgChart('#tree', {
5045 |          *      showXScroll: true
5046 |          * });
5047 |          * ```
5048 |          */
5049 |         showXScroll?: boolean ,
5050 |         /**
5051 |          * movable node, move the node anywhere on the canvas
5052 |          * ```typescript     
5053 |          * let chart = new OrgChart('#tree', {
5054 |          *      movable: OrgChart.movable.node,
5055 |          *      // movable: OrgChart.movable.tree,
5056 |          *      // movable: OrgChart.movable.detachTree,
5057 |          * });
5058 |          * ```
5059 |          */
5060 |         movable?: OrgChart.movable,
5061 |         /**
5062 |          * Shows vertical scrollbar. Default value - *false*.
5063 |          * ```typescript     
5064 |          * var chart = new OrgChart('#tree', {
5065 |          *      showYScroll: true
5066 |          * });
5067 |          * ```
5068 |          */
5069 |         showYScroll?: boolean,
5070 |         /**
5071 |          * Set template if you want to change the appearance of the chart. Org Chart JS comes with number of build-in templates:
5072 |          * - ana
5073 |          * - ula
5074 |          * - olivia
5075 |          * - belinda
5076 |          * - rony
5077 |          * - mery
5078 |          * - polina
5079 |          * - mila
5080 |          * - diva
5081 |          * - base
5082 |          * - isla
5083 |          * - deborah
5084 |          * 
5085 |          * Default value - *ana*.
5086 |          * ```typescript     
5087 |          * var chart = new OrgChart('#tree', {
5088 |          *      template: 'olivia'
5089 |          * });
5090 |          * ```
5091 |          * {@link https://balkan.app/OrgChartJS/Docs/PredefinedTemplates | See doc...}
5092 |          */
5093 |         template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | "treeGrid" | "treeGridGroup" | string,
5094 |         /**
5095 |          * With tags option you can:
5096 |          * - Set a specific template for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/MultipleTemplates | See doc...}
5097 |          * - Set node as assistant {@link https://balkan.app/OrgChartJS/Docs/Assistant | See doc...}
5098 |          * - Change node menu, circle menu and context menu items for tagged node/s {@link https://balkan.app/OrgChartJS/Docs/Menus | See doc...}
5099 |          * - Set the node level {@link https://balkan.app/OrgChartJS/Demos/SubLevels | See demo...}
5100 |          * - Set specific options for sub trees like layout templates etc {@link https://balkan.app/OrgChartJS/Docs/SubTrees | See doc...}          
5101 |          *  * - Set specific options for sub trees like layout templates, etc. {@link https://balkan.app/OrgChartJS/Docs/SubTrees | See doc...}        
5102 |          * - Set custom CSS, for example node color, field color, etc. {@link https://balkan.app/OrgChartJS/Docs/CSSCustomization | See CSS doc page...}  
5103 |          * - {@link https://balkan.app/OrgChartJS/Docs/Tags | See Tags doc page...}  
5104 |          * ```typescript     
5105 |          * var chart = new OrgChart('#tree', {
5106 |          *      tags: {
5107 |          *          myTag: {template: 'olivia'}
5108 |          *      },
5109 |          *      nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
5110 |          * });
5111 |          * ```
5112 |          */
5113 |         tags?: {
5114 |             [key: string]: {
5115 |                 template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | "treeGrid" | "treeGridGroup" | string,
5116 |                 subLevels?: number,
5117 |                 nodeMenu?: OrgChart.menu,
5118 |                 nodeCircleMenu?: OrgChart.circleMenu,
5119 |                 nodeContextMenu?: OrgChart.menu,
5120 |                 min?: boolean,
5121 |                 subTreeConfig?: {
5122 |                     orientation?: OrgChart.orientation,
5123 |                     levelSeparation?: number,
5124 |                     mixedHierarchyNodesSeparation?: number,
5125 |                     subtreeSeparation?: number,
5126 |                     siblingSeparation?: number,
5127 |                     layout?: OrgChart.layout | number,
5128 |                     columns?: number,
5129 |                     collapse?: {
5130 |                         level?: number,
5131 |                         allChildren?: boolean
5132 |                     },
5133 |                     template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | "treeGrid" | "treeGridGroup" | string
5134 |                 }
5135 |             };
5136 |         },
5137 |         /**
5138 |          * Minimize/Maximize node. The template has to have min defined. Default value - *false*.
5139 |          * ```typescript     
5140 |          * var chart = new OrgChart('#tree', {
5141 |          *      min: true
5142 |          * });
5143 |          * ```
5144 |          * {@link https://balkan.app/OrgChartJS/Docs/MinMax | See doc...}
5145 |          */
5146 |         min?: boolean,
5147 |         /**
5148 |          * Node binding in Org Chart JS maps node data to node template parameters.
5149 |          * ```typescript     
5150 |          * var chart = new OrgChart('#tree', {
5151 |          *   nodeBinding: {
5152 |          *       field_0: "name"
5153 |          *   },
5154 |          *   nodes: [
5155 |          *       { id: 1, name: "Amber McKenzie" }
5156 |          *   ]
5157 |          * });
5158 |          * ```
5159 |          */
5160 |         nodeBinding?: { [key: string]: string },
5161 |         /**
5162 |          * Link binding in Org Chart JS maps node data to link template parameters.
5163 |          * ```typescript     
5164 |          * var chart = new OrgChart('#tree', {
5165 |          *   linkBinding: {
5166 |          *       link_field_0: "createdAt"
5167 |          *   },
5168 |          *   nodes: [
5169 |          *       { id: "1", name: "Amber McKenzie"  },
5170 |          *       { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
5171 |          *       { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
5172 |          *   ]
5173 |          * });
5174 |          * ```
5175 |          * {@link https://balkan.app/OrgChartJS/Docs/Link | See doc...}
5176 |          */
5177 |         linkBinding?: { [key: string]: string },
5178 |         /**
5179 |          * Search by the fields defined in searchFields.
5180 |          * ```typescript     
5181 |          * var chart = new OrgChart('#tree', {
5182 |          *   searchFields: ["name", "title", etc...]
5183 |          * });
5184 |          * ```
5185 |          * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
5186 |          */
5187 |         searchFields?: Array<string>,
5188 |         /**
5189 |          * Displays a field in the search result.
5190 |          * ```typescript     
5191 |          * var chart = new OrgChart('#tree', {
5192 |          *   searchDisplayField: "name"
5193 |          * });
5194 |          * ```
5195 |          * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
5196 |          */
5197 |         searchDisplayField?: string,
5198 |         /**
5199 |          * Search by weight of the fields.
5200 |          * ```typescript     
5201 |          * var chart = new OrgChart('#tree', {
5202 |          *   searchFieldsWeight: {
5203 |          *       "Name": 100, //percent
5204 |          *       "Title": 20 //percent
5205 |          *   }
5206 |          * });
5207 |          * ```
5208 |          * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
5209 |          */
5210 |         searchFieldsWeight?: { [key: string]: number },
5211 |     	/**
5212 |          * Search in field with abbreviation.
5213 |          * ```typescript     
5214 |          * var chart = new OrgChart('#tree', {
5215 |          *   searchFieldsAbbreviation: {
5216 |          *       "n": "name", 
5217 |          *       "a": "My Address" 
5218 |          *   }
5219 |          * });
5220 |          * ```
5221 |          * {@link https://balkan.app/OrgChartJS/Docs/Search | See doc...}
5222 |          */
5223 |          searchFieldsAbbreviation?: { [key: string]: string },
5224 |         /**
5225 |          * 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.
5226 |          * - id - unique identifier, it clould be integer or string
5227 |          * - pid - is the parent id
5228 |          * - stpid - subtree parent id
5229 |          * - ppid - parent partner id
5230 |          * - tags - array of strings
5231 |          * ```typescript     
5232 |          * var chart = new OrgChart('#tree', {
5233 |          *   nodes: [
5234 |          *       { id: 1 },
5235 |          *       { id: 2, pid: 1, tags: ["Sales"] },
5236 |          *       { id: 3, stpid: 2  }
5237 |          *   ]
5238 |          * });
5239 |          * ```
5240 |          */
5241 |          nodes?: Array<Object>,
5242 |         /**
5243 |          * Adds curved link.
5244 |          * ```typescript     
5245 |          * let chart = new OrgChart('#tree', {
5246 |          *   clinks: [
5247 |          *       { from: 4, to: 0, label: 'text'}, 
5248 |          *       { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
5249 |          *       { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
5250 |          *   ]
5251 |          * });
5252 |          * ```
5253 |          */
5254 |         clinks?: Array<OrgChart.link>,
5255 |         /**
5256 |          * Adds second link.
5257 |          * ```typescript     
5258 |          * let chart = new OrgChart('#tree', {
5259 |          *   slinks: [
5260 |          *       { from: 4, to: 0, label: 'text' }, 
5261 |          *       { from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
5262 |          *       { from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
5263 |          *   ]
5264 |          * });
5265 |          * ```
5266 |          */
5267 |         slinks?: Array<OrgChart.link>,
5268 | 
5269 |         /**
5270 |          * @ignore
5271 |          */
5272 |         backdrops?: Array<OrgChart.backdrop>,
5273 | 
5274 | 
5275 |          /**
5276 |          * Adds dotted line.
5277 |          * ```typescript     
5278 |          * var chart = new OrgChart('#tree', {
5279 |          *   dottedLines: [
5280 |          *       {from: 6, to: 1 }
5281 |          *   ]
5282 |          * });
5283 |          * ```
5284 |          */
5285 |         dottedLines?: Array<OrgChart.dottedLine>,
5286 | 
5287 |          /**
5288 |          * Adds group dotted line.
5289 |          * ```typescript     
5290 |          * var chart = new OrgChart('#tree', {
5291 |          *   groupDottedLines: [
5292 |          *       {from: 6, to: 1 }
5293 |          *   ]
5294 |          * });
5295 |          * ```
5296 |          */
5297 |         groupDottedLines?: Array<OrgChart.dottedLine>,
5298 | 
5299 |         /**
5300 |          * The gap between each level. Default value - *60*
5301 |          * ```typescript     
5302 |          * var chart = new OrgChart('#tree', {
5303 |          *   levelSeparation: 50
5304 |          * });
5305 |          * ```
5306 |          */
5307 |         levelSeparation?: number,
5308 |         /**
5309 |          * The gap between nodes in a subtree. Default value - *20*
5310 |          * ```typescript     
5311 |          * var chart = new OrgChart('#tree', {
5312 |          *   siblingSeparation: 50
5313 |          * });
5314 |          * ```
5315 |          */
5316 |         siblingSeparation?: number,
5317 |         /**
5318 |          * The padding between the node and the backdrop. Default value - *15*
5319 |          * ```typescript     
5320 |          * var chart = new OrgChart('#tree', {
5321 |          *   backdropSeparation: 15
5322 |          * });
5323 |          * ```
5324 |          */        
5325 |         backdropSeparation?: number,
5326 |         /**
5327 |          * The gap between subtrees. Default value - *40*
5328 |          * ```typescript     
5329 |          * var chart = new OrgChart('#tree', {
5330 |          *   subtreeSeparation: 50
5331 |          * });
5332 |          * ```
5333 |          */
5334 |         subtreeSeparation?: number,
5335 |         /**
5336 |          * The gap between nodes in vertical layout. Default value - *20*
5337 |          * ```typescript     
5338 |          * var chart = new OrgChart('#tree', {
5339 |          *   mixedHierarchyNodesSeparation: 5
5340 |          * });
5341 |          * ```
5342 |          */
5343 |         mixedHierarchyNodesSeparation?: number,
5344 |         /**
5345 |          * Set the assistant separation value. Default value - *100*
5346 |          * ```typescript     
5347 |          * var chart = new OrgChart('#tree', {
5348 |          *   assistantSeparation: 150
5349 |          * });
5350 |          * ```
5351 |          */
5352 |         assistantSeparation?: number,
5353 |         /**
5354 |          * Minimum gap between partner and node with partners. Default value - *50*
5355 |          * ```typescript     
5356 |          * var chart = new OrgChart('#tree', {
5357 |          *   minPartnerSeparation: 100
5358 |          * });
5359 |          * ```
5360 |          */
5361 |         minPartnerSeparation?: number,
5362 |         /**
5363 |          * Gap between partner links. Default value - *20*
5364 |          * ```typescript     
5365 |          * var chart = new OrgChart('#tree', {
5366 |          *   partnerChildrenSplitSeparation: 50
5367 |          * });
5368 |          * ```
5369 |          */
5370 |         partnerChildrenSplitSeparation?: number,
5371 |         /**
5372 |          * Gap between partners. Default value - *15*
5373 |          * ```typescript     
5374 |          * var chart = new OrgChart('#tree', {
5375 |          *   partnerNodeSeparation: 30
5376 |          * });
5377 |          * ```
5378 |          */
5379 |         partnerNodeSeparation?: number,
5380 |         /**
5381 |          * The number of colums if the chart has multiple root nodes. Default value - *10*
5382 |          * ```typescript     
5383 |          * var chart = new OrgChart('#tree', {
5384 |          *   columns: 1
5385 |          * });
5386 |          * ```
5387 |          */
5388 |         columns?: number,
5389 |         /**
5390 |          * The padding option sets the padding area on all four sides of the OrgChart. Default value - *30*
5391 |          * ```typescript     
5392 |          * var chart = new OrgChart('#tree', {
5393 |          *   padding: 20
5394 |          * });
5395 |          * ```
5396 |          */
5397 |         padding?: number,
5398 |         /**
5399 |          * Specifies the orientation of the Org Chart JS. could accept one of the following values:
5400 |          * - OrgChart.orientation.top
5401 |          * - OrgChart.orientation.bottom
5402 |          * - OrgChart.orientation.right
5403 |          * - OrgChart.orientation.left
5404 |          * - OrgChart.orientation.top_left
5405 |          * - OrgChart.orientation.bottom_left
5406 |          * - OrgChart.orientation.right_top
5407 |          * - OrgChart.orientation.left_top
5408 |          * 
5409 |          * Default value - *OrgChart.orientation.top*
5410 |          * ```typescript     
5411 |          * var chart = new OrgChart('#tree', {
5412 |          *   orientation: OrgChart.orientation.bottom
5413 |          * });
5414 |          * ```
5415 |          */
5416 |         orientation?: OrgChart.orientation,
5417 |         /**
5418 |          * Sets the layout algoritm:
5419 |          * - OrgChart.layout.normal
5420 |          * - OrgChart.layout.mixed
5421 |          * - OrgChart.layout.tree
5422 |          * - OrgChart.layout.treeLeftOffset
5423 |          * - OrgChart.layout.treeRightOffset
5424 |          * - OrgChart.layout.treeLeft
5425 |          * - OrgChart.layout.treeRight
5426 |          * - OrgChart.layout.grid
5427 |          * 
5428 |          * Default value - *OrgChart.layout.normal*
5429 |          * ```typescript     
5430 |          * var chart = new OrgChart('#tree', {
5431 |          *   layout: OrgChart.layout.mixed
5432 |          * });
5433 |          * ```          
5434 |          */
5435 |         layout?: OrgChart.layout | number,
5436 |         /**
5437 |          * Sets the maximum number of columns in grid layout, it has to be even nymber or 'dynamic' string
5438 |          * The default id 'dynamic', that means that the maximum colomn numbers are dinamicly calculated 
5439 |          * ```typescript     
5440 |          * let chart = new OrgChart('#tree', {
5441 |          *   layoutGridColumns: 10,
5442 |          * });
5443 |          * ```     
5444 |          */
5445 |         layoutGridColumns?: string | number,
5446 |         /**
5447 |          * The scale factor determines what fraction of the entire scale is visible at one time.
5448 |          * - OrgChart.match.height
5449 |          * - OrgChart.match.width
5450 |          * - OrgChart.match.boundary
5451 |          * - OrgChart.match.boundaryIfOutside
5452 |          * - [number]
5453 |          * 
5454 |          * Default value - *1*
5455 |          * ```typescript     
5456 |          * var chart = new OrgChart('#tree', {
5457 |          *   scaleInitial: OrgChart.match.boundaryIfOutside
5458 |          * });
5459 |          * ```          
5460 |          * {@link https://balkan.app/OrgChartJS/Docs/Layout | See doc...}         
5461 |          */
5462 |         scaleInitial?: number | OrgChart.match,
5463 |         /**
5464 |          * Determines the minimum scale factor. Default value - *0.1*
5465 |          * ```typescript       
5466 |          * var chart = new OrgChart('#tree', {
5467 |          *   scaleMin: 0.2
5468 |          * });
5469 |          * ```          
5470 |          */
5471 |         scaleMin?: number,
5472 |         /**
5473 |          * Determines the naximum scale factor. Default value - *5*
5474 |          * ```typescript       
5475 |          * var chart = new OrgChart('#tree', {
5476 |          *   scaleMax: 10
5477 |          * });
5478 |          * ```          
5479 |          */
5480 |         scaleMax?: number,
5481 |         /**
5482 |           * 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*
5483 |           * ```typescript       
5484 |           * var chart = new OrgChart('#tree', {
5485 |           *   orderBy: "orderId",
5486 |           *   nodes: [
5487 |           *       { id: 10, pid: 1, orderId: 2 },
5488 |           *       { id: 11, pid: 1, orderId: 1 }
5489 |           *   ]
5490 |           * });
5491 |           * ```    
5492 |           * ```typescript       
5493 |           * var chart = new OrgChart('#tree', {
5494 |           *   orderBy: [{field: "orderId", desc: true}],
5495 |           *   nodes: [
5496 |           *       { id: 10, pid: 1, orderId: 2 },
5497 |           *       { id: 11, pid: 1, orderId: 1 }
5498 |           *   ]
5499 |           * });
5500 |           * ```      
5501 |           */
5502 |         orderBy?: string | Array<string> | OrgChart.orderBy | Array<OrgChart.orderBy>,
5503 |         /**
5504 |           * Filter the OrgChart by the specified fields.
5505 |           * ```typescript       
5506 |           * var chart = new OrgChart('#tree', {
5507 |           *   filterBy: 'all'
5508 |           * });
5509 |           * ```    
5510 |           * ```typescript       
5511 |           * var chart = new OrgChart('#tree', {
5512 |           *   filterBy: ['country', 'title']
5513 |           * });
5514 |           * ```      
5515 |           * ```typescript       
5516 |           * var chart = new OrgChart('#tree', {
5517 |           *   filterBy: {
5518 |           *         name: { 'name 2': { checked: false, text: 'My text 2'} },
5519 |           *         title: {}
5520 |           *   }
5521 |           * });
5522 |           * ```      
5523 |           */
5524 |         filterBy?: string | Array<string> | {[key: string]: { [key: string] : {
5525 |             checked: boolean,
5526 |             text?: string
5527 |         } }},
5528 |         /**
5529 |           * ```typescript
5530 |           * let chart = new OrgChart('#tree', {
5531 |           *     editUI: new editForm(),
5532 |           * });
5533 |           * ```
5534 |           * [Go to edit doc page for more details](https://balkan.app/OrgChartJS/Docs/Edit#custom)
5535 |           */
5536 |         editUI?: OrgChart.editUI,
5537 |         /**
5538 |           * @ignore
5539 |           */
5540 |         aiUI?: OrgChart.aiUI,
5541 |         /**
5542 |           * @ignore
5543 |           */
5544 |         orgScribeUI?: OrgChart.orgScribeUI,        
5545 |         /**
5546 |           * @ignore
5547 |           */
5548 |         searchUI?: OrgChart.searchUI,
5549 |         /**
5550 |           * @ignore
5551 |           */
5552 |         filterUI?: OrgChart.filterUI,        
5553 |         /**
5554 |           * @ignore
5555 |           */
5556 |         xScrollUI?: OrgChart.xScrollUI,
5557 |         /**
5558 |           * @ignore
5559 |           */
5560 |         yScrollUI?: OrgChart.yScrollUI,
5561 |         /**
5562 |           * @ignore
5563 |           */
5564 |         nodeMenuUI?: OrgChart.menuUI,
5565 |         /**
5566 |           * @ignore
5567 |           */
5568 |         powerPointPreviewUI?: OrgChart.powerPointPreviewUI,        
5569 |         
5570 |         /**
5571 |           * @ignore
5572 |           */
5573 |         pdfPreviewUI?: OrgChart.pdfPreviewUI,   
5574 | 
5575 |         /**
5576 |          * @ignore
5577 |          */
5578 |         svgPreviewUI?: OrgChart.svgPreviewUI,   
5579 | 
5580 |         /**
5581 |           * @ignore
5582 |           */
5583 |         pngPreviewUI?: OrgChart.pngPreviewUI,  
5584 | 
5585 |         /**
5586 |           * @ignore
5587 |           */
5588 |         nodeCircleMenuUI?: OrgChart.circleMenuUI,
5589 |         /**
5590 |           * @ignore
5591 |           */
5592 |         nodeContextMenuUI?: OrgChart.menuUI,
5593 | 
5594 |         /**
5595 |           * @ignore
5596 |           */
5597 |         controlsUI?: OrgChart.controlsUI,
5598 | 
5599 |         /**
5600 |           * @ignore
5601 |           */
5602 |         toolbarUI?: OrgChart.toolbarUI,
5603 |         /**
5604 |          * @ignore
5605 |          */
5606 |         notifierUI?: any,
5607 |         /**
5608 |          * @ignore
5609 |          */        
5610 |         menuUI?: OrgChart.menuUI,
5611 |         /**
5612 |          * @ignore
5613 |          */      
5614 |         undoRedoUI?: OrgChart.undoRedoUI,
5615 |         /**
5616 |          * @ignore
5617 |          */
5618 |          UI?: any,        
5619 | 
5620 |          
5621 | 
5622 |         /**
5623 |          * The URL to the export server. Default value - *https://serverjs.balkan.app*
5624 |          * ```typescript       
5625 |          * var chart = new OrgChart('#tree', {
5626 |          *   serverUrl: "https://myDomain.com"
5627 |          * });
5628 |          * ```          
5629 |          */        
5630 |         serverUrl?: string,
5631 |         /**
5632 |          * The align option specifies the alignment of the nodes inside Org Chart JS.
5633 |          * - OrgChart.align.center - centered
5634 |          * - OrgChart.align.orientation - according to the orientation option
5635 |          * 
5636 |          * Default value - *OrgChart.align.center*
5637 |          * ```typescript       
5638 |          * var chart = new OrgChart('#tree', {
5639 |          *   align: OrgChart.align.orientation
5640 |          * });
5641 |          * ```          
5642 |          */         
5643 |         align?: OrgChart.align | number,
5644 |         /**
5645 |          * Can be used to control the transition of the nodes on expand/collapse operation. Default value - *func: OrgChart.anim.outPow, duration: 200*
5646 |          * ```typescript       
5647 |          * var chart = new OrgChart('#tree', {
5648 |          *   anim: {func: OrgChart.anim.outBack, duration: 500}
5649 |          * });
5650 |          * ```          
5651 |          */                 
5652 |         anim?: {
5653 |             /**
5654 |              * defines how long time an animation should take to complete
5655 |              */
5656 |             func?: OrgChart.anim,
5657 |             /**
5658 |              * Easing functions specify the speed at which an animation progresses at different points within the animation.
5659 |              */
5660 |             duration?: number
5661 |         },
5662 |         /**
5663 |          * Can be used to control the zooming sensitivity. Default value - *speed: 120, smooth: 12*
5664 |          * ```typescript       
5665 |          * var chart = new OrgChart('#tree', {
5666 |          *   zoom: {speed: 130, smooth: 10}
5667 |          * });
5668 |          * ```          
5669 |          */          
5670 |         zoom?: {
5671 |             speed?: number,
5672 |             smooth?: number
5673 |         },
5674 |         /**
5675 |          * Define nodes as roots. Default value - *null*
5676 |          * ```typescript       
5677 |          * var chart = new OrgChart('#tree', {
5678 |          *   roots: [2, 4]
5679 |          * });
5680 |          * ```          
5681 |          */           
5682 |         roots?: Array<string | number>,
5683 |         /**
5684 |          * Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - *null*
5685 |          * ```typescript       
5686 |          * var chart = new OrgChart('#tree', {
5687 |          *   state: {
5688 |          *       name: 'MyStateName',
5689 |          *       readFromLocalStorage: true,
5690 |          *       writeToLocalStorage: true,
5691 |          *       readFromIndexedDB: true,
5692 |          *       writeToIndexedDB: true,
5693 |          *       readFromUrlParams: true,                    
5694 |          *       writeToUrlParams: true
5695 |          *   }
5696 |          * });
5697 |          * ```          
5698 |          */          
5699 |         state?: {
5700 |             name?: string,
5701 |             readFromLocalStorage?: boolean,
5702 |             writeToLocalStorage?: boolean,
5703 |             readFromIndexedDB?: boolean,
5704 |             writeToIndexedDB?: boolean,
5705 |             readFromUrlParams?: boolean,
5706 |             writeToUrlParams?: boolean
5707 |         },
5708 |         /**
5709 |          * Set the session storage name to use undo/redo functionallity.
5710 |          * ```typescript       
5711 |          * let chart = new OrgChart('#tree', {
5712 |          *   undoRedoStorageName: 'myStorageName',
5713 |          * });
5714 |          * ``` 
5715 |          */
5716 |         undoRedoStorageName?: string,
5717 | 
5718 |         /**
5719 |          * Configure the buildin edit form.
5720 |          * ```typescript       
5721 |          * let chart = new OrgChart('#tree', {
5722 |          *      editForm: {
5723 |          *          readOnly: 'false', // the drefault value
5724 |          *          titleBinding: "name", // a property name
5725 |          *          photoBinding: "img", // the photo property name
5726 |          *          focusBinding: "name",
5727 |          *          addMore: "Add am element",
5728 |          *          saveOnHide: false,
5729 |          *          addMoreBtn: "Add",
5730 |          *          addMoreFieldName: "Element name:",
5731 |          *          saveAndCloseBtn: "Save",
5732 |          *          cancelBtn: "Close",
5733 |          *          generateElementsFromFields: false,
5734 |          *          buttons:  {
5735 |          *              edit: {
5736 |          *                  icon: OrgChart.icon.edit(24,24,'#fff'),
5737 |          *                  text: 'Edit',
5738 |          *                  hideIfEditMode: true,
5739 |          *                  hideIfDetailsMode: false
5740 |          *              },
5741 |          *              share: {
5742 |          *                  icon: OrgChart.icon.share(24,24,'#fff'),
5743 |          *                  text: 'Share'
5744 |          *              },
5745 |          *              pdf: {
5746 |          *                  icon: OrgChart.icon.pdf(24,24,'#fff'),
5747 |          *                  text: 'Save as PDF'
5748 |          *              },
5749 |          *              remove: {
5750 |          *                  icon: OrgChart.icon.remove(24,24,'#fff'),
5751 |          *                  text: 'Remove',
5752 |          *                  hideIfDetailsMode: true
5753 |          *              }
5754 |          *          },
5755 |          *          elements: [
5756 |          *              { type: 'textbox', label: 'Full Name', binding: 'Name' },
5757 |          *              { type: 'textbox', label: 'Phone number', binding: 'phone' }        
5758 |          *          ]
5759 |          *      }
5760 |          * });
5761 |          * ```    
5762 |          * {@link https://balkan.app/OrgChartJS/Docs/Edit | See doc...}   
5763 |          */                
5764 |         editForm?: {
5765 |             readOnly?: boolean,
5766 |             titleBinding?: string,
5767 |             photoBinding?: string,            
5768 |             focusBinding?: string,
5769 |             addMore?: string,
5770 |             /**
5771 |              * "Save" and "Cancel" buttons are invisible when true, and the orgchart is saved when the edit form hides.
5772 |              */
5773 |             saveOnHide?: boolean,
5774 |             addMoreBtn?: string,
5775 |             addMoreFieldName?: string,
5776 |             saveAndCloseBtn?: string,
5777 |             cancelBtn?: string,
5778 |             generateElementsFromFields?: boolean,
5779 |             buttons?: {
5780 |                 [key: string]: {
5781 |                     icon?: string,
5782 |                     text?: string,
5783 |                     hideIfEditMode?: boolean,
5784 |                     hideIfDetailsMode?: boolean
5785 |                 } | null
5786 |             },
5787 |            // elements?: { [key: string]: OrgChart.editFormElement | Array<OrgChart.editFormElement> }
5788 |            elements?: Array<OrgChart.editFormElement | Array<OrgChart.editFormElement>>
5789 |         }
5790 |     }
5791 | 
5792 |     /**
5793 |      * @ignore
5794 |      */
5795 |     var ui: {
5796 |         defs(fromrender: string): string;
5797 |         lonely(config: Object): string;
5798 |         pointer(config: Object, action: OrgChart.action, scale: number): string;
5799 |         node(node: OrgChart.node, data: Object, animations: OrgChart.anim, config: Object, x: number | undefined, y: number | undefined, nodeBinding: Object | undefined, action: OrgChart.action, scale: number, sender: Object): string; 
5800 |         nodeBtns(config: Object, node: OrgChart.node, data: Object, action: OrgChart.action, t: Object, sender: Object): string;
5801 |         expandCollapseBtn(chart: OrgChart, node: OrgChart.node, data: Object, config: Object, layoutConfigs: any, action: OrgChart.action, scale: number): string;
5802 |         link(node: OrgChart.node, obj: Object, scale: number, bordersByRootIdAndLevel: Object, nodes: Object, action: OrgChart.action): Array<string>;
5803 |         svg(width: number, height: number, viewBox: Array<number>, config: Object, content: string, scale: number): string;
5804 |         menuButton(config: Object): string;
5805 |     };
5806 | 
5807 |     /**
5808 |      * @ignore
5809 |      */
5810 |     var t: any;
5811 | }export default OrgChart


--------------------------------------------------------------------------------