@dragonworks/ngx-dashboard 21.2.2 → 22.1.0

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -23,7 +23,7 @@ import { isPlatformBrowser } from '@angular/common';
 
 // Auto-generated by scripts/generate-versions.js
 // Do not edit manually
-const NGX_DASHBOARD_VERSION = '21.2.2';
+const NGX_DASHBOARD_VERSION = '22.1.0';
 
 /**
  * Maximum number of columns supported by the grid.
@@ -232,8 +232,10 @@ class UnknownWidgetComponent {
     };
     state = signal({
         originalWidgetTypeid: 'unknown',
-    }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    tooltipText = computed(() => `${this.state().originalWidgetTypeid}`, ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    tooltipText = computed(() => `${this.state().originalWidgetTypeid}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipText" }] : /* istanbul ignore next */ []));
     dashboardSetState(state) {
         if (state && typeof state === 'object' && 'originalWidgetTypeid' in state) {
             this.state.set(state);
@@ -242,14 +244,14 @@ class UnknownWidgetComponent {
     dashboardGetState() {
         return this.state();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: UnknownWidgetComponent, isStandalone: true, selector: "lib-unknown-widget", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UnknownWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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: "21.2.10", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UnknownWidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-unknown-widget', imports: [MatIconModule, MatTooltipModule], template: `
     <div class="unknown-widget-container" [matTooltip]="tooltipText()">
@@ -260,7 +262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 
 // dashboard.service.ts
 class DashboardService {
-    #widgetTypes = signal([], ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : /* istanbul ignore next */ []));
+    #widgetTypes = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#widgetTypes" }] : /* istanbul ignore next */ []));
     #widgetFactoryMap = new Map();
     #sharedStateProviders = new Map();
     #pendingSharedStates = new Map();
@@ -362,10 +365,10 @@ class DashboardService {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -556,6 +559,38 @@ function applySelectionFilter(selection, allCells, options = {}) {
     };
 }
 
+/** Floor a requested track count to a positive integer; non-finite -> 1. */
+function sanitizeRequest(value) {
+    return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : 1;
+}
+/**
+ * Clamp a requested grid size to the smallest size that still contains every
+ * widget's full footprint (the content floor). Pure: computes the result but
+ * does not mutate any state, so it is shared by both the committed resize
+ * (`setGridSize`) and the in-progress drag preview.
+ *
+ * Values below 1 are treated as 1; fractional values are floored.
+ */
+function clampGridSize(requestedRows, requestedColumns, cells) {
+    // The bounding box's max edges are span-aware (a widget at col 14 spanning
+    // 3 columns needs at least 16 columns). null = empty dashboard.
+    const bounds = calculateMinimalBoundingBox(cells);
+    const minRows = bounds?.maxRow ?? 1;
+    const minColumns = bounds?.maxCol ?? 1;
+    // Sanitize non-finite input (NaN/Infinity from e.g. parseInt of empty user
+    // input) to 1 so it can never reach committed grid state; clamp-to-content
+    // then floors it at the occupied extent.
+    const reqRows = sanitizeRequest(requestedRows);
+    const reqColumns = sanitizeRequest(requestedColumns);
+    const rows = Math.max(minRows, reqRows);
+    const columns = Math.max(minColumns, reqColumns);
+    return {
+        rows,
+        columns,
+        clamped: rows !== reqRows || columns !== reqColumns,
+    };
+}
+
 const initialGridConfigState = {
     rows: 8,
     columns: 16,
@@ -719,6 +754,9 @@ const initialDragDropState = {
     hoveredDropZone: null,
 };
 const withDragDrop = () => signalStoreFeature(withState(initialDragDropState), withComputed((store) => ({
+    // True while any widget drag is in progress. Shared by components that
+    // need to suppress conflicting affordances during a drag.
+    isDragActive: computed(() => !!store.dragData()),
     // Highlighted zones during drag
     highlightedZones: computed(() => calculateHighlightedZones(store.dragData(), store.hoveredDropZone())),
 })), withComputed((store) => ({
@@ -945,6 +983,32 @@ const withResize = () => signalStoreFeature(withState(initialResizeState), withM
     },
 })));
 
+const initialGridResizeState = {
+    gridResizePreview: null,
+};
+const withGridResize = () => signalStoreFeature(withState(initialGridResizeState), withMethods((store) => ({
+    // Needs cross-feature dependencies (current size + cells for the floor),
+    // injected by the store wrapper. Skips the patch when the clamped result
+    // is unchanged — e.g. dragging further past the content floor yields new
+    // raw deltas but the same clamped preview — avoiding redundant re-renders.
+    _previewGridResize(deltaRows, deltaColumns, dependencies) {
+        const preview = clampGridSize(dependencies.rows + deltaRows, dependencies.columns + deltaColumns, dependencies.cells);
+        const current = store.gridResizePreview();
+        if (current &&
+            current.rows === preview.rows &&
+            current.columns === preview.columns &&
+            current.clamped === preview.clamped) {
+            return;
+        }
+        patchState(store, { gridResizePreview: preview });
+    },
+    clearGridResizePreview() {
+        if (store.gridResizePreview() !== null) {
+            patchState(store, { gridResizePreview: null });
+        }
+    },
+})));
+
 /** Returns the intended widget type ID, falling back to the factory's type ID */
 function effectiveWidgetTypeid(cell) {
     return cell.widgetTypeid ?? cell.widgetFactory.widgetTypeid;
@@ -954,9 +1018,15 @@ const initialState = {
 };
 const DashboardStore = signalStore(withState(initialState), withProps(() => ({
     dashboardService: inject(DashboardService),
-})), withGridConfig(), withWidgetManagement(), withResize(), withDragDrop(), 
+})), withGridConfig(), withWidgetManagement(), withResize(), withGridResize(), withDragDrop(), 
 // Cross-feature computed properties (need access to multiple features)
 withComputed((store) => ({
+    // Effective grid size: the live resize preview when a handle drag is in
+    // progress, otherwise the committed size. Consumed wherever the rendered
+    // grid size matters (editor template, outer frame, viewport letterboxing)
+    // so they all reflow together during a drag.
+    effectiveRows: computed(() => store.gridResizePreview()?.rows ?? store.rows()),
+    effectiveColumns: computed(() => store.gridResizePreview()?.columns ?? store.columns()),
     // Invalid zones (collision detection)
     invalidHighlightMap: computed(() => {
         const collisionInfo = calculateCollisionInfo(store.dragData(), store.hoveredDropZone(), store.cells(), store.rows(), store.columns());
@@ -1007,6 +1077,24 @@ withMethods((store) => ({
             },
         });
     },
+    // GRID RESIZE (change row/column counts on a populated dashboard)
+    // Clamp-to-content policy: a requested size that would push a widget out
+    // of bounds is snapped up to the smallest size that still contains every
+    // widget's full footprint, so shrinking never orphans a widget.
+    setGridSize(rows, columns) {
+        const result = clampGridSize(rows, columns, store.cells());
+        store.setGridConfig({ rows: result.rows, columns: result.columns });
+        return result;
+    },
+    // Preview a relative grid resize during a handle drag (no commit). Stores
+    // the clamped target in gridResizePreview so the editor can live-reflow.
+    previewGridResize(deltaRows, deltaColumns) {
+        store._previewGridResize(deltaRows, deltaColumns, {
+            rows: store.rows(),
+            columns: store.columns(),
+            cells: store.cells(),
+        });
+    },
     // EXPORT/IMPORT METHODS (need access to multiple features)
     exportDashboard(getCurrentWidgetStates, selection, selectionOptions) {
         // Get live widget states if callback provided, otherwise use stored states
@@ -1102,6 +1190,27 @@ withMethods((store) => ({
         });
     },
 })), 
+// End a grid resize gesture atomically (mirrors withResize._endResize):
+// clear the live preview, no-op on a zero delta, otherwise commit the
+// relative resize. Returns null (no committed change) when the delta is zero
+// or clamp-to-content leaves the size unchanged, so callers don't signal a
+// resize that did nothing. Split into its own block so it can call the
+// absolute setGridSize above (siblings in one withMethods block aren't
+// visible to each other).
+withMethods((store) => ({
+    endGridResize(deltaRows, deltaColumns) {
+        store.clearGridResizePreview();
+        if (deltaRows === 0 && deltaColumns === 0)
+            return null;
+        const beforeRows = store.rows();
+        const beforeColumns = store.columns();
+        const result = store.setGridSize(beforeRows + deltaRows, beforeColumns + deltaColumns);
+        if (result.rows === beforeRows && result.columns === beforeColumns) {
+            return null;
+        }
+        return result;
+    },
+})), 
 // Cross-feature computed properties that depend on resize + widget data (using utility functions)
 withComputed((store) => ({
     // Compute preview cells during resize using utility function
@@ -1143,8 +1252,8 @@ class CellSettingsDialogComponent {
         };
         this.dialogRef.close(newData);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CellSettingsDialogComponent, isStandalone: true, selector: "lib-cell-settings-dialog", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.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>
@@ -1210,7 +1319,7 @@ class CellSettingsDialogComponent {
     </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: "21.2.10", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellSettingsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cell-settings-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -1301,10 +1410,10 @@ class DefaultCellSettingsDialogProvider extends CellSettingsDialogProvider {
         const result = await firstValueFrom(dialogRef.afterClosed());
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DefaultCellSettingsDialogProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DefaultCellSettingsDialogProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DefaultCellSettingsDialogProvider, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1328,7 +1437,8 @@ const CELL_SETTINGS_DIALOG_PROVIDER = new InjectionToken('CellSettingsDialogProv
 });
 
 class CellContextMenuService {
-    #activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : /* istanbul ignore next */ []));
+    #activeMenu = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#activeMenu" }] : /* istanbul ignore next */ []));
     activeMenu = this.#activeMenu.asReadonly();
     show(x, y, items) {
         this.#activeMenu.set({ x, y, items });
@@ -1336,26 +1446,37 @@ class CellContextMenuService {
     hide() {
         this.#activeMenu.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellContextMenuService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellContextMenuService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellContextMenuService, decorators: [{
             type: Injectable
         }] });
 
 // cell.component.ts
 class CellComponent {
-    widgetId = input.required(...(ngDevMode ? [{ debugName: "widgetId" }] : /* istanbul ignore next */ [])); // Unique widget instance identifier
-    cellId = input.required(...(ngDevMode ? [{ debugName: "cellId" }] : /* istanbul ignore next */ [])); // Current grid position
-    widgetFactory = input(undefined, ...(ngDevMode ? [{ debugName: "widgetFactory" }] : /* istanbul ignore next */ []));
-    widgetState = input(undefined, ...(ngDevMode ? [{ debugName: "widgetState" }] : /* istanbul ignore next */ []));
-    isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
-    flat = input(undefined, ...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
-    row = model.required(...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
-    column = model.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
-    rowSpan = input(1, ...(ngDevMode ? [{ debugName: "rowSpan" }] : /* istanbul ignore next */ []));
-    colSpan = input(1, ...(ngDevMode ? [{ debugName: "colSpan" }] : /* istanbul ignore next */ []));
-    draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+    widgetId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetId" }] : /* istanbul ignore next */ [])); // Unique widget instance identifier
+    cellId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellId" }] : /* istanbul ignore next */ [])); // Current grid position
+    widgetFactory = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetFactory" }] : /* istanbul ignore next */ []));
+    widgetState = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgetState" }] : /* istanbul ignore next */ []));
+    isEditMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    flat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flat" }] : /* istanbul ignore next */ []));
+    row = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    column = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    rowSpan = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowSpan" }] : /* istanbul ignore next */ []));
+    colSpan = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colSpan" }] : /* istanbul ignore next */ []));
+    draggable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
     dragStart = output();
     dragEnd = output();
     edit = output();
@@ -1376,20 +1497,26 @@ class CellComponent {
     // Document event listeners cleanup function
     // Performance: Only created when actively resizing, not for every cell
     #documentListeners;
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-    gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRowStyle" }] : /* istanbul ignore next */ []));
-    gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumnStyle" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    gridRowStyle = computed(() => `${this.row()} / span ${this.rowSpan()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridRowStyle" }] : /* istanbul ignore next */ []));
+    gridColumnStyle = computed(() => `${this.column()} / span ${this.colSpan()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridColumnStyle" }] : /* istanbul ignore next */ []));
     isResizing = computed(() => {
         const resizeData = this.#store.resizeData();
         return resizeData
             ? CellIdUtils.equals(resizeData.cellId, this.cellId())
             : false;
-    }, ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
-    isDragActive = computed(() => !!this.#store.dragData(), ...(ngDevMode ? [{ debugName: "isDragActive" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    isDragActive = this.#store.isDragActive;
     resizeData = this.#store.resizeData;
     gridCellDimensions = this.#store.gridCellDimensions;
-    resizeDirection = signal(null, ...(ngDevMode ? [{ debugName: "resizeDirection" }] : /* istanbul ignore next */ []));
-    resizeStartPos = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : /* istanbul ignore next */ []));
+    resizeDirection = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeDirection" }] : /* istanbul ignore next */ []));
+    resizeStartPos = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : /* istanbul ignore next */ []));
     constructor() {
         // widget creation - triggers when factory or state changes
         effect(() => {
@@ -1624,10 +1751,10 @@ class CellComponent {
         // Fall back to stored state if widget doesn't implement dashboardGetState
         return this.widgetState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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: [":root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}:root .cursor-nwse-resize{cursor:nwse-resize!important}: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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cell', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.grid-row]': 'gridRowStyle()',
@@ -1635,7 +1762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         '[class.is-dragging]': 'isDragging()',
                         '[class.drag-active]': 'isDragActive()',
                         '[class.flat]': 'flat() === true',
-                    }, 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"] }]
+                    }, 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: [":root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}:root .cursor-nwse-resize{cursor:nwse-resize!important}: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}\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 }] }] } });
 
 /**
@@ -1653,15 +1780,23 @@ class DashboardViewerComponent {
     #store = inject(DashboardStore);
     #renderer = inject(Renderer2);
     #destroyRef = inject(DestroyRef);
-    cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
-    gridElement = viewChild('gridElement', ...(ngDevMode ? [{ debugName: "gridElement" }] : /* istanbul ignore next */ []));
-    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
-    gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
+    cellComponents = viewChildren(CellComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
+    gridElement = viewChild('gridElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridElement" }] : /* istanbul ignore next */ []));
+    rows = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    gutterSize = input('1em', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
+    gutters = computed(() => this.columns() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
     // Selection feature
-    enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
-    selectionModifier = input(null, ...(ngDevMode ? [{ debugName: "selectionModifier" }] : /* istanbul ignore next */ []));
+    enableSelection = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
+    selectionModifier = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionModifier" }] : /* istanbul ignore next */ []));
     /**
      * Minimum pointer movement (in CSS pixels) between pointerdown and
      * pointerup required to emit `selectionComplete`. Below the threshold,
@@ -1670,16 +1805,21 @@ class DashboardViewerComponent {
      * Default 4 — matches OS-native click-vs-drag thresholds. Set to 0 to
      * preserve the legacy behavior where every pointerup emits.
      */
-    dragThreshold = input(4, ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
+    dragThreshold = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
     selectionComplete = output();
     // store signals - read-only
     cells = this.#store.cells;
     // Selection state
-    isSelecting = signal(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : /* istanbul ignore next */ []));
-    selectionStart = signal(null, ...(ngDevMode ? [{ debugName: "selectionStart" }] : /* istanbul ignore next */ []));
-    selectionCurrent = signal(null, ...(ngDevMode ? [{ debugName: "selectionCurrent" }] : /* istanbul ignore next */ []));
+    isSelecting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSelecting" }] : /* istanbul ignore next */ []));
+    selectionStart = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionStart" }] : /* istanbul ignore next */ []));
+    selectionCurrent = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionCurrent" }] : /* istanbul ignore next */ []));
     // Modifier-key gating state for selectionModifier
-    #modifierHeld = signal(false, ...(ngDevMode ? [{ debugName: "#modifierHeld" }] : /* istanbul ignore next */ []));
+    #modifierHeld = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#modifierHeld" }] : /* istanbul ignore next */ []));
     /**
      * Whether the selection overlay is currently interactive (intercepts
      * pointer events). Always false when `enableSelection` is false.
@@ -1694,7 +1834,8 @@ class DashboardViewerComponent {
         if (this.selectionModifier() === null)
             return true;
         return this.#modifierHeld() || this.isSelecting();
-    }, ...(ngDevMode ? [{ debugName: "armed" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "armed" }] : /* istanbul ignore next */ []));
     // Computed selection bounds (normalized)
     selectionBounds = computed(() => {
         const start = this.selectionStart();
@@ -1707,15 +1848,19 @@ class DashboardViewerComponent {
             startCol: Math.min(start.col, current.col),
             endCol: Math.max(start.col, current.col),
         };
-    }, ...(ngDevMode ? [{ debugName: "selectionBounds" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionBounds" }] : /* istanbul ignore next */ []));
     // Generate array for template iteration
-    rowNumbers = computed(() => Array.from({ length: this.rows() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "rowNumbers" }] : /* istanbul ignore next */ []));
-    colNumbers = computed(() => Array.from({ length: this.columns() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "colNumbers" }] : /* istanbul ignore next */ []));
+    rowNumbers = computed(() => Array.from({ length: this.rows() }, (_, i) => i + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowNumbers" }] : /* istanbul ignore next */ []));
+    colNumbers = computed(() => Array.from({ length: this.columns() }, (_, i) => i + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colNumbers" }] : /* istanbul ignore next */ []));
     // Document-level pointer listeners (cleanup needed)
     #pointerMoveListener;
     #pointerUpListener;
     // Pointer position at the start of a drag, for dragThreshold checks
-    #pointerDownPos = signal(null, ...(ngDevMode ? [{ debugName: "#pointerDownPos" }] : /* istanbul ignore next */ []));
+    #pointerDownPos = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#pointerDownPos" }] : /* istanbul ignore next */ []));
     constructor() {
         // Sync grid configuration with store when inputs change
         effect(() => {
@@ -1886,10 +2031,10 @@ class DashboardViewerComponent {
             this.#pointerUpListener = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 }, selectionModifier: { classPropertyName: "selectionModifier", publicName: "selectionModifier", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", 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\" [class.armed]=\"armed()\">\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          [attr.data-row]=\"row\"\n          [attr.data-col]=\"col\"\n          (pointerdown)=\"onGhostCellPointerDown($event, 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:none;-webkit-user-select:none;user-select:none}.selection-overlay-grid.armed{pointer-events:auto}.selection-ghost-cell{transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell.selected{background-color:color-mix(in srgb,var(--mat-sys-primary) 25%,transparent);border-radius:4px}.selection-overlay-grid.armed .selection-ghost-cell{cursor:crosshair}.selection-overlay-grid.armed .selection-ghost-cell:hover:not(.selecting){background-color:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.selection-overlay-grid.armed .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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }, selectionModifier: { classPropertyName: "selectionModifier", publicName: "selectionModifier", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", 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\" [class.armed]=\"armed()\">\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          [attr.data-row]=\"row\"\n          [attr.data-col]=\"col\"\n          (pointerdown)=\"onGhostCellPointerDown($event, 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:none;-webkit-user-select:none;user-select:none}.selection-overlay-grid.armed{pointer-events:auto}.selection-ghost-cell{transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell.selected{background-color:color-mix(in srgb,var(--mat-sys-primary) 25%,transparent);border-radius:4px}.selection-overlay-grid.armed .selection-ghost-cell{cursor:crosshair}.selection-overlay-grid.armed .selection-ghost-cell:hover:not(.selecting){background-color:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.selection-overlay-grid.armed .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: "21.2.10", ngImport: i0, type: DashboardViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dashboard-viewer', standalone: true, imports: [CellComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--rows]': 'rows()',
@@ -1907,11 +2052,13 @@ class CellContextMenuComponent {
     menuPosition = computed(() => {
         const menu = this.menuService.activeMenu();
         return menu ? { left: `${menu.x}px`, top: `${menu.y}px` } : { left: '0px', top: '0px' };
-    }, ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
     menuItems = computed(() => {
         const menu = this.menuService.activeMenu();
         return menu?.items || [];
-    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     constructor() {
         // Material Menu has a backdrop that blocks events from reaching other elements.
         // When any right-click occurs while menu is open, we need to:
@@ -1972,8 +2119,8 @@ class CellContextMenuComponent {
             this.menuService.hide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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: "22.0.4", ngImport: i0, type: CellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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,
@@ -2027,7 +2174,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: "21.2.10", ngImport: i0, type: CellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.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
@@ -2118,10 +2265,10 @@ class DefaultEmptyCellContextProvider extends EmptyCellContextProvider {
     handleEmptyCellContext() {
         // Default behavior: do nothing
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DefaultEmptyCellContextProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DefaultEmptyCellContextProvider, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DefaultEmptyCellContextProvider, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2156,8 +2303,10 @@ const EMPTY_CELL_CONTEXT_PROVIDER = new InjectionToken('EmptyCellContextProvider
  * of the context menu that appears when right-clicking on empty dashboard cells.
  */
 class EmptyCellContextMenuService {
-    #activeMenu = signal(null, ...(ngDevMode ? [{ debugName: "#activeMenu" }] : /* istanbul ignore next */ []));
-    #lastSelectedWidgetTypeId = signal(null, ...(ngDevMode ? [{ debugName: "#lastSelectedWidgetTypeId" }] : /* istanbul ignore next */ []));
+    #activeMenu = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#activeMenu" }] : /* istanbul ignore next */ []));
+    #lastSelectedWidgetTypeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#lastSelectedWidgetTypeId" }] : /* istanbul ignore next */ []));
     activeMenu = this.#activeMenu.asReadonly();
     lastSelectedWidgetTypeId = this.#lastSelectedWidgetTypeId.asReadonly();
     /**
@@ -2185,10 +2334,10 @@ class EmptyCellContextMenuService {
     setLastSelection(widgetTypeId) {
         this.#lastSelectedWidgetTypeId.set(widgetTypeId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EmptyCellContextMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EmptyCellContextMenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EmptyCellContextMenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2303,37 +2452,49 @@ class WidgetListContextMenuProvider extends EmptyCellContextProvider {
                 'Ensure you are using a compatible version of the dashboard component.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WidgetListContextMenuProvider });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WidgetListContextMenuProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WidgetListContextMenuProvider });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WidgetListContextMenuProvider, decorators: [{
             type: Injectable
         }] });
 
 // drop-zone.component.ts
 class DropZoneComponent {
     // Required inputs
-    row = input.required(...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
-    col = input.required(...(ngDevMode ? [{ debugName: "col" }] : /* istanbul ignore next */ []));
-    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    col = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "col" }] : /* istanbul ignore next */ []));
+    index = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
     // Optional inputs with defaults
-    highlight = input(false, ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
-    highlightInvalid = input(false, ...(ngDevMode ? [{ debugName: "highlightInvalid" }] : /* istanbul ignore next */ []));
-    highlightResize = input(false, ...(ngDevMode ? [{ debugName: "highlightResize" }] : /* istanbul ignore next */ []));
-    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    highlight = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    highlightInvalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightInvalid" }] : /* istanbul ignore next */ []));
+    highlightResize = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightResize" }] : /* istanbul ignore next */ []));
+    highlightPreview = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightPreview" }] : /* istanbul ignore next */ []));
+    editMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
     // Outputs
     dragEnter = output();
     dragExit = output();
     dragOver = output();
     dragDrop = output();
     // Computed properties
-    dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`, ...(ngDevMode ? [{ debugName: "dropZoneId" }] : /* istanbul ignore next */ []));
+    dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropZoneId" }] : /* istanbul ignore next */ []));
     dropData = computed(() => ({
         row: this.row(),
         col: this.col(),
-    }), ...(ngDevMode ? [{ debugName: "dropData" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropData" }] : /* istanbul ignore next */ []));
     // Abstract drag state from store
-    dragData = computed(() => this.#store.dragData(), ...(ngDevMode ? [{ debugName: "dragData" }] : /* istanbul ignore next */ []));
+    dragData = computed(() => this.#store.dragData(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragData" }] : /* istanbul ignore next */ []));
     // Computed drop effect based on drag data and validity
     dropEffect = computed(() => {
         const data = this.dragData();
@@ -2341,7 +2502,8 @@ class DropZoneComponent {
             return 'none';
         }
         return data.kind === 'cell' ? 'move' : 'copy';
-    }, ...(ngDevMode ? [{ debugName: "dropEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropEffect" }] : /* istanbul ignore next */ []));
     #store = inject(DashboardStore);
     #elementRef = inject(ElementRef);
     #dashboardService = inject(DashboardService);
@@ -2419,13 +2581,13 @@ class DropZoneComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }, highlightPreview: { classPropertyName: "highlightPreview", publicName: "highlightPreview", 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  [class.drop-zone--preview]=\"highlightPreview()\"\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)}.drop-zone--preview{background-color:color-mix(in srgb,var(--mat-sys-primary) 18%,transparent);outline:1px dashed color-mix(in srgb,var(--mat-sys-primary) 50%,transparent)}.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: "21.2.10", ngImport: i0, type: DropZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DropZoneComponent, decorators: [{
             type: Component,
-            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"] }] } });
+            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  [class.drop-zone--preview]=\"highlightPreview()\"\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)}.drop-zone--preview{background-color:color-mix(in srgb,var(--mat-sys-primary) 18%,transparent);outline:1px dashed color-mix(in srgb,var(--mat-sys-primary) 50%,transparent)}.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 }] }], highlightPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightPreview", 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.
@@ -2447,11 +2609,13 @@ class EmptyCellContextMenuComponent {
         return menu
             ? { left: `${menu.x}px`, top: `${menu.y}px` }
             : { left: '0px', top: '0px' };
-    }, ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []));
     menuItems = computed(() => {
         const menu = this.menuService.activeMenu();
         return menu?.items || [];
-    }, ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     constructor() {
         // Material Menu has a backdrop that blocks events from reaching other elements.
         // When any right-click occurs while menu is open, we need to:
@@ -2523,8 +2687,8 @@ class EmptyCellContextMenuComponent {
     sanitizeSvg(svg) {
         return this.#sanitizer.bypassSecurityTrustHtml(svg);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EmptyCellContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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,
@@ -2584,7 +2748,7 @@ class EmptyCellContextMenuComponent {
     </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: "21.2.10", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: EmptyCellContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-empty-cell-context-menu', standalone: true, imports: [
                         MatMenuModule,
@@ -2652,18 +2816,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
   `, 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: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: ['menuTrigger', { ...{ read: MatMenuTrigger }, isSignal: true }] }] } });
 
+// grid-resize-handle.component.ts
+//
+// A small, self-contained drag handle for resizing the dashboard grid's
+// row/column counts from the editor. Uses PointerEvents (with pointer capture)
+// so mouse, touch and pen all work uniformly, and reports a whole-grid delta
+// in track counts rather than a per-widget span change.
+//
+// The handle is intentionally store-agnostic: it converts pointer movement
+// into track-count deltas using the cell footprint passed in, and emits them.
+// The editor owns the actual grid mutation (clamp-to-content lives there).
+/**
+ * Round half away from zero so inward and outward half-cell drags behave
+ * symmetrically. `Math.round` rounds 0.5 to 1 but -0.5 to 0, which makes a
+ * half-cell shrink "stick" while a half-cell grow responds.
+ */
+function symmetricRound(value) {
+    return Math.sign(value) * Math.round(Math.abs(value));
+}
+class GridResizeHandleComponent {
+    axis = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+    /** Current grid cell footprint in px; converts pointer delta to track counts. */
+    cellWidth = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellWidth" }] : /* istanbul ignore next */ []));
+    cellHeight = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellHeight" }] : /* istanbul ignore next */ []));
+    resizeMove = output();
+    resizeEnd = output();
+    #host = inject(ElementRef);
+    #renderer = inject(Renderer2);
+    #destroyRef = inject(DestroyRef);
+    isActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    #startX = 0;
+    #startY = 0;
+    // Cell footprint snapshot taken at gesture start. Reading the live signal
+    // would feed back on itself: the editor's live preview shrinks cells as
+    // columns are added, which would shrink this px->track divisor mid-drag and
+    // make the grid overshoot.
+    #cellWidth = 0;
+    #cellHeight = 0;
+    #pointerId = null;
+    #delta = { deltaColumns: 0, deltaRows: 0 };
+    #cleanup;
+    constructor() {
+        // Defensive: drop listeners / capture if the handle is torn down mid-drag.
+        this.#destroyRef.onDestroy(() => this.#stop());
+    }
+    onResizeStart(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.#startX = event.clientX;
+        this.#startY = event.clientY;
+        this.#cellWidth = this.cellWidth();
+        this.#cellHeight = this.cellHeight();
+        this.#delta = { deltaColumns: 0, deltaRows: 0 };
+        this.isActive.set(true);
+        // Capture so the gesture keeps receiving events even if the pointer leaves
+        // the thin handle strip. try/catch tolerates environments without capture
+        // support (TypeError) and synthetic test events with no active pointer.
+        try {
+            this.#host.nativeElement.setPointerCapture(event.pointerId);
+            this.#pointerId = event.pointerId;
+        }
+        catch {
+            // No capture; the document listeners still drive the gesture.
+        }
+        // Document/window listeners only exist while actively dragging this handle.
+        const unlistenMove = this.#renderer.listen('document', 'pointermove', this.#onMove);
+        const unlistenUp = this.#renderer.listen('document', 'pointerup', this.#onUp);
+        const unlistenCancel = this.#renderer.listen('document', 'pointercancel', this.#onAbort);
+        // A pointerup that lands outside the window never fires; window blur is the
+        // backstop that aborts a gesture the browser has otherwise abandoned.
+        const unlistenBlur = this.#renderer.listen('window', 'blur', this.#onAbort);
+        this.#cleanup = () => {
+            unlistenMove();
+            unlistenUp();
+            unlistenCancel();
+            unlistenBlur();
+        };
+        this.#renderer.addClass(document.body, this.#cursorClass());
+    }
+    // Arrow fields keep `this` bound when used as Renderer2 listener callbacks.
+    #onMove = (event) => {
+        const axis = this.axis();
+        const next = {
+            deltaColumns: axis !== 'vertical' && this.#cellWidth > 0
+                ? symmetricRound((event.clientX - this.#startX) / this.#cellWidth)
+                : 0,
+            deltaRows: axis !== 'horizontal' && this.#cellHeight > 0
+                ? symmetricRound((event.clientY - this.#startY) / this.#cellHeight)
+                : 0,
+        };
+        // Only emit when the rounded track delta actually changes, so sub-cell
+        // pointer movement doesn't spam the live preview.
+        if (next.deltaColumns === this.#delta.deltaColumns &&
+            next.deltaRows === this.#delta.deltaRows) {
+            return;
+        }
+        this.#delta = next;
+        this.resizeMove.emit(next);
+    };
+    #onUp = () => this.#finish(this.#delta);
+    // Abort (pointercancel / window blur): discard the in-progress delta so the
+    // editor clears the preview without committing a half-finished gesture.
+    #onAbort = () => this.#finish({ deltaColumns: 0, deltaRows: 0 });
+    #finish(delta) {
+        if (!this.isActive())
+            return;
+        this.#stop();
+        this.resizeEnd.emit(delta);
+    }
+    #stop() {
+        this.isActive.set(false);
+        this.#renderer.removeClass(document.body, this.#cursorClass());
+        if (this.#pointerId !== null) {
+            try {
+                this.#host.nativeElement.releasePointerCapture(this.#pointerId);
+            }
+            catch {
+                // Capture may already be gone (e.g. pointercancel released it).
+            }
+        }
+        this.#pointerId = null;
+        this.#cleanup?.();
+        this.#cleanup = undefined;
+    }
+    #cursorClass() {
+        switch (this.axis()) {
+            case 'horizontal':
+                return 'cursor-col-resize';
+            case 'vertical':
+                return 'cursor-row-resize';
+            default:
+                return 'cursor-nwse-resize';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: GridResizeHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: GridResizeHandleComponent, isStandalone: true, selector: "lib-grid-resize-handle", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: true, transformFunction: null }, cellWidth: { classPropertyName: "cellWidth", publicName: "cellWidth", isSignal: true, isRequired: true, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onResizeStart($event)" }, properties: { "class": "'axis-' + axis()", "class.is-active": "isActive()" } }, ngImport: i0, template: "<!-- grid-resize-handle.component.html -->\n<div class=\"grip-line\"></div>\n", styles: [":root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}:root .cursor-nwse-resize{cursor:nwse-resize!important}:host{position:absolute;z-index:25;display:flex;align-items:center;justify-content:center;opacity:.3;transition:opacity .15s ease;touch-action:none}:host(.axis-horizontal){cursor:col-resize;top:0;right:0;width:max(var(--gutter-size, 8px),6px);height:100%}:host(.axis-vertical){cursor:row-resize;left:0;bottom:0;width:100%;height:max(var(--gutter-size, 8px),6px)}:host(.axis-both){cursor:nwse-resize;right:0;bottom:0;width:max(var(--gutter-size, 8px),8px);height:max(var(--gutter-size, 8px),8px);z-index:26}:host(:hover),:host(.is-active){opacity:1}.grip-line{background-color:var(--mat-sys-outline-variant);border-radius:2px}:host(.axis-horizontal) .grip-line{width:4px;height:48px;max-height:60%}:host(.axis-vertical) .grip-line{width:48px;max-width:60%;height:4px}:host(.axis-both) .grip-line{width:6px;height:6px;border-bottom-right-radius:3px}:host(:hover) .grip-line,:host(.is-active) .grip-line{background-color:var(--mat-sys-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: GridResizeHandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-grid-resize-handle', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': "'axis-' + axis()",
+                        '[class.is-active]': 'isActive()',
+                        '(pointerdown)': 'onResizeStart($event)',
+                    }, template: "<!-- grid-resize-handle.component.html -->\n<div class=\"grip-line\"></div>\n", styles: [":root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}:root .cursor-nwse-resize{cursor:nwse-resize!important}:host{position:absolute;z-index:25;display:flex;align-items:center;justify-content:center;opacity:.3;transition:opacity .15s ease;touch-action:none}:host(.axis-horizontal){cursor:col-resize;top:0;right:0;width:max(var(--gutter-size, 8px),6px);height:100%}:host(.axis-vertical){cursor:row-resize;left:0;bottom:0;width:100%;height:max(var(--gutter-size, 8px),6px)}:host(.axis-both){cursor:nwse-resize;right:0;bottom:0;width:max(var(--gutter-size, 8px),8px);height:max(var(--gutter-size, 8px),8px);z-index:26}:host(:hover),:host(.is-active){opacity:1}.grip-line{background-color:var(--mat-sys-outline-variant);border-radius:2px}:host(.axis-horizontal) .grip-line{width:4px;height:48px;max-height:60%}:host(.axis-vertical) .grip-line{width:48px;max-width:60%;height:4px}:host(.axis-both) .grip-line{width:6px;height:6px;border-bottom-right-radius:3px}:host(:hover) .grip-line,:host(.is-active) .grip-line{background-color:var(--mat-sys-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: true }] }], cellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellWidth", required: true }] }], cellHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellHeight", required: true }] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }] } });
+
 // dashboard-editor.component.ts
 class DashboardEditorComponent {
     bottomGridRef = viewChild.required('bottomGrid');
-    dropZones = viewChildren(DropZoneComponent, ...(ngDevMode ? [{ debugName: "dropZones" }] : /* istanbul ignore next */ []));
-    cellComponents = viewChildren(CellComponent, ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
+    dropZones = viewChildren(DropZoneComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropZones" }] : /* istanbul ignore next */ []));
+    cellComponents = viewChildren(CellComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellComponents" }] : /* istanbul ignore next */ []));
     #store = inject(DashboardStore);
     #destroyRef = inject(DestroyRef);
     #resizeObserver;
-    rows = input.required(...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    gutterSize = input('1em', ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
-    gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
+    rows = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    gutterSize = input('1em', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
+    // Emitted when a grid resize handle commits a new size (after clamp-to-content).
+    gridResized = output();
     // store signals
     cells = this.#store.cells;
     highlightedZones = this.#store.highlightedZones;
@@ -2671,21 +2990,48 @@ class DashboardEditorComponent {
     invalidHighlightMap = this.#store.invalidHighlightMap;
     hoveredDropZone = this.#store.hoveredDropZone;
     resizePreviewMap = this.#store.resizePreviewMap;
-    // Generate all possible cell positions for the grid
+    cellDimensions = this.#store.gridCellDimensions;
+    gridResizePreview = this.#store.gridResizePreview;
+    // Effective grid size (live preview when dragging, else committed) — shared
+    // from the store so the editor grid, the outer frame and the viewport
+    // letterboxing all reflow together. Drives the grid template, aspect-ratio
+    // and drop zones so the editor reflows under the handle without committing.
+    effectiveRows = this.#store.effectiveRows;
+    effectiveColumns = this.#store.effectiveColumns;
+    // Hide grid resize handles while a widget drag is in progress to avoid
+    // conflicting gestures.
+    isDragActive = this.#store.isDragActive;
+    // Axes rendered as grid resize handles (right edge, bottom edge, corner).
+    resizeAxes = [
+        'horizontal',
+        'vertical',
+        'both',
+    ];
+    // Generate all possible cell positions for the grid (using the effective
+    // size so the drop-zone grid grows/shrinks with the live resize preview).
     dropzonePositions = computed(() => {
+        const rows = this.effectiveRows();
+        const columns = this.effectiveColumns();
         const positions = [];
-        for (let row = 1; row <= this.rows(); row++) {
-            for (let col = 1; col <= this.columns(); col++) {
+        for (let row = 1; row <= rows; row++) {
+            for (let col = 1; col <= columns; col++) {
                 positions.push({
                     row,
                     col,
                     id: `dropzone-${row}-${col}`,
-                    index: (row - 1) * this.columns() + col,
+                    index: (row - 1) * columns + col,
                 });
             }
         }
         return positions;
-    }, ...(ngDevMode ? [{ debugName: "dropzonePositions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropzonePositions" }] : /* istanbul ignore next */ []));
+    // True for drop zones in the about-to-be-added region during a grow preview,
+    // so the template can tint the tracks the resize is adding.
+    isPreviewAdded(row, col) {
+        return (this.gridResizePreview() !== null &&
+            (row > this.rows() || col > this.columns()));
+    }
     // Helper method for template
     createCellId(row, col) {
         return CellIdUtils.create(row, col);
@@ -2707,6 +3053,10 @@ class DashboardEditorComponent {
         effect(() => {
             this.#store.setEditMode(true);
         });
+        // Drop any in-progress resize preview if the editor is torn down mid-drag
+        // (e.g. editMode toggled off): the store outlives this component, so a
+        // stale preview would otherwise render a phantom grid on the next mount.
+        this.#destroyRef.onDestroy(() => this.#store.clearGridResizePreview());
     }
     #observeGridSize() {
         const gridEl = this.bottomGridRef()?.nativeElement;
@@ -2757,28 +3107,41 @@ 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: "21.2.10", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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: [
+    // Live preview while dragging a handle: the store reflows the grid to the
+    // clamped target size without committing.
+    onGridResizeMove(delta) {
+        this.#store.previewGridResize(delta.deltaRows, delta.deltaColumns);
+    }
+    // Commit a grid resize gesture. The store clears the preview, no-ops on a
+    // zero delta, and otherwise commits the clamped relative resize.
+    onGridResizeEnd(delta) {
+        const result = this.#store.endGridResize(delta.deltaRows, delta.deltaColumns);
+        if (result)
+            this.gridResized.emit(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 } }, outputs: { gridResized: "gridResized" }, host: { properties: { "style.--rows": "effectiveRows()", "style.--columns": "effectiveColumns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "effectiveColumns() + 1", "class.is-edit-mode": "true" } }, providers: [
             CellContextMenuService,
-        ], viewQueries: [{ propertyName: "bottomGridRef", first: true, predicate: ["bottomGrid"], descendants: true, isSignal: true }, { propertyName: "dropZones", predicate: DropZoneComponent, descendants: true, isSignal: true }, { propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context 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 });
+        ], 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      [highlightPreview]=\"isPreviewAdded(position.row, position.col)\"\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  <!-- Grid resize handles (right edge, bottom edge, bottom-right corner).\n       Hidden during a widget drag to avoid conflicting gestures. -->\n  @if (!isDragActive()) {\n  @for (axis of resizeAxes; track axis) {\n  <lib-grid-resize-handle\n    [axis]=\"axis\"\n    [cellWidth]=\"cellDimensions().width\"\n    [cellHeight]=\"cellDimensions().height\"\n    (resizeMove)=\"onGridResizeMove($event)\"\n    (resizeEnd)=\"onGridResizeEnd($event)\"\n  ></lib-grid-resize-handle>\n  }\n  }\n\n  <!-- Live size badge shown while a resize handle is being dragged. -->\n  @if (gridResizePreview(); as preview) {\n  <div\n    class=\"grid-resize-badge\"\n    [class.grid-resize-badge--clamped]=\"preview.clamped\"\n    i18n=\"@@ngx.dashboard.editor.gridResize.dimensions\"\n  >\n    {{ preview.columns }} \u00D7 {{ preview.rows }}\n  </div>\n  }\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}.grid-resize-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}.grid-resize-badge--clamped{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}\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", "highlightPreview", "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" }, { kind: "component", type: GridResizeHandleComponent, selector: "lib-grid-resize-handle", inputs: ["axis", "cellWidth", "cellHeight"], outputs: ["resizeMove", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-dashboard-editor', standalone: true, imports: [
                         CellComponent,
                         DropZoneComponent,
                         CellContextMenuComponent,
-                        EmptyCellContextMenuComponent
+                        EmptyCellContextMenuComponent,
+                        GridResizeHandleComponent
                     ], providers: [
                         CellContextMenuService,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[style.--rows]': 'rows()',
-                        '[style.--columns]': 'columns()',
+                        '[style.--rows]': 'effectiveRows()',
+                        '[style.--columns]': 'effectiveColumns()',
                         '[style.--gutter-size]': 'gutterSize()',
-                        '[style.--gutters]': 'gutters()',
+                        '[style.--gutters]': 'effectiveColumns() + 1',
                         '[class.is-edit-mode]': 'true', // Always in edit mode
-                    }, template: "<!-- dashboard-editor.component.html -->\n<div class=\"grid-container\">\n  <!-- Bottom grid with drop zones -->\n  <div class=\"grid\" id=\"bottom-grid\" #bottomGrid>\n    @for (position of dropzonePositions(); track position.id) {\n    <lib-drop-zone\n      class=\"drop-zone\"\n      [row]=\"position.row\"\n      [col]=\"position.col\"\n      [index]=\"position.index\"\n      [highlight]=\"highlightMap().has(createCellId(position.row, position.col))\"\n      [highlightInvalid]=\"\n        invalidHighlightMap().has(createCellId(position.row, position.col))\n      \"\n      [highlightResize]=\"\n        resizePreviewMap().has(createCellId(position.row, position.col))\n      \"\n      [editMode]=\"true\"\n      (dragEnter)=\"onDragEnter($event)\"\n      (dragExit)=\"onDragExit()\"\n      (dragOver)=\"onDragOver($event)\"\n      (dragDrop)=\"onDragDrop($event)\"\n    ></lib-drop-zone>\n    }\n  </div>\n\n  <!-- Top grid with interactive cells -->\n  <div class=\"grid\" id=\"top-grid\">\n    @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"true\"\n      [draggable]=\"true\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n      (dragStart)=\"onCellDragStart($event)\"\n      (dragEnd)=\"dragEnd()\"\n      (delete)=\"onCellDelete($event)\"\n      (settings)=\"onCellSettings($event)\"\n      (resizeStart)=\"onCellResizeStart($event)\"\n      (resizeMove)=\"onCellResizeMove($event)\"\n      (resizeEnd)=\"onCellResizeEnd($event)\"\n    >\n    </lib-cell>\n    }\n  </div>\n</div>\n\n<!-- Context 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 }] }] } });
+                    }, 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      [highlightPreview]=\"isPreviewAdded(position.row, position.col)\"\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  <!-- Grid resize handles (right edge, bottom edge, bottom-right corner).\n       Hidden during a widget drag to avoid conflicting gestures. -->\n  @if (!isDragActive()) {\n  @for (axis of resizeAxes; track axis) {\n  <lib-grid-resize-handle\n    [axis]=\"axis\"\n    [cellWidth]=\"cellDimensions().width\"\n    [cellHeight]=\"cellDimensions().height\"\n    (resizeMove)=\"onGridResizeMove($event)\"\n    (resizeEnd)=\"onGridResizeEnd($event)\"\n  ></lib-grid-resize-handle>\n  }\n  }\n\n  <!-- Live size badge shown while a resize handle is being dragged. -->\n  @if (gridResizePreview(); as preview) {\n  <div\n    class=\"grid-resize-badge\"\n    [class.grid-resize-badge--clamped]=\"preview.clamped\"\n    i18n=\"@@ngx.dashboard.editor.gridResize.dimensions\"\n  >\n    {{ preview.columns }} \u00D7 {{ preview.rows }}\n  </div>\n  }\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}.grid-resize-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}.grid-resize-badge--clamped{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}\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 }] }], gridResized: [{ type: i0.Output, args: ["gridResized"] }] } });
 
 // dashboard-bridge.service.ts
 /**
@@ -2789,7 +3152,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  */
 class DashboardBridgeService {
     // Map of registered dashboard instances with their reactive dimensions
-    dashboards = signal(new Map(), ...(ngDevMode ? [{ debugName: "dashboards" }] : /* istanbul ignore next */ []));
+    dashboards = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboards" }] : /* istanbul ignore next */ []));
     /**
      * Register a dashboard store instance using its dashboard ID
      */
@@ -2840,7 +3204,8 @@ class DashboardBridgeService {
         }
         // Return dimensions from first available dashboard with fallback for undefined
         return dashboardEntries[0].dimensions() || { width: 100, height: 100 };
-    }, ...(ngDevMode ? [{ debugName: "availableDimensions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableDimensions" }] : /* istanbul ignore next */ []));
     /**
      * Start drag operation on the first available dashboard
      * (Widget lists need some dashboard to coordinate with during drag)
@@ -2863,15 +3228,18 @@ class DashboardBridgeService {
     /**
      * Get all registered dashboard IDs
      */
-    registeredDashboards = computed(() => Array.from(this.dashboards().keys()), ...(ngDevMode ? [{ debugName: "registeredDashboards" }] : /* istanbul ignore next */ []));
+    registeredDashboards = computed(() => Array.from(this.dashboards().keys()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registeredDashboards" }] : /* istanbul ignore next */ []));
     /**
      * Get the number of registered dashboards
      */
-    dashboardCount = computed(() => this.dashboards().size, ...(ngDevMode ? [{ debugName: "dashboardCount" }] : /* istanbul ignore next */ []));
+    dashboardCount = computed(() => this.dashboards().size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboardCount" }] : /* istanbul ignore next */ []));
     /**
      * Check if any dashboards are registered
      */
-    hasDashboards = computed(() => this.dashboards().size > 0, ...(ngDevMode ? [{ debugName: "hasDashboards" }] : /* istanbul ignore next */ []));
+    hasDashboards = computed(() => this.dashboards().size > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasDashboards" }] : /* istanbul ignore next */ []));
     /**
      * Update registration for a dashboard store when its ID becomes available
      */
@@ -2906,10 +3274,10 @@ class DashboardBridgeService {
     getAllDashboards() {
         return this.dashboards();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardBridgeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardBridgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardBridgeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2924,8 +3292,10 @@ class DashboardViewportService {
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
     store = inject(DashboardStore);
-    viewportSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
-    reservedSpace = signal(DEFAULT_RESERVED_SPACE, ...(ngDevMode ? [{ debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
+    viewportSize = signal({ width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
+    reservedSpace = signal(DEFAULT_RESERVED_SPACE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
     resizeObserver = null;
     constructor() {
         if (isPlatformBrowser(this.platformId)) {
@@ -2983,15 +3353,17 @@ class DashboardViewportService {
             width: Math.max(0, viewport.width - reserved.left - reserved.right),
             height: Math.max(0, viewport.height - reserved.top - reserved.bottom)
         };
-    }, ...(ngDevMode ? [{ debugName: "availableSpace" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "availableSpace" }] : /* istanbul ignore next */ []));
     /**
      * Calculate dashboard constraints for this dashboard instance
      */
     constraints = computed(() => {
         const availableSize = this.availableSpace();
-        // Get grid configuration from our component's store
-        const rows = this.store.rows();
-        const columns = this.store.columns();
+        // Use the effective (preview-aware) size so the letterboxed frame reflows
+        // to fit during a grid-resize drag instead of overflowing/scrolling.
+        const rows = this.store.effectiveRows();
+        const columns = this.store.effectiveColumns();
         if (rows === 0 || columns === 0) {
             return {
                 maxWidth: availableSize.width,
@@ -3024,11 +3396,12 @@ class DashboardViewportService {
             maxHeight: Math.max(0, maxHeight),
             constrainedBy
         };
-    }, ...(ngDevMode ? [{ debugName: "constraints" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardViewportService });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "constraints" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardViewportService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardViewportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardViewportService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3046,19 +3419,28 @@ class DashboardComponent {
     store = this.#store;
     viewport = this.#viewport;
     // Component inputs
-    dashboardData = input.required(...(ngDevMode ? [{ debugName: "dashboardData" }] : /* istanbul ignore next */ []));
-    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
-    reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
-    enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
-    selectionModifier = input(null, ...(ngDevMode ? [{ debugName: "selectionModifier" }] : /* istanbul ignore next */ []));
-    dragThreshold = input(4, ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
+    dashboardData = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboardData" }] : /* istanbul ignore next */ []));
+    editMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    reservedSpace = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
+    enableSelection = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
+    selectionModifier = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionModifier" }] : /* istanbul ignore next */ []));
+    dragThreshold = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
     // Component outputs
     selectionComplete = output();
+    gridResized = output();
     // Store signals - shared by both child components
     cells = this.#store.cells;
     // ViewChild references for export/import functionality
-    dashboardEditor = viewChild(DashboardEditorComponent, ...(ngDevMode ? [{ debugName: "dashboardEditor" }] : /* istanbul ignore next */ []));
-    dashboardViewer = viewChild(DashboardViewerComponent, ...(ngDevMode ? [{ debugName: "dashboardViewer" }] : /* istanbul ignore next */ []));
+    dashboardEditor = viewChild(DashboardEditorComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboardEditor" }] : /* istanbul ignore next */ []));
+    dashboardViewer = viewChild(DashboardViewerComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dashboardViewer" }] : /* istanbul ignore next */ []));
     // Track if we're in the middle of preserving states
     #isPreservingStates = false;
     // Track if component has been initialized
@@ -3152,6 +3534,27 @@ class DashboardComponent {
     clearDashboard() {
         this.#store.clearDashboard();
     }
+    /**
+     * Resize the dashboard grid to the given row/column counts.
+     *
+     * Uses a clamp-to-content policy: a size that would push an existing widget
+     * out of bounds is snapped up to the smallest size that still contains every
+     * widget, so shrinking never orphans a widget. The applied size (which may
+     * differ from the request when clamped) is returned and emitted via
+     * `gridResized`. Values below 1 are treated as 1; fractional values are
+     * floored.
+     */
+    setGridSize(rows, columns) {
+        const beforeRows = this.#store.rows();
+        const beforeColumns = this.#store.columns();
+        const result = this.#store.setGridSize(rows, columns);
+        // Only signal a resize when the committed size actually changed, matching
+        // the handle-drag path (store.endGridResize).
+        if (result.rows !== beforeRows || result.columns !== beforeColumns) {
+            this.gridResized.emit(result);
+        }
+        return result;
+    }
     /**
      * Forwards to the active viewer. No-op in edit mode.
      * See `DashboardViewerComponent.clearSelection()`.
@@ -3195,21 +3598,21 @@ class DashboardComponent {
             this.#isPreservingStates = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 }, selectionModifier: { classPropertyName: "selectionModifier", publicName: "selectionModifier", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", 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    [selectionModifier]=\"selectionModifier()\"\n    [dragThreshold]=\"dragThreshold()\"\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", "selectionModifier", "dragThreshold"], 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: "22.0.4", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }, selectionModifier: { classPropertyName: "selectionModifier", publicName: "selectionModifier", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete", gridResized: "gridResized" }, host: { properties: { "style.--rows": "store.effectiveRows()", "style.--columns": "store.effectiveColumns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.effectiveColumns() + 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    (gridResized)=\"gridResized.emit($event)\"\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    [selectionModifier]=\"selectionModifier()\"\n    [dragThreshold]=\"dragThreshold()\"\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", "selectionModifier", "dragThreshold"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"], outputs: ["gridResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             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.--rows]': 'store.effectiveRows()',
+                        '[style.--columns]': 'store.effectiveColumns()',
                         '[style.--gutter-size]': 'store.gutterSize()',
-                        '[style.--gutters]': 'store.columns() + 1',
+                        '[style.--gutters]': 'store.effectiveColumns() + 1',
                         '[class.is-edit-mode]': 'editMode()',
                         '[style.max-width.px]': 'viewport.constraints().maxWidth',
                         '[style.max-height.px]': 'viewport.constraints().maxHeight',
-                    }, 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    [selectionModifier]=\"selectionModifier()\"\n    [dragThreshold]=\"dragThreshold()\"\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 }] }], selectionModifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionModifier", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", 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 }] }] } });
+                    }, 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    (gridResized)=\"gridResized.emit($event)\"\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    [selectionModifier]=\"selectionModifier()\"\n    [dragThreshold]=\"dragThreshold()\"\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 }] }], selectionModifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionModifier", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }], gridResized: [{ type: i0.Output, args: ["gridResized"] }], 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 {
@@ -3218,14 +3621,17 @@ class WidgetListComponent {
     #renderer = inject(Renderer2);
     #bridge = inject(DashboardBridgeService);
     // Input to track collapsed state for tooltip display
-    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    activeWidget = signal(null, ...(ngDevMode ? [{ debugName: "activeWidget" }] : /* istanbul ignore next */ []));
+    collapsed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    activeWidget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeWidget" }] : /* istanbul ignore next */ []));
     // Get grid cell dimensions from bridge service (uses first available dashboard)
     gridCellDimensions = this.#bridge.availableDimensions;
     widgets = computed(() => this.#service.widgetTypes().map((w) => ({
         ...w.metadata,
         safeSvgIcon: this.#sanitizer.bypassSecurityTrustHtml(w.metadata.svgIcon),
-    })), ...(ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []));
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []));
     onDragStart(event, widget) {
         if (!event.dataTransfer)
             return;
@@ -3277,10 +3683,10 @@ 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: "21.2.10", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WidgetListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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: "21.2.10", ngImport: i0, type: WidgetListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.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 -->\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 }] }] } });