@acorex/modules 19.2.6 → 19.2.8

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

@@ -1,597 +0,0 @@
-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 } 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, viewChild, NgZone, ViewContainerRef, signal, afterNextRender, Component, ChangeDetectionStrategy } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { AXMOrganizationManagementCompanyEntityService, AXMOrganizationManagementDepartmentEntityService, AXMOrganizationManagementEmployeeEntityService, AXMOrganizationManagementPositionEntityService, AXMOrganizationManagementChartEntityService, RootConfig } from './acorex-modules-organization-managment.mjs';
-import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import { AXPExportService, AXPDataGenerator } from '@acorex/platform/common';
-import { AXPSessionService } from '@acorex/platform/auth';
-import { A as AXMOrgChartConfigService } from './acorex-modules-organization-managment-org-chart-configuration.service-D-LkPUIw.mjs';
-
-class AXMOrgChartPrintService {
-    constructor() {
-        this.loadingDialog = inject(AXLoadingDialogService);
-        this.exportService = inject(AXPExportService);
-        this.translationService = inject(AXTranslationService);
-    }
-    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 {
-            // Step 1: Start Process
-            await this.HandleStep(d, await this.translateStatements('preparing-document'), 10, '1/10');
-            const chartElement = element;
-            const { originalStyles, modifiedStyles } = this.expandChart(chartElement);
-            // Step 2: Render the Chart
-            await this.HandleStep(d, await this.translateStatements('rendering-chart-image'), 25, '2.5/10');
-            const canvasBlob = await this.exportService.generateBlobFromElement(chartElement, {
-                popup: true,
-                bgcolor: 'transparent',
-                scale: 2,
-                quality: 1,
-                height: Number.parseInt(modifiedStyles.modifiedHeight),
-                width: Number.parseInt(modifiedStyles.modifiedWidth),
-            });
-            // Step 3: Finalizing Image Processing
-            await this.HandleStep(d, await this.translateStatements('finalizing-image-processing'), 50, '5/10');
-            this.restoreChartStyles(chartElement, originalStyles);
-            // Step 4: Download Image
-            await this.HandleStep(d, await this.translateStatements('downloading-image'), 75, '7.5/10');
-            this.exportService.download(canvasBlob, 'org-chart.png');
-            // Step 5: Completion
-            await this.HandleStep(d, await this.translateStatements('process-complete'), 100, '10/10');
-            // Close the dialog after a short delay
-            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.
-     */
-    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.
-     */
-    restoreChartStyles(chartElement, originalStyles) {
-        chartElement.style.overflow = originalStyles.originalOverflow;
-        chartElement.style.width = originalStyles.originalWidth;
-        chartElement.style.height = originalStyles.originalHeight;
-    }
-    /**
-     * Handles updating the progress dialog step.
-     */
-    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();
-        });
-    }
-    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.companyService = inject(AXMOrganizationManagementCompanyEntityService);
-        this.departmentService = inject(AXMOrganizationManagementDepartmentEntityService);
-        this.employmentService = inject(AXMOrganizationManagementEmployeeEntityService);
-        this.positionService = inject(AXMOrganizationManagementPositionEntityService);
-        this.chartService = inject(AXMOrganizationManagementChartEntityService);
-        this.sessionService = inject(AXPSessionService);
-        this.configService = inject(AXMOrgChartConfigService);
-    }
-    async load(id) {
-        if (id) {
-            const item = await this.chartService.getOne(id);
-            return item;
-        }
-        else {
-            return await this.createNew();
-        }
-    }
-    async createNew() {
-        const tenant = this.sessionService.tenant;
-        return {
-            //createAt: new Date(),
-            //updateAt: new Date(),
-            version: '0.0.0',
-            nodes: [{
-                    id: AXPDataGenerator.uuid(),
-                    title: tenant.name,
-                    entity: {
-                        id: tenant.id,
-                        source: 'tenant',
-                    },
-                }],
-        };
-    }
-    async save(chart) {
-        if (chart.id) {
-            await this.chartService.updateOne(chart.id, { version: chart.version, nodes: chart.nodes, updateAt: new Date() });
-        }
-        else {
-            await this.chartService.insertOne(chart);
-        }
-    }
-    getContextMenu() {
-        const types = this.configService.types;
-        return [];
-    }
-    async listItemType(type, event) {
-        switch (type.text.toLowerCase()) {
-            case 'company':
-                return await this.companyService.query({
-                    skip: event.skip,
-                    take: event.take,
-                    filter: event.filter,
-                    sort: event.sort,
-                });
-            case 'country':
-                break;
-            case 'city':
-                break;
-            case 'department':
-                return (await this.departmentService.query({
-                    skip: event.skip,
-                    take: event.take,
-                    filter: event.filter,
-                    sort: event.sort,
-                }));
-            case 'position':
-                return (await this.positionService.query({
-                    skip: event.skip,
-                    take: event.take,
-                    filter: event.filter,
-                    sort: event.sort,
-                }));
-            case 'employment':
-                return (await this.employmentService.query({
-                    skip: event.skip,
-                    take: event.take,
-                    filter: event.filter,
-                    sort: event.sort,
-                }));
-        }
-    }
-    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
-        }] });
-
-var AXMOrganizationNodeType;
-(function (AXMOrganizationNodeType) {
-    AXMOrganizationNodeType["Company"] = "Company";
-    AXMOrganizationNodeType["Location"] = "Location";
-    AXMOrganizationNodeType["BusinessUnit"] = "BusinessUnit";
-    AXMOrganizationNodeType["Role"] = "Role";
-    AXMOrganizationNodeType["Person"] = "Person"; // Employee
-})(AXMOrganizationNodeType || (AXMOrganizationNodeType = {}));
-const AXM_ALLOWED_CHILD_NODES = {
-    [AXMOrganizationNodeType.Company]: [AXMOrganizationNodeType.Location, AXMOrganizationNodeType.BusinessUnit],
-    [AXMOrganizationNodeType.Location]: [AXMOrganizationNodeType.Location, AXMOrganizationNodeType.BusinessUnit],
-    [AXMOrganizationNodeType.BusinessUnit]: [AXMOrganizationNodeType.BusinessUnit, AXMOrganizationNodeType.Role],
-    [AXMOrganizationNodeType.Role]: [AXMOrganizationNodeType.Person],
-    [AXMOrganizationNodeType.Person]: [] // No children allowed
-};
-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.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.ngzone = inject(NgZone);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.chartPrintService = inject(AXMOrgChartPrintService);
-        this.DATA = AXM_ORGANIZATION_DATA;
-        this.NODE_STROKE_COLOR = 'rgba(var(--ax-sys-color-primary-400))';
-        this.LINK_STROKE_WIDTH = 1;
-        this.isFullscreen = signal(false);
-        this.panX = signal(0);
-        this.panY = signal(0);
-        this.panZoomLevel = signal(100);
-        this.#initialize = afterNextRender(async () => {
-            this.d3 = await import('d3');
-            this.createChart(this.treeContainer().nativeElement, this.DATA);
-        });
-    }
-    #initialize;
-    // eff = effect(() => console.log(this.panX(), this.panY()));
-    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);
-    }
-    toggleFullscreen() {
-        if (this.isFullscreen()) {
-            document.exitFullscreen();
-            this.isFullscreen.set(false);
-        }
-        else {
-            this.parent().nativeElement.requestFullscreen();
-            this.isFullscreen.set(true);
-        }
-    }
-    calculateMaxDepth(node) {
-        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
-            return 1; // Base case: no children or node is collapsed
-        }
-        return 1 + Math.max(...node.children.map((child) => this.calculateMaxDepth(child)));
-    }
-    calculateMaxBreadth(node) {
-        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
-            return 1; // Base case: no children or node is collapsed
-        }
-        return node.children.reduce((acc, child) => acc + this.calculateMaxBreadth(child), 0);
-    }
-    createChart(el, data) {
-        this.ngzone.runOutsideAngular(() => {
-            // Constants for node dimensions and spacing
-            const NODE_WIDTH_BASE = 260; // Base width for each node
-            const NODE_HEIGHT_BASE = 180; // Base height for each node
-            const HORIZONTAL_SPACING = 20; // Horizontal spacing between nodes
-            const VERTICAL_SPACING = 40; // Vertical spacing between levels
-            // Clear existing SVG and create a new one
-            this.clearChart(el);
-            const newSvg = this.d3.select(el).append('svg');
-            // Create a hierarchy from the data
-            const root = this.d3.hierarchy(data);
-            // Filter out collapsed nodes and their descendants
-            root.descendants().forEach((node) => {
-                if (node.data.isExpanded === false) {
-                    node.children = undefined; // Remove children for collapsed nodes
-                }
-            });
-            // Create a tree layout
-            const treeLayout = this.d3
-                .tree()
-                .nodeSize([NODE_WIDTH_BASE + HORIZONTAL_SPACING, NODE_HEIGHT_BASE + VERTICAL_SPACING]);
-            // Generate the tree nodes and links
-            treeLayout(root);
-            // Calculate the bounds of the tree
-            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;
-            });
-            // Calculate SVG dimensions based on tree bounds
-            const CONTAINER_WIDTH = maxX - minX + NODE_WIDTH_BASE + 2 * HORIZONTAL_SPACING;
-            const CONTAINER_HEIGHT = maxY - minY + NODE_HEIGHT_BASE + 2 * VERTICAL_SPACING;
-            // Set SVG dimensions
-            newSvg.attr('width', CONTAINER_WIDTH).attr('height', CONTAINER_HEIGHT);
-            // Adjust the transform of the <g> element to center the tree
-            const g = newSvg
-                .append('g')
-                .attr('transform', `translate(${-minX + NODE_WIDTH_BASE / 2 + HORIZONTAL_SPACING / 2}, ${-minY + NODE_HEIGHT_BASE / 2 + VERTICAL_SPACING / 2})`);
-            // 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 - 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}`);
-            // Create nodes
-            const node = g
-                .selectAll('.axp-org-chart-node')
-                .data(root.descendants())
-                .enter()
-                .append('foreignObject')
-                .attr('class', 'axp-org-chart-node')
-                .attr('node', (d) => `node-${d.data.id}`) // Unique ID for each node
-                .attr('x', (d) => d.x - NODE_WIDTH_BASE / 2) // Use d.x (D3 node property)
-                .attr('y', (d) => d.y - NODE_HEIGHT_BASE / 2 + 10) // Use d.y (D3 node property)
-                .attr('width', NODE_WIDTH_BASE)
-                .attr('height', NODE_HEIGHT_BASE)
-                .each((d) => this.renderNodeTemplate(d.data, d.x, d.y));
-            // Refresh context menu
-            this.contextMenu()?.refresh();
-        });
-    }
-    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 = this.d3.select(this.treeContainer().nativeElement).select(`[node="node-${data.id}"]`); // Select by unique ID instead of position
-        const element = nodeElement.node();
-        if (element) {
-            element.appendChild(viewRef.rootNodes[0]);
-        }
-    }
-    toggleNode(data, el) {
-        data.isExpanded = data.isExpanded === undefined ? false : !data.isExpanded;
-        this.createChart(this.treeContainer().nativeElement, this.DATA); // Re-render the chart
-        el.scrollIntoView({ behavior: 'smooth' });
-    }
-    clearChart(el) {
-        this.d3.select(el).select('svg').remove();
-        this.viewContainerRef.clear();
-    }
-    handleContextMenuOnOpening(e) {
-        const items = [
-            { name: 'add', text: 'Add New Departpent', color: 'primary', icon: 'fa-light fa-plus' },
-            {
-                name: 'remove',
-                text: 'Remove',
-                color: 'danger',
-                icon: 'fa-light fa-trash-can',
-            },
-        ];
-        e.items.push(...items);
-    }
-    printChart() {
-        this.chartPrintService.printChart(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: [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 }], 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> Home </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>\n    <div class=\"ax-h-[calc(100vh-190px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"h\"></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        <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    </div>\n\n    <ax-context-menu\n      [target]=\"'.axp-org-chart-node'\"\n      [orientation]=\"'vertical'\"\n      [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n    >\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n<div #chart class=\"chart-container ax-border\"></div>\n\n<!-- <ax-chart nodeTemplate=\"nodeTemplate\" nodes=\"nodes\"></ax-chart> -->\n<!-- \n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border ax-select-none 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  >\n    <div\n      class=\"ax-bg-primary-400 ax-text-on-primary ax-px-4 ax-py-2 ax-h-full ax-cursor-pointer hover:ax-brightness-90\"\n      [class.ax-rounded-b-none]=\"data.description\"\n      (dblclick)=\"toggleNode(data)\"\n    >\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-between ax-h-full\">\n        <ax-icon><i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i></ax-icon>\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        @if (data.children && data.children.length > 0) {\n        <div class=\"ax-flex ax-justify-center ax-items-center\" (click)=\"toggleNode(data)\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></i\n          ></ax-icon>\n        </div>\n        }@else {\n        <span></span>\n        }\n      </div>\n    </div>\n    @if(data.description) {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">\n      {{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template> -->\n\n<ng-template #nodeTemplate let-data>\n  <div #node class=\"axp-node\" [class]=\"data.children && data.children.length > 0 ? 'ax-pb-3' : ''\">\n    <div class=\"axp-node-information\">\n      <div class=\"axp-node-information-bar\">\n        <div class=\"axp-node-image-bar\">\n          @if(false){\n          <div class=\"axp-node-image\"></div>\n          }@else {\n          <div class=\"axp-node-icon\">\n            <i\n              class=\"fa-light ax-text-2xl ax-size-full ax-flex ax-justify-center ax-items-center\"\n              [class]=\"data.icon\"\n            ></i>\n          </div>\n          }\n        </div>\n        <div class=\"axp-node-title-bar\">\n          <span class=\"axp-node-title\">{{data.title}}</span>\n          <span class=\"axp-node-subtitle\" [title]=\"data.subtitle\">{{data.subtitle}}</span>\n        </div>\n      </div>\n\n      @if(data?.children?.length){\n      <div class=\"axp-badge\">\n        <span>{{data?.children?.length ?? 0}}</span>\n      </div>\n      }\n    </div>\n    @if(data?.description){\n    <div class=\"axp-node-description\"><span> {{data?.description}} </span></div>\n    } @if(data.children && data.children.length > 0){\n    <div class=\"axp-node-children-toggle\">\n      <div class=\"ax-size-4 ax-flex ax-justify-center ax-items-center\">\n        <i\n          class=\"fa-solid ax-text-sm\"\n          [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n          (click)=\"toggleNode(data,node)\"\n        >\n        </i>\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".axp-org-chart-node{overflow:visible;white-space:nowrap;display:flex;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}.axp-node{position:relative;max-height:100%;border-radius:.375rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--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)}.axp-node:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axp-node:has(.axp-node-description)>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.axp-node .axp-node-information{display:flex;align-items:center;justify-content:space-between;gap:.25rem;overflow:hidden;padding:.75rem}.axp-node .axp-node-information .axp-node-information-bar{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon{display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar{display:flex;flex-direction:column}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle:is(.ax-dark *){--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-badge{display:flex;width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-node .axp-node-description{overflow:hidden;padding:.75rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-node .axp-node-children-toggle{position:absolute;bottom:-.75rem;left:calc(50% - 12px);display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border-radius:.125rem;border-width:1px!important;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover{--tw-border-opacity: 1;border-color:rgb(82 82 82 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgb(163 163 163 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}\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-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: "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: ["zoomStep", "minZoom", "maxZoom", "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 }); }
-}
-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,
-                        AXPanViewDirective,
-                        AXLoadingModule,
-                        AXBreadcrumbsModule,
-                        AXBadgeModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [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> Home </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>\n    <div class=\"ax-h-[calc(100vh-190px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"h\"></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        <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    </div>\n\n    <ax-context-menu\n      [target]=\"'.axp-org-chart-node'\"\n      [orientation]=\"'vertical'\"\n      [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n    >\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n<div #chart class=\"chart-container ax-border\"></div>\n\n<!-- <ax-chart nodeTemplate=\"nodeTemplate\" nodes=\"nodes\"></ax-chart> -->\n<!-- \n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border ax-select-none 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  >\n    <div\n      class=\"ax-bg-primary-400 ax-text-on-primary ax-px-4 ax-py-2 ax-h-full ax-cursor-pointer hover:ax-brightness-90\"\n      [class.ax-rounded-b-none]=\"data.description\"\n      (dblclick)=\"toggleNode(data)\"\n    >\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-between ax-h-full\">\n        <ax-icon><i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i></ax-icon>\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        @if (data.children && data.children.length > 0) {\n        <div class=\"ax-flex ax-justify-center ax-items-center\" (click)=\"toggleNode(data)\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></i\n          ></ax-icon>\n        </div>\n        }@else {\n        <span></span>\n        }\n      </div>\n    </div>\n    @if(data.description) {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">\n      {{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template> -->\n\n<ng-template #nodeTemplate let-data>\n  <div #node class=\"axp-node\" [class]=\"data.children && data.children.length > 0 ? 'ax-pb-3' : ''\">\n    <div class=\"axp-node-information\">\n      <div class=\"axp-node-information-bar\">\n        <div class=\"axp-node-image-bar\">\n          @if(false){\n          <div class=\"axp-node-image\"></div>\n          }@else {\n          <div class=\"axp-node-icon\">\n            <i\n              class=\"fa-light ax-text-2xl ax-size-full ax-flex ax-justify-center ax-items-center\"\n              [class]=\"data.icon\"\n            ></i>\n          </div>\n          }\n        </div>\n        <div class=\"axp-node-title-bar\">\n          <span class=\"axp-node-title\">{{data.title}}</span>\n          <span class=\"axp-node-subtitle\" [title]=\"data.subtitle\">{{data.subtitle}}</span>\n        </div>\n      </div>\n\n      @if(data?.children?.length){\n      <div class=\"axp-badge\">\n        <span>{{data?.children?.length ?? 0}}</span>\n      </div>\n      }\n    </div>\n    @if(data?.description){\n    <div class=\"axp-node-description\"><span> {{data?.description}} </span></div>\n    } @if(data.children && data.children.length > 0){\n    <div class=\"axp-node-children-toggle\">\n      <div class=\"ax-size-4 ax-flex ax-justify-center ax-items-center\">\n        <i\n          class=\"fa-solid ax-text-sm\"\n          [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n          (click)=\"toggleNode(data,node)\"\n        >\n        </i>\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".axp-org-chart-node{overflow:visible;white-space:nowrap;display:flex;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}.axp-node{position:relative;max-height:100%;border-radius:.375rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--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)}.axp-node:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axp-node:has(.axp-node-description)>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.axp-node .axp-node-information{display:flex;align-items:center;justify-content:space-between;gap:.25rem;overflow:hidden;padding:.75rem}.axp-node .axp-node-information .axp-node-information-bar{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon{display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar{display:flex;flex-direction:column}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle:is(.ax-dark *){--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-badge{display:flex;width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-node .axp-node-description{overflow:hidden;padding:.75rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-node .axp-node-children-toggle{position:absolute;bottom:-.75rem;left:calc(50% - 12px);display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border-radius:.125rem;border-width:1px!important;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover{--tw-border-opacity: 1;border-color:rgb(82 82 82 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgb(163 163 163 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}\n"] }]
-        }] });
-
-export { AXMOrgChartPage };
-//# sourceMappingURL=acorex-modules-organization-managment-org-chart.page-B3aaLlm2.mjs.map