@alaarab/ogrid-angular 2.1.9 → 2.1.11

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, getScrollTopForRow, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
+import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, applyFillValues, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, getScrollTopForRow, validateVirtualScrollConfig, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
 export { CELL_PADDING, CHECKBOX_COLUMN_WIDTH, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, Z_INDEX, debounce, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
 import { Injectable, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, inject, DestroyRef, signal, computed, effect, NgZone, EventEmitter, Injector, EnvironmentInjector, createComponent } from '@angular/core';
@@ -1054,7 +1054,11 @@ var DataGridInteractionHelper = class {
     this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
   }
   // --- Keyboard navigation ---
-  handleGridKeyDown(e, items, getRowId, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, editable, wrappedOnCellValueChanged, originalOnCellValueChanged, rowSelection, selectedRowIds, wrapperEl, handleRowCheckboxChange, editingCell, setEditingCell) {
+  handleGridKeyDown(e, items, getRowId, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, editable, wrappedOnCellValueChanged, originalOnCellValueChanged, rowSelection, selectedRowIds, wrapperEl, handleRowCheckboxChange, editingCell, setEditingCell, onKeyDown) {
+    if (onKeyDown) {
+      onKeyDown(e);
+      if (e.defaultPrevented) return;
+    }
     const activeCell = this.activeCellSig();
     const selectionRange = this.selectionRangeSig();
     const maxRowIndex = items.length - 1;
@@ -1099,6 +1103,26 @@ var DataGridInteractionHelper = class {
           void this.handlePaste(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged);
         }
         break;
+      case "d":
+        if (ctrl) {
+          if (editingCell != null) break;
+          if (editable !== false && wrappedOnCellValueChanged != null) {
+            const fillRange = selectionRange ?? (activeCell != null ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset } : null);
+            if (fillRange != null) {
+              e.preventDefault();
+              const norm = normalizeSelectionRange(fillRange);
+              const fillEvents = applyFillValues(norm, norm.startRow, norm.startCol, items, visibleCols);
+              if (fillEvents.length > 0) {
+                this.undoRedoStack.beginBatch();
+                for (const evt of fillEvents) wrappedOnCellValueChanged(evt);
+                this.undoRedoStack.endBatch();
+                this.undoLengthSig.set(this.undoRedoStack.historyLength);
+                this.redoLengthSig.set(this.undoRedoStack.redoLength);
+              }
+            }
+          }
+        }
+        break;
       case "ArrowDown": {
         e.preventDefault();
         const newRow = ctrl ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex))) : Math.min(rowIndex + 1, maxRowIndex);
@@ -1545,6 +1569,43 @@ var DataGridStateService = class {
       if (!p) return false;
       return p.items.length === 0 && !!p.emptyState && !p.isLoading;
     });
+    // --- Stable handler closures (defined once, reused in getState()) ---
+    // These arrow properties ensure Angular change detection receives the same
+    // function reference on every getState() call, avoiding unnecessary re-renders.
+    this._setColumnSizingOverrides = (overrides) => this.layoutHelper.columnSizingOverridesSig.set(overrides);
+    this._updateSelection = (ids) => this.updateSelection(ids);
+    this._handleRowCheckboxChange = (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey);
+    this._handleSelectAll = (checked) => this.handleSelectAll(checked);
+    this._setEditingCell = (cell) => this.setEditingCell(cell);
+    this._setPendingEditorValue = (v) => this.setPendingEditorValue(v);
+    this._commitCellEdit = (item, colId, oldVal, newVal, rowIdx, globalColIdx) => this.commitCellEdit(item, colId, oldVal, newVal, rowIdx, globalColIdx);
+    this._cancelPopoverEdit = () => this.cancelPopoverEdit();
+    this._setPopoverAnchorEl = (el) => this.editingHelper.popoverAnchorElSig.set(el);
+    this._setActiveCell = (cell) => this.setActiveCell(cell);
+    this._setSelectionRange = (range) => this.setSelectionRange(range);
+    this._handleCellMouseDown = (e, r, c) => this.handleCellMouseDown(e, r, c);
+    this._handleSelectAllCells = () => this.handleSelectAllCells();
+    this._handleGridKeyDown = (e) => this.handleGridKeyDown(e);
+    this._handleFillHandleMouseDown = (e) => this.handleFillHandleMouseDown(e);
+    this._handleCopy = () => this.handleCopy();
+    this._handleCut = () => this.handleCut();
+    this._handlePaste = () => this.handlePaste();
+    this._clearClipboardRanges = () => this.clearClipboardRanges();
+    this._onUndo = () => this.undo();
+    this._onRedo = () => this.redo();
+    this._setContextMenuPosition = (pos) => this.setContextMenuPosition(pos);
+    this._handleCellContextMenu = (e) => this.handleCellContextMenu(e);
+    this._closeContextMenu = () => this.closeContextMenu();
+    this._headerFilterOnColumnSort = (columnKey, direction) => this.props()?.onColumnSort(columnKey, direction);
+    this._headerFilterOnFilterChange = (key, value) => this.props()?.onFilterChange(key, value);
+    this._pinColumn = (columnId, side) => this.pinColumn(columnId, side);
+    this._unpinColumn = (columnId) => this.unpinColumn(columnId);
+    this._isPinned = (columnId) => this.isPinned(columnId);
+    this._openHeaderMenu = (columnId, anchorEl) => this.openHeaderMenu(columnId, anchorEl);
+    this._closeHeaderMenu = () => this.closeHeaderMenu();
+    this._headerMenuPinLeft = () => this.headerMenuPinLeft();
+    this._headerMenuPinRight = () => this.headerMenuPinRight();
+    this._headerMenuUnpin = () => this.headerMenuUnpin();
     this.layoutHelper = new DataGridLayoutHelper(this.props, this.wrapperEl, this.ngZone);
     this.interactionHelper = new DataGridInteractionHelper();
     this.editingHelper = new DataGridEditingHelper(
@@ -1724,7 +1785,8 @@ var DataGridStateService = class {
       this.wrapperEl(),
       (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey),
       this.editingHelper.editingCellSig(),
-      (cell) => this.setEditingCell(cell)
+      (cell) => this.setEditingCell(cell),
+      p.onKeyDown
     );
   }
   // --- Fill handle (delegated to interactionHelper + setupFillHandleDrag) ---
@@ -1802,63 +1864,63 @@ var DataGridStateService = class {
       minTableWidth: this.minTableWidth(),
       desiredTableWidth: this.desiredTableWidth(),
       columnSizingOverrides: this.layoutHelper.columnSizingOverridesSig(),
-      setColumnSizingOverrides: (overrides) => this.layoutHelper.columnSizingOverridesSig.set(overrides),
+      setColumnSizingOverrides: this._setColumnSizingOverrides,
       onColumnResized: p?.onColumnResized,
       onAutosizeColumn: p?.onAutosizeColumn
     };
     const rowSelection = {
       selectedRowIds: this.selectedRowIds(),
-      updateSelection: (ids) => this.updateSelection(ids),
-      handleRowCheckboxChange: (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey),
-      handleSelectAll: (checked) => this.handleSelectAll(checked),
+      updateSelection: this._updateSelection,
+      handleRowCheckboxChange: this._handleRowCheckboxChange,
+      handleSelectAll: this._handleSelectAll,
       allSelected: this.allSelected(),
       someSelected: this.someSelected()
     };
     const editing = {
       editingCell: this.editingHelper.editingCellSig(),
-      setEditingCell: (cell) => this.setEditingCell(cell),
+      setEditingCell: this._setEditingCell,
       pendingEditorValue: this.editingHelper.pendingEditorValueSig(),
-      setPendingEditorValue: (v) => this.setPendingEditorValue(v),
-      commitCellEdit: (item, colId, oldVal, newVal, rowIdx, globalColIdx) => this.commitCellEdit(item, colId, oldVal, newVal, rowIdx, globalColIdx),
-      cancelPopoverEdit: () => this.cancelPopoverEdit(),
+      setPendingEditorValue: this._setPendingEditorValue,
+      commitCellEdit: this._commitCellEdit,
+      cancelPopoverEdit: this._cancelPopoverEdit,
       popoverAnchorEl: this.editingHelper.popoverAnchorElSig(),
-      setPopoverAnchorEl: (el) => this.editingHelper.popoverAnchorElSig.set(el)
+      setPopoverAnchorEl: this._setPopoverAnchorEl
     };
     const interaction = {
       activeCell: cellSel ? this.interactionHelper.activeCellSig() : null,
-      setActiveCell: cellSel ? (cell) => this.setActiveCell(cell) : void 0,
+      setActiveCell: cellSel ? this._setActiveCell : void 0,
       selectionRange: cellSel ? this.interactionHelper.selectionRangeSig() : null,
-      setSelectionRange: cellSel ? (range) => this.setSelectionRange(range) : void 0,
-      handleCellMouseDown: cellSel ? (e, r, c) => this.handleCellMouseDown(e, r, c) : NOOP_MOUSE,
-      handleSelectAllCells: cellSel ? () => this.handleSelectAllCells() : NOOP,
+      setSelectionRange: cellSel ? this._setSelectionRange : void 0,
+      handleCellMouseDown: cellSel ? this._handleCellMouseDown : NOOP_MOUSE,
+      handleSelectAllCells: cellSel ? this._handleSelectAllCells : NOOP,
       hasCellSelection: cellSel ? this.hasCellSelection() : false,
-      handleGridKeyDown: cellSel ? (e) => this.handleGridKeyDown(e) : NOOP_KEY,
-      handleFillHandleMouseDown: cellSel ? (e) => this.handleFillHandleMouseDown(e) : void 0,
-      handleCopy: cellSel ? () => this.handleCopy() : NOOP,
-      handleCut: cellSel ? () => this.handleCut() : NOOP,
-      handlePaste: cellSel ? () => this.handlePaste() : NOOP_ASYNC,
+      handleGridKeyDown: cellSel ? this._handleGridKeyDown : NOOP_KEY,
+      handleFillHandleMouseDown: cellSel ? this._handleFillHandleMouseDown : void 0,
+      handleCopy: cellSel ? this._handleCopy : NOOP,
+      handleCut: cellSel ? this._handleCut : NOOP,
+      handlePaste: cellSel ? this._handlePaste : NOOP_ASYNC,
       cutRange: cellSel ? this.interactionHelper.cutRangeSig() : null,
       copyRange: cellSel ? this.interactionHelper.copyRangeSig() : null,
-      clearClipboardRanges: cellSel ? () => this.clearClipboardRanges() : NOOP,
+      clearClipboardRanges: cellSel ? this._clearClipboardRanges : NOOP,
       canUndo: this.canUndo(),
       canRedo: this.canRedo(),
-      onUndo: () => this.undo(),
-      onRedo: () => this.redo(),
+      onUndo: this._onUndo,
+      onRedo: this._onRedo,
       isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false
     };
     const contextMenu = {
       menuPosition: cellSel ? this.interactionHelper.contextMenuPositionSig() : null,
-      setMenuPosition: cellSel ? (pos) => this.setContextMenuPosition(pos) : void 0,
-      handleCellContextMenu: cellSel ? (e) => this.handleCellContextMenu(e) : NOOP_CTX,
-      closeContextMenu: cellSel ? () => this.closeContextMenu() : NOOP
+      setMenuPosition: cellSel ? this._setContextMenuPosition : void 0,
+      handleCellContextMenu: cellSel ? this._handleCellContextMenu : NOOP_CTX,
+      closeContextMenu: cellSel ? this._closeContextMenu : NOOP
     };
     const viewModels = {
       headerFilterInput: {
         sortBy: p?.sortBy,
         sortDirection: p?.sortDirection ?? "asc",
-        onColumnSort: (columnKey, direction) => p?.onColumnSort(columnKey, direction),
+        onColumnSort: this._headerFilterOnColumnSort,
         filters: p?.filters ?? {},
-        onFilterChange: (key, value) => p?.onFilterChange(key, value),
+        onFilterChange: this._headerFilterOnFilterChange,
         filterOptions: p?.filterOptions ?? {},
         loadingFilterOptions: p?.loadingFilterOptions ?? {},
         peopleSearch: p?.peopleSearch
@@ -1884,18 +1946,18 @@ var DataGridStateService = class {
     const currentPinState = openForColumn ? p?.pinnedColumns?.[openForColumn] : void 0;
     const pinning = {
       pinnedColumns: p?.pinnedColumns ?? {},
-      pinColumn: (columnId, side) => this.pinColumn(columnId, side),
-      unpinColumn: (columnId) => this.unpinColumn(columnId),
-      isPinned: (columnId) => this.isPinned(columnId),
+      pinColumn: this._pinColumn,
+      unpinColumn: this._unpinColumn,
+      isPinned: this._isPinned,
       headerMenu: {
         isOpen: this.headerMenuIsOpenSig(),
         openForColumn,
         anchorElement: this.headerMenuAnchorElementSig(),
-        open: (columnId, anchorEl) => this.openHeaderMenu(columnId, anchorEl),
-        close: () => this.closeHeaderMenu(),
-        handlePinLeft: () => this.headerMenuPinLeft(),
-        handlePinRight: () => this.headerMenuPinRight(),
-        handleUnpin: () => this.headerMenuUnpin(),
+        open: this._openHeaderMenu,
+        close: this._closeHeaderMenu,
+        handlePinLeft: this._headerMenuPinLeft,
+        handlePinRight: this._headerMenuPinRight,
+        handleUnpin: this._headerMenuUnpin,
         canPinLeft: currentPinState !== "left",
         canPinRight: currentPinState !== "right",
         canUnpin: !!currentPinState
@@ -2153,7 +2215,7 @@ var ColumnReorderService = class {
 ColumnReorderService = __decorateClass([
   Injectable()
 ], ColumnReorderService);
-var PASSTHROUGH_THRESHOLD = 100;
+var DEFAULT_PASSTHROUGH_THRESHOLD = 100;
 var VirtualScrollService = class {
   constructor() {
     this.destroyRef = inject(DestroyRef);
@@ -2169,8 +2231,9 @@ var VirtualScrollService = class {
     this.rowHeight = computed(() => this.config().rowHeight ?? 36);
     this.overscan = computed(() => this.config().overscan ?? 5);
     this.enabled = computed(() => this.config().enabled !== false);
+    this.threshold = computed(() => this.config().threshold ?? DEFAULT_PASSTHROUGH_THRESHOLD);
     /** Whether virtual scrolling is actually active (enabled + enough rows). */
-    this.isActive = computed(() => this.enabled() && this.totalRows() >= PASSTHROUGH_THRESHOLD);
+    this.isActive = computed(() => this.enabled() && this.totalRows() >= this.threshold());
     /** The visible range of rows with spacer offsets. */
     this.visibleRange = computed(() => {
       if (!this.isActive()) {
@@ -2229,7 +2292,11 @@ var VirtualScrollService = class {
    * Update the virtual scroll configuration.
    */
   updateConfig(updates) {
-    this.config.update((prev) => ({ ...prev, ...updates }));
+    this.config.update((prev) => {
+      const next = { ...prev, ...updates };
+      validateVirtualScrollConfig(next);
+      return next;
+    });
   }
 };
 VirtualScrollService = __decorateClass([
@@ -2679,7 +2746,7 @@ OGridLayoutComponent = __decorateClass([
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-layout-root--fullscreen .ogrid-layout-container {
-      border: none; border-radius: 0 !important;
+      border: none;
     }
     .ogrid-layout-toolbar {
       display: flex; justify-content: space-between; align-items: center;
@@ -2710,7 +2777,7 @@ OGridLayoutComponent = __decorateClass([
   `],
     template: `
     <div [class]="rootClass">
-      <div class="ogrid-layout-container" [style.border-radius.px]="borderRadius">
+      <div class="ogrid-layout-container" [style.border-radius.px]="isFullScreen ? 0 : borderRadius">
         <!-- Toolbar strip -->
         @if (hasToolbar || fullScreen) {
           <div
@@ -3573,7 +3640,15 @@ var BaseDataGridTableComponent = class {
     return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
   }
   resolveCellContent(col, item, displayValue) {
-    return resolveCellDisplayContent(col, item, displayValue);
+    try {
+      return resolveCellDisplayContent(col, item, displayValue);
+    } catch (err) {
+      const onCellError = this.getProps()?.onCellError;
+      if (onCellError) {
+        onCellError(err instanceof Error ? err : new Error(String(err)), void 0);
+      }
+      return "";
+    }
   }
   resolveCellStyleFn(col, item) {
     return resolveCellStyle(col, item);

package/dist/types/services/datagrid-interaction.service.d.ts

@@ -74,7 +74,7 @@ export declare class DataGridInteractionHelper<T> {
     } | null, setEditingCell: (cell: {
         rowId: RowId;
         columnId: string;
-    } | null) => void): void;
+    } | null) => void, onKeyDown?: (event: KeyboardEvent) => void): void;
     onWindowMouseMove(e: MouseEvent, colOffset: number, wrapperEl: HTMLElement | null): void;
     onWindowMouseUp(colOffset: number, wrapperEl: HTMLElement | null): void;
     resolveRangeFromMouse(cx: number, cy: number, colOffset: number): ISelectionRange | null;

package/dist/types/services/datagrid-state.service.d.ts

@@ -255,6 +255,40 @@ export declare class DataGridStateService<T> {
     headerMenuPinLeft(): void;
     headerMenuPinRight(): void;
     headerMenuUnpin(): void;
+    private readonly _setColumnSizingOverrides;
+    private readonly _updateSelection;
+    private readonly _handleRowCheckboxChange;
+    private readonly _handleSelectAll;
+    private readonly _setEditingCell;
+    private readonly _setPendingEditorValue;
+    private readonly _commitCellEdit;
+    private readonly _cancelPopoverEdit;
+    private readonly _setPopoverAnchorEl;
+    private readonly _setActiveCell;
+    private readonly _setSelectionRange;
+    private readonly _handleCellMouseDown;
+    private readonly _handleSelectAllCells;
+    private readonly _handleGridKeyDown;
+    private readonly _handleFillHandleMouseDown;
+    private readonly _handleCopy;
+    private readonly _handleCut;
+    private readonly _handlePaste;
+    private readonly _clearClipboardRanges;
+    private readonly _onUndo;
+    private readonly _onRedo;
+    private readonly _setContextMenuPosition;
+    private readonly _handleCellContextMenu;
+    private readonly _closeContextMenu;
+    private readonly _headerFilterOnColumnSort;
+    private readonly _headerFilterOnFilterChange;
+    private readonly _pinColumn;
+    private readonly _unpinColumn;
+    private readonly _isPinned;
+    private readonly _openHeaderMenu;
+    private readonly _closeHeaderMenu;
+    private readonly _headerMenuPinLeft;
+    private readonly _headerMenuPinRight;
+    private readonly _headerMenuUnpin;
     getState(): DataGridStateResult<T>;
     private onWindowMouseMove;
     private onWindowMouseUp;

package/dist/types/services/virtual-scroll.service.d.ts

@@ -17,6 +17,7 @@ export declare class VirtualScrollService {
     readonly rowHeight: import("@angular/core").Signal<number>;
     readonly overscan: import("@angular/core").Signal<number>;
     readonly enabled: import("@angular/core").Signal<boolean>;
+    readonly threshold: import("@angular/core").Signal<number>;
     /** Whether virtual scrolling is actually active (enabled + enough rows). */
     readonly isActive: import("@angular/core").Signal<boolean>;
     /** The visible range of rows with spacer offsets. */

package/dist/types/types/dataGridTypes.d.ts

@@ -143,4 +143,6 @@ export interface IOGridDataGridProps<T> {
     onCellError?: (error: Error, info: unknown) => void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    /** Custom keydown handler. Called before grid's built-in handling. Call event.preventDefault() to suppress grid default. */
+    onKeyDown?: (event: KeyboardEvent) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.9"
+    "@alaarab/ogrid-core": "2.1.11"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",