@dragonworks/ngx-dashboard 20.0.5 → 20.1.0

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -1,15 +1,15 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, ChangeDetectionStrategy, Component, Injectable, inject, Inject, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, ElementRef, effect, viewChildren, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
+import { signal, computed, ChangeDetectionStrategy, Component, Injectable, inject, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, effect, viewChildren, ElementRef, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
 import { signalStoreFeature, withState, withMethods, patchState, withComputed, signalStore, withProps } from '@ngrx/signals';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i2$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { firstValueFrom } from 'rxjs';
-import * as i2$1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -93,6 +93,65 @@ const CellIdUtils = {
     },
 };
 
+/**
+ * Utility functions for working with WidgetId branded type.
+ * WidgetIds are UUIDs that uniquely identify widget instances throughout their lifecycle,
+ * independent of their position on the dashboard grid.
+ */
+const WidgetIdUtils = {
+    /**
+     * Generates a new unique WidgetId.
+     * Uses crypto.randomUUID() when available, falls back to timestamp-based ID for older browsers.
+     * @returns A new unique WidgetId
+     */
+    generate() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback for older browsers
+        return `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    },
+    /**
+     * Validates if a string is a valid WidgetId format.
+     * @param id - The string to validate
+     * @returns True if the string is a valid WidgetId format
+     */
+    validate(id) {
+        // UUID v4 format or fallback format
+        return (/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id) ||
+            /^widget-\d+-[a-z0-9]{9}$/i.test(id));
+    },
+    /**
+     * Converts a WidgetId to a string for use as map keys or serialization.
+     * @param id - The WidgetId to convert
+     * @returns The string representation of the WidgetId
+     */
+    toString(id) {
+        return id;
+    },
+    /**
+     * Creates a WidgetId from a string, validating the format.
+     * @param str - The string to convert to WidgetId
+     * @returns A WidgetId
+     * @throws Error if the string is not a valid WidgetId format
+     */
+    fromString(str) {
+        if (!this.validate(str)) {
+            throw new Error(`Invalid WidgetId format: ${str}`);
+        }
+        return str;
+    },
+    /**
+     * Checks if two WidgetIds are equal.
+     * @param a - First WidgetId
+     * @param b - Second WidgetId
+     * @returns True if the WidgetIds are the same
+     */
+    equals(a, b) {
+        return a === b;
+    },
+};
+
 /**
  * Creates an empty dashboard configuration with the specified dimensions.
  * This is a convenience function for creating a basic dashboard without any cells.
@@ -165,8 +224,8 @@ class UnknownWidgetComponent {
     };
     state = signal({
         originalWidgetTypeid: 'unknown',
-    });
-    tooltipText = computed(() => `${this.state().originalWidgetTypeid}`);
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    tooltipText = computed(() => `${this.state().originalWidgetTypeid}`, ...(ngDevMode ? [{ debugName: "tooltipText" }] : []));
     dashboardSetState(state) {
         if (state && typeof state === 'object' && 'originalWidgetTypeid' in state) {
             this.state.set(state);
@@ -175,14 +234,14 @@ class UnknownWidgetComponent {
     dashboardGetState() {
         return this.state();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
     <div class="unknown-widget-container" [matTooltip]="tooltipText()">
       <mat-icon class="unknown-widget-icon">error_outline</mat-icon>
     </div>
   `, isInline: true, styles: [".unknown-widget-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mat-sys-error);border-radius:8px;container-type:size}.unknown-widget-icon{color:var(--mat-sys-on-error);font-size:clamp(12px,75cqmin,68px);width:clamp(12px,75cqmin,68px);height:clamp(12px,75cqmin,68px)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-unknown-widget', imports: [MatIconModule, MatTooltipModule], template: `
     <div class="unknown-widget-container" [matTooltip]="tooltipText()">
@@ -193,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 // dashboard.service.ts
 class DashboardService {
-    #widgetTypes = signal([]);
+    #widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : []));
     #widgetFactoryMap = new Map();
     #unknownWidgetFactory = createFactoryFromComponent(UnknownWidgetComponent);
     widgetTypes = this.#widgetTypes.asReadonly(); // make the widget list available as a readonly signal
@@ -217,16 +276,16 @@ class DashboardService {
             createInstance: (container, state) => {
                 const ref = this.#unknownWidgetFactory.createInstance(container, {
                     originalWidgetTypeid: widgetTypeid,
-                    ...(state || {}),
+                    ...(state && typeof state === 'object' ? state : {}),
                 });
                 return ref;
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -235,10 +294,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 
 // Internal utility functions used by collision detection, resize logic, and tests
 const GridQueryInternalUtils = {
-    isCellOccupied(cells, row, col, excludeId) {
+    isCellOccupied(cells, row, col, excludeWidgetId) {
         return cells.some((cell) => {
-            // Skip checking against the cell being dragged
-            if (excludeId && CellIdUtils.equals(cell.cellId, excludeId))
+            // Skip checking against the widget being dragged (use widgetId for stable identity)
+            if (excludeWidgetId && cell.widgetId === excludeWidgetId)
                 return false;
             const endRow = cell.row + cell.rowSpan - 1;
             const endCol = cell.col + cell.colSpan - 1;
@@ -276,9 +335,9 @@ function calculateCollisionInfo(dragData, hovered, cells, rows, columns) {
             footprint.push({ row: hovered.row + r, col: hovered.col + c });
         }
     }
-    const excludeId = isCell ? dragData.content.cellId : undefined;
+    const excludeWidgetId = isCell ? dragData.content.widgetId : undefined;
     // Check for actual collisions with other widgets (not self)
-    const hasCollisions = footprint.some((pos) => GridQueryInternalUtils.isCellOccupied(cells, pos.row, pos.col, excludeId));
+    const hasCollisions = footprint.some((pos) => GridQueryInternalUtils.isCellOccupied(cells, pos.row, pos.col, excludeWidgetId));
     // Generate invalid cell IDs
     const invalidCells = [];
     if (hasCollisions || outOfBounds) {
@@ -330,39 +389,44 @@ const withGridConfig = () => signalStoreFeature(withState(initialGridConfigState
 })));
 
 const initialWidgetManagementState = {
-    cellsById: {},
+    widgetsById: {},
 };
 const withWidgetManagement = () => signalStoreFeature(withState(initialWidgetManagementState), 
 // Computed cells array - lazy evaluation, automatic memoization
 withComputed((store) => ({
-    cells: computed(() => Object.values(store.cellsById())),
+    cells: computed(() => Object.values(store.widgetsById())),
 })), withMethods((store) => ({
     addWidget(cell) {
-        const cellKey = CellIdUtils.toString(cell.cellId);
+        const widgetKey = WidgetIdUtils.toString(cell.widgetId);
         patchState(store, {
-            cellsById: { ...store.cellsById(), [cellKey]: cell },
+            widgetsById: { ...store.widgetsById(), [widgetKey]: cell },
         });
     },
-    removeWidget(cellId) {
-        const cellKey = CellIdUtils.toString(cellId);
-        const { [cellKey]: removed, ...remaining } = store.cellsById();
-        patchState(store, { cellsById: remaining });
+    removeWidget(widgetId) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { [widgetKey]: _, ...remaining } = store.widgetsById();
+        patchState(store, { widgetsById: remaining });
     },
-    updateWidgetPosition(cellId, row, col) {
-        const cellKey = CellIdUtils.toString(cellId);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
+    updateWidgetPosition(widgetId, row, col) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
+            // Update position and recalculate cellId based on new position
+            const newCellId = CellIdUtils.create(row, col);
             patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, row, col },
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, row, col, cellId: newCellId },
                 },
             });
         }
     },
     createWidget(row, col, widgetFactory, widgetState) {
-        const cellId = CellIdUtils.create(row, col);
+        const widgetId = WidgetIdUtils.generate(); // Generate unique widget ID
+        const cellId = CellIdUtils.create(row, col); // Calculate position-based cell ID
         const cell = {
+            widgetId,
             cellId,
             row,
             col,
@@ -371,59 +435,65 @@ withComputed((store) => ({
             widgetFactory,
             widgetState,
         };
-        const cellKey = CellIdUtils.toString(cellId);
+        const widgetKey = WidgetIdUtils.toString(widgetId);
         patchState(store, {
-            cellsById: { ...store.cellsById(), [cellKey]: cell },
+            widgetsById: { ...store.widgetsById(), [widgetKey]: cell },
         });
     },
-    updateCellSettings(id, flat) {
-        const cellKey = CellIdUtils.toString(id);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
+    updateCellSettings(widgetId, flat) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
             patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, flat },
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, flat },
                 },
             });
         }
     },
-    updateWidgetSpan(id, rowSpan, colSpan) {
-        const cellKey = CellIdUtils.toString(id);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
+    updateWidgetSpan(widgetId, rowSpan, colSpan) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
             patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, rowSpan, colSpan },
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, rowSpan, colSpan },
                 },
             });
         }
     },
-    updateWidgetState(cellId, widgetState) {
-        const cellKey = CellIdUtils.toString(cellId);
-        const existingCell = store.cellsById()[cellKey];
-        if (existingCell) {
+    updateWidgetState(widgetId, widgetState) {
+        const widgetKey = WidgetIdUtils.toString(widgetId);
+        const existingWidget = store.widgetsById()[widgetKey];
+        if (existingWidget) {
             patchState(store, {
-                cellsById: {
-                    ...store.cellsById(),
-                    [cellKey]: { ...existingCell, widgetState },
+                widgetsById: {
+                    ...store.widgetsById(),
+                    [widgetKey]: { ...existingWidget, widgetState },
                 },
             });
         }
     },
-    updateAllWidgetStates(widgetStates) {
-        const updatedCellsById = { ...store.cellsById() };
-        for (const [cellIdString, newState] of widgetStates) {
-            const existingCell = updatedCellsById[cellIdString];
-            if (existingCell) {
-                updatedCellsById[cellIdString] = { ...existingCell, widgetState: newState };
+    updateAllWidgetStates(cellStates) {
+        const updatedWidgetsById = { ...store.widgetsById() };
+        // Convert cell ID keys to widget IDs and update states
+        for (const [cellIdString, newState] of cellStates) {
+            // Find the widget with the matching cell ID
+            const widget = Object.values(updatedWidgetsById).find(w => CellIdUtils.toString(w.cellId) === cellIdString);
+            if (widget) {
+                const widgetIdString = WidgetIdUtils.toString(widget.widgetId);
+                updatedWidgetsById[widgetIdString] = {
+                    ...updatedWidgetsById[widgetIdString],
+                    widgetState: newState,
+                };
             }
         }
-        patchState(store, { cellsById: updatedCellsById });
+        patchState(store, { widgetsById: updatedWidgetsById });
     },
     clearDashboard() {
-        patchState(store, { cellsById: {} });
+        patchState(store, { widgetsById: {} });
     },
 })));
 
@@ -445,9 +515,6 @@ const withDragDrop = () => signalStoreFeature(withState(initialDragDropState), w
         return map;
     }),
 })), withMethods((store) => ({
-    syncDragState(dragData) {
-        patchState(store, { dragData });
-    },
     startDrag(dragData) {
         patchState(store, { dragData });
     },
@@ -481,7 +548,8 @@ withMethods((store) => ({
         }
         // 5. Handle cell movement
         if (dragData.kind === 'cell') {
-            dependencies.updateWidgetPosition(dragData.content.cellId, targetPosition.row, targetPosition.col);
+            dependencies.updateWidgetPosition(dragData.content.widgetId, // Use widgetId instead of cellId
+            targetPosition.row, targetPosition.col);
             return true;
         }
         return false;
@@ -707,7 +775,13 @@ withMethods((store) => ({
     },
     endResize(apply) {
         store._endResize(apply, {
-            updateWidgetSpan: store.updateWidgetSpan,
+            updateWidgetSpan: (cellId, rowSpan, colSpan) => {
+                // Adapter: find widget by cellId and update using widgetId
+                const widget = store.cells().find(c => CellIdUtils.equals(c.cellId, cellId));
+                if (widget) {
+                    store.updateWidgetSpan(widget.widgetId, rowSpan, colSpan);
+                }
+            }
         });
     },
     // EXPORT/IMPORT METHODS (need access to multiple features)
@@ -739,10 +813,12 @@ withMethods((store) => ({
     },
     loadDashboard(data) {
         // Import full dashboard data with grid configuration
-        const cellsById = {};
+        const widgetsById = {};
         data.cells.forEach((cellData) => {
             const factory = store.dashboardService.getFactory(cellData.widgetTypeid);
+            const widgetId = WidgetIdUtils.generate();
             const cell = {
+                widgetId,
                 cellId: CellIdUtils.create(cellData.row, cellData.col),
                 row: cellData.row,
                 col: cellData.col,
@@ -752,23 +828,25 @@ withMethods((store) => ({
                 widgetFactory: factory,
                 widgetState: cellData.widgetState,
             };
-            cellsById[CellIdUtils.toString(cell.cellId)] = cell;
+            widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
         });
         patchState(store, {
             dashboardId: data.dashboardId,
             rows: data.rows,
             columns: data.columns,
             gutterSize: data.gutterSize,
-            cellsById,
+            widgetsById,
         });
     },
     // INITIALIZATION METHODS
     initializeFromDto(dashboardData) {
         // Inline the loadDashboard logic since it's defined later in the same methods block
-        const cellsById = {};
+        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,
@@ -778,14 +856,14 @@ withMethods((store) => ({
                 widgetFactory: factory,
                 widgetState: cellData.widgetState,
             };
-            cellsById[CellIdUtils.toString(cell.cellId)] = cell;
+            widgetsById[WidgetIdUtils.toString(widgetId)] = cell;
         });
         patchState(store, {
             dashboardId: dashboardData.dashboardId,
             rows: dashboardData.rows,
             columns: dashboardData.columns,
             gutterSize: dashboardData.gutterSize,
-            cellsById,
+            widgetsById,
         });
     },
 })), 
@@ -812,14 +890,12 @@ class CellSettingsDialogProvider {
 }
 
 class CellSettingsDialogComponent {
-    data;
-    dialogRef;
     selectedMode;
     currentMode;
-    constructor(data, dialogRef) {
-        this.data = data;
-        this.dialogRef = dialogRef;
-        this.currentMode = data.flat ? 'flat' : 'normal';
+    data = inject(MAT_DIALOG_DATA);
+    dialogRef = inject((MatDialogRef));
+    constructor() {
+        this.currentMode = this.data.flat ? 'flat' : 'normal';
         this.selectedMode = this.currentMode;
     }
     onCancel() {
@@ -832,8 +908,8 @@ class CellSettingsDialogComponent {
         };
         this.dialogRef.close(newData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellSettingsDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
     <h2 mat-dialog-title>Cell Display Settings</h2>
     <mat-dialog-content>
       <p class="cell-info">Cell ID: <strong>{{ data.id }}</strong></p>
@@ -865,9 +941,9 @@ 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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] });
+  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cell-settings-dialog', standalone: true, imports: [
                         CommonModule,
@@ -908,10 +984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
       </button>
     </mat-dialog-actions>
   `, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.MatDialogRef }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Default cell dialog provider that uses Material Design dialogs.
@@ -930,10 +1003,10 @@ class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
         const result = await firstValueFrom(dialogRef.afterClosed());
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -957,7 +1030,7 @@ const CELL_SETTINGS_DIALOG_PROVIDER = new InjectionToken('CellSettingsDialogProv
 });
 
 class CellContextMenuService {
-    #activeMenu = signal(null);
+    #activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : []));
     activeMenu = this.#activeMenu.asReadonly();
     show(x, y, items) {
         this.#activeMenu.set({ x, y, items });
@@ -965,25 +1038,26 @@ class CellContextMenuService {
     hide() {
         this.#activeMenu.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService, decorators: [{
             type: Injectable
         }] });
 
 // cell.component.ts
 class CellComponent {
-    id = input.required();
-    widgetFactory = input(undefined);
-    widgetState = input(undefined);
-    isEditMode = input(false);
-    flat = input(undefined);
-    row = model.required();
-    column = model.required();
-    rowSpan = input(1);
-    colSpan = input(1);
-    draggable = input(false);
+    widgetId = input.required(...(ngDevMode ? [{ debugName: "widgetId" }] : [])); // Unique widget instance identifier
+    cellId = input.required(...(ngDevMode ? [{ debugName: "cellId" }] : [])); // Current grid position
+    widgetFactory = input(undefined, ...(ngDevMode ? [{ debugName: "widgetFactory" }] : []));
+    widgetState = input(undefined, ...(ngDevMode ? [{ debugName: "widgetState" }] : []));
+    isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    flat = input(undefined, ...(ngDevMode ? [{ debugName: "flat" }] : []));
+    row = model.required(...(ngDevMode ? [{ debugName: "row" }] : []));
+    column = model.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    rowSpan = input(1, ...(ngDevMode ? [{ debugName: "rowSpan" }] : []));
+    colSpan = input(1, ...(ngDevMode ? [{ debugName: "colSpan" }] : []));
+    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
     dragStart = output();
     dragEnd = output();
     edit = output();
@@ -1000,25 +1074,24 @@ class CellComponent {
     #contextMenuService = inject(CellContextMenuService, {
         optional: true,
     });
-    #elementRef = inject(ElementRef);
     #widgetRef;
     // Document event listeners cleanup function
     // Performance: Only created when actively resizing, not for every cell
     #documentListeners;
-    isDragging = signal(false);
-    gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`);
-    gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`);
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRowStyle" }] : []));
+    gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumnStyle" }] : []));
     isResizing = computed(() => {
         const resizeData = this.#store.resizeData();
         return resizeData
-            ? CellIdUtils.equals(resizeData.cellId, this.id())
+            ? CellIdUtils.equals(resizeData.cellId, this.cellId())
             : false;
-    });
-    isDragActive = computed(() => !!this.#store.dragData());
+    }, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
+    isDragActive = computed(() => !!this.#store.dragData(), ...(ngDevMode ? [{ debugName: "isDragActive" }] : []));
     resizeData = this.#store.resizeData;
     gridCellDimensions = this.#store.gridCellDimensions;
-    resizeDirection = signal(null);
-    resizeStartPos = signal({ x: 0, y: 0 });
+    resizeDirection = signal(null, ...(ngDevMode ? [{ debugName: "resizeDirection" }] : []));
+    resizeStartPos = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : []));
     constructor() {
         // widget creation - triggers when factory or state changes
         effect(() => {
@@ -1083,7 +1156,8 @@ class CellComponent {
             return;
         event.dataTransfer.effectAllowed = 'move';
         const cell = {
-            cellId: this.id(),
+            cellId: this.cellId(),
+            widgetId: this.widgetId(),
             row: this.row(),
             col: this.column(),
             rowSpan: this.rowSpan(),
@@ -1136,25 +1210,25 @@ class CellComponent {
         return false;
     }
     onEdit() {
-        this.edit.emit(this.id());
+        this.edit.emit(this.widgetId());
         // Call the widget's edit dialog method if it exists
         if (this.#widgetRef?.instance?.dashboardEditState) {
             this.#widgetRef.instance.dashboardEditState();
         }
     }
     onDelete() {
-        this.delete.emit(this.id());
+        this.delete.emit(this.widgetId());
     }
     async onSettings() {
         const currentSettings = {
-            id: CellIdUtils.toString(this.id()),
+            id: CellIdUtils.toString(this.cellId()), // Use cellId for display position
             flat: this.flat(),
         };
         try {
             const result = await this.#dialogProvider.openCellSettings(currentSettings);
             if (result) {
                 this.settings.emit({
-                    id: this.id(),
+                    id: this.widgetId(),
                     flat: result.flat ?? false,
                 });
             }
@@ -1173,7 +1247,7 @@ class CellComponent {
         event.stopPropagation();
         this.resizeDirection.set(direction);
         this.resizeStartPos.set({ x: event.clientX, y: event.clientY });
-        this.resizeStart.emit({ id: this.id(), direction });
+        this.resizeStart.emit({ cellId: this.cellId(), direction });
         // Setup document listeners only when actively resizing
         this.setupDocumentListeners();
         const cursorClass = direction === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize';
@@ -1193,12 +1267,12 @@ class CellComponent {
         if (direction === 'horizontal') {
             const deltaX = event.clientX - startPos.x;
             const deltaSpan = Math.round(deltaX / cellSize.width);
-            this.resizeMove.emit({ id: this.id(), direction, delta: deltaSpan });
+            this.resizeMove.emit({ cellId: this.cellId(), direction, delta: deltaSpan });
         }
         else {
             const deltaY = event.clientY - startPos.y;
             const deltaSpan = Math.round(deltaY / cellSize.height);
-            this.resizeMove.emit({ id: this.id(), direction, delta: deltaSpan });
+            this.resizeMove.emit({ cellId: this.cellId(), direction, delta: deltaSpan });
         }
     }
     /**
@@ -1211,7 +1285,7 @@ class CellComponent {
         this.#renderer.removeClass(document.body, 'cursor-row-resize');
         // Clean up document listeners immediately
         this.#cleanupDocumentListeners();
-        this.resizeEnd.emit({ id: this.id(), apply: true });
+        this.resizeEnd.emit({ cellId: this.cellId(), apply: true });
         this.resizeDirection.set(null);
     }
     /**
@@ -1229,10 +1303,10 @@ class CellComponent {
         // Fall back to stored state if widget doesn't implement dashboardGetState
         return this.widgetState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CellComponent, isStandalone: true, selector: "lib-cell", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, widgetFactory: { classPropertyName: "widgetFactory", publicName: "widgetFactory", isSignal: true, isRequired: false, transformFunction: null }, widgetState: { classPropertyName: "widgetState", publicName: "widgetState", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { row: "rowChange", column: "columnChange", dragStart: "dragStart", dragEnd: "dragEnd", edit: "edit", delete: "delete", settings: "settings", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { properties: { "style.grid-row": "gridRowStyle()", "style.grid-column": "gridColumnStyle()", "class.is-dragging": "isDragging()", "class.drag-active": "isDragActive()", "class.flat": "flat() === true" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\">\r\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\r\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\r\n</div>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}.cell.flat .content-area{pointer-events:auto}.cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CellComponent, isStandalone: true, selector: "lib-cell", inputs: { widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: true, transformFunction: null }, cellId: { classPropertyName: "cellId", publicName: "cellId", isSignal: true, isRequired: true, transformFunction: null }, widgetFactory: { classPropertyName: "widgetFactory", publicName: "widgetFactory", isSignal: true, isRequired: false, transformFunction: null }, widgetState: { classPropertyName: "widgetState", publicName: "widgetState", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, rowSpan: { classPropertyName: "rowSpan", publicName: "rowSpan", isSignal: true, isRequired: false, transformFunction: null }, colSpan: { classPropertyName: "colSpan", publicName: "colSpan", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { row: "rowChange", column: "columnChange", dragStart: "dragStart", dragEnd: "dragEnd", edit: "edit", delete: "delete", settings: "settings", resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { properties: { "style.grid-row": "gridRowStyle()", "style.grid-column": "gridColumnStyle()", "class.is-dragging": "isDragging()", "class.drag-active": "isDragActive()", "class.flat": "flat() === true" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\">\r\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\r\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\r\n</div>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(.is-dragging) .content-area{pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}:host(:not(.is-dragging)) .cell.flat .content-area{pointer-events:auto}:host(:not(.is-dragging)) .cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cell', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.grid-row]': 'gridRowStyle()',
@@ -1240,16 +1314,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[class.is-dragging]': 'isDragging()',
                         '[class.drag-active]': 'isDragActive()',
                         '[class.flat]': 'flat() === true',
-                    }, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\">\r\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\r\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\r\n</div>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}.cell.flat .content-area{pointer-events:auto}.cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"] }]
+                    }, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\">\r\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\r\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\r\n</div>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(.is-dragging) .content-area{pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}:host(:not(.is-dragging)) .cell.flat .content-area{pointer-events:auto}:host(:not(.is-dragging)) .cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class DashboardViewerComponent {
     #store = inject(DashboardStore);
-    cellComponents = viewChildren(CellComponent);
-    rows = input.required();
-    columns = input.required();
-    gutterSize = input('1em');
-    gutters = computed(() => this.columns() + 1);
+    cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
+    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
+    gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
     // store signals - read-only
     cells = this.#store.cells;
     constructor() {
@@ -1270,7 +1344,7 @@ class DashboardViewerComponent {
         const stateMap = new Map();
         const cells = this.cellComponents();
         for (const cell of cells) {
-            const cellId = cell.id();
+            const cellId = cell.cellId();
             const currentState = cell.getCurrentWidgetState();
             if (currentState !== undefined) {
                 stateMap.set(CellIdUtils.toString(cellId), currentState);
@@ -1285,17 +1359,17 @@ class DashboardViewerComponent {
     exportDashboard() {
         return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.cellId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [id]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["id", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--rows]': 'rows()',
                         '[style.--columns]': 'columns()',
                         '[style.--gutter-size]': 'gutterSize()',
                         '[style.--gutters]': 'gutters()',
-                    }, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.cellId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [id]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"] }]
+                    }, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\">\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class CellContextMenuComponent {
@@ -1304,11 +1378,11 @@ class CellContextMenuComponent {
     menuPosition = computed(() => {
         const menu = this.menuService.activeMenu();
         return menu ? { left: `${menu.x}px`, top: `${menu.y}px` } : { left: '0px', top: '0px' };
-    });
+    }, ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
     menuItems = computed(() => {
         const menu = this.menuService.activeMenu();
         return menu?.items || [];
-    });
+    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
     constructor() {
         effect(() => {
             const menu = this.menuService.activeMenu();
@@ -1346,17 +1420,14 @@ class CellContextMenuComponent {
             }
         });
     }
-    ngAfterViewInit() {
-        // Effects moved to constructor to be within injection context
-    }
     executeAction(item) {
         if (!item.divider && item.action) {
             item.action();
             this.menuService.hide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: CellContextMenuComponent, isStandalone: true, selector: "lib-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CellContextMenuComponent, isStandalone: true, selector: "lib-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
     <!-- Hidden trigger for menu positioned at exact mouse coordinates
          
          IMPORTANT: Angular Material applies its own positioning logic to menus,
@@ -1410,7 +1481,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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: CellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cell-context-menu', standalone: true, imports: [MatMenuModule, MatIconModule, MatDividerModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <!-- Hidden trigger for menu positioned at exact mouse coordinates
@@ -1470,27 +1541,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // drop-zone.component.ts
 class DropZoneComponent {
     // Required inputs
-    row = input.required();
-    col = input.required();
-    index = input.required();
+    row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
+    col = input.required(...(ngDevMode ? [{ debugName: "col" }] : []));
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
     // Optional inputs with defaults
-    highlight = input(false);
-    highlightInvalid = input(false);
-    highlightResize = input(false);
-    editMode = input(false);
+    highlight = input(false, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
+    highlightInvalid = input(false, ...(ngDevMode ? [{ debugName: "highlightInvalid" }] : []));
+    highlightResize = input(false, ...(ngDevMode ? [{ debugName: "highlightResize" }] : []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
     // Outputs
     dragEnter = output();
     dragExit = output();
     dragOver = output();
     dragDrop = output();
     // Computed properties
-    dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`);
+    dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`, ...(ngDevMode ? [{ debugName: "dropZoneId" }] : []));
     dropData = computed(() => ({
         row: this.row(),
         col: this.col(),
-    }));
+    }), ...(ngDevMode ? [{ debugName: "dropData" }] : []));
     // Abstract drag state from store
-    dragData = computed(() => this.#store.dragData());
+    dragData = computed(() => this.#store.dragData(), ...(ngDevMode ? [{ debugName: "dragData" }] : []));
     // Computed drop effect based on drag data and validity
     dropEffect = computed(() => {
         const data = this.dragData();
@@ -1498,7 +1569,7 @@ class DropZoneComponent {
             return 'none';
         }
         return data.kind === 'cell' ? 'move' : 'copy';
-    });
+    }, ...(ngDevMode ? [{ debugName: "dropEffect" }] : []));
     #store = inject(DashboardStore);
     #elementRef = inject(ElementRef);
     get nativeElement() {
@@ -1545,10 +1616,10 @@ class DropZoneComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DropZoneComponent, isStandalone: true, selector: "lib-drop-zone", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, highlightInvalid: { classPropertyName: "highlightInvalid", publicName: "highlightInvalid", isSignal: true, isRequired: false, transformFunction: null }, highlightResize: { classPropertyName: "highlightResize", publicName: "highlightResize", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnter: "dragEnter", dragExit: "dragExit", dragOver: "dragOver", dragDrop: "dragDrop" }, ngImport: i0, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DropZoneComponent, isStandalone: true, selector: "lib-drop-zone", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, col: { classPropertyName: "col", publicName: "col", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, highlightInvalid: { classPropertyName: "highlightInvalid", publicName: "highlightInvalid", isSignal: true, isRequired: false, transformFunction: null }, highlightResize: { classPropertyName: "highlightResize", publicName: "highlightResize", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnter: "dragEnter", dragExit: "dragExit", dragOver: "dragOver", dragDrop: "dragDrop" }, ngImport: i0, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-drop-zone', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- drop-zone.component.html -->\r\n<div\r\n  class=\"drop-zone\"\r\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\r\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\r\n  [class.drop-zone--resize]=\"highlightResize()\"\r\n  [style.grid-row]=\"row()\"\r\n  [style.grid-column]=\"col()\"\r\n  (dragenter)=\"onDragEnter($event)\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave($event)\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"] }]
         }] });
@@ -1556,15 +1627,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // dashboard-editor.component.ts
 class DashboardEditorComponent {
     bottomGridRef = viewChild.required('bottomGrid');
-    dropZones = viewChildren(DropZoneComponent);
-    cellComponents = viewChildren(CellComponent);
+    dropZones = viewChildren(DropZoneComponent, ...(ngDevMode ? [{ debugName: "dropZones" }] : []));
+    cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : []));
     #store = inject(DashboardStore);
     #destroyRef = inject(DestroyRef);
     #resizeObserver;
-    rows = input.required();
-    columns = input.required();
-    gutterSize = input('1em');
-    gutters = computed(() => this.columns() + 1);
+    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : []));
+    gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
     // store signals
     cells = this.#store.cells;
     highlightedZones = this.#store.highlightedZones;
@@ -1586,7 +1657,7 @@ class DashboardEditorComponent {
             }
         }
         return positions;
-    });
+    }, ...(ngDevMode ? [{ debugName: "dropzonePositions" }] : []));
     // Helper method for template
     createCellId(row, col) {
         return CellIdUtils.create(row, col);
@@ -1650,7 +1721,7 @@ class DashboardEditorComponent {
     // Handle drag events from cell component
     onCellDragStart = (dragData) => this.#store.startDrag(dragData);
     // Handle resize events from cell component
-    onCellResizeStart = (event) => this.#store.startResize(event.id);
+    onCellResizeStart = (event) => this.#store.startResize(event.cellId);
     onCellResizeMove = (event) => this.#store.updateResizePreview(event.direction, event.delta);
     onCellResizeEnd = (event) => this.#store.endResize(event.apply);
     // Handle drop events by delegating to store's business logic
@@ -1666,7 +1737,7 @@ class DashboardEditorComponent {
         const stateMap = new Map();
         const cells = this.cellComponents();
         for (const cell of cells) {
-            const cellId = cell.id();
+            const cellId = cell.cellId();
             const currentState = cell.getCurrentWidgetState();
             if (currentState !== undefined) {
                 stateMap.set(CellIdUtils.toString(cellId), currentState);
@@ -1681,12 +1752,12 @@ class DashboardEditorComponent {
     exportDashboard() {
         return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DashboardEditorComponent, isStandalone: true, selector: "ngx-dashboard-editor", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()", "class.is-edit-mode": "true" } }, providers: [
+    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.cellId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [id]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["id", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "bottomGridRef", first: true, predicate: ["bottomGrid"], descendants: true, isSignal: true }, { propertyName: "dropZones", predicate: DropZoneComponent, descendants: true, isSignal: true }, { propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dashboard-editor', standalone: true, imports: [
                         CellComponent,
@@ -1701,7 +1772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", 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.cellId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [id]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"] }]
+                    }, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context menu -->\n<lib-cell-context-menu></lib-cell-context-menu>\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"] }]
         }], ctorParameters: () => [] });
 
 // dashboard-bridge.service.ts
@@ -1713,7 +1784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  */
 class DashboardBridgeService {
     // Map of registered dashboard instances with their reactive dimensions
-    dashboards = signal(new Map());
+    dashboards = signal(new Map(), ...(ngDevMode ? [{ debugName: "dashboards" }] : []));
     /**
      * Register a dashboard store instance using its dashboard ID
      */
@@ -1764,7 +1835,7 @@ class DashboardBridgeService {
         }
         // Return dimensions from first available dashboard with fallback for undefined
         return dashboardEntries[0].dimensions() || { width: 100, height: 100 };
-    });
+    }, ...(ngDevMode ? [{ debugName: "availableDimensions" }] : []));
     /**
      * Start drag operation on the first available dashboard
      * (Widget lists need some dashboard to coordinate with during drag)
@@ -1787,15 +1858,15 @@ class DashboardBridgeService {
     /**
      * Get all registered dashboard IDs
      */
-    registeredDashboards = computed(() => Array.from(this.dashboards().keys()));
+    registeredDashboards = computed(() => Array.from(this.dashboards().keys()), ...(ngDevMode ? [{ debugName: "registeredDashboards" }] : []));
     /**
      * Get the number of registered dashboards
      */
-    dashboardCount = computed(() => this.dashboards().size);
+    dashboardCount = computed(() => this.dashboards().size, ...(ngDevMode ? [{ debugName: "dashboardCount" }] : []));
     /**
      * Check if any dashboards are registered
      */
-    hasDashboards = computed(() => this.dashboards().size > 0);
+    hasDashboards = computed(() => this.dashboards().size > 0, ...(ngDevMode ? [{ debugName: "hasDashboards" }] : []));
     /**
      * Update registration for a dashboard store when its ID becomes available
      */
@@ -1830,10 +1901,10 @@ class DashboardBridgeService {
     getAllDashboards() {
         return this.dashboards();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardBridgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1848,8 +1919,8 @@ class DashboardViewportService {
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
     store = inject(DashboardStore);
-    viewportSize = signal({ width: 0, height: 0 });
-    reservedSpace = signal(DEFAULT_RESERVED_SPACE);
+    viewportSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "viewportSize" }] : []));
+    reservedSpace = signal(DEFAULT_RESERVED_SPACE, ...(ngDevMode ? [{ debugName: "reservedSpace" }] : []));
     resizeObserver = null;
     constructor() {
         if (isPlatformBrowser(this.platformId)) {
@@ -1907,7 +1978,7 @@ class DashboardViewportService {
             width: Math.max(0, viewport.width - reserved.left - reserved.right),
             height: Math.max(0, viewport.height - reserved.top - reserved.bottom)
         };
-    });
+    }, ...(ngDevMode ? [{ debugName: "availableSpace" }] : []));
     /**
      * Calculate dashboard constraints for this dashboard instance
      */
@@ -1948,11 +2019,11 @@ class DashboardViewportService {
             maxHeight: Math.max(0, maxHeight),
             constrainedBy
         };
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewportService });
+    }, ...(ngDevMode ? [{ debugName: "constraints" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1969,14 +2040,14 @@ class DashboardComponent {
     store = this.#store;
     viewport = this.#viewport;
     // Component inputs
-    dashboardData = input.required();
-    editMode = input(false);
-    reservedSpace = input();
+    dashboardData = input.required(...(ngDevMode ? [{ debugName: "dashboardData" }] : []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : []));
     // Store signals - shared by both child components
     cells = this.#store.cells;
     // ViewChild references for export/import functionality
-    dashboardEditor = viewChild(DashboardEditorComponent);
-    dashboardViewer = viewChild(DashboardViewerComponent);
+    dashboardEditor = viewChild(DashboardEditorComponent, ...(ngDevMode ? [{ debugName: "dashboardEditor" }] : []));
+    dashboardViewer = viewChild(DashboardViewerComponent, ...(ngDevMode ? [{ debugName: "dashboardViewer" }] : []));
     // Track if we're in the middle of preserving states
     #isPreservingStates = false;
     // Track if component has been initialized
@@ -2082,10 +2153,10 @@ class DashboardComponent {
             this.#isPreservingStates = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dashboard', standalone: true, imports: [CommonModule, DashboardViewerComponent, DashboardEditorComponent], providers: [DashboardStore, DashboardViewportService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--rows]': 'store.rows()',
@@ -2104,13 +2175,13 @@ class WidgetListComponent {
     #sanitizer = inject(DomSanitizer);
     #renderer = inject(Renderer2);
     #bridge = inject(DashboardBridgeService);
-    activeWidget = signal(null);
+    activeWidget = signal(null, ...(ngDevMode ? [{ debugName: "activeWidget" }] : []));
     // Get grid cell dimensions from bridge service (uses first available dashboard)
     gridCellDimensions = this.#bridge.availableDimensions;
     widgets = computed(() => this.#service.widgetTypes().map((w) => ({
         ...w.metadata,
         safeSvgIcon: this.#sanitizer.bypassSecurityTrustHtml(w.metadata.svgIcon),
-    })));
+    })), ...(ngDevMode ? [{ debugName: "widgets" }] : []));
     onDragStart(event, widget) {
         if (!event.dataTransfer)
             return;
@@ -2125,6 +2196,7 @@ class WidgetListComponent {
         const ghost = this.#createDragGhost(widget.svgIcon);
         document.body.appendChild(ghost);
         // Force reflow to ensure element is rendered
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const _reflow = ghost.offsetHeight;
         event.dataTransfer.setDragImage(ghost, 10, 10);
         // Delay removal to ensure browser has time to snapshot the drag image
@@ -2157,12 +2229,12 @@ class WidgetListComponent {
         }
         return el;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\" role=\"list\" aria-label=\"Available widgets\">\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"widget.name + ' widget: ' + widget.description\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #5f5f5f);transition:fill var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.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 ::ng-deep svg{fill: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 ::ng-deep svg{fill: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}.drag-ghost .icon ::ng-deep svg{display:block;fill:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\" role=\"list\" aria-label=\"Available widgets\">\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"widget.name + ' widget: ' + widget.description\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: WidgetListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\" role=\"list\" aria-label=\"Available widgets\">\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"widget.name + ' widget: ' + widget.description\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block;fill:var(--mat-sys-on-surface-variant, #5f5f5f);transition:fill var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.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 ::ng-deep svg{fill: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 ::ng-deep svg{fill: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}.drag-ghost .icon ::ng-deep svg{display:block;fill:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}\n"] }]
+            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\r\n<div class=\"widget-list\" role=\"list\" aria-label=\"Available widgets\">\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"widget.name + ' widget: ' + widget.description\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
         }] });
 
 /*
@@ -2174,5 +2246,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CELL_SETTINGS_DIALOG_PROVIDER, CellIdUtils, CellSettingsDialogProvider, DEFAULT_RESERVED_SPACE, DashboardComponent, DashboardEditorComponent, DashboardService, DashboardViewerComponent, DefaultCellSettingsDialogProvider, WidgetListComponent, createDefaultDashboard, createEmptyDashboard, createFactoryFromComponent };
+export { CELL_SETTINGS_DIALOG_PROVIDER, CellIdUtils, CellSettingsDialogProvider, DEFAULT_RESERVED_SPACE, DashboardComponent, DashboardEditorComponent, DashboardService, DashboardViewerComponent, DefaultCellSettingsDialogProvider, WidgetIdUtils, WidgetListComponent, createDefaultDashboard, createEmptyDashboard, createFactoryFromComponent };
 //# sourceMappingURL=dragonworks-ngx-dashboard.mjs.map