@acorex/modules 21.0.0-next.51 → 21.0.0-next.54

package/fesm2022/{acorex-modules-organization-management-org-chart.page-BcHO5kKP.mjs → acorex-modules-organization-management-org-chart.page-ChXY8ncD.mjs}

@@ -16,22 +16,24 @@ import { AXSwitchModule } from '@acorex/components/switch';
 import * as i3 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService, createMultiLanguageString, resolveMultiLanguageString } from '@acorex/core/translation';
 import { AXPDataGenerator, AXPPlatformScope, AXPDeviceService, getActionButton } from '@acorex/platform/core';
-import { AXPAvatarComponent, AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
+import { AXPAvatarComponent, AXPThemeLayoutBlockComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import * as i3$1 from '@angular/common';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, signal, viewChild, NgZone, Injector, ViewContainerRef, LOCALE_ID, afterNextRender, effect } from '@angular/core';
+import { InjectionToken, inject, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, signal, viewChild, NgZone, Injector, ViewContainerRef, LOCALE_ID, afterNextRender, effect } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import set from 'lodash-es/set';
-import { A as AXM_ORG_CHART_HOST, a as AXMOrgChartNodeType, b as AXM_ORG_CHART_NODE_CONTRIBUTOR, R as RootConfig, n as normalizeVacantLeafSeatsSetting, c as AXPOrganizationManagementSettings, p as parseOrgChartMode, d as AXMOrgChartStructureRefreshHub, e as AXMOrgChartCategory, f as AXM_ORG_CHART_EMPLOYEE_SUBMENU_GROUP_ID, g as AXMOrgChartDetailPanelComponent } from './acorex-modules-organization-management-acorex-modules-organization-management-CGzZcKEy.mjs';
+import { A as AXMOrgChartNodeType, a as AXM_ORG_CHART_NODE_CONTRIBUTOR, R as RootConfig, n as normalizeVacantLeafSeatsSetting, b as AXPOrganizationManagementSettings, p as parseOrgChartMode, c as AXMOrgChartStructureRefreshHub, d as AXMOrgChartCategory, e as AXM_ORG_CHART_EMPLOYEE_SUBMENU_GROUP_ID } from './acorex-modules-organization-management-acorex-modules-organization-management-BZtWfgmH.mjs';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPExportService, AXPSettingsService } from '@acorex/platform/common';
 import { AXPEntityService } from '@acorex/platform/layout/entity';
 import { AXPCommandService } from '@acorex/platform/runtime';
 
+const AXM_ORG_CHART_HOST = new InjectionToken('AXM_ORG_CHART_HOST');
+
 //#region ---- Imports ----
 //#endregion
 //#region ---- Component ----
@@ -550,7 +552,6 @@ class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
         this.panX = signal(0, ...(ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []));
         this.panY = signal(0, ...(ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []));
         this.panZoomLevel = signal(100, ...(ngDevMode ? [{ debugName: "panZoomLevel" }] : /* istanbul ignore next */ []));
-        this.zoomPercentageLabel = computed(() => `${Math.round(this.panZoomLevel())}%`, ...(ngDevMode ? [{ debugName: "zoomPercentageLabel" }] : /* istanbul ignore next */ []));
         this.isChartRendered = false;
         this.selectedNodeId = signal(null, ...(ngDevMode ? [{ debugName: "selectedNodeId" }] : /* istanbul ignore next */ []));
         /** Large layouts: optional side panel with {@link getNodeInfoItems} for the selected node (same UX pattern as document drive). */
@@ -600,6 +601,82 @@ class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
             }
             return this.findNodeInTree(this.chartService.rootNode(), id);
         }, ...(ngDevMode ? [{ debugName: "detailPanelSelectedNode" }] : /* istanbul ignore next */ []));
+        /** Resolved copy for {@link AXPLayoutSideDetailPanelComponent} (loaded from i18n keys). */
+        this.detailPanelCopy = signal({
+            panelTitle: '',
+            emptyMessage: '',
+            detailsSection: '',
+            noRowsMessage: '',
+        }, ...(ngDevMode ? [{ debugName: "detailPanelCopy" }] : /* istanbul ignore next */ []));
+        this.detailPanelHeader = computed(() => {
+            const node = this.detailPanelSelectedNode();
+            if (node == null) {
+                return null;
+            }
+            const lang = this.localeId;
+            let secondaryTitle;
+            if (node.type === AXMOrgChartNodeType.BusinessUnit) {
+                if (node.description) {
+                    secondaryTitle = resolveMultiLanguageString(node.description, lang);
+                }
+                else if (node.subtitle) {
+                    secondaryTitle = resolveMultiLanguageString(node.subtitle, lang);
+                }
+            }
+            else if (node.subtitle) {
+                secondaryTitle = resolveMultiLanguageString(node.subtitle, lang);
+            }
+            return {
+                primaryTitle: resolveMultiLanguageString(node.title, lang),
+                secondaryTitle,
+                icon: {
+                    iconClass: this.detailPanelNodeIconClass(node),
+                    surfaceVars: this.getNodeColors(this.detailPanelNodeColorKey(node)),
+                },
+            };
+        }, ...(ngDevMode ? [{ debugName: "detailPanelHeader" }] : /* istanbul ignore next */ []));
+        this.detailPanelSections = computed(() => {
+            const node = this.detailPanelSelectedNode();
+            if (node == null) {
+                return [];
+            }
+            const items = this.getNodeInfoItems(node);
+            if (items.length === 0) {
+                return [];
+            }
+            const lang = this.localeId;
+            const copy = this.detailPanelCopy();
+            return [
+                {
+                    title: copy.detailsSection,
+                    rows: items.map((item) => ({
+                        label: resolveMultiLanguageString(item.label, lang),
+                        value: item.value,
+                    })),
+                },
+            ];
+        }, ...(ngDevMode ? [{ debugName: "detailPanelSections" }] : /* istanbul ignore next */ []));
+        this.detailPanelEmptyState = computed(() => {
+            if (this.detailPanelSelectedNode() != null) {
+                return null;
+            }
+            const copy = this.detailPanelCopy();
+            return {
+                primaryTitle: copy.panelTitle,
+                message: copy.emptyMessage,
+                icon: {
+                    iconClass: 'fa-solid fa-lg fa-fw fa-diagram-project',
+                    surfaceVars: this.getNodeColors('primary'),
+                },
+            };
+        }, ...(ngDevMode ? [{ debugName: "detailPanelEmptyState" }] : /* istanbul ignore next */ []));
+        this.detailPanelNoRowsMessage = computed(() => {
+            const node = this.detailPanelSelectedNode();
+            if (node == null || this.getNodeInfoItems(node).length > 0) {
+                return null;
+            }
+            return this.detailPanelCopy().noRowsMessage;
+        }, ...(ngDevMode ? [{ debugName: "detailPanelNoRowsMessage" }] : /* istanbul ignore next */ []));
         /** Bound to `ax-search-box` in the page toolbar. */
         this.chartSearchQuery = '';
         this.chartSearchPendingPresentation = 'none';
@@ -610,6 +687,11 @@ class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
             this.d3 = await import('d3');
             await this.refresh();
         });
+        //#endregion
+        //#region ---- Detail Panel ----
+        this.detailPanelI18nEffect = effect(() => {
+            void this.loadDetailPanelCopy();
+        }, ...(ngDevMode ? [{ debugName: "detailPanelI18nEffect" }] : /* istanbul ignore next */ []));
         this.chartService.applyHydratedUiPrefs(this.route.snapshot.data['orgChartUi']);
         effect(() => {
             const rev = this.orgChartStructureRefreshHub.structureDataRevision();
@@ -622,8 +704,46 @@ class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
     //#endregion
     //#region ---- Initialization ----
     #initialize;
-    //#endregion
-    //#region ---- Detail Panel ----
+    async loadDetailPanelCopy() {
+        const [panelTitle, emptyMessage, detailsSection, noRowsMessage] = await Promise.all([
+            this.translateService.translateAsync('@organization-management:organization-chart.components.chart.detail-panel.title'),
+            this.translateService.translateAsync('@organization-management:organization-chart.components.chart.detail-panel.empty'),
+            this.translateService.translateAsync('@organization-management:organization-chart.components.chart.detail-panel.details-section'),
+            this.translateService.translateAsync('@organization-management:organization-chart.components.chart.detail-panel.no-rows'),
+        ]);
+        this.detailPanelCopy.set({
+            panelTitle: panelTitle ?? '',
+            emptyMessage: emptyMessage ?? '',
+            detailsSection: detailsSection ?? '',
+            noRowsMessage: noRowsMessage ?? '',
+        });
+    }
+    /** Color token or literal CSS color for the detail panel header icon. */
+    detailPanelNodeColorKey(node) {
+        if (node.type === AXMOrgChartNodeType.Company) {
+            return 'primary';
+        }
+        if (node.type === AXMOrgChartNodeType.BusinessUnit) {
+            const typeColor = node.metadata?.['unitTypeColor'];
+            if (typeof typeColor === 'string' && typeColor.trim().length > 0) {
+                return typeColor.trim();
+            }
+            return node.metadata?.['isRegional'] === true ? 'accent1' : 'accent2';
+        }
+        if (node.type === AXMOrgChartNodeType.Position || node.type === AXMOrgChartNodeType.Employee) {
+            return 'accent3';
+        }
+        return 'primary';
+    }
+    detailPanelNodeIconClass(node) {
+        const raw = node.icon?.trim() ?? '';
+        const withoutWeight = raw
+            .replace(/\bfa-(solid|light|regular|thin|duotone)\b/gi, '')
+            .trim()
+            .replace(/\s+/g, ' ');
+        const glyph = withoutWeight.length > 0 ? withoutWeight : 'fa-sitemap';
+        return `fa-solid fa-lg fa-fw ${glyph}`;
+    }
     toggleDetailPanel() {
         this.isDetailPanelOpen.update((open) => !open);
     }
@@ -1572,7 +1692,7 @@ class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
         return null;
     }
     /**
-     * Metadata rows for {@link AXMOrgChartDetailPanelComponent} only (key-value list is not shown on chart cards).
+     * Metadata rows for the side detail panel only (key-value list is not shown on chart cards).
      */
     getNodeInfoItems(data) {
         const metadata = data.metadata ?? {};
@@ -1769,11 +1889,11 @@ class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
                 useExisting: AXMOrgChartPage,
             },
             { provide: AXM_ORG_CHART_HOST, useExisting: AXMOrgChartPage },
-        ], viewQueries: [{ 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 }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-flex-wrap ax-items-center ax-gap-3\">\n        <ax-search-box class=\"ax-w-72\" [(ngModel)]=\"chartSearchQuery\"\n          (onValueChanged)=\"onChartSearchValueChanged($event)\" [placeholder]=\"\n            ('@organization-management:organization-chart.components.chart.search-placeholder' | translate | async) || ''\n          \">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        @if (chartService.selectedMode() !== 'reporting') {\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-shrink-0 ax-whitespace-nowrap\">\n          <span class=\"ax-text-sm\">{{\n            '@organization-management:organization-chart.components.generate-dialog.fields.show-vacant-leaf-seats.label'\n            | translate\n            | async\n            }}</span>\n          <ax-switch [ngModel]=\"chartService.showVacantLeafSeats()\"\n            (onValueChanged)=\"onVacantLeafSeatsChange($event)\"></ax-switch>\n        </div>\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      @if (deviceService.isLarge()) {\n      <ax-button (onClick)=\"toggleDetailPanel()\">\n        <ax-icon icon=\"{{ isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-hidden ax-flex ax-flex-col\">\n    <div class=\"ax-flex ax-flex-row ax-gap-4 ax-flex-1 ax-min-h-0 ax-overflow-hidden\" #parent id=\"parent\">\n      <div class=\"ax-flex-1 ax-min-w-0 ax-min-h-0 ax-overflow-hidden ax-relative ax-light\">\n        <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n          [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\" (contextmenu)=\"onOrgChartSurfaceContextMenu($event)\">\n        </div>\n        <div class=\"axm-org-chart-page__floating-zoom\">\n          <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"zoomOut()\">\n            <ax-icon class=\"fa-solid fa-minus\"></ax-icon>\n          </ax-button>\n          <ax-button look=\"blank\" class=\"ax-sm __zoom-value\" [text]=\"zoomPercentageLabel()\"\n            (onClick)=\"zoomReset()\"></ax-button>\n          <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"zoomIn()\">\n            <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n        <ax-context-menu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n          (onItemClick)=\"handleContextMenuItemClick($event)\">\n        </ax-context-menu>\n      </div>\n      @if (isDetailPanelOpen() && deviceService.isLarge()) {\n      <axm-org-chart-detail-panel class=\"ax-sticky ax-top-0 ax-z-10 ax-max-h-full ax-flex-none\"\n        [node]=\"detailPanelSelectedNode()\" (panelClose)=\"toggleDetailPanel()\" />\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>", styles: ["@charset \"UTF-8\";foreignObject.axp-chart-node{overflow:visible}.axp-chart-links path.link{pointer-events:none}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer}.axp-chart-node .--node-container.--merged-card{box-sizing:border-box;width:100%;max-width:100%}.axp-chart-node .--node-container{--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.--selected .--container{border-width:2px;border-style:dashed;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-chart-node .--node-container.--search-hit .--container{box-shadow:0 0 0 2px rgb(var(--ax-sys-color-warning-500)),0 0 12px color-mix(in srgb,rgb(var(--ax-sys-color-warning-500)) 35%,transparent)}.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 .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.axp-chart-node .--node-container.--merged-card .--container{width:100%;min-width:0px}.axp-chart-node .--node-container.axm-org-chart-card{border-radius:1rem;--oc-body-mix: 18%;--axm-org-chart-card-body-bg: radial-gradient(ellipse 130% 75% at 105% -5%, color-mix(in srgb, rgb(var(--node-bg-color)) var(--oc-body-mix), rgb(var(--ax-sys-color-lightest-surface))) 0%, color-mix(in srgb, rgb(var(--node-bg-color)) 6%, rgb(var(--ax-sys-color-lightest-surface))) 55%, color-mix(in srgb, rgb(var(--node-bg-color)) 2%, rgb(var(--ax-sys-color-lightest-surface))) 100%);--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 5%, transparent);--oc-ring-2: transparent;--oc-ring-3: transparent;border:1px solid color-mix(in srgb,rgb(var(--node-bg-color)) 12%,transparent);box-shadow:0 1px 2px #00000008,0 4px 12px #0000000d,0 14px 28px -16px #0000000f,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3),inset 0 1px #fffc}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-width:2px;border-style:dashed;border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 50%,rgb(var(--ax-sys-color-border-primary-surface)))}.dark .axp-chart-node .--node-container.axm-org-chart-card{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 22%,rgb(var(--ax-sys-color-border-primary-surface)));box-shadow:0 1px 2px #00000038,0 6px 18px #00000042,0 16px 36px -18px #0000004d,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3)}.dark .axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 58%,rgb(var(--ax-sys-color-border-primary-surface)))}.axp-chart-node .--node-container.axm-org-chart-card.--selected:not(.--search-hit){--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 32%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--node-bg-color)) 22%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--search-hit:not(.--selected){--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 30%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 20%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--selected.--search-hit{--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 28%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 18%, transparent);--oc-ring-3: color-mix(in srgb, rgb(var(--node-bg-color)) 24%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card .--container{overflow:hidden;border-radius:1rem;border-width:0px;border-style:none;box-shadow:none}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__accent{width:100%;flex:none;height:6px;border-top-left-radius:inherit;border-top-right-radius:inherit;border-bottom-left-radius:1.5rem;border-bottom-right-radius:0;background:linear-gradient(90deg,color-mix(in srgb,rgb(var(--node-bg-color)) 70%,white),rgb(var(--node-bg-color)),color-mix(in srgb,rgb(var(--node-bg-color)) 88%,black))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{position:relative;display:flex;width:100%;min-width:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{background-color:rgb(var(--ax-sys-color-lightest-surface));background-image:var(--axm-org-chart-card-body-bg, none)}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--employee .axm-org-chart-card__header--person .axm-org-chart-card__person-name{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--org{display:flex;min-width:0px;align-items:flex-start;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--person{display:flex;min-width:0px;align-items:center;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__leading-icon{display:flex;width:3rem;height:3rem;flex:none;align-items:center;justify-content:center;border-radius:.75rem;color:rgb(var(--node-bg-color));background-color:color-mix(in srgb,rgb(var(--node-bg-color)) 16%,white)}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title-block{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.9;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.85;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person{border-width:0px;padding:.5rem 1rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-label{margin-bottom:.5rem;font-size:.75rem;line-height:1rem;font-weight:700;line-height:1.25;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-row{display:flex;min-width:0px;align-items:center;gap:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:700;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-vacant{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:color-mix(in srgb,rgb(var(--node-bg-color)) 72%,rgb(var(--ax-sys-color-on-surface-variant)))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer{display:flex;flex-direction:row;justify-content:center;padding-top:1rem;padding-bottom:1rem;border-top-width:1px;min-height:3.5rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)));--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric{display:flex;flex:1 1 0%;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-icon{flex:none;font-size:.875rem;line-height:1.25rem;opacity:.95;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-col{display:flex;min-width:0px;flex:none;flex-direction:column;align-items:center;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-value{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;opacity:.75;color:rgba(var(--ax-sys-color-on-surface-variant))}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}.axm-org-chart-page__floating-zoom{position:absolute;bottom:1rem;z-index:20;display:flex;align-items:center;gap:.25rem;border-radius:1rem;padding:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));inset-inline-end:1rem;backdrop-filter:blur(10px);box-shadow:0 8px 20px -12px #0000003d,0 2px 8px #00000014,inset 0 1px #ffffffbf}.axm-org-chart-page__floating-zoom .__zoom-button{border-radius:.75rem;color:rgba(var(--ax-sys-color-on-surface))}.axm-org-chart-page__floating-zoom .__zoom-button:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}.axm-org-chart-page__floating-zoom .__zoom-value{min-width:4rem;border-radius:.75rem;font-weight:600;color:rgba(var(--ax-sys-color-on-surface))}.axm-org-chart-page__floating-zoom .__zoom-value:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ 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 }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-flex-wrap ax-items-center ax-gap-3\">\n        <ax-search-box class=\"ax-w-72\" [(ngModel)]=\"chartSearchQuery\"\n          (onValueChanged)=\"onChartSearchValueChanged($event)\" [placeholder]=\"\n            ('@organization-management:organization-chart.components.chart.search-placeholder' | translate | async) || ''\n          \">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        @if (chartService.selectedMode() !== 'reporting') {\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-shrink-0 ax-whitespace-nowrap\">\n          <span class=\"ax-text-sm\">{{\n            '@organization-management:organization-chart.components.generate-dialog.fields.show-vacant-leaf-seats.label'\n            | translate\n            | async\n            }}</span>\n          <ax-switch [ngModel]=\"chartService.showVacantLeafSeats()\"\n            (onValueChanged)=\"onVacantLeafSeatsChange($event)\"></ax-switch>\n        </div>\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      @if (deviceService.isLarge()) {\n      <ax-button (onClick)=\"toggleDetailPanel()\">\n        <ax-icon icon=\"{{ isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-hidden ax-flex ax-flex-col\">\n    <div class=\"ax-flex ax-flex-row ax-gap-4 ax-flex-1 ax-min-h-0 ax-overflow-hidden\" #parent id=\"parent\">\n      <div class=\"ax-flex-1 ax-min-w-0 ax-min-h-0 ax-overflow-hidden ax-relative ax-light\">\n        <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n          [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\" (contextmenu)=\"onOrgChartSurfaceContextMenu($event)\">\n        </div>\n        <axp-layout-floating-zoom-bar\n          [zoomLevel]=\"panZoomLevel()\"\n          (zoomIn)=\"zoomIn()\"\n          (zoomOut)=\"zoomOut()\"\n          (zoomReset)=\"zoomReset()\"\n        />\n        <ax-context-menu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n          (onItemClick)=\"handleContextMenuItemClick($event)\">\n        </ax-context-menu>\n      </div>\n      @if (isDetailPanelOpen() && deviceService.isLarge()) {\n      <axp-layout-side-detail-panel\n        class=\"ax-sticky ax-top-0 ax-z-10 ax-max-h-full ax-flex-none\"\n        [header]=\"detailPanelHeader()\"\n        [sections]=\"detailPanelSections()\"\n        [emptyState]=\"detailPanelEmptyState()\"\n        [noRowsMessage]=\"detailPanelNoRowsMessage()\"\n        (panelClose)=\"toggleDetailPanel()\"\n      />\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>", styles: ["@charset \"UTF-8\";foreignObject.axp-chart-node{overflow:visible}.axp-chart-links path.link{pointer-events:none}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer}.axp-chart-node .--node-container.--merged-card{box-sizing:border-box;width:100%;max-width:100%}.axp-chart-node .--node-container{--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.--selected .--container{border-width:2px;border-style:dashed;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-chart-node .--node-container.--search-hit .--container{box-shadow:0 0 0 2px rgb(var(--ax-sys-color-warning-500)),0 0 12px color-mix(in srgb,rgb(var(--ax-sys-color-warning-500)) 35%,transparent)}.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 .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.axp-chart-node .--node-container.--merged-card .--container{width:100%;min-width:0px}.axp-chart-node .--node-container.axm-org-chart-card{border-radius:1rem;--oc-body-mix: 18%;--axm-org-chart-card-body-bg: radial-gradient(ellipse 130% 75% at 105% -5%, color-mix(in srgb, rgb(var(--node-bg-color)) var(--oc-body-mix), rgb(var(--ax-sys-color-lightest-surface))) 0%, color-mix(in srgb, rgb(var(--node-bg-color)) 6%, rgb(var(--ax-sys-color-lightest-surface))) 55%, color-mix(in srgb, rgb(var(--node-bg-color)) 2%, rgb(var(--ax-sys-color-lightest-surface))) 100%);--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 5%, transparent);--oc-ring-2: transparent;--oc-ring-3: transparent;border:1px solid color-mix(in srgb,rgb(var(--node-bg-color)) 12%,transparent);box-shadow:0 1px 2px #00000008,0 4px 12px #0000000d,0 14px 28px -16px #0000000f,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3),inset 0 1px #fffc}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-width:2px;border-style:dashed;border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 50%,rgb(var(--ax-sys-color-border-primary-surface)))}.dark .axp-chart-node .--node-container.axm-org-chart-card{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 22%,rgb(var(--ax-sys-color-border-primary-surface)));box-shadow:0 1px 2px #00000038,0 6px 18px #00000042,0 16px 36px -18px #0000004d,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3)}.dark .axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 58%,rgb(var(--ax-sys-color-border-primary-surface)))}.axp-chart-node .--node-container.axm-org-chart-card.--selected:not(.--search-hit){--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 32%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--node-bg-color)) 22%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--search-hit:not(.--selected){--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 30%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 20%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--selected.--search-hit{--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 28%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 18%, transparent);--oc-ring-3: color-mix(in srgb, rgb(var(--node-bg-color)) 24%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card .--container{overflow:hidden;border-radius:1rem;border-width:0px;border-style:none;box-shadow:none}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__accent{width:100%;flex:none;height:6px;border-top-left-radius:inherit;border-top-right-radius:inherit;border-bottom-left-radius:1.5rem;border-bottom-right-radius:0;background:linear-gradient(90deg,color-mix(in srgb,rgb(var(--node-bg-color)) 70%,white),rgb(var(--node-bg-color)),color-mix(in srgb,rgb(var(--node-bg-color)) 88%,black))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{position:relative;display:flex;width:100%;min-width:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{background-color:rgb(var(--ax-sys-color-lightest-surface));background-image:var(--axm-org-chart-card-body-bg, none)}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--employee .axm-org-chart-card__header--person .axm-org-chart-card__person-name{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--org{display:flex;min-width:0px;align-items:flex-start;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--person{display:flex;min-width:0px;align-items:center;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__leading-icon{display:flex;width:3rem;height:3rem;flex:none;align-items:center;justify-content:center;border-radius:.75rem;color:rgb(var(--node-bg-color));background-color:color-mix(in srgb,rgb(var(--node-bg-color)) 16%,white)}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title-block{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.9;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.85;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person{border-width:0px;padding:.5rem 1rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-label{margin-bottom:.5rem;font-size:.75rem;line-height:1rem;font-weight:700;line-height:1.25;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-row{display:flex;min-width:0px;align-items:center;gap:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:700;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-vacant{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:color-mix(in srgb,rgb(var(--node-bg-color)) 72%,rgb(var(--ax-sys-color-on-surface-variant)))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer{display:flex;flex-direction:row;justify-content:center;padding-top:1rem;padding-bottom:1rem;border-top-width:1px;min-height:3.5rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)));--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric{display:flex;flex:1 1 0%;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-icon{flex:none;font-size:.875rem;line-height:1.25rem;opacity:.95;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-col{display:flex;min-width:0px;flex:none;flex-direction:column;align-items:center;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-value{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;opacity:.75;color:rgba(var(--ax-sys-color-on-surface-variant))}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
                 //
                 AXMenuModule }, { kind: "component", type: i2$1.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { 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: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i7.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: 
                 //
-                AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXMOrgChartDetailPanelComponent, selector: "axm-org-chart-detail-panel", inputs: ["node"], outputs: ["panelClose"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPLayoutFloatingZoomBarComponent, selector: "axp-layout-floating-zoom-bar", inputs: ["zoomLevel"], outputs: ["zoomIn", "zoomOut", "zoomReset"] }, { kind: "component", type: AXPLayoutSideDetailPanelComponent, selector: "axp-layout-side-detail-panel", inputs: ["multiSelectLabel", "header", "sections", "rows", "rowsSectionTitle", "noRowsMessage", "emptyState"], outputs: ["panelClose"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartPage, decorators: [{
             type: Component,
@@ -1796,7 +1916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         //
                         AXPThemeLayoutBlockComponent,
                         AXPPageLayoutComponent,
-                        AXMOrgChartDetailPanelComponent,
+                        AXPLayoutFloatingZoomBarComponent,
+                        AXPLayoutSideDetailPanelComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXMOrgChartService,
                         AXMOrgChartNodeContributionService,
@@ -1805,8 +1926,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             useExisting: AXMOrgChartPage,
                         },
                         { provide: AXM_ORG_CHART_HOST, useExisting: AXMOrgChartPage },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-flex-wrap ax-items-center ax-gap-3\">\n        <ax-search-box class=\"ax-w-72\" [(ngModel)]=\"chartSearchQuery\"\n          (onValueChanged)=\"onChartSearchValueChanged($event)\" [placeholder]=\"\n            ('@organization-management:organization-chart.components.chart.search-placeholder' | translate | async) || ''\n          \">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        @if (chartService.selectedMode() !== 'reporting') {\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-shrink-0 ax-whitespace-nowrap\">\n          <span class=\"ax-text-sm\">{{\n            '@organization-management:organization-chart.components.generate-dialog.fields.show-vacant-leaf-seats.label'\n            | translate\n            | async\n            }}</span>\n          <ax-switch [ngModel]=\"chartService.showVacantLeafSeats()\"\n            (onValueChanged)=\"onVacantLeafSeatsChange($event)\"></ax-switch>\n        </div>\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      @if (deviceService.isLarge()) {\n      <ax-button (onClick)=\"toggleDetailPanel()\">\n        <ax-icon icon=\"{{ isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-hidden ax-flex ax-flex-col\">\n    <div class=\"ax-flex ax-flex-row ax-gap-4 ax-flex-1 ax-min-h-0 ax-overflow-hidden\" #parent id=\"parent\">\n      <div class=\"ax-flex-1 ax-min-w-0 ax-min-h-0 ax-overflow-hidden ax-relative ax-light\">\n        <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n          [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\" (contextmenu)=\"onOrgChartSurfaceContextMenu($event)\">\n        </div>\n        <div class=\"axm-org-chart-page__floating-zoom\">\n          <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"zoomOut()\">\n            <ax-icon class=\"fa-solid fa-minus\"></ax-icon>\n          </ax-button>\n          <ax-button look=\"blank\" class=\"ax-sm __zoom-value\" [text]=\"zoomPercentageLabel()\"\n            (onClick)=\"zoomReset()\"></ax-button>\n          <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"zoomIn()\">\n            <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n        <ax-context-menu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n          (onItemClick)=\"handleContextMenuItemClick($event)\">\n        </ax-context-menu>\n      </div>\n      @if (isDetailPanelOpen() && deviceService.isLarge()) {\n      <axm-org-chart-detail-panel class=\"ax-sticky ax-top-0 ax-z-10 ax-max-h-full ax-flex-none\"\n        [node]=\"detailPanelSelectedNode()\" (panelClose)=\"toggleDetailPanel()\" />\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>", styles: ["@charset \"UTF-8\";foreignObject.axp-chart-node{overflow:visible}.axp-chart-links path.link{pointer-events:none}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer}.axp-chart-node .--node-container.--merged-card{box-sizing:border-box;width:100%;max-width:100%}.axp-chart-node .--node-container{--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.--selected .--container{border-width:2px;border-style:dashed;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-chart-node .--node-container.--search-hit .--container{box-shadow:0 0 0 2px rgb(var(--ax-sys-color-warning-500)),0 0 12px color-mix(in srgb,rgb(var(--ax-sys-color-warning-500)) 35%,transparent)}.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 .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.axp-chart-node .--node-container.--merged-card .--container{width:100%;min-width:0px}.axp-chart-node .--node-container.axm-org-chart-card{border-radius:1rem;--oc-body-mix: 18%;--axm-org-chart-card-body-bg: radial-gradient(ellipse 130% 75% at 105% -5%, color-mix(in srgb, rgb(var(--node-bg-color)) var(--oc-body-mix), rgb(var(--ax-sys-color-lightest-surface))) 0%, color-mix(in srgb, rgb(var(--node-bg-color)) 6%, rgb(var(--ax-sys-color-lightest-surface))) 55%, color-mix(in srgb, rgb(var(--node-bg-color)) 2%, rgb(var(--ax-sys-color-lightest-surface))) 100%);--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 5%, transparent);--oc-ring-2: transparent;--oc-ring-3: transparent;border:1px solid color-mix(in srgb,rgb(var(--node-bg-color)) 12%,transparent);box-shadow:0 1px 2px #00000008,0 4px 12px #0000000d,0 14px 28px -16px #0000000f,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3),inset 0 1px #fffc}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-width:2px;border-style:dashed;border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 50%,rgb(var(--ax-sys-color-border-primary-surface)))}.dark .axp-chart-node .--node-container.axm-org-chart-card{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 22%,rgb(var(--ax-sys-color-border-primary-surface)));box-shadow:0 1px 2px #00000038,0 6px 18px #00000042,0 16px 36px -18px #0000004d,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3)}.dark .axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 58%,rgb(var(--ax-sys-color-border-primary-surface)))}.axp-chart-node .--node-container.axm-org-chart-card.--selected:not(.--search-hit){--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 32%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--node-bg-color)) 22%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--search-hit:not(.--selected){--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 30%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 20%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--selected.--search-hit{--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 28%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 18%, transparent);--oc-ring-3: color-mix(in srgb, rgb(var(--node-bg-color)) 24%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card .--container{overflow:hidden;border-radius:1rem;border-width:0px;border-style:none;box-shadow:none}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__accent{width:100%;flex:none;height:6px;border-top-left-radius:inherit;border-top-right-radius:inherit;border-bottom-left-radius:1.5rem;border-bottom-right-radius:0;background:linear-gradient(90deg,color-mix(in srgb,rgb(var(--node-bg-color)) 70%,white),rgb(var(--node-bg-color)),color-mix(in srgb,rgb(var(--node-bg-color)) 88%,black))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{position:relative;display:flex;width:100%;min-width:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{background-color:rgb(var(--ax-sys-color-lightest-surface));background-image:var(--axm-org-chart-card-body-bg, none)}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--employee .axm-org-chart-card__header--person .axm-org-chart-card__person-name{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--org{display:flex;min-width:0px;align-items:flex-start;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--person{display:flex;min-width:0px;align-items:center;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__leading-icon{display:flex;width:3rem;height:3rem;flex:none;align-items:center;justify-content:center;border-radius:.75rem;color:rgb(var(--node-bg-color));background-color:color-mix(in srgb,rgb(var(--node-bg-color)) 16%,white)}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title-block{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.9;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.85;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person{border-width:0px;padding:.5rem 1rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-label{margin-bottom:.5rem;font-size:.75rem;line-height:1rem;font-weight:700;line-height:1.25;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-row{display:flex;min-width:0px;align-items:center;gap:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:700;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-vacant{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:color-mix(in srgb,rgb(var(--node-bg-color)) 72%,rgb(var(--ax-sys-color-on-surface-variant)))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer{display:flex;flex-direction:row;justify-content:center;padding-top:1rem;padding-bottom:1rem;border-top-width:1px;min-height:3.5rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)));--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric{display:flex;flex:1 1 0%;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-icon{flex:none;font-size:.875rem;line-height:1.25rem;opacity:.95;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-col{display:flex;min-width:0px;flex:none;flex-direction:column;align-items:center;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-value{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;opacity:.75;color:rgba(var(--ax-sys-color-on-surface-variant))}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}.axm-org-chart-page__floating-zoom{position:absolute;bottom:1rem;z-index:20;display:flex;align-items:center;gap:.25rem;border-radius:1rem;padding:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));inset-inline-end:1rem;backdrop-filter:blur(10px);box-shadow:0 8px 20px -12px #0000003d,0 2px 8px #00000014,inset 0 1px #ffffffbf}.axm-org-chart-page__floating-zoom .__zoom-button{border-radius:.75rem;color:rgba(var(--ax-sys-color-on-surface))}.axm-org-chart-page__floating-zoom .__zoom-button:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}.axm-org-chart-page__floating-zoom .__zoom-value{min-width:4rem;border-radius:.75rem;font-weight:600;color:rgba(var(--ax-sys-color-on-surface))}.axm-org-chart-page__floating-zoom .__zoom-value:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-flex-wrap ax-items-center ax-gap-3\">\n        <ax-search-box class=\"ax-w-72\" [(ngModel)]=\"chartSearchQuery\"\n          (onValueChanged)=\"onChartSearchValueChanged($event)\" [placeholder]=\"\n            ('@organization-management:organization-chart.components.chart.search-placeholder' | translate | async) || ''\n          \">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n        @if (chartService.selectedMode() !== 'reporting') {\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-shrink-0 ax-whitespace-nowrap\">\n          <span class=\"ax-text-sm\">{{\n            '@organization-management:organization-chart.components.generate-dialog.fields.show-vacant-leaf-seats.label'\n            | translate\n            | async\n            }}</span>\n          <ax-switch [ngModel]=\"chartService.showVacantLeafSeats()\"\n            (onValueChanged)=\"onVacantLeafSeatsChange($event)\"></ax-switch>\n        </div>\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      @if (deviceService.isLarge()) {\n      <ax-button (onClick)=\"toggleDetailPanel()\">\n        <ax-icon icon=\"{{ isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      }\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-hidden ax-flex ax-flex-col\">\n    <div class=\"ax-flex ax-flex-row ax-gap-4 ax-flex-1 ax-min-h-0 ax-overflow-hidden\" #parent id=\"parent\">\n      <div class=\"ax-flex-1 ax-min-w-0 ax-min-h-0 ax-overflow-hidden ax-relative ax-light\">\n        <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n          [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\" (contextmenu)=\"onOrgChartSurfaceContextMenu($event)\">\n        </div>\n        <axp-layout-floating-zoom-bar\n          [zoomLevel]=\"panZoomLevel()\"\n          (zoomIn)=\"zoomIn()\"\n          (zoomOut)=\"zoomOut()\"\n          (zoomReset)=\"zoomReset()\"\n        />\n        <ax-context-menu [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n          (onItemClick)=\"handleContextMenuItemClick($event)\">\n        </ax-context-menu>\n      </div>\n      @if (isDetailPanelOpen() && deviceService.isLarge()) {\n      <axp-layout-side-detail-panel\n        class=\"ax-sticky ax-top-0 ax-z-10 ax-max-h-full ax-flex-none\"\n        [header]=\"detailPanelHeader()\"\n        [sections]=\"detailPanelSections()\"\n        [emptyState]=\"detailPanelEmptyState()\"\n        [noRowsMessage]=\"detailPanelNoRowsMessage()\"\n        (panelClose)=\"toggleDetailPanel()\"\n      />\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>", styles: ["@charset \"UTF-8\";foreignObject.axp-chart-node{overflow:visible}.axp-chart-links path.link{pointer-events:none}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer}.axp-chart-node .--node-container.--merged-card{box-sizing:border-box;width:100%;max-width:100%}.axp-chart-node .--node-container{--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.--selected .--container{border-width:2px;border-style:dashed;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-chart-node .--node-container.--search-hit .--container{box-shadow:0 0 0 2px rgb(var(--ax-sys-color-warning-500)),0 0 12px color-mix(in srgb,rgb(var(--ax-sys-color-warning-500)) 35%,transparent)}.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 .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.axp-chart-node .--node-container.--merged-card .--container{width:100%;min-width:0px}.axp-chart-node .--node-container.axm-org-chart-card{border-radius:1rem;--oc-body-mix: 18%;--axm-org-chart-card-body-bg: radial-gradient(ellipse 130% 75% at 105% -5%, color-mix(in srgb, rgb(var(--node-bg-color)) var(--oc-body-mix), rgb(var(--ax-sys-color-lightest-surface))) 0%, color-mix(in srgb, rgb(var(--node-bg-color)) 6%, rgb(var(--ax-sys-color-lightest-surface))) 55%, color-mix(in srgb, rgb(var(--node-bg-color)) 2%, rgb(var(--ax-sys-color-lightest-surface))) 100%);--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 5%, transparent);--oc-ring-2: transparent;--oc-ring-3: transparent;border:1px solid color-mix(in srgb,rgb(var(--node-bg-color)) 12%,transparent);box-shadow:0 1px 2px #00000008,0 4px 12px #0000000d,0 14px 28px -16px #0000000f,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3),inset 0 1px #fffc}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-width:2px;border-style:dashed;border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 50%,rgb(var(--ax-sys-color-border-primary-surface)))}.dark .axp-chart-node .--node-container.axm-org-chart-card{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 22%,rgb(var(--ax-sys-color-border-primary-surface)));box-shadow:0 1px 2px #00000038,0 6px 18px #00000042,0 16px 36px -18px #0000004d,0 0 18px var(--oc-ring-1),0 0 10px var(--oc-ring-2),0 0 14px var(--oc-ring-3)}.dark .axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--vacant{border-color:color-mix(in srgb,rgb(var(--node-bg-color)) 58%,rgb(var(--ax-sys-color-border-primary-surface)))}.axp-chart-node .--node-container.axm-org-chart-card.--selected:not(.--search-hit){--oc-ring-1: color-mix(in srgb, rgb(var(--node-bg-color)) 32%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--node-bg-color)) 22%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--search-hit:not(.--selected){--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 30%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 20%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card.--selected.--search-hit{--oc-ring-1: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 28%, transparent);--oc-ring-2: color-mix(in srgb, rgb(var(--ax-sys-color-warning-500)) 18%, transparent);--oc-ring-3: color-mix(in srgb, rgb(var(--node-bg-color)) 24%, transparent)}.axp-chart-node .--node-container.axm-org-chart-card .--container{overflow:hidden;border-radius:1rem;border-width:0px;border-style:none;box-shadow:none}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__accent{width:100%;flex:none;height:6px;border-top-left-radius:inherit;border-top-right-radius:inherit;border-bottom-left-radius:1.5rem;border-bottom-right-radius:0;background:linear-gradient(90deg,color-mix(in srgb,rgb(var(--node-bg-color)) 70%,white),rgb(var(--node-bg-color)),color-mix(in srgb,rgb(var(--node-bg-color)) 88%,black))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{position:relative;display:flex;width:100%;min-width:0px;flex-direction:column;overflow:hidden;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__body{background-color:rgb(var(--ax-sys-color-lightest-surface));background-image:var(--axm-org-chart-card-body-bg, none)}.axp-chart-node .--node-container.axm-org-chart-card.axm-org-chart-card--employee .axm-org-chart-card__header--person .axm-org-chart-card__person-name{font-size:1rem;line-height:1.5rem;font-weight:600}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--org{display:flex;min-width:0px;align-items:flex-start;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__header--person{display:flex;min-width:0px;align-items:center;gap:1rem;padding:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__leading-icon{display:flex;width:3rem;height:3rem;flex:none;align-items:center;justify-content:center;border-radius:.75rem;color:rgb(var(--node-bg-color));background-color:color-mix(in srgb,rgb(var(--node-bg-color)) 16%,white)}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title-block{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.9;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.75rem;line-height:1rem;line-height:1.375;opacity:.85;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person{border-width:0px;padding:.5rem 1rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-label{margin-bottom:.5rem;font-size:.75rem;line-height:1rem;font-weight:700;line-height:1.25;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-row{display:flex;min-width:0px;align-items:center;gap:1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:700;line-height:1.25;color:rgba(var(--ax-sys-color-on-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;line-height:1.375;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__person-vacant{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:color-mix(in srgb,rgb(var(--node-bg-color)) 72%,rgb(var(--ax-sys-color-on-surface-variant)))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer{display:flex;flex-direction:row;justify-content:center;padding-top:1rem;padding-bottom:1rem;border-top-width:1px;min-height:3.5rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer>:not([hidden])~:not([hidden]){--tw-divide-x-reverse: 0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)));--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-divide-opacity, 1))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__footer:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-darkest-surface),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric{display:flex;flex:1 1 0%;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-icon{flex:none;font-size:.875rem;line-height:1.25rem;opacity:.95;color:rgb(var(--node-bg-color))}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-col{display:flex;min-width:0px;flex:none;flex-direction:column;align-items:center;gap:.125rem}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-value{font-size:.875rem;line-height:1.25rem;font-weight:600;line-height:1}.axp-chart-node .--node-container.axm-org-chart-card .axm-org-chart-card__metric-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;opacity:.75;color:rgba(var(--ax-sys-color-on-surface-variant))}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { treeContainer: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], parent: [{ type: i0.ViewChild, args: ['parent', { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXContextMenuComponent), { isSignal: true }] }], panView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPanViewDirective), { isSignal: true }] }] } });
 
 export { AXMOrgChartPage };
-//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-BcHO5kKP.mjs.map
+//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-ChXY8ncD.mjs.map