@acorex/modules 19.2.20 → 19.3.0-next.1

package/fesm2022/acorex-modules-common-index-rvP9ISgL.mjs

@@ -0,0 +1,717 @@
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { output, input, ChangeDetectionStrategy, Component, model, signal, inject, Injectable, computed, effect, ViewEncapsulation } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXButtonGroupModule } from '@acorex/components/button-group';
+import * as i2 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDialogService } from '@acorex/components/dialog';
+import * as i3 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i3$2 from '@acorex/components/grid-layout-builder';
+import { AXGridLayoutBuilderModule } from '@acorex/components/grid-layout-builder';
+import * as i4 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import * as i2$1 from '@acorex/platform/layout/builder';
+import { AXPWidgetGroupEnum, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPWidgetPropertyViewerComponent, AXPWidgetPickerService, AXPDesignerService } from '@acorex/platform/layout/designer';
+import { AXPBasePageComponent, AXPPageLayoutComponent, AXPBasePage } from '@acorex/platform/themes/default';
+import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent } from '@acorex/platform/themes/shared';
+import { AXPopupService } from '@acorex/components/popup';
+import { AXMDashboardService, RootConfig } from './acorex-modules-common.mjs';
+import { AXPSettingService } from '@acorex/platform/common';
+import { AXPPlatformScope, AXPDataGenerator } from '@acorex/platform/core';
+import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import * as i4$1 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i3$1 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class AXCDashboardWidgetWrapperComponent {
+    constructor() {
+        this.onDelete = output();
+        this.onConfiguration = output();
+        this.hasOptions = input(true);
+    }
+    handleOnItemClick(event) {
+        switch (event.item.data) {
+            case 'delete':
+                this.onDelete.emit();
+                break;
+            case 'configuration':
+                this.onConfiguration.emit();
+                break;
+            default:
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXCDashboardWidgetWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXCDashboardWidgetWrapperComponent, isStandalone: true, selector: "axc-dashboard-widget-wrapper", inputs: { hasOptions: { classPropertyName: "hasOptions", publicName: "hasOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete", onConfiguration: "onConfiguration" }, ngImport: i0, template: "<section class=\"ax-relative ax-size-full ax-flex ax-justify-center ax-items-center ax-group\">\n  @if(hasOptions()){\n  <div class=\"ax-p-1 ax-absolute ax-top-0 ax-left-0 ax-z-[9999] ax-invisible group-hover:ax-visible\">\n    <ax-button class=\"ax-sm\" [look]=\"'blank'\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-ellipsis-h\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel>\n        <ng-container *translate=\"let t\">\n          <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n            <ax-button-item\n              [data]=\"'configuration'\"\n              [text]=\"(t('configuration', { scope: 'dashboard' }) | async) || 'configuration'\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [data]=\"'delete'\"\n              [text]=\"(t('delete', { scope: 'dashboard' }) | async) || 'delete'\"\n              color=\"danger\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ng-container>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  }\n  <ng-content></ng-content>\n</section>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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: AXDropdownModule }, { kind: "component", type: i3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXCDashboardWidgetWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axc-dashboard-widget-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXDropdownModule, AXTranslationModule, CommonModule], standalone: true, template: "<section class=\"ax-relative ax-size-full ax-flex ax-justify-center ax-items-center ax-group\">\n  @if(hasOptions()){\n  <div class=\"ax-p-1 ax-absolute ax-top-0 ax-left-0 ax-z-[9999] ax-invisible group-hover:ax-visible\">\n    <ax-button class=\"ax-sm\" [look]=\"'blank'\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-ellipsis-h\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel>\n        <ng-container *translate=\"let t\">\n          <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n            <ax-button-item\n              [data]=\"'configuration'\"\n              [text]=\"(t('configuration', { scope: 'dashboard' }) | async) || 'configuration'\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [data]=\"'delete'\"\n              [text]=\"(t('delete', { scope: 'dashboard' }) | async) || 'delete'\"\n              color=\"danger\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-solid fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          </ax-button-item-list>\n        </ng-container>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n  }\n  <ng-content></ng-content>\n</section>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }] });
+
+class AXCAddDashboardPopup extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.title = model('');
+        this.description = model('');
+    }
+    get isValid() {
+        return !!this.title()?.trim();
+    }
+    ngOnInit() {
+        this.title.set(this.data?.title || '');
+        this.description.set(this.data?.description || '');
+    }
+    async handleClose(isCanceled = false) {
+        this.close({
+            title: this.title()?.trim(),
+            description: this.description()?.trim(),
+            isCanceled,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXCAddDashboardPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: AXCAddDashboardPopup, isStandalone: true, selector: "ng-component", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange", description: "descriptionChange" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-[auto_18rem] ax-gap-4 ax-justify-center ax-p-4 ax-items-center">
+      <ax-label>Title</ax-label>
+      <ax-text-box [(ngModel)]="title" name="title" placeholder="Enter dashboard title"> </ax-text-box>
+
+      <ax-label>Description</ax-label>
+      <ax-text-box [(ngModel)]="description" name="description" placeholder="Enter dashboard description">
+      </ax-text-box>
+    </div>
+
+    <ax-footer>
+      <ax-prefix></ax-prefix>
+      <ax-suffix>
+        <ax-button text="Cancel" look="solid" (onClick)="handleClose(true)"> </ax-button>
+        <ax-button text="Save" look="solid" color="primary" [disabled]="!isValid" (onClick)="handleClose()">
+          <ax-icon class="fa-solid fa-save"></ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$1.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: AXLabelModule }, { kind: "component", type: i4$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXCAddDashboardPopup, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-grid ax-grid-cols-[auto_18rem] ax-gap-4 ax-justify-center ax-p-4 ax-items-center">
+      <ax-label>Title</ax-label>
+      <ax-text-box [(ngModel)]="title" name="title" placeholder="Enter dashboard title"> </ax-text-box>
+
+      <ax-label>Description</ax-label>
+      <ax-text-box [(ngModel)]="description" name="description" placeholder="Enter dashboard description">
+      </ax-text-box>
+    </div>
+
+    <ax-footer>
+      <ax-prefix></ax-prefix>
+      <ax-suffix>
+        <ax-button text="Cancel" look="solid" (onClick)="handleClose(true)"> </ax-button>
+        <ax-button text="Save" look="solid" color="primary" [disabled]="!isValid" (onClick)="handleClose()">
+          <ax-icon class="fa-solid fa-save"></ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    imports: [FormsModule, AXButtonModule, AXTextBoxModule, AXLabelModule, AXDecoratorModule],
+                }]
+        }] });
+
+class AXCConfigurationPopup extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.widgetData = signal(null);
+    }
+    ngOnInit() {
+        this.widgetData.set(this.widget);
+    }
+    async handleClose(isCanceled = false) {
+        this.close({
+            isCanceled,
+            widget: this.widgetData(),
+        });
+    }
+    handlePropertyChange(event) {
+        this.widgetData.set(event.values);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXCConfigurationPopup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXCConfigurationPopup, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    @if(widget) {
+    <div class="ax-px-1">
+      <axp-widget-property-viewer (onChanged)="handlePropertyChange($event)" [widget]="widget">
+      </axp-widget-property-viewer>
+    </div>
+    }
+    <ax-footer>
+      <ax-prefix></ax-prefix>
+      <ax-suffix>
+        <ax-button text="Cancel" look="solid" (onClick)="handleClose(true)"> </ax-button>
+        <ax-button text="Save" look="solid" color="primary" (onClick)="handleClose()">
+          <ax-icon class="fa-solid fa-save"></ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXCConfigurationPopup, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    @if(widget) {
+    <div class="ax-px-1">
+      <axp-widget-property-viewer (onChanged)="handlePropertyChange($event)" [widget]="widget">
+      </axp-widget-property-viewer>
+    </div>
+    }
+    <ax-footer>
+      <ax-prefix></ax-prefix>
+      <ax-suffix>
+        <ax-button text="Cancel" look="solid" (onClick)="handleClose(true)"> </ax-button>
+        <ax-button text="Save" look="solid" color="primary" (onClick)="handleClose()">
+          <ax-icon class="fa-solid fa-save"></ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    imports: [AXButtonModule, AXDecoratorModule, AXPWidgetPropertyViewerComponent],
+                }]
+        }] });
+
+class AXPDashboardPopupService {
+    constructor() {
+        this.popupService = inject(AXPopupService);
+    }
+    async generateDashboardLayout(data) {
+        const result = await this.popupService.open(AXCAddDashboardPopup, {
+            header: true,
+            size: 'fit',
+            draggable: true,
+            hasBackdrop: true,
+            title: 'Dashboard Layout Details',
+            data: { data },
+        });
+        if (!result.data) {
+            return;
+        }
+        const { isCanceled, ...rest } = result.data;
+        if (isCanceled) {
+            return;
+        }
+        return rest;
+    }
+    async handlePopupConfiguration(widget) {
+        const result = await this.popupService.open(AXCConfigurationPopup, {
+            header: true,
+            size: 'sm',
+            draggable: true,
+            hasBackdrop: true,
+            title: 'Widget Configuration',
+            data: { widget },
+        });
+        if (!result.data) {
+            return;
+        }
+        const { isCanceled, ...rest } = result.data;
+        if (isCanceled) {
+            return;
+        }
+        return rest.widget;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardPopupService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardPopupService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const path = 'home:dashboard:';
+var AXPHomeDashboardSetting;
+(function (AXPHomeDashboardSetting) {
+    AXPHomeDashboardSetting["CurrentDashboard"] = "home:dashboard:current-dashboard";
+})(AXPHomeDashboardSetting || (AXPHomeDashboardSetting = {}));
+
+// Create the SignalStore
+const AXCDashboardStore = signalStore({ providedIn: 'root' }, 
+// Initial State Definition
+withState(() => {
+    // Define initial empty state
+    const state = {
+        dashboards: [],
+        currentDashboardId: null,
+        dashboardsOption: { float: true, cellHeight: 75, gap: 5, minRow: 9, column: 12 },
+        isLoading: false,
+    };
+    return state;
+}), 
+// Computed Properties
+withComputed((state) => ({
+    currentDashboard: computed(() => {
+        return state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId()) || null;
+    }),
+})), 
+// Methods for State Management
+withMethods((store, dashboardPopup = inject(AXPDashboardPopupService), dialogService = inject(AXDialogService), translationService = inject(AXTranslationService), widgetPickerService = inject(AXPWidgetPickerService), dashboardService = inject(AXMDashboardService), settingService = inject(AXPSettingService)) => {
+    // Load dashboards from service - runs on init via effect
+    effect(() => {
+        loadDashboards();
+    });
+    // Load dashboards from service
+    async function loadDashboards() {
+        try {
+            patchState(store, { isLoading: true });
+            // Get dashboards from service using query method
+            const result = await dashboardService.query({ skip: 0, take: 100 });
+            const dashboardModels = result.items || [];
+            // Convert dashboard models to AXPDashboardLayout
+            const dashboards = dashboardModels.map(modelToDashboardLayout);
+            // Get current dashboard from settings
+            const currentDashboardId = await settingService
+                .scope(AXPPlatformScope.User)
+                .get(AXPHomeDashboardSetting.CurrentDashboard);
+            let newCurrentDashboardId = null;
+            if (dashboards.length > 0) {
+                // Check if currentDashboardId exists and is valid
+                const dashboardExists = currentDashboardId && dashboards.some((d) => d.id === currentDashboardId);
+                if (dashboardExists) {
+                    newCurrentDashboardId = currentDashboardId;
+                }
+                else {
+                    // If current dashboard is not valid or not set, use the first one
+                    newCurrentDashboardId = dashboards[0].id;
+                    // Save to user settings
+                    settingService
+                        .scope(AXPPlatformScope.User)
+                        .set(AXPHomeDashboardSetting.CurrentDashboard, newCurrentDashboardId);
+                }
+            }
+            patchState(store, {
+                dashboards,
+                isLoading: false,
+                currentDashboardId: newCurrentDashboardId,
+            });
+        }
+        catch (error) {
+            console.error('Error loading dashboards:', error);
+            patchState(store, { isLoading: false });
+        }
+    }
+    // Convert entity model to dashboard layout
+    function modelToDashboardLayout(model) {
+        return {
+            id: model.id || '',
+            title: model.title,
+            description: model.description,
+            widget: model.widget || [],
+        };
+    }
+    // Convert dashboard layout to entity model
+    function dashboardLayoutToModel(layout) {
+        return {
+            id: layout.id,
+            name: layout.title,
+            title: layout.title,
+            description: layout.description || '',
+            widget: layout.widget,
+        };
+    }
+    return {
+        // Set current dashboard
+        setCurrentDashboard(dashboardId) {
+            patchState(store, { currentDashboardId: dashboardId });
+            settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, dashboardId);
+        },
+        // Add a new dashboard
+        async addDashboard() {
+            try {
+                const newDashboard = await dashboardPopup.generateDashboardLayout({});
+                if (!newDashboard)
+                    return;
+                newDashboard.id = AXPDataGenerator.uuid();
+                newDashboard.widget = [];
+                // Create dashboard model and save to service
+                const dashboardModel = dashboardLayoutToModel(newDashboard);
+                await dashboardService.insertOne(dashboardModel);
+                // Update local state
+                const updatedDashboards = [...store.dashboards(), newDashboard];
+                patchState(store, {
+                    dashboards: updatedDashboards,
+                    currentDashboardId: newDashboard.id,
+                });
+                // Save current dashboard to settings
+                settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, newDashboard.id);
+            }
+            catch (error) {
+                console.error('Error adding dashboard:', error);
+            }
+        },
+        // Add a widget to the current dashboard
+        async addWidget() {
+            if (!store.currentDashboardId()) {
+                console.warn('No current dashboard selected');
+                return;
+            }
+            try {
+                const widgets = await widgetPickerService.showPicker({
+                    groups: [AXPWidgetGroupEnum.DashboardWidget],
+                });
+                //remove meta from widgets
+                const filteredWidgets = widgets.map(({ __meta__, ...rest }) => rest);
+                // Step 2: Convert the selected widgets into AXPDashboardWidgetData format
+                const convertedWidgets = filteredWidgets.map((widget) => {
+                    const id = AXPDataGenerator.uuid();
+                    return {
+                        config: {
+                            height: widget?.meta?.dimensions?.height ?? 2,
+                            width: widget?.meta?.dimensions?.width ?? 2,
+                            minHeight: widget?.meta?.dimensions?.minHeight,
+                            minWidth: widget?.meta?.dimensions?.minWidth,
+                            maxHeight: widget?.meta?.dimensions?.maxHeight,
+                            maxWidth: widget?.meta?.dimensions?.maxWidth,
+                            id,
+                        },
+                        node: { ...widget, name: id },
+                    };
+                });
+                // Step 3: Update the dashboards
+                const updatedDashboards = store.dashboards().map((dashboard) => {
+                    if (dashboard.id === store.currentDashboardId()) {
+                        return {
+                            ...dashboard,
+                            widget: [...dashboard.widget, ...convertedWidgets],
+                        };
+                    }
+                    return dashboard;
+                });
+                // Step 4: Save the updated dashboard to the service
+                const currentDashboard = updatedDashboards.find((d) => d.id === store.currentDashboardId());
+                if (currentDashboard) {
+                    await dashboardService.updateOne(currentDashboard.id, dashboardLayoutToModel(currentDashboard));
+                }
+                patchState(store, { dashboards: updatedDashboards });
+            }
+            catch (error) {
+                console.error('Error adding widget:', error);
+            }
+        },
+        // Remove a dashboard
+        async removeDashboard(id) {
+            if (!id) {
+                console.warn('No dashboard ID provided for removal');
+                return;
+            }
+            try {
+                const dialogResult = await dialogService.confirm(await translationService.translateAsync('workflow.warning'), await translationService.translateAsync('workflow.confirm-delete'), 'danger', 'horizontal');
+                if (dialogResult.result) {
+                    // Delete from service
+                    await dashboardService.deleteOne(id);
+                    // Remove the dashboard from local state
+                    const updatedDashboards = store.dashboards().filter((dashboard) => dashboard.id !== id);
+                    // Update state and select a new current dashboard if needed
+                    let newCurrentDashboardId = store.currentDashboardId();
+                    if (id === store.currentDashboardId()) {
+                        newCurrentDashboardId = updatedDashboards.length > 0 ? updatedDashboards[0].id : null;
+                        // Save to settings if we changed the current dashboard
+                        if (newCurrentDashboardId) {
+                            settingService
+                                .scope(AXPPlatformScope.User)
+                                .set(AXPHomeDashboardSetting.CurrentDashboard, newCurrentDashboardId);
+                        }
+                    }
+                    patchState(store, {
+                        dashboards: updatedDashboards,
+                        currentDashboardId: newCurrentDashboardId,
+                    });
+                }
+            }
+            catch (error) {
+                console.error('Error removing dashboard:', error);
+            }
+        },
+        // Remove a widget from a dashboard
+        async removeWidget(dashboardId, widgetId) {
+            const currentDashboard = store.dashboards().find((d) => d.id === dashboardId);
+            if (!currentDashboard)
+                return;
+            const updatedDashboard = {
+                ...currentDashboard,
+                widget: currentDashboard.widget.filter((widget) => widget.config.id !== widgetId),
+            };
+            // Save to service
+            await dashboardService.updateOne(dashboardId, dashboardLayoutToModel(updatedDashboard));
+            // Update local state
+            const updatedDashboards = store
+                .dashboards()
+                .map((dashboard) => (dashboard.id === dashboardId ? updatedDashboard : dashboard));
+            patchState(store, { dashboards: updatedDashboards });
+        },
+        // Handle configuration changes
+        async handleConfigChange(dashboard) {
+            // Save to service
+            await dashboardService.updateOne(dashboard.id, dashboardLayoutToModel(dashboard));
+            // Update local state
+            const updatedDashboards = store.dashboards().map((d) => (d.id === dashboard.id ? dashboard : d));
+            patchState(store, {
+                dashboards: updatedDashboards,
+                currentDashboardId: dashboard.id,
+            });
+            // Save current dashboard to settings
+            settingService.scope(AXPPlatformScope.User).set(AXPHomeDashboardSetting.CurrentDashboard, dashboard.id);
+        },
+        // Handle grid layout changes
+        async onGridChange(event) {
+            console.log('onGridChange', event);
+            if (!store.currentDashboard()) {
+                console.warn('No current dashboard for grid change');
+                return;
+            }
+            // Extract nodes from the event and remove the `element` property
+            const nodes = event.nodes.map(({ element, ...rest }) => rest);
+            // Update the current dashboard
+            const currentDashboard = store.currentDashboard();
+            const updatedWidgets = currentDashboard.widget.map((widget) => {
+                const updatedNode = nodes.find((node) => node.id === widget.config.id);
+                if (updatedNode) {
+                    return {
+                        ...widget,
+                        config: updatedNode,
+                    };
+                }
+                return widget;
+            });
+            const updatedDashboard = {
+                ...currentDashboard,
+                widget: updatedWidgets,
+            };
+            // Save to service
+            await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
+            // Update the dashboards
+            const updatedDashboards = store
+                .dashboards()
+                .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
+            patchState(store, { dashboards: updatedDashboards });
+        },
+        // Handle widget configuration
+        async handlePopupConfiguration(widgetNode) {
+            if (!store.currentDashboard()) {
+                console.warn('No current dashboard selected');
+                return;
+            }
+            try {
+                const updatedNode = await dashboardPopup.handlePopupConfiguration(widgetNode);
+                if (!updatedNode) {
+                    return;
+                }
+                // Update the current dashboard's widget with the new configuration
+                const currentDashboard = store.currentDashboard();
+                const updatedWidgets = currentDashboard.widget.map((widget) => {
+                    if (widget.node?.name === widgetNode.name && widget.node?.path === widgetNode.path) {
+                        return {
+                            ...widget,
+                            node: updatedNode,
+                        };
+                    }
+                    return widget;
+                });
+                const updatedDashboard = {
+                    ...currentDashboard,
+                    widget: updatedWidgets,
+                };
+                // Save to service
+                await dashboardService.updateOne(updatedDashboard.id, dashboardLayoutToModel(updatedDashboard));
+                // Update the dashboards state
+                const updatedDashboards = store
+                    .dashboards()
+                    .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
+                patchState(store, { dashboards: updatedDashboards });
+            }
+            catch (error) {
+                console.error('Error handling widget configuration:', error);
+            }
+        },
+        // Reload dashboards from service
+        async refreshDashboards() {
+            await loadDashboards();
+        },
+    };
+}));
+
+class AXPDashboardHomeComponent extends AXPBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----------------   Services & Dependencies   ----------------
+        this.rootConfig = RootConfig;
+        this.popupService = inject(AXPopupService);
+        this.dialogService = inject(AXDialogService);
+        this.store = inject(AXCDashboardStore);
+        this.router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.layoutService = inject(AXPLayoutThemeService);
+        //#endregion
+        //#region ----------------   View Properties   ----------------
+        this.isEdited = signal(false);
+        this.context = signal({});
+        //#endregion
+        //#region ----------------   Effects   ----------------
+        this.#loadingEffect = effect(() => {
+            const isLoading = false; // Since store doesn't have isLoading, we'll default to false
+            this.layoutService.setNavigationLoading(isLoading);
+        });
+    }
+    //#endregion
+    //#region ----------------   Effects   ----------------
+    #loadingEffect;
+    //#endregion
+    //#region ----------------   Event Handlers   ----------------
+    toggleEdit() {
+        this.isEdited.update((value) => !value);
+    }
+    async confirmWidgetDelete(dashboardId, widgetId) {
+        try {
+            const dialogResult = await this.dialogService.confirm(await this.translateService.translateAsync('workflow.warning'), await this.translateService.translateAsync('workflow.confirm-delete'), 'danger', 'horizontal');
+            if (dialogResult.result) {
+                this.store.removeWidget(dashboardId, widgetId);
+            }
+        }
+        catch (error) {
+            console.error('Error confirming widget deletion:', error);
+        }
+    }
+    //#endregion
+    getPageTitle() {
+        return this.store.currentDashboard()?.title || 'Dashboard';
+    }
+    async getPageDescription() {
+        return this.store.currentDashboard()?.description || '';
+    }
+    getTitleActions() {
+        return [
+            ...this.store.dashboards().map((i) => ({
+                title: i.title,
+                command: { name: i.id, metadata: { isDashboard: true, dashboard: i } },
+                icon: i.id === this.store.currentDashboardId() ? 'fa-solid fa-check' : '',
+            })),
+        ];
+    }
+    async getPrimaryMenuItems() {
+        const scope = this.rootConfig.config.i18n;
+        return [
+            {
+                title: 't("add-item")',
+                icon: 'fa-light fa-square-plus',
+                color: 'primary',
+                items: [
+                    {
+                        title: await this.translateService.translateAsync('dashboard', { scope: 'dashboard' }),
+                        icon: 'fa-light fa-gauge-high',
+                        break: true,
+                        command: {
+                            name: 'new-dashboard',
+                        },
+                    },
+                    {
+                        title: await this.translateService.translateAsync('widget', { scope: 'dashboard' }),
+                        icon: 'fa-light fa-window-restore',
+                        command: {
+                            name: 'new-widget',
+                        },
+                    },
+                ],
+            },
+        ];
+    }
+    async getSecondaryMenuItems() {
+        const scope = this.rootConfig.config.i18n;
+        return [
+            {
+                title: await this.translateService.translateAsync('delete-current-dashboard', { scope: 'dashboard' }),
+                icon: 'fa-light fa-trash-can',
+                color: 'danger',
+                disabled: this.store.dashboards().length <= 1,
+                command: {
+                    name: 'delete',
+                },
+            },
+        ];
+    }
+    getPageBreadcrumbs() {
+        return [
+            {
+                title: this.translateService.translateSync('entity.home'),
+                icon: 'fa-solid fa-home ax-text-xs ax-me-2',
+            },
+        ];
+    }
+    async execute(command) {
+        if (command.metadata?.['isDashboard']) {
+            this.store.handleConfigChange(command.metadata?.['dashboard']);
+            this.recompute();
+        }
+        else {
+            switch (command.name) {
+                case 'new-dashboard':
+                    await this.store.addDashboard();
+                    this.recompute();
+                    break;
+                case 'new-widget':
+                    await this.store.addWidget();
+                    this.recompute();
+                    break;
+                case 'delete':
+                    await this.store.removeDashboard(this.store.currentDashboard()?.id);
+                    this.recompute();
+                    break;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardHomeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPDashboardHomeComponent, isStandalone: true, selector: "axp-dashboard-home", providers: [
+            AXPDesignerService,
+            AXCDashboardStore,
+            {
+                provide: AXPBasePage,
+                useExisting: AXPDashboardHomeComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <ax-grid-layout-container [options]=\"store.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\n      @for(widget of store.currentDashboard()?.widget; track widget.config.id) {\n      <ax-grid-layout-widget [options]=\"widget.config\">\n        <axc-dashboard-widget-wrapper\n          [hasOptions]=\"widget.node?.options?.['hasOptions'] ?? true\"\n          (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.id!, widget.config.id!)\"\n          (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n        >\n          @if(widget.node) {\n          <axp-widgets-container [context]=\"context()\">\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n          </axp-widgets-container>\n          }\n        </axc-dashboard-widget-wrapper>\n      </ax-grid-layout-widget>\n      } @empty {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-bg-gray-50 ax-p-4\">\n        <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-4\"></ax-icon>\n        <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">\n          {{ t('no-widgets', { scope: 'dashboard' }) | async }}\n        </h2>\n        <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n          {{ t('add-first-widget', { scope: 'dashboard' }) | async }}\n        </p>\n      </div>\n      }\n    </ax-grid-layout-container>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axp-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axp-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-style:none!important;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;background-color:rgb(var(--ax-sys-color-lightest-surface))!important;color:rgb(var(--ax-sys-color-on-lightest-surface))!important;border-color:rgb(var(--ax-sys-color-border-lightest-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i2$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXGridLayoutBuilderModule }, { kind: "component", type: i3$2.AXGridLayoutContainerComponent, selector: "ax-grid-layout-container", inputs: ["options", "isEmpty"], outputs: ["onAdded", "onRemoved", "onWidgetChange", "onChange", "isLayoutRendered", "isEmptyChange"] }, { kind: "component", type: i3$2.AXGridLayoutWidgetComponent, selector: "ax-grid-layout-widget", inputs: ["options"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { 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: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i4.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "component", type: AXCDashboardWidgetWrapperComponent, selector: "axc-dashboard-widget-wrapper", inputs: ["hasOptions"], outputs: ["onDelete", "onConfiguration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardHomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-dashboard-home', standalone: true, imports: [
+                        CommonModule,
+                        AXPLayoutBuilderModule,
+                        AXButtonModule,
+                        AXButtonGroupModule,
+                        AXGridLayoutBuilderModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXDropdownButtonModule,
+                        AXDropdownModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXBreadcrumbsModule,
+                        AXCDashboardWidgetWrapperComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXPDesignerService,
+                        AXCDashboardStore,
+                        {
+                            provide: AXPBasePage,
+                            useExisting: AXPDashboardHomeComponent,
+                        },
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <!-- Content Section -->\n\n  <axp-page-content class=\"ax-relative\">\n    <ax-grid-layout-container [options]=\"store.dashboardsOption()\" (onChange)=\"store.onGridChange($event)\">\n      @for(widget of store.currentDashboard()?.widget; track widget.config.id) {\n      <ax-grid-layout-widget [options]=\"widget.config\">\n        <axc-dashboard-widget-wrapper\n          [hasOptions]=\"widget.node?.options?.['hasOptions'] ?? true\"\n          (onDelete)=\"confirmWidgetDelete(store.currentDashboard()?.id!, widget.config.id!)\"\n          (onConfiguration)=\"store.handlePopupConfiguration(widget.node!)\"\n        >\n          @if(widget.node) {\n          <axp-widgets-container [context]=\"context()\">\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'view'\"></ng-container>\n          </axp-widgets-container>\n          }\n        </axc-dashboard-widget-wrapper>\n      </ax-grid-layout-widget>\n      } @empty {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-bg-gray-50 ax-p-4\">\n        <ax-icon icon=\"fa-light fa-shapes\" class=\"ax-text-4xl ax-text-gray-400 ax-mb-4\"></ax-icon>\n        <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">\n          {{ t('no-widgets', { scope: 'dashboard' }) | async }}\n        </h2>\n        <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n          {{ t('add-first-widget', { scope: 'dashboard' }) | async }}\n        </p>\n      </div>\n      }\n    </ax-grid-layout-container>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-dashboard-home{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axp-dashboard-home .placeholder-content{border-radius:.5rem!important;border-width:1px!important;border-style:dashed!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))!important;background-color:rgba(var(--ax-sys-color-primary-lightest-surface),.5)!important}axp-dashboard-home ax-grid-layout-widget .grid-stack-item-content{border-style:none!important;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important;background-color:rgb(var(--ax-sys-color-lightest-surface))!important;color:rgb(var(--ax-sys-color-on-lightest-surface))!important;border-color:rgb(var(--ax-sys-color-border-lightest-surface))!important}\n"] }]
+        }] });
+
+export { AXCDashboardStore, AXPDashboardHomeComponent };
+//# sourceMappingURL=acorex-modules-common-index-rvP9ISgL.mjs.map