@dragonworks/ngx-dashboard 21.1.2 → 21.2.1

package/fesm2022/dragonworks-ngx-dashboard.mjs

@@ -23,7 +23,7 @@ import { isPlatformBrowser } from '@angular/common';
 
 // Auto-generated by scripts/generate-versions.js
 // Do not edit manually
-const NGX_DASHBOARD_VERSION = '21.1.2';
+const NGX_DASHBOARD_VERSION = '21.2.1';
 
 /**
  * Maximum number of columns supported by the grid.
@@ -1638,6 +1638,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                     }, template: "<!-- cell.component.html -->\n<div\n  class=\"cell\"\n  [class.is-resizing]=\"isResizing()\"\n  [class.flat]=\"flat() === true\"\n  [draggable]=\"draggable()\"\n  (dragstart)=\"onDragStart($event)\"\n  (dragend)=\"onDragEnd()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div class=\"content-area\">\n    <ng-template #container></ng-template>\n  </div>\n  @if (isEditMode() && !isDragging()) {\n  <!-- Right resize handle -->\n  <div\n    class=\"resize-handle resize-handle--right\"\n    (mousedown)=\"onResizeStart($event, 'horizontal')\"\n  >\n    <div class=\"resize-handle-line\"></div>\n  </div>\n  <!-- Bottom resize handle -->\n  <div\n    class=\"resize-handle resize-handle--bottom\"\n    (mousedown)=\"onResizeStart($event, 'vertical')\"\n  >\n    <div class=\"resize-handle-line\"></div>\n  </div>\n  }\n</div>\n\n@if (isResizing()) {\n<div class=\"resize-preview\" i18n=\"@@ngx.dashboard.cell.resize.dimensions\">\n  {{ resizeData()?.previewColSpan ?? colSpan() }} \u00D7\n  {{ resizeData()?.previewRowSpan ?? rowSpan() }}\n</div>\n}\n", styles: [":host{display:block;width:100%;height:100%;position:relative;z-index:1;container-type:inline-size}:host(.drag-active):not(.is-dragging){pointer-events:none}:host(.is-dragging){z-index:100;opacity:.5;pointer-events:none}:host(.is-dragging) .content-area{pointer-events:none}:host(:hover) .resize-handle{opacity:1}.cell{width:100%;height:100%;border-radius:4px;box-shadow:0 2px 6px #0000001a;padding:0;box-sizing:border-box;overflow:hidden;position:relative;container-type:inline-size}.cell:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.cell.flat{box-shadow:none;border:none}.cell.flat:hover{box-shadow:none;transform:none;border-color:#bdbdbd}.cell.resizing{-webkit-user-select:none;user-select:none}.content-area{width:100%;height:100%;overflow:auto;pointer-events:auto;position:relative;z-index:1}.content-area:hover{transform:initial}:host(:not(.is-dragging)) .cell.flat .content-area{pointer-events:auto}:host(:not(.is-dragging)) .cell.flat .content-area:hover{transform:initial}.resize-handle{position:absolute;z-index:20}.resize-handle--right{cursor:col-resize;width:16px;height:100%;right:-8px;top:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--right:hover{opacity:1}.resize-handle--right:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle--bottom{cursor:row-resize;width:100%;height:16px;bottom:-8px;left:0;display:flex;align-items:center;justify-content:center;opacity:0}.resize-handle--bottom:hover{opacity:1}.resize-handle--bottom:hover .resize-handle-line{background-color:var(--mat-sys-primary-container)}.resize-handle-line{background-color:#0000001a}.resize-handle--right .resize-handle-line{width:8px;height:40px;border-radius:2px}.resize-handle--bottom .resize-handle-line{width:40px;height:8px;border-radius:2px}.resize-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);padding:4px 12px;border-radius:4px;font-size:14px;font-weight:500;pointer-events:none;z-index:30}.cell.is-resizing{opacity:.6}.cell.is-resizing .resize-handle{background-color:#2196f380}:root .cursor-col-resize{cursor:col-resize!important}:root .cursor-row-resize{cursor:row-resize!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { widgetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetId", required: true }] }], cellId: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellId", required: true }] }], widgetFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetFactory", required: false }] }], widgetState: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetState", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }, { type: i0.Output, args: ["rowChange"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }, { type: i0.Output, args: ["columnChange"] }], rowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSpan", required: false }] }], colSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "colSpan", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], settings: [{ type: i0.Output, args: ["settings"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
+/**
+ * Map SelectionModifier values to KeyboardEvent.key values. Compared against
+ * `event.key` directly (rather than the boolean `*Key` flags) so unrelated
+ * keypresses while a modifier is held don't flip the modifier-held state.
+ */
+const MODIFIER_KEY = {
+    shift: 'Shift',
+    ctrl: 'Control',
+    alt: 'Alt',
+    meta: 'Meta',
+};
 class DashboardViewerComponent {
     #store = inject(DashboardStore);
     #renderer = inject(Renderer2);
@@ -1650,6 +1661,16 @@ class DashboardViewerComponent {
     gutters = computed(() => this.columns() + 1, ...(ngDevMode ? [{ debugName: "gutters" }] : /* istanbul ignore next */ []));
     // Selection feature
     enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
+    selectionModifier = input(null, ...(ngDevMode ? [{ debugName: "selectionModifier" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum pointer movement (in CSS pixels) between pointerdown and
+     * pointerup required to emit `selectionComplete`. Below the threshold,
+     * the gesture is treated as a click and no event is emitted.
+     *
+     * Default 4 — matches OS-native click-vs-drag thresholds. Set to 0 to
+     * preserve the legacy behavior where every pointerup emits.
+     */
+    dragThreshold = input(4, ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
     selectionComplete = output();
     // store signals - read-only
     cells = this.#store.cells;
@@ -1657,6 +1678,23 @@ class DashboardViewerComponent {
     isSelecting = signal(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : /* istanbul ignore next */ []));
     selectionStart = signal(null, ...(ngDevMode ? [{ debugName: "selectionStart" }] : /* istanbul ignore next */ []));
     selectionCurrent = signal(null, ...(ngDevMode ? [{ debugName: "selectionCurrent" }] : /* istanbul ignore next */ []));
+    // Modifier-key gating state for selectionModifier
+    #modifierHeld = signal(false, ...(ngDevMode ? [{ debugName: "#modifierHeld" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the selection overlay is currently interactive (intercepts
+     * pointer events). Always false when `enableSelection` is false.
+     * When `selectionModifier` is null, true whenever selection is enabled
+     * (legacy behavior). Otherwise, true only while the configured modifier
+     * is held or a drag is in progress (which keeps the overlay armed
+     * across mid-drag modifier release).
+     */
+    armed = computed(() => {
+        if (!this.enableSelection())
+            return false;
+        if (this.selectionModifier() === null)
+            return true;
+        return this.#modifierHeld() || this.isSelecting();
+    }, ...(ngDevMode ? [{ debugName: "armed" }] : /* istanbul ignore next */ []));
     // Computed selection bounds (normalized)
     selectionBounds = computed(() => {
         const start = this.selectionStart();
@@ -1673,9 +1711,11 @@ class DashboardViewerComponent {
     // Generate array for template iteration
     rowNumbers = computed(() => Array.from({ length: this.rows() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "rowNumbers" }] : /* istanbul ignore next */ []));
     colNumbers = computed(() => Array.from({ length: this.columns() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "colNumbers" }] : /* istanbul ignore next */ []));
-    // Document-level event listeners (cleanup needed)
-    #mouseMoveListener;
-    #mouseUpListener;
+    // Document-level pointer listeners (cleanup needed)
+    #pointerMoveListener;
+    #pointerUpListener;
+    // Pointer position at the start of a drag, for dragThreshold checks
+    #pointerDownPos = signal(null, ...(ngDevMode ? [{ debugName: "#pointerDownPos" }] : /* istanbul ignore next */ []));
     constructor() {
         // Sync grid configuration with store when inputs change
         effect(() => {
@@ -1693,6 +1733,38 @@ class DashboardViewerComponent {
                 this.isSelecting.set(false);
             }
         });
+        // Modifier-key tracking. Only registers document/window listeners when a
+        // modifier is configured, so dashboards using the default (null) pay no
+        // global keystroke cost. Cleans up listeners and resets state on
+        // modifier change or component teardown.
+        effect((onCleanup) => {
+            const modifier = this.selectionModifier();
+            if (modifier === null) {
+                this.#modifierHeld.set(false);
+                return;
+            }
+            const keyName = MODIFIER_KEY[modifier];
+            const offKeyDown = this.#renderer.listen('document', 'keydown', (event) => {
+                if (event.key === keyName) {
+                    this.#modifierHeld.set(true);
+                }
+            });
+            const offKeyUp = this.#renderer.listen('document', 'keyup', (event) => {
+                if (event.key === keyName) {
+                    this.#modifierHeld.set(false);
+                }
+            });
+            // Cover focus-loss cases where keyup may never fire (Alt-Tab, etc.)
+            const offBlur = this.#renderer.listen('window', 'blur', () => {
+                this.#modifierHeld.set(false);
+            });
+            onCleanup(() => {
+                offKeyDown();
+                offKeyUp();
+                offBlur();
+                this.#modifierHeld.set(false);
+            });
+        });
     }
     // Selection methods
     /**
@@ -1708,78 +1780,105 @@ class DashboardViewerComponent {
             col <= bounds.endCol);
     }
     /**
-     * Handle mouse down on ghost cell to start selection
+     * Handle pointer down on a ghost cell to start a selection. Uses
+     * PointerEvent so mouse / touch / pen all work uniformly.
      */
-    onGhostCellMouseDown(event, row, col) {
-        if (!this.enableSelection())
+    onGhostCellPointerDown(event, row, col) {
+        if (!this.armed())
+            return;
+        if (event.pointerType === 'mouse' && event.button !== 0)
             return;
-        if (event.button !== 0)
-            return; // Only left button
         event.preventDefault();
         event.stopPropagation();
         this.isSelecting.set(true);
         this.selectionStart.set({ row, col });
         this.selectionCurrent.set({ row, col });
-        // Add document-level listeners for drag
-        this.#mouseMoveListener = this.#renderer.listen('document', 'mousemove', () => this.onDocumentMouseMove());
-        this.#mouseUpListener = this.#renderer.listen('document', 'mouseup', () => this.onDocumentMouseUp());
-        // Register cleanup
+        this.#pointerDownPos.set({ x: event.clientX, y: event.clientY });
+        const target = event.target;
+        if (target instanceof Element &&
+            typeof target.setPointerCapture === 'function') {
+            try {
+                target.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Capture may be rejected for synthetic / invalid pointer ids;
+                // document-level listeners still receive bubbled events.
+            }
+        }
+        this.#pointerMoveListener = this.#renderer.listen('document', 'pointermove', (e) => this.onDocumentPointerMove(e));
+        this.#pointerUpListener = this.#renderer.listen('document', 'pointerup', (e) => this.onDocumentPointerUp(e));
         this.#destroyRef.onDestroy(() => {
             this.cleanupListeners();
         });
     }
     /**
-     * Handle mouse enter on ghost cell during selection
+     * Track the pointer across cell boundaries during a drag.
+     *
+     * Replaces the old per-cell `mouseenter` handler. Necessary because
+     * pointer capture and (on touch) coalesced events make boundary
+     * crossings unreliable when relying on per-element enter events.
      */
-    onGhostCellMouseEnter(row, col) {
+    onDocumentPointerMove(event) {
         if (!this.isSelecting())
             return;
-        this.selectionCurrent.set({ row, col });
-    }
-    /**
-     * Handle document mouse move during selection
-     */
-    onDocumentMouseMove() {
-        if (!this.isSelecting())
+        const el = document.elementFromPoint(event.clientX, event.clientY);
+        const cell = el?.closest('.selection-ghost-cell');
+        if (!cell)
+            return;
+        const row = Number(cell.dataset['row']);
+        const col = Number(cell.dataset['col']);
+        if (!Number.isFinite(row) || !Number.isFinite(col))
             return;
-        // The actual selection update is handled by onGhostCellMouseEnter
-        // This just ensures we capture the event
+        // Skip updates while still inside the same cell — otherwise pointermove
+        // (60–120 Hz) would re-emit a fresh object reference every frame and
+        // trigger downstream rerenders across the whole overlay grid.
+        const cur = this.selectionCurrent();
+        if (cur && cur.row === row && cur.col === col)
+            return;
+        this.selectionCurrent.set({ row, col });
     }
     /**
-     * Handle document mouse up to complete selection
+     * Complete a selection on pointerup. Emits `selectionComplete` only when
+     * total pointer movement meets `dragThreshold` — sub-threshold gestures
+     * are treated as clicks and discarded.
      */
-    onDocumentMouseUp() {
+    onDocumentPointerUp(event) {
         if (!this.isSelecting())
             return;
         this.isSelecting.set(false);
-        // Emit selection event
-        const bounds = this.selectionBounds();
-        if (bounds) {
-            this.selectionComplete.emit({
-                topLeft: { row: bounds.startRow, col: bounds.startCol },
-                bottomRight: { row: bounds.endRow, col: bounds.endCol },
-            });
+        const start = this.#pointerDownPos();
+        const moved = start === null ||
+            Math.hypot(event.clientX - start.x, event.clientY - start.y) >=
+                this.dragThreshold();
+        if (moved) {
+            const bounds = this.selectionBounds();
+            if (bounds) {
+                this.selectionComplete.emit({
+                    topLeft: { row: bounds.startRow, col: bounds.startCol },
+                    bottomRight: { row: bounds.endRow, col: bounds.endCol },
+                });
+            }
         }
-        // Clean up listeners
+        this.#pointerDownPos.set(null);
         this.cleanupListeners();
-        // Don't clear selection - let the parent control when to clear
-        // Selection remains visible until enableSelection becomes false
+        // Don't clear selection - let the parent control when to clear.
+        // Selection remains visible until enableSelection becomes false.
     }
     /**
      * Clean up document-level event listeners
      */
     cleanupListeners() {
-        if (this.#mouseMoveListener) {
-            this.#mouseMoveListener();
-            this.#mouseMoveListener = undefined;
+        if (this.#pointerMoveListener) {
+            this.#pointerMoveListener();
+            this.#pointerMoveListener = undefined;
         }
-        if (this.#mouseUpListener) {
-            this.#mouseUpListener();
-            this.#mouseUpListener = undefined;
+        if (this.#pointerUpListener) {
+            this.#pointerUpListener();
+            this.#pointerUpListener = undefined;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\n  @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"false\"\n      [draggable]=\"false\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n    >\n    </lib-cell>\n  }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n  <div class=\"selection-overlay-grid\">\n    @for (row of rowNumbers(); track row) {\n      @for (col of colNumbers(); track col) {\n        <div\n          class=\"selection-ghost-cell\"\n          [class.selected]=\"isCellSelected(row, col)\"\n          [class.selecting]=\"isSelecting()\"\n          [style.grid-row]=\"row\"\n          [style.grid-column]=\"col\"\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\n        ></div>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DashboardViewerComponent, isStandalone: true, selector: "ngx-dashboard-viewer", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionModifier: { classPropertyName: "selectionModifier", publicName: "selectionModifier", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "rows()", "style.--columns": "columns()", "style.--gutter-size": "gutterSize()", "style.--gutters": "gutters()" } }, viewQueries: [{ propertyName: "cellComponents", predicate: CellComponent, descendants: true, isSignal: true }, { propertyName: "gridElement", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\n  @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"false\"\n      [draggable]=\"false\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n    >\n    </lib-cell>\n  }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n  <div class=\"selection-overlay-grid\" [class.armed]=\"armed()\">\n    @for (row of rowNumbers(); track row) {\n      @for (col of colNumbers(); track col) {\n        <div\n          class=\"selection-ghost-cell\"\n          [class.selected]=\"isCellSelected(row, col)\"\n          [class.selecting]=\"isSelecting()\"\n          [style.grid-row]=\"row\"\n          [style.grid-column]=\"col\"\n          [attr.data-row]=\"row\"\n          [attr.data-col]=\"col\"\n          (pointerdown)=\"onGhostCellPointerDown($event, row, col)\"\n        ></div>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none}.selection-overlay-grid.armed{pointer-events:auto}.selection-ghost-cell{transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-overlay-grid.armed .selection-ghost-cell{cursor:crosshair}.selection-overlay-grid.armed .selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-overlay-grid.armed .selection-ghost-cell.selecting{cursor:crosshair}\n"], dependencies: [{ kind: "component", type: CellComponent, selector: "lib-cell", inputs: ["widgetId", "cellId", "widgetFactory", "widgetState", "isEditMode", "flat", "row", "column", "rowSpan", "colSpan", "draggable"], outputs: ["rowChange", "columnChange", "dragStart", "dragEnd", "edit", "delete", "settings", "resizeStart", "resizeMove", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardViewerComponent, decorators: [{
             type: Component,
@@ -1788,8 +1887,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         '[style.--columns]': 'columns()',
                         '[style.--gutter-size]': 'gutterSize()',
                         '[style.--gutters]': 'gutters()',
-                    }, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\n  @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"false\"\n      [draggable]=\"false\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n    >\n    </lib-cell>\n  }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n  <div class=\"selection-overlay-grid\">\n    @for (row of rowNumbers(); track row) {\n      @for (col of colNumbers(); track col) {\n        <div\n          class=\"selection-ghost-cell\"\n          [class.selected]=\"isCellSelected(row, col)\"\n          [class.selecting]=\"isSelecting()\"\n          [style.grid-row]=\"row\"\n          [style.grid-column]=\"col\"\n          (mousedown)=\"onGhostCellMouseDown($event, row, col)\"\n          (mouseenter)=\"onGhostCellMouseEnter(row, col)\"\n        ></div>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:auto;-webkit-user-select:none;user-select:none}.selection-ghost-cell{cursor:crosshair;transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-ghost-cell.selecting{cursor:crosshair}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CellComponent), { isSignal: true }] }], gridElement: [{ type: i0.ViewChild, args: ['gridElement', { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }] } });
+                    }, template: "<!-- Dashboard viewer - read-only grid -->\n<div class=\"grid top-grid\" #gridElement>\n  @for (cell of cells(); track cell.widgetId) {\n    <lib-cell\n      class=\"grid-cell\"\n      [widgetId]=\"cell.widgetId\"\n      [cellId]=\"cell.cellId\"\n      [isEditMode]=\"false\"\n      [draggable]=\"false\"\n      [row]=\"cell.row\"\n      [column]=\"cell.col\"\n      [rowSpan]=\"cell.rowSpan\"\n      [colSpan]=\"cell.colSpan\"\n      [flat]=\"cell.flat\"\n      [widgetFactory]=\"cell.widgetFactory\"\n      [widgetState]=\"cell.widgetState\"\n    >\n    </lib-cell>\n  }\n</div>\n\n<!-- Selection overlay grid - mirror of main grid for cell selection -->\n@if (enableSelection()) {\n  <div class=\"selection-overlay-grid\" [class.armed]=\"armed()\">\n    @for (row of rowNumbers(); track row) {\n      @for (col of colNumbers(); track col) {\n        <div\n          class=\"selection-ghost-cell\"\n          [class.selected]=\"isCellSelected(row, col)\"\n          [class.selecting]=\"isSelecting()\"\n          [style.grid-row]=\"row\"\n          [style.grid-column]=\"col\"\n          [attr.data-row]=\"row\"\n          [attr.data-col]=\"col\"\n          (pointerdown)=\"onGhostCellPointerDown($event, row, col)\"\n        ></div>\n      }\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--cell-size: calc( 100cqi / var(--columns) - var(--gutter-size) * var(--gutters) / var(--columns) );--tile-size: calc(var(--cell-size) + var(--gutter-size));--tile-offset: calc( var(--gutter-size) + var(--cell-size) + var(--gutter-size) / 2 );display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto;position:relative;background-color:var(--mat-sys-surface-container)}.grid{display:grid;gap:var(--gutter-size);padding:var(--gutter-size);width:100%;height:100%;box-sizing:border-box;grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size))}.grid-cell{pointer-events:none}.grid-cell:not(.flat){pointer-events:auto;cursor:default}.grid-cell:not(.flat) .content-area{pointer-events:none}.top-grid{z-index:2;pointer-events:none}.selection-overlay-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;gap:var(--gutter-size);padding:var(--gutter-size);grid-template-columns:repeat(var(--columns),var(--cell-size));grid-template-rows:repeat(var(--rows),var(--cell-size));z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none}.selection-overlay-grid.armed{pointer-events:auto}.selection-ghost-cell{transition:background-color .1s ease,border-radius .1s ease;border-radius:2px}.selection-ghost-cell.selected{background-color:var(--mat-sys-primary);opacity:.25;border-radius:4px}.selection-overlay-grid.armed .selection-ghost-cell{cursor:crosshair}.selection-overlay-grid.armed .selection-ghost-cell:hover:not(.selecting){background-color:var(--mat-sys-primary);opacity:.08}.selection-overlay-grid.armed .selection-ghost-cell.selecting{cursor:crosshair}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cellComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CellComponent), { isSignal: true }] }], gridElement: [{ type: i0.ViewChild, args: ['gridElement', { isSignal: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], 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"] }] } });
 
 class CellContextMenuComponent {
     menuTrigger = viewChild.required('menuTrigger', { read: MatMenuTrigger });
@@ -2942,6 +3041,8 @@ class DashboardComponent {
     editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
     reservedSpace = input(...(ngDevMode ? [undefined, { debugName: "reservedSpace" }] : /* istanbul ignore next */ []));
     enableSelection = input(false, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
+    selectionModifier = input(null, ...(ngDevMode ? [{ debugName: "selectionModifier" }] : /* istanbul ignore next */ []));
+    dragThreshold = input(4, ...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
     // Component outputs
     selectionComplete = output();
     // Store signals - shared by both child components
@@ -3079,7 +3180,7 @@ class DashboardComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\n<div class=\"grid-container\">\n  @if (editMode()) {\n  <!-- Full editor with drag & drop capabilities -->\n  <ngx-dashboard-editor\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n  ></ngx-dashboard-editor>\n  } @else {\n  <!-- Read-only viewer -->\n  <ngx-dashboard-viewer\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n    [enableSelection]=\"enableSelection()\"\n    (selectionComplete)=\"selectionComplete.emit($event)\"\n  ></ngx-dashboard-viewer>\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize", "enableSelection"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DashboardComponent, isStandalone: true, selector: "ngx-dashboard", inputs: { dashboardData: { classPropertyName: "dashboardData", publicName: "dashboardData", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, reservedSpace: { classPropertyName: "reservedSpace", publicName: "reservedSpace", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionModifier: { classPropertyName: "selectionModifier", publicName: "selectionModifier", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionComplete: "selectionComplete" }, host: { properties: { "style.--rows": "store.rows()", "style.--columns": "store.columns()", "style.--gutter-size": "store.gutterSize()", "style.--gutters": "store.columns() + 1", "class.is-edit-mode": "editMode()", "style.max-width.px": "viewport.constraints().maxWidth", "style.max-height.px": "viewport.constraints().maxHeight" } }, providers: [DashboardStore, DashboardViewportService], viewQueries: [{ propertyName: "dashboardEditor", first: true, predicate: DashboardEditorComponent, descendants: true, isSignal: true }, { propertyName: "dashboardViewer", first: true, predicate: DashboardViewerComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!-- dashboard.component.html -->\n<div class=\"grid-container\">\n  @if (editMode()) {\n  <!-- Full editor with drag & drop capabilities -->\n  <ngx-dashboard-editor\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n  ></ngx-dashboard-editor>\n  } @else {\n  <!-- Read-only viewer -->\n  <ngx-dashboard-viewer\n    [rows]=\"store.rows()\"\n    [columns]=\"store.columns()\"\n    [gutterSize]=\"store.gutterSize()\"\n    [enableSelection]=\"enableSelection()\"\n    [selectionModifier]=\"selectionModifier()\"\n    [dragThreshold]=\"dragThreshold()\"\n    (selectionComplete)=\"selectionComplete.emit($event)\"\n  ></ngx-dashboard-viewer>\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: DashboardViewerComponent, selector: "ngx-dashboard-viewer", inputs: ["rows", "columns", "gutterSize", "enableSelection", "selectionModifier", "dragThreshold"], outputs: ["selectionComplete"] }, { kind: "component", type: DashboardEditorComponent, selector: "ngx-dashboard-editor", inputs: ["rows", "columns", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
@@ -3091,8 +3192,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         '[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    (selectionComplete)=\"selectionComplete.emit($event)\"\n  ></ngx-dashboard-viewer>\n  }\n</div>\n", styles: [":host{display:block;container-type:inline-size;box-sizing:border-box;aspect-ratio:var(--columns)/var(--rows);width:100%;height:auto}.grid-container{position:relative;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dashboardData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dashboardData", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], reservedSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "reservedSpace", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], selectionComplete: [{ type: i0.Output, args: ["selectionComplete"] }], dashboardEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardEditorComponent), { isSignal: true }] }], dashboardViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DashboardViewerComponent), { isSignal: true }] }] } });
+                    }, 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 }] }] } });
 
 // widget-list.component.ts
 class WidgetListComponent {