@dragonworks/ngx-dashboard 22.0.0 → 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 = '22.0.0';
+const NGX_DASHBOARD_VERSION = '22.1.0';
 
 /**
  * Maximum number of columns supported by the grid.
@@ -559,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,
@@ -722,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) => ({
@@ -948,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;
@@ -957,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());
@@ -1010,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
@@ -1105,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
@@ -1404,8 +1510,7 @@ class CellComponent {
             : false;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
-    isDragActive = computed(() => !!this.#store.dragData(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDragActive" }] : /* istanbul ignore next */ []));
+    isDragActive = this.#store.isDragActive;
     resizeData = this.#store.resizeData;
     gridCellDimensions = this.#store.gridCellDimensions;
     resizeDirection = signal(null, /* @ts-ignore */
@@ -1647,7 +1752,7 @@ class CellComponent {
         return this.widgetState();
     }
     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: [":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 ɵ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: "22.0.4", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
@@ -1657,7 +1762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[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 }] }] } });
 
 /**
@@ -2370,6 +2475,8 @@ class DropZoneComponent {
     ...(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
@@ -2475,12 +2582,12 @@ class DropZoneComponent {
         }
     }
     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 }, 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 ɵ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: "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.
@@ -2709,6 +2816,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
   `, 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');
@@ -2725,8 +2981,8 @@ class DashboardEditorComponent {
     ...(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 */ []));
+    // 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;
@@ -2734,22 +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;
     }, /* @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);
@@ -2771,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;
@@ -2821,10 +3107,22 @@ class DashboardEditorComponent {
         this.#store.handleDrop(event.data, event.target);
         // Note: Store handles all validation and error handling internally
     }
+    // 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 } }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()", "class.is-edit-mode": "true" } }, providers: [
+    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: "22.0.4", ngImport: i0, type: DashboardEditorComponent, decorators: [{
             type: Component,
@@ -2832,17 +3130,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         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
 /**
@@ -3061,9 +3360,10 @@ class DashboardViewportService {
      */
     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,
@@ -3133,6 +3433,7 @@ class DashboardComponent {
     ...(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
@@ -3233,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()`.
@@ -3277,20 +3599,20 @@ class DashboardComponent {
         }
     }
     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" }, 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 ɵ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: "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 {