@acorex/modules 19.2.17-next.0 → 19.2.19

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

@@ -0,0 +1,507 @@
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i2 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i5 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i4$1 from '@acorex/components/dropdown-button';
+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 { AXTranslationService, AXTranslatorDirective } from '@acorex/core/translation';
+import * as i1$1 from '@acorex/platform/layout/builder';
+import { AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
+import { AXPDesignerService } from '@acorex/platform/layout/designer';
+import { AXPSimplePageLayout } from '@acorex/platform/themes/default';
+import { AXPLayoutThemeService, AXPThemeLayoutBlockComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent } from '@acorex/platform/themes/shared';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { output, input, ChangeDetectionStrategy, Component, model, afterNextRender, inject, Injectable, computed, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { RootConfig } from './acorex-modules-common.mjs';
+import { AXDialogService } from '@acorex/components/dialog';
+import { AXPDataGenerator } from '@acorex/platform/core';
+import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i4 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 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class AXCDashboardWidgetWrapperComponent {
+    constructor() {
+        this.onDelete = output();
+        this.hasOptions = input(true);
+    }
+    handleOnItemClick(event) {
+        console.log(event);
+        switch (event.item.data) {
+            case 'delete':
+                this.onDelete.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" }, 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 color=\"secondary\" class=\"ax-sm\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-ellipsis-h\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel>\n        <ng-container>\n          <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n            <ax-button-item [data]=\"'delete'\" text=\"Delete\" color=\"danger\">\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: i2.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: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], 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], 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 color=\"secondary\" class=\"ax-sm\">\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-ellipsis-h\"></ax-icon>\n      </ax-prefix>\n      <ax-dropdown-panel>\n        <ng-container>\n          <ax-button-item-list (onItemClick)=\"handleOnItemClick($event)\">\n            <ax-button-item [data]=\"'delete'\" text=\"Delete\" color=\"danger\">\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();
+        this.#init = afterNextRender(() => {
+            this.title.set(this.data.title || '');
+            this.description.set(this.data.description || '');
+        });
+    }
+    #init;
+    async handleClose(isCanceled = false) {
+        this.close({
+            title: this.title(),
+            description: this.description(),
+            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"></ax-text-box>
+
+      <ax-label>Description</ax-label>
+      <ax-text-box [(ngModel)]="description" name="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" (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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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" }] }); }
+}
+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"></ax-text-box>
+
+      <ax-label>Description</ax-label>
+      <ax-text-box [(ngModel)]="description" name="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" (onClick)="handleClose()">
+          <ax-icon class="fa-solid fa-save"></ax-icon>
+        </ax-button>
+      </ax-suffix>
+    </ax-footer>
+  `,
+                    imports: [FormsModule, AXButtonModule, AXTextBoxModule, AXLabelModule, AXButtonModule, AXDecoratorModule],
+                }]
+        }] });
+
+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 },
+        });
+        const { isCanceled, ...rest } = result.data;
+        if (isCanceled) {
+            throw new Error('Process is Canceled by User!');
+        }
+        else {
+            return rest;
+        }
+    }
+    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' }]
+        }] });
+
+// Initial state
+const initialDashboards = [
+    {
+        id: 'widget1',
+        title: 'Home',
+        widget: [
+            {
+                config: {
+                    id: '1',
+                    height: 5,
+                    width: 6,
+                },
+                node: {
+                    name: 'bar-chart',
+                    path: 'bar-chart',
+                    type: 'bar-chart',
+                    defaultValue: {
+                        data: [
+                            { label: 'Category A', value: 30, color: 'green' },
+                            { label: 'Category B', value: 80 },
+                            { label: 'Category C', value: 45 },
+                            { label: 'Category D', value: 10 },
+                            { label: 'Category E', value: 100 },
+                        ],
+                        options: { width: 600, height: 400, color: ['red', 'yellow', 'blue'] },
+                    },
+                },
+            },
+            {
+                config: {
+                    id: '5',
+                    height: 5,
+                    width: 6,
+                },
+                node: {
+                    name: 'map',
+                    path: 'map',
+                    type: 'map',
+                    options: {
+                        hasDraw: true,
+                        zoomLevel: 5,
+                        latitude: 32,
+                        longitude: 53,
+                        fitToDraw: true,
+                        limitDraw: [
+                            {
+                                points: [
+                                    {
+                                        latitude: 33.8339199536547,
+                                        longitude: 51.16056693933671,
+                                    },
+                                    {
+                                        latitude: 32.37996146435729,
+                                        longitude: 50.017223524232904,
+                                    },
+                                    {
+                                        latitude: 31.034108344903512,
+                                        longitude: 51.402428046377885,
+                                    },
+                                    {
+                                        latitude: 31.690781806136822,
+                                        longitude: 53.24936740923793,
+                                    },
+                                    {
+                                        latitude: 33.211116472416855,
+                                        longitude: 53.18340528913575,
+                                    },
+                                ],
+                                color: 'blue',
+                            },
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+    {
+        id: 'widget2',
+        title: 'Work',
+        widget: [
+            {
+                config: {
+                    id: '2',
+                    height: 3,
+                    width: 3,
+                },
+                node: {
+                    name: 'sticky-note',
+                    path: 'sticky-note',
+                    type: 'sticky-note',
+                    defaultValue: `test`,
+                    options: {
+                        hasOptions: false,
+                    },
+                },
+            },
+            {
+                config: { id: '3', height: 4, width: 4 },
+                node: {
+                    name: 'donut-chart',
+                    path: 'donut-chart',
+                    type: 'donut-chart',
+                    defaultValue: {
+                        data: [
+                            { id: 'a', name: 'Apples', value: 40, color: '#E57373' },
+                            { id: 'b', name: 'Bananas', value: 30, color: '#FFF176' },
+                            { id: 'c', name: 'ta', value: 20, color: '#F06292' },
+                            { id: 'd', name: 'Dates', value: 10, color: '#9575CD' },
+                        ],
+                        options: { width: 250, height: 250 },
+                    },
+                },
+            },
+            {
+                config: { id: '4', height: 4, width: 3 },
+                node: {
+                    name: 'gauge-chart',
+                    path: 'gauge-chart',
+                    type: 'gauge-chart',
+                    defaultValue: {
+                        data: {
+                            id: 'gauge1',
+                            name: 'System Load',
+                            value: 65,
+                            color: '#2196F3',
+                        },
+                        options: {
+                            width: 250,
+                            height: 250,
+                            minValue: 0,
+                            maxValue: 100,
+                            // thresholds: [
+                            //   { range: 30, color: '#4CAF50' }, // Green for low values
+                            //   { range: 70, color: '#FFC107' }, // Yellow for medium values
+                            //   { range: 100, color: '#F44336' }, // Red for high values
+                            // ],
+                            label: 'CPU Usage',
+                            animationDuration: 3000,
+                        },
+                    },
+                },
+            },
+        ],
+    },
+];
+// Create the SignalStore
+const AXCDashboardStore = signalStore({}, 
+// Define the state
+withState({
+    dashboards: initialDashboards,
+    currentDashboardId: initialDashboards[0].id,
+    dashboardsOption: { float: true, cellHeight: 100, gap: 20, minRow: 7, column: 12 },
+}), 
+// Define computed properties
+withComputed((state) => ({
+    currentDashboard: computed(() => {
+        return state.dashboards().find((dashboard) => dashboard.id === state.currentDashboardId()) || null;
+    }),
+})), 
+// Define methods
+withMethods((state, dashboardPopup = inject(AXPDashboardPopupService), dialogService = inject(AXDialogService), translationService = inject(AXTranslationService), designerService = inject(AXPDesignerService)) => ({
+    // Set current dashboard
+    setCurrentDashboard(dashboardId) {
+        patchState(state, { currentDashboardId: dashboardId });
+    },
+    // Add a new dashboard
+    async addDashboard() {
+        try {
+            const newDashboard = await dashboardPopup.generateDashboardLayout({});
+            newDashboard.id = AXPDataGenerator.uuid();
+            newDashboard.widget = [];
+            // newDashboard.widget = [
+            //   {
+            //     config: {
+            //       h: 1,
+            //       w: 1,
+            //       id: AXPDataGenerator.uuid(),
+            //     },
+            //   },
+            // ];
+            const updatedDashboards = [...state.dashboards(), newDashboard];
+            patchState(state, {
+                dashboards: updatedDashboards,
+                currentDashboardId: newDashboard.id,
+            });
+        }
+        catch (error) {
+            console.error('Error adding dashboard:', error);
+        }
+    },
+    // Add a widget to the current dashboard
+    async addWidget() {
+        if (!state.currentDashboardId()) {
+            console.warn('No current dashboard selected');
+            return;
+        }
+        try {
+            // Step 1: Show the picker and get the selected widgets
+            const widgets = await designerService.showPicker({
+                name: 'page-layout',
+                type: 'page-layout',
+                children: [],
+            });
+            // Step 2: Convert the selected widgets into AXPDashboardWidgetData format
+            const convertedWidgets = widgets.map((widget) => ({
+                config: { height: 2, width: 2, id: AXPDataGenerator.uuid() },
+                node: widget,
+            }));
+            // Step 3: Update the dashboards
+            const updatedDashboards = state.dashboards().map((dashboard) => {
+                if (dashboard.id === state.currentDashboardId()) {
+                    return {
+                        ...dashboard,
+                        widget: [...dashboard.widget, ...convertedWidgets],
+                    };
+                }
+                return dashboard;
+            });
+            patchState(state, { 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) {
+                // Remove the dashboard
+                const updatedDashboards = state.dashboards().filter((dashboard) => dashboard.id !== id);
+                // Update state
+                patchState(state, {
+                    dashboards: updatedDashboards,
+                    currentDashboardId: id === state.currentDashboardId()
+                        ? updatedDashboards.length > 0
+                            ? updatedDashboards[0].id
+                            : null
+                        : state.currentDashboardId(),
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error removing dashboard:', error);
+        }
+    },
+    // Remove a widget from a dashboard
+    removeWidget(dashboardId, widgetId) {
+        const updatedDashboards = state.dashboards().map((dashboard) => {
+            if (dashboard.id === dashboardId) {
+                return {
+                    ...dashboard,
+                    widget: dashboard.widget.filter((widget) => widget.config.id !== widgetId),
+                };
+            }
+            return dashboard;
+        });
+        patchState(state, { dashboards: updatedDashboards });
+    },
+    // Handle configuration changes
+    handleConfigChange(dashboard) {
+        const updatedDashboards = state.dashboards().map((d) => (d.id === dashboard.id ? dashboard : d));
+        patchState(state, {
+            dashboards: updatedDashboards,
+            currentDashboardId: dashboard.id,
+        });
+    },
+    // Handle grid layout changes
+    onGridChange(event) {
+        if (!state.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 = state.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,
+        };
+        // Update the dashboards
+        const updatedDashboards = state
+            .dashboards()
+            .map((dashboard) => (dashboard.id === updatedDashboard.id ? updatedDashboard : dashboard));
+        patchState(state, { dashboards: updatedDashboards });
+    },
+})));
+
+class AXPDashboardHomeComponent {
+    constructor() {
+        this.activatedRoute = inject(ActivatedRoute);
+        this.layout = inject(AXPLayoutThemeService);
+        this.store = inject(AXCDashboardStore);
+        this.rootConfig = RootConfig;
+        this.isEdited = signal(false);
+        this.context = signal({});
+    }
+    toggleEdit() {
+        //(window as any).d = this.activatedRoute;
+        this.isEdited.update((i) => !i);
+    }
+    getGridBackground() {
+        if (!this.isEdited()) {
+            return null;
+        }
+        const gap = this.store.dashboardsOption().gap ?? 0; // Get the gap value, default to 0 if not provided
+        const columnWidth = `calc((100% - ${gap}px) / ${this.store.dashboardsOption().column ?? 12})`;
+        const cellHeight = this.store.dashboardsOption().cellHeight;
+        // Adjust the vertical lines to start at the gap value and end before the gap
+        const verticalLines = `linear-gradient(to right, #0000001c 1px, transparent 1px) ${gap}px 0 / ${columnWidth} 100%`;
+        // Adjust the horizontal lines to start at the gap value and end before the gap
+        const horizontalLines = `linear-gradient(to bottom, #0000001c 1px, transparent 1px) 0 ${gap}px / 100% ${cellHeight}px`;
+        return `${verticalLines}, ${horizontalLines}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPDashboardHomeComponent, isStandalone: true, selector: "ng-component", providers: [AXPDesignerService, AXCDashboardStore], ngImport: i0, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-page-header>\n    <axp-layout-title> {{ store.currentDashboard()?.title }} </axp-layout-title>\n\n    <axp-layout-description> {{ store.currentDashboard()?.description }} </axp-layout-description>\n    1\n    <axp-layout-breadcrumbs>\n      <!-- <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward ax-text-xs\"></i>\n        </ng-template>\n        @for(b of vm.beardcrumbs();track $index;let last=$last) {\n        <ax-breadcrumbs-item [routerLink]=\"b.url\" class=\"!ax-text-xs\"> {{ b.title}} </ax-breadcrumbs-item>\n        }\n      </ax-breadcrumbs> -->\n    </axp-layout-breadcrumbs>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary>\n        <ax-button [text]=\"t('create-new', { scope: rootConfig.config.i18n }) | async\" [color]=\"'primary'\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-light  fa-plus\"></ax-icon>\n          </ax-prefix>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item\n                (onClick)=\"store.addDashboard()\"\n                [text]=\" (t('dashboard.dashboard', { scope: rootConfig.config.i18n })| async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-folder-plus\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item\n                (onClick)=\"store.addWidget()\"\n                [text]=\" (t('dashboard.widget', { scope: rootConfig.config.i18n })| async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-file-arrow-up\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n\n        <ax-dropdown-button [text]=\"store.currentDashboard()?.title\" [color]=\"'primary'\">\n          <ax-button-item-list>\n            @for (dashboard of store.dashboards(); track dashboard.id) {\n            <ax-button-item\n              [text]=\"dashboard.title\"\n              [selected]=\"dashboard.id === store.currentDashboard()?.id\"\n              (onClick)=\"store.handleConfigChange(dashboard)\"\n            >\n            </ax-button-item>\n            } @empty {\n            <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-screen ax-bg-gray-50 ax-p-4\">\n              <!-- Icon -->\n              <svg\n                class=\"ax-w-16 ax-h-16 ax-text-gray-400 ax-mb-4\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                ></path>\n              </svg>\n\n              <!-- Message -->\n              <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">No Dashboards Found</h2>\n              <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n                It looks like you don't have any dashboards yet. Create one to get started!\n              </p>\n            </div>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-button>\n      </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item\n          [disabled]=\"store.dashboards().length<=1\"\n          [text]=\"(t('dashboard.delete-current-dashboard', { scope: rootConfig.config.i18n }) | async)!\"\n          (onClick)=\"store.removeDashboard(store.currentDashboard()?.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n  </axp-layout-page-header>\n\n  <axp-layout-page-content class=\"ax-relative\">\n    <ax-grid-layout-container\n      [style.background]=\"getGridBackground()\"\n      #grid\n      [options]=\"store.dashboardsOption()\"\n      (onChange)=\"store.onGridChange($event)\"\n    >\n      @for(widget of store.currentDashboard()?.widget ; track widget.config.id) {\n      <ax-grid-layout-widget [options]=\"widget.config\">\n        <!-- <div class=\"ax-absolute ax-top-0 ax-size-3 ax-handler ax-bg-blue-500 ax-z-[999]\"></div> -->\n        <axc-dashboard-widget-wrapper\n          [hasOptions]=\"widget.node?.options?.['hasOptions'] ?? true\"\n          (onDelete)=\"store.removeWidget(store.currentDashboard()?.id!,widget.config.id!)\"\n        >\n          @if(widget.node){\n          <axp-widgets-container [context]=\"context()\">\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'edit'\"> </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        <!-- Icon -->\n        <svg\n          class=\"ax-w-16 ax-h-16 ax-text-gray-400 ax-mb-4\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n          ></path>\n        </svg>\n\n        <!-- Message -->\n        <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">No Widget Found</h2>\n        <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n          It looks like you don't have any Widget yet. Create one to get started!\n        </p>\n      </div>\n      }\n    </ax-grid-layout-container>\n    <div class=\"ax-p-4 ax-absolute ax-bottom-0 ax-right-0\">\n      <ax-button\n        [color]=\"'primary'\"\n        class=\"ax-xl ax-rounded-full\"\n        [disabled]=\"!store.currentDashboard()?.widget?.length\"\n        (onClick)=\"toggleEdit()\"\n      >\n        <ax-prefix> <ax-icon class=\"fa-solid fa-pen\"> </ax-icon></ax-prefix>\n      </ax-button>\n    </div>\n  </axp-layout-page-content>\n</axp-layout-simple-page>\n", styles: ["::ng-deep .placeholder-content{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i1$1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.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: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { 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: AXPSimplePageLayout, selector: "axp-layout-simple-page" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title,     axp-layout-nav-button,     axp-layout-description,     axp-layout-title-bar,    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: AXPThemeLayoutPagePrimaryActionsComponent, selector: "axp-layout-actions-primary" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i4$1.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXCDashboardWidgetWrapperComponent, selector: "axc-dashboard-widget-wrapper", inputs: ["hasOptions"], outputs: ["onDelete"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPThemeLayoutPageSecondaryActionsComponent, selector: "axp-layout-actions-secondary" }, { kind: "ngmodule", type: AXBreadcrumbsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDashboardHomeComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXPDesignerService, AXCDashboardStore], imports: [
+                        AXPLayoutBuilderModule,
+                        AXButtonModule,
+                        AXGridLayoutBuilderModule,
+                        AXPSimplePageLayout,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutPageHeaderComponent,
+                        AXPThemeLayoutActionsComponent,
+                        AXPThemeLayoutPagePrimaryActionsComponent,
+                        AXDropdownButtonModule,
+                        AXCDashboardWidgetWrapperComponent,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AsyncPipe,
+                        AXTranslatorDirective,
+                        AXPThemeLayoutPageSecondaryActionsComponent,
+                        AXBreadcrumbsModule,
+                    ], standalone: true, template: "<axp-layout-simple-page *translate=\"let t\">\n  <axp-layout-page-header>\n    <axp-layout-title> {{ store.currentDashboard()?.title }} </axp-layout-title>\n\n    <axp-layout-description> {{ store.currentDashboard()?.description }} </axp-layout-description>\n    1\n    <axp-layout-breadcrumbs>\n      <!-- <ax-breadcrumbs [class.ax-hidden]=\"layout.isSmall()\">\n        <ng-template #divider>\n          <i class=\"fa-regular fa-slash-forward ax-text-xs\"></i>\n        </ng-template>\n        @for(b of vm.beardcrumbs();track $index;let last=$last) {\n        <ax-breadcrumbs-item [routerLink]=\"b.url\" class=\"!ax-text-xs\"> {{ b.title}} </ax-breadcrumbs-item>\n        }\n      </ax-breadcrumbs> -->\n    </axp-layout-breadcrumbs>\n\n    <axp-layout-actions>\n      <axp-layout-actions-primary>\n        <ax-button [text]=\"t('create-new', { scope: rootConfig.config.i18n }) | async\" [color]=\"'primary'\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-light  fa-plus\"></ax-icon>\n          </ax-prefix>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item\n                (onClick)=\"store.addDashboard()\"\n                [text]=\" (t('dashboard.dashboard', { scope: rootConfig.config.i18n })| async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-folder-plus\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n              <ax-divider></ax-divider>\n              <ax-button-item\n                (onClick)=\"store.addWidget()\"\n                [text]=\" (t('dashboard.widget', { scope: rootConfig.config.i18n })| async)!\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-file-arrow-up\"></ax-icon>\n                </ax-prefix>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n\n        <ax-dropdown-button [text]=\"store.currentDashboard()?.title\" [color]=\"'primary'\">\n          <ax-button-item-list>\n            @for (dashboard of store.dashboards(); track dashboard.id) {\n            <ax-button-item\n              [text]=\"dashboard.title\"\n              [selected]=\"dashboard.id === store.currentDashboard()?.id\"\n              (onClick)=\"store.handleConfigChange(dashboard)\"\n            >\n            </ax-button-item>\n            } @empty {\n            <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-screen ax-bg-gray-50 ax-p-4\">\n              <!-- Icon -->\n              <svg\n                class=\"ax-w-16 ax-h-16 ax-text-gray-400 ax-mb-4\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"2\"\n                  d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                ></path>\n              </svg>\n\n              <!-- Message -->\n              <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">No Dashboards Found</h2>\n              <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n                It looks like you don't have any dashboards yet. Create one to get started!\n              </p>\n            </div>\n            }\n          </ax-button-item-list>\n        </ax-dropdown-button>\n      </axp-layout-actions-primary>\n      <axp-layout-actions-secondary>\n        <ax-button-item\n          [disabled]=\"store.dashboards().length<=1\"\n          [text]=\"(t('dashboard.delete-current-dashboard', { scope: rootConfig.config.i18n }) | async)!\"\n          (onClick)=\"store.removeDashboard(store.currentDashboard()?.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      </axp-layout-actions-secondary>\n    </axp-layout-actions>\n  </axp-layout-page-header>\n\n  <axp-layout-page-content class=\"ax-relative\">\n    <ax-grid-layout-container\n      [style.background]=\"getGridBackground()\"\n      #grid\n      [options]=\"store.dashboardsOption()\"\n      (onChange)=\"store.onGridChange($event)\"\n    >\n      @for(widget of store.currentDashboard()?.widget ; track widget.config.id) {\n      <ax-grid-layout-widget [options]=\"widget.config\">\n        <!-- <div class=\"ax-absolute ax-top-0 ax-size-3 ax-handler ax-bg-blue-500 ax-z-[999]\"></div> -->\n        <axc-dashboard-widget-wrapper\n          [hasOptions]=\"widget.node?.options?.['hasOptions'] ?? true\"\n          (onDelete)=\"store.removeWidget(store.currentDashboard()?.id!,widget.config.id!)\"\n        >\n          @if(widget.node){\n          <axp-widgets-container [context]=\"context()\">\n            <ng-container axp-widget-renderer [node]=\"widget.node\" [mode]=\"'edit'\"> </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        <!-- Icon -->\n        <svg\n          class=\"ax-w-16 ax-h-16 ax-text-gray-400 ax-mb-4\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n          ></path>\n        </svg>\n\n        <!-- Message -->\n        <h2 class=\"ax-text-xl ax-font-semibold ax-text-gray-700 ax-mb-2\">No Widget Found</h2>\n        <p class=\"ax-text-gray-500 ax-text-center ax-mb-6\">\n          It looks like you don't have any Widget yet. Create one to get started!\n        </p>\n      </div>\n      }\n    </ax-grid-layout-container>\n    <div class=\"ax-p-4 ax-absolute ax-bottom-0 ax-right-0\">\n      <ax-button\n        [color]=\"'primary'\"\n        class=\"ax-xl ax-rounded-full\"\n        [disabled]=\"!store.currentDashboard()?.widget?.length\"\n        (onClick)=\"toggleEdit()\"\n      >\n        <ax-prefix> <ax-icon class=\"fa-solid fa-pen\"> </ax-icon></ax-prefix>\n      </ax-button>\n    </div>\n  </axp-layout-page-content>\n</axp-layout-simple-page>\n", styles: ["::ng-deep .placeholder-content{position:absolute}\n"] }]
+        }] });
+
+export { AXPDashboardHomeComponent };
+//# sourceMappingURL=acorex-modules-common-index-B3u5feXf.mjs.map