@acorex/modules 19.2.6 → 19.2.8

package/fesm2022/acorex-modules-organization-management-org-chart.page-e-N7Ql80.mjs

@@ -0,0 +1,890 @@
+import { AXPanViewDirective } from '@acorex/cdk/pan-view';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i6 from '@acorex/components/breadcrumbs';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+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 { AXLoadingModule } from '@acorex/components/loading';
+import * as i2 from '@acorex/components/menu';
+import { AXContextMenuComponent, AXMenuModule } from '@acorex/components/menu';
+import * as i4 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
+import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutFooterComponent } from '@acorex/platform/themes/shared';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, signal, viewChild, NgZone, ViewContainerRef, afterNextRender, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import get from 'lodash-es/get';
+import { AXMOrganizationManagementDepartmentEntityService, AXMOrganizationManagementDivisionEntityService, AXMOrganizationManagementBranchEntityService, AXMOrganizationManagementEmployeeEntityService, AXMOrganizationManagementPositionEntityService, AXMOrganizationManagementChartEntityService, AXMOrganizationNodeType, AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS, RootConfig, AXMOrganizationNodeTypeCategory } from './acorex-modules-organization-management.mjs';
+import { A as AXMOrgChartConfigService } from './acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import { AXPExportService, AXPDataGenerator } from '@acorex/platform/common';
+import { AXPSessionService } from '@acorex/platform/auth';
+import { cloneDeep } from 'lodash-es';
+import { AXPopupService } from '@acorex/components/popup';
+import { AXPRegionalService } from '@acorex/modules/platform-management';
+import { applyFilterArray } from '@acorex/platform/core';
+import set from 'lodash-es/set';
+
+/**
+ * Service for printing organization charts.
+ */
+class AXMOrgChartPrintService {
+    constructor() {
+        this.loadingDialog = inject(AXLoadingDialogService);
+        this.exportService = inject(AXPExportService);
+        this.translationService = inject(AXTranslationService);
+    }
+    /**
+     * Prints the organization chart.
+     * @param element - The HTMLElement representing the chart to be printed.
+     * @returns A promise that resolves when the print process is complete.
+     */
+    async printChart(element) {
+        const d = this.loadingDialog.show({
+            title: 'Printing Organization Chart...',
+            mode: 'determinate',
+            progressColor: 'primary',
+            progressValue: 0,
+            status: '0/10',
+            text: 'Initializing print process...',
+            buttons: [
+                {
+                    text: 'Cancel',
+                    color: 'danger',
+                    onClick: () => {
+                        d.close();
+                    },
+                },
+            ],
+        });
+        try {
+            await this.HandleStep(d, await this.translateStatements('preparing-document'), 10, '1/10');
+            const chartElement = element;
+            const { originalStyles, modifiedStyles } = this.expandChart(chartElement);
+            await this.HandleStep(d, await this.translateStatements('rendering-chart-image'), 25, '2.5/10');
+            const canvasBlob = await this.exportService.generateBlobFromElement(chartElement, {
+                popup: true,
+                filter: (node) => {
+                    if (node instanceof Element && node.classList.contains('--toggle')) {
+                        return false;
+                    }
+                    return true;
+                },
+                bgcolor: 'transparent',
+                scale: 2,
+                quality: 1,
+                height: Number.parseInt(modifiedStyles.modifiedHeight),
+                width: Number.parseInt(modifiedStyles.modifiedWidth),
+            });
+            await this.HandleStep(d, await this.translateStatements('finalizing-image-processing'), 50, '5/10');
+            this.restoreChartStyles(chartElement, originalStyles);
+            await this.HandleStep(d, await this.translateStatements('downloading-image'), 75, '7.5/10');
+            this.exportService.download(canvasBlob, 'org-chart.png');
+            await this.HandleStep(d, await this.translateStatements('process-complete'), 100, '10/10');
+            setTimeout(() => d.close(), 1500);
+        }
+        catch (err) {
+            console.error('Error capturing chart:', err);
+            await this.HandleStep(d, await this.translateStatements('failed-to-generate-chart-image'), 100, 'Error', 'danger');
+            d.close();
+        }
+    }
+    /**
+     * Expands the chart temporarily to capture the full view.
+     * @param chartElement - The HTMLElement representing the chart.
+     * @returns An object containing the original and modified styles of the chart.
+     */
+    expandChart(chartElement) {
+        const originalStyles = {
+            originalOverflow: chartElement.style.overflow,
+            originalWidth: chartElement.style.width,
+            originalHeight: chartElement.style.height,
+        };
+        const modifiedStyles = {
+            modifiedOverflow: 'visible',
+            modifiedWidth: `${chartElement.scrollWidth}px`,
+            modifiedHeight: `${chartElement.scrollHeight}px`,
+        };
+        chartElement.style.overflow = modifiedStyles.modifiedOverflow;
+        chartElement.style.width = modifiedStyles.modifiedWidth;
+        chartElement.style.height = modifiedStyles.modifiedHeight;
+        return { originalStyles, modifiedStyles };
+    }
+    /**
+     * Restores chart styles after capturing.
+     * @param chartElement - The HTMLElement representing the chart.
+     * @param originalStyles - The original styles to be restored.
+     */
+    restoreChartStyles(chartElement, originalStyles) {
+        chartElement.style.overflow = originalStyles.originalOverflow;
+        chartElement.style.width = originalStyles.originalWidth;
+        chartElement.style.height = originalStyles.originalHeight;
+    }
+    /**
+     * Handles updating the progress dialog step.
+     * @param dialog - The dialog reference.
+     * @param text - The text to display in the dialog.
+     * @param progress - The progress value to set.
+     * @param status - The status to display.
+     * @param color - The color of the progress bar.
+     * @returns A promise that resolves when the dialog is updated.
+     */
+    async HandleStep(dialog, text, progress, status, color = 'primary') {
+        return new Promise((resolve) => {
+            dialog.setProgressColor(color);
+            dialog.setProgressText(text);
+            dialog.setProgressValue(progress);
+            dialog.setProgressStatus(status);
+            resolve();
+        });
+    }
+    /**
+     * Translates a statement using the translation service.
+     * @param key - The translation key.
+     * @returns A promise that resolves to the translated string.
+     */
+    async translateStatements(key) {
+        return (await this.translationService.translateAsync(key, { scope: 'organization-management' })) + '...';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService, decorators: [{
+            type: Injectable
+        }] });
+
+class AXMOrgChartService {
+    constructor() {
+        this.departmentService = inject(AXMOrganizationManagementDepartmentEntityService);
+        this.divisionService = inject(AXMOrganizationManagementDivisionEntityService);
+        this.branchService = inject(AXMOrganizationManagementBranchEntityService);
+        this.employmentService = inject(AXMOrganizationManagementEmployeeEntityService);
+        this.positionService = inject(AXMOrganizationManagementPositionEntityService);
+        this.chartService = inject(AXMOrganizationManagementChartEntityService);
+        this.sessionService = inject(AXPSessionService);
+        this.configService = inject(AXMOrgChartConfigService);
+        this.popupService = inject(AXPopupService);
+        this.layoutService = inject(AXPLayoutThemeService);
+        this.regionalService = inject(AXPRegionalService);
+        this._rootNode = signal({ id: AXPDataGenerator.uuid(), title: "Company" });
+        this.rootNode = this._rootNode.asReadonly();
+        // The clipboard holds the node being cut or copied.
+        this.clipboard = signal(null);
+    }
+    //#region Load/Save
+    async load() {
+        const first = (await this.chartService.query({
+            skip: 0,
+            take: 1,
+            sort: [
+                { field: 'version', dir: 'desc' }
+            ]
+        })).items[0];
+        //
+        if (first) {
+            const data = first.data;
+            this._rootNode.set(data);
+        }
+        else {
+            await this.createNew();
+            await this.load();
+        }
+    }
+    async createNew() {
+        const tenant = this.sessionService.tenant;
+        const record = {
+            id: AXPDataGenerator.uuid(),
+            createAt: new Date(),
+            updateAt: new Date(),
+            version: '0.0.0',
+            data: {
+                id: AXPDataGenerator.uuid(),
+                title: tenant.name,
+                type: AXMOrganizationNodeType.Company,
+                entity: {
+                    id: tenant.id,
+                    source: 'tenant',
+                },
+                children: []
+            },
+        };
+        await this.chartService.insertOne({ data: record.data, version: record.version });
+    }
+    async save() {
+        const first = (await this.chartService.query()).items[0];
+        await this.chartService.updateOne(first.id, { version: first.version, data: this._rootNode(), updateAt: new Date() });
+    }
+    //#endregion
+    //#region Context Menu
+    async getAllowedAddMenuItems(node) {
+        const allowedTypes = await this.getAllowedChildCategoriesForParent(node);
+        const allowedMenuItems = [];
+        // Group items by category for visual breaks.
+        const groupedMenuItems = {
+            Company: [],
+            Location: [],
+            BusinessUnit: [],
+            Role: [],
+            Employee: []
+        };
+        Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).forEach(([entitySource, config]) => {
+            if (allowedTypes.includes(config.type)) {
+                groupedMenuItems[config.category].push({
+                    name: 'add',
+                    text: `${config.title}`,
+                    icon: config.icon,
+                    data: {
+                        node,
+                        config,
+                        source: entitySource
+                    },
+                });
+            }
+        });
+        Object.values(groupedMenuItems).forEach(group => {
+            if (group.length > 0) {
+                allowedMenuItems.push(...group);
+                group[group.length - 1].break = true;
+            }
+        });
+        if (allowedMenuItems.length > 0) {
+            allowedMenuItems[allowedMenuItems.length - 1].break = false;
+        }
+        return allowedMenuItems;
+    }
+    //#endregion
+    //#region Check Permission 
+    async getAllowedChildCategoriesForParent(parent) {
+        await this.configService.load();
+        const types = this.configService.types;
+        const currentType = parent.type;
+        if (!parent || !currentType) {
+            return [];
+        }
+        const allowedTypes = new Set();
+        Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).forEach(([entitySource, config]) => {
+            if (this.configService.isAllowed(currentType, config.type) && types.includes(config.type)) {
+                allowedTypes.add(config.type);
+            }
+        });
+        return Array.from(allowedTypes);
+    }
+    //#endregion 
+    //#region Remove/Cut/Copy/Past
+    async removeNode(id) {
+        this._rootNode.update((node) => this.removeNodeRecursively(node, id));
+        await this.save();
+    }
+    removeNodeRecursively(node, id) {
+        // If the node itself is the one to be deleted, return null
+        if (node.id === id) {
+            return null;
+        }
+        // Otherwise, recursively check children
+        if (node.children) {
+            node.children = node.children.filter(child => child.id !== id)
+                .map(child => {
+                return { ...child, children: this.removeNodeRecursively(child, id)?.children };
+            });
+        }
+        return node;
+    }
+    isPasteAvailable() {
+        return this.clipboard() != null && this.clipboard()?.node != null;
+    }
+    async allowPaste(target) {
+        if (!this.isPasteAvailable()) {
+            return false;
+        }
+        const allowedTypes = await this.getAllowedChildCategoriesForParent(target);
+        // Compare using the clipboard node's category.
+        return allowedTypes.includes(this.clipboard()?.node.type);
+    }
+    /**
+    * Cuts the node with the given id.
+    * The node is removed from the tree and stored in the clipboard.
+    * Cutting the root node is not allowed.
+    */
+    async cutNode(id) {
+        const tree = this._rootNode();
+        if (tree.id === id) {
+            throw new Error("Cannot cut the root node.");
+        }
+        const result = this.findNodeAndParent(tree, id);
+        if (!result) {
+            throw new Error("Node not found.");
+        }
+        // Set the clipboard signal with mode 'cut'
+        this.clipboard.set({ mode: 'cut', node: result.node });
+        // Remove the node from the tree.
+        const newTree = this.removeNodeRecursively(tree, id);
+        this._rootNode.set(newTree);
+        await this.save();
+    }
+    /**
+   * Copies the node with the given id.
+   * A deep clone of the node is stored in the clipboard.
+   */
+    copyNode(id) {
+        const tree = this._rootNode();
+        const result = this.findNodeAndParent(tree, id);
+        if (!result) {
+            throw new Error("Node not found.");
+        }
+        // Use lodash's cloneDeep to create a deep clone.
+        const copiedNode = cloneDeep(result.node);
+        this.clipboard.set({ mode: 'copy', node: copiedNode });
+    }
+    /**
+   * Pastes the node in the clipboard as a child of the node with the given parentId.
+   * For a cut, the node is moved; for a copy, new IDs are generated so the pasted node is unique.
+   */
+    async pasteNode(parentId) {
+        const clipboardValue = this.clipboard();
+        if (!clipboardValue) {
+            throw new Error("Clipboard is empty.");
+        }
+        const tree = this._rootNode();
+        const parentResult = this.findNodeAndParent(tree, parentId);
+        if (!parentResult) {
+            throw new Error("Parent node not found.");
+        }
+        let nodeToPaste;
+        if (clipboardValue.mode === 'cut') {
+            nodeToPaste = clipboardValue.node;
+            // Clear the clipboard after pasting.
+            this.clipboard.set(null);
+        }
+        else {
+            nodeToPaste = this.cloneNodeWithNewIds(clipboardValue.node);
+        }
+        const newTree = this.insertNodeRecursively(tree, parentId, nodeToPaste);
+        this._rootNode.set(newTree);
+        await this.save();
+    }
+    /**
+  * Recursively searches the tree for the node with the given id,
+  * returning both the node and its parent.
+  */
+    findNodeAndParent(node, id, parent = null) {
+        if (node.id === id) {
+            return { node, parent };
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                const result = this.findNodeAndParent(child, id, node);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Clones a node recursively and generates new IDs for the node and its children.
+     */
+    cloneNodeWithNewIds(node) {
+        // First, clone the node using lodash.
+        const newNode = cloneDeep(node);
+        // Then, assign new IDs recursively.
+        this.assignNewIds(newNode);
+        return newNode;
+    }
+    /**
+     * Recursively assigns new unique IDs to the given node and its children.
+     */
+    assignNewIds(node) {
+        node.id = AXPDataGenerator.uuid();
+        if (node.children) {
+            node.children.forEach(child => this.assignNewIds(child));
+        }
+    }
+    /**
+     * Recursively traverses the tree to insert newNode as a child of the node with parentId.
+     */
+    insertNodeRecursively(node, parentId, newNode) {
+        if (node.id === parentId) {
+            const newChildren = node.children ? [...node.children, newNode] : [newNode];
+            return { ...node, children: newChildren };
+        }
+        if (node.children) {
+            return {
+                ...node,
+                children: node.children.map(child => this.insertNodeRecursively(child, parentId, newNode))
+            };
+        }
+        return node;
+    }
+    //#endregion
+    //#region Add Node
+    async addNode(data) {
+        this.layoutService.setNavigationLoading(true);
+        const comp = (await import('./acorex-modules-organization-management-add-item.component-DsWqdz8M.mjs')).AddItemComponent;
+        const node = get(data, 'node');
+        const type = get(data, 'config.type');
+        const icon = get(data, 'config.icon');
+        const source = get(data, 'source');
+        let query;
+        const countrySource = async (request) => {
+            let list = await this.regionalService.getCountries();
+            if (request.filter) {
+                list = applyFilterArray(list, [request.filter]);
+            }
+            const items = list.map((c) => ({
+                id: c.code,
+                title: c.title
+            }));
+            return {
+                items,
+                total: items.length
+            };
+        };
+        let valueField = 'id';
+        let titleField = 'title';
+        let subtitleField = null;
+        let descriptionField = 'description';
+        switch (type) {
+            case AXMOrganizationNodeType.Country:
+                query = countrySource;
+                break;
+            case AXMOrganizationNodeType.Department:
+                query = this.departmentService.query.bind(this.departmentService);
+                break;
+            case AXMOrganizationNodeType.Division:
+                query = this.divisionService.query.bind(this.divisionService);
+                break;
+            case AXMOrganizationNodeType.Branch:
+                query = this.branchService.query.bind(this.branchService);
+                break;
+            case AXMOrganizationNodeType.Position:
+                query = this.positionService.query.bind(this.positionService);
+                break;
+            case AXMOrganizationNodeType.Employee:
+                query = this.employmentService.query.bind(this.employmentService);
+                break;
+            default:
+                break;
+        }
+        const result = await this.popupService.open(comp, {
+            title: `Add ${get(data, 'config.title')}`,
+            size: 'md',
+            data: {
+                config: {
+                    valueField,
+                    titleField,
+                    subtitleField,
+                    descriptionField,
+                    query: query
+                }
+            }
+        });
+        const newNode = {
+            id: AXPDataGenerator.uuid(),
+            title: result.data.title,
+            description: result.data.description,
+            subtitle: result.data.subtitle,
+            type: type,
+            parentId: node.id,
+            icon,
+            entity: {
+                id: result.data.id,
+                source: source
+            }
+        };
+        const tree = this._rootNode();
+        const newTree = this.insertNodeRecursively(tree, node.id, newNode);
+        this._rootNode.set(newTree);
+        await this.save();
+        this.layoutService.setNavigationLoading(false);
+        return result.data != null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Component for displaying and interacting with an organizational chart.
+ */
+class AXMOrgChartPage {
+    constructor() {
+        this.layout = inject(AXPLayoutThemeService);
+        this.rootConfig = RootConfig;
+        this.nodeTemplate = viewChild.required('nodeTemplate');
+        this.treeContainer = viewChild.required('chart');
+        this.parent = viewChild.required('parent');
+        this.contextMenu = viewChild(AXContextMenuComponent);
+        this.panView = viewChild(AXPanViewDirective);
+        this.ngzone = inject(NgZone);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.chartPrintService = inject(AXMOrgChartPrintService);
+        this.chartService = inject(AXMOrgChartService);
+        this.NODE_STROKE_COLOR = 'rgba(var(--ax-sys-color-primary-400))';
+        this.LINK_STROKE_WIDTH = 1;
+        this.NodeTypes = AXMOrganizationNodeTypeCategory;
+        this.isFullscreen = signal(false);
+        this.panX = signal(0);
+        this.panY = signal(0);
+        this.panZoomLevel = signal(100);
+        this.isChartRendered = false;
+        this.nodeTypes = Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).map(c => ({
+            title: c[1].title,
+            color: c[1].color,
+            icon: c[1].icon,
+            category: c[1].category
+        }));
+        this.#initialize = afterNextRender(async () => {
+            this.d3 = await import('d3');
+            await this.chartService.load();
+            await this.refreshChart();
+        });
+    }
+    #initialize;
+    /**
+     * Zooms in the chart.
+     */
+    zoomIn() {
+        this.panZoomLevel.update((prev) => prev + 5);
+    }
+    /**
+     * Zooms out the chart.
+     */
+    zoomOut() {
+        this.panZoomLevel.update((prev) => prev - 5);
+    }
+    /**
+     * Resets the zoom level and pan position of the chart.
+     */
+    zoomReset() {
+        this.panView()?.resetPosition();
+    }
+    /**
+     * Toggles fullscreen mode for the chart.
+     */
+    toggleFullscreen() {
+        if (this.isFullscreen()) {
+            document.exitFullscreen();
+            this.isFullscreen.set(false);
+        }
+        else {
+            this.parent().nativeElement.requestFullscreen();
+            this.isFullscreen.set(true);
+        }
+        document.querySelector(`foreignObject[node="node-${this.chartService.rootNode().id}"]`)?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'center',
+        });
+    }
+    /**
+     * Calculates the maximum depth of the organizational chart.
+     * @param node - The root node of the chart.
+     * @returns The maximum depth of the chart.
+     */
+    calculateMaxDepth(node) {
+        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
+            return 1;
+        }
+        return 1 + Math.max(...node.children.map((child) => this.calculateMaxDepth(child)));
+    }
+    /**
+     * Calculates the maximum breadth of the organizational chart.
+     * @param node - The root node of the chart.
+     * @returns The maximum breadth of the chart.
+     */
+    calculateMaxBreadth(node) {
+        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
+            return 1;
+        }
+        return node.children.reduce((acc, child) => acc + this.calculateMaxBreadth(child), 0);
+    }
+    /**
+     * Creates and renders the organizational chart.
+     * @param el - The container element for the chart.
+     * @param data - The root node of the organizational chart.
+     */
+    createChart(el, data) {
+        if (!this.d3) {
+            return;
+        }
+        this.ngzone.runOutsideAngular(() => {
+            const NODE_WIDTH_BASE = 260;
+            const NODE_HEIGHT_BASE = 180;
+            const HORIZONTAL_SPACING = 20;
+            const VERTICAL_SPACING = 40;
+            this.clearChart(el);
+            const newSvg = this.d3.select(el).append('svg');
+            const root = this.d3.hierarchy(data);
+            root.descendants().forEach((node) => {
+                if (node.data.isExpanded === false) {
+                    node.children = undefined;
+                }
+            });
+            const treeLayout = this.d3
+                .tree()
+                .nodeSize([NODE_WIDTH_BASE + HORIZONTAL_SPACING, NODE_HEIGHT_BASE + VERTICAL_SPACING]);
+            treeLayout(root);
+            let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+            root.descendants().forEach((d) => {
+                if (d.x < minX)
+                    minX = d.x;
+                if (d.x > maxX)
+                    maxX = d.x;
+                if (d.y < minY)
+                    minY = d.y;
+                if (d.y > maxY)
+                    maxY = d.y;
+            });
+            const CONTAINER_WIDTH = maxX - minX + NODE_WIDTH_BASE + 2 * HORIZONTAL_SPACING;
+            const CONTAINER_HEIGHT = maxY - minY + NODE_HEIGHT_BASE + 2 * VERTICAL_SPACING;
+            newSvg.attr('width', CONTAINER_WIDTH).attr('height', CONTAINER_HEIGHT);
+            const g = newSvg
+                .append('g')
+                .attr('transform', `translate(${-minX + NODE_WIDTH_BASE / 2 + HORIZONTAL_SPACING / 2}, ${-minY + NODE_HEIGHT_BASE / 2 + VERTICAL_SPACING / 2})`);
+            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 - 10}`;
+            })
+                .attr('fill', 'none')
+                .attr('stroke', this.NODE_STROKE_COLOR)
+                .attr('stroke-width', this.LINK_STROKE_WIDTH)
+                .attr('from', (d) => `node-${d.source.data.id}`)
+                .attr('to', (d) => `node-${d.target.data.id}`);
+            const node = g
+                .selectAll('.axp-chart-node')
+                .data(root.descendants())
+                .enter()
+                .append('foreignObject')
+                .attr('class', 'axp-chart-node')
+                .attr('node', (d) => `node-${d.data.id}`)
+                .attr('x', (d) => d.x - NODE_WIDTH_BASE / 2)
+                .attr('y', (d) => d.y - NODE_HEIGHT_BASE / 2 + 10)
+                .attr('width', NODE_WIDTH_BASE)
+                .attr('height', NODE_HEIGHT_BASE)
+                .each((d) => this.renderNodeTemplate(d.data, d.x, d.y));
+            this.contextMenu()?.refresh();
+        });
+        if (!this.isChartRendered) {
+            // document.querySelector(`foreignObject[node="node-${data.id}"] .--heading-container`)?.scrollIntoView({
+            //   behavior: 'smooth',
+            //   block: 'center',
+            //   inline: 'center',
+            // });
+            this.isChartRendered = true;
+            this.panView()?.resetPosition();
+        }
+    }
+    /**
+     * Renders the node template for a given organizational node.
+     * @param data - The node data.
+     * @param x - The x-coordinate of the node.
+     * @param y - The y-coordinate of the node.
+     */
+    renderNodeTemplate(data, x, y) {
+        // Find the key that matches the node type
+        const entityKey = Object.keys(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).find(key => {
+            const keyName = key.split('.').pop(); // Get the last part after splitting by '.'
+            return keyName === data.type; // Compare with data.type
+        });
+        if (entityKey) {
+            const categoryMapping = AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS[entityKey];
+            // Add the category to the data object
+            set(data, 'category', categoryMapping.category);
+        }
+        const viewRef = this.viewContainerRef.createEmbeddedView(this.nodeTemplate(), {
+            $implicit: data,
+        });
+        const nodeElement = this.d3.select(this.treeContainer().nativeElement).select(`[node="node-${data.id}"]`);
+        const element = nodeElement.node();
+        if (element) {
+            element.appendChild(viewRef.rootNodes[0]);
+        }
+    }
+    /**
+     * Toggles the expansion state of a node.
+     * @param data - The node data.
+     * @param el - The HTML element representing the node.
+     */
+    toggleNode(data, el) {
+        data.isExpanded = data.isExpanded === undefined ? false : !data.isExpanded;
+        this.createChart(this.treeContainer().nativeElement, this.chartService.rootNode());
+        // el.scrollIntoView({
+        //   behavior: 'smooth',
+        // });
+    }
+    /**
+     * Clears the chart from the container element.
+     * @param el - The container element.
+     */
+    clearChart(el) {
+        if (this.d3) {
+            this.d3.select(el).select('svg').remove();
+            this.viewContainerRef.clear();
+        }
+    }
+    async refreshChart() {
+        if (this.d3) {
+            this.createChart(this.treeContainer().nativeElement, this.chartService.rootNode());
+        }
+    }
+    //#region Context Menu
+    async handleContextMenuOnOpening(e) {
+        const node = get(e.targetElement, '__data__.data');
+        const allowedAddItems = await this.chartService.getAllowedAddMenuItems(node);
+        const allowDelete = node.type != AXMOrganizationNodeType.Company;
+        const isPasteAvailable = await this.chartService.isPasteAvailable();
+        const allowPaste = await this.chartService.allowPaste(node);
+        //
+        if (allowedAddItems.length) {
+            e.items.push({
+                text: 'Add New',
+                icon: 'fa-light fa-plus',
+                items: allowedAddItems,
+                break: allowDelete,
+            });
+        }
+        //
+        if (allowDelete) {
+            e.items.push({
+                name: 'cut',
+                text: 'Cut',
+                icon: 'fa-light fa-cut',
+                data: node
+            });
+            e.items.push({
+                name: 'copy',
+                text: 'Copy',
+                icon: 'fa-light fa-copy',
+                data: node,
+                break: !isPasteAvailable
+            });
+        }
+        if (isPasteAvailable) {
+            e.items.push({
+                name: 'paste',
+                text: 'Paste',
+                icon: 'fa-light fa-paste',
+                data: node,
+                break: true,
+                disabled: !allowPaste
+            });
+        }
+        //
+        if (allowDelete) {
+            e.items.push({
+                name: 'remove',
+                text: 'Remove',
+                color: 'danger',
+                icon: 'fa-light fa-trash-can',
+                data: node,
+            });
+        }
+        //
+        if (e.items.length == 0) {
+            e.canceled = true;
+        }
+    }
+    async handleContextMenuItemClick(e) {
+        //
+        if (e.item.name == 'add') {
+            if (await this.chartService.addNode(e.item.data)) {
+                await this.refreshChart();
+            }
+        }
+        //
+        else if (e.item.name == 'remove') {
+            await this.chartService.removeNode(e.item.data.id);
+            await this.refreshChart();
+        }
+        //
+        else if (e.item.name == 'copy') {
+            await this.chartService.copyNode(e.item.data.id);
+        }
+        else if (e.item.name == 'cut') {
+            await this.chartService.cutNode(e.item.data.id);
+            await this.refreshChart();
+        }
+        else if (e.item.name == 'paste') {
+            await this.chartService.pasteNode(e.item.data.id);
+            await this.refreshChart();
+        }
+    }
+    //#endregion
+    /**
+     * Prints the organizational chart.
+     */
+    async printChart() {
+        let [panX, panY, panZoomLevel] = [this.panX(), this.panY(), this.panZoomLevel()];
+        this.panX.set(0), this.panY.set(0), this.panZoomLevel.set(100);
+        await this.chartPrintService.printChart(this.treeContainer().nativeElement);
+        this.panX.set(panX), this.panY.set(panY), this.panZoomLevel.set(panZoomLevel);
+    }
+    /**
+     * Gets the node colors based on the provided color.
+     * @param color - The color to use for the node.
+     * @returns An object containing the node's background, text, and border colors.
+     */
+    getNodeColors(color) {
+        if (color.includes('surface')) {
+            return {
+                '--node-bg-color': `var(--ax-sys-color-${color})`,
+                '--node-text-color': `var(--ax-sys-color-on-${color})`,
+                '--node-border-color': `var(--ax-sys-color-border-${color})`,
+            };
+        }
+        return {
+            '--node-bg-color': `var(--ax-sys-color-${color}-surface)`,
+            '--node-text-color': `var(--ax-sys-color-on-${color}-surface)`,
+            '--node-border-color': `var(--ax-sys-color-border-${color}-surface)`,
+        };
+    }
+    updateVar(oldValue, newValue) {
+        oldValue.cat = newValue;
+    }
+    ngOnDestroy() {
+        this.clearChart(this.treeContainer().nativeElement);
+    }
+    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: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], viewQueries: [{ propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }, { propertyName: "treeContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: AXContextMenuComponent, descendants: true, isSignal: true }, { propertyName: "panView", first: true, predicate: AXPanViewDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.chart.title) | 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('print') | async)!\" (onClick)=\"printChart()\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{(t('home') | async)}} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Organization </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" [fitContent]=\"true\"\n        wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <ax-context-menu [target]=\"'.axp-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n      </ax-context-menu>\n    </div>\n  </axp-layout-content>\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'};\n        @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\">\n          </div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}}\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"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        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div>\n    @switch (data.category) {\n    <!-- Company -->\n    @case (NodeTypes.Company) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'primary' }\"></ng-container>\n    }\n    <!-- Location -->\n    @case (NodeTypes.Location) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent1' }\"></ng-container>\n    }\n    <!-- BusinessUnit -->\n    @case (NodeTypes.BusinessUnit) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent2' }\"></ng-container>\n    }\n    <!-- Role -->\n    @case (NodeTypes.Role) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent3' }\"></ng-container>\n    }\n    <!-- Employee -->\n    @case (NodeTypes.Employee) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'surface' }\"></ng-container>\n    }\n    }\n  </div>\n</ng-template>\n\n<!----------------------------------- General Node Template ----------------------------------->\n<ng-template #generalTemplate let-data=\"data\" let-color=\"color\">\n  <div #node class=\"--node-container\" [style]=\"getNodeColors(color)\">\n    <div class=\"--container\">\n      <div class=\"--heading-container\">\n        <div class=\"--content\">\n          <div class=\"--icon\">\n            <i class=\"fa-light fa-xl fa-fw\" [class]=\"data.icon\"></i>\n          </div>\n          <div class=\"--titles\">\n            <span class=\"--title\">{{data.title}}</span>\n            @if(data.subtitle)\n            {\n            <span class=\"--sub-title\">{{data.subtitle}}</span>\n            }\n          </div>\n          @if(data?.children?.length){\n          <div class=\"--badge\">\n            <span>{{data?.children?.length ?? 0}}</span>\n          </div>\n          }\n        </div>\n      </div>\n      @if(data.description)\n      {\n      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data.children && data.children.length > 0\">\n          {{data.description}}\n        </div>\n      </div>\n      }\n      @if(data.children && data.children.length > 0){\n      <div class=\"--toggle\">\n        <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"toggleNode(data,node)\">\n          <ax-icon icon=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;gap:.25rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-toolbar,    axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { 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: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer" }, { 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-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["minZoom", "maxZoom", "zoomStep", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i6.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i6.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+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,
+                        AXPThemeLayoutFooterComponent,
+                        AXMenuModule,
+                        AXButtonModule,
+                        AXDropdownButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXPanViewDirective,
+                        AXLoadingModule,
+                        AXBreadcrumbsModule,
+                        AXBadgeModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.chart.title) | 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('print') | async)!\" (onClick)=\"printChart()\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{(t('home') | async)}} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Organization </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" [fitContent]=\"true\"\n        wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <ax-context-menu [target]=\"'.axp-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n      </ax-context-menu>\n    </div>\n  </axp-layout-content>\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'};\n        @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\">\n          </div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}}\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"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        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div>\n    @switch (data.category) {\n    <!-- Company -->\n    @case (NodeTypes.Company) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'primary' }\"></ng-container>\n    }\n    <!-- Location -->\n    @case (NodeTypes.Location) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent1' }\"></ng-container>\n    }\n    <!-- BusinessUnit -->\n    @case (NodeTypes.BusinessUnit) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent2' }\"></ng-container>\n    }\n    <!-- Role -->\n    @case (NodeTypes.Role) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent3' }\"></ng-container>\n    }\n    <!-- Employee -->\n    @case (NodeTypes.Employee) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'surface' }\"></ng-container>\n    }\n    }\n  </div>\n</ng-template>\n\n<!----------------------------------- General Node Template ----------------------------------->\n<ng-template #generalTemplate let-data=\"data\" let-color=\"color\">\n  <div #node class=\"--node-container\" [style]=\"getNodeColors(color)\">\n    <div class=\"--container\">\n      <div class=\"--heading-container\">\n        <div class=\"--content\">\n          <div class=\"--icon\">\n            <i class=\"fa-light fa-xl fa-fw\" [class]=\"data.icon\"></i>\n          </div>\n          <div class=\"--titles\">\n            <span class=\"--title\">{{data.title}}</span>\n            @if(data.subtitle)\n            {\n            <span class=\"--sub-title\">{{data.subtitle}}</span>\n            }\n          </div>\n          @if(data?.children?.length){\n          <div class=\"--badge\">\n            <span>{{data?.children?.length ?? 0}}</span>\n          </div>\n          }\n        </div>\n      </div>\n      @if(data.description)\n      {\n      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data.children && data.children.length > 0\">\n          {{data.description}}\n        </div>\n      </div>\n      }\n      @if(data.children && data.children.length > 0){\n      <div class=\"--toggle\">\n        <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"toggleNode(data,node)\">\n          <ax-icon icon=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;gap:.25rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"] }]
+        }] });
+
+export { AXMOrgChartPage };
+//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-e-N7Ql80.mjs.map