@acorex/modules 19.2.8 → 19.2.10

package/fesm2022/{acorex-modules-organization-management-org-chart.page-e-N7Ql80.mjs → acorex-modules-organization-management-org-chart.page-BSh18amn.mjs}

@@ -23,12 +23,12 @@ 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 { AXPExportService, AXPRegionalService, AXPDataGenerator } from '@acorex/platform/common';
+import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService } from '@acorex/components/popup';
-import { AXPRegionalService } from '@acorex/modules/platform-management';
+import { AXPSessionService } from '@acorex/platform/auth';
 import { applyFilterArray } from '@acorex/platform/core';
+import { cloneDeep } from 'lodash-es';
 import set from 'lodash-es/set';
 
 /**
@@ -172,7 +172,9 @@ class AXMOrgChartService {
         this.popupService = inject(AXPopupService);
         this.layoutService = inject(AXPLayoutThemeService);
         this.regionalService = inject(AXPRegionalService);
-        this._rootNode = signal({ id: AXPDataGenerator.uuid(), title: "Company" });
+        this.dialogService = inject(AXDialogService);
+        this.translateService = inject(AXTranslationService);
+        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);
@@ -182,9 +184,7 @@ class AXMOrgChartService {
         const first = (await this.chartService.query({
             skip: 0,
             take: 1,
-            sort: [
-                { field: 'version', dir: 'desc' }
-            ]
+            sort: [{ field: 'version', dir: 'desc' }],
         })).items[0];
         //
         if (first) {
@@ -211,14 +211,18 @@ class AXMOrgChartService {
                     id: tenant.id,
                     source: 'tenant',
                 },
-                children: []
+                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() });
+        await this.chartService.updateOne(first.id, {
+            version: first.version,
+            data: this._rootNode(),
+            updateAt: new Date(),
+        });
     }
     //#endregion
     //#region Context Menu
@@ -231,7 +235,7 @@ class AXMOrgChartService {
             Location: [],
             BusinessUnit: [],
             Role: [],
-            Employee: []
+            Employee: [],
         };
         Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).forEach(([entitySource, config]) => {
             if (allowedTypes.includes(config.type)) {
@@ -242,12 +246,12 @@ class AXMOrgChartService {
                     data: {
                         node,
                         config,
-                        source: entitySource
+                        source: entitySource,
                     },
                 });
             }
         });
-        Object.values(groupedMenuItems).forEach(group => {
+        Object.values(groupedMenuItems).forEach((group) => {
             if (group.length > 0) {
                 allowedMenuItems.push(...group);
                 group[group.length - 1].break = true;
@@ -259,7 +263,7 @@ class AXMOrgChartService {
         return allowedMenuItems;
     }
     //#endregion
-    //#region Check Permission 
+    //#region Check Permission
     async getAllowedChildCategoriesForParent(parent) {
         await this.configService.load();
         const types = this.configService.types;
@@ -275,11 +279,16 @@ class AXMOrgChartService {
         });
         return Array.from(allowedTypes);
     }
-    //#endregion 
+    //#endregion
     //#region Remove/Cut/Copy/Past
     async removeNode(id) {
-        this._rootNode.update((node) => this.removeNodeRecursively(node, id));
-        await this.save();
+        const title = await this.translateService.translateAsync('dialogs.delete.title');
+        const message = await this.translateService.translateAsync('dialogs.delete.message');
+        const dialogResult = await this.dialogService.confirm(title, message, 'danger', 'horizontal');
+        if (dialogResult.result) {
+            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
@@ -288,8 +297,9 @@ class AXMOrgChartService {
         }
         // Otherwise, recursively check children
         if (node.children) {
-            node.children = node.children.filter(child => child.id !== id)
-                .map(child => {
+            node.children = node.children
+                .filter((child) => child.id !== id)
+                .map((child) => {
                 return { ...child, children: this.removeNodeRecursively(child, id)?.children };
             });
         }
@@ -307,18 +317,18 @@ class AXMOrgChartService {
         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.
-    */
+     * 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.");
+            throw new Error('Cannot cut the root node.');
         }
         const result = this.findNodeAndParent(tree, id);
         if (!result) {
-            throw new Error("Node not found.");
+            throw new Error('Node not found.');
         }
         // Set the clipboard signal with mode 'cut'
         this.clipboard.set({ mode: 'cut', node: result.node });
@@ -328,32 +338,32 @@ class AXMOrgChartService {
         await this.save();
     }
     /**
-   * Copies the node with the given id.
-   * A deep clone of the node is stored in the clipboard.
-   */
+     * 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.");
+            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.
-   */
+     * 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.");
+            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.");
+            throw new Error('Parent node not found.');
         }
         let nodeToPaste;
         if (clipboardValue.mode === 'cut') {
@@ -369,9 +379,9 @@ class AXMOrgChartService {
         await this.save();
     }
     /**
-  * Recursively searches the tree for the node with the given id,
-  * returning both the node and its parent.
-  */
+     * 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 };
@@ -402,7 +412,7 @@ class AXMOrgChartService {
     assignNewIds(node) {
         node.id = AXPDataGenerator.uuid();
         if (node.children) {
-            node.children.forEach(child => this.assignNewIds(child));
+            node.children.forEach((child) => this.assignNewIds(child));
         }
     }
     /**
@@ -416,7 +426,7 @@ class AXMOrgChartService {
         if (node.children) {
             return {
                 ...node,
-                children: node.children.map(child => this.insertNodeRecursively(child, parentId, newNode))
+                children: node.children.map((child) => this.insertNodeRecursively(child, parentId, newNode)),
             };
         }
         return node;
@@ -425,84 +435,123 @@ class AXMOrgChartService {
     //#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
+        try {
+            const component = (await import('./acorex-modules-organization-management-add-item.component-PhQRBTtI.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 provinceSource = async (request) => {
+                let list = await this.regionalService.getProvinces(node.type === AXMOrganizationNodeType.Country ? node.entity?.id : undefined);
+                if (request.filter) {
+                    list = applyFilterArray(list, [request.filter]);
                 }
+                const items = list.map((c) => ({
+                    id: c.code,
+                    title: c.title,
+                }));
+                return { items, total: items.length };
+            };
+            const citySource = async (request) => {
+                let filter = {};
+                if (node.type === AXMOrganizationNodeType.Country) {
+                    filter.countryId = node.entity?.id;
+                }
+                else if (node.type === AXMOrganizationNodeType.State) {
+                    filter.provinceId = node.entity?.id;
+                }
+                let list = await this.regionalService.getCities(filter);
+                if (request.filter) {
+                    list = applyFilterArray(list, [request.filter]);
+                }
+                const items = list.map((c) => ({
+                    id: c.code,
+                    title: c.title,
+                }));
+                return { items, total: items.length };
+            };
+            const valueField = 'id';
+            const titleField = 'title';
+            const subtitleField = null;
+            const descriptionField = 'description';
+            switch (type) {
+                case AXMOrganizationNodeType.Country:
+                    query = countrySource;
+                    break;
+                case AXMOrganizationNodeType.State:
+                    query = provinceSource;
+                    break;
+                case AXMOrganizationNodeType.City:
+                    query = citySource;
+                    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:
+                    throw new Error(`Unsupported node type: ${type}`);
             }
-        });
-        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 result = await this.popupService.open(component, {
+                title: `Add ${get(data, 'config.title')}`,
+                size: 'md',
+                data: {
+                    config: {
+                        valueField,
+                        titleField,
+                        subtitleField,
+                        descriptionField,
+                        query: query,
+                    },
+                },
+            });
+            if (!result.data) {
+                return false;
             }
-        };
-        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;
+            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();
+            return true;
+        }
+        finally {
+            this.layoutService.setNavigationLoading(false);
+        }
     }
     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 }); }
@@ -552,13 +601,13 @@ class AXMOrgChartPage {
      * Zooms in the chart.
      */
     zoomIn() {
-        this.panZoomLevel.update((prev) => prev + 5);
+        this.panView()?.zoomIn();
     }
     /**
      * Zooms out the chart.
      */
     zoomOut() {
-        this.panZoomLevel.update((prev) => prev - 5);
+        this.panView()?.zoomOut();
     }
     /**
      * Resets the zoom level and pan position of the chart.
@@ -860,7 +909,7 @@ class AXMOrgChartPage {
         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 }); }
+    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\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\" 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: ["zoomStep", "minZoom", "maxZoom", "freeMode", "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,
@@ -883,8 +932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         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"] }]
+                    ], 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\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\" 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
+//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-BSh18amn.mjs.map