ngx-apextree 1.0.0

package/LICENSE

@@ -0,0 +1,80 @@
+## 📄 License Options for ngx-apextree
+
+ngx-apextree is the official Angular wrapper for ApexTree and follows the same licensing model as ApexCharts.
+
+---
+
+### 🔓 Community License (Free)
+
+For individuals, non-profits, educators, and small businesses with **less than $2 million USD in annual revenue**.
+
+✅ What's allowed:
+
+- Personal, educational, or non-profit use
+- Commercial use by small orgs (< $2M annual revenue)
+- Modifications and redistribution (with attribution)
+
+🚫 Not allowed:
+
+- Use by companies or entities over $2M/year revenue
+- Use in competing charting products
+- Sublicensing under different terms
+
+➡ By using ngx-apextree under this license, you confirm that **you qualify as a Small Organization**.
+
+---
+
+### 💼 Commercial License (Paid)
+
+Required if **you or your affiliated organization earns $2 million USD or more per year**.
+
+✅ What's included:
+
+- Use in internal tools and commercial applications
+- Modifications and app-level distribution
+- 12-month subscription with updates & support
+
+🚫 Not allowed:
+
+- Redistribution in toolkits, SDKs, or platforms
+- Use by unlicensed developers
+- Competing charting products
+
+---
+
+### 🔄 OEM / Redistribution License (Paid)
+
+Required if you are **embedding ApexTree into a product or platform used by other people**, such as:
+
+- No-code dashboards
+- Developer platforms
+- Embedded BI tools
+- White-labeled apps or SDKs
+
+✅ What's included:
+
+- Redistribution rights for 1 application or product
+- 12-month subscription with updates & support
+
+✅ OEM **not required** if your app simply renders static charts and users **cannot** configure or interact with them.
+
+---
+
+### ⚠️ License Acceptance
+
+By installing ngx-apextree (e.g., via `npm install ngx-apextree`), you are agreeing to the applicable license based on your usage:
+
+- Community License (if under $2M revenue)
+- Commercial License (if over $2M revenue)
+- OEM License (if redistributing to third-party users)
+
+---
+
+### 🛠 Need a License or Have Questions?
+
+📧 Contact us at [sales@apexcharts.com](mailto:sales@apexcharts.com)  
+📚 Read full license agreements here: [https://apexcharts.com/license](https://apexcharts.com/license)
+
+---
+
+Thank you for supporting ApexTree! Your licensing helps keep it free and open for individuals and small teams.

package/README.md

@@ -0,0 +1,329 @@
+# ngx-apextree
+
+Angular wrapper for [ApexTree](https://github.com/apexcharts/apextree) - a JavaScript library for creating organizational and hierarchical charts.
+
+## Installation
+
+```bash
+npm install ngx-apextree apextree
+```
+
+## Usage
+
+### Basic Example
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { NgxApextreeComponent, TreeNode, ApexTreeOptions } from 'ngx-apextree';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NgxApextreeComponent],
+  template: `
+    <ngx-apextree
+      [data]="treeData"
+      [options]="treeOptions"
+      (nodeClick)="onNodeClick($event)"
+      (graphReady)="onGraphReady($event)"
+    >
+    </ngx-apextree>
+  `,
+})
+export class AppComponent {
+  treeData: TreeNode = {
+    id: '1',
+    name: 'CEO',
+    children: [
+      {
+        id: '2',
+        name: 'CTO',
+        children: [
+          { id: '3', name: 'Dev Lead' },
+          { id: '4', name: 'QA Lead' },
+        ],
+      },
+      {
+        id: '5',
+        name: 'CFO',
+      },
+    ],
+  };
+
+  treeOptions: ApexTreeOptions = {
+    width: 800,
+    height: 600,
+    nodeWidth: 150,
+    nodeHeight: 60,
+    direction: 'top',
+    childrenSpacing: 80,
+    siblingSpacing: 30,
+  };
+
+  onNodeClick(event: any) {
+    console.log('Node clicked:', event.node);
+  }
+
+  onGraphReady(graph: any) {
+    console.log('Graph ready:', graph);
+  }
+}
+```
+
+### Custom Node Template
+
+Use Angular's `ng-template` for custom node rendering:
+
+```typescript
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NgxApextreeComponent],
+  template: `
+    <ngx-apextree [data]="treeData" [options]="treeOptions">
+      <ng-template #nodeTemplate let-content>
+        <div class="custom-node">
+          <img [src]="content.imageURL" alt="" />
+          <span>{{ content.name }}</span>
+        </div>
+      </ng-template>
+    </ngx-apextree>
+  `,
+  styles: [
+    `
+      .custom-node {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 100%;
+        padding: 0 10px;
+      }
+      .custom-node img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+      }
+    `,
+  ],
+})
+export class AppComponent {
+  treeData: TreeNode = {
+    id: '1',
+    data: {
+      name: 'John Doe',
+      imageURL: 'https://i.pravatar.cc/300?img=68',
+    },
+    children: [
+      {
+        id: '2',
+        data: {
+          name: 'Jane Smith',
+          imageURL: 'https://i.pravatar.cc/300?img=69',
+        },
+      },
+    ],
+  };
+
+  treeOptions: ApexTreeOptions = {
+    contentKey: 'data',
+    width: 800,
+    height: 600,
+    nodeWidth: 180,
+    nodeHeight: 60,
+  };
+}
+```
+
+### Custom Tooltip Template
+
+You can provide a custom tooltip using the `tooltipTemplate` option:
+
+```typescript
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NgxApextreeComponent],
+  template: ` <ngx-apextree [data]="treeData" [options]="treeOptions"></ngx-apextree> `,
+})
+export class AppComponent {
+  treeData: TreeNode = {
+    id: '1',
+    data: {
+      name: 'John Doe',
+      role: 'CEO',
+      email: 'john@company.com',
+    },
+    children: [
+      {
+        id: '2',
+        data: {
+          name: 'Jane Smith',
+          role: 'CTO',
+          email: 'jane@company.com',
+        },
+      },
+    ],
+  };
+
+  treeOptions: ApexTreeOptions = {
+    contentKey: 'data',
+    width: 800,
+    height: 600,
+    enableTooltip: true,
+    tooltipTemplate: (content: any) => {
+      return `
+        <div style="padding: 10px;">
+          <strong>${content.name}</strong>
+          <p>${content.role}</p>
+          <p>${content.email}</p>
+        </div>
+      `;
+    },
+  };
+}
+```
+
+Alternatively, use Angular's `ng-template` for tooltip rendering:
+
+```html
+<ngx-apextree [data]="treeData" [options]="{ enableTooltip: true }">
+  <ng-template #tooltipTemplate let-content>
+    <div class="custom-tooltip">
+      <strong>{{ content.name }}</strong>
+      <p>{{ content.description }}</p>
+    </div>
+  </ng-template>
+</ngx-apextree>
+```
+
+### Graph Methods
+
+Access graph methods through component reference or the emitted graph instance:
+
+```typescript
+@Component({
+  template: `
+    <ngx-apextree
+      #tree
+      [data]="treeData"
+      [options]="treeOptions"
+      (graphReady)="onGraphReady($event)"
+    >
+    </ngx-apextree>
+
+    <button (click)="changeDirection()">Change Direction</button>
+    <button (click)="fit()">Fit Screen</button>
+  `,
+})
+export class AppComponent {
+  @ViewChild('tree') tree!: NgxApextreeComponent;
+
+  private graph: any;
+
+  onGraphReady(graph: any) {
+    this.graph = graph;
+  }
+
+  changeDirection() {
+    // using component method
+    this.tree.changeLayout('left');
+
+    // or using graph instance directly
+    // this.graph.changeLayout('left');
+  }
+
+  fit() {
+    this.tree.fitScreen();
+  }
+}
+```
+
+## API
+
+### Inputs
+
+| Input     | Type              | Description           |
+| --------- | ----------------- | --------------------- |
+| `data`    | `TreeNode`        | Tree data structure   |
+| `options` | `ApexTreeOptions` | Configuration options |
+
+### Outputs
+
+| Output         | Type             | Description                     |
+| -------------- | ---------------- | ------------------------------- |
+| `nodeClick`    | `NodeClickEvent` | Emits when a node is clicked    |
+| `graphReady`   | `ApexTreeGraph`  | Emits after initial render      |
+| `graphUpdated` | `ApexTreeGraph`  | Emits after data/options update |
+
+### Content Templates
+
+| Template           | Context              | Description         |
+| ------------------ | -------------------- | ------------------- |
+| `#nodeTemplate`    | `$implicit: content` | Custom node HTML    |
+| `#tooltipTemplate` | `$implicit: content` | Custom tooltip HTML |
+
+### Component Methods
+
+| Method         | Parameters                 | Description           |
+| -------------- | -------------------------- | --------------------- |
+| `changeLayout` | `direction: TreeDirection` | Change tree direction |
+| `collapse`     | `nodeId: string`           | Collapse a node       |
+| `expand`       | `nodeId: string`           | Expand a node         |
+| `fitScreen`    | -                          | Fit graph to screen   |
+| `getGraph`     | -                          | Get graph instance    |
+| `render`       | -                          | Manually re-render    |
+
+## License Setup
+
+If you have a commercial license, set it once at app initialization.
+
+### Option 1: Angular Provider (Recommended)
+
+**Standalone App:**
+
+```typescript
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideApexTreeLicense } from 'ngx-apextree';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideApexTreeLicense('your-license-key-here')],
+};
+```
+
+**Module-based App:**
+
+```typescript
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { provideApexTreeLicense } from 'ngx-apextree';
+
+@NgModule({
+  providers: [provideApexTreeLicense('your-license-key-here')],
+})
+export class AppModule {}
+```
+
+### Option 2: Static Method
+
+```typescript
+// main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { setApexTreeLicense } from 'ngx-apextree';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+// set license before bootstrapping
+setApexTreeLicense('your-license-key-here');
+
+bootstrapApplication(AppComponent, appConfig);
+```
+
+## Tree Options
+
+See the full list of options in the [ApexTree documentation](https://github.com/apexcharts/apextree).
+
+## License
+
+See [LICENSE](./LICENSE) for details.

package/fesm2022/ngx-apextree.mjs

@@ -0,0 +1,319 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, PLATFORM_ID, NgZone, ViewChild, ContentChild, Output, Input, ChangeDetectionStrategy, Component, InjectionToken, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import ApexTree from 'apextree';
+
+class NgxApextreeComponent {
+    /**
+     * tree data to render
+     */
+    data = null;
+    /**
+     * tree configuration options
+     */
+    options = {};
+    /**
+     * emits when a node is clicked
+     */
+    nodeClick = new EventEmitter();
+    /**
+     * emits when graph is ready after initial render
+     */
+    graphReady = new EventEmitter();
+    /**
+     * emits when graph is updated after data/options change
+     */
+    graphUpdated = new EventEmitter();
+    /**
+     * custom node template
+     */
+    nodeTemplateRef = null;
+    /**
+     * custom tooltip template
+     */
+    tooltipTemplateRef = null;
+    chartContainer;
+    platformId = inject(PLATFORM_ID);
+    ngZone = inject(NgZone);
+    treeInstance = null;
+    graphInstance = null;
+    isInitialized = false;
+    ngOnInit() {
+        // initialization logic
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.initChart();
+        }
+    }
+    ngOnChanges(changes) {
+        if (!this.isInitialized) {
+            return;
+        }
+        // re-render on data or options change
+        if (changes['data'] || changes['options']) {
+            this.updateChart();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyChart();
+    }
+    /**
+     * change the layout direction
+     */
+    changeLayout(direction) {
+        if (this.graphInstance) {
+            this.ngZone.runOutsideAngular(() => {
+                this.graphInstance.changeLayout(direction);
+            });
+        }
+    }
+    /**
+     * collapse a node by id
+     */
+    collapse(nodeId) {
+        if (this.graphInstance) {
+            this.ngZone.runOutsideAngular(() => {
+                this.graphInstance.collapse(nodeId);
+            });
+        }
+    }
+    /**
+     * expand a node by id
+     */
+    expand(nodeId) {
+        if (this.graphInstance) {
+            this.ngZone.runOutsideAngular(() => {
+                this.graphInstance.expand(nodeId);
+            });
+        }
+    }
+    /**
+     * fit the graph to screen
+     */
+    fitScreen() {
+        if (this.graphInstance) {
+            this.ngZone.runOutsideAngular(() => {
+                this.graphInstance.fitScreen();
+            });
+        }
+    }
+    /**
+     * get the underlying graph instance
+     */
+    getGraph() {
+        return this.graphInstance;
+    }
+    /**
+     * manually trigger a re-render
+     */
+    render() {
+        this.updateChart();
+    }
+    initChart() {
+        if (!this.data) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            const mergedOptions = this.buildOptions();
+            this.treeInstance = new ApexTree(this.chartContainer.nativeElement, mergedOptions);
+            this.graphInstance = this.treeInstance.render(this.data);
+            this.isInitialized = true;
+            this.ngZone.run(() => {
+                this.graphReady.emit(this.graphInstance);
+            });
+        });
+    }
+    updateChart() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        // destroy and recreate for now
+        // apextree doesn't have an update method
+        this.destroyChart();
+        if (this.data) {
+            this.ngZone.runOutsideAngular(() => {
+                const mergedOptions = this.buildOptions();
+                this.treeInstance = new ApexTree(this.chartContainer.nativeElement, mergedOptions);
+                this.graphInstance = this.treeInstance.render(this.data);
+                this.isInitialized = true;
+                this.ngZone.run(() => {
+                    this.graphUpdated.emit(this.graphInstance);
+                });
+            });
+        }
+    }
+    destroyChart() {
+        // clear the container
+        if (this.chartContainer?.nativeElement) {
+            this.chartContainer.nativeElement.innerHTML = '';
+        }
+        this.treeInstance = null;
+        this.graphInstance = null;
+        this.isInitialized = false;
+    }
+    buildOptions() {
+        const options = { ...this.options };
+        // handle node template
+        if (this.nodeTemplateRef) {
+            options.nodeTemplate = (content) => {
+                return this.renderTemplate(this.nodeTemplateRef, content);
+            };
+        }
+        // handle tooltip template
+        if (this.tooltipTemplateRef) {
+            options.tooltipTemplate = (content) => {
+                return this.renderTemplate(this.tooltipTemplateRef, content);
+            };
+        }
+        // handle node click
+        if (this.nodeClick.observed) {
+            options.onNodeClick = (node) => {
+                this.ngZone.run(() => {
+                    this.nodeClick.emit({
+                        node,
+                        event: window.event,
+                    });
+                });
+            };
+        }
+        return options;
+    }
+    renderTemplate(templateRef, content) {
+        // create embedded view
+        const viewRef = templateRef.createEmbeddedView({ $implicit: content });
+        viewRef.detectChanges();
+        // extract html from the view
+        const html = this.extractHtmlFromView(viewRef);
+        // destroy the view
+        viewRef.destroy();
+        return html;
+    }
+    extractHtmlFromView(viewRef) {
+        const nodes = viewRef.rootNodes;
+        let html = '';
+        for (const node of nodes) {
+            if (node instanceof HTMLElement) {
+                html += node.outerHTML;
+            }
+            else if (node instanceof Text) {
+                html += node.textContent || '';
+            }
+            else if (node instanceof Comment) {
+                // skip comments
+            }
+        }
+        return html;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxApextreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgxApextreeComponent, isStandalone: true, selector: "ngx-apextree", inputs: { data: "data", options: "options" }, outputs: { nodeClick: "nodeClick", graphReady: "graphReady", graphUpdated: "graphUpdated" }, queries: [{ propertyName: "nodeTemplateRef", first: true, predicate: ["nodeTemplate"], descendants: true }, { propertyName: "tooltipTemplateRef", first: true, predicate: ["tooltipTemplate"], descendants: true }], viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div #chartContainer class="ngx-apextree-container"></div>`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgxApextreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-apextree', standalone: true, imports: [CommonModule], template: `<div #chartContainer class="ngx-apextree-container"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], nodeClick: [{
+                type: Output
+            }], graphReady: [{
+                type: Output
+            }], graphUpdated: [{
+                type: Output
+            }], nodeTemplateRef: [{
+                type: ContentChild,
+                args: ['nodeTemplate', { static: false }]
+            }], tooltipTemplateRef: [{
+                type: ContentChild,
+                args: ['tooltipTemplate', { static: false }]
+            }], chartContainer: [{
+                type: ViewChild,
+                args: ['chartContainer', { static: true }]
+            }] } });
+
+/**
+ * injection token for apextree license key
+ */
+const APEXTREE_LICENSE_KEY = new InjectionToken('APEXTREE_LICENSE_KEY');
+/**
+ * internal variable to store license key
+ */
+let licenseKey = null;
+/**
+ * static method to set license
+ * call this before bootstrapping your app
+ *
+ * @example
+ * ```typescript
+ * import { setApexTreeLicense } from 'ngx-apextree';
+ *
+ * setApexTreeLicense('your-license-key-here');
+ *
+ * bootstrapApplication(AppComponent, appConfig);
+ * ```
+ */
+function setApexTreeLicense(license) {
+    licenseKey = license;
+    // set license in apextree library if it has a method for it
+    if (typeof ApexTree.setLicense === 'function') {
+        ApexTree.setLicense(license);
+    }
+}
+/**
+ * get the currently set license key
+ */
+function getApexTreeLicense() {
+    return licenseKey;
+}
+/**
+ * angular provider function for license configuration
+ * use this in your app config or module providers
+ *
+ * @example
+ * ```typescript
+ * // standalone app (app.config.ts)
+ * import { provideApexTreeLicense } from 'ngx-apextree';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideApexTreeLicense('your-license-key-here'),
+ *   ]
+ * };
+ *
+ * // module-based app (app.module.ts)
+ * @NgModule({
+ *   providers: [
+ *     provideApexTreeLicense('your-license-key-here'),
+ *   ]
+ * })
+ * export class AppModule { }
+ * ```
+ */
+function provideApexTreeLicense(license) {
+    return [
+        {
+            provide: APEXTREE_LICENSE_KEY,
+            useValue: license,
+        },
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useValue: () => {
+                setApexTreeLicense(license);
+            },
+        },
+    ];
+}
+
+/*
+ * Public API Surface of ngx-apextree
+ */
+// component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { APEXTREE_LICENSE_KEY, NgxApextreeComponent, getApexTreeLicense, provideApexTreeLicense, setApexTreeLicense };
+//# sourceMappingURL=ngx-apextree.mjs.map

package/fesm2022/ngx-apextree.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-apextree.mjs","sources":["../../../projects/ngx-apextree/src/lib/ngx-apextree.component.ts","../../../projects/ngx-apextree/src/lib/ngx-apextree.license.ts","../../../projects/ngx-apextree/src/public-api.ts","../../../projects/ngx-apextree/src/ngx-apextree.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ElementRef,\n  OnInit,\n  OnDestroy,\n  OnChanges,\n  SimpleChanges,\n  ContentChild,\n  TemplateRef,\n  ViewChild,\n  AfterViewInit,\n  NgZone,\n  ChangeDetectionStrategy,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { isPlatformBrowser, CommonModule } from '@angular/common';\nimport ApexTree from 'apextree';\nimport {\n  ApexTreeOptions,\n  ApexTreeGraph,\n  TreeNode,\n  NodeClickEvent,\n  TreeDirection,\n} from './ngx-apextree.types';\n\n@Component({\n  selector: 'ngx-apextree',\n  standalone: true,\n  imports: [CommonModule],\n  template: `<div #chartContainer class=\"ngx-apextree-container\"></div>`,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgxApextreeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {\n  /**\n   * tree data to render\n   */\n  @Input() data: TreeNode | null = null;\n\n  /**\n   * tree configuration options\n   */\n  @Input() options: ApexTreeOptions = {};\n\n  /**\n   * emits when a node is clicked\n   */\n  @Output() nodeClick = new EventEmitter<NodeClickEvent>();\n\n  /**\n   * emits when graph is ready after initial render\n   */\n  @Output() graphReady = new EventEmitter<ApexTreeGraph>();\n\n  /**\n   * emits when graph is updated after data/options change\n   */\n  @Output() graphUpdated = new EventEmitter<ApexTreeGraph>();\n\n  /**\n   * custom node template\n   */\n  @ContentChild('nodeTemplate', { static: false })\n  nodeTemplateRef: TemplateRef<any> | null = null;\n\n  /**\n   * custom tooltip template\n   */\n  @ContentChild('tooltipTemplate', { static: false })\n  tooltipTemplateRef: TemplateRef<any> | null = null;\n\n  @ViewChild('chartContainer', { static: true })\n  private chartContainer!: ElementRef<HTMLElement>;\n\n  private platformId = inject(PLATFORM_ID);\n  private ngZone = inject(NgZone);\n\n  private treeInstance: any = null;\n  private graphInstance: ApexTreeGraph | null = null;\n  private isInitialized = false;\n\n  ngOnInit(): void {\n    // initialization logic\n  }\n\n  ngAfterViewInit(): void {\n    if (isPlatformBrowser(this.platformId)) {\n      this.initChart();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!this.isInitialized) {\n      return;\n    }\n\n    // re-render on data or options change\n    if (changes['data'] || changes['options']) {\n      this.updateChart();\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroyChart();\n  }\n\n  /**\n   * change the layout direction\n   */\n  changeLayout(direction: TreeDirection): void {\n    if (this.graphInstance) {\n      this.ngZone.runOutsideAngular(() => {\n        this.graphInstance!.changeLayout(direction);\n      });\n    }\n  }\n\n  /**\n   * collapse a node by id\n   */\n  collapse(nodeId: string): void {\n    if (this.graphInstance) {\n      this.ngZone.runOutsideAngular(() => {\n        this.graphInstance!.collapse(nodeId);\n      });\n    }\n  }\n\n  /**\n   * expand a node by id\n   */\n  expand(nodeId: string): void {\n    if (this.graphInstance) {\n      this.ngZone.runOutsideAngular(() => {\n        this.graphInstance!.expand(nodeId);\n      });\n    }\n  }\n\n  /**\n   * fit the graph to screen\n   */\n  fitScreen(): void {\n    if (this.graphInstance) {\n      this.ngZone.runOutsideAngular(() => {\n        this.graphInstance!.fitScreen();\n      });\n    }\n  }\n\n  /**\n   * get the underlying graph instance\n   */\n  getGraph(): ApexTreeGraph | null {\n    return this.graphInstance;\n  }\n\n  /**\n   * manually trigger a re-render\n   */\n  render(): void {\n    this.updateChart();\n  }\n\n  private initChart(): void {\n    if (!this.data) {\n      return;\n    }\n\n    this.ngZone.runOutsideAngular(() => {\n      const mergedOptions = this.buildOptions();\n\n      this.treeInstance = new ApexTree(this.chartContainer.nativeElement, mergedOptions);\n\n      this.graphInstance = this.treeInstance.render(this.data);\n      this.isInitialized = true;\n\n      this.ngZone.run(() => {\n        this.graphReady.emit(this.graphInstance!);\n      });\n    });\n  }\n\n  private updateChart(): void {\n    if (!isPlatformBrowser(this.platformId)) {\n      return;\n    }\n\n    // destroy and recreate for now\n    // apextree doesn't have an update method\n    this.destroyChart();\n\n    if (this.data) {\n      this.ngZone.runOutsideAngular(() => {\n        const mergedOptions = this.buildOptions();\n\n        this.treeInstance = new ApexTree(this.chartContainer.nativeElement, mergedOptions);\n\n        this.graphInstance = this.treeInstance.render(this.data);\n        this.isInitialized = true;\n\n        this.ngZone.run(() => {\n          this.graphUpdated.emit(this.graphInstance!);\n        });\n      });\n    }\n  }\n\n  private destroyChart(): void {\n    // clear the container\n    if (this.chartContainer?.nativeElement) {\n      this.chartContainer.nativeElement.innerHTML = '';\n    }\n    this.treeInstance = null;\n    this.graphInstance = null;\n    this.isInitialized = false;\n  }\n\n  private buildOptions(): ApexTreeOptions {\n    const options: ApexTreeOptions = { ...this.options };\n\n    // handle node template\n    if (this.nodeTemplateRef) {\n      options.nodeTemplate = (content: any) => {\n        return this.renderTemplate(this.nodeTemplateRef!, content);\n      };\n    }\n\n    // handle tooltip template\n    if (this.tooltipTemplateRef) {\n      options.tooltipTemplate = (content: any) => {\n        return this.renderTemplate(this.tooltipTemplateRef!, content);\n      };\n    }\n\n    // handle node click\n    if (this.nodeClick.observed) {\n      options.onNodeClick = (node: any) => {\n        this.ngZone.run(() => {\n          this.nodeClick.emit({\n            node,\n            event: window.event as MouseEvent,\n          });\n        });\n      };\n    }\n\n    return options as any;\n  }\n\n  private renderTemplate(templateRef: TemplateRef<any>, content: any): string {\n    // create embedded view\n    const viewRef = templateRef.createEmbeddedView({ $implicit: content });\n    viewRef.detectChanges();\n\n    // extract html from the view\n    const html = this.extractHtmlFromView(viewRef);\n\n    // destroy the view\n    viewRef.destroy();\n\n    return html;\n  }\n\n  private extractHtmlFromView(viewRef: any): string {\n    const nodes = viewRef.rootNodes;\n    let html = '';\n\n    for (const node of nodes) {\n      if (node instanceof HTMLElement) {\n        html += node.outerHTML;\n      } else if (node instanceof Text) {\n        html += node.textContent || '';\n      } else if (node instanceof Comment) {\n        // skip comments\n      }\n    }\n\n    return html;\n  }\n}\n","import { InjectionToken, Provider, ENVIRONMENT_INITIALIZER, inject } from '@angular/core';\nimport ApexTree from 'apextree';\n\n/**\n * injection token for apextree license key\n */\nexport const APEXTREE_LICENSE_KEY = new InjectionToken<string>('APEXTREE_LICENSE_KEY');\n\n/**\n * internal variable to store license key\n */\nlet licenseKey: string | null = null;\n\n/**\n * static method to set license\n * call this before bootstrapping your app\n *\n * @example\n * ```typescript\n * import { setApexTreeLicense } from 'ngx-apextree';\n *\n * setApexTreeLicense('your-license-key-here');\n *\n * bootstrapApplication(AppComponent, appConfig);\n * ```\n */\nexport function setApexTreeLicense(license: string): void {\n  licenseKey = license;\n  // set license in apextree library if it has a method for it\n  if (typeof (ApexTree as any).setLicense === 'function') {\n    (ApexTree as any).setLicense(license);\n  }\n}\n\n/**\n * get the currently set license key\n */\nexport function getApexTreeLicense(): string | null {\n  return licenseKey;\n}\n\n/**\n * angular provider function for license configuration\n * use this in your app config or module providers\n *\n * @example\n * ```typescript\n * // standalone app (app.config.ts)\n * import { provideApexTreeLicense } from 'ngx-apextree';\n *\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideApexTreeLicense('your-license-key-here'),\n *   ]\n * };\n *\n * // module-based app (app.module.ts)\n * @NgModule({\n *   providers: [\n *     provideApexTreeLicense('your-license-key-here'),\n *   ]\n * })\n * export class AppModule { }\n * ```\n */\nexport function provideApexTreeLicense(license: string): Provider[] {\n  return [\n    {\n      provide: APEXTREE_LICENSE_KEY,\n      useValue: license,\n    },\n    {\n      provide: ENVIRONMENT_INITIALIZER,\n      multi: true,\n      useValue: () => {\n        setApexTreeLicense(license);\n      },\n    },\n  ];\n}\n","/*\n * Public API Surface of ngx-apextree\n */\n\n// component\nexport { NgxApextreeComponent } from './lib/ngx-apextree.component';\n\n// types\nexport type {\n  ApexTreeOptions,\n  ApexTreeGraph,\n  TreeNode,\n  NodeClickEvent,\n  TreeDirection,\n  NodeOptions,\n  TooltipOptions,\n  FontOptions,\n  EdgeOptions,\n  NodeStylingOptions,\n  ExpandCollapseOptions,\n} from './lib/ngx-apextree.types';\n\n// license utilities\nexport {\n  APEXTREE_LICENSE_KEY,\n  setApexTreeLicense,\n  getApexTreeLicense,\n  provideApexTreeLicense,\n} from './lib/ngx-apextree.license';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "ngx-apextree",
+  "version": "1.0.0",
+  "description": "Angular wrapper for ApexTree - hierarchical and organizational chart library",
+  "license": "See LICENSE in LICENSE",
+  "author": "ApexCharts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apexcharts/ngx-apextree.git"
+  },
+  "keywords": [
+    "angular",
+    "tree",
+    "chart",
+    "organizational-chart",
+    "hierarchy",
+    "svg",
+    "apextree",
+    "ngx-apextree"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "apextree": "^1.6.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/types/ngx-apextree.d.ts

@@ -0,0 +1,248 @@
+import * as i0 from '@angular/core';
+import { OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, TemplateRef, SimpleChanges, InjectionToken, Provider } from '@angular/core';
+
+/**
+ * tree direction options
+ */
+type TreeDirection = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * node options that can be applied per-node
+ */
+interface NodeOptions {
+    nodeBGColor?: string;
+    nodeBGColorHover?: string;
+    borderColor?: string;
+    borderColorHover?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontColor?: string;
+}
+/**
+ * tree node data structure
+ */
+interface TreeNode<T = any> {
+    id: string;
+    name?: string;
+    data?: T;
+    options?: NodeOptions;
+    children?: TreeNode<T>[];
+}
+/**
+ * tooltip options
+ */
+interface TooltipOptions {
+    enableTooltip?: boolean;
+    tooltipId?: string;
+    tooltipMaxWidth?: number;
+    tooltipMinWidth?: number;
+    tooltipBorderColor?: string;
+    tooltipBGColor?: string;
+    tooltipFontColor?: string;
+    tooltipFontSize?: string;
+    tooltipPadding?: number;
+    tooltipOffset?: number;
+}
+/**
+ * font options
+ */
+interface FontOptions {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontColor?: string;
+}
+/**
+ * edge options
+ */
+interface EdgeOptions {
+    edgeWidth?: number;
+    edgeColor?: string;
+    edgeColorHover?: string;
+}
+/**
+ * node styling options
+ */
+interface NodeStylingOptions {
+    nodeWidth?: number;
+    nodeHeight?: number;
+    nodeBGColor?: string;
+    nodeBGColorHover?: string;
+    borderWidth?: number;
+    borderStyle?: string;
+    borderRadius?: string;
+    borderColor?: string;
+    borderColorHover?: string;
+    nodeStyle?: string;
+    nodeClassName?: string;
+}
+/**
+ * expand/collapse options
+ */
+interface ExpandCollapseOptions {
+    enableExpandCollapse?: boolean;
+    expandCollapseButtonBGColor?: string;
+    expandCollapseButtonBorderColor?: string;
+}
+/**
+ * complete tree options
+ */
+interface ApexTreeOptions extends TooltipOptions, FontOptions, EdgeOptions, NodeStylingOptions, ExpandCollapseOptions {
+    width?: number | string;
+    height?: number | string;
+    direction?: TreeDirection;
+    contentKey?: string;
+    siblingSpacing?: number;
+    childrenSpacing?: number;
+    highlightOnHover?: boolean;
+    containerClassName?: string;
+    canvasStyle?: string;
+    enableToolbar?: boolean;
+    groupLeafNodes?: boolean;
+    groupLeafNodesSpacing?: number;
+    viewPortWidth?: number;
+    viewPortHeight?: number;
+    nodeTemplate?: (content: any) => string;
+    tooltipTemplate?: (content: any) => string;
+    onNodeClick?: (node: any) => void;
+}
+/**
+ * graph instance returned by render
+ */
+interface ApexTreeGraph {
+    changeLayout(direction: TreeDirection): void;
+    collapse(nodeId: string): void;
+    expand(nodeId: string): void;
+    fitScreen(): void;
+}
+/**
+ * node click event payload
+ */
+interface NodeClickEvent<T = any> {
+    node: TreeNode<T>;
+    event: MouseEvent;
+}
+
+declare class NgxApextreeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+    /**
+     * tree data to render
+     */
+    data: TreeNode | null;
+    /**
+     * tree configuration options
+     */
+    options: ApexTreeOptions;
+    /**
+     * emits when a node is clicked
+     */
+    nodeClick: EventEmitter<NodeClickEvent<any>>;
+    /**
+     * emits when graph is ready after initial render
+     */
+    graphReady: EventEmitter<ApexTreeGraph>;
+    /**
+     * emits when graph is updated after data/options change
+     */
+    graphUpdated: EventEmitter<ApexTreeGraph>;
+    /**
+     * custom node template
+     */
+    nodeTemplateRef: TemplateRef<any> | null;
+    /**
+     * custom tooltip template
+     */
+    tooltipTemplateRef: TemplateRef<any> | null;
+    private chartContainer;
+    private platformId;
+    private ngZone;
+    private treeInstance;
+    private graphInstance;
+    private isInitialized;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * change the layout direction
+     */
+    changeLayout(direction: TreeDirection): void;
+    /**
+     * collapse a node by id
+     */
+    collapse(nodeId: string): void;
+    /**
+     * expand a node by id
+     */
+    expand(nodeId: string): void;
+    /**
+     * fit the graph to screen
+     */
+    fitScreen(): void;
+    /**
+     * get the underlying graph instance
+     */
+    getGraph(): ApexTreeGraph | null;
+    /**
+     * manually trigger a re-render
+     */
+    render(): void;
+    private initChart;
+    private updateChart;
+    private destroyChart;
+    private buildOptions;
+    private renderTemplate;
+    private extractHtmlFromView;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxApextreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxApextreeComponent, "ngx-apextree", never, { "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "nodeClick": "nodeClick"; "graphReady": "graphReady"; "graphUpdated": "graphUpdated"; }, ["nodeTemplateRef", "tooltipTemplateRef"], never, true, never>;
+}
+
+/**
+ * injection token for apextree license key
+ */
+declare const APEXTREE_LICENSE_KEY: InjectionToken<string>;
+/**
+ * static method to set license
+ * call this before bootstrapping your app
+ *
+ * @example
+ * ```typescript
+ * import { setApexTreeLicense } from 'ngx-apextree';
+ *
+ * setApexTreeLicense('your-license-key-here');
+ *
+ * bootstrapApplication(AppComponent, appConfig);
+ * ```
+ */
+declare function setApexTreeLicense(license: string): void;
+/**
+ * get the currently set license key
+ */
+declare function getApexTreeLicense(): string | null;
+/**
+ * angular provider function for license configuration
+ * use this in your app config or module providers
+ *
+ * @example
+ * ```typescript
+ * // standalone app (app.config.ts)
+ * import { provideApexTreeLicense } from 'ngx-apextree';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideApexTreeLicense('your-license-key-here'),
+ *   ]
+ * };
+ *
+ * // module-based app (app.module.ts)
+ * @NgModule({
+ *   providers: [
+ *     provideApexTreeLicense('your-license-key-here'),
+ *   ]
+ * })
+ * export class AppModule { }
+ * ```
+ */
+declare function provideApexTreeLicense(license: string): Provider[];
+
+export { APEXTREE_LICENSE_KEY, NgxApextreeComponent, getApexTreeLicense, provideApexTreeLicense, setApexTreeLicense };
+export type { ApexTreeGraph, ApexTreeOptions, EdgeOptions, ExpandCollapseOptions, FontOptions, NodeClickEvent, NodeOptions, NodeStylingOptions, TooltipOptions, TreeDirection, TreeNode };