@acorex/modules 19.2.5 → 19.2.6

package/fesm2022/acorex-modules-organization-managment-org-chart-configuration.page-DEFgztyn.mjs

@@ -0,0 +1,92 @@
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i5 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i5$1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXMenuModule } from '@acorex/components/menu';
+import * as i4 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
+import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderTemplateComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent } from '@acorex/platform/themes/shared';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { RootConfig } from './acorex-modules-organization-managment.mjs';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import { FormsModule } from '@angular/forms';
+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-managment-org-chart-configuration.service-D-LkPUIw.mjs';
+
+class AXMOrgChartConfigurationPage {
+    constructor() {
+        this.layout = inject(AXPLayoutThemeService);
+        this.chartService = inject(AXMOrgChartConfigService);
+        this.loadingStates = signal({});
+        this.rootConfig = RootConfig;
+    }
+    async ngOnInit() {
+        await this.chartService.load();
+    }
+    async togglePermission(parent, child) {
+        //TODO: Check the async and loading
+        // Set the loading state for this cell to true.
+        this.loadingStates.update((states) => {
+            if (!states[parent]) {
+                states[parent] = {};
+            }
+            states[parent][child] = true;
+            return states;
+        });
+        this.chartService.set(parent, child, !this.chartService.get(parent, child));
+        await this.chartService.update();
+        // Turn off the loading state.
+        this.loadingStates.update((states) => {
+            if (!states[parent]) {
+                states[parent] = {};
+            }
+            states[parent][child] = false;
+            return states;
+        });
+    }
+    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 2xl:ax-w-3/4  3xl:ax-w-1/2\">\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=\"twotone\" [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: 
+                //
+                AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-header-container,    axp-layout-footer-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: 
+                //
+                AXMenuModule }, { 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: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { 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: AXAlertModule }, { kind: "component", type: i7.AXAlertComponent, selector: "ax-alert", inputs: ["color", "timeOut"], outputs: ["colorChange", "onClosed", "timeOutChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartConfigurationPage, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        CommonModule,
+                        RouterModule,
+                        FormsModule,
+                        //
+                        AXPSimplePageLayout,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutHeaderTemplateComponent,
+                        AXPThemeLayoutActionsComponent,
+                        AXPThemeLayoutPageSecondaryActionsComponent,
+                        AXPThemeLayoutPagePrimaryActionsComponent,
+                        //
+                        AXMenuModule,
+                        AXButtonModule,
+                        AXDropdownButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        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 2xl:ax-w-3/4  3xl:ax-w-1/2\">\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=\"twotone\" [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>" }]
+        }] });
+
+export { AXMOrgChartConfigurationPage };
+//# sourceMappingURL=acorex-modules-organization-managment-org-chart-configuration.page-DEFgztyn.mjs.map

package/fesm2022/acorex-modules-organization-managment-org-chart-configuration.page-DEFgztyn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-organization-managment-org-chart-configuration.page-DEFgztyn.mjs","sources":["../../../../libs/modules/organization-managment/src/lib/features/organization-chart/org-chart-configuration.page.ts","../../../../libs/modules/organization-managment/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 2xl:ax-w-3/4  3xl:ax-w-1/2\">\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=\"twotone\" [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>"],"names":["i2","i3","i4","i5"],"mappings":"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"}

package/fesm2022/acorex-modules-organization-managment-org-chart-configuration.service-D-LkPUIw.mjs

@@ -0,0 +1,145 @@
+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-managment-setting.keys-CF6Giykz.mjs';
+
+class AXMOrgChartConfigService {
+    constructor() {
+        this.settingService = inject(AXPSettingService);
+        //
+        this._types = ['Company', 'Location', 'BusinessUnit', 'Role', 'Employee'];
+        this._defaultPermissioEncoded = '0111001110001100001100001';
+        this.permissions = signal(this.defaultPermissions());
+    }
+    get types() {
+        return this._types;
+    }
+    defaultPermissions() {
+        return this.decode(this._defaultPermissioEncoded);
+    }
+    encode(permissions) {
+        let str = '';
+        for (const parent of this.types) {
+            for (const child of this.types) {
+                str += (permissions[parent]?.[child] ?? 0).toString();
+            }
+        }
+        return str;
+    }
+    decode(encoded) {
+        const result = {};
+        const expectedLength = this.types.length * this.types.length;
+        if (encoded.length !== expectedLength) {
+            throw new Error(`Invalid permissions string length. Expected ${expectedLength} but got ${encoded.length}`);
+        }
+        let index = 0;
+        for (const parent of this.types) {
+            result[parent] = {};
+            for (const child of this.types) {
+                const char = encoded.charAt(index);
+                result[parent][child] = parseInt(char, 10);
+                index++;
+            }
+        }
+        return result;
+    }
+    decodeMatrix(matrix) {
+        const newPermissions = {};
+        this.types.forEach((parent, rowIndex) => {
+            newPermissions[parent] = {};
+            this.types.forEach((child, colIndex) => {
+                newPermissions[parent][child] = matrix[rowIndex][colIndex];
+            });
+        });
+        return newPermissions;
+    }
+    validateEncodedValue(storedValue) {
+        try {
+            if (typeof storedValue === 'string') {
+                const expectedLength = this.types.length * this.types.length;
+                // Check that the string is the correct length and only contains 0s and 1s.
+                if (storedValue.length === expectedLength && /^[01]+$/.test(storedValue)) {
+                    return this.decode(storedValue);
+                }
+            }
+            else if (Array.isArray(storedValue)) {
+                // Validate the 2D array dimensions and values.
+                if (storedValue.length === this.types.length &&
+                    storedValue.every(row => Array.isArray(row) &&
+                        row.length === this.types.length &&
+                        row.every(val => val === 0 || val === 1))) {
+                    return this.decodeMatrix(storedValue);
+                }
+            }
+            else if (typeof storedValue === 'object' && storedValue !== null) {
+                // Validate that the object has all the required keys and that their values are 0 or 1.
+                let valid = true;
+                for (const parent of this.types) {
+                    if (!(parent in storedValue)) {
+                        valid = false;
+                        break;
+                    }
+                    const childPermissions = storedValue[parent];
+                    for (const child of this.types) {
+                        if (!(child in childPermissions) || (childPermissions[child] !== 0 && childPermissions[child] !== 1)) {
+                            valid = false;
+                            break;
+                        }
+                    }
+                    if (!valid)
+                        break;
+                }
+                if (valid) {
+                    return storedValue;
+                }
+            }
+        }
+        catch (error) {
+            // In case of any errors during validation, fall back to default permissions.
+        }
+        // Return the default permissions if validation fails.
+        return this.defaultPermissions();
+    }
+    isAllowed(parent, child) {
+        return (this.permissions()[parent]?.[child] ?? 0) === 1;
+    }
+    set(parent, child, value) {
+        this.permissions.update((p) => {
+            if (!p[parent]) {
+                p[parent] = {};
+            }
+            p[parent][child] = value ? 1 : 0;
+            return p;
+        });
+    }
+    get(parent, child) {
+        return this.permissions()[parent]?.[child] === 1;
+    }
+    async load() {
+        const storedValue = await this.settingService
+            .scope(AXPSettingScope.Tenant)
+            .get(AXPOrganizationSetting.Relations);
+        // Use the validation method to ensure the stored value is correct.
+        if (storedValue) {
+            const validatedPermissions = this.validateEncodedValue(storedValue);
+            this.permissions.set(validatedPermissions);
+        }
+        else {
+            this.permissions.set(this.defaultPermissions());
+        }
+    }
+    async update() {
+        const matrix = this.encode(this.permissions());
+        await this.settingService
+            .scope(AXPSettingScope.Tenant)
+            .set(AXPOrganizationSetting.Relations, matrix);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartConfigService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartConfigService, decorators: [{
+            type: Injectable
+        }] });
+
+export { AXMOrgChartConfigService as A };
+//# sourceMappingURL=acorex-modules-organization-managment-org-chart-configuration.service-D-LkPUIw.mjs.map

package/fesm2022/acorex-modules-organization-managment-org-chart-configuration.service-D-LkPUIw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-organization-managment-org-chart-configuration.service-D-LkPUIw.mjs","sources":["../../../../libs/modules/organization-managment/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';\n\n\n@Injectable()\nexport class AXMOrgChartConfigService {\n\n    private readonly settingService = inject(AXPSettingService);\n    //\n    protected _types = ['Company', 'Location', 'BusinessUnit', 'Role', 'Employee'];\n\n    public get types(): string[] {\n        return this._types;\n    }\n\n    private _defaultPermissioEncoded = '0111001110001100001100001';\n\n    protected permissions = signal<{ [parent: string]: { [child: string]: number } }>(this.defaultPermissions());\n\n\n    private defaultPermissions() {\n        return this.decode(this._defaultPermissioEncoded);\n    }\n\n\n    private encode(\n        permissions: { [parent: string]: { [child: string]: number } }\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): { [parent: string]: { [child: string]: number } } {\n        const result: { [parent: string]: { [child: string]: number } } = {};\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[][]): { [parent: string]: { [child: string]: number } } {\n        const newPermissions: { [parent: string]: { [child: string]: number } } = {};\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): { [parent: string]: { [child: string]: number } } {\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 { [parent: string]: { [child: string]: number } };\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":"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"}

package/fesm2022/{acorex-modules-organization-managment-org-chart.page-CTHNSn2n.mjs → acorex-modules-organization-managment-org-chart.page-B3aaLlm2.mjs}

@@ -1,4 +1,7 @@
 import { AXPanViewDirective } from '@acorex/cdk/pan-view';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i6 from '@acorex/components/breadcrumbs';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
 import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i5 from '@acorex/components/decorators';
@@ -16,11 +19,11 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, Injectable, viewChild, NgZone, ViewContainerRef, signal, afterNextRender, Component, ChangeDetectionStrategy } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { AXMOrganizationManagementCompanyEntityService, AXMOrganizationManagementDepartmentEntityService, AXMOrganizationManagementEmployeeEntityService, AXMOrganizationManagementPositionEntityService, AXMOrganizationManagementChartEntityService, RootConfig } from './acorex-modules-organization-managment.mjs';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
-import { AXPExportService } from '@acorex/platform/common';
-import * as i6 from '@acorex/components/breadcrumbs';
-import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
-import { RootConfig } from './acorex-modules-organization-managment.mjs';
+import { AXPExportService, AXPDataGenerator } from '@acorex/platform/common';
+import { AXPSessionService } from '@acorex/platform/auth';
+import { A as AXMOrgChartConfigService } from './acorex-modules-organization-managment-org-chart-configuration.service-D-LkPUIw.mjs';
 
 class AXMOrgChartPrintService {
     constructor() {
@@ -121,13 +124,100 @@ class AXMOrgChartPrintService {
         return (await this.translationService.translateAsync(key, { scope: 'organization-management' })) + '...';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPrintService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            type: Injectable
+        }] });
+
+class AXMOrgChartService {
+    constructor() {
+        this.companyService = inject(AXMOrganizationManagementCompanyEntityService);
+        this.departmentService = inject(AXMOrganizationManagementDepartmentEntityService);
+        this.employmentService = inject(AXMOrganizationManagementEmployeeEntityService);
+        this.positionService = inject(AXMOrganizationManagementPositionEntityService);
+        this.chartService = inject(AXMOrganizationManagementChartEntityService);
+        this.sessionService = inject(AXPSessionService);
+        this.configService = inject(AXMOrgChartConfigService);
+    }
+    async load(id) {
+        if (id) {
+            const item = await this.chartService.getOne(id);
+            return item;
+        }
+        else {
+            return await this.createNew();
+        }
+    }
+    async createNew() {
+        const tenant = this.sessionService.tenant;
+        return {
+            //createAt: new Date(),
+            //updateAt: new Date(),
+            version: '0.0.0',
+            nodes: [{
+                    id: AXPDataGenerator.uuid(),
+                    title: tenant.name,
+                    entity: {
+                        id: tenant.id,
+                        source: 'tenant',
+                    },
+                }],
+        };
+    }
+    async save(chart) {
+        if (chart.id) {
+            await this.chartService.updateOne(chart.id, { version: chart.version, nodes: chart.nodes, updateAt: new Date() });
+        }
+        else {
+            await this.chartService.insertOne(chart);
+        }
+    }
+    getContextMenu() {
+        const types = this.configService.types;
+        return [];
+    }
+    async listItemType(type, event) {
+        switch (type.text.toLowerCase()) {
+            case 'company':
+                return await this.companyService.query({
+                    skip: event.skip,
+                    take: event.take,
+                    filter: event.filter,
+                    sort: event.sort,
+                });
+            case 'country':
+                break;
+            case 'city':
+                break;
+            case 'department':
+                return (await this.departmentService.query({
+                    skip: event.skip,
+                    take: event.take,
+                    filter: event.filter,
+                    sort: event.sort,
+                }));
+            case 'position':
+                return (await this.positionService.query({
+                    skip: event.skip,
+                    take: event.take,
+                    filter: event.filter,
+                    sort: event.sort,
+                }));
+            case 'employment':
+                return (await this.employmentService.query({
+                    skip: event.skip,
+                    take: event.take,
+                    filter: event.filter,
+                    sort: event.sort,
+                }));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartService, decorators: [{
+            type: Injectable
         }] });
 
 var AXMOrganizationNodeType;
@@ -360,10 +450,10 @@ class AXMOrgChartPage {
     createChart(el, data) {
         this.ngzone.runOutsideAngular(() => {
             // Constants for node dimensions and spacing
-            const NODE_WIDTH_BASE = 240; // Base width for each node
-            const NODE_HEIGHT_BASE = 120; // Base height for each node
-            const HORIZONTAL_SPACING = 25; // Horizontal spacing between nodes
-            const VERTICAL_SPACING = 50; // Vertical spacing between levels
+            const NODE_WIDTH_BASE = 260; // Base width for each node
+            const NODE_HEIGHT_BASE = 180; // Base height for each node
+            const HORIZONTAL_SPACING = 20; // Horizontal spacing between nodes
+            const VERTICAL_SPACING = 40; // Vertical spacing between levels
             // Clear existing SVG and create a new one
             this.clearChart(el);
             const newSvg = this.d3.select(el).append('svg');
@@ -447,9 +537,10 @@ class AXMOrgChartPage {
             element.appendChild(viewRef.rootNodes[0]);
         }
     }
-    toggleNode(data) {
+    toggleNode(data, el) {
         data.isExpanded = data.isExpanded === undefined ? false : !data.isExpanded;
         this.createChart(this.treeContainer().nativeElement, this.DATA); // Re-render the chart
+        el.scrollIntoView({ behavior: 'smooth' });
     }
     clearChart(el) {
         this.d3.select(el).select('svg').remove();
@@ -471,11 +562,11 @@ class AXMOrgChartPage {
         this.chartPrintService.printChart(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: [], 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 }], 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\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-h-[calc(100vh-190px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"h\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 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    </div>\n\n    <ax-context-menu [target]=\"'.axp-org-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\">\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n<div #chart class=\"chart-container ax-border\"></div>\n\n<!-- <ax-chart nodeTemplate=\"nodeTemplate\" nodes=\"nodes\"></ax-chart> -->\n\n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border ax-select-none ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\">\n    <div class=\"ax-bg-primary-400 ax-text-on-primary ax-px-4 ax-py-2 ax-h-full ax-cursor-pointer hover:ax-brightness-90\"\n      [class.ax-rounded-b-none]=\"data.description\" (dblclick)=\"toggleNode(data)\">\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-between ax-h-full\">\n        <ax-icon><i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i></ax-icon>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n        @if (data.children && data.children.length > 0) {\n        <div class=\"ax-flex ax-justify-center ax-items-center\" (click)=\"toggleNode(data)\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></i></ax-icon>\n        </div>\n        }@else {\n        <span></span>\n        }\n      </div>\n    </div>\n    @if(data.description) {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">\n      {{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".axp-org-chart-node{overflow:visible;white-space:nowrap;display:flex;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXMOrgChartPage, isStandalone: true, selector: "ng-component", providers: [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 }], 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> Home </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>\n    <div class=\"ax-h-[calc(100vh-190px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"h\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 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    </div>\n\n    <ax-context-menu\n      [target]=\"'.axp-org-chart-node'\"\n      [orientation]=\"'vertical'\"\n      [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n    >\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n<div #chart class=\"chart-container ax-border\"></div>\n\n<!-- <ax-chart nodeTemplate=\"nodeTemplate\" nodes=\"nodes\"></ax-chart> -->\n<!-- \n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border ax-select-none ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\"\n  >\n    <div\n      class=\"ax-bg-primary-400 ax-text-on-primary ax-px-4 ax-py-2 ax-h-full ax-cursor-pointer hover:ax-brightness-90\"\n      [class.ax-rounded-b-none]=\"data.description\"\n      (dblclick)=\"toggleNode(data)\"\n    >\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-between ax-h-full\">\n        <ax-icon><i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i></ax-icon>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n        @if (data.children && data.children.length > 0) {\n        <div class=\"ax-flex ax-justify-center ax-items-center\" (click)=\"toggleNode(data)\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></i\n          ></ax-icon>\n        </div>\n        }@else {\n        <span></span>\n        }\n      </div>\n    </div>\n    @if(data.description) {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">\n      {{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template> -->\n\n<ng-template #nodeTemplate let-data>\n  <div #node class=\"axp-node\" [class]=\"data.children && data.children.length > 0 ? 'ax-pb-3' : ''\">\n    <div class=\"axp-node-information\">\n      <div class=\"axp-node-information-bar\">\n        <div class=\"axp-node-image-bar\">\n          @if(false){\n          <div class=\"axp-node-image\"></div>\n          }@else {\n          <div class=\"axp-node-icon\">\n            <i\n              class=\"fa-light ax-text-2xl ax-size-full ax-flex ax-justify-center ax-items-center\"\n              [class]=\"data.icon\"\n            ></i>\n          </div>\n          }\n        </div>\n        <div class=\"axp-node-title-bar\">\n          <span class=\"axp-node-title\">{{data.title}}</span>\n          <span class=\"axp-node-subtitle\" [title]=\"data.subtitle\">{{data.subtitle}}</span>\n        </div>\n      </div>\n\n      @if(data?.children?.length){\n      <div class=\"axp-badge\">\n        <span>{{data?.children?.length ?? 0}}</span>\n      </div>\n      }\n    </div>\n    @if(data?.description){\n    <div class=\"axp-node-description\"><span> {{data?.description}} </span></div>\n    } @if(data.children && data.children.length > 0){\n    <div class=\"axp-node-children-toggle\">\n      <div class=\"ax-size-4 ax-flex ax-justify-center ax-items-center\">\n        <i\n          class=\"fa-solid ax-text-sm\"\n          [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n          (click)=\"toggleNode(data,node)\"\n        >\n        </i>\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".axp-org-chart-node{overflow:visible;white-space:nowrap;display:flex;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}.axp-node{position:relative;max-height:100%;border-radius:.375rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--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)}.axp-node:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axp-node:has(.axp-node-description)>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.axp-node .axp-node-information{display:flex;align-items:center;justify-content:space-between;gap:.25rem;overflow:hidden;padding:.75rem}.axp-node .axp-node-information .axp-node-information-bar{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon{display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar{display:flex;flex-direction:column}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle:is(.ax-dark *){--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-badge{display:flex;width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-node .axp-node-description{overflow:hidden;padding:.75rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-node .axp-node-children-toggle{position:absolute;bottom:-.75rem;left:calc(50% - 12px);display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border-radius:.125rem;border-width:1px!important;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover{--tw-border-opacity: 1;border-color:rgb(82 82 82 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgb(163 163 163 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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-footer-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: 
                 //
-                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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, decorators: [{
             type: Component,
@@ -497,9 +588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXDecoratorModule,
                         AXPanViewDirective,
                         AXLoadingModule,
-                        AXBreadcrumbsModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [], 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\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-h-[calc(100vh-190px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"h\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 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    </div>\n\n    <ax-context-menu [target]=\"'.axp-org-chart-node'\" [orientation]=\"'vertical'\" [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\">\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n<div #chart class=\"chart-container ax-border\"></div>\n\n<!-- <ax-chart nodeTemplate=\"nodeTemplate\" nodes=\"nodes\"></ax-chart> -->\n\n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border ax-select-none ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\">\n    <div class=\"ax-bg-primary-400 ax-text-on-primary ax-px-4 ax-py-2 ax-h-full ax-cursor-pointer hover:ax-brightness-90\"\n      [class.ax-rounded-b-none]=\"data.description\" (dblclick)=\"toggleNode(data)\">\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-between ax-h-full\">\n        <ax-icon><i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i></ax-icon>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n        @if (data.children && data.children.length > 0) {\n        <div class=\"ax-flex ax-justify-center ax-items-center\" (click)=\"toggleNode(data)\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></i></ax-icon>\n        </div>\n        }@else {\n        <span></span>\n        }\n      </div>\n    </div>\n    @if(data.description) {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">\n      {{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".axp-org-chart-node{overflow:visible;white-space:nowrap;display:flex;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}\n"] }]
+                        AXBreadcrumbsModule,
+                        AXBadgeModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [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> Home </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>\n    <div class=\"ax-h-[calc(100vh-190px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [(zoom)]=\"panZoomLevel\" wrapperClasses=\"h\"></div>\n      <div class=\"ax-absolute ax-bottom-2 ax-right-2 ax-z-10 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    </div>\n\n    <ax-context-menu\n      [target]=\"'.axp-org-chart-node'\"\n      [orientation]=\"'vertical'\"\n      [closeOn]=\"'leave'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n    >\n    </ax-context-menu>\n  </axp-layout-content>\n</axp-layout-simple-page>\n<div #chart class=\"chart-container ax-border\"></div>\n\n<!-- <ax-chart nodeTemplate=\"nodeTemplate\" nodes=\"nodes\"></ax-chart> -->\n<!-- \n<ng-template #nodeTemplate let-data>\n  <div\n    class=\"ax-border ax-select-none ax-shadow-md ax-border-primary-500 ax-text-primary-800 ax-rounded-md ax-bg-white ax-flex ax-flex-col ax-overflow-hidden\"\n  >\n    <div\n      class=\"ax-bg-primary-400 ax-text-on-primary ax-px-4 ax-py-2 ax-h-full ax-cursor-pointer hover:ax-brightness-90\"\n      [class.ax-rounded-b-none]=\"data.description\"\n      (dblclick)=\"toggleNode(data)\"\n    >\n      <div class=\"ax-flex ax-gap-3 ax-items-center ax-justify-between ax-h-full\">\n        <ax-icon><i class=\"fa-light fa-lg\" [class]=\"data.icon\"></i></ax-icon>\n        <div class=\"ax-flex ax-flex-col ax-gap-1\">\n          <div class=\"ax-text-xs ax-font-bold\">{{ data.title }}</div>\n          @if (data.subtitle) {\n          <div class=\"ax-text-xs\">{{ data.subtitle }}</div>\n          }\n        </div>\n        @if (data.children && data.children.length > 0) {\n        <div class=\"ax-flex ax-justify-center ax-items-center\" (click)=\"toggleNode(data)\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"></i\n          ></ax-icon>\n        </div>\n        }@else {\n        <span></span>\n        }\n      </div>\n    </div>\n    @if(data.description) {\n    <div class=\"ax-text-xs ax-break-words ax-px-4 ax-py-2 ax-text-default dark:ax-text-on-ghost\">\n      {{ data.description }}\n    </div>\n    }\n  </div>\n</ng-template> -->\n\n<ng-template #nodeTemplate let-data>\n  <div #node class=\"axp-node\" [class]=\"data.children && data.children.length > 0 ? 'ax-pb-3' : ''\">\n    <div class=\"axp-node-information\">\n      <div class=\"axp-node-information-bar\">\n        <div class=\"axp-node-image-bar\">\n          @if(false){\n          <div class=\"axp-node-image\"></div>\n          }@else {\n          <div class=\"axp-node-icon\">\n            <i\n              class=\"fa-light ax-text-2xl ax-size-full ax-flex ax-justify-center ax-items-center\"\n              [class]=\"data.icon\"\n            ></i>\n          </div>\n          }\n        </div>\n        <div class=\"axp-node-title-bar\">\n          <span class=\"axp-node-title\">{{data.title}}</span>\n          <span class=\"axp-node-subtitle\" [title]=\"data.subtitle\">{{data.subtitle}}</span>\n        </div>\n      </div>\n\n      @if(data?.children?.length){\n      <div class=\"axp-badge\">\n        <span>{{data?.children?.length ?? 0}}</span>\n      </div>\n      }\n    </div>\n    @if(data?.description){\n    <div class=\"axp-node-description\"><span> {{data?.description}} </span></div>\n    } @if(data.children && data.children.length > 0){\n    <div class=\"axp-node-children-toggle\">\n      <div class=\"ax-size-4 ax-flex ax-justify-center ax-items-center\">\n        <i\n          class=\"fa-solid ax-text-sm\"\n          [class]=\"data.isExpanded === false ? 'fa-chevron-down' : 'fa-chevron-up'\"\n          (click)=\"toggleNode(data,node)\"\n        >\n        </i>\n      </div>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [".axp-org-chart-node{overflow:visible;white-space:nowrap;display:flex;align-items:center;justify-content:center}#parent:fullscreen{background-color:rgba(var(--axp-brand-color))}.axp-node{position:relative;max-height:100%;border-radius:.375rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--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)}.axp-node:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node:hover{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axp-node:has(.axp-node-description)>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.axp-node .axp-node-information{display:flex;align-items:center;justify-content:space-between;gap:.25rem;overflow:hidden;padding:.75rem}.axp-node .axp-node-information .axp-node-information-bar{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon{display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-image-bar .axp-node-icon:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(64 64 64 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar{display:flex;flex-direction:column}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-node-information-bar .axp-node-title-bar .axp-node-subtitle:is(.ax-dark *){--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-node .axp-node-information .axp-badge{display:flex;width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border-radius:.125rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-node .axp-node-description{overflow:hidden;padding:.75rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-node .axp-node-children-toggle{position:absolute;bottom:-.75rem;left:calc(50% - 12px);display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;border-radius:.125rem;border-width:1px!important;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover{--tw-border-opacity: 1;border-color:rgb(82 82 82 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.axp-node .axp-node-children-toggle:hover:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgb(163 163 163 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}\n"] }]
         }] });
 
 export { AXMOrgChartPage };
-//# sourceMappingURL=acorex-modules-organization-managment-org-chart.page-CTHNSn2n.mjs.map
+//# sourceMappingURL=acorex-modules-organization-managment-org-chart.page-B3aaLlm2.mjs.map