@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -0,0 +1,2250 @@
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, Injectable, inject, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, effect, viewChildren, ElementRef, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
+import { signalStoreFeature, withState, withMethods, patchState, withComputed, signalStore, withProps } from '@ngrx/signals';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i1$2 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import * as i3$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Maximum number of columns supported by the grid.
+ * This determines the encoding scheme for cell coordinates.
+ */
+const MAX_COLUMNS = 1024;
+/**
+ * Utility functions for working with CellId branded type.
+ */
+const CellIdUtils = {
+    /**
+     * Creates a CellId from row and column coordinates.
+     * @param row - The row number (1-based)
+     * @param col - The column number (1-based)
+     * @returns A branded CellId that encodes both coordinates
+     * @throws Error if row or col is less than 1, or if col exceeds MAX_COLUMNS
+     */
+    create(row, col) {
+        if (row < 1 || col < 1) {
+            throw new Error(`Invalid cell coordinates: row=${row}, col=${col}. Both must be >= 1`);
+        }
+        if (col >= MAX_COLUMNS) {
+            throw new Error(`Column ${col} exceeds maximum of ${MAX_COLUMNS - 1}`);
+        }
+        return (row * MAX_COLUMNS + col);
+    },
+    /**
+     * Decodes a CellId back into row and column coordinates.
+     * @param cellId - The CellId to decode
+     * @returns A tuple of [row, col] coordinates (1-based)
+     */
+    decode(cellId) {
+        const id = cellId;
+        const row = Math.floor(id / MAX_COLUMNS);
+        const col = id % MAX_COLUMNS;
+        return [row, col];
+    },
+    /**
+     * Gets the row coordinate from a CellId.
+     * @param cellId - The CellId to extract row from
+     * @returns The row number (1-based)
+     */
+    getRow(cellId) {
+        return Math.floor(cellId / MAX_COLUMNS);
+    },
+    /**
+     * Gets the column coordinate from a CellId.
+     * @param cellId - The CellId to extract column from
+     * @returns The column number (1-based)
+     */
+    getCol(cellId) {
+        return cellId % MAX_COLUMNS;
+    },
+    /**
+     * Creates a string representation of a CellId for debugging/display purposes.
+     * @param cellId - The CellId to convert to string
+     * @returns A string in the format "row-col"
+     */
+    toString(cellId) {
+        const [row, col] = this.decode(cellId);
+        return `${row}-${col}`;
+    },
+    /**
+     * Checks if two CellIds are equal.
+     * @param a - First CellId
+     * @param b - Second CellId
+     * @returns True if the CellIds represent the same cell
+     */
+    equals(a, b) {
+        return a === b;
+    },
+};
+
+/**
+ * Utility functions for working with WidgetId branded type.
+ * WidgetIds are UUIDs that uniquely identify widget instances throughout their lifecycle,
+ * independent of their position on the dashboard grid.
+ */
+const WidgetIdUtils = {
+    /**
+     * Generates a new unique WidgetId.
+     * Uses crypto.randomUUID() when available, falls back to timestamp-based ID for older browsers.
+     * @returns A new unique WidgetId
+     */
+    generate() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback for older browsers
+        return `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    },
+    /**
+     * Validates if a string is a valid WidgetId format.
+     * @param id - The string to validate
+     * @returns True if the string is a valid WidgetId format
+     */
+    validate(id) {
+        // UUID v4 format or fallback format
+        return (/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id) ||
+            /^widget-\d+-[a-z0-9]{9}$/i.test(id));
+    },
+    /**
+     * Converts a WidgetId to a string for use as map keys or serialization.
+     * @param id - The WidgetId to convert
+     * @returns The string representation of the WidgetId
+     */
+    toString(id) {
+        return id;
+    },
+    /**
+     * Creates a WidgetId from a string, validating the format.
+     * @param str - The string to convert to WidgetId
+     * @returns A WidgetId
+     * @throws Error if the string is not a valid WidgetId format
+     */
+    fromString(str) {
+        if (!this.validate(str)) {
+            throw new Error(`Invalid WidgetId format: ${str}`);
+        }
+        return str;
+    },
+    /**
+     * Checks if two WidgetIds are equal.
+     * @param a - First WidgetId
+     * @param b - Second WidgetId
+     * @returns True if the WidgetIds are the same
+     */
+    equals(a, b) {
+        return a === b;
+    },
+};
+
+/**
+ * Creates an empty dashboard configuration with the specified dimensions.
+ * This is a convenience function for creating a basic dashboard without any cells.
+ *
+ * @param dashboardId - Unique identifier for the dashboard (managed by client)
+ * @param rows - Number of rows in the dashboard grid
+ * @param columns - Number of columns in the dashboard grid
+ * @param gutterSize - CSS size for the gutter between cells (default: '0.5em')
+ * @returns A DashboardDataDto configured with the specified dimensions and no cells
+ *
+ * @example
+ * // Create an 8x16 dashboard with default gutter
+ * const dashboard = createEmptyDashboard('my-dashboard-1', 8, 16);
+ *
+ * @example
+ * // Create a 5x10 dashboard with custom gutter
+ * const dashboard = createEmptyDashboard('my-dashboard-2', 5, 10, '0.5rem');
+ */
+function createEmptyDashboard(dashboardId, rows, columns, gutterSize = '0.5em') {
+    return {
+        version: '1.0.0',
+        dashboardId,
+        rows,
+        columns,
+        gutterSize,
+        cells: [],
+    };
+}
+/**
+ * Creates a default dashboard configuration with standard dimensions.
+ * This provides a reasonable starting point for most use cases.
+ *
+ * @param dashboardId - Unique identifier for the dashboard (managed by client)
+ * @returns A DashboardDataDto with 8 rows, 16 columns, and 0.5em gutter
+ *
+ * @example
+ * const dashboard = createDefaultDashboard('my-dashboard-id');
+ */
+function createDefaultDashboard(dashboardId) {
+    return createEmptyDashboard(dashboardId, 8, 16, '0.5em');
+}
+
+/**
+ * Default reserved space when none is specified
+ */
+const DEFAULT_RESERVED_SPACE = {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+};
+
+function createFactoryFromComponent(component) {
+    return {
+        ...component.metadata,
+        createInstance(container, state) {
+            const ref = container.createComponent(component);
+            ref.instance.dashboardSetState?.(state);
+            return ref;
+        },
+    };
+}
+
+class UnknownWidgetComponent {
+    static metadata = {
+        widgetTypeid: '__internal/unknown-widget',
+        name: 'Unknown Widget',
+        description: 'Fallback widget for unknown widget types',
+        svgIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
+    };
+    state = signal({
+        originalWidgetTypeid: 'unknown',
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    tooltipText = computed(() => `${this.state().originalWidgetTypeid}`, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
+    dashboardSetState(state) {
+        if (state && typeof state === 'object' && 'originalWidgetTypeid' in state) {
+            this.state.set(state);
+        }
+    }
+    dashboardGetState() {
+        return this.state();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
+    <div class="unknown-widget-container" [matTooltip]="tooltipText()">
+      <mat-icon class="unknown-widget-icon">error_outline</mat-icon>
+    </div>
+  `, isInline: true, styles: [".unknown-widget-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mat-sys-error);border-radius:8px;container-type:size}.unknown-widget-icon{color:var(--mat-sys-on-error);font-size:clamp(12px,75cqmin,68px);width:clamp(12px,75cqmin,68px);height:clamp(12px,75cqmin,68px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-unknown-widget', imports: [MatIconModule, MatTooltipModule], template: `
+    <div class="unknown-widget-container" [matTooltip]="tooltipText()">
+      <mat-icon class="unknown-widget-icon">error_outline</mat-icon>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".unknown-widget-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mat-sys-error);border-radius:8px;container-type:size}.unknown-widget-icon{color:var(--mat-sys-on-error);font-size:clamp(12px,75cqmin,68px);width:clamp(12px,75cqmin,68px);height:clamp(12px,75cqmin,68px)}\n"] }]
+        }] });
+
+// dashboard.service.ts
+class DashboardService {
+    #widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : []));
+    #widgetFactoryMap = new Map();
+    #unknownWidgetFactory = createFactoryFromComponent(UnknownWidgetComponent);
+    widgetTypes = this.#widgetTypes.asReadonly(); // make the widget list available as a readonly signal
+    registerWidgetType(widget) {
+        if (this.#widgetTypes().some((w) => w.metadata.widgetTypeid === widget.metadata.widgetTypeid)) {
+            throw new Error(`Widget type '${widget.metadata.widgetTypeid}' is already registered`);
+        }
+        this.#widgetFactoryMap.set(widget.metadata.widgetTypeid, createFactoryFromComponent(widget));
+        this.#widgetTypes.set([...this.#widgetTypes(), widget]);
+    }
+    getFactory(widgetTypeid) {
+        const factory = this.#widgetFactoryMap.get(widgetTypeid);
+        if (factory) {
+            return factory;
+        }
+        // Return fallback factory for unknown widget types
+        console.warn(`Unknown widget type: ${widgetTypeid}, using fallback error widget`);
+        // Create a custom factory that preserves the original widget type ID in state
+        return {
+            ...this.#unknownWidgetFactory,
+            createInstance: (container, state) => {
+                const ref = this.#unknownWidgetFactory.createInstance(container, {
+                    originalWidgetTypeid: widgetTypeid,
+                    ...(state && typeof state === 'object' ? state : {}),
+                });
+                return ref;
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// Internal utility functions used by collision detection, resize logic, and tests
+const GridQueryInternalUtils = {
+    isCellOccupied(cells, row, col, excludeWidgetId) {
+        return cells.some((cell) => {
+            // Skip checking against the widget being dragged (use widgetId for stable identity)
+            if (excludeWidgetId && cell.widgetId === excludeWidgetId)
+                return false;
+            const endRow = cell.row + cell.rowSpan - 1;
+            const endCol = cell.col + cell.colSpan - 1;
+            return (cell.row <= row && row <= endRow && cell.col <= col && col <= endCol);
+        });
+    },
+    isOutOfBounds(targetRow, targetCol, spanRow, spanCol, maxRows, maxColumns) {
+        const rowLimit = targetRow + spanRow - 1;
+        const colLimit = targetCol + spanCol - 1;
+        return rowLimit > maxRows || colLimit > maxColumns;
+    },
+    getCellAt(cells, row, col) {
+        return cells.find((cell) => cell.row === row && cell.col === col) ?? null;
+    },
+};
+
+function calculateCollisionInfo(dragData, hovered, cells, rows, columns) {
+    if (!dragData || !hovered) {
+        return {
+            hasCollisions: false,
+            invalidCells: [],
+            outOfBounds: false,
+            footprint: [],
+        };
+    }
+    const isCell = dragData.kind === 'cell';
+    const rowSpan = isCell ? dragData.content.rowSpan : 1;
+    const colSpan = isCell ? dragData.content.colSpan : 1;
+    // Check bounds
+    const outOfBounds = GridQueryInternalUtils.isOutOfBounds(hovered.row, hovered.col, rowSpan, colSpan, rows, columns);
+    // Generate footprint
+    const footprint = [];
+    for (let r = 0; r < rowSpan; r++) {
+        for (let c = 0; c < colSpan; c++) {
+            footprint.push({ row: hovered.row + r, col: hovered.col + c });
+        }
+    }
+    const excludeWidgetId = isCell ? dragData.content.widgetId : undefined;
+    // Check for actual collisions with other widgets (not self)
+    const hasCollisions = footprint.some((pos) => GridQueryInternalUtils.isCellOccupied(cells, pos.row, pos.col, excludeWidgetId));
+    // Generate invalid cell IDs
+    const invalidCells = [];
+    if (hasCollisions || outOfBounds) {
+        for (const pos of footprint) {
+            invalidCells.push(CellIdUtils.create(pos.row, pos.col));
+        }
+    }
+    return {
+        hasCollisions,
+        invalidCells,
+        outOfBounds,
+        footprint,
+    };
+}
+function calculateHighlightedZones(dragData, hovered) {
+    if (!dragData || !hovered)
+        return [];
+    const zones = [];
+    const rowSpan = dragData.kind === 'cell' ? dragData.content.rowSpan : 1;
+    const colSpan = dragData.kind === 'cell' ? dragData.content.colSpan : 1;
+    for (let r = 0; r < rowSpan; r++) {
+        for (let c = 0; c < colSpan; c++) {
+            zones.push({ row: hovered.row + r, col: hovered.col + c });
+        }
+    }
+    return zones;
+}
+
+const initialGridConfigState = {
+    rows: 8,
+    columns: 16,
+    gutterSize: '0.5em',
+    isEditMode: false,
+    gridCellDimensions: { width: 0, height: 0 },
+};
+const withGridConfig = () => signalStoreFeature(withState(initialGridConfigState), withMethods((store) => ({
+    setGridConfig(config) {
+        patchState(store, config);
+    },
+    setGridCellDimensions(width, height) {
+        patchState(store, { gridCellDimensions: { width, height } });
+    },
+    toggleEditMode() {
+        patchState(store, { isEditMode: !store.isEditMode() });
+    },
+    setEditMode(isEditMode) {
+        patchState(store, { isEditMode });
+    },
+})));
+
+const initialWidgetManagementState = {
+    widgetsById: {},
+};
+const withWidgetManagement = () => signalStoreFeature(withState(initialWidgetManagementState), 
+// Computed cells array - lazy evaluation, automatic memoization
+withComputed((store) => ({
+    cells: computed(() => Object.values(store.widgetsById())),
+})), withMethods((store) => ({
+    addWidget(cell) {
+        const widgetKey = WidgetIdUtils.toString(cell.widgetId);
+        patchState(store, {
+            widgetsById: { ...store.widgetsById(), [widgetKey]: cell },
+        });
+    },
+    removeWidget(widgetId) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { [widgetKey]: _, ...remaining } = store.widgetsById();
+        patchState(store, { widgetsById: remaining });
+    },
+    updateWidgetPosition(widgetId, row, col) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
+            // Update position and recalculate cellId based on new position
+            const newCellId = CellIdUtils.create(row, col);
+            patchState(store, {
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, row, col, cellId: newCellId },
+                },
+            });
+        }
+    },
+    createWidget(row, col, widgetFactory, widgetState) {
+        const widgetId = WidgetIdUtils.generate(); // Generate unique widget ID
+        const cellId = CellIdUtils.create(row, col); // Calculate position-based cell ID
+        const cell = {
+            widgetId,
+            cellId,
+            row,
+            col,
+            rowSpan: 1,
+            colSpan: 1,
+            widgetFactory,
+            widgetState,
+        };
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        patchState(store, {
+            widgetsById: { ...store.widgetsById(), [widgetKey]: cell },
+        });
+    },
+    updateCellSettings(widgetId, flat) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
+            patchState(store, {
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, flat },
+                },
+            });
+        }
+    },
+    updateWidgetSpan(widgetId, rowSpan, colSpan) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
+            patchState(store, {
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, rowSpan, colSpan },
+                },
+            });
+        }
+    },
+    updateWidgetState(widgetId, widgetState) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
+            patchState(store, {
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, widgetState },
+                },
+            });
+        }
+    },
+    updateAllWidgetStates(cellStates) {
+        const updatedWidgetsById = { ...store.widgetsById() };
+        // Convert cell ID keys to widget IDs and update states
+        for (const [cellIdString, newState] of cellStates) {
+            // Find the widget with the matching cell ID
+            const widget = Object.values(updatedWidgetsById).find(w => CellIdUtils.toString(w.cellId) === cellIdString);
+            if (widget) {
+                const widgetIdString = WidgetIdUtils.toString(widget.widgetId);
+                updatedWidgetsById[widgetIdString] = {
+                    ...updatedWidgetsById[widgetIdString],
+                    widgetState: newState,
+                };
+            }
+        }
+        patchState(store, { widgetsById: updatedWidgetsById });
+    },
+    clearDashboard() {
+        patchState(store, { widgetsById: {} });
+    },
+})));
+
+const initialDragDropState = {
+    dragData: null,
+    hoveredDropZone: null,
+};
+const withDragDrop = () => signalStoreFeature(withState(initialDragDropState), withComputed((store) => ({
+    // Highlighted zones during drag
+    highlightedZones: computed(() => calculateHighlightedZones(store.dragData(), store.hoveredDropZone())),
+})), withComputed((store) => ({
+    // Map for quick highlight lookup - reuse highlightedZones computation
+    highlightMap: computed(() => {
+        const zones = store.highlightedZones();
+        const map = new Set();
+        for (const z of zones) {
+            map.add(CellIdUtils.create(z.row, z.col));
+        }
+        return map;
+    }),
+})), withMethods((store) => ({
+    startDrag(dragData) {
+        patchState(store, { dragData });
+    },
+    endDrag() {
+        patchState(store, {
+            dragData: null,
+            hoveredDropZone: null,
+        });
+    },
+    setHoveredDropZone(zone) {
+        patchState(store, { hoveredDropZone: zone });
+    },
+})), 
+// Second withMethods block for drop handling that can access endDrag
+withMethods((store) => ({
+    // Drop handling logic with dependency injection
+    _handleDrop(dragData, targetPosition, dependencies) {
+        // 1. Validate placement using existing collision detection
+        const collisionInfo = calculateCollisionInfo(dragData, targetPosition, dependencies.cells, dependencies.rows, dependencies.columns);
+        // 2. End drag state first
+        store.endDrag();
+        // 3. Early return if invalid placement
+        if (collisionInfo.hasCollisions || collisionInfo.outOfBounds) {
+            return false;
+        }
+        // 4. Handle widget creation from palette
+        if (dragData.kind === 'widget') {
+            const factory = dependencies.dashboardService.getFactory(dragData.content.widgetTypeid);
+            dependencies.createWidget(targetPosition.row, targetPosition.col, factory, undefined);
+            return true;
+        }
+        // 5. Handle cell movement
+        if (dragData.kind === 'cell') {
+            dependencies.updateWidgetPosition(dragData.content.widgetId, // Use widgetId instead of cellId
+            targetPosition.row, targetPosition.col);
+            return true;
+        }
+        return false;
+    },
+})));
+
+function getMaxColSpan(cellId, row, col, cells, columns) {
+    const currentCell = cells.find((c) => CellIdUtils.equals(c.cellId, cellId));
+    if (!currentCell)
+        return 1;
+    // Start from current position and check each column until we hit a boundary or collision
+    let maxSpan = 1;
+    for (let testCol = col + 1; testCol <= columns; testCol++) {
+        // Check if this column is free for all rows the widget spans
+        let columnIsFree = true;
+        for (let testRow = row; testRow < row + currentCell.rowSpan; testRow++) {
+            const occupied = cells.some((cell) => {
+                if (CellIdUtils.equals(cell.cellId, cellId))
+                    return false;
+                const wStartCol = cell.col;
+                const wEndCol = cell.col + cell.colSpan - 1;
+                const wStartRow = cell.row;
+                const wEndRow = cell.row + cell.rowSpan - 1;
+                return (testCol >= wStartCol &&
+                    testCol <= wEndCol &&
+                    testRow >= wStartRow &&
+                    testRow <= wEndRow);
+            });
+            if (occupied) {
+                columnIsFree = false;
+                break;
+            }
+        }
+        if (!columnIsFree) {
+            break; // Hit a collision, stop here
+        }
+        maxSpan = testCol - col + 1; // Update max span to include this column
+    }
+    return maxSpan;
+}
+function getMaxRowSpan(cellId, row, col, cells, rows) {
+    const currentCell = cells.find((c) => CellIdUtils.equals(c.cellId, cellId));
+    if (!currentCell)
+        return 1;
+    // Start from current position and check each row until we hit a boundary or collision
+    let maxSpan = 1;
+    for (let testRow = row + 1; testRow <= rows; testRow++) {
+        // Check if this row is free for all columns the widget spans
+        let rowIsFree = true;
+        for (let testCol = col; testCol < col + currentCell.colSpan; testCol++) {
+            const occupied = cells.some((cell) => {
+                if (CellIdUtils.equals(cell.cellId, cellId))
+                    return false;
+                const wStartRow = cell.row;
+                const wEndRow = cell.row + cell.rowSpan - 1;
+                const wStartCol = cell.col;
+                const wEndCol = cell.col + cell.colSpan - 1;
+                return (testRow >= wStartRow &&
+                    testRow <= wEndRow &&
+                    testCol >= wStartCol &&
+                    testCol <= wEndCol);
+            });
+            if (occupied) {
+                rowIsFree = false;
+                break;
+            }
+        }
+        if (!rowIsFree) {
+            break; // Hit a collision, stop here
+        }
+        maxSpan = testRow - row + 1; // Update max span to include this row
+    }
+    return maxSpan;
+}
+function calculateResizePreview(resizeData, direction, delta, cells, rows, columns) {
+    const cell = cells.find((c) => CellIdUtils.equals(c.cellId, resizeData.cellId));
+    if (!cell)
+        return null;
+    if (direction === 'horizontal') {
+        // Calculate the desired span based on the delta
+        const desiredColSpan = Math.max(1, resizeData.originalColSpan + delta);
+        // Get the maximum allowed span
+        const maxColSpan = getMaxColSpan(cell.cellId, cell.row, cell.col, cells, columns);
+        // Clamp to the maximum
+        const newColSpan = Math.min(desiredColSpan, maxColSpan);
+        return {
+            rowSpan: resizeData.previewRowSpan,
+            colSpan: newColSpan,
+        };
+    }
+    else {
+        // Calculate the desired span based on the delta
+        const desiredRowSpan = Math.max(1, resizeData.originalRowSpan + delta);
+        // Get the maximum allowed span
+        const maxRowSpan = getMaxRowSpan(cell.cellId, cell.row, cell.col, cells, rows);
+        // Clamp to the maximum
+        const newRowSpan = Math.min(desiredRowSpan, maxRowSpan);
+        return {
+            rowSpan: newRowSpan,
+            colSpan: resizeData.previewColSpan,
+        };
+    }
+}
+
+const initialResizeState = {
+    resizeData: null,
+};
+// Utility functions for resize preview computations
+const ResizePreviewUtils = {
+    computePreviewCells(resizeData, cells) {
+        if (!resizeData)
+            return [];
+        const cell = cells.find((cell) => CellIdUtils.equals(cell.cellId, resizeData.cellId));
+        if (!cell)
+            return [];
+        const previewCells = [];
+        for (let r = 0; r < resizeData.previewRowSpan; r++) {
+            for (let c = 0; c < resizeData.previewColSpan; c++) {
+                previewCells.push({
+                    row: cell.row + r,
+                    col: cell.col + c,
+                });
+            }
+        }
+        return previewCells;
+    },
+    computePreviewMap(previewCells) {
+        const map = new Set();
+        for (const cell of previewCells) {
+            map.add(CellIdUtils.create(cell.row, cell.col));
+        }
+        return map;
+    },
+};
+const withResize = () => signalStoreFeature(withState(initialResizeState), withMethods((store) => ({
+    // Resize methods that need cross-feature dependencies
+    _startResize(cellId, dependencies) {
+        const cell = dependencies.cells.find((c) => CellIdUtils.equals(c.cellId, cellId));
+        if (!cell)
+            return;
+        patchState(store, {
+            resizeData: {
+                cellId,
+                originalRowSpan: cell.rowSpan,
+                originalColSpan: cell.colSpan,
+                previewRowSpan: cell.rowSpan,
+                previewColSpan: cell.colSpan,
+            },
+        });
+    },
+    _updateResizePreview(direction, delta, dependencies) {
+        const resizeData = store.resizeData();
+        if (!resizeData)
+            return;
+        const newSpans = calculateResizePreview(resizeData, direction, delta, dependencies.cells, dependencies.rows, dependencies.columns);
+        if (newSpans) {
+            patchState(store, {
+                resizeData: {
+                    ...resizeData,
+                    previewRowSpan: newSpans.rowSpan,
+                    previewColSpan: newSpans.colSpan,
+                },
+            });
+        }
+    },
+    _endResize(apply, dependencies) {
+        const resizeData = store.resizeData();
+        if (!resizeData)
+            return;
+        if (apply &&
+            (resizeData.previewRowSpan !== resizeData.originalRowSpan ||
+                resizeData.previewColSpan !== resizeData.originalColSpan)) {
+            dependencies.updateWidgetSpan(resizeData.cellId, resizeData.previewRowSpan, resizeData.previewColSpan);
+        }
+        patchState(store, { resizeData: null });
+    },
+})));
+
+const initialState = {
+    dashboardId: '',
+};
+const DashboardStore = signalStore(withState(initialState), withProps(() => ({
+    dashboardService: inject(DashboardService),
+})), withGridConfig(), withWidgetManagement(), withResize(), withDragDrop(), 
+// Cross-feature computed properties (need access to multiple features)
+withComputed((store) => ({
+    // Invalid zones (collision detection)
+    invalidHighlightMap: computed(() => {
+        const collisionInfo = calculateCollisionInfo(store.dragData(), store.hoveredDropZone(), store.cells(), store.rows(), store.columns());
+        return new Set(collisionInfo.invalidCells);
+    }),
+    // Check if placement would be valid (for drop validation)
+    isValidPlacement: computed(() => {
+        const collisionInfo = calculateCollisionInfo(store.dragData(), store.hoveredDropZone(), store.cells(), store.rows(), store.columns());
+        return !collisionInfo.hasCollisions && !collisionInfo.outOfBounds;
+    }),
+})), 
+// Cross-feature methods (need access to multiple features)
+withMethods((store) => ({
+    // DROP HANDLING (delegate to drag-drop feature with dependency injection)
+    handleDrop(dragData, targetPosition) {
+        return store._handleDrop(dragData, targetPosition, {
+            cells: store.cells(),
+            rows: store.rows(),
+            columns: store.columns(),
+            dashboardService: store.dashboardService,
+            createWidget: store.createWidget,
+            updateWidgetPosition: store.updateWidgetPosition,
+        });
+    },
+    // RESIZE METHODS (delegate to resize feature with dependency injection)
+    startResize(cellId) {
+        store._startResize(cellId, {
+            cells: store.cells(),
+        });
+    },
+    updateResizePreview(direction, delta) {
+        store._updateResizePreview(direction, delta, {
+            cells: store.cells(),
+            rows: store.rows(),
+            columns: store.columns(),
+        });
+    },
+    endResize(apply) {
+        store._endResize(apply, {
+            updateWidgetSpan: (cellId, rowSpan, colSpan) => {
+                // Adapter: find widget by cellId and update using widgetId
+                const widget = store.cells().find(c => CellIdUtils.equals(c.cellId, cellId));
+                if (widget) {
+                    store.updateWidgetSpan(widget.widgetId, rowSpan, colSpan);
+                }
+            }
+        });
+    },
+    // EXPORT/IMPORT METHODS (need access to multiple features)
+    exportDashboard(getCurrentWidgetStates) {
+        // Get live widget states if callback provided, otherwise use stored states
+        const liveWidgetStates = getCurrentWidgetStates?.() || new Map();
+        return {
+            version: '1.0.0',
+            dashboardId: store.dashboardId(),
+            rows: store.rows(),
+            columns: store.columns(),
+            gutterSize: store.gutterSize(),
+            cells: store.cells()
+                .filter((cell) => cell.widgetFactory.widgetTypeid !== '__internal/unknown-widget')
+                .map((cell) => {
+                const cellIdString = CellIdUtils.toString(cell.cellId);
+                const currentState = liveWidgetStates.get(cellIdString);
+                return {
+                    row: cell.row,
+                    col: cell.col,
+                    rowSpan: cell.rowSpan,
+                    colSpan: cell.colSpan,
+                    flat: cell.flat,
+                    widgetTypeid: cell.widgetFactory.widgetTypeid,
+                    widgetState: currentState !== undefined ? currentState : cell.widgetState,
+                };
+            }),
+        };
+    },
+    loadDashboard(data) {
+        // Import full dashboard data with grid configuration
+        const widgetsById = {};
+        data.cells.forEach((cellData) => {
+            const factory = store.dashboardService.getFactory(cellData.widgetTypeid);
+            const widgetId = WidgetIdUtils.generate();
+            const cell = {
+                widgetId,
+                cellId: CellIdUtils.create(cellData.row, cellData.col),
+                row: cellData.row,
+                col: cellData.col,
+                rowSpan: cellData.rowSpan,
+                colSpan: cellData.colSpan,
+                flat: cellData.flat,
+                widgetFactory: factory,
+                widgetState: cellData.widgetState,
+            };
+            widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
+        });
+        patchState(store, {
+            dashboardId: data.dashboardId,
+            rows: data.rows,
+            columns: data.columns,
+            gutterSize: data.gutterSize,
+            widgetsById,
+        });
+    },
+    // INITIALIZATION METHODS
+    initializeFromDto(dashboardData) {
+        // Inline the loadDashboard logic since it's defined later in the same methods block
+        const widgetsById = {};
+        dashboardData.cells.forEach((cellData) => {
+            const factory = store.dashboardService.getFactory(cellData.widgetTypeid);
+            const widgetId = WidgetIdUtils.generate();
+            const cell = {
+                widgetId,
+                cellId: CellIdUtils.create(cellData.row, cellData.col),
+                row: cellData.row,
+                col: cellData.col,
+                rowSpan: cellData.rowSpan,
+                colSpan: cellData.colSpan,
+                flat: cellData.flat,
+                widgetFactory: factory,
+                widgetState: cellData.widgetState,
+            };
+            widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
+        });
+        patchState(store, {
+            dashboardId: dashboardData.dashboardId,
+            rows: dashboardData.rows,
+            columns: dashboardData.columns,
+            gutterSize: dashboardData.gutterSize,
+            widgetsById,
+        });
+    },
+})), 
+// Cross-feature computed properties that depend on resize + widget data (using utility functions)
+withComputed((store) => ({
+    // Compute preview cells during resize using utility function
+    resizePreviewCells: computed(() => {
+        return ResizePreviewUtils.computePreviewCells(store.resizeData(), store.cells());
+    }),
+})), 
+// Second computed block that depends on the first
+withComputed((store) => ({
+    // Map for resize preview highlighting using utility function
+    resizePreviewMap: computed(() => {
+        return ResizePreviewUtils.computePreviewMap(store.resizePreviewCells());
+    }),
+})));
+
+/**
+ * Abstract provider for cell settings dialogs.
+ * Implement this to provide custom dialog solutions.
+ */
+class CellSettingsDialogProvider {
+}
+
+class CellSettingsDialogComponent {
+    selectedMode;
+    currentMode;
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    constructor() {
+        this.currentMode = this.data.flat ? 'flat' : 'normal';
+        this.selectedMode = this.currentMode;
+    }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    save() {
+        const newData = {
+            ...this.data,
+            flat: this.selectedMode === 'flat'
+        };
+        this.dialogRef.close(newData);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title>Cell Display Settings</h2>
+    <mat-dialog-content>
+      <p class="cell-info">Cell ID: <strong>{{ data.id }}</strong></p>
+      
+      <div class="radio-group">
+        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
+          <mat-radio-button value="normal">
+            <div class="radio-option">
+              <div class="option-title">Normal</div>
+              <div class="option-description">Standard cell display with full content visibility</div>
+            </div>
+          </mat-radio-button>
+          
+          <mat-radio-button value="flat">
+            <div class="radio-option">
+              <div class="option-title">Flat</div>
+              <div class="option-description">Simplified display with reduced visual emphasis</div>
+            </div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button 
+        mat-flat-button 
+        (click)="save()"
+        [disabled]="selectedMode === currentMode">
+        Apply
+      </button>
+    </mat-dialog-actions>
+  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-cell-settings-dialog', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatRadioModule,
+                    ], template: `
+    <h2 mat-dialog-title>Cell Display Settings</h2>
+    <mat-dialog-content>
+      <p class="cell-info">Cell ID: <strong>{{ data.id }}</strong></p>
+      
+      <div class="radio-group">
+        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
+          <mat-radio-button value="normal">
+            <div class="radio-option">
+              <div class="option-title">Normal</div>
+              <div class="option-description">Standard cell display with full content visibility</div>
+            </div>
+          </mat-radio-button>
+          
+          <mat-radio-button value="flat">
+            <div class="radio-option">
+              <div class="option-title">Flat</div>
+              <div class="option-description">Simplified display with reduced visual emphasis</div>
+            </div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button 
+        mat-flat-button 
+        (click)="save()"
+        [disabled]="selectedMode === currentMode">
+        Apply
+      </button>
+    </mat-dialog-actions>
+  `, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Default cell dialog provider that uses Material Design dialogs.
+ * Provides a modern, accessible dialog experience for cell settings.
+ */
+class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
+    dialog = inject(MatDialog);
+    async openCellSettings(data) {
+        const dialogRef = this.dialog.open(CellSettingsDialogComponent, {
+            data,
+            width: '400px',
+            maxWidth: '90vw',
+            disableClose: false,
+            autoFocus: false,
+        });
+        const result = await firstValueFrom(dialogRef.afterClosed());
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Injection token for the cell dialog provider.
+ * Use this to provide your custom dialog implementation.
+ *
+ * @example
+ * ```typescript
+ * providers: [
+ *   { provide: CELL_SETTINGS_DIALOG_PROVIDER, useClass: MyCellSettingsDialogProvider }
+ * ]
+ * ```
+ */
+const CELL_SETTINGS_DIALOG_PROVIDER = new InjectionToken('CellSettingsDialogProvider', {
+    providedIn: 'root',
+    factory: () => new DefaultCellSettingsDialogProvider(),
+});
+
+class CellContextMenuService {
+    #activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : []));
+    activeMenu = this.#activeMenu.asReadonly();
+    show(x, y, items) {
+        this.#activeMenu.set({ x, y, items });
+    }
+    hide() {
+        this.#activeMenu.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService, decorators: [{
+            type: Injectable
+        }] });
+
+// cell.component.ts
+class CellComponent {
+    widgetId = input.required(...(ngDevMode ? [{ debugName: "widgetId" }] : [])); // Unique widget instance identifier
+    cellId = input.required(...(ngDevMode ? [{ debugName: "cellId" }] : [])); // Current grid position
+    widgetFactory = input(undefined, ...(ngDevMode ? [{ debugName: "widgetFactory" }] : []));
+    widgetState = input(undefined, ...(ngDevMode ? [{ debugName: "widgetState" }] : []));
+    isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    flat = input(undefined, ...(ngDevMode ? [{ debugName: "flat" }] : []));
+    row = model.required(...(ngDevMode ? [{ debugName: "row" }] : []));
+    column = model.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    rowSpan = input(1, ...(ngDevMode ? [{ debugName: "rowSpan" }] : []));
+    colSpan = input(1, ...(ngDevMode ? [{ debugName: "colSpan" }] : []));
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
+    dragStart = output();
+    dragEnd = output();
+    edit = output();
+    delete = output();
+    settings = output();
+    resizeStart = output();
+    resizeMove = output();
+    resizeEnd = output();
+    container = viewChild.required('container', { read: ViewContainerRef });
+    #store = inject(DashboardStore);
+    #dialogProvider = inject(CELL_SETTINGS_DIALOG_PROVIDER);
+    #destroyRef = inject(DestroyRef);
+    #renderer = inject(Renderer2);
+    #contextMenuService = inject(CellContextMenuService, {
+        optional: true,
+    });
+    #widgetRef;
+    // Document event listeners cleanup function
+    // Performance: Only created when actively resizing, not for every cell
+    #documentListeners;
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRowStyle" }] : []));
+    gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumnStyle" }] : []));
+    isResizing = computed(() => {
+        const resizeData = this.#store.resizeData();
+        return resizeData
+            ? CellIdUtils.equals(resizeData.cellId, this.cellId())
+            : false;
+    }, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
+    isDragActive = computed(() => !!this.#store.dragData(), ...(ngDevMode ? [{ debugName: "isDragActive" }] : []));
+    resizeData = this.#store.resizeData;
+    gridCellDimensions = this.#store.gridCellDimensions;
+    resizeDirection = signal(null, ...(ngDevMode ? [{ debugName: "resizeDirection" }] : []));
+    resizeStartPos = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : []));
+    constructor() {
+        // widget creation - triggers when factory or state changes
+        effect(() => {
+            const factory = this.widgetFactory();
+            const state = this.widgetState();
+            const container = this.container();
+            if (factory && container) {
+                // Clean up previous widget
+                this.#widgetRef?.destroy();
+                // Create new widget
+                container.clear();
+                try {
+                    this.#widgetRef = factory.createInstance(container, state);
+                }
+                catch (error) {
+                    console.error('Failed to create widget:', error);
+                    this.#widgetRef = undefined;
+                }
+            }
+        });
+        // Auto cleanup on destroy
+        this.#destroyRef.onDestroy(() => {
+            this.#widgetRef?.destroy();
+            this.#widgetRef = undefined;
+            // Clean up any active document listeners
+            this.#cleanupDocumentListeners();
+        });
+    }
+    /**
+     * Setup document-level event listeners for resize operations
+     * Performance: Only creates listeners when actively resizing (not for every cell)
+     * Angular-idiomatic: Uses Renderer2 for dynamic listener management
+     */
+    setupDocumentListeners() {
+        // Clean up any existing listeners first
+        this.#cleanupDocumentListeners();
+        // Create document listeners with proper cleanup functions
+        const unlistenMove = this.#renderer.listen('document', 'mousemove', this.handleResizeMove.bind(this));
+        const unlistenUp = this.#renderer.listen('document', 'mouseup', this.handleResizeEnd.bind(this));
+        // Store cleanup function for later use
+        this.#documentListeners = () => {
+            unlistenMove();
+            unlistenUp();
+        };
+    }
+    /**
+     * Clean up document-level event listeners
+     * Called on resize end and component destruction
+     */
+    #cleanupDocumentListeners() {
+        if (this.#documentListeners) {
+            this.#documentListeners();
+            this.#documentListeners = undefined;
+        }
+    }
+    setPosition(row, column) {
+        this.row.set(row);
+        this.column.set(column);
+    }
+    onDragStart(event) {
+        if (!event.dataTransfer)
+            return;
+        event.dataTransfer.effectAllowed = 'move';
+        const cell = {
+            cellId: this.cellId(),
+            widgetId: this.widgetId(),
+            row: this.row(),
+            col: this.column(),
+            rowSpan: this.rowSpan(),
+            colSpan: this.colSpan(),
+        };
+        const content = { kind: 'cell', content: cell };
+        this.dragStart.emit(content);
+        this.isDragging.set(true);
+    }
+    onDragEnd( /*_: DragEvent*/) {
+        this.isDragging.set(false);
+        this.dragEnd.emit();
+    }
+    /**
+     * Handle context menu events (called from template)
+     * Performance: Element-specific event binding, not document-level
+     * Angular-idiomatic: Template event binding instead of fromEvent
+     */
+    onContextMenu(event) {
+        if (!this.isEditMode() || !this.#contextMenuService)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const items = [
+            {
+                label: 'Edit Widget',
+                icon: 'edit',
+                action: () => this.onEdit(),
+                disabled: !this.canEdit(),
+            },
+            {
+                label: 'Settings',
+                icon: 'settings',
+                action: () => this.onSettings(),
+            },
+            { divider: true },
+            {
+                label: 'Delete',
+                icon: 'delete',
+                action: () => this.onDelete(),
+            },
+        ];
+        // Position menu at exact mouse coordinates
+        this.#contextMenuService.show(event.clientX, event.clientY, items);
+    }
+    canEdit() {
+        if (this.#widgetRef?.instance?.dashboardEditState) {
+            return true;
+        }
+        return false;
+    }
+    onEdit() {
+        this.edit.emit(this.widgetId());
+        // Call the widget's edit dialog method if it exists
+        if (this.#widgetRef?.instance?.dashboardEditState) {
+            this.#widgetRef.instance.dashboardEditState();
+        }
+    }
+    onDelete() {
+        this.delete.emit(this.widgetId());
+    }
+    async onSettings() {
+        const currentSettings = {
+            id: CellIdUtils.toString(this.cellId()), // Use cellId for display position
+            flat: this.flat(),
+        };
+        try {
+            const result = await this.#dialogProvider.openCellSettings(currentSettings);
+            if (result) {
+                this.settings.emit({
+                    id: this.widgetId(),
+                    flat: result.flat ?? false,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error opening cell settings dialog:', error);
+        }
+    }
+    /**
+     * Start resize operation and setup document listeners
+     * Performance: Only THIS cell creates document listeners when actively resizing
+     * RxJS-free: Uses Renderer2 for dynamic listener management
+     */
+    onResizeStart(event, direction) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.resizeDirection.set(direction);
+        this.resizeStartPos.set({ x: event.clientX, y: event.clientY });
+        this.resizeStart.emit({ cellId: this.cellId(), direction });
+        // Setup document listeners only when actively resizing
+        this.setupDocumentListeners();
+        const cursorClass = direction === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize';
+        this.#renderer.addClass(document.body, cursorClass);
+    }
+    /**
+     * Handle resize move events (called from document listener)
+     * Performance: Only called for the actively resizing cell
+     * Bound method: Maintains component context without arrow functions
+     */
+    handleResizeMove(event) {
+        const direction = this.resizeDirection();
+        if (!direction)
+            return;
+        const startPos = this.resizeStartPos();
+        const cellSize = this.gridCellDimensions();
+        if (direction === 'horizontal') {
+            const deltaX = event.clientX - startPos.x;
+            const deltaSpan = Math.round(deltaX / cellSize.width);
+            this.resizeMove.emit({ cellId: this.cellId(), direction, delta: deltaSpan });
+        }
+        else {
+            const deltaY = event.clientY - startPos.y;
+            const deltaSpan = Math.round(deltaY / cellSize.height);
+            this.resizeMove.emit({ cellId: this.cellId(), direction, delta: deltaSpan });
+        }
+    }
+    /**
+     * Handle resize end events (called from document listener)
+     * Performance: Cleans up document listeners immediately after resize
+     * State cleanup: Resets resize direction to stop further event processing
+     */
+    handleResizeEnd() {
+        this.#renderer.removeClass(document.body, 'cursor-col-resize');
+        this.#renderer.removeClass(document.body, 'cursor-row-resize');
+        // Clean up document listeners immediately
+        this.#cleanupDocumentListeners();
+        this.resizeEnd.emit({ cellId: this.cellId(), apply: true });
+        this.resizeDirection.set(null);
+    }
+    /**
+     * Get the current widget state by calling dashboardGetState() on the widget instance.
+     * Used during dashboard export to get live widget state instead of stale stored state.
+     */
+    getCurrentWidgetState() {
+        if (!this.#widgetRef?.instance) {
+            return undefined;
+        }
+        // Call dashboardGetState() if the widget implements it
+        if (typeof this.#widgetRef.instance.dashboardGetState === 'function') {
+            return this.#widgetRef.instance.dashboardGetState();
+        }
+        // Fall back to stored state if widget doesn't implement dashboardGetState
+        return this.widgetState();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CellComponent, isStandalone: true, selector: "lib-cell", inputs: { widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: true, transformFunction: null }, cellId: { classPropertyName: "cellId", publicName: "cellId", isSignal: true, isRequired: true, transformFunction: null }, widgetFactory: { classPropertyName: "widgetFactory", publicName: "widgetFactory", isSignal: true, isRequired: false, transformFunction: null }, widgetState: { classPropertyName: "widgetState", publicName: "widgetState", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { row: "rowChange", column: "columnChange", dragStart: "dragStart", dragEnd: "dragEnd", edit: "edit", delete: "delete", settings: "settings", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { properties: { "style.grid-row": "gridRowStyle()", "style.grid-column": "gridColumnStyle()", "class.is-dragging": "isDragging()", "class.drag-active": "isDragActive()", "class.flat": "flat() === true" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\">\r\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\r\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\r\n</div>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(.is-dragging) .content-area{pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}:host(:not(.is-dragging)) .cell.flat .content-area{pointer-events:auto}:host(:not(.is-dragging)) .cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-cell', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.grid-row]': 'gridRowStyle()',
+                        '[style.grid-column]': 'gridColumnStyle()',
+                        '[class.is-dragging]': 'isDragging()',
+                        '[class.drag-active]': 'isDragActive()',
+                        '[class.flat]': 'flat() === true',
+                    }, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\">\r\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\r\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\r\n</div>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(.is-dragging) .content-area{pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}:host(:not(.is-dragging)) .cell.flat .content-area{pointer-events:auto}:host(:not(.is-dragging)) .cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"] }]
+        }], ctorParameters: () => [] });
+
+class DashboardViewerComponent {
+    #store = inject(DashboardStore);
+    cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
+    gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
+    // store signals - read-only
+    cells = this.#store.cells;
+    constructor() {
+        // Sync grid configuration with store when inputs change
+        effect(() => {
+            this.#store.setGridConfig({
+                rows: this.rows(),
+                columns: this.columns(),
+                gutterSize: this.gutterSize(),
+            });
+        });
+    }
+    /**
+     * Get current widget states from all cell components.
+     * Used during dashboard export to get live widget states.
+     */
+    getCurrentWidgetStates() {
+        const stateMap = new Map();
+        const cells = this.cellComponents();
+        for (const cell of cells) {
+            const cellId = cell.cellId();
+            const currentState = cell.getCurrentWidgetState();
+            if (currentState !== undefined) {
+                stateMap.set(CellIdUtils.toString(cellId), currentState);
+            }
+        }
+        return stateMap;
+    }
+    /**
+     * Export dashboard with live widget states from current component instances.
+     * This ensures the most up-to-date widget states are captured.
+     */
+    exportDashboard() {
+        return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--rows]': 'rows()',
+                        '[style.--columns]': 'columns()',
+                        '[style.--gutter-size]': 'gutterSize()',
+                        '[style.--gutters]': 'gutters()',
+                    }, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [] });
+
+class CellContextMenuComponent {
+    menuTrigger = viewChild.required('menuTrigger', { read: MatMenuTrigger });
+    menuService = inject(CellContextMenuService);
+    menuPosition = computed(() => {
+        const menu = this.menuService.activeMenu();
+        return menu ? { left: `${menu.x}px`, top: `${menu.y}px` } : { left: '0px', top: '0px' };
+    }, ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
+    menuItems = computed(() => {
+        const menu = this.menuService.activeMenu();
+        return menu?.items || [];
+    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    constructor() {
+        effect(() => {
+            const menu = this.menuService.activeMenu();
+            if (menu) {
+                // Use queueMicrotask to ensure the view is fully initialized
+                // This fixes the issue where the menu disappears on first right-click
+                queueMicrotask(() => {
+                    const trigger = this.menuTrigger();
+                    if (trigger) {
+                        // Close any existing menu first
+                        if (trigger.menuOpen) {
+                            trigger.closeMenu();
+                        }
+                        // Open menu - position is handled by signal
+                        trigger.openMenu();
+                    }
+                });
+            }
+            else {
+                const trigger = this.menuTrigger();
+                if (trigger) {
+                    trigger.closeMenu();
+                }
+            }
+        });
+        // Hide service menu when Material menu closes
+        effect(() => {
+            const trigger = this.menuTrigger();
+            if (trigger) {
+                trigger.menuClosed.subscribe(() => {
+                    if (this.menuService.activeMenu()) {
+                        this.menuService.hide();
+                    }
+                });
+            }
+        });
+    }
+    executeAction(item) {
+        if (!item.divider && item.action) {
+            item.action();
+            this.menuService.hide();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CellContextMenuComponent, isStandalone: true, selector: "lib-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
+    <!-- Hidden trigger for menu positioned at exact mouse coordinates
+         
+         IMPORTANT: Angular Material applies its own positioning logic to menus,
+         which by default offsets the menu from the trigger element to avoid overlap.
+         To achieve precise positioning at mouse coordinates, we use these workarounds:
+         
+         1. The trigger container is 1x1px (not 0x0) because Material needs a physical
+            element to calculate position against. Zero-sized elements cause unpredictable
+            positioning.
+            
+         2. We use opacity:0 instead of visibility:hidden to keep the element in the
+            layout flow while making it invisible.
+            
+         3. The button itself is styled to 1x1px with no padding to serve as a precise
+            anchor point for the menu.
+            
+         4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
+            directly at the trigger position rather than offset from it.
+            
+         This approach ensures the menu appears at the exact mouse coordinates passed
+         from the cell component's right-click handler.
+    -->
+    <div 
+      style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+      [style]="menuPosition()">
+      <button
+        mat-button
+        #menuTrigger="matMenuTrigger"
+        [matMenuTriggerFor]="contextMenu"
+        style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
+      </button>
+    </div>
+
+    <!-- Context menu -->
+    <mat-menu #contextMenu="matMenu" [overlapTrigger]="true">
+      @for (item of menuItems(); track $index) {
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        } @else {
+          <button 
+            mat-menu-item 
+            (click)="executeAction(item)" 
+            [disabled]="item.disabled">
+            @if (item.icon) {
+              <mat-icon>{{ item.icon }}</mat-icon>
+            }
+            <span>{{ item.label }}</span>
+          </button>
+        }
+      }
+    </mat-menu>
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-cell-context-menu', standalone: true, imports: [MatMenuModule, MatIconModule, MatDividerModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Hidden trigger for menu positioned at exact mouse coordinates
+         
+         IMPORTANT: Angular Material applies its own positioning logic to menus,
+         which by default offsets the menu from the trigger element to avoid overlap.
+         To achieve precise positioning at mouse coordinates, we use these workarounds:
+         
+         1. The trigger container is 1x1px (not 0x0) because Material needs a physical
+            element to calculate position against. Zero-sized elements cause unpredictable
+            positioning.
+            
+         2. We use opacity:0 instead of visibility:hidden to keep the element in the
+            layout flow while making it invisible.
+            
+         3. The button itself is styled to 1x1px with no padding to serve as a precise
+            anchor point for the menu.
+            
+         4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
+            directly at the trigger position rather than offset from it.
+            
+         This approach ensures the menu appears at the exact mouse coordinates passed
+         from the cell component's right-click handler.
+    -->
+    <div 
+      style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+      [style]="menuPosition()">
+      <button
+        mat-button
+        #menuTrigger="matMenuTrigger"
+        [matMenuTriggerFor]="contextMenu"
+        style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
+      </button>
+    </div>
+
+    <!-- Context menu -->
+    <mat-menu #contextMenu="matMenu" [overlapTrigger]="true">
+      @for (item of menuItems(); track $index) {
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        } @else {
+          <button 
+            mat-menu-item 
+            (click)="executeAction(item)" 
+            [disabled]="item.disabled">
+            @if (item.icon) {
+              <mat-icon>{{ item.icon }}</mat-icon>
+            }
+            <span>{{ item.label }}</span>
+          </button>
+        }
+      }
+    </mat-menu>
+  `, styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [] });
+
+// drop-zone.component.ts
+class DropZoneComponent {
+    // Required inputs
+    row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
+    col = input.required(...(ngDevMode ? [{ debugName: "col" }] : []));
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    // Optional inputs with defaults
+    highlight = input(false, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
+    highlightInvalid = input(false, ...(ngDevMode ? [{ debugName: "highlightInvalid" }] : []));
+    highlightResize = input(false, ...(ngDevMode ? [{ debugName: "highlightResize" }] : []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    // Outputs
+    dragEnter = output();
+    dragExit = output();
+    dragOver = output();
+    dragDrop = output();
+    // Computed properties
+    dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`, ...(ngDevMode ? [{ debugName: "dropZoneId" }] : []));
+    dropData = computed(() => ({
+        row: this.row(),
+        col: this.col(),
+    }), ...(ngDevMode ? [{ debugName: "dropData" }] : []));
+    // Abstract drag state from store
+    dragData = computed(() => this.#store.dragData(), ...(ngDevMode ? [{ debugName: "dragData" }] : []));
+    // Computed drop effect based on drag data and validity
+    dropEffect = computed(() => {
+        const data = this.dragData();
+        if (!data || this.highlightInvalid()) {
+            return 'none';
+        }
+        return data.kind === 'cell' ? 'move' : 'copy';
+    }, ...(ngDevMode ? [{ debugName: "dropEffect" }] : []));
+    #store = inject(DashboardStore);
+    #elementRef = inject(ElementRef);
+    get nativeElement() {
+        return this.#elementRef.nativeElement;
+    }
+    onDragEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragEnter.emit({ row: this.row(), col: this.col() });
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer && this.dragData()) {
+            event.dataTransfer.dropEffect = this.dropEffect();
+        }
+        this.dragOver.emit({ row: this.row(), col: this.col() });
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Only emit if actually leaving the element (not entering a child)
+        if (this.#isLeavingElement(event)) {
+            this.dragExit.emit();
+        }
+    }
+    #isLeavingElement(event) {
+        const rect = this.#elementRef.nativeElement.getBoundingClientRect();
+        return (event.clientX <= rect.left ||
+            event.clientX >= rect.right ||
+            event.clientY <= rect.top ||
+            event.clientY >= rect.bottom);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!event.dataTransfer)
+            return;
+        const data = this.dragData();
+        if (data) {
+            this.dragDrop.emit({
+                data,
+                target: { row: this.row(), col: this.col() },
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropZoneComponent, isStandalone: true, selector: "lib-drop-zone", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, highlightInvalid: { classPropertyName: "highlightInvalid", publicName: "highlightInvalid", isSignal: true, isRequired: false, transformFunction: null }, highlightResize: { classPropertyName: "highlightResize", publicName: "highlightResize", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnter: "dragEnter", dragExit: "dragExit", dragOver: "dragOver", dragDrop: "dragDrop" }, ngImport: i0, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-drop-zone', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"] }]
+        }] });
+
+// dashboard-editor.component.ts
+class DashboardEditorComponent {
+    bottomGridRef = viewChild.required('bottomGrid');
+    dropZones = viewChildren(DropZoneComponent, ...(ngDevMode ? [{ debugName: "dropZones" }] : []));
+    cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    #store = inject(DashboardStore);
+    #destroyRef = inject(DestroyRef);
+    #resizeObserver;
+    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
+    gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
+    // store signals
+    cells = this.#store.cells;
+    highlightedZones = this.#store.highlightedZones;
+    highlightMap = this.#store.highlightMap;
+    invalidHighlightMap = this.#store.invalidHighlightMap;
+    hoveredDropZone = this.#store.hoveredDropZone;
+    resizePreviewMap = this.#store.resizePreviewMap;
+    // Generate all possible cell positions for the grid
+    dropzonePositions = computed(() => {
+        const positions = [];
+        for (let row = 1; row <= this.rows(); row++) {
+            for (let col = 1; col <= this.columns(); col++) {
+                positions.push({
+                    row,
+                    col,
+                    id: `dropzone-${row}-${col}`,
+                    index: (row - 1) * this.columns() + col,
+                });
+            }
+        }
+        return positions;
+    }, ...(ngDevMode ? [{ debugName: "dropzonePositions" }] : []));
+    // Helper method for template
+    createCellId(row, col) {
+        return CellIdUtils.create(row, col);
+    }
+    constructor() {
+        // Sync grid configuration with store when inputs change
+        effect(() => {
+            this.#store.setGridConfig({
+                rows: this.rows(),
+                columns: this.columns(),
+                gutterSize: this.gutterSize(),
+            });
+        });
+        // Observe grid size after rendering
+        afterNextRender(() => {
+            this.#observeGridSize();
+        });
+        // Always set edit mode to true
+        effect(() => {
+            this.#store.setEditMode(true);
+        });
+    }
+    #observeGridSize() {
+        const gridEl = this.bottomGridRef()?.nativeElement;
+        if (!gridEl || this.#resizeObserver)
+            return;
+        this.#resizeObserver = new ResizeObserver(() => {
+            const dropZonesList = this.dropZones();
+            const firstDropZone = dropZonesList[0];
+            if (!firstDropZone)
+                return;
+            const el = firstDropZone.nativeElement;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const width = rect.width;
+            const height = rect.height;
+            this.#store.setGridCellDimensions(width, height);
+        });
+        this.#resizeObserver.observe(gridEl);
+        // Register cleanup with DestroyRef for automatic memory management
+        this.#destroyRef.onDestroy(() => {
+            this.#resizeObserver?.disconnect();
+            this.#resizeObserver = undefined;
+        });
+    }
+    // Pure delegation methods - no business logic in component
+    addWidget = (cellData) => this.#store.addWidget(cellData);
+    updateCellPosition = (id, row, column) => this.#store.updateWidgetPosition(id, row, column);
+    updateCellSpan = (id, colSpan, rowSpan) => this.#store.updateWidgetSpan(id, rowSpan, colSpan);
+    updateCellSettings = (id, flat) => this.#store.updateCellSettings(id, flat);
+    // Pure delegation - drag and drop event handlers
+    onDragOver = (event) => this.#store.setHoveredDropZone(event);
+    onDragEnter = (event) => this.onDragOver(event);
+    onDragExit = () => this.#store.setHoveredDropZone(null);
+    dragEnd = () => this.#store.endDrag();
+    // Pure delegation - cell event handlers
+    onCellDelete = (id) => this.#store.removeWidget(id);
+    onCellSettings = (event) => this.updateCellSettings(event.id, event.flat);
+    onCellResize = (event) => this.updateCellSpan(event.id, event.colSpan, event.rowSpan);
+    // Handle drag events from cell component
+    onCellDragStart = (dragData) => this.#store.startDrag(dragData);
+    // Handle resize events from cell component
+    onCellResizeStart = (event) => this.#store.startResize(event.cellId);
+    onCellResizeMove = (event) => this.#store.updateResizePreview(event.direction, event.delta);
+    onCellResizeEnd = (event) => this.#store.endResize(event.apply);
+    // Handle drop events by delegating to store's business logic
+    onDragDrop(event) {
+        this.#store.handleDrop(event.data, event.target);
+        // Note: Store handles all validation and error handling internally
+    }
+    /**
+     * Get current widget states from all cell components.
+     * Used during dashboard export to get live widget states.
+     */
+    getCurrentWidgetStates() {
+        const stateMap = new Map();
+        const cells = this.cellComponents();
+        for (const cell of cells) {
+            const cellId = cell.cellId();
+            const currentState = cell.getCurrentWidgetState();
+            if (currentState !== undefined) {
+                stateMap.set(CellIdUtils.toString(cellId), currentState);
+            }
+        }
+        return stateMap;
+    }
+    /**
+     * Export dashboard with live widget states from current component instances.
+     * This ensures the most up-to-date widget states are captured.
+     */
+    exportDashboard() {
+        return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardEditorComponent, isStandalone: true, selector: "ngx-dashboard-editor", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()", "class.is-edit-mode": "true" } }, providers: [
+            CellContextMenuService,
+        ], viewQueries: [{ propertyName: "bottomGridRef", first: true, predicate: ["bottomGrid"], descendants: true, isSignal: true }, { propertyName: "dropZones", predicate: DropZoneComponent, descendants: true, isSignal: true }, { propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-editor', standalone: true, imports: [
+                        CellComponent,
+                        CommonModule,
+                        DropZoneComponent,
+                        CellContextMenuComponent,
+                    ], providers: [
+                        CellContextMenuService,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--rows]': 'rows()',
+                        '[style.--columns]': 'columns()',
+                        '[style.--gutter-size]': 'gutterSize()',
+                        '[style.--gutters]': 'gutters()',
+                        '[class.is-edit-mode]': 'true', // Always in edit mode
+                    }, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"] }]
+        }], ctorParameters: () => [] });
+
+// dashboard-bridge.service.ts
+/**
+ * Internal bridge service that coordinates between component-scoped DashboardStore instances
+ * and standalone components like WidgetListComponent.
+ *
+ * This service is NOT part of the public API and should remain internal to the library.
+ */
+class DashboardBridgeService {
+    // Map of registered dashboard instances with their reactive dimensions
+    dashboards = signal(new Map(), ...(ngDevMode ? [{ debugName: "dashboards" }] : []));
+    /**
+     * Register a dashboard store instance using its dashboard ID
+     */
+    registerDashboard(store) {
+        const dashboardId = store.dashboardId();
+        // If dashboard ID is not set yet, we'll register later when it's available
+        if (!dashboardId) {
+            return;
+        }
+        this.dashboards.update(dashboards => {
+            const newMap = new Map(dashboards);
+            newMap.set(dashboardId, {
+                store,
+                dimensions: store.gridCellDimensions
+            });
+            return newMap;
+        });
+    }
+    /**
+     * Unregister a dashboard store instance
+     */
+    unregisterDashboard(store) {
+        const dashboardId = store.dashboardId();
+        if (!dashboardId) {
+            return;
+        }
+        this.dashboards.update(dashboards => {
+            const newMap = new Map(dashboards);
+            newMap.delete(dashboardId);
+            return newMap;
+        });
+    }
+    /**
+     * Get cell dimensions for a specific dashboard instance
+     */
+    getDashboardDimensions(dashboardId) {
+        const dashboard = this.dashboards().get(dashboardId);
+        return dashboard?.dimensions() || { width: 100, height: 100 };
+    }
+    /**
+     * Get all available dashboard dimensions (for widget lists to choose from)
+     * Returns the first available dashboard's dimensions as fallback
+     */
+    availableDimensions = computed(() => {
+        const dashboardEntries = Array.from(this.dashboards().values());
+        if (dashboardEntries.length === 0) {
+            return { width: 100, height: 100 }; // fallback
+        }
+        // Return dimensions from first available dashboard with fallback for undefined
+        return dashboardEntries[0].dimensions() || { width: 100, height: 100 };
+    }, ...(ngDevMode ? [{ debugName: "availableDimensions" }] : []));
+    /**
+     * Start drag operation on the first available dashboard
+     * (Widget lists need some dashboard to coordinate with during drag)
+     */
+    startDrag(dragData) {
+        const dashboardEntries = Array.from(this.dashboards().values());
+        if (dashboardEntries.length > 0) {
+            dashboardEntries[0].store.startDrag(dragData);
+        }
+    }
+    /**
+     * End drag operation on all dashboards
+     * (Safer to notify all in case drag state got distributed)
+     */
+    endDrag() {
+        for (const dashboard of this.dashboards().values()) {
+            dashboard.store.endDrag();
+        }
+    }
+    /**
+     * Get all registered dashboard IDs
+     */
+    registeredDashboards = computed(() => Array.from(this.dashboards().keys()), ...(ngDevMode ? [{ debugName: "registeredDashboards" }] : []));
+    /**
+     * Get the number of registered dashboards
+     */
+    dashboardCount = computed(() => this.dashboards().size, ...(ngDevMode ? [{ debugName: "dashboardCount" }] : []));
+    /**
+     * Check if any dashboards are registered
+     */
+    hasDashboards = computed(() => this.dashboards().size > 0, ...(ngDevMode ? [{ debugName: "hasDashboards" }] : []));
+    /**
+     * Update registration for a dashboard store when its ID becomes available
+     */
+    updateDashboardRegistration(store) {
+        this.registerDashboard(store);
+    }
+    /**
+     * Get grid configuration for a specific dashboard
+     */
+    getDashboardGridConfig(dashboardId) {
+        const dashboard = this.dashboards().get(dashboardId);
+        if (!dashboard) {
+            return null;
+        }
+        const store = dashboard.store;
+        return {
+            rows: store.rows(),
+            columns: store.columns(),
+            gutterSize: store.gutterSize()
+        };
+    }
+    /**
+     * Get the store instance for a specific dashboard ID
+     */
+    getDashboardStore(dashboardId) {
+        const dashboard = this.dashboards().get(dashboardId);
+        return dashboard?.store || null;
+    }
+    /**
+     * Get all registered dashboards (for viewport service integration)
+     */
+    getAllDashboards() {
+        return this.dashboards();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Internal component-scoped service that provides viewport-aware constraints for a single dashboard.
+ * Each dashboard component gets its own instance of this service.
+ *
+ * This service is NOT part of the public API and should remain internal to the library.
+ */
+class DashboardViewportService {
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    store = inject(DashboardStore);
+    viewportSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "viewportSize" }] : []));
+    reservedSpace = signal(DEFAULT_RESERVED_SPACE, ...(ngDevMode ? [{ debugName: "reservedSpace" }] : []));
+    resizeObserver = null;
+    constructor() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.initializeViewportTracking();
+        }
+    }
+    /**
+     * Initialize viewport size tracking using ResizeObserver on the window
+     */
+    initializeViewportTracking() {
+        // Use ResizeObserver on document.documentElement for accurate viewport tracking
+        this.resizeObserver = new ResizeObserver((entries) => {
+            if (entries.length > 0) {
+                const entry = entries[0];
+                const { inlineSize, blockSize } = entry.contentBoxSize[0];
+                this.viewportSize.set({
+                    width: inlineSize,
+                    height: blockSize
+                });
+            }
+        });
+        this.resizeObserver.observe(document.documentElement);
+        // Initial size
+        this.viewportSize.set({
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+        });
+    }
+    /**
+     * Set reserved space that should be excluded from dashboard calculations
+     * (e.g., toolbar height, widget list width, padding)
+     */
+    setReservedSpace(space) {
+        this.reservedSpace.set(space);
+    }
+    /**
+     * Get current viewport size
+     */
+    currentViewportSize = this.viewportSize.asReadonly();
+    /**
+     * Get current reserved space
+     */
+    currentReservedSpace = this.reservedSpace.asReadonly();
+    /**
+     * Calculate available space for dashboard after accounting for reserved areas
+     */
+    availableSpace = computed(() => {
+        const viewport = this.viewportSize();
+        const reserved = this.reservedSpace();
+        return {
+            width: Math.max(0, viewport.width - reserved.left - reserved.right),
+            height: Math.max(0, viewport.height - reserved.top - reserved.bottom)
+        };
+    }, ...(ngDevMode ? [{ debugName: "availableSpace" }] : []));
+    /**
+     * Calculate dashboard constraints for this dashboard instance
+     */
+    constraints = computed(() => {
+        const availableSize = this.availableSpace();
+        // Get grid configuration from our component's store
+        const rows = this.store.rows();
+        const columns = this.store.columns();
+        if (rows === 0 || columns === 0) {
+            return {
+                maxWidth: availableSize.width,
+                maxHeight: availableSize.height,
+                constrainedBy: 'none'
+            };
+        }
+        // Calculate aspect ratio
+        const aspectRatio = columns / rows;
+        // Calculate maximum size that fits within available space
+        const maxWidthFromHeight = availableSize.height * aspectRatio;
+        const maxHeightFromWidth = availableSize.width / aspectRatio;
+        let maxWidth;
+        let maxHeight;
+        let constrainedBy;
+        if (maxWidthFromHeight <= availableSize.width) {
+            // Height is the limiting factor
+            maxWidth = maxWidthFromHeight;
+            maxHeight = availableSize.height;
+            constrainedBy = 'height';
+        }
+        else {
+            // Width is the limiting factor
+            maxWidth = availableSize.width;
+            maxHeight = maxHeightFromWidth;
+            constrainedBy = 'width';
+        }
+        return {
+            maxWidth: Math.max(0, maxWidth),
+            maxHeight: Math.max(0, maxHeight),
+            constrainedBy
+        };
+    }, ...(ngDevMode ? [{ debugName: "constraints" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// dashboard.component.ts
+//
+// A performant, modular, and fully reactive Angular dashboard container that orchestrates between
+// editing and viewing modes — with clean component separation and no external dependencies.
+class DashboardComponent {
+    #store = inject(DashboardStore);
+    #bridge = inject(DashboardBridgeService);
+    #viewport = inject(DashboardViewportService);
+    #destroyRef = inject(DestroyRef);
+    // Public accessors for template
+    store = this.#store;
+    viewport = this.#viewport;
+    // Component inputs
+    dashboardData = input.required(...(ngDevMode ? [{ debugName: "dashboardData" }] : []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : []));
+    // Store signals - shared by both child components
+    cells = this.#store.cells;
+    // ViewChild references for export/import functionality
+    dashboardEditor = viewChild(DashboardEditorComponent, ...(ngDevMode ? [{ debugName: "dashboardEditor" }] : []));
+    dashboardViewer = viewChild(DashboardViewerComponent, ...(ngDevMode ? [{ debugName: "dashboardViewer" }] : []));
+    // Track if we're in the middle of preserving states
+    #isPreservingStates = false;
+    // Track if component has been initialized
+    #isInitialized = false;
+    constructor() {
+        // Cleanup registration when component is destroyed
+        this.#destroyRef.onDestroy(() => {
+            this.#bridge.unregisterDashboard(this.#store);
+        });
+        // Initialize from dashboardData
+        effect(() => {
+            const data = this.dashboardData();
+            if (data) {
+                this.#store.initializeFromDto(data);
+                // Register with bridge service after dashboard ID is set
+                this.#bridge.updateDashboardRegistration(this.#store);
+                this.#isInitialized = true;
+            }
+        });
+        // Sync edit mode with store (without triggering state preservation)
+        effect(() => {
+            const editMode = this.editMode();
+            untracked(() => {
+                this.#store.setEditMode(editMode);
+            });
+        });
+        // Sync reserved space input with viewport service
+        effect(() => {
+            const reserved = this.reservedSpace();
+            if (reserved) {
+                this.#viewport.setReservedSpace(reserved);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        // Handle edit mode changes after initialization
+        if (changes['editMode'] &&
+            !changes['editMode'].firstChange &&
+            this.#isInitialized) {
+            const previousValue = changes['editMode'].previousValue;
+            const currentValue = changes['editMode'].currentValue;
+            if (previousValue !== currentValue) {
+                // Preserve widget states before the mode switch
+                this.#preserveWidgetStatesBeforeModeSwitch(previousValue);
+            }
+        }
+    }
+    // Public export/import methods
+    exportDashboard() {
+        // Delegate to the active child component
+        if (this.editMode()) {
+            const editor = this.dashboardEditor();
+            return editor ? editor.exportDashboard() : this.#store.exportDashboard();
+        }
+        else {
+            const viewer = this.dashboardViewer();
+            return viewer ? viewer.exportDashboard() : this.#store.exportDashboard();
+        }
+    }
+    loadDashboard(data) {
+        this.#store.loadDashboard(data);
+    }
+    getCurrentDashboardData() {
+        return this.exportDashboard();
+    }
+    clearDashboard() {
+        this.#store.clearDashboard();
+    }
+    /**
+     * Preserve widget states before switching modes by collecting live states
+     * from the currently active component and updating the store.
+     */
+    #preserveWidgetStatesBeforeModeSwitch(previousEditMode) {
+        // Prevent re-entrant calls
+        if (this.#isPreservingStates) {
+            return;
+        }
+        this.#isPreservingStates = true;
+        try {
+            let currentWidgetStates = null;
+            if (previousEditMode) {
+                // Previously in edit mode, collect states from editor
+                const editor = this.dashboardEditor();
+                if (editor) {
+                    currentWidgetStates = editor.getCurrentWidgetStates();
+                }
+            }
+            else {
+                // Previously in view mode, collect states from viewer
+                const viewer = this.dashboardViewer();
+                if (viewer) {
+                    currentWidgetStates = viewer.getCurrentWidgetStates();
+                }
+            }
+            // Update the store with the live widget states using untracked to avoid triggering effects
+            if (currentWidgetStates && currentWidgetStates.size > 0) {
+                untracked(() => {
+                    this.#store.updateAllWidgetStates(currentWidgetStates);
+                });
+            }
+        }
+        finally {
+            this.#isPreservingStates = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard', standalone: true, imports: [CommonModule, DashboardViewerComponent, DashboardEditorComponent], providers: [DashboardStore, DashboardViewportService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--rows]': 'store.rows()',
+                        '[style.--columns]': 'store.columns()',
+                        '[style.--gutter-size]': 'store.gutterSize()',
+                        '[style.--gutters]': 'store.columns() + 1',
+                        '[class.is-edit-mode]': 'editMode()',
+                        '[style.max-width.px]': 'viewport.constraints().maxWidth',
+                        '[style.max-height.px]': 'viewport.constraints().maxHeight',
+                    }, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+// widget-list.component.ts
+class WidgetListComponent {
+    #service = inject(DashboardService);
+    #sanitizer = inject(DomSanitizer);
+    #renderer = inject(Renderer2);
+    #bridge = inject(DashboardBridgeService);
+    activeWidget = signal(null, ...(ngDevMode ? [{ debugName: "activeWidget" }] : []));
+    // Get grid cell dimensions from bridge service (uses first available dashboard)
+    gridCellDimensions = this.#bridge.availableDimensions;
+    widgets = computed(() => this.#service.widgetTypes().map((w) => ({
+        ...w.metadata,
+        safeSvgIcon: this.#sanitizer.bypassSecurityTrustHtml(w.metadata.svgIcon),
+    })), ...(ngDevMode ? [{ debugName: "widgets" }] : []));
+    onDragStart(event, widget) {
+        if (!event.dataTransfer)
+            return;
+        event.dataTransfer.effectAllowed = 'copy';
+        const dragData = {
+            kind: 'widget',
+            content: widget,
+        };
+        this.activeWidget.set(widget.widgetTypeid);
+        this.#bridge.startDrag(dragData);
+        // Create custom drag ghost for better UX
+        const ghost = this.#createDragGhost(widget.svgIcon);
+        document.body.appendChild(ghost);
+        // Force reflow to ensure element is rendered
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _reflow = ghost.offsetHeight;
+        event.dataTransfer.setDragImage(ghost, 10, 10);
+        // Delay removal to ensure browser has time to snapshot the drag image
+        setTimeout(() => ghost.remove());
+    }
+    onDragEnd() {
+        this.activeWidget.set(null);
+        this.#bridge.endDrag();
+    }
+    #createDragGhost(svgIcon) {
+        const dimensions = this.gridCellDimensions();
+        const el = this.#renderer.createElement('div');
+        this.#renderer.addClass(el, 'drag-ghost');
+        // Set dimensions using CSS custom properties for dynamic sizing
+        this.#renderer.setStyle(el, 'width', `${dimensions.width}px`);
+        this.#renderer.setStyle(el, 'height', `${dimensions.height}px`);
+        if (svgIcon) {
+            const iconWrapper = this.#renderer.createElement('div');
+            this.#renderer.addClass(iconWrapper, 'icon');
+            iconWrapper.innerHTML = svgIcon;
+            const svg = iconWrapper.querySelector('svg');
+            if (svg) {
+                // Size the SVG to 80% of the cell dimensions
+                svg.setAttribute('width', `${dimensions.width * 0.8}`);
+                svg.setAttribute('height', `${dimensions.height * 0.8}`);
+                // Remove hardcoded fill and opacity - let CSS handle styling
+                svg.removeAttribute('fill');
+            }
+            el.appendChild(iconWrapper);
+        }
+        return el;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\" role=\"list\" aria-label=\"Available widgets\">\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"widget.name + ' widget: ' + widget.description\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\" role=\"list\" aria-label=\"Available widgets\">\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"widget.name + ' widget: ' + widget.description\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of ngx-dashboard
+ */
+// Main dashboard components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CELL_SETTINGS_DIALOG_PROVIDER, CellIdUtils, CellSettingsDialogProvider, DEFAULT_RESERVED_SPACE, DashboardComponent, DashboardEditorComponent, DashboardService, DashboardViewerComponent, DefaultCellSettingsDialogProvider, WidgetIdUtils, WidgetListComponent, createDefaultDashboard, createEmptyDashboard, createFactoryFromComponent };
+//# sourceMappingURL=dragonworks-ngx-dashboard.mjs.map