@dragonworks/ngx-dashboard 20.3.2 → 21.1.0

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -1,4 +1,3 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, ChangeDetectionStrategy, Component, inject, Injectable, InjectionToken, input, model, output, viewChild, ViewContainerRef, DestroyRef, Renderer2, effect, viewChildren, ElementRef, afterNextRender, PLATFORM_ID, untracked } from '@angular/core';
 import { signalStoreFeature, withState, withMethods, patchState, withComputed, signalStore, withProps } from '@ngrx/signals';
@@ -20,10 +19,11 @@ import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { DomSanitizer } from '@angular/platform-browser';
+import { isPlatformBrowser } from '@angular/common';
 
 // Auto-generated by scripts/generate-versions.js
 // Do not edit manually
-const NGX_DASHBOARD_VERSION = '20.3.2';
+const NGX_DASHBOARD_VERSION = '21.1.0';
 
 /**
  * Maximum number of columns supported by the grid.
@@ -208,6 +208,8 @@ const DEFAULT_RESERVED_SPACE = {
     left: 0
 };
 
+/** Sentinel widget type ID for unresolved/unknown widget types */
+const UNKNOWN_WIDGET_TYPEID = '__internal/unknown-widget';
 function createFactoryFromComponent(component) {
     return {
         ...component.metadata,
@@ -223,7 +225,7 @@ function createFactoryFromComponent(component) {
 
 class UnknownWidgetComponent {
     static metadata = {
-        widgetTypeid: '__internal/unknown-widget',
+        widgetTypeid: UNKNOWN_WIDGET_TYPEID,
         name: $localize `:@@ngx.dashboard.unknown.widget.name:Unknown Widget`,
         description: $localize `:@@ngx.dashboard.unknown.widget.description:Fallback widget for unknown widget types`,
         svgIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
@@ -240,14 +242,14 @@ class UnknownWidgetComponent {
     dashboardGetState() {
         return this.state();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", 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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-unknown-widget', imports: [MatIconModule, MatTooltipModule], template: `
     <div class="unknown-widget-container" [matTooltip]="tooltipText()">
@@ -346,10 +348,10 @@ class DashboardService {
             }
         }
     }
-    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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -566,10 +568,36 @@ const initialWidgetManagementState = {
     widgetsById: {},
 };
 const withWidgetManagement = () => signalStoreFeature(withState(initialWidgetManagementState), 
-// Computed cells array - lazy evaluation, automatic memoization
-withComputed((store) => ({
-    cells: computed(() => Object.values(store.widgetsById())),
-})), withMethods((store) => ({
+// Computed cells array with self-healing for late-registered widget types.
+// When loadDashboard() runs before all widget types are registered, unresolved
+// cells get an unknown fallback factory. This computed transparently re-resolves
+// them when new types register, so templates see real widgets replace placeholders.
+withComputed((store) => {
+    const dashboardService = inject(DashboardService);
+    return {
+        cells: computed(() => {
+            const widgets = Object.values(store.widgetsById());
+            const hasUnresolved = widgets.some((cell) => cell.widgetFactory.widgetTypeid === UNKNOWN_WIDGET_TYPEID);
+            // Fast path: skip widgetTypes() dependency when all widgets are resolved.
+            // This is safe because registerWidgetType() prevents re-registration of
+            // existing types, so once healed, a widget's factory cannot change.
+            if (!hasUnresolved)
+                return widgets;
+            // Establishes reactive dependency on registration changes
+            dashboardService.widgetTypes();
+            return widgets.map((cell) => {
+                if (cell.widgetFactory.widgetTypeid === UNKNOWN_WIDGET_TYPEID &&
+                    cell.widgetTypeid) {
+                    const resolvedFactory = dashboardService.getFactory(cell.widgetTypeid);
+                    if (resolvedFactory.widgetTypeid !== UNKNOWN_WIDGET_TYPEID) {
+                        return { ...cell, widgetFactory: resolvedFactory };
+                    }
+                }
+                return cell;
+            });
+        }),
+    };
+}), withMethods((store) => ({
     addWidget(cell) {
         const widgetKey = WidgetIdUtils.toString(cell.widgetId);
         patchState(store, {
@@ -606,6 +634,7 @@ withComputed((store) => ({
             col,
             rowSpan: 1,
             colSpan: 1,
+            widgetTypeid: widgetFactory.widgetTypeid,
             widgetFactory,
             widgetState,
         };
@@ -902,6 +931,10 @@ const withResize = () => signalStoreFeature(withState(initialResizeState), withM
     },
 })));
 
+/** Returns the intended widget type ID, falling back to the factory's type ID */
+function effectiveWidgetTypeid(cell) {
+    return cell.widgetTypeid ?? cell.widgetFactory.widgetTypeid;
+}
 const initialState = {
     dashboardId: '',
 };
@@ -981,8 +1014,8 @@ withMethods((store) => ({
         }
         // Collect widget types in use for shared state collection
         const activeWidgetTypes = new Set(widgetsToExport
-            .filter((cell) => cell.widgetFactory.widgetTypeid !== '__internal/unknown-widget')
-            .map((cell) => cell.widgetFactory.widgetTypeid));
+            .filter((cell) => effectiveWidgetTypeid(cell) !== UNKNOWN_WIDGET_TYPEID)
+            .map((cell) => effectiveWidgetTypeid(cell)));
         // Collect shared states from DashboardService
         const sharedStatesMap = store.dashboardService.collectSharedStates(activeWidgetTypes);
         const sharedStates = sharedStatesMap.size > 0
@@ -995,7 +1028,7 @@ withMethods((store) => ({
             columns: exportColumns,
             gutterSize: store.gutterSize(),
             cells: widgetsToExport
-                .filter((cell) => cell.widgetFactory.widgetTypeid !== '__internal/unknown-widget')
+                .filter((cell) => effectiveWidgetTypeid(cell) !== UNKNOWN_WIDGET_TYPEID)
                 .map((cell) => {
                 const cellIdString = CellIdUtils.toString(cell.cellId);
                 const currentState = liveWidgetStates.get(cellIdString);
@@ -1008,7 +1041,7 @@ withMethods((store) => ({
                     rowSpan: cell.rowSpan,
                     colSpan: cell.colSpan,
                     flat: cell.flat,
-                    widgetTypeid: cell.widgetFactory.widgetTypeid,
+                    widgetTypeid: effectiveWidgetTypeid(cell),
                     widgetState: currentState !== undefined ? currentState : cell.widgetState,
                 };
             }),
@@ -1034,6 +1067,7 @@ withMethods((store) => ({
                 rowSpan: cellData.rowSpan,
                 colSpan: cellData.colSpan,
                 flat: cellData.flat,
+                widgetTypeid: cellData.widgetTypeid,
                 widgetFactory: factory,
                 widgetState: cellData.widgetState,
             };
@@ -1089,145 +1123,144 @@ class CellSettingsDialogComponent {
         };
         this.dialogRef.close(newData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.1", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
-    <h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
-      Cell Display Settings
-    </h2>
-    <mat-dialog-content>
-      <p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
-        Cell ID: <strong>{{ data.id }}</strong>
-      </p>
-
-      <div class="radio-group">
-        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
-          <mat-radio-button value="normal">
-            <div class="radio-option">
-              <div
-                class="option-title"
-                i18n="@@ngx.dashboard.cell.settings.mode.normal"
-              >
-                Normal
-              </div>
-              <div
-                class="option-description"
-                i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
-              >
-                Standard cell display with full content visibility
-              </div>
-            </div>
-          </mat-radio-button>
-
-          <mat-radio-button value="flat">
-            <div class="radio-option">
-              <div
-                class="option-title"
-                i18n="@@ngx.dashboard.cell.settings.mode.flat"
-              >
-                Flat
-              </div>
-              <div
-                class="option-description"
-                i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
-              >
-                Simplified display with reduced visual emphasis
-              </div>
-            </div>
-          </mat-radio-button>
-        </mat-radio-group>
-      </div>
-    </mat-dialog-content>
-    <mat-dialog-actions align="end">
-      <button
-        mat-button
-        (click)="onCancel()"
-        i18n="@@ngx.dashboard.common.cancel"
-      >
-        Cancel
-      </button>
-      <button
-        mat-flat-button
-        (click)="save()"
-        [disabled]="selectedMode === currentMode"
-        i18n="@@ngx.dashboard.common.apply"
-      >
-        Apply
-      </button>
-    </mat-dialog-actions>
-  `, isInline: true, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
+      Cell Display Settings
+    </h2>
+    <mat-dialog-content>
+      <p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
+        Cell ID: <strong>{{ data.id }}</strong>
+      </p>
+
+      <div class="radio-group">
+        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
+          <mat-radio-button value="normal">
+            <div class="radio-option">
+              <div
+                class="option-title"
+                i18n="@@ngx.dashboard.cell.settings.mode.normal"
+              >
+                Normal
+              </div>
+              <div
+                class="option-description"
+                i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
+              >
+                Standard cell display with full content visibility
+              </div>
+            </div>
+          </mat-radio-button>
+
+          <mat-radio-button value="flat">
+            <div class="radio-option">
+              <div
+                class="option-title"
+                i18n="@@ngx.dashboard.cell.settings.mode.flat"
+              >
+                Flat
+              </div>
+              <div
+                class="option-description"
+                i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
+              >
+                Simplified display with reduced visual emphasis
+              </div>
+            </div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="selectedMode === currentMode"
+        i18n="@@ngx.dashboard.common.apply"
+      >
+        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: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-cell-settings-dialog', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'lib-cell-settings-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
                         MatDialogModule,
                         MatButtonModule,
-                        MatRadioModule,
-                    ], template: `
-    <h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
-      Cell Display Settings
-    </h2>
-    <mat-dialog-content>
-      <p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
-        Cell ID: <strong>{{ data.id }}</strong>
-      </p>
-
-      <div class="radio-group">
-        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
-          <mat-radio-button value="normal">
-            <div class="radio-option">
-              <div
-                class="option-title"
-                i18n="@@ngx.dashboard.cell.settings.mode.normal"
-              >
-                Normal
-              </div>
-              <div
-                class="option-description"
-                i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
-              >
-                Standard cell display with full content visibility
-              </div>
-            </div>
-          </mat-radio-button>
-
-          <mat-radio-button value="flat">
-            <div class="radio-option">
-              <div
-                class="option-title"
-                i18n="@@ngx.dashboard.cell.settings.mode.flat"
-              >
-                Flat
-              </div>
-              <div
-                class="option-description"
-                i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
-              >
-                Simplified display with reduced visual emphasis
-              </div>
-            </div>
-          </mat-radio-button>
-        </mat-radio-group>
-      </div>
-    </mat-dialog-content>
-    <mat-dialog-actions align="end">
-      <button
-        mat-button
-        (click)="onCancel()"
-        i18n="@@ngx.dashboard.common.cancel"
-      >
-        Cancel
-      </button>
-      <button
-        mat-flat-button
-        (click)="save()"
-        [disabled]="selectedMode === currentMode"
-        i18n="@@ngx.dashboard.common.apply"
-      >
-        Apply
-      </button>
-    </mat-dialog-actions>
+                        MatRadioModule
+                    ], template: `
+    <h2 mat-dialog-title i18n="@@ngx.dashboard.cell.settings.title">
+      Cell Display Settings
+    </h2>
+    <mat-dialog-content>
+      <p class="cell-info" i18n="@@ngx.dashboard.cell.settings.cellId">
+        Cell ID: <strong>{{ data.id }}</strong>
+      </p>
+
+      <div class="radio-group">
+        <mat-radio-group [(ngModel)]="selectedMode" name="displayMode">
+          <mat-radio-button value="normal">
+            <div class="radio-option">
+              <div
+                class="option-title"
+                i18n="@@ngx.dashboard.cell.settings.mode.normal"
+              >
+                Normal
+              </div>
+              <div
+                class="option-description"
+                i18n="@@ngx.dashboard.cell.settings.mode.normal.description"
+              >
+                Standard cell display with full content visibility
+              </div>
+            </div>
+          </mat-radio-button>
+
+          <mat-radio-button value="flat">
+            <div class="radio-option">
+              <div
+                class="option-title"
+                i18n="@@ngx.dashboard.cell.settings.mode.flat"
+              >
+                Flat
+              </div>
+              <div
+                class="option-description"
+                i18n="@@ngx.dashboard.cell.settings.mode.flat.description"
+              >
+                Simplified display with reduced visual emphasis
+              </div>
+            </div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button
+        mat-button
+        (click)="onCancel()"
+        i18n="@@ngx.dashboard.common.cancel"
+      >
+        Cancel
+      </button>
+      <button
+        mat-flat-button
+        (click)="save()"
+        [disabled]="selectedMode === currentMode"
+        i18n="@@ngx.dashboard.common.apply"
+      >
+        Apply
+      </button>
+    </mat-dialog-actions>
   `, styles: ["mat-dialog-content{display:block;overflow-y:auto;overflow-x:hidden;padding-top:.5rem}.cell-info{margin:0 0 1.5rem;padding-bottom:1rem}.radio-group{width:100%}mat-radio-group{display:block}mat-radio-button{width:100%;display:block;margin-bottom:1rem}mat-radio-button:last-child{margin-bottom:0}.radio-option{margin-left:.75rem;padding:.25rem 0}.option-title{display:block;margin-bottom:.25rem}.option-description{display:block}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -1248,10 +1281,10 @@ class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
         const result = await firstValueFrom(dialogRef.afterClosed());
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1283,10 +1316,10 @@ class CellContextMenuService {
     hide() {
         this.#activeMenu.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellContextMenuService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellContextMenuService, decorators: [{
             type: Injectable
         }] });
 
@@ -1571,19 +1604,19 @@ 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.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\" i18n=\"@@ngx.dashboard.cell.resize.dimensions\">\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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 -->\n<div\n  class=\"cell\"\n  [class.is-resizing]=\"isResizing()\"\n  [class.flat]=\"flat() === true\"\n  [draggable]=\"draggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div class=\"content-area\">\n    <ng-template #container></ng-template>\n  </div>\n  @if (isEditMode() && !isDragging()) {\n  <!-- Right resize handle -->\n  <div\n    class=\"resize-handle resize-handle--right\"\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\n  >\n    <div class=\"resize-handle-line\"></div>\n  </div>\n  <!-- Bottom resize handle -->\n  <div\n    class=\"resize-handle resize-handle--bottom\"\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\n  >\n    <div class=\"resize-handle-line\"></div>\n  </div>\n  }\n</div>\n\n@if (isResizing()) {\n<div class=\"resize-preview\" i18n=\"@@ngx.dashboard.cell.resize.dimensions\">\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\n</div>\n}\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-cell', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'lib-cell', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.grid-row]': 'gridRowStyle()',
                         '[style.grid-column]': 'gridColumnStyle()',
                         '[class.is-dragging]': 'isDragging()',
                         '[class.drag-active]': 'isDragActive()',
                         '[class.flat]': 'flat() === true',
-                    }, template: "<!-- cell.component.html -->\r\n<div\r\n  class=\"cell\"\r\n  [class.is-resizing]=\"isResizing()\"\r\n  [class.flat]=\"flat() === true\"\r\n  [draggable]=\"draggable()\"\r\n  (dragstart)=\"onDragStart($event)\"\r\n  (dragend)=\"onDragEnd()\"\r\n  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  <div class=\"content-area\">\r\n    <ng-template #container></ng-template>\r\n  </div>\r\n  @if (isEditMode() && !isDragging()) {\r\n  <!-- Right resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--right\"\r\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  <!-- Bottom resize handle -->\r\n  <div\r\n    class=\"resize-handle resize-handle--bottom\"\r\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\r\n  >\r\n    <div class=\"resize-handle-line\"></div>\r\n  </div>\r\n  }\r\n</div>\r\n\r\n@if (isResizing()) {\r\n<div class=\"resize-preview\" i18n=\"@@ngx.dashboard.cell.resize.dimensions\">\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: () => [] });
+                    }, template: "<!-- cell.component.html -->\n<div\n  class=\"cell\"\n  [class.is-resizing]=\"isResizing()\"\n  [class.flat]=\"flat() === true\"\n  [draggable]=\"draggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div class=\"content-area\">\n    <ng-template #container></ng-template>\n  </div>\n  @if (isEditMode() && !isDragging()) {\n  <!-- Right resize handle -->\n  <div\n    class=\"resize-handle resize-handle--right\"\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\n  >\n    <div class=\"resize-handle-line\"></div>\n  </div>\n  <!-- Bottom resize handle -->\n  <div\n    class=\"resize-handle resize-handle--bottom\"\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\n  >\n    <div class=\"resize-handle-line\"></div>\n  </div>\n  }\n</div>\n\n@if (isResizing()) {\n<div class=\"resize-preview\" i18n=\"@@ngx.dashboard.cell.resize.dimensions\">\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\n</div>\n}\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: () => [], propDecorators: { widgetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetId", required: true }] }], cellId: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellId", required: true }] }], widgetFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetFactory", required: false }] }], widgetState: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetState", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }, { type: i0.Output, args: ["rowChange"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }, { type: i0.Output, args: ["columnChange"] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], settings: [{ type: i0.Output, args: ["settings"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class DashboardViewerComponent {
     #store = inject(DashboardStore);
@@ -1725,18 +1758,18 @@ class DashboardViewerComponent {
             this.#mouseUpListener = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\r\n<div class=\"grid top-grid\" #gridElement>\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n\r\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\r\n@if (enableSelection()) {\r\n  <div class=\"selection-overlay-grid\">\r\n    @for (row of rowNumbers(); track row) {\r\n      @for (col of colNumbers(); track col) {\r\n        <div\r\n          class=\"selection-ghost-cell\"\r\n          [class.selected]=\"isCellSelected(row, col)\"\r\n          [class.selecting]=\"isSelecting()\"\r\n          [style.grid-row]=\"row\"\r\n          [style.grid-column]=\"col\"\r\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\r\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\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]=\"false\"\n      [draggable]=\"false\"\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    >\n    </lib-cell>\n  }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n  <div class=\"selection-overlay-grid\">\n    @for (row of rowNumbers(); track row) {\n      @for (col of colNumbers(); track col) {\n        <div\n          class=\"selection-ghost-cell\"\n          [class.selected]=\"isCellSelected(row, col)\"\n          [class.selecting]=\"isSelecting()\"\n          [style.grid-row]=\"row\"\n          [style.grid-column]=\"col\"\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\n        ></div>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent], 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\" #gridElement>\r\n  @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"false\"\r\n      [draggable]=\"false\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n    >\r\n    </lib-cell>\r\n  }\r\n</div>\r\n\r\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\r\n@if (enableSelection()) {\r\n  <div class=\"selection-overlay-grid\">\r\n    @for (row of rowNumbers(); track row) {\r\n      @for (col of colNumbers(); track col) {\r\n        <div\r\n          class=\"selection-ghost-cell\"\r\n          [class.selected]=\"isCellSelected(row, col)\"\r\n          [class.selecting]=\"isSelecting()\"\r\n          [style.grid-row]=\"row\"\r\n          [style.grid-column]=\"col\"\r\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\r\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\r\n        ></div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\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]=\"false\"\n      [draggable]=\"false\"\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    >\n    </lib-cell>\n  }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n  <div class=\"selection-overlay-grid\">\n    @for (row of rowNumbers(); track row) {\n      @for (col of colNumbers(); track col) {\n        <div\n          class=\"selection-ghost-cell\"\n          [class.selected]=\"isCellSelected(row, col)\"\n          [class.selecting]=\"isSelecting()\"\n          [style.grid-row]=\"row\"\n          [style.grid-column]=\"col\"\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\n        ></div>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CellComponent), { isSignal: true }] }], gridElement: [{ type: i0.ViewChild, args: ['gridElement', { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }] } });
 
 class CellContextMenuComponent {
     menuTrigger = viewChild.required('menuTrigger', { read: MatMenuTrigger });
@@ -1811,8 +1844,8 @@ class CellContextMenuComponent {
             this.menuService.hide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CellContextMenuComponent, isStandalone: true, selector: "lib-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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,
@@ -1866,7 +1899,7 @@ class CellContextMenuComponent {
     </mat-menu>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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
@@ -1921,7 +1954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
       }
     </mat-menu>
   `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: ['menuTrigger', { ...{ read: MatMenuTrigger }, isSignal: true }] }] } });
 
 /**
  * Abstract provider for handling context menu events on empty dashboard cells.
@@ -1957,10 +1990,10 @@ class DefaultEmptyCellContextProvider extends EmptyCellContextProvider {
     handleEmptyCellContext() {
         // Default behavior: do nothing
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2024,10 +2057,10 @@ class EmptyCellContextMenuService {
     setLastSelection(widgetTypeId) {
         this.#lastSelectedWidgetTypeId.set(widgetTypeId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2142,10 +2175,10 @@ class WidgetListContextMenuProvider extends EmptyCellContextProvider {
                 'Ensure you are using a compatible version of the dashboard component.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListContextMenuProvider });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WidgetListContextMenuProvider });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
             type: Injectable
         }] });
 
@@ -2258,13 +2291,13 @@ class DropZoneComponent {
             });
         }
     }
-    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  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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 -->\n<div\n  class=\"drop-zone\"\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\n  [class.drop-zone--resize]=\"highlightResize()\"\n  [style.grid-row]=\"row()\"\n  [style.grid-column]=\"col()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  @if (editMode()) {\n    <div class=\"edit-mode-cell-number\">\n      {{ index() }}<br />\n      {{ row() }},{{ col() }}\n    </div>\n  }\n</div>\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", 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  (contextmenu)=\"onContextMenu($event)\"\r\n>\r\n  @if (editMode()) {\r\n    <div class=\"edit-mode-cell-number\">\r\n      {{ index() }}<br />\r\n      {{ row() }},{{ col() }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"] }]
-        }] });
+            args: [{ selector: 'lib-drop-zone', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- drop-zone.component.html -->\n<div\n  class=\"drop-zone\"\n  [class.drop-zone--highlight]=\"highlight() && !highlightInvalid()\"\n  [class.drop-zone--invalid]=\"highlightInvalid()\"\n  [class.drop-zone--resize]=\"highlightResize()\"\n  [style.grid-row]=\"row()\"\n  [style.grid-column]=\"col()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  @if (editMode()) {\n    <div class=\"edit-mode-cell-number\">\n      {{ index() }}<br />\n      {{ row() }},{{ col() }}\n    </div>\n  }\n</div>\n", styles: [".drop-zone{width:100%;height:100%;z-index:0;align-self:stretch;justify-self:stretch;display:block;box-sizing:border-box}.drop-zone--active,.drop-zone--highlight{background-color:#80808080}.drop-zone--invalid{background-color:light-dark(color-mix(in srgb,var(--mat-sys-error) 40%,white),color-mix(in srgb,var(--mat-sys-error) 80%,black))}.drop-zone--resize{background-color:#2196f34d;outline:1px solid rgba(33,150,243,.6)}.edit-mode-cell-number{font-size:10px;line-height:1.1;color:#64646499;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}\n"] }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], col: [{ type: i0.Input, args: [{ isSignal: true, alias: "col", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], highlightInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightInvalid", required: false }] }], highlightResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightResize", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], dragEnter: [{ type: i0.Output, args: ["dragEnter"] }], dragExit: [{ type: i0.Output, args: ["dragExit"] }], dragOver: [{ type: i0.Output, args: ["dragOver"] }], dragDrop: [{ type: i0.Output, args: ["dragDrop"] }] } });
 
 /**
  * Context menu component for empty dashboard cells.
@@ -2362,135 +2395,134 @@ class EmptyCellContextMenuComponent {
     sanitizeSvg(svg) {
         return this.#sanitizer.bypassSecurityTrustHtml(svg);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: EmptyCellContextMenuComponent, isStandalone: true, selector: "lib-empty-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
-    <!-- Hidden trigger for menu positioned at exact mouse coordinates
-
-         IMPORTANT: Angular Material applies its own positioning logic to menus,
-         which by default offsets the menu from the trigger element to avoid overlap.
-         To achieve precise positioning at mouse coordinates, we use these workarounds:
-
-         1. The trigger container is 1x1px (not 0x0) because Material needs a physical
-            element to calculate position against. Zero-sized elements cause unpredictable
-            positioning.
-
-         2. We use opacity:0 instead of visibility:hidden to keep the element in the
-            layout flow while making it invisible.
-
-         3. The button itself is styled to 1x1px with no padding to serve as a precise
-            anchor point for the menu.
-
-         4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
-            directly at the trigger position rather than offset from it.
-
-         This approach ensures the menu appears at the exact mouse coordinates passed
-         from the empty cell context provider's right-click handler.
-    -->
-    <div
-      style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
-      [style]="menuPosition()">
-      <button
-        mat-button
-        #menuTrigger="matMenuTrigger"
-        [matMenuTriggerFor]="contextMenu"
-        style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
-      </button>
-    </div>
-
-    <!-- Context menu with widget list -->
-    <mat-menu
-      #contextMenu="matMenu"
-      [overlapTrigger]="true"
-      class="empty-cell-widget-menu">
-      @for (item of menuItems(); track $index) {
-        @if (item.divider) {
-          <mat-divider></mat-divider>
-        } @else {
-          <button
-            mat-menu-item
-            (click)="executeAction(item)"
-            [disabled]="item.disabled"
-            [attr.aria-label]="item.label">
-            @if (item.svgIcon) {
-              <div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
-            } @else if (item.icon) {
-              <mat-icon>{{ item.icon }}</mat-icon>
-            }
-            {{ item.label }}
-          </button>
-        }
-      }
-    </mat-menu>
-  `, isInline: true, styles: [":host{display:contents}.empty-cell-widget-menu{max-height:400px;overflow-y:auto}.widget-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}.widget-icon :deep(svg){width:20px;height:20px;fill:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: EmptyCellContextMenuComponent, isStandalone: true, selector: "lib-empty-cell-context-menu", viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true, read: MatMenuTrigger, isSignal: true }], ngImport: i0, template: `
+    <!-- Hidden trigger for menu positioned at exact mouse coordinates
+
+         IMPORTANT: Angular Material applies its own positioning logic to menus,
+         which by default offsets the menu from the trigger element to avoid overlap.
+         To achieve precise positioning at mouse coordinates, we use these workarounds:
+
+         1. The trigger container is 1x1px (not 0x0) because Material needs a physical
+            element to calculate position against. Zero-sized elements cause unpredictable
+            positioning.
+
+         2. We use opacity:0 instead of visibility:hidden to keep the element in the
+            layout flow while making it invisible.
+
+         3. The button itself is styled to 1x1px with no padding to serve as a precise
+            anchor point for the menu.
+
+         4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
+            directly at the trigger position rather than offset from it.
+
+         This approach ensures the menu appears at the exact mouse coordinates passed
+         from the empty cell context provider's right-click handler.
+    -->
+    <div
+      style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+      [style]="menuPosition()">
+      <button
+        mat-button
+        #menuTrigger="matMenuTrigger"
+        [matMenuTriggerFor]="contextMenu"
+        style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
+      </button>
+    </div>
+
+    <!-- Context menu with widget list -->
+    <mat-menu
+      #contextMenu="matMenu"
+      [overlapTrigger]="true"
+      class="empty-cell-widget-menu">
+      @for (item of menuItems(); track $index) {
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        } @else {
+          <button
+            mat-menu-item
+            (click)="executeAction(item)"
+            [disabled]="item.disabled"
+            [attr.aria-label]="item.label">
+            @if (item.svgIcon) {
+              <div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
+            } @else if (item.icon) {
+              <mat-icon>{{ item.icon }}</mat-icon>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </mat-menu>
+  `, isInline: true, styles: [":host{display:contents}.empty-cell-widget-menu{max-height:400px;overflow-y:auto}.widget-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}.widget-icon :deep(svg){width:20px;height:20px;fill:currentColor}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-empty-cell-context-menu', standalone: true, imports: [
                         MatMenuModule,
                         MatIconModule,
                         MatDividerModule,
-                        MatButtonModule,
-                        CommonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <!-- Hidden trigger for menu positioned at exact mouse coordinates
-
-         IMPORTANT: Angular Material applies its own positioning logic to menus,
-         which by default offsets the menu from the trigger element to avoid overlap.
-         To achieve precise positioning at mouse coordinates, we use these workarounds:
-
-         1. The trigger container is 1x1px (not 0x0) because Material needs a physical
-            element to calculate position against. Zero-sized elements cause unpredictable
-            positioning.
-
-         2. We use opacity:0 instead of visibility:hidden to keep the element in the
-            layout flow while making it invisible.
-
-         3. The button itself is styled to 1x1px with no padding to serve as a precise
-            anchor point for the menu.
-
-         4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
-            directly at the trigger position rather than offset from it.
-
-         This approach ensures the menu appears at the exact mouse coordinates passed
-         from the empty cell context provider's right-click handler.
-    -->
-    <div
-      style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
-      [style]="menuPosition()">
-      <button
-        mat-button
-        #menuTrigger="matMenuTrigger"
-        [matMenuTriggerFor]="contextMenu"
-        style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
-      </button>
-    </div>
-
-    <!-- Context menu with widget list -->
-    <mat-menu
-      #contextMenu="matMenu"
-      [overlapTrigger]="true"
-      class="empty-cell-widget-menu">
-      @for (item of menuItems(); track $index) {
-        @if (item.divider) {
-          <mat-divider></mat-divider>
-        } @else {
-          <button
-            mat-menu-item
-            (click)="executeAction(item)"
-            [disabled]="item.disabled"
-            [attr.aria-label]="item.label">
-            @if (item.svgIcon) {
-              <div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
-            } @else if (item.icon) {
-              <mat-icon>{{ item.icon }}</mat-icon>
-            }
-            {{ item.label }}
-          </button>
-        }
-      }
-    </mat-menu>
+                        MatButtonModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <!-- Hidden trigger for menu positioned at exact mouse coordinates
+
+         IMPORTANT: Angular Material applies its own positioning logic to menus,
+         which by default offsets the menu from the trigger element to avoid overlap.
+         To achieve precise positioning at mouse coordinates, we use these workarounds:
+
+         1. The trigger container is 1x1px (not 0x0) because Material needs a physical
+            element to calculate position against. Zero-sized elements cause unpredictable
+            positioning.
+
+         2. We use opacity:0 instead of visibility:hidden to keep the element in the
+            layout flow while making it invisible.
+
+         3. The button itself is styled to 1x1px with no padding to serve as a precise
+            anchor point for the menu.
+
+         4. The mat-menu uses [overlapTrigger]="true" to allow the menu to appear
+            directly at the trigger position rather than offset from it.
+
+         This approach ensures the menu appears at the exact mouse coordinates passed
+         from the empty cell context provider's right-click handler.
+    -->
+    <div
+      style="position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+      [style]="menuPosition()">
+      <button
+        mat-button
+        #menuTrigger="matMenuTrigger"
+        [matMenuTriggerFor]="contextMenu"
+        style="width: 1px; height: 1px; padding: 0; min-width: 0; line-height: 0;">
+      </button>
+    </div>
+
+    <!-- Context menu with widget list -->
+    <mat-menu
+      #contextMenu="matMenu"
+      [overlapTrigger]="true"
+      class="empty-cell-widget-menu">
+      @for (item of menuItems(); track $index) {
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        } @else {
+          <button
+            mat-menu-item
+            (click)="executeAction(item)"
+            [disabled]="item.disabled"
+            [attr.aria-label]="item.label">
+            @if (item.svgIcon) {
+              <div class="widget-icon" [innerHTML]="sanitizeSvg(item.svgIcon)"></div>
+            } @else if (item.icon) {
+              <mat-icon>{{ item.icon }}</mat-icon>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </mat-menu>
   `, styles: [":host{display:contents}.empty-cell-widget-menu{max-height:400px;overflow-y:auto}.widget-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle}.widget-icon :deep(svg){width:20px;height:20px;fill:currentColor}\n"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: ['menuTrigger', { ...{ read: MatMenuTrigger }, isSignal: true }] }] } });
 
 // dashboard-editor.component.ts
 class DashboardEditorComponent {
@@ -2597,19 +2629,18 @@ class DashboardEditorComponent {
         this.#store.handleDrop(event.data, event.target);
         // Note: Store handles all validation and error handling internally
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", 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 -->\r\n<div class=\"grid-container\">\r\n  <!-- Bottom grid with drop zones -->\r\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\r\n    @for (position of dropzonePositions(); track position.id) {\r\n    <lib-drop-zone\r\n      class=\"drop-zone\"\r\n      [row]=\"position.row\"\r\n      [col]=\"position.col\"\r\n      [index]=\"position.index\"\r\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\r\n      [highlightInvalid]=\"\r\n        invalidHighlightMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [highlightResize]=\"\r\n        resizePreviewMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [editMode]=\"true\"\r\n      (dragEnter)=\"onDragEnter($event)\"\r\n      (dragExit)=\"onDragExit()\"\r\n      (dragOver)=\"onDragOver($event)\"\r\n      (dragDrop)=\"onDragDrop($event)\"\r\n    ></lib-drop-zone>\r\n    }\r\n  </div>\r\n\r\n  <!-- Top grid with interactive cells -->\r\n  <div class=\"grid\" id=\"top-grid\">\r\n    @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"true\"\r\n      [draggable]=\"true\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n      (dragStart)=\"onCellDragStart($event)\"\r\n      (dragEnd)=\"dragEnd()\"\r\n      (delete)=\"onCellDelete($event)\"\r\n      (settings)=\"onCellSettings($event)\"\r\n      (resizeStart)=\"onCellResizeStart($event)\"\r\n      (resizeMove)=\"onCellResizeMove($event)\"\r\n      (resizeEnd)=\"onCellResizeEnd($event)\"\r\n    >\r\n    </lib-cell>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Context menus -->\r\n<lib-cell-context-menu></lib-cell-context-menu>\r\n<lib-empty-cell-context-menu></lib-empty-cell-context-menu>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }, { kind: "component", type: EmptyCellContextMenuComponent, selector: "lib-empty-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], 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 menus -->\n<lib-cell-context-menu></lib-cell-context-menu>\n<lib-empty-cell-context-menu></lib-empty-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: "component", type: DropZoneComponent, selector: "lib-drop-zone", inputs: ["row", "col", "index", "highlight", "highlightInvalid", "highlightResize", "editMode"], outputs: ["dragEnter", "dragExit", "dragOver", "dragDrop"] }, { kind: "component", type: CellContextMenuComponent, selector: "lib-cell-context-menu" }, { kind: "component", type: EmptyCellContextMenuComponent, selector: "lib-empty-cell-context-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dashboard-editor', standalone: true, imports: [
                         CellComponent,
-                        CommonModule,
                         DropZoneComponent,
                         CellContextMenuComponent,
-                        EmptyCellContextMenuComponent,
+                        EmptyCellContextMenuComponent
                     ], providers: [
                         CellContextMenuService,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
@@ -2618,8 +2649,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[style.--gutter-size]': 'gutterSize()',
                         '[style.--gutters]': 'gutters()',
                         '[class.is-edit-mode]': 'true', // Always in edit mode
-                    }, template: "<!-- dashboard-editor.component.html -->\r\n<div class=\"grid-container\">\r\n  <!-- Bottom grid with drop zones -->\r\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\r\n    @for (position of dropzonePositions(); track position.id) {\r\n    <lib-drop-zone\r\n      class=\"drop-zone\"\r\n      [row]=\"position.row\"\r\n      [col]=\"position.col\"\r\n      [index]=\"position.index\"\r\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\r\n      [highlightInvalid]=\"\r\n        invalidHighlightMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [highlightResize]=\"\r\n        resizePreviewMap().has(createCellId(position.row, position.col))\r\n      \"\r\n      [editMode]=\"true\"\r\n      (dragEnter)=\"onDragEnter($event)\"\r\n      (dragExit)=\"onDragExit()\"\r\n      (dragOver)=\"onDragOver($event)\"\r\n      (dragDrop)=\"onDragDrop($event)\"\r\n    ></lib-drop-zone>\r\n    }\r\n  </div>\r\n\r\n  <!-- Top grid with interactive cells -->\r\n  <div class=\"grid\" id=\"top-grid\">\r\n    @for (cell of cells(); track cell.widgetId) {\r\n    <lib-cell\r\n      class=\"grid-cell\"\r\n      [widgetId]=\"cell.widgetId\"\r\n      [cellId]=\"cell.cellId\"\r\n      [isEditMode]=\"true\"\r\n      [draggable]=\"true\"\r\n      [row]=\"cell.row\"\r\n      [column]=\"cell.col\"\r\n      [rowSpan]=\"cell.rowSpan\"\r\n      [colSpan]=\"cell.colSpan\"\r\n      [flat]=\"cell.flat\"\r\n      [widgetFactory]=\"cell.widgetFactory\"\r\n      [widgetState]=\"cell.widgetState\"\r\n      (dragStart)=\"onCellDragStart($event)\"\r\n      (dragEnd)=\"dragEnd()\"\r\n      (delete)=\"onCellDelete($event)\"\r\n      (settings)=\"onCellSettings($event)\"\r\n      (resizeStart)=\"onCellResizeStart($event)\"\r\n      (resizeMove)=\"onCellResizeMove($event)\"\r\n      (resizeEnd)=\"onCellResizeEnd($event)\"\r\n    >\r\n    </lib-cell>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Context menus -->\r\n<lib-cell-context-menu></lib-cell-context-menu>\r\n<lib-empty-cell-context-menu></lib-empty-cell-context-menu>\r\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}:host .grid{background-image:linear-gradient(to right,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(100,100,100,.12) 1px,transparent 1px);background-size:var(--tile-size) var(--tile-size),var(--tile-size) var(--tile-size),100% 1px;background-position:var(--tile-offset) var(--tile-offset),var(--tile-offset) var(--tile-offset),bottom;background-repeat:repeat,repeat,no-repeat}.grid-container{position:relative;width:100%;height:100%}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;align-items:stretch;justify-items:stretch;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}#bottom-grid{z-index:1}#top-grid{z-index:2;pointer-events:none}.grid-cell{pointer-events:auto}.grid-cell.is-dragging{pointer-events:none;opacity:.5}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, 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 menus -->\n<lib-cell-context-menu></lib-cell-context-menu>\n<lib-empty-cell-context-menu></lib-empty-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: () => [], propDecorators: { bottomGridRef: [{ type: i0.ViewChild, args: ['bottomGrid', { isSignal: true }] }], dropZones: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DropZoneComponent), { isSignal: true }] }], cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CellComponent), { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }] } });
 
 // dashboard-bridge.service.ts
 /**
@@ -2747,10 +2778,10 @@ class DashboardBridgeService {
     getAllDashboards() {
         return this.dashboards();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardBridgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardBridgeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2866,10 +2897,10 @@ class DashboardViewportService {
             constrainedBy
         };
     }, ...(ngDevMode ? [{ debugName: "constraints" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardViewportService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardViewportService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3025,12 +3056,12 @@ class DashboardComponent {
             this.#isPreservingStates = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n    [enableSelection]=\"enableSelection()\"\r\n    (selectionComplete)=\"selectionComplete.emit($event)\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize", "enableSelection"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\n<div class=\"grid-container\">\n  @if (editMode()) {\n  <!-- Full editor with drag & drop capabilities -->\n  <ngx-dashboard-editor\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n  ></ngx-dashboard-editor>\n  } @else {\n  <!-- Read-only viewer -->\n  <ngx-dashboard-viewer\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n    [enableSelection]=\"enableSelection()\"\n    (selectionComplete)=\"selectionComplete.emit($event)\"\n  ></ngx-dashboard-viewer>\n  }\n</div>\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: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize", "enableSelection"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: DashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dashboard', standalone: true, imports: [CommonModule, DashboardViewerComponent, DashboardEditorComponent], providers: [DashboardStore, DashboardViewportService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ngx-dashboard', standalone: true, imports: [DashboardViewerComponent, DashboardEditorComponent], providers: [DashboardStore, DashboardViewportService], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--rows]': 'store.rows()',
                         '[style.--columns]': 'store.columns()',
                         '[style.--gutter-size]': 'store.gutterSize()',
@@ -3038,8 +3069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
                         '[class.is-edit-mode]': 'editMode()',
                         '[style.max-width.px]': 'viewport.constraints().maxWidth',
                         '[style.max-height.px]': 'viewport.constraints().maxHeight',
-                    }, template: "<!-- dashboard.component.html -->\r\n<div class=\"grid-container\">\r\n  @if (editMode()) {\r\n  <!-- Full editor with drag & drop capabilities -->\r\n  <ngx-dashboard-editor\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n  ></ngx-dashboard-editor>\r\n  } @else {\r\n  <!-- Read-only viewer -->\r\n  <ngx-dashboard-viewer\r\n    [rows]=\"store.rows()\"\r\n    [columns]=\"store.columns()\"\r\n    [gutterSize]=\"store.gutterSize()\"\r\n    [enableSelection]=\"enableSelection()\"\r\n    (selectionComplete)=\"selectionComplete.emit($event)\"\r\n  ></ngx-dashboard-viewer>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, template: "<!-- dashboard.component.html -->\n<div class=\"grid-container\">\n  @if (editMode()) {\n  <!-- Full editor with drag & drop capabilities -->\n  <ngx-dashboard-editor\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n  ></ngx-dashboard-editor>\n  } @else {\n  <!-- Read-only viewer -->\n  <ngx-dashboard-viewer\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n    [enableSelection]=\"enableSelection()\"\n    (selectionComplete)=\"selectionComplete.emit($event)\"\n  ></ngx-dashboard-viewer>\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dashboardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardData", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], reservedSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "reservedSpace", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }], dashboardEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardEditorComponent), { isSignal: true }] }], dashboardViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardViewerComponent), { isSignal: true }] }] } });
 
 // widget-list.component.ts
 class WidgetListComponent {
@@ -3107,13 +3138,13 @@ class WidgetListComponent {
         // Using $localize for the template pattern
         return $localize `:@@ngx.dashboard.widget.list.item.ariaLabel:${widget.name} widget: ${widget.description}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- widget-list.component.html -->\r\n<div\r\n  class=\"widget-list\"\r\n  role=\"list\"\r\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\r\n  aria-label=\"Available widgets\"\r\n>\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\r\n    [matTooltip]=\"widget.description\"\r\n    [matTooltipDisabled]=\"!collapsed()\"\r\n    matTooltipPosition=\"right\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: WidgetListComponent, isStandalone: true, selector: "ngx-dashboard-widget-list", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- widget-list.component.html -->\n<div\n  class=\"widget-list\"\n  role=\"list\"\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\n  aria-label=\"Available widgets\"\n>\n  @for (widget of widgets(); track widget.widgetTypeid) {\n  <div\n    class=\"widget-list-item\"\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\n    draggable=\"true\"\n    (dragstart)=\"onDragStart($event, widget)\"\n    (dragend)=\"onDragEnd()\"\n    role=\"listitem\"\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\n    [matTooltip]=\"widget.description\"\n    [matTooltipDisabled]=\"!collapsed()\"\n    matTooltipPosition=\"right\"\n    tabindex=\"0\"\n  >\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\n    <div class=\"content\">\n      <strong>{{ widget.name }}</strong>\n      <small>{{ widget.description }}</small>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: WidgetListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: WidgetListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\r\n<div\r\n  class=\"widget-list\"\r\n  role=\"list\"\r\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\r\n  aria-label=\"Available widgets\"\r\n>\r\n  @for (widget of widgets(); track widget.widgetTypeid) {\r\n  <div\r\n    class=\"widget-list-item\"\r\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\r\n    draggable=\"true\"\r\n    (dragstart)=\"onDragStart($event, widget)\"\r\n    (dragend)=\"onDragEnd()\"\r\n    role=\"listitem\"\r\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\r\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\r\n    [matTooltip]=\"widget.description\"\r\n    [matTooltipDisabled]=\"!collapsed()\"\r\n    matTooltipPosition=\"right\"\r\n    tabindex=\"0\"\r\n  >\r\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\r\n    <div class=\"content\">\r\n      <strong>{{ widget.name }}</strong>\r\n      <small>{{ widget.description }}</small>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
-        }] });
+            args: [{ selector: 'ngx-dashboard-widget-list', standalone: true, imports: [MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- widget-list.component.html -->\n<div\n  class=\"widget-list\"\n  role=\"list\"\n  i18n-aria-label=\"@@ngx.dashboard.widget.list.available\"\n  aria-label=\"Available widgets\"\n>\n  @for (widget of widgets(); track widget.widgetTypeid) {\n  <div\n    class=\"widget-list-item\"\n    [class.active]=\"activeWidget() === widget.widgetTypeid\"\n    draggable=\"true\"\n    (dragstart)=\"onDragStart($event, widget)\"\n    (dragend)=\"onDragEnd()\"\n    role=\"listitem\"\n    [attr.aria-grabbed]=\"activeWidget() === widget.widgetTypeid\"\n    [attr.aria-label]=\"getWidgetAriaLabel(widget)\"\n    [matTooltip]=\"widget.description\"\n    [matTooltipDisabled]=\"!collapsed()\"\n    matTooltipPosition=\"right\"\n    tabindex=\"0\"\n  >\n    <div class=\"icon\" [innerHTML]=\"widget.safeSvgIcon\" aria-hidden=\"true\"></div>\n    <div class=\"content\">\n      <strong>{{ widget.name }}</strong>\n      <small>{{ widget.description }}</small>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{background-color:var(--mat-sys-surface-container, #f5f5f5);container-type:inline-size}.widget-list{display:flex;flex-direction:column;gap:var(--mat-sys-spacing-2, 8px)}@container (max-width: 200px){.widget-list{gap:var(--mat-sys-spacing-1, 4px)}}@container (min-width: 400px){.widget-list{gap:var(--mat-sys-spacing-3, 12px)}}.widget-list-item{display:flex;align-items:start;gap:var(--mat-sys-spacing-3, 12px);background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);padding:var(--mat-sys-spacing-3, 12px);border-radius:var(--mat-sys-corner-small, 4px);cursor:grab;transition:background-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),border-color var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out),box-shadow var(--mat-sys-motion-duration-medium2, .3s) var(--mat-sys-motion-easing-standard, ease-in-out);box-shadow:var(--mat-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, .05))}@container (max-width: 200px){.widget-list-item{padding:var(--mat-sys-spacing-2, 8px);gap:var(--mat-sys-spacing-2, 8px)}}@container (min-width: 400px){.widget-list-item{padding:var(--mat-sys-spacing-4, 16px);gap:var(--mat-sys-spacing-4, 16px)}}.widget-list-item .icon{width:clamp(20px,4vw,28px);height:clamp(20px,4vw,28px);flex-shrink:0;color:var(--mat-sys-on-surface-variant, #5f5f5f);transition:color var(--mat-sys-motion-duration-short2, .15s) var(--mat-sys-motion-easing-standard, ease-in-out)}.widget-list-item .icon ::ng-deep svg{width:100%;height:100%;display:block}.widget-list-item .content{display:flex;flex-direction:column;line-height:1.2;color:var(--mat-sys-on-surface, #1c1c1c);flex:1;min-width:0}.widget-list-item .content strong{color:var(--mat-sys-on-surface, #1c1c1c);font-weight:500;font-size:clamp(.875rem,2.5vw,1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item .content small{color:var(--mat-sys-on-surface-variant, #5f5f5f);font-size:clamp(.75rem,2vw,.875rem);margin-top:var(--mat-sys-spacing-1, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.widget-list-item:hover{background-color:var(--mat-sys-surface-container-low, #f0f0f0);box-shadow:var(--mat-sys-elevation-level2, 0 2px 4px rgba(0, 0, 0, .1))}.widget-list-item:hover .icon{color:var(--mat-sys-on-surface, #1c1c1c)}.widget-list-item:active{cursor:grabbing;background-color:var(--mat-sys-surface-container, #f5f5f5)}.widget-list-item.active{background-color:var(--mat-sys-primary-container, #e6f2ff);border-color:var(--mat-sys-primary, #1976d2);color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content strong{color:var(--mat-sys-on-primary-container, #004a99)}.widget-list-item.active .content small{color:var(--mat-sys-on-primary-container, #004a99);opacity:.8}.widget-list-item.active .icon{color:var(--mat-sys-on-primary-container, #004a99)}.drag-ghost{position:absolute;top:0;left:0;z-index:9999;margin:0;pointer-events:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:var(--mat-sys-surface, #ffffff);border:1px solid var(--mat-sys-outline-variant, #c7c7c7);border-radius:var(--mat-sys-corner-small, 4px);box-shadow:var(--mat-sys-elevation-level3, 0 4px 6px rgba(0, 0, 0, .15));opacity:.8}.drag-ghost .icon{display:flex;align-items:center;justify-content:center;color:var(--mat-sys-on-surface-variant, #5f5f5f);opacity:.6}.drag-ghost .icon ::ng-deep svg{display:block}\n"] }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 /*
  * Public API Surface of ngx-dashboard