@dragonworks/ngx-dashboard 20.0.4 → 20.0.6

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -1,2192 +0,0 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import * as i0 from '@angular/core';
-import { signal, computed, ChangeDetectionStrategy, Component, Injectable, inject, Inject, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, ElementRef, effect, viewChildren, 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 i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import { firstValueFrom } from 'rxjs';
-import * as i2$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;
-    },
-};
-
-/**
- * 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',
-    });
-    tooltipText = computed(() => `${this.state().originalWidgetTypeid}`);
-    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.0.6", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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.0.6", 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([]);
-    #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 || {}),
-                });
-                return ref;
-            },
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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, excludeId) {
-        return cells.some((cell) => {
-            // Skip checking against the cell being dragged
-            if (excludeId && CellIdUtils.equals(cell.cellId, excludeId))
-                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 excludeId = isCell ? dragData.content.cellId : undefined;
-    // Check for actual collisions with other widgets (not self)
-    const hasCollisions = footprint.some((pos) => GridQueryInternalUtils.isCellOccupied(cells, pos.row, pos.col, excludeId));
-    // 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 = {
-    cellsById: {},
-};
-const withWidgetManagement = () => signalStoreFeature(withState(initialWidgetManagementState), 
-// Computed cells array - lazy evaluation, automatic memoization
-withComputed((store) => ({
-    cells: computed(() => Object.values(store.cellsById())),
-})), withMethods((store) => ({
-    addWidget(cell) {
-        const cellKey = CellIdUtils.toString(cell.cellId);
-        patchState(store, {
-            cellsById: { ...store.cellsById(), [cellKey]: cell },
-        });
-    },
-    removeWidget(cellId) {
-        const cellKey = CellIdUtils.toString(cellId);
-        const { [cellKey]: removed, ...remaining } = store.cellsById();
-        patchState(store, { cellsById: remaining });
-    },
-    updateWidgetPosition(cellId, row, col) {
-        const cellKey = CellIdUtils.toString(cellId);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
-            patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, row, col },
-                },
-            });
-        }
-    },
-    createWidget(row, col, widgetFactory, widgetState) {
-        const cellId = CellIdUtils.create(row, col);
-        const cell = {
-            cellId,
-            row,
-            col,
-            rowSpan: 1,
-            colSpan: 1,
-            widgetFactory,
-            widgetState,
-        };
-        const cellKey = CellIdUtils.toString(cellId);
-        patchState(store, {
-            cellsById: { ...store.cellsById(), [cellKey]: cell },
-        });
-    },
-    updateCellSettings(id, flat) {
-        const cellKey = CellIdUtils.toString(id);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
-            patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, flat },
-                },
-            });
-        }
-    },
-    updateWidgetSpan(id, rowSpan, colSpan) {
-        const cellKey = CellIdUtils.toString(id);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
-            patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, rowSpan, colSpan },
-                },
-            });
-        }
-    },
-    updateWidgetState(cellId, widgetState) {
-        const cellKey = CellIdUtils.toString(cellId);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
-            patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, widgetState },
-                },
-            });
-        }
-    },
-    updateAllWidgetStates(widgetStates) {
-        const updatedCellsById = { ...store.cellsById() };
-        for (const [cellIdString, newState] of widgetStates) {
-            const existingCell = updatedCellsById[cellIdString];
-            if (existingCell) {
-                updatedCellsById[cellIdString] = { ...existingCell, widgetState: newState };
-            }
-        }
-        patchState(store, { cellsById: updatedCellsById });
-    },
-    clearDashboard() {
-        patchState(store, { cellsById: {} });
-    },
-})));
-
-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) => ({
-    syncDragState(dragData) {
-        patchState(store, { dragData });
-    },
-    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.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: store.updateWidgetSpan,
-        });
-    },
-    // 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 cellsById = {};
-        data.cells.forEach((cellData) => {
-            const factory = store.dashboardService.getFactory(cellData.widgetTypeid);
-            const cell = {
-                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,
-            };
-            cellsById[CellIdUtils.toString(cell.cellId)] = cell;
-        });
-        patchState(store, {
-            dashboardId: data.dashboardId,
-            rows: data.rows,
-            columns: data.columns,
-            gutterSize: data.gutterSize,
-            cellsById,
-        });
-    },
-    // INITIALIZATION METHODS
-    initializeFromDto(dashboardData) {
-        // Inline the loadDashboard logic since it's defined later in the same methods block
-        const cellsById = {};
-        dashboardData.cells.forEach((cellData) => {
-            const factory = store.dashboardService.getFactory(cellData.widgetTypeid);
-            const cell = {
-                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,
-            };
-            cellsById[CellIdUtils.toString(cell.cellId)] = cell;
-        });
-        patchState(store, {
-            dashboardId: dashboardData.dashboardId,
-            rows: dashboardData.rows,
-            columns: dashboardData.columns,
-            gutterSize: dashboardData.gutterSize,
-            cellsById,
-        });
-    },
-})), 
-// 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 {
-    data;
-    dialogRef;
-    selectedMode;
-    currentMode;
-    constructor(data, dialogRef) {
-        this.data = data;
-        this.dialogRef = dialogRef;
-        this.currentMode = 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.0.6", ngImport: i0, type: CellSettingsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", 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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$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.0.6", 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: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.MatDialogRef }] });
-
-/**
- * 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.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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);
-    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.0.6", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuService, decorators: [{
-            type: Injectable
-        }] });
-
-// cell.component.ts
-class CellComponent {
-    id = input.required();
-    widgetFactory = input(undefined);
-    widgetState = input(undefined);
-    isEditMode = input(false);
-    flat = input(undefined);
-    row = model.required();
-    column = model.required();
-    rowSpan = input(1);
-    colSpan = input(1);
-    draggable = input(false);
-    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,
-    });
-    #elementRef = inject(ElementRef);
-    #widgetRef;
-    // Document event listeners cleanup function
-    // Performance: Only created when actively resizing, not for every cell
-    #documentListeners;
-    isDragging = signal(false);
-    gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`);
-    gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`);
-    isResizing = computed(() => {
-        const resizeData = this.#store.resizeData();
-        return resizeData
-            ? CellIdUtils.equals(resizeData.cellId, this.id())
-            : false;
-    });
-    isDragActive = computed(() => !!this.#store.dragData());
-    resizeData = this.#store.resizeData;
-    gridCellDimensions = this.#store.gridCellDimensions;
-    resizeDirection = signal(null);
-    resizeStartPos = signal({ x: 0, y: 0 });
-    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.id(),
-            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.id());
-        // Call the widget's edit dialog method if it exists
-        if (this.#widgetRef?.instance?.dashboardEditState) {
-            this.#widgetRef.instance.dashboardEditState();
-        }
-    }
-    onDelete() {
-        this.delete.emit(this.id());
-    }
-    async onSettings() {
-        const currentSettings = {
-            id: CellIdUtils.toString(this.id()),
-            flat: this.flat(),
-        };
-        try {
-            const result = await this.#dialogProvider.openCellSettings(currentSettings);
-            if (result) {
-                this.settings.emit({
-                    id: this.id(),
-                    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({ id: this.id(), 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({ id: this.id(), direction, delta: deltaSpan });
-        }
-        else {
-            const deltaY = event.clientY - startPos.y;
-            const deltaSpan = Math.round(deltaY / cellSize.height);
-            this.resizeMove.emit({ id: this.id(), 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({ id: this.id(), 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.0.6", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CellComponent, isStandalone: true, selector: "lib-cell", inputs: { id: { classPropertyName: "id", publicName: "id", 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(: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}.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.0.6", 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(: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}.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);
-    rows = input.required();
-    columns = input.required();
-    gutterSize = input('1em');
-    gutters = computed(() => this.columns() + 1);
-    // 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.id();
-            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.0.6", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.cellId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [id]=\"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: ["id", "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.0.6", 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.cellId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [id]=\"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' };
-    });
-    menuItems = computed(() => {
-        const menu = this.menuService.activeMenu();
-        return menu?.items || [];
-    });
-    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();
-                    }
-                });
-            }
-        });
-    }
-    ngAfterViewInit() {
-        // Effects moved to constructor to be within injection context
-    }
-    executeAction(item) {
-        if (!item.divider && item.action) {
-            item.action();
-            this.menuService.hide();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.0.6", 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();
-    col = input.required();
-    index = input.required();
-    // Optional inputs with defaults
-    highlight = input(false);
-    highlightInvalid = input(false);
-    highlightResize = input(false);
-    editMode = input(false);
-    // Outputs
-    dragEnter = output();
-    dragExit = output();
-    dragOver = output();
-    dragDrop = output();
-    // Computed properties
-    dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`);
-    dropData = computed(() => ({
-        row: this.row(),
-        col: this.col(),
-    }));
-    // Abstract drag state from store
-    dragData = computed(() => this.#store.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';
-    });
-    #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.0.6", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.0.6", 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);
-    cellComponents = viewChildren(CellComponent);
-    #store = inject(DashboardStore);
-    #destroyRef = inject(DestroyRef);
-    #resizeObserver;
-    rows = input.required();
-    columns = input.required();
-    gutterSize = input('1em');
-    gutters = computed(() => this.columns() + 1);
-    // 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;
-    });
-    // 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.id);
-    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.id();
-            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.0.6", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.cellId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [id]=\"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: ["id", "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.0.6", 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.cellId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [id]=\"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());
-    /**
-     * 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 };
-    });
-    /**
-     * 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()));
-    /**
-     * Get the number of registered dashboards
-     */
-    dashboardCount = computed(() => this.dashboards().size);
-    /**
-     * Check if any dashboards are registered
-     */
-    hasDashboards = computed(() => this.dashboards().size > 0);
-    /**
-     * 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.0.6", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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 });
-    reservedSpace = signal(DEFAULT_RESERVED_SPACE);
-    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)
-        };
-    });
-    /**
-     * 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
-        };
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewportService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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();
-    editMode = input(false);
-    reservedSpace = input();
-    // Store signals - shared by both child components
-    cells = this.#store.cells;
-    // ViewChild references for export/import functionality
-    dashboardEditor = viewChild(DashboardEditorComponent);
-    dashboardViewer = viewChild(DashboardViewerComponent);
-    // 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.0.6", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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.0.6", 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);
-    // 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),
-    })));
-    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
-        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');
-        el.classList.add('drag-ghost');
-        if (svgIcon) {
-            const iconWrapper = this.#renderer.createElement('div');
-            this.#renderer.addClass(iconWrapper, 'icon');
-            iconWrapper.innerHTML = svgIcon;
-            const svg = iconWrapper.querySelector('svg');
-            if (svg) {
-                svg.setAttribute('width', `${dimensions.width * 0.8}`);
-                svg.setAttribute('height', `${dimensions.height * 0.8}`);
-                svg.setAttribute('fill', '#000000');
-                svg.setAttribute('opacity', '0.3');
-            }
-            el.appendChild(iconWrapper);
-        }
-        Object.assign(el.style, {
-            boxSizing: 'border-box',
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: `${dimensions.width}px`,
-            height: `${dimensions.height}px`,
-            zIndex: '9999',
-            margin: '0',
-            background: 'white',
-            border: '1px solid #ccc',
-            borderRadius: '4px',
-            pointerEvents: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            opacity: 0.7,
-        });
-        return el;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\">\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  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\"></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>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container)}.widget-list{display:flex;flex-direction:column;gap:.5em}.widget-list-item{display:flex;align-items:start;gap:.75em;background:#fff;border:1px solid #ccc;padding:.75em;border-radius:4px;cursor:grab;box-shadow:0 1px 2px #0000000d;transition:background .2s}.widget-list-item .icon{width:24px;height:24px;flex-shrink:0}.widget-list-item .icon svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2}.widget-list-item:hover{background:#f0f0f0}.widget-list-item:active{cursor:grabbing}.widget-list-item.active{background:#e6f7ff;border-color:#91d5ff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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\">\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  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\"></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>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container)}.widget-list{display:flex;flex-direction:column;gap:.5em}.widget-list-item{display:flex;align-items:start;gap:.75em;background:#fff;border:1px solid #ccc;padding:.75em;border-radius:4px;cursor:grab;box-shadow:0 1px 2px #0000000d;transition:background .2s}.widget-list-item .icon{width:24px;height:24px;flex-shrink:0}.widget-list-item .icon svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2}.widget-list-item:hover{background:#f0f0f0}.widget-list-item:active{cursor:grabbing}.widget-list-item.active{background:#e6f7ff;border-color:#91d5ff}\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, WidgetListComponent, createDefaultDashboard, createEmptyDashboard, createFactoryFromComponent };
-//# sourceMappingURL=dragonworks-ngx-dashboard.mjs.map