@alaarab/ogrid-angular 2.6.0 → 2.7.0

package/dist/esm/components/base-datagrid-table.component.js

@@ -0,0 +1,777 @@
+import { Directive, signal, computed, effect, inject } from '@angular/core';
+import { DataGridStateService } from '../services/datagrid-state.service';
+import { ColumnReorderService } from '../services/column-reorder.service';
+import { VirtualScrollService } from '../services/virtual-scroll.service';
+import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, measureColumnContentWidth, estimateHeaderMinWidth, partitionColumnsForVirtualization, handleBooleanCellPointerDown, } from '@alaarab/ogrid-core';
+import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, } from '../utils';
+import * as i0 from "@angular/core";
+/**
+ * Abstract base class containing all shared TypeScript logic for DataGridTable components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Call `initBase()` in the constructor (effects require injection context)
+ * 3. Implement abstract accessors for propsInput, wrapperRef, and tableContainerRef
+ */
+export class BaseDataGridTableComponent {
+    constructor() {
+        this.stateService = inject(DataGridStateService);
+        this.columnReorderService = inject(ColumnReorderService);
+        this.virtualScrollService = inject(VirtualScrollService);
+        this.lastMouseShift = false;
+        this.columnSizingVersion = signal(0, ...(ngDevMode ? [{ debugName: "columnSizingVersion" }] : []));
+        /** Dirty flag  -  set when column layout changes, cleared after measurement. */
+        this.measureDirty = signal(true, ...(ngDevMode ? [{ debugName: "measureDirty" }] : []));
+        /** DOM-measured column widths from the last layout pass.
+         *  Used as a minWidth floor to prevent columns from shrinking
+         *  when new data loads (e.g. server-side pagination). */
+        this.measuredColumnWidths = signal({}, ...(ngDevMode ? [{ debugName: "measuredColumnWidths" }] : []));
+        // Signal-backed view child elements  -  set from ngAfterViewInit.
+        // @ViewChild is a plain property (not a signal), so effects/computed that read it
+        // only evaluate once during construction when the ref is still undefined.
+        this.wrapperElSignal = signal(null, ...(ngDevMode ? [{ debugName: "wrapperElSignal" }] : []));
+        this.tableContainerElSignal = signal(null, ...(ngDevMode ? [{ debugName: "tableContainerElSignal" }] : []));
+        // --- Delegated state ---
+        this.state = computed(() => this.stateService.getState(), ...(ngDevMode ? [{ debugName: "state" }] : []));
+        // Intermediate computed signals  -  narrow slices of state() so leaf computeds
+        // only recompute when their specific sub-state changes.
+        this.layoutState = computed(() => this.state().layout, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
+        this.rowSelectionState = computed(() => this.state().rowSelection, ...(ngDevMode ? [{ debugName: "rowSelectionState" }] : []));
+        this.editingState = computed(() => this.state().editing, ...(ngDevMode ? [{ debugName: "editingState" }] : []));
+        this.interactionState = computed(() => this.state().interaction, ...(ngDevMode ? [{ debugName: "interactionState" }] : []));
+        this.contextMenuState = computed(() => this.state().contextMenu, ...(ngDevMode ? [{ debugName: "contextMenuState" }] : []));
+        this.viewModelsState = computed(() => this.state().viewModels, ...(ngDevMode ? [{ debugName: "viewModelsState" }] : []));
+        this.pinningState = computed(() => this.state().pinning, ...(ngDevMode ? [{ debugName: "pinningState" }] : []));
+        this.tableContainerEl = computed(() => this.tableContainerElSignal(), ...(ngDevMode ? [{ debugName: "tableContainerEl" }] : []));
+        this.items = computed(() => this.getProps()?.items ?? [], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item['id']), ...(ngDevMode ? [{ debugName: "getRowId" }] : []));
+        this.isLoading = computed(() => this.getProps()?.isLoading ?? false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.loadingMessage = computed(() => 'Loading\u2026', ...(ngDevMode ? [{ debugName: "loadingMessage" }] : []));
+        this.layoutModeFit = computed(() => (this.getProps()?.layoutMode ?? 'fill') === 'content', ...(ngDevMode ? [{ debugName: "layoutModeFit" }] : []));
+        this.rowHeightCssVar = computed(() => {
+            const rh = this.getProps()?.rowHeight;
+            return rh ? `${rh}px` : null;
+        }, ...(ngDevMode ? [{ debugName: "rowHeightCssVar" }] : []));
+        this.ariaLabel = computed(() => this.getProps()?.['aria-label'] ?? 'Data grid', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        this.ariaLabelledBy = computed(() => this.getProps()?.['aria-labelledby'], ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+        this.stickyHeader = computed(() => this.getProps()?.stickyHeader ?? true, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : []));
+        this.emptyState = computed(() => this.getProps()?.emptyState, ...(ngDevMode ? [{ debugName: "emptyState" }] : []));
+        this.currentPage = computed(() => this.getProps()?.currentPage ?? 1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+        this.pageSize = computed(() => this.getProps()?.pageSize ?? 25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+        this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0, ...(ngDevMode ? [{ debugName: "rowNumberOffset" }] : []));
+        this.propsVisibleColumns = computed(() => this.getProps()?.visibleColumns, ...(ngDevMode ? [{ debugName: "propsVisibleColumns" }] : []));
+        this.propsColumnOrder = computed(() => this.getProps()?.columnOrder, ...(ngDevMode ? [{ debugName: "propsColumnOrder" }] : []));
+        // State service outputs  -  read from narrow intermediate signals
+        this.visibleCols = computed(() => this.layoutState().visibleCols, ...(ngDevMode ? [{ debugName: "visibleCols" }] : []));
+        this.hasCheckboxCol = computed(() => this.layoutState().hasCheckboxCol, ...(ngDevMode ? [{ debugName: "hasCheckboxCol" }] : []));
+        this.hasRowNumbersCol = computed(() => this.layoutState().hasRowNumbersCol, ...(ngDevMode ? [{ debugName: "hasRowNumbersCol" }] : []));
+        this.colOffset = computed(() => this.layoutState().colOffset, ...(ngDevMode ? [{ debugName: "colOffset" }] : []));
+        this.containerWidth = computed(() => this.layoutState().containerWidth, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+        this.minTableWidth = computed(() => this.layoutState().minTableWidth, ...(ngDevMode ? [{ debugName: "minTableWidth" }] : []));
+        this.desiredTableWidth = computed(() => this.layoutState().desiredTableWidth, ...(ngDevMode ? [{ debugName: "desiredTableWidth" }] : []));
+        this.columnSizingOverrides = computed(() => this.layoutState().columnSizingOverrides, ...(ngDevMode ? [{ debugName: "columnSizingOverrides" }] : []));
+        this.selectedRowIds = computed(() => this.rowSelectionState().selectedRowIds, ...(ngDevMode ? [{ debugName: "selectedRowIds" }] : []));
+        this.allSelected = computed(() => this.rowSelectionState().allSelected, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+        this.someSelected = computed(() => this.rowSelectionState().someSelected, ...(ngDevMode ? [{ debugName: "someSelected" }] : []));
+        this.editingCell = computed(() => this.editingState().editingCell, ...(ngDevMode ? [{ debugName: "editingCell" }] : []));
+        this.pendingEditorValue = computed(() => this.editingState().pendingEditorValue, ...(ngDevMode ? [{ debugName: "pendingEditorValue" }] : []));
+        this.activeCell = computed(() => this.interactionState().activeCell, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
+        this.selectionRange = computed(() => this.interactionState().selectionRange, ...(ngDevMode ? [{ debugName: "selectionRange" }] : []));
+        this.hasCellSelection = computed(() => this.interactionState().hasCellSelection, ...(ngDevMode ? [{ debugName: "hasCellSelection" }] : []));
+        this.cutRange = computed(() => this.interactionState().cutRange, ...(ngDevMode ? [{ debugName: "cutRange" }] : []));
+        this.copyRange = computed(() => this.interactionState().copyRange, ...(ngDevMode ? [{ debugName: "copyRange" }] : []));
+        this.canUndo = computed(() => this.interactionState().canUndo, ...(ngDevMode ? [{ debugName: "canUndo" }] : []));
+        this.canRedo = computed(() => this.interactionState().canRedo, ...(ngDevMode ? [{ debugName: "canRedo" }] : []));
+        this.isDragging = computed(() => this.interactionState().isDragging, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.menuPosition = computed(() => this.contextMenuState().menuPosition, ...(ngDevMode ? [{ debugName: "menuPosition" }] : []));
+        this.statusBarConfig = computed(() => this.viewModelsState().statusBarConfig, ...(ngDevMode ? [{ debugName: "statusBarConfig" }] : []));
+        this.showEmptyInGrid = computed(() => this.viewModelsState().showEmptyInGrid, ...(ngDevMode ? [{ debugName: "showEmptyInGrid" }] : []));
+        this.headerFilterInput = computed(() => this.viewModelsState().headerFilterInput, ...(ngDevMode ? [{ debugName: "headerFilterInput" }] : []));
+        this.cellDescriptorInput = computed(() => this.viewModelsState().cellDescriptorInput, ...(ngDevMode ? [{ debugName: "cellDescriptorInput" }] : []));
+        // Pinning state
+        this.pinnedColumnsMap = computed(() => this.pinningState().pinnedColumns, ...(ngDevMode ? [{ debugName: "pinnedColumnsMap" }] : []));
+        // Virtual scrolling
+        this.vsEnabled = computed(() => this.virtualScrollService.isActive(), ...(ngDevMode ? [{ debugName: "vsEnabled" }] : []));
+        this.vsVisibleRange = computed(() => this.virtualScrollService.visibleRange(), ...(ngDevMode ? [{ debugName: "vsVisibleRange" }] : []));
+        this.vsTopSpacerHeight = computed(() => {
+            if (!this.vsEnabled())
+                return 0;
+            return this.vsVisibleRange().offsetTop;
+        }, ...(ngDevMode ? [{ debugName: "vsTopSpacerHeight" }] : []));
+        this.vsBottomSpacerHeight = computed(() => {
+            if (!this.vsEnabled())
+                return 0;
+            return this.vsVisibleRange().offsetBottom;
+        }, ...(ngDevMode ? [{ debugName: "vsBottomSpacerHeight" }] : []));
+        this.vsVisibleItems = computed(() => {
+            const items = this.items();
+            if (!this.vsEnabled())
+                return items;
+            const range = this.vsVisibleRange();
+            return items.slice(range.startIndex, Math.min(range.endIndex + 1, items.length));
+        }, ...(ngDevMode ? [{ debugName: "vsVisibleItems" }] : []));
+        this.vsStartIndex = computed(() => {
+            if (!this.vsEnabled())
+                return 0;
+            return this.vsVisibleRange().startIndex;
+        }, ...(ngDevMode ? [{ debugName: "vsStartIndex" }] : []));
+        // Column virtualization
+        this.vsColumnsEnabled = computed(() => this.virtualScrollService.columnsEnabled(), ...(ngDevMode ? [{ debugName: "vsColumnsEnabled" }] : []));
+        this.vsColumnRange = computed(() => this.virtualScrollService.columnRange(), ...(ngDevMode ? [{ debugName: "vsColumnRange" }] : []));
+        /** Partitioned columns for column virtualization: pinned-left, virtualized-unpinned, pinned-right, with spacer widths. */
+        this.vsColumnPartition = computed(() => {
+            if (!this.vsColumnsEnabled())
+                return null;
+            const cols = this.visibleCols();
+            const range = this.vsColumnRange();
+            const props = this.getProps();
+            const pinnedCols = props?.pinnedColumns;
+            return partitionColumnsForVirtualization(cols, range, pinnedCols);
+        }, ...(ngDevMode ? [{ debugName: "vsColumnPartition" }] : []));
+        /** Column layouts filtered by column virtualization range (or all if column virt is off). */
+        this.vsColumnLayouts = computed(() => {
+            const allLayouts = this.columnLayouts();
+            const partition = this.vsColumnPartition();
+            if (!partition)
+                return allLayouts;
+            // Build a set of visible column IDs from the partition
+            const visibleIds = new Set();
+            for (const col of partition.pinnedLeft)
+                visibleIds.add(col.columnId);
+            for (const col of partition.virtualizedUnpinned)
+                visibleIds.add(col.columnId);
+            for (const col of partition.pinnedRight)
+                visibleIds.add(col.columnId);
+            return allLayouts.filter(layout => visibleIds.has(layout.col.columnId));
+        }, ...(ngDevMode ? [{ debugName: "vsColumnLayouts" }] : []));
+        /** Visible columns filtered by column virtualization range (or all if column virt is off). */
+        this.vsVisibleCols = computed(() => {
+            const allCols = this.visibleCols();
+            const partition = this.vsColumnPartition();
+            if (!partition)
+                return allCols;
+            const visibleIds = new Set();
+            for (const col of partition.pinnedLeft)
+                visibleIds.add(col.columnId);
+            for (const col of partition.virtualizedUnpinned)
+                visibleIds.add(col.columnId);
+            for (const col of partition.pinnedRight)
+                visibleIds.add(col.columnId);
+            return allCols.filter(col => visibleIds.has(col.columnId));
+        }, ...(ngDevMode ? [{ debugName: "vsVisibleCols" }] : []));
+        /** Left spacer width for column virtualization (in pixels). */
+        this.vsLeftSpacerWidth = computed(() => this.vsColumnPartition()?.leftSpacerWidth ?? 0, ...(ngDevMode ? [{ debugName: "vsLeftSpacerWidth" }] : []));
+        /** Right spacer width for column virtualization (in pixels). */
+        this.vsRightSpacerWidth = computed(() => this.vsColumnPartition()?.rightSpacerWidth ?? 0, ...(ngDevMode ? [{ debugName: "vsRightSpacerWidth" }] : []));
+        /** Map from columnId to its global index in visibleCols. Used to maintain correct colIdx for cell descriptors during column virtualization. */
+        this.globalColIndexMap = computed(() => {
+            const cols = this.visibleCols();
+            const map = new Map();
+            for (let i = 0; i < cols.length; i++) {
+                map.set(cols[i].columnId, i);
+            }
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "globalColIndexMap" }] : []));
+        // Popover editing
+        this.popoverAnchorEl = computed(() => this.editingState().popoverAnchorEl, ...(ngDevMode ? [{ debugName: "popoverAnchorEl" }] : []));
+        this.pendingEditorValueForPopover = computed(() => this.editingState().pendingEditorValue, ...(ngDevMode ? [{ debugName: "pendingEditorValueForPopover" }] : []));
+        this.allowOverflowX = computed(() => {
+            const p = this.getProps();
+            if (p?.suppressHorizontalScroll)
+                return false;
+            const cw = this.containerWidth();
+            const mtw = this.minTableWidth();
+            const dtw = this.desiredTableWidth();
+            return cw > 0 && (mtw > cw || dtw > cw);
+        }, ...(ngDevMode ? [{ debugName: "allowOverflowX" }] : []));
+        this.selectionCellCount = computed(() => {
+            const sr = this.selectionRange();
+            if (!sr)
+                return undefined;
+            return (Math.abs(sr.endRow - sr.startRow) + 1) * (Math.abs(sr.endCol - sr.startCol) + 1);
+        }, ...(ngDevMode ? [{ debugName: "selectionCellCount" }] : []));
+        // Header rows from column definition
+        this.headerRows = computed(() => {
+            const p = this.getProps();
+            if (!p)
+                return [];
+            return buildHeaderRows(p.columns, p.visibleColumns);
+        }, ...(ngDevMode ? [{ debugName: "headerRows" }] : []));
+        // Pre-computed column layouts
+        this.columnLayouts = computed(() => {
+            const cols = this.visibleCols();
+            const props = this.getProps();
+            const pinnedCols = props?.pinnedColumns ?? {};
+            const measuredWidths = this.measuredColumnWidths();
+            const sizingOverrides = this.columnSizingOverrides();
+            return cols.map((col) => {
+                const runtimePinned = pinnedCols[col.columnId];
+                const pinnedLeft = runtimePinned === 'left' || col.pinned === 'left';
+                const pinnedRight = runtimePinned === 'right' || col.pinned === 'right';
+                const w = this.getColumnWidth(col);
+                // Use previously-measured DOM width as a minWidth floor to prevent columns
+                // from shrinking when new data loads (e.g. server-side pagination).
+                const hasResizeOverride = !!sizingOverrides[col.columnId];
+                const measuredW = measuredWidths[col.columnId];
+                const baseMinWidth = col.minWidth ?? estimateHeaderMinWidth(col.name);
+                const effectiveMinWidth = hasResizeOverride ? w : Math.max(baseMinWidth, measuredW ?? 0);
+                return {
+                    col,
+                    pinnedLeft,
+                    pinnedRight,
+                    minWidth: effectiveMinWidth,
+                    width: w,
+                    cssWidth: col.width,
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "columnLayouts" }] : []));
+        // Compute sticky offsets for pinned columns (single pass from both ends)
+        this.pinningOffsets = computed(() => {
+            const layouts = this.columnLayouts();
+            const leftOffsets = {};
+            const rightOffsets = {};
+            let leftAcc = 0;
+            if (this.hasCheckboxCol())
+                leftAcc += CHECKBOX_COLUMN_WIDTH;
+            if (this.hasRowNumbersCol())
+                leftAcc += this.getRowNumberWidth();
+            let rightAcc = 0;
+            const len = layouts.length;
+            for (let i = 0; i < len; i++) {
+                // Left-pinned: walk forward
+                const leftLayout = layouts[i];
+                if (leftLayout.pinnedLeft) {
+                    leftOffsets[leftLayout.col.columnId] = leftAcc;
+                    leftAcc += leftLayout.width + CELL_PADDING;
+                }
+                // Right-pinned: walk backward
+                const ri = len - 1 - i;
+                const rightLayout = layouts[ri];
+                if (rightLayout.pinnedRight) {
+                    rightOffsets[rightLayout.col.columnId] = rightAcc;
+                    rightAcc += rightLayout.width + CELL_PADDING;
+                }
+            }
+            return { leftOffsets, rightOffsets };
+        }, ...(ngDevMode ? [{ debugName: "pinningOffsets" }] : []));
+        /** Memoized column menu handlers  -  avoids recreating objects on every CD cycle */
+        this.columnMenuHandlersMap = computed(() => {
+            const cols = this.visibleCols();
+            const map = new Map();
+            for (const col of cols) {
+                map.set(col.columnId, this.buildColumnMenuHandlers(col.columnId));
+            }
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "columnMenuHandlersMap" }] : []));
+    }
+    /** Lifecycle hook  -  populate element signals from @ViewChild refs */
+    ngAfterViewInit() {
+        const wrapper = this.getWrapperRef()?.nativeElement ?? null;
+        const tableContainer = this.getTableContainerRef()?.nativeElement ?? null;
+        if (wrapper)
+            this.wrapperElSignal.set(wrapper);
+        if (tableContainer)
+            this.tableContainerElSignal.set(tableContainer);
+        this.measureColumnWidths();
+    }
+    /** Lifecycle hook  -  re-measure column widths only when layout changed */
+    ngAfterViewChecked() {
+        if (this.measureDirty()) {
+            this.measureDirty.set(false);
+            this.measureColumnWidths();
+        }
+    }
+    /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
+     *  Only updates the signal when values actually change, to avoid render loops. */
+    measureColumnWidths() {
+        const wrapper = this.getWrapperRef()?.nativeElement;
+        if (!wrapper)
+            return;
+        const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+        if (headerCells.length === 0)
+            return;
+        const measured = {};
+        headerCells.forEach((cell) => {
+            const colId = cell.getAttribute('data-column-id');
+            if (colId)
+                measured[colId] = cell.offsetWidth;
+        });
+        // Only update signal if values changed to avoid triggering computed re-evaluations unnecessarily
+        const prev = this.measuredColumnWidths();
+        let changed = Object.keys(measured).length !== Object.keys(prev).length;
+        if (!changed) {
+            for (const key in measured) {
+                if (prev[key] !== measured[key]) {
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (changed) {
+            this.measuredColumnWidths.set(measured);
+        }
+    }
+    /** Get global column index for a column (correct even during column virtualization). */
+    getGlobalColIndex(col) {
+        return this.globalColIndexMap().get(col.columnId) ?? 0;
+    }
+    /** Returns the effective row number column width (from overrides or default). */
+    getRowNumberWidth() {
+        const overrides = this.columnSizingOverrides();
+        const override = overrides[ROW_NUMBER_COLUMN_ID];
+        return override ? override.widthPx : ROW_NUMBER_COLUMN_WIDTH;
+    }
+    /**
+     * Initialize base wiring effects. Must be called from subclass constructor.
+     *
+     * **Timing:** Angular requires `effect()` to be created inside an injection
+     * context (constructor or field initializer). On the first run, signals like
+     * `wrapperElSignal()` return `null` because the DOM hasn't been created yet.
+     * After `ngAfterViewInit` sets these signals, Angular's signal graph
+     * automatically re-runs each effect. The null guards inside each effect body
+     * ensure the first (null) run is a safe no-op.
+     *
+     * Sequence:
+     *   1. Constructor  to  `initBase()`  to  effects created, first run (signals null  to  no-ops)
+     *   2. `ngAfterViewInit`  to  `wrapperElSignal.set(el)`  to  effects re-run with real values
+     */
+    initBase() {
+        // Wire props to state service
+        effect(() => {
+            const p = this.getProps();
+            if (p)
+                this.stateService.props.set(p);
+        });
+        // Wire wrapper element (reads from signal populated by ngAfterViewInit)
+        effect(() => {
+            const el = this.wrapperElSignal();
+            if (el) {
+                this.stateService.wrapperEl.set(el);
+                this.columnReorderService.wrapperEl.set(el);
+            }
+        });
+        // Wire column reorder service inputs
+        effect(() => {
+            const p = this.getProps();
+            if (p) {
+                const cols = this.visibleCols();
+                this.columnReorderService.columns.set(cols);
+                this.columnReorderService.columnOrder.set(p.columnOrder);
+                this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
+                this.columnReorderService.enabled.set(p.columnReorder === true);
+            }
+        });
+        // Mark measurement dirty when column layout changes
+        effect(() => {
+            // Track signals that affect column layout
+            this.visibleCols();
+            this.columnSizingOverrides();
+            this.columnSizingVersion();
+            this.measureDirty.set(true);
+        });
+        // Wire virtual scroll service inputs
+        effect(() => {
+            const p = this.getProps();
+            if (p) {
+                this.virtualScrollService.totalRows.set(p.items.length);
+                if (p.virtualScroll) {
+                    this.virtualScrollService.updateConfig({
+                        enabled: p.virtualScroll.enabled,
+                        rowHeight: p.virtualScroll.rowHeight,
+                        overscan: p.virtualScroll.overscan,
+                        columns: p.virtualScroll.columns,
+                        columnOverscan: p.virtualScroll.columnOverscan,
+                    });
+                }
+            }
+        });
+        // Wire column widths to virtual scroll service for column virtualization
+        effect(() => {
+            const layouts = this.columnLayouts();
+            const props = this.getProps();
+            const pinnedCols = props?.pinnedColumns ?? {};
+            // Only provide widths for unpinned columns (pinned are always rendered)
+            const unpinnedWidths = layouts
+                .filter(l => !l.pinnedLeft && !l.pinnedRight && !pinnedCols[l.col.columnId])
+                .map(l => l.width);
+            this.virtualScrollService.columnWidths.set(unpinnedWidths);
+        });
+        // Wire wrapper element to virtual scroll for scroll events + container height
+        effect(() => {
+            const el = this.wrapperElSignal();
+            if (el) {
+                this.virtualScrollService.setContainer(el);
+                this.virtualScrollService.containerHeight.set(el.clientHeight);
+                this.virtualScrollService.containerWidth.set(el.clientWidth);
+            }
+        });
+    }
+    // --- Helper methods ---
+    /** Lookup effective min-width for a column (includes measured width floor) */
+    getEffectiveMinWidth(col) {
+        const layout = this.columnLayouts().find((l) => l.col.columnId === col.columnId);
+        return layout?.minWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    }
+    /**
+     * Returns derived cell interaction metadata (non-event attributes) for use in templates.
+     * Mirrors React's getCellInteractionProps for the Angular view layer.
+     * Event handlers (pointerdown, click, dblclick, contextmenu) are still bound inline in templates.
+     */
+    getCellInteractionProps(descriptor) {
+        return {
+            tabIndex: descriptor.isActive ? 0 : -1,
+            dataRowIndex: descriptor.rowIndex,
+            dataColIndex: descriptor.globalColIndex,
+            dataInRange: descriptor.isInRange ? 'true' : null,
+            role: descriptor.canEditAny ? 'button' : null,
+        };
+    }
+    asColumnDef(colDef) {
+        return colDef;
+    }
+    visibleColIndex(col) {
+        return this.visibleCols().indexOf(col);
+    }
+    getColumnWidth(col) {
+        const overrides = this.columnSizingOverrides();
+        const override = overrides[col.columnId];
+        if (override)
+            return override.widthPx;
+        return col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    }
+    getFilterConfig(col) {
+        return getHeaderFilterConfig(col, this.headerFilterInput());
+    }
+    /** Build column menu handler object for a single column */
+    buildColumnMenuHandlers(columnId) {
+        return {
+            onPinLeft: () => this.onPinColumn(columnId, 'left'),
+            onPinRight: () => this.onPinColumn(columnId, 'right'),
+            onUnpin: () => this.onUnpinColumn(columnId),
+            onSortAsc: () => this.onSortAsc(columnId),
+            onSortDesc: () => this.onSortDesc(columnId),
+            onClearSort: () => this.onClearSort(columnId),
+            onAutosizeThis: () => this.onAutosizeColumn(columnId),
+            onAutosizeAll: () => this.onAutosizeAllColumns(),
+            onClose: () => { }
+        };
+    }
+    /** Get memoized handlers for a column */
+    getColumnMenuHandlersMemoized(columnId) {
+        return this.columnMenuHandlersMap().get(columnId) ?? this.buildColumnMenuHandlers(columnId);
+    }
+    getCellDescriptor(item, col, rowIndex, colIdx) {
+        return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
+    }
+    resolveCellContent(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)), undefined);
+            }
+            return '';
+        }
+    }
+    resolveCellStyleFn(col, item, displayValue) {
+        return resolveCellStyle(col, item, displayValue);
+    }
+    buildPopoverEditorProps(item, col, descriptor) {
+        return buildPopoverEditorProps(item, col, descriptor, this.pendingEditorValue(), {
+            setPendingEditorValue: (value) => this.setPendingEditorValue(value),
+            commitCellEdit: (item, columnId, oldValue, newValue, rowIndex, globalColIndex) => this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex),
+            cancelPopoverEdit: () => this.cancelPopoverEdit(),
+        });
+    }
+    /** Check if a specific cell is the active cell (PrimeNG inline template helper). */
+    isActiveCell(rowIndex, colIdx) {
+        const ac = this.activeCell();
+        if (!ac)
+            return false;
+        return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.colOffset();
+    }
+    /** Check if a cell is within the current selection range (PrimeNG inline template helper). */
+    isInSelectionRange(rowIndex, colIdx) {
+        const range = this.selectionRange();
+        if (!range)
+            return false;
+        const minR = Math.min(range.startRow, range.endRow);
+        const maxR = Math.max(range.startRow, range.endRow);
+        const minC = Math.min(range.startCol, range.endCol);
+        const maxC = Math.max(range.startCol, range.endCol);
+        return rowIndex >= minR && rowIndex <= maxR && colIdx >= minC && colIdx <= maxC;
+    }
+    /** Check if a cell is the selection end cell for fill handle display. */
+    isSelectionEndCell(rowIndex, colIdx) {
+        const range = this.selectionRange();
+        if (!range || this.isDragging() || this.copyRange() || this.cutRange())
+            return false;
+        return rowIndex === range.endRow && colIdx === range.endCol;
+    }
+    /** Get cell background color based on selection state. */
+    getCellBackground(rowIndex, colIdx) {
+        if (this.isInSelectionRange(rowIndex, colIdx))
+            return 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))';
+        return null;
+    }
+    /** Resolve editor type from column definition. */
+    getEditorType(col, _item) {
+        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'date' || col.cellEditor === 'richSelect') {
+            return col.cellEditor;
+        }
+        if (col.type === 'date')
+            return 'date';
+        if (col.type === 'boolean')
+            return 'checkbox';
+        return 'text';
+    }
+    getSelectValues(col) {
+        const params = col.cellEditorParams;
+        if (params && typeof params === 'object' && 'values' in params) {
+            return params.values.map(String);
+        }
+        return [];
+    }
+    formatDateForInput(value) {
+        if (!value)
+            return '';
+        const d = new Date(String(value));
+        if (Number.isNaN(d.getTime()))
+            return '';
+        return d.toISOString().split('T')[0];
+    }
+    getPinnedLeftOffset(columnId) {
+        const offsets = this.pinningOffsets();
+        return offsets.leftOffsets[columnId] ?? null;
+    }
+    getPinnedRightOffset(columnId) {
+        const offsets = this.pinningOffsets();
+        return offsets.rightOffsets[columnId] ?? null;
+    }
+    // --- Virtual scroll event handler ---
+    onWrapperScroll(event) {
+        this.virtualScrollService.onScroll(event);
+    }
+    // --- Popover editor helpers ---
+    setPopoverAnchorEl(el) {
+        this.state().editing.setPopoverAnchorEl(el);
+    }
+    setPendingEditorValue(value) {
+        this.state().editing.setPendingEditorValue(value);
+    }
+    cancelPopoverEdit() {
+        this.state().editing.cancelPopoverEdit();
+    }
+    commitPopoverEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+    }
+    // --- Event handlers ---
+    onWrapperMouseDown(event) {
+        this.lastMouseShift = event.shiftKey;
+    }
+    onGridKeyDown(event) {
+        this.state().interaction.handleGridKeyDown(event);
+    }
+    onCellMouseDown(event, rowIndex, globalColIndex) {
+        this.state().editing.setEditingCell(null);
+        this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
+    }
+    onNonDataSurfacePointerDown(event) {
+        if (typeof event.button === 'number' && event.button !== 0)
+            return;
+        event.preventDefault();
+    }
+    onNonDataSurfaceSelectStart(event) {
+        event.preventDefault();
+    }
+    onCellClick(rowIndex, globalColIndex) {
+        this.state().interaction.setActiveCell?.({ rowIndex, columnIndex: globalColIndex });
+    }
+    onCellContextMenu(event) {
+        this.state().contextMenu.handleCellContextMenu(event);
+    }
+    onCellDblClick(rowId, columnId) {
+        this.state().editing.setEditingCell({ rowId, columnId });
+    }
+    onFillHandleMouseDown(event) {
+        this.state().interaction.handleFillHandleMouseDown?.(event);
+    }
+    onResizeStart(event, col) {
+        event.preventDefault();
+        // Clear cell selection before resize (like React) so selection outlines don't persist during drag
+        this.state().interaction.setActiveCell?.(null);
+        this.state().interaction.setSelectionRange?.(null);
+        this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
+        const startX = event.clientX;
+        const columnId = col.columnId;
+        const startWidth = columnId === ROW_NUMBER_COLUMN_ID ? this.getRowNumberWidth() : this.getColumnWidth(col);
+        const minWidth = columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : (col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
+        const onMove = (e) => {
+            const delta = e.clientX - startX;
+            const newWidth = Math.max(minWidth, startWidth + delta);
+            const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
+            this.state().layout.setColumnSizingOverrides(overrides);
+            this.columnSizingVersion.update(v => v + 1);
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            const finalWidth = this.getColumnWidth(col);
+            this.state().layout.onColumnResized?.(col.columnId, finalWidth);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    }
+    onResizeDoubleClick(event, col) {
+        event.preventDefault();
+        event.stopPropagation();
+        const columnId = col.columnId;
+        const thEl = event.currentTarget.closest('th') ?? event.currentTarget.parentElement;
+        const container = thEl?.closest('table')?.parentElement ?? undefined;
+        const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const idealWidth = measureColumnContentWidth(columnId, minWidth, container);
+        const overrides = { ...this.columnSizingOverrides(), [columnId]: { widthPx: idealWidth } };
+        this.state().layout.setColumnSizingOverrides(overrides);
+        this.columnSizingVersion.update(v => v + 1);
+        this.state().layout.onColumnResized?.(columnId, idealWidth);
+    }
+    onSelectAllChange(event) {
+        const checked = event.target.checked;
+        this.state().rowSelection.handleSelectAll(!!checked);
+    }
+    onRowClick(event, rowId) {
+        const p = this.getProps();
+        if (p?.rowSelection !== 'single')
+            return;
+        const ids = this.selectedRowIds();
+        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+    }
+    onRowCheckboxChange(rowId, event, rowIndex) {
+        const checked = event.target.checked;
+        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
+    }
+    commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+    }
+    commitBooleanEdit(item, columnId, oldValue, rowIndex, globalColIndex) {
+        this.state().editing.commitCellEdit(item, columnId, oldValue, !oldValue, rowIndex, globalColIndex, { skipAdvance: true });
+    }
+    onBooleanCheckboxPointerDown(event, rowIndex, globalColIndex) {
+        handleBooleanCellPointerDown(event, rowIndex, globalColIndex, this.colOffset(), {
+            setActiveCell: (c) => this.state().interaction.setActiveCell?.(c),
+            setSelectionRange: (r) => this.state().interaction.setSelectionRange?.(r),
+        });
+    }
+    cancelEdit() {
+        this.state().editing.setEditingCell(null);
+    }
+    onEditorKeydown(event, item, columnId, oldValue, rowIndex, globalColIndex) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const newValue = event.target.value;
+            this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    closeContextMenu() {
+        this.state().contextMenu.closeContextMenu();
+    }
+    handleCopy() {
+        this.state().interaction.handleCopy();
+    }
+    handleCut() {
+        this.state().interaction.handleCut();
+    }
+    handlePaste() {
+        void this.state().interaction.handlePaste();
+    }
+    handleSelectAllCells() {
+        this.state().interaction.handleSelectAllCells();
+    }
+    onUndo() {
+        this.state().interaction.onUndo?.();
+    }
+    onRedo() {
+        this.state().interaction.onRedo?.();
+    }
+    onHeaderMouseDown(columnId, event) {
+        this.columnReorderService.handleHeaderMouseDown(columnId, event);
+    }
+    // --- Column pinning methods ---
+    onPinColumn(columnId, side) {
+        this.state().pinning.pinColumn(columnId, side);
+    }
+    onUnpinColumn(columnId) {
+        this.state().pinning.unpinColumn(columnId);
+    }
+    isPinned(columnId) {
+        return this.state().pinning.isPinned(columnId);
+    }
+    getPinState(columnId) {
+        const pinned = this.isPinned(columnId);
+        return {
+            canPinLeft: pinned !== 'left',
+            canPinRight: pinned !== 'right',
+            canUnpin: !!pinned,
+        };
+    }
+    // --- Column sorting methods ---
+    onSortAsc(columnId) {
+        const props = this.getProps();
+        props?.onColumnSort?.(columnId, 'asc');
+    }
+    onSortDesc(columnId) {
+        const props = this.getProps();
+        props?.onColumnSort?.(columnId, 'desc');
+    }
+    onClearSort(columnId) {
+        const props = this.getProps();
+        const col = columnId ?? props?.sortBy;
+        if (col) {
+            props?.onColumnSort?.(col, null);
+        }
+    }
+    getSortState(columnId) {
+        const props = this.getProps();
+        if (props?.sortBy === columnId) {
+            return props.sortDirection ?? 'asc';
+        }
+        return null;
+    }
+    // --- Column autosize methods ---
+    onAutosizeColumn(columnId) {
+        const col = this.visibleCols().find((c) => c.columnId === columnId);
+        if (!col)
+            return;
+        const width = measureColumnContentWidth(columnId, col.minWidth, this.tableContainerEl() ?? undefined);
+        this.state().layout.setColumnSizingOverrides({
+            ...this.columnSizingOverrides(),
+            [columnId]: { widthPx: width },
+        });
+        (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(columnId, width);
+    }
+    onAutosizeAllColumns() {
+        const tableEl = this.tableContainerEl() ?? undefined;
+        const overrides = {};
+        for (const col of this.visibleCols()) {
+            const width = measureColumnContentWidth(col.columnId, col.minWidth, tableEl);
+            overrides[col.columnId] = { widthPx: width };
+            (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(col.columnId, width);
+        }
+        this.state().layout.setColumnSizingOverrides({
+            ...this.columnSizingOverrides(),
+            ...overrides,
+        });
+    }
+    static { this.ɵfac = function BaseDataGridTableComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseDataGridTableComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseDataGridTableComponent }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseDataGridTableComponent, [{
+        type: Directive
+    }], null, null); })();