@acorex/modules 19.3.1 → 19.3.3-next.0

package/fesm2022/{acorex-modules-organization-management-add-item.component-DW0TneoX.mjs → acorex-modules-organization-management-add-item.component-DE0Ek0dk.mjs}

@@ -12,7 +12,7 @@ import * as i3 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i5$1 from '@acorex/components/decorators';
+import * as i3$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
@@ -65,7 +65,7 @@ class AddItemComponent extends AXBasePageComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AddItemComponent, isStandalone: true, selector: "ng-component", providers: [], usesInheritance: true, ngImport: i0, template: "<ax-form *translate=\"let t\" #form>\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4\">\n    <ax-form-field>\n      <ax-label>{{t('choose') | async}} </ax-label>\n      <ax-select-box [dataSource]=\"dataSource\" textField=\"title\" valueField=\"id\"\n        (onValueChanged)=\"handleValueChanged($event)\">\n        <ax-search-box></ax-search-box>\n        <ax-validation-rule rule=\"required\"> </ax-validation-rule>\n      </ax-select-box>\n    </ax-form-field>\n    <!-- <ax-form-field>\n      <ax-label>{{t('title') | async}} </ax-label>\n      <ax-text-box [(ngModel)]=\"title\">\n        <ax-validation-rule rule=\"required\"> </ax-validation-rule>\n      </ax-text-box>\n    </ax-form-field> -->\n    <ax-form-field>\n      <ax-label>{{t('subtitle') | async}} </ax-label>\n      <ax-text-box [(ngModel)]=\"subtitle\">\n      </ax-text-box>\n    </ax-form-field>\n    <ax-form-field>\n      <ax-label>{{t('description') | async}} </ax-label>\n      <ax-text-area [(ngModel)]=\"description\">\n      </ax-text-area>\n    </ax-form-field>\n  </div>\n  <ax-footer *translate=\"let t\">\n    <ax-suffix>\n      <ax-button [text]=\"t('cancel') | async\" (onClick)=\"this.close()\"> </ax-button>\n      <ax-button color=\"primary\" [text]=\"t('save') | async\" (onClick)=\"handleSaveClick(form)\"> </ax-button>\n    </ax-suffix>\n  </ax-footer>\n</ax-form>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
                 //
-                AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i6.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i6.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5$1.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: AXTextBoxModule }, { kind: "component", type: i9.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i10.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i6.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "directive", type: i6.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.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: AXTextBoxModule }, { kind: "component", type: i9.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i10.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddItemComponent, decorators: [{
             type: Component,
@@ -86,4 +86,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }], ctorParameters: () => [] });
 
 export { AddItemComponent };
-//# sourceMappingURL=acorex-modules-organization-management-add-item.component-DW0TneoX.mjs.map
+//# sourceMappingURL=acorex-modules-organization-management-add-item.component-DE0Ek0dk.mjs.map

package/fesm2022/{acorex-modules-organization-management-add-item.component-DW0TneoX.mjs.map → acorex-modules-organization-management-add-item.component-DE0Ek0dk.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"acorex-modules-organization-management-add-item.component-DW0TneoX.mjs","sources":["../../../../libs/modules/organization-management/src/lib/features/organization-chart/add-item/add-item.component.ts","../../../../libs/modules/organization-management/src/lib/features/organization-chart/add-item/add-item.component.html"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXDataSource, AXDataSourceLoadCallback, AXValueChangedEvent } from '@acorex/components/common';\nimport { AXFormComponent, AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXBasePageComponent } from '@acorex/components/page';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';\nimport { AXMOrgChartService } from '../org-chart.service';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { AXMOrgChartConfigService } from '../org-chart-configuration.service';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXTextAreaModule } from '@acorex/components/text-area';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n  templateUrl: './add-item.component.html',\n  imports: [\n    CommonModule,\n    FormsModule,\n    //\n    AXSelectBoxModule,\n    AXButtonModule,\n    AXLabelModule,\n    AXFormModule,\n    AXSearchBoxModule,\n    AXDecoratorModule,\n    AXTextBoxModule,\n    AXTextAreaModule,\n    AXTranslationModule\n  ],\n  providers: [],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AddItemComponent extends AXBasePageComponent {\n\n\n  protected title: string;\n  protected subtitle: string;\n  protected description: string;\n\n  selectItem: any;\n\n  config: {\n    query: AXDataSourceLoadCallback<any>,\n    valueField: string;\n    titleField: string;\n    subtitleField?: string;\n    descriptionField?: string;\n  } = {\n      valueField: 'id',\n      titleField: 'title',\n      query: () => Promise.resolve({ items: [], total: 0 })\n    };\n\n  constructor() {\n    super();\n  }\n\n  protected dataSource = new AXDataSource<any>({\n    pageSize: 10,\n    key: this.config.valueField,\n    load: async (e) => await this.config.query(e)\n  });\n\n\n  protected async handleSaveClick(form: AXFormComponent) {\n    const formResult = await form.validate();\n    if (formResult.result) {\n      this.close({\n        id: this.selectItem[this.config.valueField],\n        title: this.title,\n        subtitle: this.subtitle,\n        description: this.description\n      });\n    }\n  }\n\n  protected handleValueChanged(e: AXValueChangedEvent<any>) {\n    this.selectItem = e.component.dataService.selectedItems[0];\n    if (this.selectItem) {\n      this.title = this.selectItem[this.config.titleField];\n      if (this.config.subtitleField) {\n        this.subtitle = this.selectItem[this.config.subtitleField];\n      }\n      if (this.config.descriptionField) {\n        this.description = this.selectItem[this.config.descriptionField];\n      }\n    }\n  }\n}\n","<ax-form *translate=\"let t\" #form>\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4\">\n    <ax-form-field>\n      <ax-label>{{t('choose') | async}} </ax-label>\n      <ax-select-box [dataSource]=\"dataSource\" textField=\"title\" valueField=\"id\"\n        (onValueChanged)=\"handleValueChanged($event)\">\n        <ax-search-box></ax-search-box>\n        <ax-validation-rule rule=\"required\"> </ax-validation-rule>\n      </ax-select-box>\n    </ax-form-field>\n    <!-- <ax-form-field>\n      <ax-label>{{t('title') | async}} </ax-label>\n      <ax-text-box [(ngModel)]=\"title\">\n        <ax-validation-rule rule=\"required\"> </ax-validation-rule>\n      </ax-text-box>\n    </ax-form-field> -->\n    <ax-form-field>\n      <ax-label>{{t('subtitle') | async}} </ax-label>\n      <ax-text-box [(ngModel)]=\"subtitle\">\n      </ax-text-box>\n    </ax-form-field>\n    <ax-form-field>\n      <ax-label>{{t('description') | async}} </ax-label>\n      <ax-text-area [(ngModel)]=\"description\">\n      </ax-text-area>\n    </ax-form-field>\n  </div>\n  <ax-footer *translate=\"let t\">\n    <ax-suffix>\n      <ax-button [text]=\"t('cancel') | async\" (onClick)=\"this.close()\"> </ax-button>\n      <ax-button color=\"primary\" [text]=\"t('save') | async\" (onClick)=\"handleSaveClick(form)\"> </ax-button>\n    </ax-suffix>\n  </ax-footer>\n</ax-form>"],"names":["i4","i8","i11"],"mappings":"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"}
+{"version":3,"file":"acorex-modules-organization-management-add-item.component-DE0Ek0dk.mjs","sources":["../../../../libs/modules/organization-management/src/lib/features/organization-chart/add-item/add-item.component.ts","../../../../libs/modules/organization-management/src/lib/features/organization-chart/add-item/add-item.component.html"],"sourcesContent":["import { AXButtonModule } from '@acorex/components/button';\nimport { AXDataSource, AXDataSourceLoadCallback, AXValueChangedEvent } from '@acorex/components/common';\nimport { AXFormComponent, AXFormModule } from '@acorex/components/form';\nimport { AXLabelModule } from '@acorex/components/label';\nimport { AXBasePageComponent } from '@acorex/components/page';\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';\nimport { AXMOrgChartService } from '../org-chart.service';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { AXMOrgChartConfigService } from '../org-chart-configuration.service';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXTextAreaModule } from '@acorex/components/text-area';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n  templateUrl: './add-item.component.html',\n  imports: [\n    CommonModule,\n    FormsModule,\n    //\n    AXSelectBoxModule,\n    AXButtonModule,\n    AXLabelModule,\n    AXFormModule,\n    AXSearchBoxModule,\n    AXDecoratorModule,\n    AXTextBoxModule,\n    AXTextAreaModule,\n    AXTranslationModule\n  ],\n  providers: [],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class AddItemComponent extends AXBasePageComponent {\n\n\n  protected title: string;\n  protected subtitle: string;\n  protected description: string;\n\n  selectItem: any;\n\n  config: {\n    query: AXDataSourceLoadCallback<any>,\n    valueField: string;\n    titleField: string;\n    subtitleField?: string;\n    descriptionField?: string;\n  } = {\n      valueField: 'id',\n      titleField: 'title',\n      query: () => Promise.resolve({ items: [], total: 0 })\n    };\n\n  constructor() {\n    super();\n  }\n\n  protected dataSource = new AXDataSource<any>({\n    pageSize: 10,\n    key: this.config.valueField,\n    load: async (e) => await this.config.query(e)\n  });\n\n\n  protected async handleSaveClick(form: AXFormComponent) {\n    const formResult = await form.validate();\n    if (formResult.result) {\n      this.close({\n        id: this.selectItem[this.config.valueField],\n        title: this.title,\n        subtitle: this.subtitle,\n        description: this.description\n      });\n    }\n  }\n\n  protected handleValueChanged(e: AXValueChangedEvent<any>) {\n    this.selectItem = e.component.dataService.selectedItems[0];\n    if (this.selectItem) {\n      this.title = this.selectItem[this.config.titleField];\n      if (this.config.subtitleField) {\n        this.subtitle = this.selectItem[this.config.subtitleField];\n      }\n      if (this.config.descriptionField) {\n        this.description = this.selectItem[this.config.descriptionField];\n      }\n    }\n  }\n}\n","<ax-form *translate=\"let t\" #form>\n  <div class=\"ax-flex ax-flex-col ax-gap-4 ax-p-4\">\n    <ax-form-field>\n      <ax-label>{{t('choose') | async}} </ax-label>\n      <ax-select-box [dataSource]=\"dataSource\" textField=\"title\" valueField=\"id\"\n        (onValueChanged)=\"handleValueChanged($event)\">\n        <ax-search-box></ax-search-box>\n        <ax-validation-rule rule=\"required\"> </ax-validation-rule>\n      </ax-select-box>\n    </ax-form-field>\n    <!-- <ax-form-field>\n      <ax-label>{{t('title') | async}} </ax-label>\n      <ax-text-box [(ngModel)]=\"title\">\n        <ax-validation-rule rule=\"required\"> </ax-validation-rule>\n      </ax-text-box>\n    </ax-form-field> -->\n    <ax-form-field>\n      <ax-label>{{t('subtitle') | async}} </ax-label>\n      <ax-text-box [(ngModel)]=\"subtitle\">\n      </ax-text-box>\n    </ax-form-field>\n    <ax-form-field>\n      <ax-label>{{t('description') | async}} </ax-label>\n      <ax-text-area [(ngModel)]=\"description\">\n      </ax-text-area>\n    </ax-form-field>\n  </div>\n  <ax-footer *translate=\"let t\">\n    <ax-suffix>\n      <ax-button [text]=\"t('cancel') | async\" (onClick)=\"this.close()\"> </ax-button>\n      <ax-button color=\"primary\" [text]=\"t('save') | async\" (onClick)=\"handleSaveClick(form)\"> </ax-button>\n    </ax-suffix>\n  </ax-footer>\n</ax-form>"],"names":["i4","i8","i11"],"mappings":"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"}

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

@@ -0,0 +1,124 @@
+import * as i5 from '@acorex/components/alert';
+import { AXAlertModule } from '@acorex/components/alert';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i3$1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i4$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 { AXPBasePageComponent, AXPPageLayoutComponent, AXPBasePage } from '@acorex/platform/themes/default';
+import { AXPThemeLayoutBlockComponent } from '@acorex/platform/themes/shared';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { RootConfig } from './acorex-modules-organization-management.mjs';
+import { A as AXMOrgChartConfigService } from './acorex-modules-organization-management-org-chart-configuration.service-2EZNvjAH.mjs';
+
+class AXMOrgChartConfigurationPage extends AXPBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.chartService = inject(AXMOrgChartConfigService);
+        this.loadingStates = signal({});
+        this.rootConfig = RootConfig;
+    }
+    async ngOnInit() {
+        await super.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;
+        });
+    }
+    async getPageTitle() {
+        return await this.translateService.translateAsync('chart-configuration.page-title', { scope: this.rootConfig.config.i18n });
+    }
+    async getPageDescription() {
+        return await this.translateService.translateAsync('chart-configuration.page-description', { scope: this.rootConfig.config.i18n });
+    }
+    async getSecondaryMenuItems() {
+        return [
+            {
+                title: await this.translateService.translateAsync('chart-configuration.actions.reset', { scope: this.rootConfig.config.i18n }),
+                icon: 'fa-light fa-rotate-left',
+                color: 'primary',
+                command: {
+                    name: 'reset',
+                }
+            }
+        ];
+    }
+    async getPageBreadcrumbs() {
+        return [
+            {
+                title: await this.translateService.translateAsync('root-menu', { scope: this.rootConfig.config.i18n })
+            },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartConfigurationPage, deps: null, 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,
+            {
+                provide: AXPBasePage,
+                useExisting: AXMOrgChartConfigurationPage
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-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\n          <span 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-surface ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-dark-surface\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-dark-surface ax-p-4 ax-font-semibold ax-text-start\">Parent \\ Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-dark-surface ax-p-4 ax-min-w-32 ax-text-center ax-font-semibold\">{{ type }}</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 class=\"ax-border ax-dark-surface ax-p-4 ax-font-semibold ax-text-start\">{{ parent }}</td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-lightest-surface ax-border-surface 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\n                    look=\"blank\"\n                    [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\"\n                    [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\"\n                  >\n                    @if(isLoading) {\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  </axp-page-content>\n</axp-page-layout>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: 
+                //
+                AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "ngmodule", type: 
+                //
+                AXMenuModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$1.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: i4$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXAlertModule }, { kind: "component", type: i5.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,
+                        //
+                        AXPThemeLayoutBlockComponent,
+                        AXPPageLayoutComponent,
+                        //
+                        AXMenuModule,
+                        AXButtonModule,
+                        AXDropdownButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXCheckBoxModule,
+                        AXBreadcrumbsModule,
+                        AXAlertModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        AXMOrgChartConfigService,
+                        {
+                            provide: AXPBasePage,
+                            useExisting: AXMOrgChartConfigurationPage
+                        }
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-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\n          <span 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-surface ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-dark-surface\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-dark-surface ax-p-4 ax-font-semibold ax-text-start\">Parent \\ Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-dark-surface ax-p-4 ax-min-w-32 ax-text-center ax-font-semibold\">{{ type }}</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 class=\"ax-border ax-dark-surface ax-p-4 ax-font-semibold ax-text-start\">{{ parent }}</td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-lightest-surface ax-border-surface 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\n                    look=\"blank\"\n                    [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\"\n                    [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\"\n                  >\n                    @if(isLoading) {\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  </axp-page-content>\n</axp-page-layout>\n" }]
+        }] });
+
+export { AXMOrgChartConfigurationPage };
+//# sourceMappingURL=acorex-modules-organization-management-org-chart-configuration.page-RuvkSheN.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-modules-organization-management-org-chart-configuration.page-RuvkSheN.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 { AXAlertModule } from '@acorex/components/alert';\nimport { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXCheckBoxModule } from '@acorex/components/check-box';\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 { AXPBasePage, AXPBasePageComponent, AXPPageLayoutComponent } from '@acorex/platform/themes/default';\nimport {\n  AXPThemeLayoutBlockComponent,\n} from '@acorex/platform/themes/shared';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { RouterModule } from '@angular/router';\nimport { RootConfig } from '../../const';\nimport { AXMOrgChartConfigService } from './org-chart-configuration.service';\nimport { AXPActionMenuItem, AXPBreadcrumbItem } from '@acorex/platform/core';\n\n@Component({\n  templateUrl: './org-chart-configuration.page.html',\n  imports: [\n    CommonModule,\n    RouterModule,\n    FormsModule,\n    //\n    AXPThemeLayoutBlockComponent,\n    AXPPageLayoutComponent,\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: [\n    AXMOrgChartConfigService,\n    {\n      provide: AXPBasePage,\n      useExisting: AXMOrgChartConfigurationPage\n    }\n  ],\n})\nexport class AXMOrgChartConfigurationPage extends AXPBasePageComponent {\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  override async ngOnInit() {\n    await super.ngOnInit();\n    await this.chartService.load();\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    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  override async getPageTitle(): Promise<string> {\n    return await this.translateService.translateAsync('chart-configuration.page-title', { scope: this.rootConfig.config.i18n });\n  }\n\n  override async getPageDescription(): Promise<string> {\n    return await this.translateService.translateAsync('chart-configuration.page-description', { scope: this.rootConfig.config.i18n });\n  }\n  \n  override async getSecondaryMenuItems(): Promise<AXPActionMenuItem[]> {\n    return [\n      {\n        title: await this.translateService.translateAsync('chart-configuration.actions.reset', { scope: this.rootConfig.config.i18n }),\n        icon: 'fa-light fa-rotate-left',\n        color: 'primary',\n        command: {\n          name: 'reset',\n        }\n      }\n    ];\n  }\n  override async getPageBreadcrumbs(): Promise<AXPBreadcrumbItem[]> {\n    return [\n      {\n        title: await this.translateService.translateAsync('root-menu', { scope: this.rootConfig.config.i18n })\n      },\n    ];\n  }\n}\n","<axp-page-layout *translate=\"let t\">\n  <axp-page-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\n          <span 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-surface ax-rounded-md\">\n          <thead>\n            <tr class=\"ax-dark-surface\">\n              <!-- Top-left empty cell -->\n              <th class=\"ax-border ax-dark-surface ax-p-4 ax-font-semibold ax-text-start\">Parent \\ Child</th>\n              <!-- Horizontal headers -->\n              @for ( type of chartService.types; track $index) {\n              <th class=\"ax-border ax-dark-surface ax-p-4 ax-min-w-32 ax-text-center ax-font-semibold\">{{ type }}</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 class=\"ax-border ax-dark-surface ax-p-4 ax-font-semibold ax-text-start\">{{ parent }}</td>\n              <!-- Render a cell for each potential child type -->\n              @for ( child of chartService.types; track $index) {\n              <td class=\"ax-border ax-lightest-surface ax-border-surface 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\n                    look=\"blank\"\n                    [color]=\"chartService.isAllowed(parent, child) ? 'success' : 'danger'\"\n                    [text]=\"chartService.isAllowed(parent, child) ? 'Allowed' : 'Denied'\"\n                    [disabled]=\"isLoading\"\n                    (onClick)=\"togglePermission(parent, child)\"\n                  >\n                    @if(isLoading) {\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  </axp-page-content>\n</axp-page-layout>\n"],"names":["i1","i2","i3","i4"],"mappings":"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"}

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

@@ -1,10 +1,9 @@
 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';
+import * as i3$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXLoadingModule } from '@acorex/components/loading';
@@ -12,8 +11,8 @@ import * as i2 from '@acorex/components/menu';
 import { AXContextMenuComponent, AXMenuModule } from '@acorex/components/menu';
 import * as i4 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
-import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutFooterComponent } from '@acorex/platform/themes/shared';
+import { AXPBasePageComponent, AXPPageLayoutComponent, AXPBasePage } from '@acorex/platform/themes/default';
+import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent } from '@acorex/platform/themes/shared';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -435,7 +434,7 @@ class AXMOrgChartService {
     async addNode(data) {
         this.layoutService.setNavigationLoading(true);
         try {
-            const component = (await import('./acorex-modules-organization-management-add-item.component-DW0TneoX.mjs')).AddItemComponent;
+            const component = (await import('./acorex-modules-organization-management-add-item.component-DE0Ek0dk.mjs')).AddItemComponent;
             const node = get(data, 'node');
             const type = get(data, 'config.type');
             const icon = get(data, 'config.icon');
@@ -562,9 +561,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 /**
  * Component for displaying and interacting with an organizational chart.
  */
-class AXMOrgChartPage {
+class AXMOrgChartPage extends AXPBasePageComponent {
     constructor() {
-        this.layout = inject(AXPLayoutThemeService);
+        super(...arguments);
         this.rootConfig = RootConfig;
         this.nodeTemplate = viewChild.required('nodeTemplate');
         this.treeContainer = viewChild.required('chart');
@@ -904,15 +903,53 @@ class AXMOrgChartPage {
     updateVar(oldValue, newValue) {
         oldValue.cat = newValue;
     }
+    async getPageTitle() {
+        return await this.translateService.translateAsync('chart.page-title', { scope: this.rootConfig.config.i18n });
+    }
+    async getPageDescription() {
+        return await this.translateService.translateAsync('chart.page-description', { scope: this.rootConfig.config.i18n });
+    }
+    async getSecondaryMenuItems() {
+        return [
+            {
+                title: await this.translateService.translateAsync('chart.actions.print', { scope: this.rootConfig.config.i18n }),
+                icon: 'fa-light fa-print',
+                color: 'primary',
+                command: {
+                    name: 'print',
+                }
+            }
+        ];
+    }
+    async getPageBreadcrumbs() {
+        return [
+            {
+                title: await this.translateService.translateAsync('root-menu', { scope: this.rootConfig.config.i18n })
+            },
+        ];
+    }
+    async execute(command) {
+        if (command.name == 'print') {
+            await this.printChart();
+        }
+    }
     ngOnDestroy() {
         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-page-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-page-header>\n\n  <axp-layout-page-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <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-page-content>\n  <axp-layout-page-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-page-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;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-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: "ngmodule", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMOrgChartPage, deps: null, 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,
+            {
+                provide: AXPBasePage,
+                useExisting: AXMOrgChartPage
+            }
+        ], 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 }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div\n        #chart\n        axPanView\n        [(panX)]=\"panX\"\n        [(panY)]=\"panY\"\n        [freeMode]=\"true\"\n        [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\"\n        wrapperClasses=\"h\"\n        class=\"ax-light\"\n      ></div>\n      <ax-context-menu\n        [target]=\"'.axp-chart-node'\"\n        [orientation]=\"'vertical'\"\n        [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\"\n        (onOpening)=\"handleContextMenuOnOpening($event)\"\n      >\n      </ax-context-menu>\n    </div>\n  </axp-page-content>\n  <axp-page-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'}; @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\"></div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}} }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-page-footer>\n</axp-page-layout>\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  </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            <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      <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>\n", 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;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-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: "ngmodule", type: RouterModule }, { 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", "iconOnly", "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", "freeMode", "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 }, { kind: "component", 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", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXPanViewDirective, selector: "[axPanView]", inputs: ["zoomStep", "minZoom", "maxZoom", "freeMode", "fitContent", "disablePan", "disableZoom", "wrapperClasses", "panX", "panY", "zoom"], outputs: ["panXChange", "panYChange", "zoomChange", "positionChange"], exportAs: ["axPanView"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: 
                 //
-                AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutPageHeaderComponent, selector: "axp-layout-page-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, axp-layout-page-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer,    axp-page-header,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-container,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }], 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,
@@ -930,15 +967,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         AXBreadcrumbsModule,
                         AXBadgeModule,
                         //
-                        AXPSimplePageLayout,
                         AXPThemeLayoutBlockComponent,
-                        AXPThemeLayoutPageHeaderComponent,
-                        AXPThemeLayoutActionsComponent,
-                        AXPThemeLayoutPageSecondaryActionsComponent,
-                        AXPThemeLayoutPagePrimaryActionsComponent,
-                        AXPThemeLayoutFooterComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [AXMOrgChartConfigService, AXMOrgChartService, AXMOrgChartPrintService], template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-page-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-page-header>\n\n  <axp-layout-page-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div #chart axPanView [(panX)]=\"panX\" [(panY)]=\"panY\" [freeMode]=\"true\" [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\" wrapperClasses=\"h\" class=\"ax-light\"></div>\n      <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-page-content>\n  <axp-layout-page-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-page-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;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-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"] }]
+                        AXPPageLayoutComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXMOrgChartConfigService,
+                        AXMOrgChartService,
+                        AXMOrgChartPrintService,
+                        {
+                            provide: AXPBasePage,
+                            useExisting: AXMOrgChartPage
+                        }
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content class=\"ax-overflow-hidden\">\n    <div class=\"ax-h-[calc(100vh-290px)]\" #parent id=\"parent\">\n      <div\n        #chart\n        axPanView\n        [(panX)]=\"panX\"\n        [(panY)]=\"panY\"\n        [freeMode]=\"true\"\n        [(zoom)]=\"panZoomLevel\"\n        [fitContent]=\"true\"\n        wrapperClasses=\"h\"\n        class=\"ax-light\"\n      ></div>\n      <ax-context-menu\n        [target]=\"'.axp-chart-node'\"\n        [orientation]=\"'vertical'\"\n        [closeOn]=\"'leave'\"\n        (onItemClick)=\"handleContextMenuItemClick($event)\"\n        (onOpening)=\"handleContextMenuOnOpening($event)\"\n      >\n      </ax-context-menu>\n    </div>\n  </axp-page-content>\n  <axp-page-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'}; @for (item of nodeTypes; track $index) {\n        <div class=\"axp-node-hint\" [style]=\"getNodeColors(item.color)\" [class.ax-ms-4]=\"v.cat!=item.category\">\n          <div class=\"--badge\"></div>\n          {{item.title}}\n        </div>\n        {{updateVar(v,item.category)}} }\n      </div>\n    </axp-layout-prefix>\n    <axp-layout-suffix>\n      <div class=\"ax-flex ax-gap-2\">\n        <ax-button (onClick)=\"zoomOut()\">\n          <ax-icon class=\"fa-solid fa-minus\"> </ax-icon>\n        </ax-button>\n        <ax-button [text]=\"panZoomLevel()\" (onClick)=\"zoomReset()\"></ax-button>\n        <ax-button (onClick)=\"zoomIn()\">\n          <ax-icon class=\"fa-solid fa-add\"> </ax-icon>\n        </ax-button>\n        <ax-button (onClick)=\"toggleFullscreen()\">\n          <ax-icon>\n            <i class=\"fa-solid\" [class]=\"isFullscreen()? 'fa-compress' : 'fa-expand'\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </axp-layout-suffix>\n  </axp-page-footer>\n</axp-page-layout>\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  </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            <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      <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>\n", 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;overflow:hidden}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-chart-node .--node-container .--container .--heading-container .--content .--titles .--sub-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--body-container{width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-chart-node .--node-container .--container .--body-container .--description{text-align:center;font-size:.875rem;line-height:1rem;opacity:.85}.axp-chart-node .--node-container .--container .--toggle{position:absolute;left:0;right:0;bottom:-.75rem;display:flex;width:100%;-webkit-user-select:none;-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"] }]
         }] });
 
 export { AXMOrgChartPage };
-//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-DnRbGIWN.mjs.map
+//# sourceMappingURL=acorex-modules-organization-management-org-chart.page-C2qYJxpY.mjs.map