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

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

@@ -0,0 +1,1081 @@
+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 { AXContextMenuComponent, AXMenuModule } from '@acorex/components/menu';
+import * as i5 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, getActionButton } from '@acorex/platform/core';
+import { AXPAvatarComponent, AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import * as i6 from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, InjectionToken, inject, ViewEncapsulation, signal, Injectable, 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 AXMOrgChartNodeType, R as RootConfig, n as normalizeVacantLeafSeatsSetting, a as AXPOrganizationManagementSettings, p as parseOrgChartMode, b as AXMOrgChartCategory } from './acorex-modules-organization-management-acorex-modules-organization-management-BrVNMCi_.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 ---- Employee card (org chart node) ----
+/**
+ * Compact row for org-chart employee nodes: initials avatar, full name, and optional position line.
+ */
+class AXMOrgChartEmployeeCardComponent {
+    constructor() {
+        /** When true, shows {@link vacantLabel} and placeholder avatar instead of the name. */
+        this.isVacant = input(false, ...(ngDevMode ? [{ debugName: "isVacant" }] : /* istanbul ignore next */ []));
+        /** Resolved display name (e.g. employee full name); ignored when {@link isVacant} is true. */
+        this.fullName = input('', ...(ngDevMode ? [{ debugName: "fullName" }] : /* istanbul ignore next */ []));
+        /** Resolved “Vacant” (or equivalent) label when {@link isVacant} is true. */
+        this.vacantLabel = input(undefined, ...(ngDevMode ? [{ debugName: "vacantLabel" }] : /* istanbul ignore next */ []));
+        /** Resolved job title, description, or other secondary line; omit or empty to hide. */
+        this.position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /** Whether the avatar uses placeholder styling (vacant or missing name). */
+        this.avatarPlaceholder = computed(() => this.isVacant() || !this.fullName().trim(), ...(ngDevMode ? [{ debugName: "avatarPlaceholder" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartEmployeeCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartEmployeeCardComponent, isStandalone: true, selector: "axm-org-chart-employee-card", inputs: { isVacant: { classPropertyName: "isVacant", publicName: "isVacant", isSignal: true, isRequired: false, transformFunction: null }, fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, vacantLabel: { classPropertyName: "vacantLabel", publicName: "vacantLabel", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "--org-chart-person-row" }, ngImport: i0, template: "<axp-avatar [fullName]=\"fullName()\" [placeholder]=\"avatarPlaceholder()\" [size]=\"44\" />\n<div class=\"--merged-role-text\">\n  @if (isVacant()) {\n  @if (vacantLabel(); as vacant) {\n  <span class=\"--merged-vacant\">{{ vacant }}</span>\n  }\n  @if (position()) {\n  <span class=\"--merged-position\">{{ position() }}</span>\n  }\n  } @else {\n  @if (fullName()) {\n  <span class=\"--merged-name\">{{ fullName() }}</span>\n  }\n  @if (position()) {\n  <span class=\"--merged-position\">{{ position() }}</span>\n  }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartEmployeeCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-employee-card', imports: [AXPAvatarComponent], host: {
+                        class: '--org-chart-person-row',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<axp-avatar [fullName]=\"fullName()\" [placeholder]=\"avatarPlaceholder()\" [size]=\"44\" />\n<div class=\"--merged-role-text\">\n  @if (isVacant()) {\n  @if (vacantLabel(); as vacant) {\n  <span class=\"--merged-vacant\">{{ vacant }}</span>\n  }\n  @if (position()) {\n  <span class=\"--merged-position\">{{ position() }}</span>\n  }\n  } @else {\n  @if (fullName()) {\n  <span class=\"--merged-name\">{{ fullName() }}</span>\n  }\n  @if (position()) {\n  <span class=\"--merged-position\">{{ position() }}</span>\n  }\n  }\n</div>\n" }]
+        }], propDecorators: { isVacant: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVacant", required: false }] }], fullName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullName", required: false }] }], vacantLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "vacantLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+const AXM_ORG_CHART_HOST = new InjectionToken('AXM_ORG_CHART_HOST');
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Standard icon + title card used when a node is not using a merged template. */
+class AXMOrgChartDefaultNodeCardComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Semantic color token passed to {@link AXMOrgChartHostApi.getNodeColors}. */
+        this.colorKey = input.required(...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMOrgChartDefaultNodeCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMOrgChartDefaultNodeCardComponent, isStandalone: true, selector: "axm-org-chart-default-node-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div #node class=\"--node-container\" [style]=\"host.getNodeColors(colorKey())\">\n  <div class=\"--container\">\n    <div class=\"--heading-container\">\n      <div class=\"--content\">\n        <div class=\"--icon\">\n          <i class=\"fa-light fa-xl fa-fw\" [class]=\"data().icon\"></i>\n        </div>\n        <div class=\"--titles\">\n          <span class=\"--title\" [title]=\"data().title | translate | async\">{{ data().title | translate | async }}</span>\n          @if (data().subtitle) {\n            <span class=\"--sub-title\" [title]=\"data().subtitle! | translate | async\">{{\n              data().subtitle! | translate | async\n            }}</span>\n          }\n        </div>\n        @if (data().children?.length) {\n          <div class=\"--badge\">\n            <span>{{ data().children?.length ?? 0 }}</span>\n          </div>\n        }\n      </div>\n    </div>\n    @if (data().description) {\n      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data().children && data().children!.length > 0\">\n          <span>{{ data().description | translate | async }}</span>\n        </div>\n      </div>\n    }\n    @if (host.getNodeInfoItems(data()).length > 0) {\n      <div class=\"--merged-info-list\">\n        @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n          <div class=\"--merged-info-item\">\n            <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n            <span class=\"--merged-info-value\">{{ item.value }}</span>\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", 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: "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: AXMOrgChartDefaultNodeCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-org-chart-default-node-card', imports: [AXButtonModule, AXDecoratorModule, AXTranslationModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div #node class=\"--node-container\" [style]=\"host.getNodeColors(colorKey())\">\n  <div class=\"--container\">\n    <div class=\"--heading-container\">\n      <div class=\"--content\">\n        <div class=\"--icon\">\n          <i class=\"fa-light fa-xl fa-fw\" [class]=\"data().icon\"></i>\n        </div>\n        <div class=\"--titles\">\n          <span class=\"--title\" [title]=\"data().title | translate | async\">{{ data().title | translate | async }}</span>\n          @if (data().subtitle) {\n            <span class=\"--sub-title\" [title]=\"data().subtitle! | translate | async\">{{\n              data().subtitle! | translate | async\n            }}</span>\n          }\n        </div>\n        @if (data().children?.length) {\n          <div class=\"--badge\">\n            <span>{{ data().children?.length ?? 0 }}</span>\n          </div>\n        }\n      </div>\n    </div>\n    @if (data().description) {\n      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data().children && data().children!.length > 0\">\n          <span>{{ data().description | translate | async }}</span>\n        </div>\n      </div>\n    }\n    @if (host.getNodeInfoItems(data()).length > 0) {\n      <div class=\"--merged-info-list\">\n        @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n          <div class=\"--merged-info-item\">\n            <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n            <span class=\"--merged-info-value\">{{ item.value }}</span>\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" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Business unit node (division / department / branch): merged unit or default card. */
+class AXMOrgChartBusinessUnitNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    }
+    isRegional() {
+        return this.data().metadata?.['isRegional'] === true;
+    }
+    getColorKey() {
+        return this.isRegional() ? 'accent1' : 'accent2';
+    }
+    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    <div\n      #node\n      class=\"--node-container --merged-card --merged-unit\"\n      [class.--vacant]=\"data().metadata?.['unitHead']?.['vacant']\"\n      [style]=\"host.getNodeColors(getColorKey())\"\n    >\n      <div class=\"--container\">\n        <div class=\"--merged-top\">\n          <span class=\"--merged-entity-title\" [title]=\"data().title | translate | async\">{{\n            data().title | translate | async\n          }}</span>\n          @if (data().description) {\n            <span class=\"--merged-entity-desc\">{{ data().description | translate | async }}</span>\n          }\n        </div>\n        @if (data().metadata?.['unitHead']; as unitHead) {\n          <axm-org-chart-employee-card\n            [isVacant]=\"unitHead['vacant'] || !unitHead['employeeName']\"\n            [fullName]=\"unitHead['employeeName'] ?? ''\"\n            [vacantLabel]=\"(host.chartML.vacant | translate | async) || ''\"\n            [position]=\"(unitHead['positionTitle'] | translate | async) || ''\"\n          />\n        }\n        @if (host.getSubtreeRosterCounts(data()); as roster) {\n          <div class=\"--merged-stats-row\">\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.people }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.people | translate | async }}</span>\n            </div>\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.positions }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.positions | translate | async }}</span>\n            </div>\n          </div>\n        }\n        @if (host.getTeamsMembershipCount(data()); as teamsCount) {\n          <div class=\"--merged-stats\">\n            <span class=\"--merged-stat-n\">{{ teamsCount }}</span>\n            <span class=\"--merged-stat-label\">{{ host.chartML.teams | translate | async }}</span>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <axm-org-chart-default-node-card [data]=\"data()\" [colorKey]=\"getColorKey()\" />\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: AXMOrgChartEmployeeCardComponent, selector: "axm-org-chart-employee-card", inputs: ["isVacant", "fullName", "vacantLabel", "position"] }, { kind: "component", type: AXMOrgChartDefaultNodeCardComponent, selector: "axm-org-chart-default-node-card", inputs: ["data", "colorKey"] }, { 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,
+                        AXMOrgChartEmployeeCardComponent,
+                        AXMOrgChartDefaultNodeCardComponent,
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-unit') {\n    <div\n      #node\n      class=\"--node-container --merged-card --merged-unit\"\n      [class.--vacant]=\"data().metadata?.['unitHead']?.['vacant']\"\n      [style]=\"host.getNodeColors(getColorKey())\"\n    >\n      <div class=\"--container\">\n        <div class=\"--merged-top\">\n          <span class=\"--merged-entity-title\" [title]=\"data().title | translate | async\">{{\n            data().title | translate | async\n          }}</span>\n          @if (data().description) {\n            <span class=\"--merged-entity-desc\">{{ data().description | translate | async }}</span>\n          }\n        </div>\n        @if (data().metadata?.['unitHead']; as unitHead) {\n          <axm-org-chart-employee-card\n            [isVacant]=\"unitHead['vacant'] || !unitHead['employeeName']\"\n            [fullName]=\"unitHead['employeeName'] ?? ''\"\n            [vacantLabel]=\"(host.chartML.vacant | translate | async) || ''\"\n            [position]=\"(unitHead['positionTitle'] | translate | async) || ''\"\n          />\n        }\n        @if (host.getSubtreeRosterCounts(data()); as roster) {\n          <div class=\"--merged-stats-row\">\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.people }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.people | translate | async }}</span>\n            </div>\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.positions }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.positions | translate | async }}</span>\n            </div>\n          </div>\n        }\n        @if (host.getTeamsMembershipCount(data()); as teamsCount) {\n          <div class=\"--merged-stats\">\n            <span class=\"--merged-stat-n\">{{ teamsCount }}</span>\n            <span class=\"--merged-stat-label\">{{ host.chartML.teams | translate | async }}</span>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <axm-org-chart-default-node-card [data]=\"data()\" [colorKey]=\"getColorKey()\" />\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 (CEO block) or default card. */
+class AXMOrgChartCompanyNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        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: 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    <div\n      #node\n      class=\"--node-container --merged-card\"\n      [class.--vacant]=\"data().metadata?.['topRole']?.['vacant']\"\n      [style]=\"host.getNodeColors('primary')\"\n    >\n      <div class=\"--container\">\n        <div class=\"--merged-top\">\n          <span class=\"--merged-entity-title\" [title]=\"data().title | translate | async\">{{\n            data().title | translate | async\n          }}</span>\n        </div>\n        @if (data().metadata?.['topRole']; as topRole) {\n          <axm-org-chart-employee-card\n            [isVacant]=\"topRole['vacant'] || !topRole['employeeName']\"\n            [fullName]=\"topRole['employeeName'] ?? ''\"\n            [vacantLabel]=\"(host.chartML.vacant | translate | async) || ''\"\n            [position]=\"(topRole['positionTitle'] | translate | async) || ''\"\n          />\n        }\n        @if (host.getSubtreeRosterCounts(data()); as roster) {\n          <div class=\"--merged-stats-row\">\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.people }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.people | translate | async }}</span>\n            </div>\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.positions }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.positions | translate | async }}</span>\n            </div>\n          </div>\n        }\n        @if (host.getTeamsMembershipCount(data()); as teamsCount) {\n          <div class=\"--merged-stats\">\n            <span class=\"--merged-stat-n\">{{ teamsCount }}</span>\n            <span class=\"--merged-stat-label\">{{ host.chartML.teams | translate | async }}</span>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <axm-org-chart-default-node-card [data]=\"data()\" colorKey=\"primary\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: AXMOrgChartEmployeeCardComponent, selector: "axm-org-chart-employee-card", inputs: ["isVacant", "fullName", "vacantLabel", "position"] }, { kind: "component", type: AXMOrgChartDefaultNodeCardComponent, selector: "axm-org-chart-default-node-card", inputs: ["data", "colorKey"] }, { 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: [AXMOrgChartEmployeeCardComponent, AXMOrgChartDefaultNodeCardComponent, AXTranslationModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-executive') {\n    <div\n      #node\n      class=\"--node-container --merged-card\"\n      [class.--vacant]=\"data().metadata?.['topRole']?.['vacant']\"\n      [style]=\"host.getNodeColors('primary')\"\n    >\n      <div class=\"--container\">\n        <div class=\"--merged-top\">\n          <span class=\"--merged-entity-title\" [title]=\"data().title | translate | async\">{{\n            data().title | translate | async\n          }}</span>\n        </div>\n        @if (data().metadata?.['topRole']; as topRole) {\n          <axm-org-chart-employee-card\n            [isVacant]=\"topRole['vacant'] || !topRole['employeeName']\"\n            [fullName]=\"topRole['employeeName'] ?? ''\"\n            [vacantLabel]=\"(host.chartML.vacant | translate | async) || ''\"\n            [position]=\"(topRole['positionTitle'] | translate | async) || ''\"\n          />\n        }\n        @if (host.getSubtreeRosterCounts(data()); as roster) {\n          <div class=\"--merged-stats-row\">\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.people }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.people | translate | async }}</span>\n            </div>\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.positions }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.positions | translate | async }}</span>\n            </div>\n          </div>\n        }\n        @if (host.getTeamsMembershipCount(data()); as teamsCount) {\n          <div class=\"--merged-stats\">\n            <span class=\"--merged-stat-n\">{{ teamsCount }}</span>\n            <span class=\"--merged-stat-label\">{{ host.chartML.teams | translate | async }}</span>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  } @else {\n    <axm-org-chart-default-node-card [data]=\"data()\" colorKey=\"primary\" />\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+//#region ---- Imports ----
+//#endregion
+//#region ---- Component ----
+/** Employee node: compact employee card or default card. */
+class AXMOrgChartEmployeeNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* 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    <div\n      #node\n      class=\"--node-container --merged-card --merged-employee\"\n      [style]=\"host.getNodeColors(getColorKey())\"\n    >\n      <div class=\"--container\">\n        <axm-org-chart-employee-card\n          [fullName]=\"(data().title | translate | async) || ''\"\n          [position]=\"data().subtitle ? ((data().subtitle! | translate | async) || '') : undefined\"\n        />\n        @if (host.getTeamsMembershipCount(data()); as teamsCount) {\n          <div class=\"--merged-stats\">\n            <span class=\"--merged-stat-n\">{{ teamsCount }}</span>\n            <span class=\"--merged-stat-label\">{{ host.chartML.teams | translate | async }}</span>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <axm-org-chart-default-node-card [data]=\"data()\" colorKey=\"surface\" />\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: AXMOrgChartEmployeeCardComponent, selector: "axm-org-chart-employee-card", inputs: ["isVacant", "fullName", "vacantLabel", "position"] }, { kind: "component", type: AXMOrgChartDefaultNodeCardComponent, selector: "axm-org-chart-default-node-card", inputs: ["data", "colorKey"] }, { 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,
+                        AXMOrgChartEmployeeCardComponent,
+                        AXMOrgChartDefaultNodeCardComponent,
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'employee-card') {\n    <div\n      #node\n      class=\"--node-container --merged-card --merged-employee\"\n      [style]=\"host.getNodeColors(getColorKey())\"\n    >\n      <div class=\"--container\">\n        <axm-org-chart-employee-card\n          [fullName]=\"(data().title | translate | async) || ''\"\n          [position]=\"data().subtitle ? ((data().subtitle! | translate | async) || '') : undefined\"\n        />\n        @if (host.getTeamsMembershipCount(data()); as teamsCount) {\n          <div class=\"--merged-stats\">\n            <span class=\"--merged-stat-n\">{{ teamsCount }}</span>\n            <span class=\"--merged-stat-label\">{{ host.chartML.teams | translate | async }}</span>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <axm-org-chart-default-node-card [data]=\"data()\" colorKey=\"surface\" />\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, IC seat, or default card. */
+class AXMOrgChartPositionNodeComponent {
+    constructor() {
+        this.host = inject(AXM_ORG_CHART_HOST);
+        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: 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    <div\n      #node\n      class=\"--node-container --merged-card --merged-manager\"\n      [class.--vacant]=\"data().metadata?.['vacant']\"\n      [style]=\"host.getNodeColors('accent3')\"\n    >\n      <div class=\"--container\">\n        <div class=\"--merged-top --merged-top-compact\">\n          <i class=\"fa-light fa-user-tie fa-fw --merged-type-icon\"></i>\n          <span class=\"--merged-entity-title\" [title]=\"data().title | translate | async\">{{\n            data().title | translate | async\n          }}</span>\n        </div>\n        <axm-org-chart-employee-card\n          [isVacant]=\"!!data().metadata?.['vacant'] || !data().metadata?.['occupant']?.['displayName']\"\n          [fullName]=\"data().metadata?.['occupant']?.['displayName'] ?? ''\"\n          [vacantLabel]=\"(host.chartML.vacant | translate | async) || ''\"\n          [position]=\"\n            data().description && !data().metadata?.['vacant'] && data().metadata?.['occupant']?.['displayName']\n              ? (data().description! | translate | async) || ''\n              : undefined\n          \"\n        />\n        @if (data().metadata?.['stats']; as s) {\n          @if (s['directReports'] != null && s['directReports'] > 0) {\n            <div class=\"--merged-stats\">\n              <span class=\"--merged-stat-n\">{{ s['directReports'] }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.directReports | translate | async }}</span>\n            </div>\n          }\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <div\n      #node\n      class=\"--node-container --merged-card --ic-position\"\n      [class.--vacant]=\"data().metadata?.['vacant']\"\n      [style]=\"host.getNodeColors('accent3')\"\n    >\n      <div class=\"--container\">\n        <div class=\"--heading-container\">\n          <div class=\"--content\">\n            <div class=\"--icon\">\n              <i class=\"fa-light fa-xl fa-fw\" [class]=\"data().icon\"></i>\n            </div>\n            <div class=\"--titles\">\n              <span class=\"--title\" [title]=\"data().title | translate | async\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().metadata?.['vacant']) {\n                <span class=\"--sub-title\">{{ host.chartML.vacant | translate | async }}</span>\n              }\n            </div>\n            @if (data().children?.length) {\n              <div class=\"--badge\">\n                <span>{{ data().children?.length ?? 0 }}</span>\n              </div>\n            }\n          </div>\n        </div>\n        @if (host.getSubtreeRosterCounts(data()); as roster) {\n          <div class=\"--merged-stats-row\">\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.people }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.people | translate | async }}</span>\n            </div>\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.positions }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.positions | translate | async }}</span>\n            </div>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <axm-org-chart-default-node-card [data]=\"data()\" colorKey=\"accent3\" />\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: AXMOrgChartEmployeeCardComponent, selector: "axm-org-chart-employee-card", inputs: ["isVacant", "fullName", "vacantLabel", "position"] }, { kind: "component", type: AXMOrgChartDefaultNodeCardComponent, selector: "axm-org-chart-default-node-card", inputs: ["data", "colorKey"] }, { 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,
+                        AXMOrgChartEmployeeCardComponent,
+                        AXMOrgChartDefaultNodeCardComponent,
+                        AXTranslationModule,
+                        AsyncPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n  @if (data().metadata?.['chartTemplate'] === 'merged-manager') {\n    <div\n      #node\n      class=\"--node-container --merged-card --merged-manager\"\n      [class.--vacant]=\"data().metadata?.['vacant']\"\n      [style]=\"host.getNodeColors('accent3')\"\n    >\n      <div class=\"--container\">\n        <div class=\"--merged-top --merged-top-compact\">\n          <i class=\"fa-light fa-user-tie fa-fw --merged-type-icon\"></i>\n          <span class=\"--merged-entity-title\" [title]=\"data().title | translate | async\">{{\n            data().title | translate | async\n          }}</span>\n        </div>\n        <axm-org-chart-employee-card\n          [isVacant]=\"!!data().metadata?.['vacant'] || !data().metadata?.['occupant']?.['displayName']\"\n          [fullName]=\"data().metadata?.['occupant']?.['displayName'] ?? ''\"\n          [vacantLabel]=\"(host.chartML.vacant | translate | async) || ''\"\n          [position]=\"\n            data().description && !data().metadata?.['vacant'] && data().metadata?.['occupant']?.['displayName']\n              ? (data().description! | translate | async) || ''\n              : undefined\n          \"\n        />\n        @if (data().metadata?.['stats']; as s) {\n          @if (s['directReports'] != null && s['directReports'] > 0) {\n            <div class=\"--merged-stats\">\n              <span class=\"--merged-stat-n\">{{ s['directReports'] }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.directReports | translate | async }}</span>\n            </div>\n          }\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <div\n      #node\n      class=\"--node-container --merged-card --ic-position\"\n      [class.--vacant]=\"data().metadata?.['vacant']\"\n      [style]=\"host.getNodeColors('accent3')\"\n    >\n      <div class=\"--container\">\n        <div class=\"--heading-container\">\n          <div class=\"--content\">\n            <div class=\"--icon\">\n              <i class=\"fa-light fa-xl fa-fw\" [class]=\"data().icon\"></i>\n            </div>\n            <div class=\"--titles\">\n              <span class=\"--title\" [title]=\"data().title | translate | async\">{{\n                data().title | translate | async\n              }}</span>\n              @if (data().metadata?.['vacant']) {\n                <span class=\"--sub-title\">{{ host.chartML.vacant | translate | async }}</span>\n              }\n            </div>\n            @if (data().children?.length) {\n              <div class=\"--badge\">\n                <span>{{ data().children?.length ?? 0 }}</span>\n              </div>\n            }\n          </div>\n        </div>\n        @if (host.getSubtreeRosterCounts(data()); as roster) {\n          <div class=\"--merged-stats-row\">\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.people }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.people | translate | async }}</span>\n            </div>\n            <div class=\"--merged-stats-cell\">\n              <span class=\"--merged-stat-n\">{{ roster.positions }}</span>\n              <span class=\"--merged-stat-label\">{{ host.chartML.positions | translate | async }}</span>\n            </div>\n          </div>\n        }\n        @if (host.getNodeInfoItems(data()).length > 0) {\n          <div class=\"--merged-info-list\">\n            @for (item of host.getNodeInfoItems(data()); track item.label + ':' + item.value) {\n              <div class=\"--merged-info-item\">\n                <span class=\"--merged-info-label\">{{ item.label | translate | async }}</span>\n                <span class=\"--merged-info-value\">{{ item.value }}</span>\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    <axm-org-chart-default-node-card [data]=\"data()\" colorKey=\"accent3\" />\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: { styleAttribute: "display: block; width: 100%; min-height: 1px; box-sizing: border-box;", 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} }", 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',
+                        style: 'display: block; width: 100%; min-height: 1px; box-sizing: border-box;',
+                    }, 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} }" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+/**
+ * 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
+        }] });
+
+/**
+ * Component for displaying and interacting with an organizational chart.
+ */
+class AXMOrgChartPage extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super();
+        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.route = inject(ActivatedRoute);
+        this.localeId = inject(LOCALE_ID);
+        this.NODE_STROKE_COLOR = 'rgba(var(--ax-sys-color-primary-400))';
+        this.LINK_STROKE_WIDTH = 1;
+        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.isChartRendered = false;
+        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', 'سمت‌ها'),
+            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', 'نحوه کار'),
+        };
+        this.#initialize = afterNextRender(async () => {
+            this.d3 = await import('d3');
+            await this.refresh();
+        });
+        this.chartService.applyHydratedUiPrefs(this.route.snapshot.data['orgChartUi']);
+    }
+    #initialize;
+    /**
+     * 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',
+        });
+    }
+    /**
+     * Calculates the maximum depth of the organizational chart.
+     * @param node - The root node of the chart.
+     * @returns The maximum depth of the chart.
+     */
+    calculateMaxDepth(node) {
+        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
+            return 1;
+        }
+        return 1 + Math.max(...node.children.map((child) => this.calculateMaxDepth(child)));
+    }
+    /**
+     * Calculates the maximum breadth of the organizational chart.
+     * @param node - The root node of the chart.
+     * @returns The maximum breadth of the chart.
+     */
+    calculateMaxBreadth(node) {
+        if (!node.children || node.children.length === 0 || node.isExpanded === false) {
+            return 1;
+        }
+        return node.children.reduce((acc, child) => acc + this.calculateMaxBreadth(child), 0);
+    }
+    /**
+     * Creates and renders the organizational chart.
+     * @param el - The container element for the chart.
+     * @param data - The root node of the organizational chart.
+     */
+    createChart(el, data) {
+        if (!this.d3) {
+            return;
+        }
+        this.ngzone.runOutsideAngular(() => {
+            const NODE_WIDTH_BASE = 300;
+            const NODE_HEIGHT_BASE = 220;
+            const HORIZONTAL_SPACING = 20;
+            const VERTICAL_SPACING = 40;
+            const NODE_Y_OFFSET = 10;
+            this.clearChart(el);
+            const newSvg = this.d3.select(el).append('svg');
+            const root = this.d3.hierarchy(data);
+            root.descendants().forEach((node) => {
+                if (node.data.isExpanded === false) {
+                    node.children = undefined;
+                }
+            });
+            const treeLayout = this.d3
+                .tree()
+                .nodeSize([NODE_WIDTH_BASE + HORIZONTAL_SPACING, NODE_HEIGHT_BASE + VERTICAL_SPACING]);
+            treeLayout(root);
+            let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+            root.descendants().forEach((d) => {
+                if (d.x < minX)
+                    minX = d.x;
+                if (d.x > maxX)
+                    maxX = d.x;
+                if (d.y < minY)
+                    minY = d.y;
+                if (d.y > maxY)
+                    maxY = d.y;
+            });
+            const CONTAINER_WIDTH = maxX - minX + NODE_WIDTH_BASE + 2 * HORIZONTAL_SPACING;
+            const CONTAINER_HEIGHT = maxY - minY + NODE_HEIGHT_BASE + 2 * VERTICAL_SPACING;
+            newSvg.attr('width', CONTAINER_WIDTH).attr('height', CONTAINER_HEIGHT);
+            const g = newSvg
+                .append('g')
+                .attr('transform', `translate(${-minX + NODE_WIDTH_BASE / 2 + HORIZONTAL_SPACING / 2}, ${-minY + NODE_HEIGHT_BASE / 2 + VERTICAL_SPACING / 2})`);
+            g.selectAll('.axp-chart-node')
+                .data(root.descendants())
+                .enter()
+                .append('foreignObject')
+                .attr('class', 'axp-chart-node')
+                .attr('node', (d) => `node-${d.data.id}`)
+                .attr('x', (d) => d.x - NODE_WIDTH_BASE / 2)
+                .attr('y', (d) => d.y - NODE_HEIGHT_BASE / 2 + NODE_Y_OFFSET)
+                .attr('width', NODE_WIDTH_BASE)
+                .attr('height', NODE_HEIGHT_BASE)
+                .each((d) => this.renderNodeTemplate(d.data, d.x, d.y));
+            g.selectAll('.link')
+                .data(root.links())
+                .enter()
+                .append('path')
+                .attr('class', 'link')
+                .attr('d', (d) => {
+                const source = d.source;
+                const target = d.target;
+                const sourceBounds = this.getRenderedNodeBounds(source.data.id);
+                const targetBounds = this.getRenderedNodeBounds(target.data.id);
+                const EDGE_PADDING = 1;
+                const MIN_VERTICAL_GAP = 8;
+                let sourceBottomY = sourceBounds != null
+                    ? source.y - NODE_HEIGHT_BASE / 2 + NODE_Y_OFFSET + sourceBounds.topOffset + sourceBounds.height
+                    : source.y;
+                let targetTopY = targetBounds != null
+                    ? target.y - NODE_HEIGHT_BASE / 2 + NODE_Y_OFFSET + targetBounds.topOffset
+                    : target.y - 10;
+                // Keep connectors outside card bounds and avoid inverted elbows that cut through nodes.
+                sourceBottomY += EDGE_PADDING;
+                targetTopY -= EDGE_PADDING;
+                if (sourceBottomY >= targetTopY - MIN_VERTICAL_GAP) {
+                    sourceBottomY = source.y + NODE_Y_OFFSET;
+                    targetTopY = target.y - 10;
+                }
+                return `M${source.x},${sourceBottomY}V${(sourceBottomY + targetTopY) / 2}H${target.x}V${targetTopY}`;
+            })
+                .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}`);
+            this.contextMenu()?.refresh();
+        });
+        if (!this.isChartRendered) {
+            // document.querySelector(`foreignObject[node="node-${data.id}"] .--heading-container`)?.scrollIntoView({
+            //   behavior: 'smooth',
+            //   block: 'center',
+            //   inline: 'center',
+            // });
+            this.isChartRendered = true;
+            this.panView()?.resetPosition();
+        }
+    }
+    /**
+     * 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.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();
+    }
+    //#region Context Menu
+    // protected async handleContextMenuOnOpening(e: AXContextMenuOpeningEvent) {
+    //   const node = get(e.targetElement, '__data__.data') as any as AXMOrganizationNode;
+    //   const allowedAddItems = await this.chartService.getAllowedAddMenuItems(node);
+    //   const allowDelete = node.type != AXMOrganizationNodeType.Company;
+    //   const isPasteAvailable = await this.chartService.isPasteAvailable();
+    //   const allowPaste = await this.chartService.allowPaste(node);
+    //   //
+    //   if (allowedAddItems.length) {
+    //     e.items.push({
+    //       text: 'Add New',
+    //       icon: 'fa-light fa-plus',
+    //       items: allowedAddItems,
+    //       break: allowDelete,
+    //     });
+    //   }
+    //   //
+    //   if (allowDelete) {
+    //     e.items.push({
+    //       name: 'cut',
+    //       text: 'Cut',
+    //       icon: 'fa-light fa-cut',
+    //       data: node,
+    //     });
+    //     e.items.push({
+    //       name: 'copy',
+    //       text: 'Copy',
+    //       icon: 'fa-light fa-copy',
+    //       data: node,
+    //       break: !isPasteAvailable,
+    //     });
+    //   }
+    //   if (isPasteAvailable) {
+    //     e.items.push({
+    //       name: 'paste',
+    //       text: 'Paste',
+    //       icon: 'fa-light fa-paste',
+    //       data: node,
+    //       break: true,
+    //       disabled: !allowPaste,
+    //     });
+    //   }
+    //   //
+    //   if (allowDelete) {
+    //     e.items.push({
+    //       name: 'remove',
+    //       text: 'Remove',
+    //       color: 'danger',
+    //       icon: 'fa-light fa-trash-can',
+    //       data: node,
+    //     });
+    //   }
+    //   //
+    //   if (e.items.length == 0) {
+    //     e.canceled = true;
+    //   }
+    // }
+    async handleContextMenuItemClick(e) { }
+    //#endregion
+    /**
+     * Prints the organizational chart.
+     */
+    async printChart() {
+        let [panX, panY, panZoomLevel] = [this.panX(), this.panY(), this.panZoomLevel()];
+        (this.panX.set(0), this.panY.set(0), this.panZoomLevel.set(100));
+        await this.chartService.printChart(this.treeContainer().nativeElement);
+        (this.panX.set(panX), this.panY.set(panY), this.panZoomLevel.set(panZoomLevel));
+    }
+    /**
+     * Gets the node colors based on the provided color.
+     * @param color - The color to use for the node.
+     * @returns An object containing the node's background, text, and border colors.
+     */
+    getNodeColors(color) {
+        if (color.includes('surface')) {
+            return {
+                '--node-bg-color': `var(--ax-sys-color-${color})`,
+                '--node-text-color': `var(--ax-sys-color-on-${color})`,
+                '--node-border-color': `var(--ax-sys-color-border-${color})`,
+            };
+        }
+        return {
+            '--node-bg-color': `var(--ax-sys-color-${color}-surface)`,
+            '--node-text-color': `var(--ax-sys-color-on-${color}-surface)`,
+            '--node-border-color': `var(--ax-sys-color-border-${color}-surface)`,
+        };
+    }
+    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;
+    }
+    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 || 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 in the `--merged-stats` strip on employee cards — omit here to avoid duplicate rows. */
+            items.push(...employeeInfo.filter((item) => item != null));
+        }
+        return items.slice(0, 4);
+    }
+    /**
+     * 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();
+        }
+    }
+    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,
+            {
+                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-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\"></div>\n    </div>\n  </axp-page-content>\n  <axp-page-footer>\n    @if (chartService.selectedMode() !== 'reporting') {\n      <axp-layout-prefix>\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-wrap ax-light\">\n          <span class=\"ax-text-sm ax-whitespace-nowrap\">{{\n            '@organization-management:organization-chart.components.generate-dialog.fields.show-vacant-leaf-seats.label'\n              | translate\n              | async\n          }}</span>\n          <ax-switch\n            [ngModel]=\"chartService.showVacantLeafSeats()\"\n            (onValueChanged)=\"onVacantLeafSeatsChange($event)\"\n          ></ax-switch>\n        </div>\n      </axp-layout-prefix>\n    }\n    <!-- <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'}; @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\"></div>\n          {{item.title}}\n        </div>\n        {{updateVar(v, item.category)}} }\n      </div>\n    </axp-layout-prefix> -->\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-page-footer>\n</axp-page-layout>", styles: ["@charset \"UTF-8\";.axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.axp-chart-node .--node-container .--container .--org-chart-person-row{box-sizing:border-box;display:flex;width:100%;min-width:0px;align-items:center;gap:.75rem;padding:.625rem .75rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}.axp-chart-node .--node-container .--container .--merged-role-text,.axp-chart-node .--node-container .--container .--employee-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container .--container .--merged-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 .--container .--merged-position,.axp-chart-node .--node-container .--container .--merged-position-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400;line-height:1.375;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container .--container .--merged-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:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.--merged-card .--container{min-width:280px}.axp-chart-node .--node-container.--merged-card.--vacant .--container{border-style:dashed;opacity:.95}.axp-chart-node .--node-container.--merged-card .--merged-top{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;flex-direction:column;gap:.125rem;padding:.5rem .75rem}.axp-chart-node .--node-container.--merged-card .--merged-top-compact{flex-direction:row;align-items:center;gap:.5rem}.axp-chart-node .--node-container.--merged-card .--merged-type-icon{opacity:.9}.axp-chart-node .--node-container.--merged-card .--merged-entity-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.25}.axp-chart-node .--node-container.--merged-card .--merged-entity-desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.75rem;line-height:1rem;opacity:.8}.axp-chart-node .--node-container.--merged-card .--merged-actions{margin-top:.25rem;display:flex;flex-wrap:wrap;gap:.25rem}.axp-chart-node .--node-container.--merged-card .--merged-stats{display:flex;align-items:baseline;gap:.5rem;border-top-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.375rem .75rem;border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card .--merged-stats-row{display:flex;width:100%;min-width:0px;align-items:stretch;justify-content:center;gap:1.5rem;border-top-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card .--merged-stats-row .--merged-stats-cell{display:flex;min-width:0px;flex:1 1 0%;align-items:baseline;justify-content:center;gap:.5rem;padding:.375rem .5rem}.axp-chart-node .--node-container.--merged-card .--merged-stat-n{font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-chart-node .--node-container.--merged-card .--merged-stat-label{font-size:.75rem;line-height:1rem;opacity:.75}.axp-chart-node .--node-container.--merged-card .--merged-info-list{display:flex;flex-direction:column;gap:.25rem;border-top-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card .--merged-info-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container.--merged-card .--merged-info-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}.axp-chart-node .--node-container.--merged-card .--merged-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-weight:500}.axp-chart-node .--node-container.--merged-card.--merged-employee{border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card.--merged-employee .--merged-info-list{border-bottom-width:0px;padding-bottom:.75rem}.axp-chart-node .--node-container.--merged-card.--merged-employee .--merged-info-list+.--toggle{padding-top:0}.axp-chart-node .--node-container.--ic-position.--vacant .--container{border-style:dashed}.axp-chart-node .--node-container.--ic-position .--ic-actions{justify-content:flex-end;padding-left:.5rem;padding-right:.5rem;padding-bottom:.5rem}.axp-chart-node .--node-container.--ic-position.--merged-card .--merged-info-list:last-child{border-bottom-width:0px;padding-bottom:.75rem}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+                //
+                AXMenuModule }, { kind: "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: "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: AXSwitchModule }, { kind: "component", type: i5.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: "pipe", type: i6.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,
+                        AXSwitchModule,
+                        //
+                        AXPThemeLayoutBlockComponent,
+                        AXPPageLayoutComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXMOrgChartService,
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMOrgChartPage,
+                        },
+                        { provide: AXM_ORG_CHART_HOST, useExisting: AXMOrgChartPage },
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\"></div>\n    </div>\n  </axp-page-content>\n  <axp-page-footer>\n    @if (chartService.selectedMode() !== 'reporting') {\n      <axp-layout-prefix>\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-wrap ax-light\">\n          <span class=\"ax-text-sm ax-whitespace-nowrap\">{{\n            '@organization-management:organization-chart.components.generate-dialog.fields.show-vacant-leaf-seats.label'\n              | translate\n              | async\n          }}</span>\n          <ax-switch\n            [ngModel]=\"chartService.showVacantLeafSeats()\"\n            (onValueChanged)=\"onVacantLeafSeatsChange($event)\"\n          ></ax-switch>\n        </div>\n      </axp-layout-prefix>\n    }\n    <!-- <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'}; @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\"></div>\n          {{item.title}}\n        </div>\n        {{updateVar(v, item.category)}} }\n      </div>\n    </axp-layout-prefix> -->\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-page-footer>\n</axp-page-layout>", styles: ["@charset \"UTF-8\";.axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.axp-chart-node .--node-container .--container .--org-chart-person-row{box-sizing:border-box;display:flex;width:100%;min-width:0px;align-items:center;gap:.75rem;padding:.625rem .75rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1))}.axp-chart-node .--node-container .--container .--merged-role-text,.axp-chart-node .--node-container .--container .--employee-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-chart-node .--node-container .--container .--merged-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 .--container .--merged-position,.axp-chart-node .--node-container .--container .--merged-position-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;font-weight:400;line-height:1.375;color:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container .--container .--merged-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:rgba(var(--ax-sys-color-on-surface-variant))}.axp-chart-node .--node-container.--merged-card .--container{min-width:280px}.axp-chart-node .--node-container.--merged-card.--vacant .--container{border-style:dashed;opacity:.95}.axp-chart-node .--node-container.--merged-card .--merged-top{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;flex-direction:column;gap:.125rem;padding:.5rem .75rem}.axp-chart-node .--node-container.--merged-card .--merged-top-compact{flex-direction:row;align-items:center;gap:.5rem}.axp-chart-node .--node-container.--merged-card .--merged-type-icon{opacity:.9}.axp-chart-node .--node-container.--merged-card .--merged-entity-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.25}.axp-chart-node .--node-container.--merged-card .--merged-entity-desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.75rem;line-height:1rem;opacity:.8}.axp-chart-node .--node-container.--merged-card .--merged-actions{margin-top:.25rem;display:flex;flex-wrap:wrap;gap:.25rem}.axp-chart-node .--node-container.--merged-card .--merged-stats{display:flex;align-items:baseline;gap:.5rem;border-top-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.375rem .75rem;border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card .--merged-stats-row{display:flex;width:100%;min-width:0px;align-items:stretch;justify-content:center;gap:1.5rem;border-top-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card .--merged-stats-row .--merged-stats-cell{display:flex;min-width:0px;flex:1 1 0%;align-items:baseline;justify-content:center;gap:.5rem;padding:.375rem .5rem}.axp-chart-node .--node-container.--merged-card .--merged-stat-n{font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-chart-node .--node-container.--merged-card .--merged-stat-label{font-size:.75rem;line-height:1rem;opacity:.75}.axp-chart-node .--node-container.--merged-card .--merged-info-list{display:flex;flex-direction:column;gap:.25rem;border-top-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card .--merged-info-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container.--merged-card .--merged-info-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}.axp-chart-node .--node-container.--merged-card .--merged-info-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-weight:500}.axp-chart-node .--node-container.--merged-card.--merged-employee{border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container.--merged-card.--merged-employee .--merged-info-list{border-bottom-width:0px;padding-bottom:.75rem}.axp-chart-node .--node-container.--merged-card.--merged-employee .--merged-info-list+.--toggle{padding-top:0}.axp-chart-node .--node-container.--ic-position.--vacant .--container{border-style:dashed}.axp-chart-node .--node-container.--ic-position .--ic-actions{justify-content:flex-end;padding-left:.5rem;padding-right:.5rem;padding-bottom:.5rem}.axp-chart-node .--node-container.--ic-position.--merged-card .--merged-info-list:last-child{border-bottom-width:0px;padding-bottom:.75rem}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { treeContainer: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], parent: [{ type: i0.ViewChild, args: ['parent', { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXContextMenuComponent), { isSignal: true }] }], panView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPanViewDirective), { isSignal: true }] }] } });
+
+export { AXMOrgChartPage };
+//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-mHV0AWGZ.mjs.map