@acorex/modules 19.2.7 → 19.2.8

package/fesm2022/{acorex-modules-organization-management-org-chart-configuration.page-BzjTyYyS.mjs → acorex-modules-organization-management-org-chart-configuration.page-DBc6gISy.mjs}

@@ -22,7 +22,7 @@ import * as i6 from '@acorex/components/breadcrumbs';
 import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import * as i7 from '@acorex/components/alert';
 import { AXAlertModule } from '@acorex/components/alert';
-import { A as AXMOrgChartConfigService } from './acorex-modules-organization-management-org-chart-configuration.service-DObuNZKQ.mjs';
+import { A as AXMOrgChartConfigService } from './acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs';
 
 class AXMOrgChartConfigurationPage {
     constructor() {
@@ -56,7 +56,7 @@ class AXMOrgChartConfigurationPage {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartConfigurationPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMOrgChartConfigurationPage, isStandalone: true, selector: "ng-component", providers: [AXMOrgChartConfigService], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.structure.title) | async}} </axp-layout-title>\n\n    <axp-layout-description>Customize your organization's hierarchical relationships</axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('reset') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item>\n          Home\n        </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item>\n          Organization\n        </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-flex ax-flex-col ax-gap-6  ax-w-full  \">\n      <div>\n        <h3 class=\"ax-font-semibold ax-text-xl\">Relations Permissions</h3>\n        <p class=\"ax-text-sm ax-opacity-85\">\n          This matrix sets the relationships between nodes in your organization chart. Click a cell to toggle the\n          relation between <span class=\"ax-text-danger-500\">Allowed</span> and <span\n            class=\"ax-text-success-500\">Denied</span>.\n        </p>\n      </div>\n      <div class=\"ax-rounded-md ax-overflow-hidden ax-w-full\">\n        <table class=\" ax-table-auto ax-border-collapse ax-w-full  ax-border-primary-darkest ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-bg-primary-light ax-text-on-primary-light\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4  ax-min-w-44 ax-font-semibold ax-text-start\">Parent\n                \\\n                Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4 ax-min-w-44 ax-text-center ax-font-semibold\">\n                {{ type }}\n              </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <!-- For each parent type, render a row with alternating backgrounds -->\n            @for ( parent of chartService.types; track $index) {\n            <tr>\n              <!-- Vertical header cell with custom header colors -->\n              <td\n                class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-bg-primary-light ax-text-on-primary-light ax-text-start\">\n                {{ parent }}\n              </td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-border-primary-darkest ax-p-2 \">\n                <div class=\"ax-flex ax-justify-center ax-cursor-pointer ax-sm\">\n                  @let isLoading = loadingStates()[parent]?.[child];\n                  <ax-button look=\"blank\" [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\" [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\">\n                    @if(isLoading)\n                    {\n                    <ax-loading></ax-loading>\n                    }\n                  </ax-button>\n                </div>\n              </td>\n              }\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <ax-alert [color]=\"'warning'\">\n          <ax-icon></ax-icon>\n          <ax-title>Attention</ax-title>\n          <ax-content>\n            Changes made here will not update your current organization chart. They will only affect future charts or\n            updates.\n          </ax-content>\n        </ax-alert>\n      </div>\n    </div>\n\n  </axp-layout-content>\n</axp-layout-simple-page>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMOrgChartConfigurationPage, isStandalone: true, selector: "ng-component", providers: [AXMOrgChartConfigService], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.structure.title) | async}} </axp-layout-title>\n\n    <axp-layout-description>Customize your organization's hierarchical relationships</axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('reset') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item>\n          Home\n        </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item>\n          Organization\n        </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-flex ax-flex-col ax-gap-6  ax-w-full  \">\n      <div>\n        <h3 class=\"ax-font-semibold ax-text-xl\">Relations Permissions</h3>\n        <p class=\"ax-text-sm ax-opacity-85\">\n          This matrix sets the relationships between nodes in your organization chart. Click a cell to toggle the\n          relation between <span class=\"ax-text-danger-500\">Allowed</span> and <span\n            class=\"ax-text-success-500\">Denied</span>.\n        </p>\n      </div>\n      <!---------------- Matrix Table ---------------->\n      <div class=\"ax-w-full ax-overflow-auto\">\n        <table class=\"ax-table-auto ax-border-collapse ax-max-w-fit  ax-border-primary-darkest ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-bg-primary-light ax-text-on-primary-light\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-text-start\">Parent\n                \\\n                Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4 ax-min-w-32 ax-text-center ax-font-semibold\">\n                {{ type }}\n              </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <!-- For each parent type, render a row with alternating backgrounds -->\n            @for ( parent of chartService.types; track $index) {\n            <tr>\n              <!-- Vertical header cell with custom header colors -->\n              <td\n                class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-bg-primary-light ax-text-on-primary-light ax-text-start\">\n                {{ parent }}\n              </td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-border-primary-darkest ax-p-2 \">\n                <div class=\"ax-flex ax-justify-center ax-cursor-pointer ax-sm\">\n                  @let isLoading = loadingStates()[parent]?.[child];\n                  <ax-button look=\"blank\" [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\" [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\">\n                    @if(isLoading)\n                    {\n                    <ax-loading></ax-loading>\n                    }\n                  </ax-button>\n                </div>\n              </td>\n              }\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <ax-alert [color]=\"'warning'\" class=\"ax-max-w-fit\">\n          <ax-icon></ax-icon>\n          <ax-title>Attention</ax-title>\n          <ax-content>\n            Changes made here will not update your current organization chart. They will only affect future charts or\n            updates.\n          </ax-content>\n        </ax-alert>\n      </div>\n    </div>\n\n  </axp-layout-content>\n</axp-layout-simple-page>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: 
                 //
                 AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-toolbar,    axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutHeaderTemplateComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "ngmodule", type: 
                 //
@@ -85,8 +85,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXCheckBoxModule,
                         AXBreadcrumbsModule,
                         AXAlertModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXMOrgChartConfigService], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.structure.title) | async}} </axp-layout-title>\n\n    <axp-layout-description>Customize your organization's hierarchical relationships</axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('reset') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item>\n          Home\n        </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item>\n          Organization\n        </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-flex ax-flex-col ax-gap-6  ax-w-full  \">\n      <div>\n        <h3 class=\"ax-font-semibold ax-text-xl\">Relations Permissions</h3>\n        <p class=\"ax-text-sm ax-opacity-85\">\n          This matrix sets the relationships between nodes in your organization chart. Click a cell to toggle the\n          relation between <span class=\"ax-text-danger-500\">Allowed</span> and <span\n            class=\"ax-text-success-500\">Denied</span>.\n        </p>\n      </div>\n      <div class=\"ax-rounded-md ax-overflow-hidden ax-w-full\">\n        <table class=\" ax-table-auto ax-border-collapse ax-w-full  ax-border-primary-darkest ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-bg-primary-light ax-text-on-primary-light\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4  ax-min-w-44 ax-font-semibold ax-text-start\">Parent\n                \\\n                Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4 ax-min-w-44 ax-text-center ax-font-semibold\">\n                {{ type }}\n              </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <!-- For each parent type, render a row with alternating backgrounds -->\n            @for ( parent of chartService.types; track $index) {\n            <tr>\n              <!-- Vertical header cell with custom header colors -->\n              <td\n                class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-bg-primary-light ax-text-on-primary-light ax-text-start\">\n                {{ parent }}\n              </td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-border-primary-darkest ax-p-2 \">\n                <div class=\"ax-flex ax-justify-center ax-cursor-pointer ax-sm\">\n                  @let isLoading = loadingStates()[parent]?.[child];\n                  <ax-button look=\"blank\" [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\" [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\">\n                    @if(isLoading)\n                    {\n                    <ax-loading></ax-loading>\n                    }\n                  </ax-button>\n                </div>\n              </td>\n              }\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <ax-alert [color]=\"'warning'\">\n          <ax-icon></ax-icon>\n          <ax-title>Attention</ax-title>\n          <ax-content>\n            Changes made here will not update your current organization chart. They will only affect future charts or\n            updates.\n          </ax-content>\n        </ax-alert>\n      </div>\n    </div>\n\n  </axp-layout-content>\n</axp-layout-simple-page>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXMOrgChartConfigService], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.structure.title) | async}} </axp-layout-title>\n\n    <axp-layout-description>Customize your organization's hierarchical relationships</axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('reset') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item>\n          Home\n        </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item>\n          Organization\n        </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-flex ax-flex-col ax-gap-6  ax-w-full  \">\n      <div>\n        <h3 class=\"ax-font-semibold ax-text-xl\">Relations Permissions</h3>\n        <p class=\"ax-text-sm ax-opacity-85\">\n          This matrix sets the relationships between nodes in your organization chart. Click a cell to toggle the\n          relation between <span class=\"ax-text-danger-500\">Allowed</span> and <span\n            class=\"ax-text-success-500\">Denied</span>.\n        </p>\n      </div>\n      <!---------------- Matrix Table ---------------->\n      <div class=\"ax-w-full ax-overflow-auto\">\n        <table class=\"ax-table-auto ax-border-collapse ax-max-w-fit  ax-border-primary-darkest ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-bg-primary-light ax-text-on-primary-light\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-text-start\">Parent\n                \\\n                Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4 ax-min-w-32 ax-text-center ax-font-semibold\">\n                {{ type }}\n              </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <!-- For each parent type, render a row with alternating backgrounds -->\n            @for ( parent of chartService.types; track $index) {\n            <tr>\n              <!-- Vertical header cell with custom header colors -->\n              <td\n                class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-bg-primary-light ax-text-on-primary-light ax-text-start\">\n                {{ parent }}\n              </td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-border-primary-darkest ax-p-2 \">\n                <div class=\"ax-flex ax-justify-center ax-cursor-pointer ax-sm\">\n                  @let isLoading = loadingStates()[parent]?.[child];\n                  <ax-button look=\"blank\" [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\" [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\">\n                    @if(isLoading)\n                    {\n                    <ax-loading></ax-loading>\n                    }\n                  </ax-button>\n                </div>\n              </td>\n              }\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <ax-alert [color]=\"'warning'\" class=\"ax-max-w-fit\">\n          <ax-icon></ax-icon>\n          <ax-title>Attention</ax-title>\n          <ax-content>\n            Changes made here will not update your current organization chart. They will only affect future charts or\n            updates.\n          </ax-content>\n        </ax-alert>\n      </div>\n    </div>\n\n  </axp-layout-content>\n</axp-layout-simple-page>" }]
         }] });
 
 export { AXMOrgChartConfigurationPage };
-//# sourceMappingURL=acorex-modules-organization-management-org-chart-configuration.page-BzjTyYyS.mjs.map
+//# sourceMappingURL=acorex-modules-organization-management-org-chart-configuration.page-DBc6gISy.mjs.map

package/fesm2022/acorex-modules-organization-management-org-chart-configuration.page-DBc6gISy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-organization-management-org-chart-configuration.page-DBc6gISy.mjs","sources":["../../../../libs/modules/organization-management/src/lib/features/organization-chart/org-chart-configuration.page.ts","../../../../libs/modules/organization-management/src/lib/features/organization-chart/org-chart-configuration.page.html"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXDropdownButtonModule } from '@acorex/components/dropdown-button';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXMenuModule } from '@acorex/components/menu';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPSimplePageLayout } from '@acorex/platform/themes/default';\nimport {\n  AXPLayoutThemeService,\n  AXPThemeLayoutActionsComponent,\n  AXPThemeLayoutBlockComponent,\n  AXPThemeLayoutHeaderTemplateComponent,\n  AXPThemeLayoutPagePrimaryActionsComponent,\n  AXPThemeLayoutPageSecondaryActionsComponent,\n} from '@acorex/platform/themes/shared';\nimport { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  signal,\n} from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { RootConfig } from '../../const';\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\nimport { FormsModule } from '@angular/forms';\nimport { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';\nimport { AXAlertModule } from '@acorex/components/alert';\nimport { AXMOrgChartConfigService } from './org-chart-configuration.service';\n\n@Component({\n  templateUrl: './org-chart-configuration.page.html',\n  imports: [\n    CommonModule,\n    RouterModule,\n    FormsModule,\n    //\n    AXPSimplePageLayout,\n    AXPThemeLayoutBlockComponent,\n    AXPThemeLayoutHeaderTemplateComponent,\n    AXPThemeLayoutActionsComponent,\n    AXPThemeLayoutPageSecondaryActionsComponent,\n    AXPThemeLayoutPagePrimaryActionsComponent,\n    //\n    AXMenuModule,\n    AXButtonModule,\n    AXDropdownButtonModule,\n    AXTranslationModule,\n    AXDecoratorModule,\n    AXLoadingModule,\n    AXCheckBoxModule,\n    AXBreadcrumbsModule,\n    AXAlertModule\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [AXMOrgChartConfigService],\n})\nexport class AXMOrgChartConfigurationPage {\n\n  protected readonly layout = inject(AXPLayoutThemeService);\n  protected readonly chartService = inject(AXMOrgChartConfigService);\n\n  protected loadingStates = signal<{ [parent: string]: { [child: string]: boolean } | undefined }>({});\n\n  protected readonly rootConfig = RootConfig;\n\n\n  async ngOnInit() {\n    await this.chartService.load();\n  }\n\n\n  protected async togglePermission(parent: string, child: string) {\n    //TODO: Check the async and loading\n\n    // Set the loading state for this cell to true.\n    this.loadingStates.update((states) => {\n      if (!states[parent]) {\n        states[parent] = {};\n      }\n      states[parent][child] = true;\n      return states;\n    });\n\n\n\n    this.chartService.set(parent, child, !this.chartService.get(parent, child));\n\n    await this.chartService.update();\n\n    // Turn off the loading state.\n    this.loadingStates.update((states) => {\n      if (!states[parent]) {\n        states[parent] = {};\n      }\n      states[parent][child] = false;\n      return states;\n    });\n  }\n\n\n}\n","<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.structure.title) | async}} </axp-layout-title>\n\n    <axp-layout-description>Customize your organization's hierarchical relationships</axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('reset') | async)!\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item>\n          Home\n        </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item>\n          Organization\n        </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content>\n    <div class=\"ax-flex ax-flex-col ax-gap-6  ax-w-full  \">\n      <div>\n        <h3 class=\"ax-font-semibold ax-text-xl\">Relations Permissions</h3>\n        <p class=\"ax-text-sm ax-opacity-85\">\n          This matrix sets the relationships between nodes in your organization chart. Click a cell to toggle the\n          relation between <span class=\"ax-text-danger-500\">Allowed</span> and <span\n            class=\"ax-text-success-500\">Denied</span>.\n        </p>\n      </div>\n      <!---------------- Matrix Table ---------------->\n      <div class=\"ax-w-full ax-overflow-auto\">\n        <table class=\"ax-table-auto ax-border-collapse ax-max-w-fit  ax-border-primary-darkest ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-bg-primary-light ax-text-on-primary-light\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-text-start\">Parent\n                \\\n                Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-border-primary-darkest ax-p-4 ax-min-w-32 ax-text-center ax-font-semibold\">\n                {{ type }}\n              </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            <!-- For each parent type, render a row with alternating backgrounds -->\n            @for ( parent of chartService.types; track $index) {\n            <tr>\n              <!-- Vertical header cell with custom header colors -->\n              <td\n                class=\"ax-border ax-border-primary-darkest ax-p-4  ax-font-semibold ax-bg-primary-light ax-text-on-primary-light ax-text-start\">\n                {{ parent }}\n              </td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-border-primary-darkest ax-p-2 \">\n                <div class=\"ax-flex ax-justify-center ax-cursor-pointer ax-sm\">\n                  @let isLoading = loadingStates()[parent]?.[child];\n                  <ax-button look=\"blank\" [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\" [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\">\n                    @if(isLoading)\n                    {\n                    <ax-loading></ax-loading>\n                    }\n                  </ax-button>\n                </div>\n              </td>\n              }\n            </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <ax-alert [color]=\"'warning'\" class=\"ax-max-w-fit\">\n          <ax-icon></ax-icon>\n          <ax-title>Attention</ax-title>\n          <ax-content>\n            Changes made here will not update your current organization chart. They will only affect future charts or\n            updates.\n          </ax-content>\n        </ax-alert>\n      </div>\n    </div>\n\n  </axp-layout-content>\n</axp-layout-simple-page>"],"names":["i2","i3","i4","i5"],"mappings":"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"}

package/fesm2022/{acorex-modules-organization-management-org-chart-configuration.service-DObuNZKQ.mjs → acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs}

@@ -2,13 +2,14 @@ import * as i0 from '@angular/core';
 import { inject, signal, Injectable } from '@angular/core';
 import { AXPSettingService, AXPSettingScope } from '@acorex/platform/common';
 import { A as AXPOrganizationSetting } from './acorex-modules-organization-management-setting.keys-CF6Giykz.mjs';
+import { AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS } from './acorex-modules-organization-management.mjs';
 
 class AXMOrgChartConfigService {
     constructor() {
         this.settingService = inject(AXPSettingService);
         //
-        this._types = ['Company', 'Location', 'BusinessUnit', 'Role', 'Employee'];
-        this._defaultPermissioEncoded = '0111001110001100001100001';
+        this._types = Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).map(c => c[1].type);
+        this._defaultPermissioEncoded = '011111100001011100000111100000011100011111110011111110011111110000000011000000000';
         this.permissions = signal(this.defaultPermissions());
     }
     get types() {
@@ -142,4 +143,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 
 export { AXMOrgChartConfigService as A };
-//# sourceMappingURL=acorex-modules-organization-management-org-chart-configuration.service-DObuNZKQ.mjs.map
+//# sourceMappingURL=acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs.map

package/fesm2022/acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs","sources":["../../../../libs/modules/organization-management/src/lib/features/organization-chart/org-chart-configuration.service.ts"],"sourcesContent":["import { inject, Injectable, signal } from '@angular/core';\nimport { AXPSettingScope, AXPSettingService } from '@acorex/platform/common';\nimport { AXPOrganizationSetting } from '../../setting.keys';\nimport { AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS, AXMOrgChartNodePermission } from './org-chart.type';\n\n\n\n\n@Injectable()\nexport class AXMOrgChartConfigService {\n\n    private readonly settingService = inject(AXPSettingService);\n    //\n    protected _types = Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).map(c => c[1].type);\n\n    public get types(): string[] {\n        return this._types;\n    }\n\n    private _defaultPermissioEncoded = '011111100001011100000111100000011100011111110011111110011111110000000011000000000';\n\n    public permissions = signal<AXMOrgChartNodePermission>(this.defaultPermissions());\n\n\n    private defaultPermissions(): AXMOrgChartNodePermission {\n        return this.decode(this._defaultPermissioEncoded);\n    }\n\n\n    private encode(\n        permissions: AXMOrgChartNodePermission\n    ): string {\n        let str = '';\n        for (const parent of this.types) {\n            for (const child of this.types) {\n                str += (permissions[parent]?.[child] ?? 0).toString();\n            }\n        }\n        return str;\n    }\n\n\n    private decode(encoded: string): AXMOrgChartNodePermission {\n        const result: AXMOrgChartNodePermission = {};\n        const expectedLength = this.types.length * this.types.length;\n        if (encoded.length !== expectedLength) {\n            throw new Error(`Invalid permissions string length. Expected ${expectedLength} but got ${encoded.length}`);\n        }\n        let index = 0;\n        for (const parent of this.types) {\n            result[parent] = {};\n            for (const child of this.types) {\n                const char = encoded.charAt(index);\n                result[parent][child] = parseInt(char, 10);\n                index++;\n            }\n        }\n        return result;\n    }\n\n\n    private decodeMatrix(matrix: number[][]): AXMOrgChartNodePermission {\n        const newPermissions: AXMOrgChartNodePermission = {};\n        this.types.forEach((parent, rowIndex) => {\n            newPermissions[parent] = {};\n            this.types.forEach((child, colIndex) => {\n                newPermissions[parent][child] = matrix[rowIndex][colIndex];\n            });\n        });\n        return newPermissions;\n    }\n\n    private validateEncodedValue(storedValue: unknown): AXMOrgChartNodePermission {\n        try {\n            if (typeof storedValue === 'string') {\n                const expectedLength = this.types.length * this.types.length;\n                // Check that the string is the correct length and only contains 0s and 1s.\n                if (storedValue.length === expectedLength && /^[01]+$/.test(storedValue)) {\n                    return this.decode(storedValue);\n                }\n            } else if (Array.isArray(storedValue)) {\n                // Validate the 2D array dimensions and values.\n                if (\n                    storedValue.length === this.types.length &&\n                    storedValue.every(\n                        row =>\n                            Array.isArray(row) &&\n                            row.length === this.types.length &&\n                            row.every(val => val === 0 || val === 1)\n                    )\n                ) {\n                    return this.decodeMatrix(storedValue);\n                }\n            } else if (typeof storedValue === 'object' && storedValue !== null) {\n                // Validate that the object has all the required keys and that their values are 0 or 1.\n                let valid = true;\n                for (const parent of this.types) {\n                    if (!(parent in storedValue)) {\n                        valid = false;\n                        break;\n                    }\n                    const childPermissions = (storedValue as any)[parent];\n                    for (const child of this.types) {\n                        if (!(child in childPermissions) || (childPermissions[child] !== 0 && childPermissions[child] !== 1)) {\n                            valid = false;\n                            break;\n                        }\n                    }\n                    if (!valid) break;\n                }\n                if (valid) {\n                    return storedValue as AXMOrgChartNodePermission;\n                }\n            }\n        } catch (error) {\n            // In case of any errors during validation, fall back to default permissions.\n        }\n        // Return the default permissions if validation fails.\n        return this.defaultPermissions();\n    }\n\n\n    public isAllowed(parent: string, child: string): boolean {\n        return (this.permissions()[parent]?.[child] ?? 0) === 1;\n    }\n\n\n    public set(parent: string, child: string, value: boolean) {\n        this.permissions.update((p) => {\n            if (!p[parent]) {\n                p[parent] = {};\n            }\n            p[parent][child] = value ? 1 : 0;\n            return p;\n        });\n    }\n\n    public get(parent: string, child: string): boolean {\n        return this.permissions()[parent]?.[child] === 1;\n    }\n\n\n    public async load() {\n        const storedValue = await this.settingService\n            .scope(AXPSettingScope.Tenant)\n            .get(AXPOrganizationSetting.Relations);\n\n        // Use the validation method to ensure the stored value is correct.\n        if (storedValue) {\n            const validatedPermissions = this.validateEncodedValue(storedValue);\n            this.permissions.set(validatedPermissions);\n        } else {\n            this.permissions.set(this.defaultPermissions());\n        }\n    }\n\n    public async update() {\n        const matrix = this.encode(this.permissions());\n        await this.settingService\n            .scope(AXPSettingScope.Tenant)\n            .set(AXPOrganizationSetting.Relations, matrix);\n    }\n\n}\n"],"names":[],"mappings":";;;;;;MASa,wBAAwB,CAAA;AADrC,IAAA,WAAA,GAAA;AAGqB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,iBAAiB,CAAC;;QAEjD,IAAM,CAAA,MAAA,GAAG,MAAM,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAMtF,IAAwB,CAAA,wBAAA,GAAG,mFAAmF;QAE/G,IAAW,CAAA,WAAA,GAAG,MAAM,CAA4B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AA8IpF;AApJG,IAAA,IAAW,KAAK,GAAA;QACZ,OAAO,IAAI,CAAC,MAAM;;IAQd,kBAAkB,GAAA;QACtB,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,wBAAwB,CAAC;;AAI7C,IAAA,MAAM,CACV,WAAsC,EAAA;QAEtC,IAAI,GAAG,GAAG,EAAE;AACZ,QAAA,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;AAC7B,YAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;AAC5B,gBAAA,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE;;;AAG7D,QAAA,OAAO,GAAG;;AAIN,IAAA,MAAM,CAAC,OAAe,EAAA;QAC1B,MAAM,MAAM,GAA8B,EAAE;AAC5C,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;AAC5D,QAAA,IAAI,OAAO,CAAC,MAAM,KAAK,cAAc,EAAE;YACnC,MAAM,IAAI,KAAK,CAAC,CAA+C,4CAAA,EAAA,cAAc,CAAY,SAAA,EAAA,OAAO,CAAC,MAAM,CAAE,CAAA,CAAC;;QAE9G,IAAI,KAAK,GAAG,CAAC;AACb,QAAA,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;AAC7B,YAAA,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE;AACnB,YAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;gBAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;AAClC,gBAAA,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC;AAC1C,gBAAA,KAAK,EAAE;;;AAGf,QAAA,OAAO,MAAM;;AAIT,IAAA,YAAY,CAAC,MAAkB,EAAA;QACnC,MAAM,cAAc,GAA8B,EAAE;QACpD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,QAAQ,KAAI;AACpC,YAAA,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE;YAC3B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,QAAQ,KAAI;AACnC,gBAAA,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC;AAC9D,aAAC,CAAC;AACN,SAAC,CAAC;AACF,QAAA,OAAO,cAAc;;AAGjB,IAAA,oBAAoB,CAAC,WAAoB,EAAA;AAC7C,QAAA,IAAI;AACA,YAAA,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;AACjC,gBAAA,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM;;AAE5D,gBAAA,IAAI,WAAW,CAAC,MAAM,KAAK,cAAc,IAAI,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;AACtE,oBAAA,OAAO,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;;;AAEhC,iBAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;;gBAEnC,IACI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;AACxC,oBAAA,WAAW,CAAC,KAAK,CACb,GAAG,IACC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAClB,wBAAA,GAAG,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;AAChC,wBAAA,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAC/C,EACH;AACE,oBAAA,OAAO,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;;;iBAEtC,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,KAAK,IAAI,EAAE;;gBAEhE,IAAI,KAAK,GAAG,IAAI;AAChB,gBAAA,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;AAC7B,oBAAA,IAAI,EAAE,MAAM,IAAI,WAAW,CAAC,EAAE;wBAC1B,KAAK,GAAG,KAAK;wBACb;;AAEJ,oBAAA,MAAM,gBAAgB,GAAI,WAAmB,CAAC,MAAM,CAAC;AACrD,oBAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;wBAC5B,IAAI,EAAE,KAAK,IAAI,gBAAgB,CAAC,KAAK,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE;4BAClG,KAAK,GAAG,KAAK;4BACb;;;AAGR,oBAAA,IAAI,CAAC,KAAK;wBAAE;;gBAEhB,IAAI,KAAK,EAAE;AACP,oBAAA,OAAO,WAAwC;;;;QAGzD,OAAO,KAAK,EAAE;;;;AAIhB,QAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;;IAI7B,SAAS,CAAC,MAAc,EAAE,KAAa,EAAA;AAC1C,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;;AAIpD,IAAA,GAAG,CAAC,MAAc,EAAE,KAAa,EAAE,KAAc,EAAA;QACpD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,KAAI;AAC1B,YAAA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;AACZ,gBAAA,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE;;AAElB,YAAA,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC;AAChC,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;;IAGC,GAAG,CAAC,MAAc,EAAE,KAAa,EAAA;AACpC,QAAA,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;;AAI7C,IAAA,MAAM,IAAI,GAAA;AACb,QAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC;AAC1B,aAAA,KAAK,CAAC,eAAe,CAAC,MAAM;AAC5B,aAAA,GAAG,CAAC,sBAAsB,CAAC,SAAS,CAAC;;QAG1C,IAAI,WAAW,EAAE;YACb,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC;AACnE,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,oBAAoB,CAAC;;aACvC;YACH,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;;;AAIhD,IAAA,MAAM,MAAM,GAAA;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QAC9C,MAAM,IAAI,CAAC;AACN,aAAA,KAAK,CAAC,eAAe,CAAC,MAAM;AAC5B,aAAA,GAAG,CAAC,sBAAsB,CAAC,SAAS,EAAE,MAAM,CAAC;;8GAvJ7C,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;kHAAxB,wBAAwB,EAAA,CAAA,CAAA;;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBADpC;;;;;"}

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

@@ -21,12 +21,14 @@ import { inject, Injectable, signal, viewChild, NgZone, ViewContainerRef, afterN
 import { RouterModule } from '@angular/router';
 import get from 'lodash-es/get';
 import { AXMOrganizationManagementDepartmentEntityService, AXMOrganizationManagementDivisionEntityService, AXMOrganizationManagementBranchEntityService, AXMOrganizationManagementEmployeeEntityService, AXMOrganizationManagementPositionEntityService, AXMOrganizationManagementChartEntityService, AXMOrganizationNodeType, AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS, RootConfig, AXMOrganizationNodeTypeCategory } from './acorex-modules-organization-management.mjs';
-import { A as AXMOrgChartConfigService } from './acorex-modules-organization-management-org-chart-configuration.service-DObuNZKQ.mjs';
+import { A as AXMOrgChartConfigService } from './acorex-modules-organization-management-org-chart-configuration.service-QLdDEdqL.mjs';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPExportService, AXPDataGenerator } from '@acorex/platform/common';
 import { AXPSessionService } from '@acorex/platform/auth';
 import { cloneDeep } from 'lodash-es';
 import { AXPopupService } from '@acorex/components/popup';
+import { AXPRegionalService } from '@acorex/modules/platform-management';
+import { applyFilterArray } from '@acorex/platform/core';
 import set from 'lodash-es/set';
 
 /**
@@ -169,6 +171,7 @@ class AXMOrgChartService {
         this.configService = inject(AXMOrgChartConfigService);
         this.popupService = inject(AXPopupService);
         this.layoutService = inject(AXPLayoutThemeService);
+        this.regionalService = inject(AXPRegionalService);
         this._rootNode = signal({ id: AXPDataGenerator.uuid(), title: "Company" });
         this.rootNode = this._rootNode.asReadonly();
         // The clipboard holds the node being cut or copied.
@@ -220,7 +223,7 @@ class AXMOrgChartService {
     //#endregion
     //#region Context Menu
     async getAllowedAddMenuItems(node) {
-        const allowedCategories = await this.getAllowedChildCategoriesForParent(node);
+        const allowedTypes = await this.getAllowedChildCategoriesForParent(node);
         const allowedMenuItems = [];
         // Group items by category for visual breaks.
         const groupedMenuItems = {
@@ -231,7 +234,7 @@ class AXMOrgChartService {
             Employee: []
         };
         Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).forEach(([entitySource, config]) => {
-            if (allowedCategories.includes(config.category)) {
+            if (allowedTypes.includes(config.type)) {
                 groupedMenuItems[config.category].push({
                     name: 'add',
                     text: `${config.title}`,
@@ -259,18 +262,18 @@ class AXMOrgChartService {
     //#region Check Permission 
     async getAllowedChildCategoriesForParent(parent) {
         await this.configService.load();
-        const types = this.configService.types; // e.g. ['Company', 'Location', 'BusinessUnit', 'Role', 'Employee']
-        const currentType = get(parent, 'category');
+        const types = this.configService.types;
+        const currentType = parent.type;
         if (!parent || !currentType) {
             return [];
         }
-        const allowedCategories = new Set();
+        const allowedTypes = new Set();
         Object.entries(AXM_ORG_CHART_NODE_TYPE_ENTITY_MAPPINGS).forEach(([entitySource, config]) => {
-            if (this.configService.isAllowed(currentType, config.category) && types.includes(config.category)) {
-                allowedCategories.add(config.category);
+            if (this.configService.isAllowed(currentType, config.type) && types.includes(config.type)) {
+                allowedTypes.add(config.type);
             }
         });
-        return Array.from(allowedCategories);
+        return Array.from(allowedTypes);
     }
     //#endregion 
     //#region Remove/Cut/Copy/Past
@@ -299,9 +302,9 @@ class AXMOrgChartService {
         if (!this.isPasteAvailable()) {
             return false;
         }
-        const allowedCategories = await this.getAllowedChildCategoriesForParent(target);
+        const allowedTypes = await this.getAllowedChildCategoriesForParent(target);
         // Compare using the clipboard node's category.
-        return allowedCategories.includes(get(this.clipboard()?.node, 'category'));
+        return allowedTypes.includes(this.clipboard()?.node.type);
     }
     /**
     * Cuts the node with the given id.
@@ -421,14 +424,35 @@ class AXMOrgChartService {
     //#endregion
     //#region Add Node
     async addNode(data) {
-        console.log(data);
         this.layoutService.setNavigationLoading(true);
-        const comp = (await import('./acorex-modules-organization-management-add-item.component-D0tN7Se4.mjs')).AddItemComponent;
+        const comp = (await import('./acorex-modules-organization-management-add-item.component-DsWqdz8M.mjs')).AddItemComponent;
         const node = get(data, 'node');
         const type = get(data, 'config.type');
+        const icon = get(data, 'config.icon');
         const source = get(data, 'source');
         let query;
+        const countrySource = async (request) => {
+            let list = await this.regionalService.getCountries();
+            if (request.filter) {
+                list = applyFilterArray(list, [request.filter]);
+            }
+            const items = list.map((c) => ({
+                id: c.code,
+                title: c.title
+            }));
+            return {
+                items,
+                total: items.length
+            };
+        };
+        let valueField = 'id';
+        let titleField = 'title';
+        let subtitleField = null;
+        let descriptionField = 'description';
         switch (type) {
+            case AXMOrganizationNodeType.Country:
+                query = countrySource;
+                break;
             case AXMOrganizationNodeType.Department:
                 query = this.departmentService.query.bind(this.departmentService);
                 break;
@@ -452,8 +476,10 @@ class AXMOrgChartService {
             size: 'md',
             data: {
                 config: {
-                    valueField: 'id',
-                    textField: 'title',
+                    valueField,
+                    titleField,
+                    subtitleField,
+                    descriptionField,
                     query: query
                 }
             }
@@ -465,6 +491,7 @@ class AXMOrgChartService {
             subtitle: result.data.subtitle,
             type: type,
             parentId: node.id,
+            icon,
             entity: {
                 id: result.data.id,
                 source: source
@@ -833,7 +860,7 @@ class AXMOrgChartPage {
         this.clearChart(this.treeContainer().nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMOrgChartPage, isStandalone: true, selector: "ng-component", providers: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], viewQueries: [{ propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }, { propertyName: "treeContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: AXContextMenuComponent, descendants: true, isSignal: true }, { propertyName: "panView", first: true, predicate: AXPanViewDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.chart.title) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('print') | async)!\" (onClick)=\"printChart()\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{(t('home') | async)}} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Organization </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" [fitContent]=\"true\"\n        wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <ax-context-menu [target]=\"'.axp-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n      </ax-context-menu>\n    </div>\n  </axp-layout-content>\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'};\n        @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\">\n          </div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}}\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2 \">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div>\n    @switch (data.category) {\n    <!-- Company -->\n    @case (NodeTypes.Company) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'primary' }\"></ng-container>\n    }\n    <!-- Location -->\n    @case (NodeTypes.Location) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent1' }\"></ng-container>\n    }\n    <!-- BusinessUnit -->\n    @case (NodeTypes.BusinessUnit) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent2' }\"></ng-container>\n    }\n    <!-- Role -->\n    @case (NodeTypes.Role) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent3' }\"></ng-container>\n    }\n    <!-- Employee -->\n    @case (NodeTypes.Employee) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'surface' }\"></ng-container>\n    }\n    }\n  </div>\n</ng-template>\n\n<!----------------------------------- General Node Template ----------------------------------->\n<ng-template #generalTemplate let-data=\"data\" let-color=\"color\">\n  <div #node class=\"--node-container\" [style]=\"getNodeColors(color)\">\n    <div class=\"--container\">\n      <div class=\"--heading-container\">\n        <div class=\"--content\">\n          <div class=\"--icon\">\n            <i class=\"fa-light fa-xl fa-fw\" [class]=\"data.icon\"></i>\n          </div>\n          <div class=\"--titles\">\n            <span class=\"--title\">{{data.title}}</span>\n            <span class=\"--sub-title\">{{data.subtitle}}</span>\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      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data.children && data.children.length > 0\">\n          {{data.description}}\n        </div>\n      </div>\n      @if(data.children && data.children.length > 0){\n      <div class=\"--toggle\">\n        <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"toggleNode(data,node)\">\n          <ax-icon icon=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;gap:.25rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-toolbar,    axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutHeaderTemplateComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i6.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i6.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMOrgChartPage, isStandalone: true, selector: "ng-component", providers: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], viewQueries: [{ propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, isSignal: true }, { propertyName: "treeContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "parent", first: true, predicate: ["parent"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: AXContextMenuComponent, descendants: true, isSignal: true }, { propertyName: "panView", first: true, predicate: AXPanViewDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.chart.title) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('print') | async)!\" (onClick)=\"printChart()\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{(t('home') | async)}} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Organization </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" [fitContent]=\"true\"\n        wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <ax-context-menu [target]=\"'.axp-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n      </ax-context-menu>\n    </div>\n  </axp-layout-content>\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'};\n        @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\">\n          </div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}}\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2 \">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div>\n    @switch (data.category) {\n    <!-- Company -->\n    @case (NodeTypes.Company) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'primary' }\"></ng-container>\n    }\n    <!-- Location -->\n    @case (NodeTypes.Location) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent1' }\"></ng-container>\n    }\n    <!-- BusinessUnit -->\n    @case (NodeTypes.BusinessUnit) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent2' }\"></ng-container>\n    }\n    <!-- Role -->\n    @case (NodeTypes.Role) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent3' }\"></ng-container>\n    }\n    <!-- Employee -->\n    @case (NodeTypes.Employee) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'surface' }\"></ng-container>\n    }\n    }\n  </div>\n</ng-template>\n\n<!----------------------------------- General Node Template ----------------------------------->\n<ng-template #generalTemplate let-data=\"data\" let-color=\"color\">\n  <div #node class=\"--node-container\" [style]=\"getNodeColors(color)\">\n    <div class=\"--container\">\n      <div class=\"--heading-container\">\n        <div class=\"--content\">\n          <div class=\"--icon\">\n            <i class=\"fa-light fa-xl fa-fw\" [class]=\"data.icon\"></i>\n          </div>\n          <div class=\"--titles\">\n            <span class=\"--title\">{{data.title}}</span>\n            @if(data.subtitle)\n            {\n            <span class=\"--sub-title\">{{data.subtitle}}</span>\n            }\n          </div>\n          @if(data?.children?.length){\n          <div class=\"--badge\">\n            <span>{{data?.children?.length ?? 0}}</span>\n          </div>\n          }\n        </div>\n      </div>\n      @if(data.description)\n      {\n      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data.children && data.children.length > 0\">\n          {{data.description}}\n        </div>\n      </div>\n      }\n      @if(data.children && data.children.length > 0){\n      <div class=\"--toggle\">\n        <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"toggleNode(data,node)\">\n          <ax-icon icon=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;gap:.25rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-side-container,    axp-layout-sections,    axp-layout-section-container,    axp-layout-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-toolbar,    axp-layout-title-bar,    axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutHeaderTemplateComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutActionsComponent, selector: "axp-layout-actions" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "component", type: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer" }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i2.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["minZoom", "maxZoom", "zoomStep", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: i6.AXBreadCrumbsComponent, selector: "ax-breadcrumbs" }, { kind: "component", type: i6.AXBreadCrumbsItemComponent, selector: "ax-breadcrumbs-item", inputs: ["disabled", "active"] }, { kind: "ngmodule", type: AXBadgeModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, decorators: [{
             type: Component,
@@ -856,13 +883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXLoadingModule,
                         AXBreadcrumbsModule,
                         AXBadgeModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.chart.title) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('print') | async)!\" (onClick)=\"printChart()\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{(t('home') | async)}} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Organization </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" [fitContent]=\"true\"\n        wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <ax-context-menu [target]=\"'.axp-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n      </ax-context-menu>\n    </div>\n  </axp-layout-content>\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'};\n        @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\">\n          </div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}}\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2 \">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div>\n    @switch (data.category) {\n    <!-- Company -->\n    @case (NodeTypes.Company) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'primary' }\"></ng-container>\n    }\n    <!-- Location -->\n    @case (NodeTypes.Location) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent1' }\"></ng-container>\n    }\n    <!-- BusinessUnit -->\n    @case (NodeTypes.BusinessUnit) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent2' }\"></ng-container>\n    }\n    <!-- Role -->\n    @case (NodeTypes.Role) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent3' }\"></ng-container>\n    }\n    <!-- Employee -->\n    @case (NodeTypes.Employee) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'surface' }\"></ng-container>\n    }\n    }\n  </div>\n</ng-template>\n\n<!----------------------------------- General Node Template ----------------------------------->\n<ng-template #generalTemplate let-data=\"data\" let-color=\"color\">\n  <div #node class=\"--node-container\" [style]=\"getNodeColors(color)\">\n    <div class=\"--container\">\n      <div class=\"--heading-container\">\n        <div class=\"--content\">\n          <div class=\"--icon\">\n            <i class=\"fa-light fa-xl fa-fw\" [class]=\"data.icon\"></i>\n          </div>\n          <div class=\"--titles\">\n            <span class=\"--title\">{{data.title}}</span>\n            <span class=\"--sub-title\">{{data.subtitle}}</span>\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      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data.children && data.children.length > 0\">\n          {{data.description}}\n        </div>\n      </div>\n      @if(data.children && data.children.length > 0){\n      <div class=\"--toggle\">\n        <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"toggleNode(data,node)\">\n          <ax-icon icon=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;gap:.25rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-header>\n    <axp-layout-title> {{t(rootConfig.entities.chart.title) | async}} </axp-layout-title>\n\n    <axp-layout-description> Clear and dynamic view of your organization's structure </axp-layout-description>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary> </axp-layout-actions-primary>\n\n      <axp-layout-actions-secondary>\n        <ax-button-item [text]=\"(t('print') | async)!\" (onClick)=\"printChart()\">\n          <ax-prefix>\n            <ax-icon [icon]=\"'fa-solid fa-print'\"> </ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n\n    <axp-layout-breadcrumbs>\n      <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward\"></i>\n        </ng-template>\n        <ax-breadcrumbs-item> {{(t('home') | async)}} </ax-breadcrumbs-item>\n        <ax-breadcrumbs-item> Organization </ax-breadcrumbs-item>\n      </ax-breadcrumbs>\n    </axp-layout-breadcrumbs>\n  </axp-layout-header>\n\n  <axp-layout-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" [fitContent]=\"true\"\n        wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <ax-context-menu [target]=\"'.axp-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\" (onOpening)=\"handleContextMenuOnOpening($event)\">\n      </ax-context-menu>\n    </div>\n  </axp-layout-content>\n  <axp-layout-footer>\n    <axp-layout-prefix>\n      <div class=\"ax-flex ax-gap-1 ax-light ax-flex-wrap ax-justify-center\">\n        @let v = {cat:'Company'};\n        @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\">\n          </div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}}\n        }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2 \">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-layout-footer>\n</axp-layout-simple-page>\n\n<ng-template #nodeTemplate let-data>\n  <div>\n    @switch (data.category) {\n    <!-- Company -->\n    @case (NodeTypes.Company) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'primary' }\"></ng-container>\n    }\n    <!-- Location -->\n    @case (NodeTypes.Location) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent1' }\"></ng-container>\n    }\n    <!-- BusinessUnit -->\n    @case (NodeTypes.BusinessUnit) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent2' }\"></ng-container>\n    }\n    <!-- Role -->\n    @case (NodeTypes.Role) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'accent3' }\"></ng-container>\n    }\n    <!-- Employee -->\n    @case (NodeTypes.Employee) {\n    <ng-container *ngTemplateOutlet=\"generalTemplate; context: {  data,color:'surface' }\"></ng-container>\n    }\n    }\n  </div>\n</ng-template>\n\n<!----------------------------------- General Node Template ----------------------------------->\n<ng-template #generalTemplate let-data=\"data\" let-color=\"color\">\n  <div #node class=\"--node-container\" [style]=\"getNodeColors(color)\">\n    <div class=\"--container\">\n      <div class=\"--heading-container\">\n        <div class=\"--content\">\n          <div class=\"--icon\">\n            <i class=\"fa-light fa-xl fa-fw\" [class]=\"data.icon\"></i>\n          </div>\n          <div class=\"--titles\">\n            <span class=\"--title\">{{data.title}}</span>\n            @if(data.subtitle)\n            {\n            <span class=\"--sub-title\">{{data.subtitle}}</span>\n            }\n          </div>\n          @if(data?.children?.length){\n          <div class=\"--badge\">\n            <span>{{data?.children?.length ?? 0}}</span>\n          </div>\n          }\n        </div>\n      </div>\n      @if(data.description)\n      {\n      <div class=\"--body-container\">\n        <div class=\"--description\" [class.ax-pb-3]=\"data.children && data.children.length > 0\">\n          {{data.description}}\n        </div>\n      </div>\n      }\n      @if(data.children && data.children.length > 0){\n      <div class=\"--toggle\">\n        <ax-button class=\"ax-xs ax-rounded-sm\" (onClick)=\"toggleNode(data,node)\">\n          <ax-icon icon=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>", styles: [".axp-node-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;line-height:1rem}.axp-node-hint>div.--badge{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));display:flex;width:.75rem;height:.75rem;align-items:center;justify-content:center;border-radius:.125rem}.axp-chart-node{display:flex;align-items:center;justify-content:center}.axp-chart-node .--node-container{position:relative;cursor:pointer;--node-bg-color: var(--ax-sys-color-primary-surface);--node-text-color: var(--ax-sys-color-on-primary-surface);--node-border-color: var(--ax-sys-color-border-primary-surface)}.axp-chart-node .--node-container .--container{display:flex;max-height:100%;width:100%;flex-direction:column;overflow:hidden;border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-color:rgba(var(--node-border-color))}.axp-chart-node .--node-container .--container .--heading-container{background-color:rgba(var(--node-bg-color));color:rgba(var(--node-text-color));width:100%;padding:.5rem .75rem}.axp-chart-node .--node-container .--container .--heading-container .--content{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--icon{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:2.75rem;height:2.75rem;flex:none;align-items:center;justify-content:center;border-radius:.5rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge{background-color:color-mix(in srgb,rgba(var(--node-bg-color),1) 85%,black);display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center;border-radius:.375rem;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--badge>span{font-size:.75rem;line-height:1rem}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles{display:flex;width:100%;flex:1 1 0%;flex-direction:column;gap:.25rem;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600;line-height:1}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}\n"] }]
         }] });
 
-var orgChart_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AXMOrgChartPage: AXMOrgChartPage
-});
-
-export { AXMOrgChartService as A, orgChart_page as o };
-//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-Cz4ENQRa.mjs.map
+export { AXMOrgChartPage };
+//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-e-N7Ql80.mjs.map