@acorex/modules 19.2.20 → 19.3.0-next.1

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

@@ -1,507 +0,0 @@
-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-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-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-D90SN6SH.mjs.map