@acorex/modules 21.0.0-next.37 → 21.0.0-next.40

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

@@ -0,0 +1,1740 @@
+import { AXPanViewDirective } from '@acorex/cdk/pan-view';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i2 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i2$1 from '@acorex/components/menu';
+import { AXContextMenuComponent, AXMenuModule } from '@acorex/components/menu';
+import * as i6 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i7 from '@acorex/components/switch';
+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 { 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 } 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 AXMOrgChartCategory, e as AXMOrgChartDetailPanelComponent } from './acorex-modules-organization-management-acorex-modules-organization-management-CnAHfj2t.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';
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Business unit node: merged unit (head slot) or compact card. */
+class AXMOrgChartBusinessUnitNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.unitFooterMetrics = computed(() => {
+            const node = this.data();
+            const items = [];
+            const roster = this.host.getSubtreeRosterCounts(node);
+            if (roster) {
+                items.push({
+                    icon: 'fa-users',
+                    value: String(roster.people),
+                    title: this.host.chartML.people,
+                });
+                items.push({
+                    icon: 'fa-briefcase',
+                    value: String(roster.positions),
+                    title: this.host.chartML.positions,
+                });
+            }
+            const teams = this.host.getTeamsMembershipCount(node);
+            if (teams != null && teams > 0) {
+                items.push({
+                    icon: 'fa-people-group',
+                    value: String(teams),
+                    title: this.host.chartML.teams,
+                });
+            }
+            return items;
+        }, ...(ngDevMode ? [{ debugName: "unitFooterMetrics" }] : /* istanbul ignore next */ []));
+    }
+    isRegional() {
+        return this.data().metadata?.['isRegional'] === true;
+    }
+    getColorKey() {
+        return this.isRegional() ? 'accent1' : 'accent2';
+    }
+    resolveNodeColorToken() {
+        const raw = this.data().metadata?.['unitTypeColor'];
+        if (typeof raw === 'string' && raw.trim().length > 0) {
+            return raw.trim();
+        }
+        return this.getColorKey();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartBusinessUnitNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartBusinessUnitNodeComponent, isStandalone: true, selector: "axm-org-chart-business-unit-node", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-unit') {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--business-unit\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['unitHead']?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors(resolveNodeColorToken())\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle && host.shouldShowOrgCardSubtitle(data())) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n          @if (data().metadata?.['unitHead']; as unitHead) {\n            <section class=\"axm-org-chart-card__person\">\n              <div class=\"axm-org-chart-card__person-label\">{{ host.chartML.buHead | translate | async }}</div>\n              <div class=\"axm-org-chart-card__person-row\">\n                <axp-avatar\n                  [fullName]=\"unitHead['employeeName'] ?? ''\"\n                  [placeholder]=\"unitHead['vacant'] || !unitHead['employeeName']\"\n                  [size]=\"44\"\n                />\n                <div class=\"axm-org-chart-card__person-text\">\n                  @if (unitHead['vacant'] || !unitHead['employeeName']) {\n                    <span class=\"axm-org-chart-card__person-vacant\">{{\n                      host.chartML.vacant | translate | async\n                    }}</span>\n                  } @else {\n                    <span class=\"axm-org-chart-card__person-name\">{{ unitHead['employeeName'] }}</span>\n                  }\n                  @if (unitHead['positionTitle']) {\n                    <span class=\"axm-org-chart-card__person-role\">{{ unitHead['positionTitle'] | translate | async }}</span>\n                  }\n                </div>\n              </div>\n            </section>\n          }\n        </div>\n        @if (unitFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of unitFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--business-unit\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors(resolveNodeColorToken())\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle && host.shouldShowOrgCardSubtitle(data())) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ 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: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartBusinessUnitNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-business-unit-node', imports: [AXButtonModule, AXDecoratorModule, AXPAvatarComponent, AXTranslationModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-unit') {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--business-unit\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['unitHead']?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors(resolveNodeColorToken())\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle && host.shouldShowOrgCardSubtitle(data())) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n          @if (data().metadata?.['unitHead']; as unitHead) {\n            <section class=\"axm-org-chart-card__person\">\n              <div class=\"axm-org-chart-card__person-label\">{{ host.chartML.buHead | translate | async }}</div>\n              <div class=\"axm-org-chart-card__person-row\">\n                <axp-avatar\n                  [fullName]=\"unitHead['employeeName'] ?? ''\"\n                  [placeholder]=\"unitHead['vacant'] || !unitHead['employeeName']\"\n                  [size]=\"44\"\n                />\n                <div class=\"axm-org-chart-card__person-text\">\n                  @if (unitHead['vacant'] || !unitHead['employeeName']) {\n                    <span class=\"axm-org-chart-card__person-vacant\">{{\n                      host.chartML.vacant | translate | async\n                    }}</span>\n                  } @else {\n                    <span class=\"axm-org-chart-card__person-name\">{{ unitHead['employeeName'] }}</span>\n                  }\n                  @if (unitHead['positionTitle']) {\n                    <span class=\"axm-org-chart-card__person-role\">{{ unitHead['positionTitle'] | translate | async }}</span>\n                  }\n                </div>\n              </div>\n            </section>\n          }\n        </div>\n        @if (unitFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of unitFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--business-unit\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors(resolveNodeColorToken())\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle && host.shouldShowOrgCardSubtitle(data())) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Company node: merged executive (Chief executive slot) or compact company card. */
+class AXMOrgChartCompanyNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.companyFooterMetrics = computed(() => {
+            const node = this.data();
+            const items = [];
+            const roster = this.host.getSubtreeRosterCounts(node);
+            if (roster) {
+                items.push({
+                    icon: 'fa-users',
+                    value: String(roster.people),
+                    title: this.host.chartML.people,
+                });
+                items.push({
+                    icon: 'fa-briefcase',
+                    value: String(roster.positions),
+                    title: this.host.chartML.positions,
+                });
+            }
+            const teams = this.host.getTeamsMembershipCount(node);
+            if (teams != null && teams > 0) {
+                items.push({
+                    icon: 'fa-people-group',
+                    value: String(teams),
+                    title: this.host.chartML.teams,
+                });
+            }
+            return items;
+        }, ...(ngDevMode ? [{ debugName: "companyFooterMetrics" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartCompanyNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartCompanyNodeComponent, isStandalone: true, selector: "axm-org-chart-company-node", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-executive') {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--company\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['topRole']?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('primary')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n          @if (data().metadata?.['topRole']; as topRole) {\n            <section class=\"axm-org-chart-card__person\">\n              <div class=\"axm-org-chart-card__person-label\">{{ host.chartML.chiefExecutive | translate | async }}</div>\n              <div class=\"axm-org-chart-card__person-row\">\n                <axp-avatar\n                  [fullName]=\"topRole['employeeName'] ?? ''\"\n                  [placeholder]=\"topRole['vacant'] || !topRole['employeeName']\"\n                  [size]=\"44\"\n                />\n                <div class=\"axm-org-chart-card__person-text\">\n                  @if (topRole['vacant'] || !topRole['employeeName']) {\n                    <span class=\"axm-org-chart-card__person-vacant\">{{\n                      host.chartML.vacant | translate | async\n                    }}</span>\n                  } @else {\n                    <span class=\"axm-org-chart-card__person-name\">{{ topRole['employeeName'] }}</span>\n                  }\n                  @if (topRole['positionTitle']) {\n                    <span class=\"axm-org-chart-card__person-role\">{{ topRole['positionTitle'] | translate | async }}</span>\n                  }\n                </div>\n              </div>\n            </section>\n          }\n        </div>\n        @if (companyFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of companyFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--company\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('primary')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ 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: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartCompanyNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-company-node', imports: [AXButtonModule, AXDecoratorModule, AXPAvatarComponent, AXTranslationModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-executive') {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--company\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['topRole']?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('primary')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n          @if (data().metadata?.['topRole']; as topRole) {\n            <section class=\"axm-org-chart-card__person\">\n              <div class=\"axm-org-chart-card__person-label\">{{ host.chartML.chiefExecutive | translate | async }}</div>\n              <div class=\"axm-org-chart-card__person-row\">\n                <axp-avatar\n                  [fullName]=\"topRole['employeeName'] ?? ''\"\n                  [placeholder]=\"topRole['vacant'] || !topRole['employeeName']\"\n                  [size]=\"44\"\n                />\n                <div class=\"axm-org-chart-card__person-text\">\n                  @if (topRole['vacant'] || !topRole['employeeName']) {\n                    <span class=\"axm-org-chart-card__person-vacant\">{{\n                      host.chartML.vacant | translate | async\n                    }}</span>\n                  } @else {\n                    <span class=\"axm-org-chart-card__person-name\">{{ topRole['employeeName'] }}</span>\n                  }\n                  @if (topRole['positionTitle']) {\n                    <span class=\"axm-org-chart-card__person-role\">{{ topRole['positionTitle'] | translate | async }}</span>\n                  }\n                </div>\n              </div>\n            </section>\n          }\n        </div>\n        @if (companyFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of companyFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-building';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--company\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('primary')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Employee node: person-forward card or compact icon card. */
+class AXMOrgChartEmployeeNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.employeeFooterMetrics = computed(() => {
+            const teams = this.host.getTeamsMembershipCount(this.data());
+            if (teams == null || teams <= 0) {
+                return [];
+            }
+            return [
+                {
+                    icon: 'fa-people-group',
+                    value: String(teams),
+                    title: this.host.chartML.teams,
+                },
+            ];
+        }, ...(ngDevMode ? [{ debugName: "employeeFooterMetrics" }] : /* istanbul ignore next */ []));
+    }
+    /** Frame color for employee merged cards — distinct from business units (`accent2`). */
+    getColorKey() {
+        return 'accent3';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartEmployeeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartEmployeeNodeComponent, isStandalone: true, selector: "axm-org-chart-employee-node", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'employee-card') {\n    @let titleText = (data().title | translate | async) ?? '';\n    @let subtitleText = data().subtitle ? ((data().subtitle | translate | async) ?? '') : '';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--employee\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors(getColorKey())\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--person\">\n            <axp-avatar [fullName]=\"titleText\" [placeholder]=\"!titleText.trim()\" [size]=\"56\" />\n            <div class=\"axm-org-chart-card__person-text\">\n              @if (titleText.trim()) {\n                <span class=\"axm-org-chart-card__person-name\" [title]=\"titleText\">{{ titleText }}</span>\n              }\n              @if (subtitleText) {\n                <span class=\"axm-org-chart-card__person-role\">{{ subtitleText }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (employeeFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of employeeFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-address-card';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--employee\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('surface')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ 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: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartEmployeeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-employee-node', imports: [AXButtonModule, AXDecoratorModule, AXPAvatarComponent, AXTranslationModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'employee-card') {\n    @let titleText = (data().title | translate | async) ?? '';\n    @let subtitleText = data().subtitle ? ((data().subtitle | translate | async) ?? '') : '';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--employee\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors(getColorKey())\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--person\">\n            <axp-avatar [fullName]=\"titleText\" [placeholder]=\"!titleText.trim()\" [size]=\"56\" />\n            <div class=\"axm-org-chart-card__person-text\">\n              @if (titleText.trim()) {\n                <span class=\"axm-org-chart-card__person-name\" [title]=\"titleText\">{{ titleText }}</span>\n              }\n              @if (subtitleText) {\n                <span class=\"axm-org-chart-card__person-role\">{{ subtitleText }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (employeeFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of employeeFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-address-card';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--employee\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('surface')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Position node: merged manager (occupant slot), IC seat, or compact card. */
+class AXMOrgChartPositionNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.icFooterMetrics = computed(() => {
+            const roster = this.host.getSubtreeRosterCounts(this.data());
+            if (!roster) {
+                return [];
+            }
+            return [
+                {
+                    icon: 'fa-users',
+                    value: String(roster.people),
+                    title: this.host.chartML.people,
+                },
+                {
+                    icon: 'fa-briefcase',
+                    value: String(roster.positions),
+                    title: this.host.chartML.positions,
+                },
+            ];
+        }, ...(ngDevMode ? [{ debugName: "icFooterMetrics" }] : /* istanbul ignore next */ []));
+        this.managerFooterMetrics = computed(() => {
+            const stats = this.data().metadata?.['stats'];
+            const directReports = stats?.['directReports'];
+            if (typeof directReports !== 'number' || !Number.isFinite(directReports) || directReports <= 0) {
+                return [];
+            }
+            return [
+                {
+                    icon: 'fa-users',
+                    value: String(Math.max(0, Math.floor(directReports))),
+                    title: this.host.chartML.directReports,
+                },
+            ];
+        }, ...(ngDevMode ? [{ debugName: "managerFooterMetrics" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartPositionNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartPositionNodeComponent, isStandalone: true, selector: "axm-org-chart-position-node", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-manager') {\n    @let leadIcon = 'fa-user-tie';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--position\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('accent3')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle && host.shouldShowOrgCardSubtitle(data())) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n            </div>\n          </div>\n          <section class=\"axm-org-chart-card__person\">\n            <div class=\"axm-org-chart-card__person-row\">\n              <axp-avatar\n                [fullName]=\"data().metadata?.['occupant']?.['displayName'] ?? ''\"\n                [placeholder]=\"!!data().metadata?.['vacant'] || !data().metadata?.['occupant']?.['displayName']\"\n                [size]=\"44\"\n              />\n              <div class=\"axm-org-chart-card__person-text\">\n                @if (!!data().metadata?.['vacant'] || !data().metadata?.['occupant']?.['displayName']) {\n                  <span class=\"axm-org-chart-card__person-vacant\">{{ host.chartML.vacant | translate | async }}</span>\n                } @else {\n                  <span class=\"axm-org-chart-card__person-name\">{{ data().metadata?.['occupant']?.['displayName'] }}</span>\n                }\n                @if (\n                  data().description &&\n                  !data().metadata?.['vacant'] &&\n                  data().metadata?.['occupant']?.['displayName']\n                ) {\n                  <span class=\"axm-org-chart-card__person-role\">{{ data().description! | translate | async }}</span>\n                }\n              </div>\n            </div>\n          </section>\n        </div>\n        @if (managerFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of managerFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else if (data().metadata?.['chartTemplate'] === 'position-ic') {\n    @let leadIcon = data().icon ?? 'fa-user-tie';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--position\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('accent3')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              } @else if (data().metadata?.['vacant']) {\n                <span class=\"axm-org-chart-card__subtitle\">{{ host.chartML.vacant | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (icFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of icFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-user-tie';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--position\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('accent3')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ 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: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartPositionNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-position-node', imports: [AXButtonModule, AXDecoratorModule, AXPAvatarComponent, AXTranslationModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-manager') {\n    @let leadIcon = 'fa-user-tie';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--position\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('accent3')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle && host.shouldShowOrgCardSubtitle(data())) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n            </div>\n          </div>\n          <section class=\"axm-org-chart-card__person\">\n            <div class=\"axm-org-chart-card__person-row\">\n              <axp-avatar\n                [fullName]=\"data().metadata?.['occupant']?.['displayName'] ?? ''\"\n                [placeholder]=\"!!data().metadata?.['vacant'] || !data().metadata?.['occupant']?.['displayName']\"\n                [size]=\"44\"\n              />\n              <div class=\"axm-org-chart-card__person-text\">\n                @if (!!data().metadata?.['vacant'] || !data().metadata?.['occupant']?.['displayName']) {\n                  <span class=\"axm-org-chart-card__person-vacant\">{{ host.chartML.vacant | translate | async }}</span>\n                } @else {\n                  <span class=\"axm-org-chart-card__person-name\">{{ data().metadata?.['occupant']?.['displayName'] }}</span>\n                }\n                @if (\n                  data().description &&\n                  !data().metadata?.['vacant'] &&\n                  data().metadata?.['occupant']?.['displayName']\n                ) {\n                  <span class=\"axm-org-chart-card__person-role\">{{ data().description! | translate | async }}</span>\n                }\n              </div>\n            </div>\n          </section>\n        </div>\n        @if (managerFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of managerFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else if (data().metadata?.['chartTemplate'] === 'position-ic') {\n    @let leadIcon = data().icon ?? 'fa-user-tie';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--position\"\n      [class.axm-org-chart-card--vacant]=\"!!data().metadata?.['vacant']\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('accent3')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              } @else if (data().metadata?.['vacant']) {\n                <span class=\"axm-org-chart-card__subtitle\">{{ host.chartML.vacant | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (icFooterMetrics().length > 0) {\n          <div class=\"axm-org-chart-card__footer\">\n            @for (m of icFooterMetrics(); track $index) {\n              <div class=\"axm-org-chart-card__metric\">\n                <i [class]=\"'fa-light fa-fw axm-org-chart-card__metric-icon ' + m.icon\"></i>\n                <div class=\"axm-org-chart-card__metric-col\">\n                  <span class=\"axm-org-chart-card__metric-value\">{{ m.value }}</span>\n                  <span\n                    class=\"axm-org-chart-card__metric-title\"\n                    [title]=\"(m.title | translate | async) ?? ''\"\n                    >{{ m.title | translate | async }}</span\n                  >\n                </div>\n              </div>\n            }\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)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    @let leadIcon = data().icon ?? 'fa-user-tie';\n    <div\n      #node\n      class=\"--node-container --merged-card axm-org-chart-card axm-org-chart-card--position\"\n      [attr.data-chart-node-id]=\"data().id\"\n      [class.--selected]=\"host.isNodeSelected(data())\"\n      [style]=\"host.getNodeColors('accent3')\"\n      (click)=\"host.selectNode(data())\"\n      (contextmenu)=\"host.selectNode(data())\"\n    >\n      <div class=\"--container\">\n        <div class=\"axm-org-chart-card__accent\" aria-hidden=\"true\"></div>\n        <div class=\"axm-org-chart-card__body\">\n          <div class=\"axm-org-chart-card__header axm-org-chart-card__header--org\">\n            <div class=\"axm-org-chart-card__leading-icon\">\n              <i [class]=\"'fa-light fa-xl fa-fw ' + leadIcon\"></i>\n            </div>\n            <div class=\"axm-org-chart-card__title-block\">\n              <span class=\"axm-org-chart-card__title\" [title]=\"(data().title | translate | async) ?? ''\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().subtitle) {\n                <span class=\"axm-org-chart-card__subtitle\" [title]=\"(data().subtitle! | translate | async) ?? ''\">{{\n                  data().subtitle! | translate | async\n                }}</span>\n              }\n              @if (data().description) {\n                <span class=\"axm-org-chart-card__desc\">{{ data().description | translate | async }}</span>\n              }\n            </div>\n          </div>\n        </div>\n        @if (data().children && data().children!.length > 0) {\n          <div class=\"--toggle\">\n            <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"host.toggleNode(data(), node)\">\n              <ax-icon\n                icon=\"fa-solid\"\n                [class]=\"data().isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n              ></ax-icon>\n            </ax-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/**
+ * Picks the org chart card by node type. Uses a static @switch (not NgComponentOutlet) so
+ * components render reliably when the host is created in code and moved into an SVG foreignObject.
+ */
+class AXMOrgChartNodeOutletComponent {
+    constructor() {
+        this.NodeTypes = AXMOrgChartNodeType;
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartNodeOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartNodeOutletComponent, isStandalone: true, selector: "axm-org-chart-node-outlet", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "axm-org-chart-node-outlet" }, ngImport: i0, template: "@switch (data().type) {\n@case (NodeTypes.Company) {\n<axm-org-chart-company-node [data]=\"data()\" />\n} @case (NodeTypes.BusinessUnit) {\n<axm-org-chart-business-unit-node [data]=\"data()\" />\n} @case (NodeTypes.Position) {\n<axm-org-chart-position-node [data]=\"data()\" />\n} @case (NodeTypes.Employee) {\n<axm-org-chart-employee-node [data]=\"data()\" />\n} @default {\n<axm-org-chart-company-node [data]=\"data()\" />\n} }", styles: ["axm-org-chart-node-outlet{display:block;width:100%;min-height:1px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: AXMOrgChartCompanyNodeComponent, selector: "axm-org-chart-company-node", inputs: ["data"] }, { kind: "component", type: AXMOrgChartBusinessUnitNodeComponent, selector: "axm-org-chart-business-unit-node", inputs: ["data"] }, { kind: "component", type: AXMOrgChartPositionNodeComponent, selector: "axm-org-chart-position-node", inputs: ["data"] }, { kind: "component", type: AXMOrgChartEmployeeNodeComponent, selector: "axm-org-chart-employee-node", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartNodeOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-node-outlet', imports: [
+                        AXMOrgChartCompanyNodeComponent,
+                        AXMOrgChartBusinessUnitNodeComponent,
+                        AXMOrgChartPositionNodeComponent,
+                        AXMOrgChartEmployeeNodeComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'axm-org-chart-node-outlet',
+                    }, template: "@switch (data().type) {\n@case (NodeTypes.Company) {\n<axm-org-chart-company-node [data]=\"data()\" />\n} @case (NodeTypes.BusinessUnit) {\n<axm-org-chart-business-unit-node [data]=\"data()\" />\n} @case (NodeTypes.Position) {\n<axm-org-chart-position-node [data]=\"data()\" />\n} @case (NodeTypes.Employee) {\n<axm-org-chart-employee-node [data]=\"data()\" />\n} @default {\n<axm-org-chart-company-node [data]=\"data()\" />\n} }", styles: ["axm-org-chart-node-outlet{display:block;width:100%;min-height:1px;box-sizing:border-box}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Service ----
+class AXMOrgChartNodeContributionService {
+    constructor() {
+        this.contributors = inject(AXM_ORG_CHART_NODE_CONTRIBUTOR, { optional: true }) ?? [];
+    }
+    /**
+     * Collects and sorts menu actions contributed by all providers for the current node context.
+     */
+    async getMenuActions(context) {
+        const buckets = await Promise.all(this.contributors.map((provider) => provider.getMenuActions(context)));
+        return buckets
+            .flat()
+            .sort((a, b) => (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER));
+    }
+    /**
+     * Collects and sorts related info blocks contributed for the selected node.
+     * This is used by the upcoming node detail drawer.
+     */
+    async getInfoContributions(context) {
+        const buckets = await Promise.all(this.contributors.map((provider) => provider.getInfoContributions?.(context) ?? Promise.resolve([])));
+        return buckets
+            .flat()
+            .sort((a, b) => (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartNodeContributionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartNodeContributionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartNodeContributionService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Drops leaf vacant seat position nodes from the persisted chart tree (matches generator behavior when
+ * `showVacantLeafSeats` is false).
+ */
+function omitVacantLeafSeatNodes(root) {
+    const clone = structuredClone(root);
+    const visit = (node) => {
+        if (!node.children?.length) {
+            return;
+        }
+        node.children = node.children.filter((child) => {
+            const hideVacantSeat = child.type === AXMOrgChartNodeType.Position && child.metadata?.['vacant'] === true;
+            return !hideVacantSeat;
+        });
+        for (const child of node.children) {
+            visit(child);
+        }
+    };
+    visit(clone);
+    return clone;
+}
+
+class AXMOrgChartService {
+    constructor() {
+        this.entityService = inject(AXPEntityService);
+        this.chartData = this.entityService
+            .withEntity(RootConfig.module.name, RootConfig.entities.chart.name)
+            .data();
+        this.loadingDialog = inject(AXLoadingDialogService);
+        this.exportService = inject(AXPExportService);
+        this.translationService = inject(AXTranslationService);
+        this.commandService = inject(AXPCommandService);
+        this.settingsService = inject(AXPSettingsService);
+        this._modesBundle = signal(null, ...(ngDevMode ? [{ debugName: "_modesBundle" }] : /* istanbul ignore next */ []));
+        this._selectedMode = signal('structure', ...(ngDevMode ? [{ debugName: "_selectedMode" }] : /* istanbul ignore next */ []));
+        this._showVacantLeafSeats = signal(true, ...(ngDevMode ? [{ debugName: "_showVacantLeafSeats" }] : /* istanbul ignore next */ []));
+        this._rootNode = signal({
+            id: AXPDataGenerator.uuid(),
+            type: AXMOrgChartNodeType.Company,
+            title: createMultiLanguageString('Company', 'شرکت'),
+        }, ...(ngDevMode ? [{ debugName: "_rootNode" }] : /* istanbul ignore next */ []));
+        this.rootNode = this._rootNode.asReadonly();
+        this.selectedMode = this._selectedMode.asReadonly();
+        this.showVacantLeafSeats = this._showVacantLeafSeats.asReadonly();
+    }
+    /**
+     * Applies user prefs resolved before first paint (route resolver). Does not persist.
+     */
+    applyHydratedUiPrefs(prefs) {
+        if (!prefs) {
+            return;
+        }
+        if (prefs.selectedMode !== undefined) {
+            this._selectedMode.set(prefs.selectedMode);
+        }
+        if (prefs.showVacantLeafSeats !== undefined) {
+            this._showVacantLeafSeats.set(prefs.showVacantLeafSeats);
+        }
+    }
+    /**
+     * Applies current mode + vacant visibility from the cached bundle onto {@link rootNode}.
+     */
+    applyDisplayRoot() {
+        const bundle = this._modesBundle();
+        if (!bundle?.modes) {
+            return;
+        }
+        const modeKey = this._selectedMode();
+        let tree = structuredClone(bundle.modes[modeKey]);
+        if (!this._showVacantLeafSeats()) {
+            tree = omitVacantLeafSeatNodes(tree);
+        }
+        this._rootNode.set(tree);
+    }
+    setChartMode(mode) {
+        this._selectedMode.set(mode);
+        this.applyDisplayRoot();
+        this.persistChartMode(mode);
+    }
+    setShowVacantLeafSeats(value) {
+        const normalized = normalizeVacantLeafSeatsSetting(value);
+        if (normalized === undefined) {
+            return;
+        }
+        this._showVacantLeafSeats.set(normalized);
+        this.applyDisplayRoot();
+        this.persistShowVacantLeafSeats(normalized);
+    }
+    //#region ---- User chart preferences (settings) ----
+    /**
+     * Reads persisted chart UI preferences into signals (does not persist).
+     */
+    async restoreChartUiFromSettings() {
+        try {
+            const userScope = this.settingsService.scope(AXPPlatformScope.User);
+            const modeRaw = await userScope.get(AXPOrganizationManagementSettings.HierarchyChartMode);
+            const mode = parseOrgChartMode(modeRaw);
+            if (mode !== undefined) {
+                this._selectedMode.set(mode);
+            }
+            const vacantRaw = await userScope.get(AXPOrganizationManagementSettings.HierarchyChartShowVacantLeafSeats);
+            const vacant = normalizeVacantLeafSeatsSetting(vacantRaw);
+            if (vacant !== undefined) {
+                this._showVacantLeafSeats.set(vacant);
+            }
+        }
+        catch {
+            // Keep constructor defaults when settings are unavailable.
+        }
+    }
+    persistChartMode(mode) {
+        void this.settingsService
+            .scope(AXPPlatformScope.User)
+            .set(AXPOrganizationManagementSettings.HierarchyChartMode, mode)
+            .catch(() => { });
+    }
+    persistShowVacantLeafSeats(value) {
+        void this.settingsService
+            .scope(AXPPlatformScope.User)
+            .set(AXPOrganizationManagementSettings.HierarchyChartShowVacantLeafSeats, value)
+            .catch(() => { });
+    }
+    //#endregion
+    async load() {
+        const first = (await this.chartData.query({
+            skip: 0,
+            take: 1,
+            sort: [{ field: 'version', dir: 'desc' }],
+        })).items[0];
+        const structure = first?.structure;
+        if (structure?.modes?.structure &&
+            structure?.modes?.location &&
+            structure?.modes?.reporting &&
+            structure?.modes?.positionHierarchy) {
+            this._modesBundle.set(structure);
+            await this.restoreChartUiFromSettings();
+            this.applyDisplayRoot();
+            return;
+        }
+        await this.generate();
+        await this.load();
+    }
+    async generate() {
+        await this.commandService.execute('OrganizationManagement.OrgChart:Generate', {});
+    }
+    //#region ----   Printing   ----
+    async printChart(element) {
+        const d = this.loadingDialog.show({
+            title: 'Printing Organization Chart...',
+            mode: 'determinate',
+            progressColor: 'primary',
+            progressValue: 0,
+            status: '0/10',
+            text: 'Initializing print process...',
+            buttons: [{ text: 'Cancel', color: 'danger', onClick: () => d.close() }],
+        });
+        try {
+            await this.updateStep(d, await this.translate('@organization-management:organization-chart.states.preparing-document'), 10, '1/10');
+            const chartElement = element;
+            const { originalStyles, modifiedStyles } = this.expandChart(chartElement);
+            await this.updateStep(d, await this.translate('@organization-management:organization-chart.states.rendering-chart-image'), 25, '2.5/10');
+            const blob = await this.exportService.generateBlobFromElement(chartElement, {
+                popup: true,
+                filter: (node) => !(node instanceof Element && node.classList.contains('--toggle')),
+                bgcolor: 'transparent',
+                scale: 2,
+                quality: 1,
+                height: Number.parseInt(modifiedStyles.modifiedHeight),
+                width: Number.parseInt(modifiedStyles.modifiedWidth),
+            });
+            await this.updateStep(d, await this.translate('@organization-management:organization-chart.states.finalizing-image-processing'), 50, '5/10');
+            this.restoreChartStyles(chartElement, originalStyles);
+            await this.updateStep(d, await this.translate('@organization-management:organization-chart.states.downloading-image'), 75, '7.5/10');
+            this.exportService.download(blob, 'org-chart.png');
+            await this.updateStep(d, await this.translate('@organization-management:organization-chart.states.process-complete'), 100, '10/10');
+            setTimeout(() => d.close(), 1500);
+        }
+        catch (err) {
+            console.error('Error capturing chart:', err);
+            await this.updateStep(d, await this.translate('@organization-management:organization-chart.states.failed-to-generate-chart-image'), 100, 'Error', 'danger');
+            d.close();
+        }
+    }
+    expandChart(chartElement) {
+        const originalStyles = {
+            originalOverflow: chartElement.style.overflow,
+            originalWidth: chartElement.style.width,
+            originalHeight: chartElement.style.height,
+        };
+        const modifiedStyles = {
+            modifiedOverflow: 'visible',
+            modifiedWidth: `${chartElement.scrollWidth}px`,
+            modifiedHeight: `${chartElement.scrollHeight}px`,
+        };
+        chartElement.style.overflow = modifiedStyles.modifiedOverflow;
+        chartElement.style.width = modifiedStyles.modifiedWidth;
+        chartElement.style.height = modifiedStyles.modifiedHeight;
+        return { originalStyles, modifiedStyles };
+    }
+    restoreChartStyles(chartElement, originalStyles) {
+        chartElement.style.overflow = originalStyles.originalOverflow;
+        chartElement.style.width = originalStyles.originalWidth;
+        chartElement.style.height = originalStyles.originalHeight;
+    }
+    async updateStep(dialog, text, progress, status, color = 'primary') {
+        return new Promise((resolve) => {
+            dialog.setProgressColor(color);
+            dialog.setProgressText(text);
+            dialog.setProgressValue(progress);
+            dialog.setProgressStatus(status);
+            resolve();
+        });
+    }
+    async translate(key) {
+        return (await this.translationService.translateAsync(key)) + '...';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartService, decorators: [{
+            type: Injectable
+        }] });
+
+//#endregion
+//#region ---- Component ----
+/**
+ * Component for displaying and interacting with an organizational chart.
+ */
+class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
+    //#endregion
+    //#region ---- Constructor ----
+    constructor() {
+        super();
+        //#region ---- Services & Dependencies ----
+        this.rootConfig = RootConfig;
+        this.treeContainer = viewChild.required('chart');
+        this.parent = viewChild.required('parent');
+        this.contextMenu = viewChild(AXContextMenuComponent, ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+        this.panView = viewChild(AXPanViewDirective, ...(ngDevMode ? [{ debugName: "panView" }] : /* istanbul ignore next */ []));
+        this.ngzone = inject(NgZone);
+        this.pageInjector = inject(Injector);
+        this.viewContainerRef = inject(ViewContainerRef);
+        // printing is handled by service itself
+        this.chartService = inject(AXMOrgChartService);
+        this.nodeContributionService = inject(AXMOrgChartNodeContributionService);
+        this.route = inject(ActivatedRoute);
+        this.localeId = inject(LOCALE_ID);
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ---- Chart State & UI Metadata ----
+        this.NODE_STROKE_COLOR = 'rgba(var(--ax-sys-color-primary-400))';
+        this.LINK_STROKE_WIDTH = 1;
+        /**
+         * SVG `foreignObject` viewport and tree layout spacing.
+         * Keep card `min-width` in `org-chart.page.scss` aligned with {@link chartNodeWidth}.
+         */
+        this.chartNodeWidth = 360;
+        this.chartNodeHeight = 280;
+        this.chartHorizontalSpacing = 24;
+        this.chartVerticalSpacing = 48;
+        /** Nudges card content inside the allocated foreignObject band (connectors use rendered bounds). */
+        this.chartNodeYOffset = 10;
+        this.isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+        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). */
+        this.isDetailPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDetailPanelOpen" }] : /* istanbul ignore next */ []));
+        this.activeContextNode = null;
+        this.activeContextMenuActions = new Map();
+        this.nodeTypes = [
+            { title: 'Company', color: 'primary', icon: 'fal fa-building', category: AXMOrgChartCategory.Company },
+            { title: 'Business Unit', color: 'accent2', icon: 'fal fa-sitemap', category: AXMOrgChartCategory.BusinessUnit },
+            { title: 'Position', color: 'accent3', icon: 'fal fa-user-tie', category: AXMOrgChartCategory.Position },
+            { title: 'Employee', color: 'surface', icon: 'fal fa-address-card', category: AXMOrgChartCategory.Employee },
+        ];
+        /**
+         * UI chrome for chart cards; align copy with `organization-chart.organization-chart.nodes` / mock `org-chart-labels`.
+         */
+        this.chartML = {
+            vacant: createMultiLanguageString('Vacant', 'خالی'),
+            directReports: createMultiLanguageString('Direct reports', 'گزارش مستقیم'),
+            teams: createMultiLanguageString('Teams', 'تیم‌ها'),
+            people: createMultiLanguageString('People', 'اعضا'),
+            positions: createMultiLanguageString('Positions', 'سمت‌ها'),
+            /** Label above the chief executive slot on merged company cards. */
+            chiefExecutive: createMultiLanguageString('Chief executive', 'مدیر اجرایی'),
+            buHead: createMultiLanguageString('Head', 'سرپرست'),
+            buPosition: createMultiLanguageString('Position', 'عنوان سمت'),
+            unitType: createMultiLanguageString('Unit type', 'نوع واحد'),
+            businessUnit: createMultiLanguageString('Business unit', 'واحد سازمانی'),
+            location: createMultiLanguageString('Location', 'موقعیت'),
+            code: createMultiLanguageString('Code', 'کد'),
+            capacity: createMultiLanguageString('Capacity', 'ظرفیت'),
+            level: createMultiLanguageString('Level', 'سطح'),
+            email: createMultiLanguageString('Email', 'ایمیل'),
+            phone: createMultiLanguageString('Phone', 'تلفن'),
+            employmentType: createMultiLanguageString('Employment type', 'نوع همکاری'),
+            workMode: createMultiLanguageString('Work mode', 'نحوه کار'),
+            more: '@organization-management:organization-chart.node-actions.more',
+            add: '@organization-management:organization-chart.node-actions.add',
+            noActionsAvailable: '@organization-management:organization-chart.node-actions.no-actions',
+        };
+        /**
+         * Selected tree node for the detail panel; stays in sync with {@link selectedNodeId}.
+         */
+        this.detailPanelSelectedNode = computed(() => {
+            const id = this.selectedNodeId();
+            if (id == null || id === '') {
+                return null;
+            }
+            return this.findNodeInTree(this.chartService.rootNode(), id);
+        }, ...(ngDevMode ? [{ debugName: "detailPanelSelectedNode" }] : /* istanbul ignore next */ []));
+        /** Bound to `ax-search-box` in the page toolbar. */
+        this.chartSearchQuery = '';
+        this.chartSearchPendingPresentation = 'none';
+        this.chartSearchPendingFocusId = null;
+        //#endregion
+        //#region ---- Initialization ----
+        this.#initialize = afterNextRender(async () => {
+            this.d3 = await import('d3');
+            await this.refresh();
+        });
+        this.chartService.applyHydratedUiPrefs(this.route.snapshot.data['orgChartUi']);
+    }
+    //#endregion
+    //#region ---- Initialization ----
+    #initialize;
+    //#endregion
+    //#region ---- Detail Panel ----
+    toggleDetailPanel() {
+        this.isDetailPanelOpen.update((open) => !open);
+    }
+    //#endregion
+    //#region ---- Pan & Fullscreen ----
+    /**
+     * Zooms in the chart.
+     */
+    zoomIn() {
+        this.panView()?.zoomIn();
+    }
+    /**
+     * Zooms out the chart.
+     */
+    zoomOut() {
+        this.panView()?.zoomOut();
+    }
+    /**
+     * Resets the zoom level and pan position of the chart.
+     */
+    zoomReset() {
+        this.panView()?.resetPosition();
+    }
+    /**
+     * Toggles fullscreen mode for the chart.
+     */
+    toggleFullscreen() {
+        if (this.isFullscreen()) {
+            document.exitFullscreen();
+            this.isFullscreen.set(false);
+        }
+        else {
+            this.parent().nativeElement.requestFullscreen();
+            this.isFullscreen.set(true);
+        }
+        document.querySelector(`foreignObject[node="node-${this.chartService.rootNode().id}"]`)?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'center',
+        });
+    }
+    //#endregion
+    //#region ---- Chart Search ----
+    onChartSearchValueChanged(event) {
+        const v = event.value;
+        this.chartSearchQuery = typeof v === 'string' ? v : '';
+        this.applyChartSearchFromQuery();
+    }
+    applyChartSearchFromQuery() {
+        const q = this.chartSearchQuery.trim().toLowerCase();
+        if (!q) {
+            this.chartSearchPendingPresentation = 'none';
+            this.chartSearchPendingFocusId = null;
+            this.applySearchHitClasses(new Set());
+            return;
+        }
+        const matches = this.findNodesMatchingChartSearch(this.chartService.rootNode(), q);
+        if (matches.length === 0) {
+            this.chartSearchPendingPresentation = 'none';
+            this.chartSearchPendingFocusId = null;
+            this.applySearchHitClasses(new Set());
+            return;
+        }
+        for (const node of matches) {
+            this.ensureExpandedPathToNode(node.id);
+        }
+        this.chartSearchPendingPresentation = matches.length === 1 ? 'fit-one' : 'fit-all';
+        this.chartSearchPendingFocusId = matches.length === 1 ? matches[0].id : null;
+        this.redrawChart();
+    }
+    completeChartRenderPresentation() {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.ngzone.run(() => {
+                    const q = this.chartSearchQuery.trim().toLowerCase();
+                    const mode = this.chartSearchPendingPresentation;
+                    const focusId = this.chartSearchPendingFocusId;
+                    this.chartSearchPendingPresentation = 'none';
+                    this.chartSearchPendingFocusId = null;
+                    if (!q) {
+                        this.applySearchHitClasses(new Set());
+                        return;
+                    }
+                    const matches = this.findNodesMatchingChartSearch(this.chartService.rootNode(), q);
+                    this.applySearchHitClasses(new Set(matches.map((m) => m.id)));
+                    if (matches.length === 0) {
+                        return;
+                    }
+                    if (mode === 'fit-one' && focusId != null && focusId !== '') {
+                        const node = this.findNodeInTree(this.chartService.rootNode(), focusId);
+                        if (node) {
+                            this.selectNode(node);
+                        }
+                        this.panView()?.resetPosition();
+                        requestAnimationFrame(() => this.centerChartOnForeignObject(focusId));
+                    }
+                    else if (mode === 'fit-all') {
+                        this.panView()?.resetPosition();
+                    }
+                });
+            });
+        });
+    }
+    findNodesMatchingChartSearch(root, q) {
+        const all = [];
+        this.collectAllChartNodes(root, all);
+        return all.filter((n) => this.nodeMatchesChartSearchText(n, q));
+    }
+    collectAllChartNodes(node, out) {
+        out.push(node);
+        for (const child of node.children ?? []) {
+            this.collectAllChartNodes(child, out);
+        }
+    }
+    nodeMatchesChartSearchText(node, q) {
+        const parts = [];
+        parts.push(resolveMultiLanguageString(node.title, this.localeId));
+        if (node.subtitle != null) {
+            parts.push(resolveMultiLanguageString(node.subtitle, this.localeId));
+        }
+        if (node.description != null) {
+            parts.push(resolveMultiLanguageString(node.description, this.localeId));
+        }
+        const haystack = parts.join(' ').trim().toLowerCase();
+        return haystack.includes(q);
+    }
+    findPathToRootNode(root, id) {
+        if (root.id === id) {
+            return [root];
+        }
+        for (const child of root.children ?? []) {
+            const sub = this.findPathToRootNode(child, id);
+            if (sub) {
+                return [root, ...sub];
+            }
+        }
+        return null;
+    }
+    ensureExpandedPathToNode(targetId) {
+        const path = this.findPathToRootNode(this.chartService.rootNode(), targetId);
+        if (path == null) {
+            return;
+        }
+        for (let i = 0; i < path.length - 1; i++) {
+            path[i].isExpanded = true;
+        }
+    }
+    applySearchHitClasses(ids) {
+        const nodes = document.querySelectorAll('foreignObject.axp-chart-node');
+        for (let i = 0; i < nodes.length; i++) {
+            const fo = nodes[i];
+            const raw = fo.getAttribute('node');
+            const nodeId = raw?.startsWith('node-') === true ? raw.slice('node-'.length) : (raw ?? '');
+            const container = fo.querySelector('.--node-container');
+            if (container == null) {
+                continue;
+            }
+            if (ids.has(nodeId)) {
+                container.classList.add('--search-hit');
+            }
+            else {
+                container.classList.remove('--search-hit');
+            }
+        }
+    }
+    centerChartOnForeignObject(nodeId) {
+        const fo = document.querySelector(`foreignObject[node="node-${nodeId}"]`);
+        const panel = this.parent().nativeElement;
+        if (fo == null) {
+            return;
+        }
+        const foRect = fo.getBoundingClientRect();
+        const cRect = panel.getBoundingClientRect();
+        const dx = cRect.left + cRect.width / 2 - (foRect.left + foRect.width / 2);
+        const dy = cRect.top + cRect.height / 2 - (foRect.top + foRect.height / 2);
+        this.panX.update((x) => x + dx);
+        this.panY.update((y) => y + dy);
+        this.syncPanViewTransformFromSignals();
+    }
+    /**
+     * Applies the same transform formula as {@link AXPanViewDirective} so programmatic pan updates take effect immediately.
+     */
+    syncPanViewTransformFromSignals() {
+        const el = this.treeContainer().nativeElement;
+        el.style.transform = `translate(${this.panX()}px, ${this.panY()}px) scale(${this.panZoomLevel() / 100})`;
+    }
+    //#endregion
+    //#region ---- Chart Layout Metrics ----
+    /**
+     * Calculates the maximum depth of the organizational chart.
+     * @param node - The root node of the chart.
+     * @returns The maximum depth of the chart.
+     */
+    calculateMaxDepth(node) {
+        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
+            return 1;
+        }
+        return 1 + Math.max(...node.children.map((child) => this.calculateMaxDepth(child)));
+    }
+    /**
+     * Calculates the maximum breadth of the organizational chart.
+     * @param node - The root node of the chart.
+     * @returns The maximum breadth of the chart.
+     */
+    calculateMaxBreadth(node) {
+        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
+            return 1;
+        }
+        return node.children.reduce((acc, child) => acc + this.calculateMaxBreadth(child), 0);
+    }
+    //#endregion
+    //#region ---- Chart Rendering ----
+    /**
+     * Creates and renders the organizational chart.
+     * @param el - The container element for the chart.
+     * @param data - The root node of the organizational chart.
+     */
+    createChart(el, data) {
+        if (!this.d3) {
+            return;
+        }
+        const nw = this.chartNodeWidth;
+        const nh = this.chartNodeHeight;
+        const hGap = this.chartHorizontalSpacing;
+        const vGap = this.chartVerticalSpacing;
+        const yOff = this.chartNodeYOffset;
+        this.ngzone.runOutsideAngular(() => {
+            this.clearChart(el);
+            const newSvg = this.d3.select(el).append('svg');
+            const root = this.d3.hierarchy(data);
+            root.descendants().forEach((node) => {
+                if (node.data.isExpanded === false) {
+                    node.children = undefined;
+                }
+            });
+            const treeLayout = this.d3
+                .tree()
+                .nodeSize([nw + hGap, nh + vGap]);
+            treeLayout(root);
+            let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+            root.descendants().forEach((d) => {
+                if (d.x < minX)
+                    minX = d.x;
+                if (d.x > maxX)
+                    maxX = d.x;
+                if (d.y < minY)
+                    minY = d.y;
+                if (d.y > maxY)
+                    maxY = d.y;
+            });
+            const CONTAINER_WIDTH = maxX - minX + nw + 2 * hGap;
+            const CONTAINER_HEIGHT = maxY - minY + nh + 2 * vGap;
+            newSvg.attr('width', CONTAINER_WIDTH).attr('height', CONTAINER_HEIGHT);
+            const g = newSvg
+                .append('g')
+                .attr('transform', `translate(${-minX + nw / 2 + hGap / 2}, ${-minY + nh / 2 + vGap / 2})`);
+            const linksLayer = g.append('g').attr('class', 'axp-chart-links');
+            const nodesLayer = g.append('g').attr('class', 'axp-chart-nodes');
+            linksLayer
+                .selectAll('.link')
+                .data(root.links())
+                .enter()
+                .append('path')
+                .attr('class', 'link')
+                .attr('d', (d) => this.computeOrgChartLinkPath(d, nw, nh, yOff))
+                .attr('fill', 'none')
+                .attr('stroke', this.NODE_STROKE_COLOR)
+                .attr('stroke-width', this.LINK_STROKE_WIDTH)
+                .attr('from', (d) => `node-${d.source.data.id}`)
+                .attr('to', (d) => `node-${d.target.data.id}`);
+            nodesLayer
+                .selectAll('.axp-chart-node')
+                .data(root.descendants())
+                .enter()
+                .append('foreignObject')
+                .attr('class', 'axp-chart-node')
+                .attr('node', (d) => `node-${d.data.id}`)
+                .attr('x', (d) => d.x - nw / 2)
+                .attr('y', (d) => d.y - nh / 2 + yOff)
+                .attr('width', nw)
+                .attr('height', nh)
+                .each((d) => this.renderNodeTemplate(d.data, d.x, d.y));
+            const svgEl = newSvg.node();
+            if (svgEl) {
+                this.scheduleChartLinkPathRefresh(svgEl, nw, nh, yOff);
+            }
+        });
+        if (!this.isChartRendered) {
+            // document.querySelector(`foreignObject[node="node-${data.id}"] .--heading-container`)?.scrollIntoView({
+            //   behavior: 'smooth',
+            //   block: 'center',
+            //   inline: 'center',
+            // });
+            this.isChartRendered = true;
+            this.panView()?.resetPosition();
+        }
+        this.ngzone.run(() => {
+            this.completeChartRenderPresentation();
+        });
+    }
+    /**
+     * Orthogonal elbow between two nodes using measured card bounds inside each foreignObject when available.
+     */
+    computeOrgChartLinkPath(d, nodeWidth, nodeHeight, nodeYOffset) {
+        const source = d.source;
+        const target = d.target;
+        const EDGE_PADDING = 2;
+        const MIN_VERTICAL_GAP = 10;
+        const sourceBounds = this.getRenderedNodeBounds(source.data.id);
+        const targetBounds = this.getRenderedNodeBounds(target.data.id);
+        const foSourceTop = source.y - nodeHeight / 2 + nodeYOffset;
+        const foTargetTop = target.y - nodeHeight / 2 + nodeYOffset;
+        let sourceBottomY = sourceBounds != null
+            ? foSourceTop + sourceBounds.topOffset + sourceBounds.height
+            : source.y + nodeHeight / 2 + nodeYOffset - EDGE_PADDING;
+        let targetTopY = targetBounds != null
+            ? foTargetTop + targetBounds.topOffset
+            : target.y - nodeHeight / 2 + nodeYOffset + EDGE_PADDING;
+        sourceBottomY += EDGE_PADDING;
+        targetTopY -= EDGE_PADDING;
+        if (sourceBottomY >= targetTopY - MIN_VERTICAL_GAP) {
+            sourceBottomY = source.y + nodeYOffset;
+            targetTopY = target.y - 10;
+        }
+        return `M${source.x},${sourceBottomY}V${(sourceBottomY + targetTopY) / 2}H${target.x}V${targetTopY}`;
+    }
+    /**
+     * Node templates render asynchronously; remap connectors after layout so edges use real card heights.
+     */
+    scheduleChartLinkPathRefresh(svg, nodeWidth, nodeHeight, nodeYOffset) {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.ngzone.runOutsideAngular(() => {
+                        this.refreshChartLinkPaths(svg, nodeWidth, nodeHeight, nodeYOffset);
+                    });
+                });
+            });
+        });
+    }
+    refreshChartLinkPaths(svg, nodeWidth, nodeHeight, nodeYOffset) {
+        if (!this.d3) {
+            return;
+        }
+        this.d3
+            .select(svg)
+            .selectAll('g.axp-chart-links path.link')
+            .attr('d', (d) => this.computeOrgChartLinkPath(d, nodeWidth, nodeHeight, nodeYOffset));
+    }
+    /**
+     * Reads rendered bounds for a node card inside its foreignObject.
+     */
+    getRenderedNodeBounds(nodeId) {
+        const foreignObject = document.querySelector(`foreignObject[node="node-${nodeId}"]`);
+        const nodeContainer = foreignObject?.querySelector('.--node-container');
+        if (!foreignObject || !nodeContainer) {
+            return null;
+        }
+        return {
+            topOffset: nodeContainer.offsetTop,
+            height: nodeContainer.offsetHeight,
+        };
+    }
+    /**
+     * Renders the node template for a given organizational node.
+     * @param data - The node data.
+     * @param x - The x-coordinate of the node.
+     * @param y - The y-coordinate of the node.
+     */
+    renderNodeTemplate(data, _x, _y) {
+        if (data.type == null) {
+            set(data, 'type', AXMOrgChartNodeType.Company);
+        }
+        set(data, 'category', data.type);
+        // D3 runs inside runOutsideAngular; created views must be updated inside the zone.
+        this.ngzone.run(() => {
+            // Dynamic subviews can use an injector that does not inherit the page `providers`.
+            // Bridge `AXM_ORG_CHART_HOST` explicitly so child node components can inject it.
+            const nodeTreeInjector = Injector.create({
+                parent: this.pageInjector,
+                providers: [{ provide: AXM_ORG_CHART_HOST, useValue: this }],
+            });
+            const ref = this.viewContainerRef.createComponent(AXMOrgChartNodeOutletComponent, { injector: nodeTreeInjector });
+            ref.setInput('data', data);
+            const nodeElement = this.d3.select(this.treeContainer().nativeElement).select(`[node="node-${data.id}"]`);
+            const element = nodeElement.node();
+            if (element) {
+                element.appendChild(ref.location.nativeElement);
+                ref.changeDetectorRef.detectChanges();
+            }
+            else {
+                ref.destroy();
+            }
+        });
+    }
+    /**
+     * Toggles the expansion state of a node.
+     * @param data - The node data.
+     * @param el - The HTML element representing the node.
+     */
+    toggleNode(data, _el) {
+        data.isExpanded = data.isExpanded === undefined ? false : !data.isExpanded;
+        this.selectedNodeId.set(data.id);
+        this.createChart(this.treeContainer().nativeElement, this.chartService.rootNode());
+        // el.scrollIntoView({
+        //   behavior: 'smooth',
+        // });
+    }
+    /**
+     * Clears the chart from the container element.
+     * @param el - The container element.
+     */
+    clearChart(el) {
+        if (this.d3) {
+            this.d3.select(el).select('svg').remove();
+            this.viewContainerRef.clear();
+        }
+    }
+    redrawChart() {
+        if (!this.d3 || !this.treeContainer()?.nativeElement) {
+            return;
+        }
+        this.createChart(this.treeContainer().nativeElement, this.chartService.rootNode());
+    }
+    async refresh() {
+        if (this.d3) {
+            await this.chartService.load();
+            this.redrawChart();
+        }
+    }
+    onVacantLeafSeatsChange(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.chartService.setShowVacantLeafSeats(event.value);
+        this.redrawChart();
+    }
+    //#endregion
+    //#region ---- Context Menu ----
+    /**
+     * Handles right-click on the chart surface. Context menu items must be ready before `showAt`;
+     * `AXContextMenuComponent` assigns `items` synchronously after `onOpening`, so async `onOpening` handlers leave the menu empty.
+     */
+    onOrgChartSurfaceContextMenu(e) {
+        const hit = e.target instanceof HTMLElement ? e.target : null;
+        const container = hit?.closest('.axp-chart-node .--node-container');
+        if (!(container instanceof HTMLElement)) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        void this.openOrgChartContextMenuFromDom(e.clientX, e.clientY, container);
+    }
+    async openOrgChartContextMenuFromDom(clientX, clientY, targetElement) {
+        const node = this.resolveNodeFromTarget(targetElement);
+        if (!node) {
+            return;
+        }
+        await this.openOrgChartContextMenuAt(clientX, clientY, node, targetElement);
+    }
+    /**
+     * Loads actions, builds menu items with sync translation, then opens the context menu with a pre-filled opening event.
+     */
+    async openOrgChartContextMenuAt(clientX, clientY, node, targetElement) {
+        this.selectNode(node);
+        this.activeContextNode = node;
+        this.activeContextMenuActions.clear();
+        const context = this.createNodeContributionContext(node);
+        const actions = await this.nodeContributionService.getMenuActions(context);
+        const items = [];
+        if (!actions.length) {
+            items.push({
+                name: 'org-chart.no-actions',
+                text: this.translateService.translateSync(this.chartML.noActionsAvailable),
+                icon: 'fa-light fa-circle-info',
+                disabled: true,
+            });
+        }
+        else {
+            const addActions = actions.filter((action) => this.isAddNodeMenuAction(action));
+            const nonAddActions = actions.filter((action) => !this.isAddNodeMenuAction(action));
+            if (addActions.length > 0) {
+                items.push({
+                    name: 'org-chart.group.add',
+                    text: this.translateService.translateSync(this.chartML.add),
+                    icon: 'fa-light fa-plus',
+                    break: true,
+                    items: addActions.map((action) => this.buildContextMenuLeafItem(action)),
+                });
+            }
+            items.push(...this.buildGroupedNonAddContextMenuItems(nonAddActions));
+        }
+        const menu = this.contextMenu();
+        if (!menu) {
+            return;
+        }
+        this.ngzone.run(() => {
+            const openingEvent = {
+                sender: menu,
+                canceled: false,
+                targetElement,
+                items,
+            };
+            menu.showAt({ x: clientX, y: clientY }, targetElement, openingEvent);
+        });
+    }
+    resolveOrgChartNodeMenuTitleSync(action) {
+        if (typeof action.title !== 'string') {
+            return this.translateService.resolve(action.title);
+        }
+        if (action.titleParams && Object.keys(action.titleParams).length > 0) {
+            return this.translateService.translateSync(action.title, { params: action.titleParams });
+        }
+        return this.translateService.translateSync(action.title);
+    }
+    isAddNodeMenuAction(action) {
+        if (typeof action.title === 'string' &&
+            action.title.startsWith('@organization-management:organization-chart.node-actions.add-')) {
+            return true;
+        }
+        if (/^add([\-._:]|$)/i.test(action.id) || /[.\-_]add([\-._:]|$)/i.test(action.id)) {
+            return true;
+        }
+        const resolvedTitle = this.resolveOrgChartNodeMenuTitleSync(action).trim();
+        return /^add(\s|-)/i.test(resolvedTitle) || resolvedTitle.startsWith('افزودن');
+    }
+    /**
+     * Builds top-level context rows for non-add actions, collapsing {@link AXMOrgChartNodeMenuAction.submenuGroupId} sets into one flyout.
+     */
+    buildGroupedNonAddContextMenuItems(actions) {
+        const groups = new Map();
+        const singles = [];
+        for (const action of actions) {
+            const gid = action.submenuGroupId?.trim();
+            if (!gid) {
+                singles.push(action);
+                continue;
+            }
+            let bucket = groups.get(gid);
+            if (!bucket) {
+                bucket = {
+                    title: this.resolveSubmenuGroupTitleSync(action),
+                    icon: action.submenuGroupIcon,
+                    actions: [],
+                    breakAfter: false,
+                };
+                groups.set(gid, bucket);
+            }
+            bucket.actions.push(action);
+            if (action.break === true) {
+                bucket.breakAfter = true;
+            }
+            if (!bucket.icon && action.submenuGroupIcon) {
+                bucket.icon = action.submenuGroupIcon;
+            }
+        }
+        const ordered = [];
+        for (const action of singles) {
+            ordered.push({ kind: 'single', action });
+        }
+        for (const groupId of groups.keys()) {
+            ordered.push({ kind: 'group', groupId });
+        }
+        const orderOf = (entry) => {
+            if (entry.kind === 'single') {
+                return entry.action.order ?? Number.MAX_SAFE_INTEGER;
+            }
+            const bucket = groups.get(entry.groupId);
+            if (!bucket || bucket.actions.length === 0) {
+                return Number.MAX_SAFE_INTEGER;
+            }
+            return Math.min(...bucket.actions.map((a) => a.order ?? Number.MAX_SAFE_INTEGER));
+        };
+        ordered.sort((a, b) => orderOf(a) - orderOf(b));
+        const items = [];
+        for (const entry of ordered) {
+            if (entry.kind === 'single') {
+                items.push(this.buildContextMenuLeafItem(entry.action));
+                continue;
+            }
+            const bucket = groups.get(entry.groupId);
+            if (!bucket || bucket.actions.length === 0) {
+                continue;
+            }
+            const sortedMembers = [...bucket.actions].sort((a, b) => (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER));
+            if (sortedMembers.length === 1) {
+                const only = sortedMembers[0];
+                items.push(this.buildContextMenuLeafItem({
+                    ...only,
+                    break: bucket.breakAfter ? true : only.break,
+                }));
+                continue;
+            }
+            items.push({
+                name: `org-chart.submenu.${entry.groupId}`,
+                text: bucket.title,
+                icon: bucket.icon ?? 'fa-light fa-comments',
+                break: bucket.breakAfter,
+                items: sortedMembers.map((action) => this.buildContextMenuLeafItem({
+                    ...action,
+                    break: false,
+                })),
+            });
+        }
+        return items;
+    }
+    resolveSubmenuGroupTitleSync(action) {
+        const raw = action.submenuGroupTitle;
+        if (raw == null) {
+            return '';
+        }
+        if (typeof raw !== 'string') {
+            return this.translateService.resolve(raw);
+        }
+        return this.translateService.translateSync(raw);
+    }
+    buildContextMenuLeafItem(action) {
+        this.activeContextMenuActions.set(action.id, action);
+        return {
+            name: action.id,
+            text: this.resolveOrgChartNodeMenuTitleSync(action),
+            icon: action.icon,
+            color: action.color,
+            disabled: action.disabled,
+            break: action.break,
+        };
+    }
+    async handleContextMenuItemClick(e) {
+        const actionId = e.item.name;
+        if (!actionId || !this.activeContextNode) {
+            return;
+        }
+        const action = this.activeContextMenuActions.get(actionId);
+        if (!action || action.disabled) {
+            return;
+        }
+        await action.execute(this.createNodeContributionContext(this.activeContextNode));
+    }
+    //#endregion
+    //#region ---- Node Selection & Host API ----
+    isNodeSelected(data) {
+        return this.selectedNodeId() === data.id;
+    }
+    selectNode(data) {
+        this.selectedNodeId.set(data.id);
+    }
+    openNodeContextMenuFromMore(event, data) {
+        const nativeEvent = this.resolveNativeMouseEvent(event);
+        if (!nativeEvent) {
+            return;
+        }
+        nativeEvent.preventDefault();
+        nativeEvent.stopPropagation();
+        const fromCurrent = nativeEvent.currentTarget instanceof HTMLElement
+            ? nativeEvent.currentTarget.closest('.--node-container')
+            : null;
+        const fromTarget = nativeEvent.target instanceof HTMLElement ? nativeEvent.target.closest('.--node-container') : null;
+        const fromPoint = document.elementFromPoint(nativeEvent.clientX, nativeEvent.clientY);
+        const anchor = (fromCurrent ?? fromTarget ?? fromPoint);
+        if (!(anchor instanceof HTMLElement)) {
+            return;
+        }
+        void this.openOrgChartContextMenuAt(nativeEvent.clientX, nativeEvent.clientY, data, anchor);
+    }
+    resolveNodeFromTarget(target) {
+        if (!target) {
+            return null;
+        }
+        let el = target;
+        while (el) {
+            const id = el.getAttribute('data-chart-node-id');
+            if (id) {
+                const fromTree = this.findNodeInTree(this.chartService.rootNode(), id);
+                if (fromTree) {
+                    return fromTree;
+                }
+            }
+            el = el.parentElement;
+        }
+        const directNode = target.__data__?.data;
+        if (directNode && typeof directNode.id === 'string') {
+            return directNode;
+        }
+        const foreignObject = target.closest('foreignObject.axp-chart-node');
+        const fromFo = foreignObject?.__data__?.data;
+        if (fromFo && typeof fromFo.id === 'string') {
+            return fromFo;
+        }
+        return null;
+    }
+    findNodeInTree(root, id) {
+        if (root.id === id) {
+            return root;
+        }
+        for (const child of root.children ?? []) {
+            const found = this.findNodeInTree(child, id);
+            if (found) {
+                return found;
+            }
+        }
+        return null;
+    }
+    resolveNativeMouseEvent(event) {
+        if (event instanceof MouseEvent) {
+            return event;
+        }
+        if (typeof event === 'object' &&
+            event != null &&
+            'nativeEvent' in event &&
+            event.nativeEvent instanceof MouseEvent) {
+            return event.nativeEvent;
+        }
+        return null;
+    }
+    createNodeContributionContext(node) {
+        return {
+            node,
+            nodeKind: this.resolveNodeKind(node),
+            selectedMode: this.chartService.selectedMode(),
+            refreshChart: async () => {
+                await this.refresh();
+                this.recompute();
+            },
+        };
+    }
+    resolveNodeKind(node) {
+        if (node.type === AXMOrgChartNodeType.Company) {
+            return 'company-root';
+        }
+        if (node.type === AXMOrgChartNodeType.BusinessUnit) {
+            return 'business-unit';
+        }
+        if (node.type === AXMOrgChartNodeType.Position) {
+            return 'position';
+        }
+        if (node.type === AXMOrgChartNodeType.Employee) {
+            return 'employee';
+        }
+        return 'other';
+    }
+    //#endregion
+    //#region ---- Print & Card Presentation ----
+    /**
+     * Prints the organizational chart.
+     */
+    async printChart() {
+        let [panX, panY, panZoomLevel] = [this.panX(), this.panY(), this.panZoomLevel()];
+        (this.panX.set(0), this.panY.set(0), this.panZoomLevel.set(100));
+        await this.chartService.printChart(this.treeContainer().nativeElement);
+        (this.panX.set(panX), this.panY.set(panY), this.panZoomLevel.set(panZoomLevel));
+    }
+    /**
+     * Parses hex or comma-separated `rgb(...)` into comma-separated channels for `rgba(var(--node-*))`.
+     */
+    parseCssColorToRgbCommaChannels(color) {
+        const s = color.trim();
+        const hex6 = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(s);
+        if (hex6) {
+            return `${parseInt(hex6[1], 16)}, ${parseInt(hex6[2], 16)}, ${parseInt(hex6[3], 16)}`;
+        }
+        const hex3 = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(s);
+        if (hex3) {
+            return `${parseInt(hex3[1] + hex3[1], 16)}, ${parseInt(hex3[2] + hex3[2], 16)}, ${parseInt(hex3[3] + hex3[3], 16)}`;
+        }
+        const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(s);
+        if (rgb) {
+            return `${rgb[1]}, ${rgb[2]}, ${rgb[3]}`;
+        }
+        return null;
+    }
+    contrastingRgbCommaChannels(bgComma) {
+        const parts = bgComma.split(',').map((p) => Number(p.trim()));
+        const [r, g, b] = parts;
+        const luminance = 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
+        return luminance > 0.55 ? '15, 23, 42' : '255, 255, 255';
+    }
+    darkenRgbCommaChannels(bgComma, factor) {
+        const parts = bgComma.split(',').map((p) => Math.round(Number(p.trim()) * factor));
+        return `${parts[0]}, ${parts[1]}, ${parts[2]}`;
+    }
+    /**
+     * Gets the node colors based on the provided color.
+     * @param color - Semantic token (for example primary, accent2) or a literal CSS color (hex / rgb).
+     * @returns An object containing the node's background, text, and border colors.
+     */
+    getNodeColors(color) {
+        const literal = this.parseCssColorToRgbCommaChannels(color);
+        if (literal) {
+            return {
+                '--node-bg-color': literal,
+                '--node-text-color': this.contrastingRgbCommaChannels(literal),
+                '--node-border-color': this.darkenRgbCommaChannels(literal, 0.82),
+            };
+        }
+        if (color.includes('surface')) {
+            return {
+                '--node-bg-color': `var(--ax-sys-color-${color})`,
+                '--node-text-color': `var(--ax-sys-color-on-${color})`,
+                '--node-border-color': `var(--ax-sys-color-border-${color})`,
+            };
+        }
+        return {
+            '--node-bg-color': `var(--ax-sys-color-${color}-surface)`,
+            '--node-text-color': `var(--ax-sys-color-on-${color}-surface)`,
+            '--node-border-color': `var(--ax-sys-color-border-${color}-surface)`,
+        };
+    }
+    /**
+     * Merged cards render the assignee in the body; suppressing `subtitle` avoids repeating name/role lines
+     * (including for charts persisted before subtitle generation was tightened).
+     */
+    shouldShowOrgCardSubtitle(data) {
+        const md = data.metadata ?? {};
+        const template = md['chartTemplate'];
+        if (template === 'merged-unit') {
+            const uh = md['unitHead'];
+            if (uh && uh['vacant'] !== true && typeof uh['employeeName'] === 'string' && uh['employeeName'].trim().length > 0) {
+                return false;
+            }
+        }
+        if (template === 'merged-manager') {
+            if (md['vacant'] === true) {
+                return true;
+            }
+            const occ = md['occupant'];
+            const dn = occ?.['displayName'];
+            if (typeof dn === 'string' && dn.trim().length > 0) {
+                return false;
+            }
+        }
+        return true;
+    }
+    //#endregion
+    //#region ---- Node Card Data ----
+    getSubtreeRosterCounts(data) {
+        if (data.type === AXMOrgChartNodeType.Position &&
+            data.metadata?.['chartTemplate'] === 'position-ic') {
+            const stats = data.metadata?.['stats'];
+            const subtreePeopleRaw = stats?.['subtreePeople'];
+            let people;
+            if (typeof subtreePeopleRaw === 'number' && Number.isFinite(subtreePeopleRaw)) {
+                people = Math.max(0, Math.floor(subtreePeopleRaw));
+            }
+            else if (data.metadata?.['vacant'] === true) {
+                people = 0;
+            }
+            else {
+                const childCount = data.children?.length ?? 0;
+                people = childCount > 0 ? childCount : 1;
+            }
+            /** One catalog seat row in the chart. */
+            return { people, positions: 1 };
+        }
+        if (data.type !== AXMOrgChartNodeType.BusinessUnit && data.type !== AXMOrgChartNodeType.Company) {
+            return null;
+        }
+        if (data.metadata?.['isRegional'] === true) {
+            return null;
+        }
+        const stats = data.metadata?.['stats'];
+        const peopleRaw = stats?.['subtreePeople'];
+        const positionsRaw = stats?.['subtreePositionSeatCount'];
+        if (typeof peopleRaw !== 'number' || !Number.isFinite(peopleRaw)) {
+            return null;
+        }
+        if (typeof positionsRaw !== 'number' || !Number.isFinite(positionsRaw)) {
+            return null;
+        }
+        return {
+            people: Math.max(0, Math.floor(peopleRaw)),
+            positions: Math.max(0, Math.floor(positionsRaw)),
+        };
+    }
+    getTeamsMembershipCount(data) {
+        const stats = data.metadata?.['stats'];
+        const candidates = [
+            stats?.['teamMemberships'],
+            stats?.['teamMembershipCount'],
+            stats?.['teams'],
+            stats?.['teamsCount'],
+            data.metadata?.['teamMemberships'],
+            data.metadata?.['teamMembershipCount'],
+            data.metadata?.['teamsCount'],
+            data.metadata?.['teams'],
+        ];
+        for (const candidate of candidates) {
+            if (typeof candidate === 'number' && Number.isFinite(candidate) && candidate >= 0) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    /**
+     * Metadata rows for {@link AXMOrgChartDetailPanelComponent} only (key-value list is not shown on chart cards).
+     */
+    getNodeInfoItems(data) {
+        const metadata = data.metadata ?? {};
+        const toText = (value) => {
+            if (value == null) {
+                return null;
+            }
+            if (typeof value === 'number' || typeof value === 'boolean') {
+                return String(value);
+            }
+            if (typeof value === 'string') {
+                const trimmed = value.trim();
+                return trimmed.length ? trimmed : null;
+            }
+            return null;
+        };
+        const resolveFirst = (...candidates) => {
+            for (const candidate of candidates) {
+                const text = toText(candidate);
+                if (text != null) {
+                    return text;
+                }
+            }
+            return null;
+        };
+        const createInfo = (label, value) => {
+            return value == null ? null : { label, value };
+        };
+        const items = [];
+        const teamMembershipCount = this.getTeamsMembershipCount(data);
+        if (data.type === AXMOrgChartNodeType.BusinessUnit) {
+            const unitHead = metadata['unitHead'];
+            if (unitHead) {
+                const vacant = unitHead['vacant'] === true;
+                const rawName = unitHead['employeeName'];
+                const nameText = vacant || typeof rawName !== 'string' || !rawName.trim()
+                    ? resolveMultiLanguageString(this.chartML.vacant, this.localeId)
+                    : rawName.trim();
+                const posRaw = unitHead['positionTitle'];
+                let positionText = null;
+                if (typeof posRaw === 'string') {
+                    const t = posRaw.trim();
+                    positionText = t.length ? t : null;
+                }
+                else if (posRaw != null && typeof posRaw === 'object') {
+                    const t = resolveMultiLanguageString(posRaw, this.localeId).trim();
+                    positionText = t.length ? t : null;
+                }
+                const buLeadRows = [
+                    createInfo(this.chartML.buHead, nameText),
+                    createInfo(this.chartML.buPosition, positionText),
+                ].filter((item) => item != null);
+                items.push(...buLeadRows);
+            }
+        }
+        if (data.type === AXMOrgChartNodeType.BusinessUnit || data.type === AXMOrgChartNodeType.Company) {
+            const unitType = resolveFirst(metadata['unitTypeTitle'], metadata['unitType'], metadata['typeLabel']);
+            const location = resolveFirst(metadata['locationName'], metadata['regionName'], metadata['countryName']);
+            const infoCandidates = [
+                createInfo(this.chartML.unitType, unitType),
+                createInfo(this.chartML.location, location),
+            ];
+            if (teamMembershipCount != null) {
+                infoCandidates.push({ label: this.chartML.teams, value: String(teamMembershipCount) });
+            }
+            items.push(...infoCandidates.filter((item) => item != null));
+        }
+        if (data.type === AXMOrgChartNodeType.Position) {
+            const vacantIcSeat = metadata['vacant'] === true && metadata['chartTemplate'] === 'position-ic';
+            const ouMl = metadata['organizationalUnitTitle'];
+            const ouDisplay = ouMl != null && typeof ouMl === 'object'
+                ? resolveMultiLanguageString(ouMl, this.localeId)
+                : null;
+            const level = resolveFirst(metadata['jobLevelTitle'], metadata['jobLevel'], metadata['grade']);
+            const code = resolveFirst(metadata['code'], metadata['positionCode']);
+            const capacity = resolveFirst(metadata['capacity']);
+            const positionItems = vacantIcSeat
+                ? [createInfo(this.chartML.businessUnit, ouDisplay)]
+                : [
+                    createInfo(this.chartML.businessUnit, ouDisplay),
+                    createInfo(this.chartML.level, level),
+                    createInfo(this.chartML.code, code),
+                    createInfo(this.chartML.capacity, capacity),
+                ];
+            items.push(...positionItems.filter((item) => item != null));
+        }
+        if (data.type === AXMOrgChartNodeType.Employee || data.metadata?.['chartTemplate'] === 'employee-card') {
+            const email = resolveFirst(metadata['email'], metadata['workEmail']);
+            const phone = resolveFirst(metadata['phone'], metadata['mobile']);
+            const employmentType = resolveFirst(metadata['employmentTypeTitle'], metadata['employmentType']);
+            const workMode = resolveFirst(metadata['workModeTitle'], metadata['workMode']);
+            const employeeInfo = [
+                createInfo(this.chartML.email, email),
+                createInfo(this.chartML.phone, phone),
+                createInfo(this.chartML.employmentType, employmentType),
+                createInfo(this.chartML.workMode, workMode),
+            ];
+            /** Teams count is rendered on employee chart cards — omit here to avoid duplicate rows. */
+            items.push(...employeeInfo.filter((item) => item != null));
+        }
+        return items.slice(0, 8);
+    }
+    //#endregion
+    //#region ---- Page Layout Integration ----
+    /**
+     * Translation key for the hierarchy chart mode shown under the page title.
+     */
+    chartModeDescriptionTranslationKey(mode) {
+        const keys = {
+            structure: '@organization-management:organization-chart.options.mode.structure',
+            location: '@organization-management:organization-chart.options.mode.location',
+            reporting: '@organization-management:organization-chart.options.mode.reporting',
+            positionHierarchy: '@organization-management:organization-chart.options.mode.positionHierarchy',
+        };
+        return keys[mode];
+    }
+    updateVar(oldValue, newValue) {
+        oldValue.cat = newValue;
+    }
+    async getPageTitle() {
+        return await this.translateService.translateAsync('@organization-management:organization-chart.components.chart.title');
+    }
+    async getPageDescription() {
+        const mode = this.chartService.selectedMode();
+        const modeKey = this.chartModeDescriptionTranslationKey(mode);
+        return await this.translateService.translateAsync(modeKey);
+    }
+    getTitleActions() {
+        const mode = this.chartService.selectedMode();
+        const modes = ['structure', 'location', 'reporting', 'positionHierarchy'];
+        return modes.map((m) => ({
+            title: this.chartModeDescriptionTranslationKey(m),
+            command: {
+                name: 'chart-mode',
+                metadata: { mode: m, isSelected: mode === m, hideSelectionCheckSuffix: true },
+            },
+            // Prefix renders `fa-light {{ icon }}` (matches dashboard title-action check placement).
+            icon: mode === m ? 'fa-check' : '',
+        }));
+    }
+    async getSecondaryMenuItems() {
+        return [
+            {
+                ...getActionButton('print'),
+                command: {
+                    name: 'print',
+                },
+            },
+            {
+                ...getActionButton('refresh'),
+                command: {
+                    name: 'refresh',
+                },
+            },
+        ];
+    }
+    async getPageBreadcrumbs() {
+        return [
+            {
+                title: await this.translateService.translateAsync('@organization-management:module.menus.root.title'),
+            },
+        ];
+    }
+    async execute(command) {
+        if (command.name === 'chart-mode') {
+            const mode = command.metadata?.['mode'];
+            if (mode) {
+                this.chartService.setChartMode(mode);
+                this.redrawChart();
+                this.recompute();
+            }
+            return;
+        }
+        if (command.name == 'print') {
+            await this.printChart();
+        }
+        if (command.name == 'refresh') {
+            await this.chartService.generate();
+            await this.refresh();
+            this.recompute();
+        }
+    }
+    //#endregion
+    //#region ---- Lifecycle ----
+    ngOnDestroy() {
+        this.clearChart(this.treeContainer().nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartPage, isStandalone: true, selector: "ng-component", providers: [
+            AXMOrgChartService,
+            AXMOrgChartNodeContributionService,
+            {
+                provide: AXPPageLayoutBase,
+                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)) 8%, 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 #0000000a,0 12px 32px #00000014,0 32px 64px -24px #0000001a,0 0 36px var(--oc-ring-1),0 0 16px var(--oc-ring-2),0 0 28px 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 #00000061,0 14px 36px #0000006b,0 28px 64px -28px #0000007a,0 0 30px var(--oc-ring-1),0 0 14px var(--oc-ring-2),0 0 24px 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: 
+                //
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartPage, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        //
+                        AXMenuModule,
+                        AXButtonModule,
+                        AXDropdownButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXPanViewDirective,
+                        AXLoadingModule,
+                        AXBreadcrumbsModule,
+                        AXBadgeModule,
+                        AXSearchBoxModule,
+                        AXSwitchModule,
+                        //
+                        AXPThemeLayoutBlockComponent,
+                        AXPPageLayoutComponent,
+                        AXMOrgChartDetailPanelComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXMOrgChartService,
+                        AXMOrgChartNodeContributionService,
+                        {
+                            provide: AXPPageLayoutBase,
+                            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)) 8%, 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 #0000000a,0 12px 32px #00000014,0 32px 64px -24px #0000001a,0 0 36px var(--oc-ring-1),0 0 16px var(--oc-ring-2),0 0 28px 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 #00000061,0 14px 36px #0000006b,0 28px 64px -28px #0000007a,0 0 30px var(--oc-ring-1),0 0 14px var(--oc-ring-2),0 0 24px 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"] }]
+        }], 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-COkMtxFO.mjs.map