@dragonworks/ngx-dashboard 20.2.0 → 20.3.1

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -1,26 +1,30 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, ChangeDetectionStrategy, Component, Injectable, inject, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, effect, viewChildren, ElementRef, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, effect, viewChildren, ElementRef, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
 import { signalStoreFeature, withState, withMethods, patchState, withComputed, signalStore, withProps } from '@ngrx/signals';
-import * as i1 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/dialog';
+import * as i2$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { firstValueFrom } from 'rxjs';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/radio';
+import * as i4$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i1$2 from '@angular/material/menu';
+import * as i1$1 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
-import * as i3$1 from '@angular/material/divider';
+import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { DomSanitizer } from '@angular/platform-browser';
 
+// Auto-generated by scripts/generate-versions.js
+// Do not edit manually
+const NGX_DASHBOARD_VERSION = '20.3.1';
+
 /**
  * Maximum number of columns supported by the grid.
  * This determines the encoding scheme for cell coordinates.
@@ -172,7 +176,7 @@ const WidgetIdUtils = {
  */
 function createEmptyDashboard(dashboardId, rows, columns, gutterSize = '0.5em') {
     return {
-        version: '1.0.0',
+        version: '1.1.0',
         dashboardId,
         rows,
         columns,
@@ -215,6 +219,8 @@ function createFactoryFromComponent(component) {
     };
 }
 
+// widget-shared-state-provider.ts
+
 class UnknownWidgetComponent {
     static metadata = {
         widgetTypeid: '__internal/unknown-widget',
@@ -239,7 +245,7 @@ class UnknownWidgetComponent {
     <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 });
+  `, 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
             type: Component,
@@ -254,15 +260,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 class DashboardService {
     #widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : []));
     #widgetFactoryMap = new Map();
+    #sharedStateProviders = 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`);
+    registerWidgetType(widget, sharedStateProvider) {
+        const widgetTypeid = widget.metadata.widgetTypeid;
+        if (this.#widgetTypes().some((w) => w.metadata.widgetTypeid === widgetTypeid)) {
+            throw new Error(`Widget type '${widgetTypeid}' is already registered`);
+        }
+        // Register widget factory
+        this.#widgetFactoryMap.set(widgetTypeid, createFactoryFromComponent(widget));
+        // Register shared state provider if provided
+        if (sharedStateProvider) {
+            const provider = this.#resolveProvider(sharedStateProvider);
+            this.#sharedStateProviders.set(widgetTypeid, provider);
         }
-        this.#widgetFactoryMap.set(widget.metadata.widgetTypeid, createFactoryFromComponent(widget));
         this.#widgetTypes.set([...this.#widgetTypes(), widget]);
     }
+    #resolveProvider(provider) {
+        // If it's a class/service, inject it
+        if (typeof provider === 'function') {
+            return inject(provider);
+        }
+        return provider;
+    }
     getFactory(widgetTypeid) {
         const factory = this.#widgetFactoryMap.get(widgetTypeid);
         if (factory) {
@@ -282,6 +303,49 @@ class DashboardService {
             },
         };
     }
+    /**
+     * Get the shared state provider for a specific widget type.
+     *
+     * @param widgetTypeid The widget type identifier
+     * @returns The shared state provider, or undefined if none is registered
+     */
+    getSharedStateProvider(widgetTypeid) {
+        return this.#sharedStateProviders.get(widgetTypeid);
+    }
+    /**
+     * Collect shared states for all widget types currently on the dashboard.
+     * Called during dashboard export/serialization.
+     *
+     * @param activeWidgetTypes Set of widget type IDs that are currently in use
+     * @returns Map of widget type IDs to their shared states
+     */
+    collectSharedStates(activeWidgetTypes) {
+        const sharedStates = new Map();
+        for (const widgetTypeid of activeWidgetTypes) {
+            const provider = this.#sharedStateProviders.get(widgetTypeid);
+            if (provider) {
+                const state = provider.getSharedState();
+                if (state !== undefined) {
+                    sharedStates.set(widgetTypeid, state);
+                }
+            }
+        }
+        return sharedStates;
+    }
+    /**
+     * Restore shared states for widget types.
+     * Called during dashboard import/deserialization, before widget instances are created.
+     *
+     * @param states Map of widget type IDs to their shared states
+     */
+    restoreSharedStates(states) {
+        for (const [widgetTypeid, state] of states) {
+            const provider = this.#sharedStateProviders.get(widgetTypeid);
+            if (provider) {
+                provider.setSharedState(state);
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, providedIn: 'root' });
 }
@@ -366,6 +430,116 @@ function calculateHighlightedZones(dragData, hovered) {
     return zones;
 }
 
+/**
+ * Calculate the minimal bounding box for a set of cells.
+ * Returns the tightest rectangle that contains all the widgets.
+ *
+ * @param cells - The cells to calculate bounds for
+ * @returns The minimal bounding box, or null if no cells
+ */
+function calculateMinimalBoundingBox(cells) {
+    if (cells.length === 0) {
+        return null;
+    }
+    let minRow = Infinity;
+    let maxRow = -Infinity;
+    let minCol = Infinity;
+    let maxCol = -Infinity;
+    for (const cell of cells) {
+        const cellEndRow = cell.row + cell.rowSpan - 1;
+        const cellEndCol = cell.col + cell.colSpan - 1;
+        minRow = Math.min(minRow, cell.row);
+        maxRow = Math.max(maxRow, cellEndRow);
+        minCol = Math.min(minCol, cell.col);
+        maxCol = Math.max(maxCol, cellEndCol);
+    }
+    return {
+        minRow,
+        maxRow,
+        minCol,
+        maxCol,
+    };
+}
+/**
+ * Apply selection filtering to extract cells within specified bounds.
+ * Calculates new grid dimensions and coordinate offsets for export.
+ *
+ * @param selection - The grid selection to filter by
+ * @param allCells - All cells in the dashboard
+ * @param options - Optional filtering options
+ * @returns Filtered cells with export parameters
+ */
+function applySelectionFilter(selection, allCells, options = {}) {
+    // Filter widgets that are completely within the selection bounds
+    const filteredCells = allCells.filter((cell) => {
+        const cellEndRow = cell.row + cell.rowSpan - 1;
+        const cellEndCol = cell.col + cell.colSpan - 1;
+        // Widget must be completely within the selection
+        return cell.row >= selection.topLeft.row &&
+            cell.col >= selection.topLeft.col &&
+            cellEndRow <= selection.bottomRight.row &&
+            cellEndCol <= selection.bottomRight.col;
+    });
+    // Determine the actual bounds to use
+    let actualMinRow;
+    let actualMaxRow;
+    let actualMinCol;
+    let actualMaxCol;
+    if (options.useMinimalBounds && filteredCells.length > 0) {
+        // Calculate minimal bounding box of actual widgets
+        const bounds = calculateMinimalBoundingBox(filteredCells);
+        if (bounds) {
+            actualMinRow = bounds.minRow;
+            actualMaxRow = bounds.maxRow;
+            actualMinCol = bounds.minCol;
+            actualMaxCol = bounds.maxCol;
+        }
+        else {
+            // Fallback to selection bounds (shouldn't happen if filteredCells.length > 0)
+            actualMinRow = selection.topLeft.row;
+            actualMaxRow = selection.bottomRight.row;
+            actualMinCol = selection.topLeft.col;
+            actualMaxCol = selection.bottomRight.col;
+        }
+    }
+    else {
+        // Use selection bounds as-is
+        actualMinRow = selection.topLeft.row;
+        actualMaxRow = selection.bottomRight.row;
+        actualMinCol = selection.topLeft.col;
+        actualMaxCol = selection.bottomRight.col;
+    }
+    // Apply padding if specified (after minimal bounds calculation)
+    const padding = options.padding ?? 0;
+    let desiredMinRow = actualMinRow;
+    let desiredMinCol = actualMinCol;
+    if (padding > 0) {
+        // Calculate desired bounds (may go below 1)
+        desiredMinRow = actualMinRow - padding;
+        const desiredMaxRow = actualMaxRow + padding;
+        desiredMinCol = actualMinCol - padding;
+        const desiredMaxCol = actualMaxCol + padding;
+        // Clamp to grid minimum (1-indexed)
+        actualMinRow = Math.max(1, desiredMinRow);
+        actualMaxRow = desiredMaxRow;
+        actualMinCol = Math.max(1, desiredMinCol);
+        actualMaxCol = desiredMaxCol;
+    }
+    // Calculate new grid dimensions from desired bounds (includes full padding)
+    const exportRows = actualMaxRow - desiredMinRow + 1;
+    const exportColumns = actualMaxCol - desiredMinCol + 1;
+    // Calculate offsets for coordinate transformation (from desired, not clamped)
+    const rowOffset = desiredMinRow - 1;
+    const colOffset = desiredMinCol - 1;
+    return {
+        cells: filteredCells,
+        rows: exportRows,
+        columns: exportColumns,
+        rowOffset,
+        colOffset,
+    };
+}
+
 const initialGridConfigState = {
     rows: 8,
     columns: 16,
@@ -777,31 +951,60 @@ withMethods((store) => ({
         store._endResize(apply, {
             updateWidgetSpan: (cellId, rowSpan, colSpan) => {
                 // Adapter: find widget by cellId and update using widgetId
-                const widget = store.cells().find(c => CellIdUtils.equals(c.cellId, cellId));
+                const widget = store
+                    .cells()
+                    .find((c) => CellIdUtils.equals(c.cellId, cellId));
                 if (widget) {
                     store.updateWidgetSpan(widget.widgetId, rowSpan, colSpan);
                 }
-            }
+            },
         });
     },
     // EXPORT/IMPORT METHODS (need access to multiple features)
-    exportDashboard(getCurrentWidgetStates) {
+    exportDashboard(getCurrentWidgetStates, selection, selectionOptions) {
         // Get live widget states if callback provided, otherwise use stored states
         const liveWidgetStates = getCurrentWidgetStates?.() || new Map();
+        // Determine which widgets to export and grid dimensions
+        let widgetsToExport = store.cells();
+        let exportRows = store.rows();
+        let exportColumns = store.columns();
+        let rowOffset = 0;
+        let colOffset = 0;
+        // Apply selection filtering if specified
+        if (selection) {
+            const selectionResult = applySelectionFilter(selection, store.cells(), selectionOptions);
+            widgetsToExport = selectionResult.cells;
+            exportRows = selectionResult.rows;
+            exportColumns = selectionResult.columns;
+            rowOffset = selectionResult.rowOffset;
+            colOffset = selectionResult.colOffset;
+        }
+        // Collect widget types in use for shared state collection
+        const activeWidgetTypes = new Set(widgetsToExport
+            .filter((cell) => cell.widgetFactory.widgetTypeid !== '__internal/unknown-widget')
+            .map((cell) => cell.widgetFactory.widgetTypeid));
+        // Collect shared states from DashboardService
+        const sharedStatesMap = store.dashboardService.collectSharedStates(activeWidgetTypes);
+        const sharedStates = sharedStatesMap.size > 0
+            ? Object.fromEntries(sharedStatesMap)
+            : undefined;
         return {
-            version: '1.0.0',
+            version: '1.1.0',
             dashboardId: store.dashboardId(),
-            rows: store.rows(),
-            columns: store.columns(),
+            rows: exportRows,
+            columns: exportColumns,
             gutterSize: store.gutterSize(),
-            cells: store.cells()
+            cells: widgetsToExport
                 .filter((cell) => cell.widgetFactory.widgetTypeid !== '__internal/unknown-widget')
                 .map((cell) => {
                 const cellIdString = CellIdUtils.toString(cell.cellId);
                 const currentState = liveWidgetStates.get(cellIdString);
+                // Transform coordinates if selection is specified
+                const exportRow = selection ? cell.row - rowOffset : cell.row;
+                const exportCol = selection ? cell.col - colOffset : cell.col;
                 return {
-                    row: cell.row,
-                    col: cell.col,
+                    row: exportRow,
+                    col: exportCol,
                     rowSpan: cell.rowSpan,
                     colSpan: cell.colSpan,
                     flat: cell.flat,
@@ -809,9 +1012,15 @@ withMethods((store) => ({
                     widgetState: currentState !== undefined ? currentState : cell.widgetState,
                 };
             }),
+            ...(sharedStates && { sharedStates }),
         };
     },
     loadDashboard(data) {
+        // Restore shared states FIRST, before creating widget instances
+        if (data.sharedStates) {
+            const statesMap = new Map(Object.entries(data.sharedStates));
+            store.dashboardService.restoreSharedStates(statesMap);
+        }
         // Import full dashboard data with grid configuration
         const widgetsById = {};
         data.cells.forEach((cellData) => {
@@ -838,34 +1047,6 @@ withMethods((store) => ({
             widgetsById,
         });
     },
-    // INITIALIZATION METHODS
-    initializeFromDto(dashboardData) {
-        // Inline the loadDashboard logic since it's defined later in the same methods block
-        const widgetsById = {};
-        dashboardData.cells.forEach((cellData) => {
-            const factory = store.dashboardService.getFactory(cellData.widgetTypeid);
-            const widgetId = WidgetIdUtils.generate();
-            const cell = {
-                widgetId,
-                cellId: CellIdUtils.create(cellData.row, cellData.col),
-                row: cellData.row,
-                col: cellData.col,
-                rowSpan: cellData.rowSpan,
-                colSpan: cellData.colSpan,
-                flat: cellData.flat,
-                widgetFactory: factory,
-                widgetState: cellData.widgetState,
-            };
-            widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
-        });
-        patchState(store, {
-            dashboardId: dashboardData.dashboardId,
-            rows: dashboardData.rows,
-            columns: dashboardData.columns,
-            gutterSize: dashboardData.gutterSize,
-            widgetsById,
-        });
-    },
 })), 
 // Cross-feature computed properties that depend on resize + widget data (using utility functions)
 withComputed((store) => ({
@@ -973,7 +1154,7 @@ class CellSettingsDialogComponent {
         Apply
       </button>
     </mat-dialog-actions>
-  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] });
+  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
             type: Component,
@@ -1392,13 +1573,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
 
 class DashboardViewerComponent {
     #store = inject(DashboardStore);
+    #renderer = inject(Renderer2);
+    #destroyRef = inject(DestroyRef);
     cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    gridElement = viewChild('gridElement', ...(ngDevMode ? [{ debugName: "gridElement" }] : []));
     rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
     gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
     gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
+    // Selection feature
+    enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : []));
+    selectionComplete = output();
     // store signals - read-only
     cells = this.#store.cells;
+    // Selection state
+    isSelecting = signal(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : []));
+    selectionStart = signal(null, ...(ngDevMode ? [{ debugName: "selectionStart" }] : []));
+    selectionCurrent = signal(null, ...(ngDevMode ? [{ debugName: "selectionCurrent" }] : []));
+    // Computed selection bounds (normalized)
+    selectionBounds = computed(() => {
+        const start = this.selectionStart();
+        const current = this.selectionCurrent();
+        if (!start || !current)
+            return null;
+        return {
+            startRow: Math.min(start.row, current.row),
+            endRow: Math.max(start.row, current.row),
+            startCol: Math.min(start.col, current.col),
+            endCol: Math.max(start.col, current.col),
+        };
+    }, ...(ngDevMode ? [{ debugName: "selectionBounds" }] : []));
+    // Generate array for template iteration
+    rowNumbers = computed(() => Array.from({ length: this.rows() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "rowNumbers" }] : []));
+    colNumbers = computed(() => Array.from({ length: this.columns() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "colNumbers" }] : []));
+    // Document-level event listeners (cleanup needed)
+    #mouseMoveListener;
+    #mouseUpListener;
     constructor() {
         // Sync grid configuration with store when inputs change
         effect(() => {
@@ -1408,32 +1618,101 @@ class DashboardViewerComponent {
                 gutterSize: this.gutterSize(),
             });
         });
+        // Clear selection when selection mode is disabled
+        effect(() => {
+            if (!this.enableSelection()) {
+                this.selectionStart.set(null);
+                this.selectionCurrent.set(null);
+                this.isSelecting.set(false);
+            }
+        });
     }
+    // Selection methods
     /**
-     * Get current widget states from all cell components.
-     * Used during dashboard export to get live widget states.
+     * Check if a cell is within the current selection bounds
      */
-    getCurrentWidgetStates() {
-        const stateMap = new Map();
-        const cells = this.cellComponents();
-        for (const cell of cells) {
-            const cellId = cell.cellId();
-            const currentState = cell.getCurrentWidgetState();
-            if (currentState !== undefined) {
-                stateMap.set(CellIdUtils.toString(cellId), currentState);
-            }
+    isCellSelected(row, col) {
+        const bounds = this.selectionBounds();
+        if (!bounds)
+            return false;
+        return (row >= bounds.startRow &&
+            row <= bounds.endRow &&
+            col >= bounds.startCol &&
+            col <= bounds.endCol);
+    }
+    /**
+     * Handle mouse down on ghost cell to start selection
+     */
+    onGhostCellMouseDown(event, row, col) {
+        if (!this.enableSelection())
+            return;
+        if (event.button !== 0)
+            return; // Only left button
+        event.preventDefault();
+        event.stopPropagation();
+        this.isSelecting.set(true);
+        this.selectionStart.set({ row, col });
+        this.selectionCurrent.set({ row, col });
+        // Add document-level listeners for drag
+        this.#mouseMoveListener = this.#renderer.listen('document', 'mousemove', () => this.onDocumentMouseMove());
+        this.#mouseUpListener = this.#renderer.listen('document', 'mouseup', () => this.onDocumentMouseUp());
+        // Register cleanup
+        this.#destroyRef.onDestroy(() => {
+            this.cleanupListeners();
+        });
+    }
+    /**
+     * Handle mouse enter on ghost cell during selection
+     */
+    onGhostCellMouseEnter(row, col) {
+        if (!this.isSelecting())
+            return;
+        this.selectionCurrent.set({ row, col });
+    }
+    /**
+     * Handle document mouse move during selection
+     */
+    onDocumentMouseMove() {
+        if (!this.isSelecting())
+            return;
+        // The actual selection update is handled by onGhostCellMouseEnter
+        // This just ensures we capture the event
+    }
+    /**
+     * Handle document mouse up to complete selection
+     */
+    onDocumentMouseUp() {
+        if (!this.isSelecting())
+            return;
+        this.isSelecting.set(false);
+        // Emit selection event
+        const bounds = this.selectionBounds();
+        if (bounds) {
+            this.selectionComplete.emit({
+                topLeft: { row: bounds.startRow, col: bounds.startCol },
+                bottomRight: { row: bounds.endRow, col: bounds.endCol },
+            });
         }
-        return stateMap;
+        // Clean up listeners
+        this.cleanupListeners();
+        // Don't clear selection - let the parent control when to clear
+        // Selection remains visible until enableSelection becomes false
     }
     /**
-     * Export dashboard with live widget states from current component instances.
-     * This ensures the most up-to-date widget states are captured.
+     * Clean up document-level event listeners
      */
-    exportDashboard() {
-        return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
+    cleanupListeners() {
+        if (this.#mouseMoveListener) {
+            this.#mouseMoveListener();
+            this.#mouseMoveListener = undefined;
+        }
+        if (this.#mouseUpListener) {
+            this.#mouseUpListener();
+            this.#mouseUpListener = undefined;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\" #gridElement>\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n\r\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\r\n@if (enableSelection()) {\r\n  <div class=\"selection-overlay-grid\">\r\n    @for (row of rowNumbers(); track row) {\r\n      @for (col of colNumbers(); track col) {\r\n        <div\r\n          class=\"selection-ghost-cell\"\r\n          [class.selected]=\"isCellSelected(row, col)\"\r\n          [class.selecting]=\"isSelecting()\"\r\n          [style.grid-row]=\"row\"\r\n          [style.grid-column]=\"col\"\r\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\r\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n}\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;position:relative;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}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, decorators: [{
             type: Component,
@@ -1442,12 +1721,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[style.--columns]': 'columns()',
                         '[style.--gutter-size]': 'gutterSize()',
                         '[style.--gutters]': 'gutters()',
-                    }, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"] }]
+                    }, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\" #gridElement>\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n\r\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\r\n@if (enableSelection()) {\r\n  <div class=\"selection-overlay-grid\">\r\n    @for (row of rowNumbers(); track row) {\r\n      @for (col of colNumbers(); track col) {\r\n        <div\r\n          class=\"selection-ghost-cell\"\r\n          [class.selected]=\"isCellSelected(row, col)\"\r\n          [class.selecting]=\"isSelecting()\"\r\n          [style.grid-row]=\"row\"\r\n          [style.grid-column]=\"col\"\r\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\r\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n}\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;position:relative;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}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"] }]
         }], ctorParameters: () => [] });
 
 class CellContextMenuComponent {
     menuTrigger = viewChild.required('menuTrigger', { read: MatMenuTrigger });
     menuService = inject(CellContextMenuService);
+    #renderer = inject(Renderer2);
+    #destroyRef = inject(DestroyRef);
     menuPosition = computed(() => {
         const menu = this.menuService.activeMenu();
         return menu ? { left: `${menu.x}px`, top: `${menu.y}px` } : { left: '0px', top: '0px' };
@@ -1457,6 +1738,23 @@ class CellContextMenuComponent {
         return menu?.items || [];
     }, ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
     constructor() {
+        // Material Menu has a backdrop that blocks events from reaching other elements.
+        // When any right-click occurs while menu is open, we need to:
+        // 1. Close the current menu
+        // 2. Prevent the browser's default context menu
+        //
+        // Users will need to right-click again to open empty cell menus.
+        // This follows standard UX patterns used by most applications.
+        const unlisten = this.#renderer.listen('document', 'contextmenu', (event) => {
+            if (this.menuService.activeMenu()) {
+                // Prevent browser's default context menu when closing widget menu
+                event.preventDefault();
+                this.menuService.hide();
+            }
+        });
+        this.#destroyRef.onDestroy(() => {
+            unlisten();
+        });
         effect(() => {
             const menu = this.menuService.activeMenu();
             if (menu) {
@@ -1552,7 +1850,7 @@ class CellContextMenuComponent {
         }
       }
     </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 });
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, decorators: [{
             type: Component,
@@ -1611,6 +1909,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
   `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [] });
 
+/**
+ * Abstract provider for handling context menu events on empty dashboard cells.
+ * Implement this to provide custom behavior when users right-click on unoccupied grid spaces.
+ *
+ * @example
+ * ```typescript
+ * @Injectable()
+ * export class CustomEmptyCellProvider extends EmptyCellContextProvider {
+ *   handleEmptyCellContext(event: MouseEvent, context: EmptyCellContext): void {
+ *     event.preventDefault();
+ *     // Show custom menu, open dialog, etc.
+ *   }
+ * }
+ * ```
+ */
+class EmptyCellContextProvider {
+}
+
+/**
+ * Default empty cell context provider that prevents the browser's context menu
+ * and performs no other action.
+ *
+ * This is the default behavior that allows users to right-click on empty dashboard
+ * cells without triggering the browser's default context menu.
+ */
+class DefaultEmptyCellContextProvider extends EmptyCellContextProvider {
+    /**
+     * Default empty cell context handler.
+     * The browser context menu is already prevented by the component.
+     * No additional action is taken by default.
+     */
+    handleEmptyCellContext() {
+        // Default behavior: do nothing
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Injection token for the empty cell context provider.
+ * Use this to provide your custom implementation for handling right-clicks on empty dashboard cells.
+ *
+ * @example
+ * ```typescript
+ * // Provide a custom implementation
+ * providers: [
+ *   {
+ *     provide: EMPTY_CELL_CONTEXT_PROVIDER,
+ *     useClass: MyCustomEmptyCellProvider
+ *   }
+ * ]
+ * ```
+ */
+const EMPTY_CELL_CONTEXT_PROVIDER = new InjectionToken('EmptyCellContextProvider', {
+    providedIn: 'root',
+    factory: () => new DefaultEmptyCellContextProvider(),
+});
+
+/**
+ * Service for managing empty cell context menu state.
+ * Similar to CellContextMenuService but specifically for empty cells.
+ *
+ * This service is internal to the library and manages the display state
+ * of the context menu that appears when right-clicking on empty dashboard cells.
+ */
+class EmptyCellContextMenuService {
+    #activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : []));
+    #lastSelectedWidgetTypeId = signal(null, ...(ngDevMode ? [{ debugName: "#lastSelectedWidgetTypeId" }] : []));
+    activeMenu = this.#activeMenu.asReadonly();
+    lastSelectedWidgetTypeId = this.#lastSelectedWidgetTypeId.asReadonly();
+    /**
+     * Show the context menu at specific coordinates with given items.
+     *
+     * @param x - X coordinate (clientX from mouse event)
+     * @param y - Y coordinate (clientY from mouse event)
+     * @param items - Menu items to display
+     */
+    show(x, y, items) {
+        this.#activeMenu.set({ x, y, items });
+    }
+    /**
+     * Hide the context menu.
+     */
+    hide() {
+        this.#activeMenu.set(null);
+    }
+    /**
+     * Set the last selected widget type ID for quick-repeat functionality.
+     * Pass null to clear the last selection.
+     *
+     * @param widgetTypeId - The widget type identifier, or null to clear
+     */
+    setLastSelection(widgetTypeId) {
+        this.#lastSelectedWidgetTypeId.set(widgetTypeId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Context provider that displays a widget list menu when right-clicking on empty cells.
+ *
+ * This provider shows a Material Design context menu with all available widget types.
+ * When a user clicks on a widget in the menu, it's immediately added to the empty cell.
+ *
+ * @example
+ * ```typescript
+ * // In your component or app config
+ * providers: [
+ *   {
+ *     provide: EMPTY_CELL_CONTEXT_PROVIDER,
+ *     useClass: WidgetListContextMenuProvider
+ *   }
+ * ]
+ * ```
+ *
+ * @public
+ */
+class WidgetListContextMenuProvider extends EmptyCellContextProvider {
+    #menuService = inject(EmptyCellContextMenuService);
+    #dashboardService = inject(DashboardService);
+    /**
+     * Handle empty cell context menu by showing available widgets.
+     *
+     * @param event - The mouse event from the right-click
+     * @param context - Information about the empty cell and dashboard
+     */
+    handleEmptyCellContext(event, context) {
+        event.preventDefault();
+        // Get available widgets from dashboard service
+        const widgets = this.#dashboardService.widgetTypes();
+        // Create menu items from widgets
+        const items = this.#createMenuItems(widgets, context);
+        // Show the context menu at mouse coordinates
+        this.#menuService.show(event.clientX, event.clientY, items);
+    }
+    /**
+     * Create menu items from available widget types.
+     * Each item includes the widget's icon and display name.
+     * If a widget was previously selected, it appears first as a quick-repeat option.
+     *
+     * @param widgets - Array of widget component classes
+     * @param context - The empty cell context with createWidget callback
+     * @returns Array of menu items ready for display
+     */
+    #createMenuItems(widgets, context) {
+        if (widgets.length === 0) {
+            // Show a message if no widgets are registered
+            return [
+                {
+                    label: $localize `:@@ngx.dashboard.emptyCellMenu.noWidgets:No widgets available`,
+                    disabled: true,
+                    action: () => {
+                        // No action needed
+                    },
+                },
+            ];
+        }
+        // Build standard menu items with widgetTypeId
+        const allItems = widgets.map((widget) => ({
+            label: widget.metadata.name,
+            svgIcon: widget.metadata.svgIcon,
+            widgetTypeId: widget.metadata.widgetTypeid,
+            action: () => this.#createWidget(widget.metadata.widgetTypeid, context),
+        }));
+        // Check if there's a last selected widget to show as quick-repeat
+        const lastSelectedTypeId = this.#menuService.lastSelectedWidgetTypeId();
+        if (!lastSelectedTypeId) {
+            return allItems;
+        }
+        // Find the last selected widget in the list
+        const lastSelectedWidget = widgets.find((w) => w.metadata.widgetTypeid === lastSelectedTypeId);
+        if (!lastSelectedWidget) {
+            // Last selected widget no longer available, return normal list
+            return allItems;
+        }
+        // Create quick-repeat item (duplicate of the last selected widget)
+        const quickRepeatItem = {
+            label: lastSelectedWidget.metadata.name,
+            svgIcon: lastSelectedWidget.metadata.svgIcon,
+            widgetTypeId: lastSelectedWidget.metadata.widgetTypeid,
+            action: () => this.#createWidget(lastSelectedWidget.metadata.widgetTypeid, context),
+        };
+        // Create divider
+        const divider = { divider: true };
+        // Return special structure: [quick-repeat, divider, full list]
+        return [quickRepeatItem, divider, ...allItems];
+    }
+    /**
+     * Create a widget at the empty cell position.
+     * Uses the createWidget callback provided in the context.
+     *
+     * @param widgetTypeid - The widget type identifier to create
+     * @param context - The empty cell context with createWidget callback
+     */
+    #createWidget(widgetTypeid, context) {
+        if (context.createWidget) {
+            const success = context.createWidget(widgetTypeid);
+            if (!success) {
+                console.error(`Failed to create widget '${widgetTypeid}' at (${context.row}, ${context.col})`);
+            }
+        }
+        else {
+            console.warn('createWidget callback not available in EmptyCellContext. ' +
+                'Ensure you are using a compatible version of the dashboard component.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListContextMenuProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
+            type: Injectable
+        }] });
+
 // drop-zone.component.ts
 class DropZoneComponent {
     // Required inputs
@@ -1645,6 +2169,10 @@ class DropZoneComponent {
     }, ...(ngDevMode ? [{ debugName: "dropEffect" }] : []));
     #store = inject(DashboardStore);
     #elementRef = inject(ElementRef);
+    #dashboardService = inject(DashboardService);
+    #contextProvider = inject(EMPTY_CELL_CONTEXT_PROVIDER, {
+        optional: true,
+    });
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
@@ -1689,14 +2217,267 @@ class DropZoneComponent {
             });
         }
     }
+    /**
+     * Handle context menu events on empty cells.
+     * Only active in edit mode. Delegates to the context provider if available.
+     */
+    onContextMenu(event) {
+        if (!this.editMode())
+            return;
+        // Prevent default browser menu and stop propagation in edit mode
+        // stopPropagation prevents the event from reaching the document-level
+        // listener in EmptyCellContextMenuComponent which would immediately hide the menu
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.#contextProvider) {
+            this.#contextProvider.handleEmptyCellContext(event, {
+                row: this.row(),
+                col: this.col(),
+                totalRows: this.#store.rows(),
+                totalColumns: this.#store.columns(),
+                gutterSize: this.#store.gutterSize(),
+                createWidget: (widgetTypeid) => {
+                    const factory = this.#dashboardService.getFactory(widgetTypeid);
+                    this.#store.createWidget(this.row(), this.col(), factory, undefined);
+                    return true; // Widget created successfully
+                },
+            });
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropZoneComponent, isStandalone: true, selector: "lib-drop-zone", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, highlightInvalid: { classPropertyName: "highlightInvalid", publicName: "highlightInvalid", isSignal: true, isRequired: false, transformFunction: null }, highlightResize: { classPropertyName: "highlightResize", publicName: "highlightResize", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnter: "dragEnter", dragExit: "dragExit", dragOver: "dragOver", dragDrop: "dragDrop" }, ngImport: i0, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropZoneComponent, isStandalone: true, selector: "lib-drop-zone", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, highlightInvalid: { classPropertyName: "highlightInvalid", publicName: "highlightInvalid", isSignal: true, isRequired: false, transformFunction: null }, highlightResize: { classPropertyName: "highlightResize", publicName: "highlightResize", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnter: "dragEnter", dragExit: "dragExit", dragOver: "dragOver", dragDrop: "dragDrop" }, ngImport: i0, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n  (contextmenu)=\"onContextMenu($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;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-drop-zone', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;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"] }]
+            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  (contextmenu)=\"onContextMenu($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;line-height:1.1;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"] }]
         }] });
 
+/**
+ * Context menu component for empty dashboard cells.
+ * Displays a list of available widgets that can be added to the empty cell.
+ *
+ * This component is similar to CellContextMenuComponent but designed specifically
+ * for empty cells and includes support for SVG icons from widget metadata.
+ *
+ * @internal This component is for internal library use only
+ */
+class EmptyCellContextMenuComponent {
+    menuTrigger = viewChild.required('menuTrigger', { read: MatMenuTrigger });
+    menuService = inject(EmptyCellContextMenuService);
+    #sanitizer = inject(DomSanitizer);
+    #renderer = inject(Renderer2);
+    #destroyRef = inject(DestroyRef);
+    menuPosition = computed(() => {
+        const menu = this.menuService.activeMenu();
+        return menu
+            ? { left: `${menu.x}px`, top: `${menu.y}px` }
+            : { left: '0px', top: '0px' };
+    }, ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
+    menuItems = computed(() => {
+        const menu = this.menuService.activeMenu();
+        return menu?.items || [];
+    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    constructor() {
+        // Material Menu has a backdrop that blocks events from reaching other elements.
+        // When any right-click occurs while menu is open, we need to:
+        // 1. Close the current menu
+        // 2. Prevent the browser's default context menu
+        //
+        // Users will need to right-click again to open empty cell menus.
+        // This follows standard UX patterns used by most applications.
+        const unlisten = this.#renderer.listen('document', 'contextmenu', (event) => {
+            if (this.menuService.activeMenu()) {
+                // Prevent browser's default context menu when closing widget menu
+                event.preventDefault();
+                this.menuService.hide();
+            }
+        });
+        this.#destroyRef.onDestroy(() => {
+            unlisten();
+        });
+        // Show menu when service state changes
+        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();
+                }
+            }
+        });
+        // Subscribe to menu closed event once when trigger becomes available
+        // This ensures the service state is synchronized when Material menu closes
+        effect((onCleanup) => {
+            const trigger = this.menuTrigger();
+            if (trigger) {
+                const subscription = trigger.menuClosed.subscribe(() => {
+                    if (this.menuService.activeMenu()) {
+                        this.menuService.hide();
+                    }
+                });
+                // Clean up subscription when effect re-runs or component destroys
+                onCleanup(() => subscription.unsubscribe());
+            }
+        });
+    }
+    executeAction(item) {
+        if (!item.divider && item.action) {
+            // Track widget type if provided
+            if (item.widgetTypeId) {
+                this.menuService.setLastSelection(item.widgetTypeId);
+            }
+            item.action();
+            this.menuService.hide();
+        }
+    }
+    sanitizeSvg(svg) {
+        return this.#sanitizer.bypassSecurityTrustHtml(svg);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: EmptyCellContextMenuComponent, isStandalone: true, selector: "lib-empty-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 empty cell context provider'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 with widget list -->
+    <mat-menu
+      #contextMenu="matMenu"
+      [overlapTrigger]="true"
+      class="empty-cell-widget-menu">
+      @for (item of menuItems(); track $index) {
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        } @else {
+          <button
+            mat-menu-item
+            (click)="executeAction(item)"
+            [disabled]="item.disabled"
+            [attr.aria-label]="item.label">
+            @if (item.svgIcon) {
+              <div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
+            } @else if (item.icon) {
+              <mat-icon>{{ item.icon }}</mat-icon>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </mat-menu>
+  `, isInline: true, styles: [":host{display:contents}.empty-cell-widget-menu{max-height:400px;overflow-y:auto}.widget-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}.widget-icon :deep(svg){width:20px;height:20px;fill:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-empty-cell-context-menu', standalone: true, imports: [
+                        MatMenuModule,
+                        MatIconModule,
+                        MatDividerModule,
+                        MatButtonModule,
+                        CommonModule,
+                    ], 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 empty cell context provider'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 with widget list -->
+    <mat-menu
+      #contextMenu="matMenu"
+      [overlapTrigger]="true"
+      class="empty-cell-widget-menu">
+      @for (item of menuItems(); track $index) {
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        } @else {
+          <button
+            mat-menu-item
+            (click)="executeAction(item)"
+            [disabled]="item.disabled"
+            [attr.aria-label]="item.label">
+            @if (item.svgIcon) {
+              <div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
+            } @else if (item.icon) {
+              <mat-icon>{{ item.icon }}</mat-icon>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </mat-menu>
+  `, styles: [":host{display:contents}.empty-cell-widget-menu{max-height:400px;overflow-y:auto}.widget-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}.widget-icon :deep(svg){width:20px;height:20px;fill:currentColor}\n"] }]
+        }], ctorParameters: () => [] });
+
 // dashboard-editor.component.ts
 class DashboardEditorComponent {
     bottomGridRef = viewChild.required('bottomGrid');
@@ -1802,33 +2583,10 @@ class DashboardEditorComponent {
         this.#store.handleDrop(event.data, event.target);
         // Note: Store handles all validation and error handling internally
     }
-    /**
-     * Get current widget states from all cell components.
-     * Used during dashboard export to get live widget states.
-     */
-    getCurrentWidgetStates() {
-        const stateMap = new Map();
-        const cells = this.cellComponents();
-        for (const cell of cells) {
-            const cellId = cell.cellId();
-            const currentState = cell.getCurrentWidgetState();
-            if (currentState !== undefined) {
-                stateMap.set(CellIdUtils.toString(cellId), currentState);
-            }
-        }
-        return stateMap;
-    }
-    /**
-     * Export dashboard with live widget states from current component instances.
-     * This ensures the most up-to-date widget states are captured.
-     */
-    exportDashboard() {
-        return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardEditorComponent, isStandalone: true, selector: "ngx-dashboard-editor", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()", "class.is-edit-mode": "true" } }, providers: [
             CellContextMenuService,
-        ], viewQueries: [{ propertyName: "bottomGridRef", first: true, predicate: ["bottomGrid"], descendants: true, isSignal: true }, { propertyName: "dropZones", predicate: DropZoneComponent, descendants: true, isSignal: true }, { propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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 -->\r\n<div class=\"grid-container\">\r\n  <!-- Bottom grid with drop zones -->\r\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\r\n    @for (position of dropzonePositions(); track position.id) {\r\n    <lib-drop-zone\r\n      class=\"drop-zone\"\r\n      [row]=\"position.row\"\r\n      [col]=\"position.col\"\r\n      [index]=\"position.index\"\r\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\r\n      [highlightInvalid]=\"\r\n        invalidHighlightMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [highlightResize]=\"\r\n        resizePreviewMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [editMode]=\"true\"\r\n      (dragEnter)=\"onDragEnter($event)\"\r\n      (dragExit)=\"onDragExit()\"\r\n      (dragOver)=\"onDragOver($event)\"\r\n      (dragDrop)=\"onDragDrop($event)\"\r\n    ></lib-drop-zone>\r\n    }\r\n  </div>\r\n\r\n  <!-- Top grid with interactive cells -->\r\n  <div class=\"grid\" id=\"top-grid\">\r\n    @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"true\"\r\n      [draggable]=\"true\"\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      (dragStart)=\"onCellDragStart($event)\"\r\n      (dragEnd)=\"dragEnd()\"\r\n      (delete)=\"onCellDelete($event)\"\r\n      (settings)=\"onCellSettings($event)\"\r\n      (resizeStart)=\"onCellResizeStart($event)\"\r\n      (resizeMove)=\"onCellResizeMove($event)\"\r\n      (resizeEnd)=\"onCellResizeEnd($event)\"\r\n    >\r\n    </lib-cell>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Context menus -->\r\n<lib-cell-context-menu></lib-cell-context-menu>\r\n<lib-empty-cell-context-menu></lib-empty-cell-context-menu>\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}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }, { kind: "component", type: EmptyCellContextMenuComponent, selector: "lib-empty-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardEditorComponent, decorators: [{
             type: Component,
@@ -1837,6 +2595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         CommonModule,
                         DropZoneComponent,
                         CellContextMenuComponent,
+                        EmptyCellContextMenuComponent,
                     ], providers: [
                         CellContextMenuService,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -1845,7 +2604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[style.--gutter-size]': 'gutterSize()',
                         '[style.--gutters]': 'gutters()',
                         '[class.is-edit-mode]': 'true', // Always in edit mode
-                    }, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"] }]
+                    }, template: "<!-- dashboard-editor.component.html -->\r\n<div class=\"grid-container\">\r\n  <!-- Bottom grid with drop zones -->\r\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\r\n    @for (position of dropzonePositions(); track position.id) {\r\n    <lib-drop-zone\r\n      class=\"drop-zone\"\r\n      [row]=\"position.row\"\r\n      [col]=\"position.col\"\r\n      [index]=\"position.index\"\r\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\r\n      [highlightInvalid]=\"\r\n        invalidHighlightMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [highlightResize]=\"\r\n        resizePreviewMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [editMode]=\"true\"\r\n      (dragEnter)=\"onDragEnter($event)\"\r\n      (dragExit)=\"onDragExit()\"\r\n      (dragOver)=\"onDragOver($event)\"\r\n      (dragDrop)=\"onDragDrop($event)\"\r\n    ></lib-drop-zone>\r\n    }\r\n  </div>\r\n\r\n  <!-- Top grid with interactive cells -->\r\n  <div class=\"grid\" id=\"top-grid\">\r\n    @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"true\"\r\n      [draggable]=\"true\"\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      (dragStart)=\"onCellDragStart($event)\"\r\n      (dragEnd)=\"dragEnd()\"\r\n      (delete)=\"onCellDelete($event)\"\r\n      (settings)=\"onCellSettings($event)\"\r\n      (resizeStart)=\"onCellResizeStart($event)\"\r\n      (resizeMove)=\"onCellResizeMove($event)\"\r\n      (resizeEnd)=\"onCellResizeEnd($event)\"\r\n    >\r\n    </lib-cell>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Context menus -->\r\n<lib-cell-context-menu></lib-cell-context-menu>\r\n<lib-empty-cell-context-menu></lib-empty-cell-context-menu>\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}: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
@@ -2108,6 +2867,7 @@ class DashboardComponent {
     #store = inject(DashboardStore);
     #bridge = inject(DashboardBridgeService);
     #viewport = inject(DashboardViewportService);
+    #emptyCellMenuService = inject(EmptyCellContextMenuService);
     #destroyRef = inject(DestroyRef);
     // Public accessors for template
     store = this.#store;
@@ -2116,6 +2876,9 @@ class DashboardComponent {
     dashboardData = input.required(...(ngDevMode ? [{ debugName: "dashboardData" }] : []));
     editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
     reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : []));
+    enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : []));
+    // Component outputs
+    selectionComplete = output();
     // Store signals - shared by both child components
     cells = this.#store.cells;
     // ViewChild references for export/import functionality
@@ -2134,7 +2897,7 @@ class DashboardComponent {
         effect(() => {
             const data = this.dashboardData();
             if (data) {
-                this.#store.initializeFromDto(data);
+                this.#store.loadDashboard(data);
                 // Register with bridge service after dashboard ID is set
                 this.#bridge.updateDashboardRegistration(this.#store);
                 this.#isInitialized = true;
@@ -2154,6 +2917,16 @@ class DashboardComponent {
                 this.#viewport.setReservedSpace(reserved);
             }
         });
+        // Reset last widget selection when exiting edit mode
+        effect(() => {
+            const isEditMode = this.editMode();
+            if (!isEditMode) {
+                // Reset last selection when exiting edit mode
+                untracked(() => {
+                    this.#emptyCellMenuService.setLastSelection(null);
+                });
+            }
+        });
     }
     ngOnChanges(changes) {
         // Handle edit mode changes after initialization
@@ -2168,17 +2941,30 @@ class DashboardComponent {
             }
         }
     }
-    // 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();
+    /**
+     * Get current widget states from all cell components.
+     * Used during dashboard export to get live widget states.
+     */
+    getCurrentWidgetStates() {
+        const stateMap = new Map();
+        // Get cell components from the active child
+        const cells = this.editMode()
+            ? this.dashboardEditor()?.cellComponents()
+            : this.dashboardViewer()?.cellComponents();
+        if (cells) {
+            for (const cell of cells) {
+                const cellId = cell.cellId();
+                const currentState = cell.getCurrentWidgetState();
+                if (currentState !== undefined) {
+                    stateMap.set(CellIdUtils.toString(cellId), currentState);
+                }
+            }
         }
+        return stateMap;
+    }
+    exportDashboard(selection, options) {
+        // Export dashboard with live widget states, optionally filtering by selection
+        return this.#store.exportDashboard(() => this.getCurrentWidgetStates(), selection, options);
     }
     loadDashboard(data) {
         this.#store.loadDashboard(data);
@@ -2200,25 +2986,24 @@ class DashboardComponent {
         }
         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();
+            const stateMap = new Map();
+            // Get cell components from the previously active child
+            const cells = previousEditMode
+                ? this.dashboardEditor()?.cellComponents()
+                : this.dashboardViewer()?.cellComponents();
+            if (cells) {
+                for (const cell of cells) {
+                    const cellId = cell.cellId();
+                    const currentState = cell.getCurrentWidgetState();
+                    if (currentState !== undefined) {
+                        stateMap.set(CellIdUtils.toString(cellId), currentState);
+                    }
                 }
             }
             // Update the store with the live widget states using untracked to avoid triggering effects
-            if (currentWidgetStates && currentWidgetStates.size > 0) {
+            if (stateMap.size > 0) {
                 untracked(() => {
-                    this.#store.updateAllWidgetStates(currentWidgetStates);
+                    this.#store.updateAllWidgetStates(stateMap);
                 });
             }
         }
@@ -2227,7 +3012,7 @@ class DashboardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, 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    [enableSelection]=\"enableSelection()\"\r\n    (selectionComplete)=\"selectionComplete.emit($event)\"\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", "enableSelection"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
@@ -2239,7 +3024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[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"] }]
+                    }, 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    [enableSelection]=\"enableSelection()\"\r\n    (selectionComplete)=\"selectionComplete.emit($event)\"\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
@@ -2248,6 +3033,8 @@ class WidgetListComponent {
     #sanitizer = inject(DomSanitizer);
     #renderer = inject(Renderer2);
     #bridge = inject(DashboardBridgeService);
+    // Input to track collapsed state for tooltip display
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     activeWidget = signal(null, ...(ngDevMode ? [{ debugName: "activeWidget" }] : []));
     // Get grid cell dimensions from bridge service (uses first available dashboard)
     gridCellDimensions = this.#bridge.availableDimensions;
@@ -2307,21 +3094,21 @@ class WidgetListComponent {
         return $localize `:@@ngx.dashboard.widget.list.item.ariaLabel:${widget.name} widget: ${widget.description}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div\r\n  class=\"widget-list\"\r\n  role=\"list\"\r\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\r\n  aria-label=\"Available widgets\"\r\n>\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div\r\n  class=\"widget-list\"\r\n  role=\"list\"\r\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\r\n  aria-label=\"Available widgets\"\r\n>\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\r\n    [matTooltip]=\"widget.description\"\r\n    [matTooltipDisabled]=\"!collapsed()\"\r\n    matTooltipPosition=\"right\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\r\n<div\r\n  class=\"widget-list\"\r\n  role=\"list\"\r\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\r\n  aria-label=\"Available widgets\"\r\n>\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
+            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\r\n<div\r\n  class=\"widget-list\"\r\n  role=\"list\"\r\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\r\n  aria-label=\"Available widgets\"\r\n>\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\r\n    [matTooltip]=\"widget.description\"\r\n    [matTooltipDisabled]=\"!collapsed()\"\r\n    matTooltipPosition=\"right\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
         }] });
 
 /*
  * Public API Surface of ngx-dashboard
  */
-// Main dashboard components
+// Library version
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CELL_SETTINGS_DIALOG_PROVIDER, CellSettingsDialogProvider, DashboardComponent, DashboardService, DefaultCellSettingsDialogProvider, WidgetListComponent, createDefaultDashboard, createEmptyDashboard };
+export { CELL_SETTINGS_DIALOG_PROVIDER, CellSettingsDialogProvider, DashboardComponent, DashboardService, DefaultCellSettingsDialogProvider, DefaultEmptyCellContextProvider, EMPTY_CELL_CONTEXT_PROVIDER, EmptyCellContextProvider, NGX_DASHBOARD_VERSION, WidgetListComponent, WidgetListContextMenuProvider, createDefaultDashboard, createEmptyDashboard };
 //# sourceMappingURL=dragonworks-ngx-dashboard.mjs.map