@acorex/modules 19.2.3 → 19.2.4

package/fesm2022/acorex-modules-organization-managment-org-chart.page-fOxjGb8i.mjs

@@ -0,0 +1,297 @@
+import * as i6 from '@acorex/cdk/pan-view';
+import { AXPanViewModule } from '@acorex/cdk/pan-view';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i5 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i2 from '@acorex/components/menu';
+import { AXMenuModule } from '@acorex/components/menu';
+import * as i4 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
+import { AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent } from '@acorex/platform/themes/shared';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, inject, ViewContainerRef, afterNextRender, signal, Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import * as d3 from 'd3';
+
+const AXM_ORGANIZATION_DATA = {
+    id: '1',
+    title: 'CEO',
+    subtitle: 'Chief Executive Officer',
+    description: 'Responsible for the overall success of the',
+    icon: 'fa-user-tie',
+    children: [
+        {
+            id: '2',
+            title: 'CTO',
+            subtitle: 'Chief Technology Officer',
+            //description: 'Leads the technology team and innovation.',
+            icon: 'fa-microchip',
+            children: [
+                {
+                    id: '3',
+                    title: 'Engineering Director',
+                    subtitle: 'Director of Engineering',
+                    description: 'Oversees all engineering teams.',
+                    icon: 'fa-cogs',
+                    children: [
+                        {
+                            id: '4',
+                            title: 'Dev Manager',
+                            subtitle: 'Development Manager',
+                            description: 'Manages the development team.',
+                            icon: 'fa-code',
+                            children: [
+                                {
+                                    id: '5',
+                                    title: 'Frontend Team Lead',
+                                    subtitle: 'Leads frontend developers',
+                                    description: 'Manages the frontend development efforts.',
+                                    icon: 'fa-paint-brush',
+                                },
+                                {
+                                    id: '6',
+                                    title: 'Backend Team Lead',
+                                    subtitle: 'Leads backend developers',
+                                    description: 'Manages the backend development efforts.',
+                                    icon: 'fa-database',
+                                },
+                            ],
+                        },
+                        {
+                            id: '7',
+                            title: 'QA Manager',
+                            subtitle: 'Quality Assurance Manager',
+                            description: 'Ensures product quality.',
+                            icon: 'fa-check-circle',
+                            children: [
+                                {
+                                    id: '8',
+                                    title: 'QA Engineer',
+                                    subtitle: 'Quality Assurance Engineer',
+                                    description: 'Tests and ensures software quality.',
+                                    icon: 'fa-bug',
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    id: '9',
+                    title: 'Security Manager',
+                    subtitle: 'Security & Compliance',
+                    description: 'Ensures security policies and compliance.',
+                    icon: 'fa-shield-alt',
+                },
+            ],
+        },
+        {
+            id: '10',
+            title: 'CFO',
+            subtitle: 'Chief Financial Officer',
+            description: 'Manages the financial health of the organization.',
+            icon: 'fa-chart-line',
+            children: [
+                {
+                    id: '11',
+                    title: 'Finance Manager',
+                    subtitle: 'Oversees financial operations',
+                    description: 'Handles budgets, financial planning, and reporting.',
+                    icon: 'fa-money-bill-wave',
+                },
+                {
+                    id: '12',
+                    title: 'Accounting Manager',
+                    subtitle: 'Manages accounting team',
+                    description: 'Ensures financial accuracy and compliance.',
+                    icon: 'fa-calculator',
+                },
+            ],
+        },
+        {
+            id: '13',
+            title: 'COO',
+            subtitle: 'Chief Operating Officer',
+            description: 'Oversees daily business operations.',
+            icon: 'fa-briefcase',
+            children: [
+                {
+                    id: '14',
+                    title: 'HR Manager',
+                    subtitle: 'Human Resources Manager',
+                    description: 'Manages recruitment and employee relations.',
+                    icon: 'fa-users',
+                },
+                {
+                    id: '15',
+                    title: 'Operations Manager',
+                    subtitle: 'Leads business operations',
+                    description: 'Oversees operational efficiency and process improvements.',
+                    icon: 'fa-industry',
+                },
+            ],
+        },
+        {
+            id: '16',
+            title: 'CMO',
+            subtitle: 'Chief Marketing Officer',
+            description: 'Leads marketing and brand strategy.',
+            icon: 'fa-bullhorn',
+            children: [
+                {
+                    id: '17',
+                    title: 'Marketing Manager',
+                    subtitle: 'Oversees marketing team',
+                    description: 'Handles branding, campaigns, and customer engagement.',
+                    icon: 'fa-ad',
+                },
+                {
+                    id: '18',
+                    title: 'Sales Director',
+                    subtitle: 'Leads sales initiatives',
+                    description: 'Drives revenue and sales growth.',
+                    icon: 'fa-handshake',
+                    children: [
+                        {
+                            id: '19',
+                            title: 'Sales Manager',
+                            subtitle: 'Manages sales team',
+                            description: 'Oversees sales operations and targets.',
+                            icon: 'fa-shopping-cart',
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+
+class AXMOrgChartPage {
+    constructor() {
+        this.nodeTemplate = viewChild.required('nodeTemplate');
+        this.treeContainer = viewChild.required('chart');
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.data = AXM_ORGANIZATION_DATA;
+        // Constants for dynamic sizing
+        this.CONTAINER_WIDTH = 2400;
+        this.CONTAINER_HEIGHT = 1200;
+        this.NODE_WIDTH_BASE = 240;
+        this.NODE_HEIGHT_BASE = 120;
+        this.NODE_STROKE_COLOR = 'rgba(var(--ax-sys-color-primary-400))';
+        this.LINK_STROKE_WIDTH = 1;
+        this.#af = afterNextRender(() => {
+            this.createChart(this.treeContainer().nativeElement, this.data);
+        });
+        this.panX = signal(0);
+        this.panY = signal(0);
+        this.panZoomLevel = signal(100);
+    }
+    #af;
+    zoomIn() {
+        this.panZoomLevel.update((prev) => prev + 5);
+    }
+    zoomOut() {
+        this.panZoomLevel.update((prev) => prev - 5);
+    }
+    zoomReset() {
+        this.panX.set(1);
+        this.panY.set(1);
+        this.panX.set(0);
+        this.panY.set(0);
+        this.panZoomLevel.set(100);
+    }
+    createChart(el, data) {
+        const svg = d3.select(el).append('svg').attr('width', this.CONTAINER_WIDTH).attr('height', this.CONTAINER_HEIGHT);
+        const g = svg.append('g').attr('transform', `translate(${this.NODE_HEIGHT_BASE}, ${this.NODE_HEIGHT_BASE})`);
+        // Create a hierarchy from the data
+        const root = d3.hierarchy(data);
+        // Create a tree layout
+        const treeLayout = d3.tree().size([this.CONTAINER_WIDTH - 100, this.CONTAINER_HEIGHT / 2]);
+        // Generate the tree nodes and links
+        treeLayout(root);
+        // Create links (lines with 90-degree angles)
+        const link = g
+            .selectAll('.link')
+            .data(root.links())
+            .enter()
+            .append('path')
+            .attr('class', 'link')
+            .attr('d', (d) => {
+            const source = d.source;
+            const target = d.target;
+            return `M${source.x},${source.y}V${(source.y + target.y) / 2}H${target.x}V${target.y}`;
+        })
+            .attr('fill', 'none')
+            .attr('stroke', this.NODE_STROKE_COLOR)
+            .attr('stroke-width', this.LINK_STROKE_WIDTH);
+        // Create nodes
+        const node = g
+            .selectAll('.axp-org-chart-node')
+            .data(root.descendants())
+            .enter()
+            .append('foreignObject')
+            .attr('class', 'axp-org-chart-node')
+            .attr('id', (d) => `node-${d.data.id}`) // Unique ID for each node
+            .attr('x', (d) => d.x - this.NODE_WIDTH_BASE / 2) // Use d.x (D3 node property)
+            .attr('y', (d) => d.y - this.NODE_HEIGHT_BASE / 2) // Use d.y (D3 node property)
+            .attr('width', this.NODE_WIDTH_BASE)
+            .attr('height', this.NODE_HEIGHT_BASE)
+            .each((d) => this.renderNodeTemplate(d.data, d.x, d.y)); // Pass x and y to renderNodeTemplate
+    }
+    renderNodeTemplate(data, x, y) {
+        const viewRef = this.viewContainerRef.createEmbeddedView(this.nodeTemplate(), {
+            $implicit: data, // Pass the node data to the template
+        });
+        // Select node using unique ID
+        const nodeElement = d3.select(this.treeContainer().nativeElement).select(`#node-${data.id}`); // Select by unique ID instead of position
+        const element = nodeElement.node();
+        if (element) {
+            element.appendChild(viewRef.rootNodes[0]);
+        }
+    }
+    handleContextMenuOnOpening(e) {
+        const items = [
+            {
+                text: 'Add New Departpent',
+                break: true,
+                icon: 'fa-light fa-plus'
+            },
+            {
+                text: "Remove",
+                color: 'danger',
+                name: 'remove',
+                icon: 'fa-light fa-trash-can'
+            }
+        ];
+        e.items.push(...items);
+        console.log(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMOrgChartPage, isStandalone: true, selector: "ng-component", providers: [], viewQueries: [{ propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }, { propertyName: "treeContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t('org-chart',{ scope:'organization-management' }) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('settings.restore-defaults',{scope:'platform-management'}) | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-rotate'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-divider></ax-divider>\n        <ax-button-item [text]=\"(t('export') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-file-export'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-h-[calc(100vh-56px)]\" #parent>\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"ax-pan-view-wrapper\"\n        class=\"ax-w-[800px] ax-h-[600px]\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\n    <ax-context-menu [target]=\"'.axp-org-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\">\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border  ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md  ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\">\n    <div class=\"ax-bg-primary-400    ax-p-2 ax-h-full\" [class.ax-rounded-b-none]=\"data.description\">\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-center ax-h-full\">\n        <i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    @if(data.description)\n    {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">{{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".link{stroke:#999;stroke-width:2px}.axp-org-chart-node{overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-footer-container,    axp-layout-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-suffix,    axp-layout-prefix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-toolbar,    axp-layout-title-bar,    axp-layout-breadcrumbs    " }, { kind: "component", type: AXPThemeLayoutHeaderTemplateComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPanViewModule }, { kind: "directive", type: i6.AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        RouterModule,
+                        AXPSimplePageLayout,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutHeaderTemplateComponent,
+                        AXPThemeLayoutActionsComponent,
+                        AXPThemeLayoutPageSecondaryActionsComponent,
+                        AXPThemeLayoutPagePrimaryActionsComponent,
+                        AXMenuModule,
+                        AXButtonModule,
+                        AXDropdownButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXPanViewModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t('org-chart',{ scope:'organization-management' }) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('settings.restore-defaults',{scope:'platform-management'}) | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-rotate'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-divider></ax-divider>\n        <ax-button-item [text]=\"(t('export') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-file-export'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-h-[calc(100vh-56px)]\" #parent>\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"ax-pan-view-wrapper\"\n        class=\"ax-w-[800px] ax-h-[600px]\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\n    <ax-context-menu [target]=\"'.axp-org-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\">\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border  ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md  ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\">\n    <div class=\"ax-bg-primary-400    ax-p-2 ax-h-full\" [class.ax-rounded-b-none]=\"data.description\">\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-center ax-h-full\">\n        <i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    @if(data.description)\n    {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">{{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".link{stroke:#999;stroke-width:2px}.axp-org-chart-node{overflow:visible}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { AXMOrgChartPage };
+//# sourceMappingURL=acorex-modules-organization-managment-org-chart.page-fOxjGb8i.mjs.map

package/fesm2022/acorex-modules-organization-managment-org-chart.page-fOxjGb8i.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-organization-managment-org-chart.page-fOxjGb8i.mjs","sources":["../../../../libs/modules/organization-managment/src/lib/pages/org-chart/org-chart.type.ts","../../../../libs/modules/organization-managment/src/lib/pages/org-chart/org-chart.page.ts","../../../../libs/modules/organization-managment/src/lib/pages/org-chart/org-chart.page.html"],"sourcesContent":["export interface AXMOrganizationNode {\n  id: string;\n  title: string;\n  subtitle?: string;\n  description?: string;\n  icon?: string;\n  children?: AXMOrganizationNode[];\n}\n\nexport const AXM_ORGANIZATION_DATA: AXMOrganizationNode = {\n  id: '1',\n  title: 'CEO',\n  subtitle: 'Chief Executive Officer',\n  description: 'Responsible for the overall success of the',\n  icon: 'fa-user-tie',\n  children: [\n    {\n      id: '2',\n      title: 'CTO',\n      subtitle: 'Chief Technology Officer',\n      //description: 'Leads the technology team and innovation.',\n      icon: 'fa-microchip',\n      children: [\n        {\n          id: '3',\n          title: 'Engineering Director',\n          subtitle: 'Director of Engineering',\n          description: 'Oversees all engineering teams.',\n          icon: 'fa-cogs',\n          children: [\n            {\n              id: '4',\n              title: 'Dev Manager',\n              subtitle: 'Development Manager',\n              description: 'Manages the development team.',\n              icon: 'fa-code',\n              children: [\n                {\n                  id: '5',\n                  title: 'Frontend Team Lead',\n                  subtitle: 'Leads frontend developers',\n                  description: 'Manages the frontend development efforts.',\n                  icon: 'fa-paint-brush',\n                },\n                {\n                  id: '6',\n                  title: 'Backend Team Lead',\n                  subtitle: 'Leads backend developers',\n                  description: 'Manages the backend development efforts.',\n                  icon: 'fa-database',\n                },\n              ],\n            },\n            {\n              id: '7',\n              title: 'QA Manager',\n              subtitle: 'Quality Assurance Manager',\n              description: 'Ensures product quality.',\n              icon: 'fa-check-circle',\n              children: [\n                {\n                  id: '8',\n                  title: 'QA Engineer',\n                  subtitle: 'Quality Assurance Engineer',\n                  description: 'Tests and ensures software quality.',\n                  icon: 'fa-bug',\n                },\n              ],\n            },\n          ],\n        },\n        {\n          id: '9',\n          title: 'Security Manager',\n          subtitle: 'Security & Compliance',\n          description: 'Ensures security policies and compliance.',\n          icon: 'fa-shield-alt',\n        },\n      ],\n    },\n    {\n      id: '10',\n      title: 'CFO',\n      subtitle: 'Chief Financial Officer',\n      description: 'Manages the financial health of the organization.',\n      icon: 'fa-chart-line',\n      children: [\n        {\n          id: '11',\n          title: 'Finance Manager',\n          subtitle: 'Oversees financial operations',\n          description: 'Handles budgets, financial planning, and reporting.',\n          icon: 'fa-money-bill-wave',\n        },\n        {\n          id: '12',\n          title: 'Accounting Manager',\n          subtitle: 'Manages accounting team',\n          description: 'Ensures financial accuracy and compliance.',\n          icon: 'fa-calculator',\n        },\n      ],\n    },\n    {\n      id: '13',\n      title: 'COO',\n      subtitle: 'Chief Operating Officer',\n      description: 'Oversees daily business operations.',\n      icon: 'fa-briefcase',\n      children: [\n        {\n          id: '14',\n          title: 'HR Manager',\n          subtitle: 'Human Resources Manager',\n          description: 'Manages recruitment and employee relations.',\n          icon: 'fa-users',\n        },\n        {\n          id: '15',\n          title: 'Operations Manager',\n          subtitle: 'Leads business operations',\n          description: 'Oversees operational efficiency and process improvements.',\n          icon: 'fa-industry',\n        },\n      ],\n    },\n    {\n      id: '16',\n      title: 'CMO',\n      subtitle: 'Chief Marketing Officer',\n      description: 'Leads marketing and brand strategy.',\n      icon: 'fa-bullhorn',\n      children: [\n        {\n          id: '17',\n          title: 'Marketing Manager',\n          subtitle: 'Oversees marketing team',\n          description: 'Handles branding, campaigns, and customer engagement.',\n          icon: 'fa-ad',\n        },\n        {\n          id: '18',\n          title: 'Sales Director',\n          subtitle: 'Leads sales initiatives',\n          description: 'Drives revenue and sales growth.',\n          icon: 'fa-handshake',\n          children: [\n            {\n              id: '19',\n              title: 'Sales Manager',\n              subtitle: 'Manages sales team',\n              description: 'Oversees sales operations and targets.',\n              icon: 'fa-shopping-cart',\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n","import { AXPanViewModule } from '@acorex/cdk/pan-view';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownButtonModule } from '@acorex/components/dropdown-button';\nimport { AXContextMenuOpeningEvent, AXMenuItem, AXMenuModule } from '@acorex/components/menu';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPSimplePageLayout } from '@acorex/platform/themes/default';\nimport {\n  AXPThemeLayoutActionsComponent,\n  AXPThemeLayoutBlockComponent,\n  AXPThemeLayoutHeaderTemplateComponent,\n  AXPThemeLayoutPagePrimaryActionsComponent,\n  AXPThemeLayoutPageSecondaryActionsComponent,\n} from '@acorex/platform/themes/shared';\nimport { CommonModule } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  signal,\n  TemplateRef,\n  viewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport * as d3 from 'd3';\nimport { AXM_ORGANIZATION_DATA, AXMOrganizationNode } from './org-chart.type';\n\n@Component({\n  templateUrl: './org-chart.page.html',\n  styleUrls: ['./org-chart.page.scss'],\n  imports: [\n    CommonModule,\n    RouterModule,\n    AXPSimplePageLayout,\n    AXPThemeLayoutBlockComponent,\n    AXPThemeLayoutHeaderTemplateComponent,\n    AXPThemeLayoutActionsComponent,\n    AXPThemeLayoutPageSecondaryActionsComponent,\n    AXPThemeLayoutPagePrimaryActionsComponent,\n    AXMenuModule,\n    AXButtonModule,\n    AXDropdownButtonModule,\n    AXTranslationModule,\n    AXDecoratorModule,\n    AXPanViewModule,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [],\n})\nexport class AXMOrgChartPage {\n\n  private nodeTemplate = viewChild.required<TemplateRef<any>>('nodeTemplate');\n  private treeContainer = viewChild.required<ElementRef<HTMLDivElement>>('chart');\n  private viewContainerRef = inject(ViewContainerRef);\n  private data = AXM_ORGANIZATION_DATA;\n\n  // Constants for dynamic sizing\n  private readonly CONTAINER_WIDTH = 2400;\n  private readonly CONTAINER_HEIGHT = 1200;\n  private readonly NODE_WIDTH_BASE = 240;\n  private readonly NODE_HEIGHT_BASE = 120;\n  private readonly NODE_STROKE_COLOR = 'rgba(var(--ax-sys-color-primary-400))';\n  private readonly LINK_STROKE_WIDTH = 1;\n\n  constructor() { }\n\n  #af = afterNextRender(() => {\n    this.createChart(this.treeContainer().nativeElement, this.data);\n  });\n\n  panX = signal(0);\n  panY = signal(0);\n  panZoomLevel = signal(100);\n\n  zoomIn() {\n    this.panZoomLevel.update((prev) => prev + 5);\n  }\n  zoomOut() {\n    this.panZoomLevel.update((prev) => prev - 5);\n  }\n  zoomReset() {\n    this.panX.set(1);\n    this.panY.set(1);\n    this.panX.set(0);\n    this.panY.set(0);\n    this.panZoomLevel.set(100);\n  }\n\n  createChart(el: Element, data: AXMOrganizationNode): void {\n    const svg = d3.select(el).append('svg').attr('width', this.CONTAINER_WIDTH).attr('height', this.CONTAINER_HEIGHT);\n\n    const g = svg.append('g').attr('transform', `translate(${this.NODE_HEIGHT_BASE}, ${this.NODE_HEIGHT_BASE})`);\n\n    // Create a hierarchy from the data\n    const root = d3.hierarchy(data);\n\n    // Create a tree layout\n    const treeLayout = d3.tree<AXMOrganizationNode>().size([this.CONTAINER_WIDTH - 100, this.CONTAINER_HEIGHT / 2]);\n\n    // Generate the tree nodes and links\n    treeLayout(root);\n\n    // Create links (lines with 90-degree angles)\n    const link = g\n      .selectAll('.link')\n      .data(root.links())\n      .enter()\n      .append('path')\n      .attr('class', 'link')\n      .attr('d', (d: any) => {\n        const source = d.source;\n        const target = d.target;\n        return `M${source.x},${source.y}V${(source.y + target.y) / 2}H${target.x}V${target.y}`;\n      })\n      .attr('fill', 'none')\n      .attr('stroke', this.NODE_STROKE_COLOR)\n      .attr('stroke-width', this.LINK_STROKE_WIDTH);\n\n    // Create nodes\n    const node = g\n      .selectAll('.axp-org-chart-node')\n      .data(root.descendants())\n      .enter()\n      .append('foreignObject')\n      .attr('class', 'axp-org-chart-node')\n      .attr('id', (d: any) => `node-${d.data.id}`) // Unique ID for each node\n      .attr('x', (d: any) => d.x - this.NODE_WIDTH_BASE / 2) // Use d.x (D3 node property)\n      .attr('y', (d: any) => d.y - this.NODE_HEIGHT_BASE / 2) // Use d.y (D3 node property)\n      .attr('width', this.NODE_WIDTH_BASE)\n      .attr('height', this.NODE_HEIGHT_BASE)\n      .each((d: any) => this.renderNodeTemplate(d.data, d.x, d.y)); // Pass x and y to renderNodeTemplate\n  }\n\n  private renderNodeTemplate(data: AXMOrganizationNode, x: number, y: number): void {\n    const viewRef = this.viewContainerRef.createEmbeddedView(this.nodeTemplate(), {\n      $implicit: data, // Pass the node data to the template\n    });\n\n    // Select node using unique ID\n    const nodeElement = d3.select(this.treeContainer().nativeElement).select(`#node-${data.id}`); // Select by unique ID instead of position\n\n    const element = nodeElement.node() as HTMLElement | null;\n    if (element) {\n      element.appendChild(viewRef.rootNodes[0]);\n    }\n  }\n\n\n  protected handleContextMenuOnOpening(e: AXContextMenuOpeningEvent) {\n    const items: AXMenuItem[] = [\n      {\n        text: 'Add New Departpent',\n        break: true,\n        icon: 'fa-light fa-plus'\n      },\n      {\n        text: \"Remove\",\n        color: 'danger',\n        name: 'remove',\n        icon: 'fa-light fa-trash-can'\n      }\n    ];\n    e.items.push(...items);\n    console.log(e);\n  }\n}\n","<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t('org-chart',{ scope:'organization-management' }) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('settings.restore-defaults',{scope:'platform-management'}) | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-rotate'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-divider></ax-divider>\n        <ax-button-item [text]=\"(t('export') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-file-export'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-h-[calc(100vh-56px)]\" #parent>\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"ax-pan-view-wrapper\"\n        class=\"ax-w-[800px] ax-h-[600px]\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n\n    <ax-context-menu [target]=\"'.axp-org-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\">\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border  ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md  ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\">\n    <div class=\"ax-bg-primary-400    ax-p-2 ax-h-full\" [class.ax-rounded-b-none]=\"data.description\">\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-center ax-h-full\">\n        <i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n      </div>\n    </div>\n    @if(data.description)\n    {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">{{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template>"],"names":[],"mappings":"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"}

package/fesm2022/acorex-modules-organization-managment.mjs

@@ -502,7 +502,7 @@ function routesFacory() {
             children: [
                 {
                     path: 'chart',
-                    loadComponent: () => import('./acorex-modules-organization-managment-org-chart.page-ubxepOmw.mjs').then((c) => c.AXMOrgChartPage),
+                    loadComponent: () => import('./acorex-modules-organization-managment-org-chart.page-fOxjGb8i.mjs').then((c) => c.AXMOrgChartPage),
                 },
             ],
         },

package/organization-managment/lib/pages/org-chart/org-chart.page.d.ts

@@ -1,8 +1,28 @@
+import { AXContextMenuOpeningEvent } from '@acorex/components/menu';
+import { AXMOrganizationNode } from './org-chart.type';
 import * as i0 from "@angular/core";
 export declare class AXMOrgChartPage {
-    private chart;
-    ngOnInit(): void;
-    private createChart;
+    #private;
+    private nodeTemplate;
+    private treeContainer;
+    private viewContainerRef;
+    private data;
+    private readonly CONTAINER_WIDTH;
+    private readonly CONTAINER_HEIGHT;
+    private readonly NODE_WIDTH_BASE;
+    private readonly NODE_HEIGHT_BASE;
+    private readonly NODE_STROKE_COLOR;
+    private readonly LINK_STROKE_WIDTH;
+    constructor();
+    panX: import("@angular/core").WritableSignal<number>;
+    panY: import("@angular/core").WritableSignal<number>;
+    panZoomLevel: import("@angular/core").WritableSignal<number>;
+    zoomIn(): void;
+    zoomOut(): void;
+    zoomReset(): void;
+    createChart(el: Element, data: AXMOrganizationNode): void;
+    private renderNodeTemplate;
+    protected handleContextMenuOnOpening(e: AXContextMenuOpeningEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXMOrgChartPage, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXMOrgChartPage, "ng-component", never, {}, {}, never, never, true, never>;
 }

package/organization-managment/lib/pages/org-chart/org-chart.type.d.ts

@@ -0,0 +1,9 @@
+export interface AXMOrganizationNode {
+    id: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    icon?: string;
+    children?: AXMOrganizationNode[];
+}
+export declare const AXM_ORGANIZATION_DATA: AXMOrganizationNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/modules",
-  "version": "19.2.3",
+  "version": "19.2.4",
   "peerDependencies": {
     "@angular/common": ">=19.0.0",
     "@angular/core": ">=19.0.0",

package/fesm2022/acorex-modules-organization-managment-org-chart.page-ubxepOmw.mjs

@@ -1,55 +0,0 @@
-import * as i2 from '@acorex/components/button';
-import { AXButtonModule } from '@acorex/components/button';
-import * as i4 from '@acorex/components/decorators';
-import { AXDecoratorModule } from '@acorex/components/decorators';
-import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
-import { AXMenuModule } from '@acorex/components/menu';
-import * as i3 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
-import { AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent } from '@acorex/platform/themes/shared';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-class AXMOrgChartPage {
-    constructor() {
-        this.chart = viewChild('chart');
-    }
-    ngOnInit() {
-        this.createChart();
-    }
-    createChart() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXMOrgChartPage, isStandalone: true, selector: "ng-component", providers: [], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n\n  <axp-layout-header>\n    <axp-layout-title>\n      {{t('org-chart',{ scope:'organization-management' }) | async}}\n    </axp-layout-title>\n\n    <axp-layout-description>\n      Clear and dynamic view of your organization's structure\n    </axp-layout-description>\n\n    <axp-layout-actions>\n\n      <axp-layout-actions-primary>\n\n      </axp-layout-actions-primary>\n\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('settings.restore-defaults',{scope:'platform-management'}) | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-rotate'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-divider></ax-divider>\n        <ax-button-item [text]=\"(t('export') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-file-export'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n\n    </axp-layout-actions>\n  </axp-layout-header>\n\n\n\n\n  <axp-layout-content>\n    Hi\n    <div class=\"chart\" #chart></div>\n    <!-- <ax-context-menu\n  (onItemClick)=\"handleContextMenuOnItemClick($event)\"\n  [items]=\"menuItem()\"\n  [target]=\"'.ctx'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleOpenContext($event)\"\n>\n</ax-context-menu> -->\n  </axp-layout-content>\n\n</axp-layout-simple-page>", styles: [".chart{display:flex;justify-content:center;align-items:center}.link{stroke-width:2px;stroke:#ccc}.node rect{rx:6;ry:6;stroke-width:2px}.node text{font:14px sans-serif;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: 
-                //
-                AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-footer-container,    axp-layout-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-suffix,    axp-layout-prefix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-toolbar,    axp-layout-title-bar,    axp-layout-breadcrumbs    " }, { kind: "component", type: AXPThemeLayoutHeaderTemplateComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "ngmodule", type: 
-                //
-                AXMenuModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, decorators: [{
-            type: Component,
-            args: [{ imports: [
-                        CommonModule,
-                        RouterModule,
-                        //
-                        AXPSimplePageLayout,
-                        AXPThemeLayoutBlockComponent,
-                        AXPThemeLayoutHeaderTemplateComponent,
-                        AXPThemeLayoutActionsComponent,
-                        AXPThemeLayoutPageSecondaryActionsComponent,
-                        AXPThemeLayoutPagePrimaryActionsComponent,
-                        //
-                        AXMenuModule,
-                        AXButtonModule,
-                        AXDropdownButtonModule,
-                        AXTranslationModule,
-                        AXDecoratorModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<axp-layout-simple-page *translate=\"let t\">\n\n  <axp-layout-header>\n    <axp-layout-title>\n      {{t('org-chart',{ scope:'organization-management' }) | async}}\n    </axp-layout-title>\n\n    <axp-layout-description>\n      Clear and dynamic view of your organization's structure\n    </axp-layout-description>\n\n    <axp-layout-actions>\n\n      <axp-layout-actions-primary>\n\n      </axp-layout-actions-primary>\n\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('settings.restore-defaults',{scope:'platform-management'}) | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-rotate'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-divider></ax-divider>\n        <ax-button-item [text]=\"(t('export') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-file-export'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n\n    </axp-layout-actions>\n  </axp-layout-header>\n\n\n\n\n  <axp-layout-content>\n    Hi\n    <div class=\"chart\" #chart></div>\n    <!-- <ax-context-menu\n  (onItemClick)=\"handleContextMenuOnItemClick($event)\"\n  [items]=\"menuItem()\"\n  [target]=\"'.ctx'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleOpenContext($event)\"\n>\n</ax-context-menu> -->\n  </axp-layout-content>\n\n</axp-layout-simple-page>", styles: [".chart{display:flex;justify-content:center;align-items:center}.link{stroke-width:2px;stroke:#ccc}.node rect{rx:6;ry:6;stroke-width:2px}.node text{font:14px sans-serif;pointer-events:none}\n"] }]
-        }] });
-
-export { AXMOrgChartPage };
-//# sourceMappingURL=acorex-modules-organization-managment-org-chart.page-ubxepOmw.mjs.map

package/fesm2022/acorex-modules-organization-managment-org-chart.page-ubxepOmw.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"acorex-modules-organization-managment-org-chart.page-ubxepOmw.mjs","sources":["../../../../libs/modules/organization-managment/src/lib/pages/org-chart/org-chart.page.ts","../../../../libs/modules/organization-managment/src/lib/pages/org-chart/org-chart.page.html"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownButtonModule } from '@acorex/components/dropdown-button';\nimport { AXMenuModule } from '@acorex/components/menu';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPSimplePageLayout } from '@acorex/platform/themes/default';\nimport {\n  AXPThemeLayoutActionsComponent,\n  AXPThemeLayoutBlockComponent,\n  AXPThemeLayoutHeaderTemplateComponent,\n  AXPThemeLayoutPagePrimaryActionsComponent,\n  AXPThemeLayoutPageSecondaryActionsComponent,\n} from '@acorex/platform/themes/shared';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport * as d3 from 'd3';\n\n\n@Component({\n  templateUrl: './org-chart.page.html',\n  styleUrls: ['./org-chart.page.scss'],\n  imports: [\n    CommonModule,\n    RouterModule,\n    //\n    AXPSimplePageLayout,\n    AXPThemeLayoutBlockComponent,\n    AXPThemeLayoutHeaderTemplateComponent,\n    AXPThemeLayoutActionsComponent,\n    AXPThemeLayoutPageSecondaryActionsComponent,\n    AXPThemeLayoutPagePrimaryActionsComponent,\n    //\n    AXMenuModule,\n    AXButtonModule,\n    AXDropdownButtonModule,\n    AXTranslationModule,\n    AXDecoratorModule\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [],\n})\nexport class AXMOrgChartPage {\n\n  private chart = viewChild<HTMLDivElement>('chart');\n\n  ngOnInit(): void {\n    this.createChart();\n  }\n\n  private createChart(): void {\n\n  }\n\n}\n","<axp-layout-simple-page *translate=\"let t\">\n\n  <axp-layout-header>\n    <axp-layout-title>\n      {{t('org-chart',{ scope:'organization-management' }) | async}}\n    </axp-layout-title>\n\n    <axp-layout-description>\n      Clear and dynamic view of your organization's structure\n    </axp-layout-description>\n\n    <axp-layout-actions>\n\n      <axp-layout-actions-primary>\n\n      </axp-layout-actions-primary>\n\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('settings.restore-defaults',{scope:'platform-management'}) | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-rotate'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n        <ax-divider></ax-divider>\n        <ax-button-item [text]=\"(t('export') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-file-export'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n\n    </axp-layout-actions>\n  </axp-layout-header>\n\n\n\n\n  <axp-layout-content>\n    Hi\n    <div class=\"chart\" #chart></div>\n    <!-- <ax-context-menu\n  (onItemClick)=\"handleContextMenuOnItemClick($event)\"\n  [items]=\"menuItem()\"\n  [target]=\"'.ctx'\"\n  [orientation]=\"'vertical'\"\n  [closeOn]=\"'leave'\"\n  (onOpening)=\"handleOpenContext($event)\"\n>\n</ax-context-menu> -->\n  </axp-layout-content>\n\n</axp-layout-simple-page>"],"names":[],"mappings":"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"}