@alaarab/ogrid-angular 2.5.9 → 2.6.1

package/dist/esm/services/datagrid-state.service.js

@@ -0,0 +1,636 @@
+import { Injectable, signal, computed, effect, DestroyRef, inject, NgZone } from '@angular/core';
+import { getDataGridStatusBarConfig, parseValue, computeAggregations, getCellValue, normalizeSelectionRange, } from '@alaarab/ogrid-core';
+import { DataGridLayoutHelper } from './datagrid-layout.service';
+import { DataGridEditingHelper } from './datagrid-editing.service';
+import { DataGridInteractionHelper } from './datagrid-interaction.service';
+import * as i0 from "@angular/core";
+// Stable no-op functions to avoid allocating new closures on every getState() call
+const NOOP = () => { };
+const NOOP_ASYNC = async () => { };
+const NOOP_MOUSE = (_e, _r, _c) => { };
+const NOOP_KEY = (_e) => { };
+const NOOP_CTX = (_e) => { };
+/**
+ * Single orchestration service for DataGridTable. Takes grid props,
+ * returns all derived state and handlers so Angular UI packages can be thin view layers.
+ *
+ * Port of React's useDataGridState hook.
+ */
+export class DataGridStateService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.ngZone = inject(NgZone);
+        this.mutationTick = signal(0, ...(ngDevMode ? [{ debugName: "mutationTick" }] : []));
+        // --- Input signals ---
+        this.props = signal(null, ...(ngDevMode ? [{ debugName: "props" }] : []));
+        this.wrapperEl = signal(null, ...(ngDevMode ? [{ debugName: "wrapperEl" }] : []));
+        // --- Internal state (still owned by main service for backward compat) ---
+        this.internalSelectedRows = signal(new Set(), ...(ngDevMode ? [{ debugName: "internalSelectedRows" }] : []));
+        // Row selection
+        this.lastClickedRow = -1;
+        // Header menu state (for column pinning UI)
+        this.headerMenuIsOpenSig = signal(false, ...(ngDevMode ? [{ debugName: "headerMenuIsOpenSig" }] : []));
+        this.headerMenuOpenForColumnSig = signal(null, ...(ngDevMode ? [{ debugName: "headerMenuOpenForColumnSig" }] : []));
+        this.headerMenuAnchorElementSig = signal(null, ...(ngDevMode ? [{ debugName: "headerMenuAnchorElementSig" }] : []));
+        // --- Derived computed ---
+        this.propsResolved = computed(() => {
+            const p = this.props();
+            if (!p)
+                throw new Error('DataGridStateService: props must be set before use');
+            return p;
+        }, ...(ngDevMode ? [{ debugName: "propsResolved" }] : []));
+        this.cellSelection = computed(() => {
+            const p = this.props();
+            return p ? p.cellSelection !== false : true;
+        }, ...(ngDevMode ? [{ debugName: "cellSelection" }] : []));
+        // Narrow signal extractors  -  prevent full props() dependency in effects/computed
+        this.originalOnCellValueChanged = computed(() => this.props()?.onCellValueChanged, ...(ngDevMode ? [{ debugName: "originalOnCellValueChanged" }] : []));
+        // Undo/redo wrapped callback  -  only recomputes when the actual callback reference changes
+        this.wrappedOnCellValueChanged = computed(() => {
+            const original = this.originalOnCellValueChanged();
+            if (!original)
+                return undefined;
+            return (event) => {
+                this.interactionHelper.undoRedoStack.record(event);
+                if (!this.interactionHelper.undoRedoStack.isBatching) {
+                    this.interactionHelper.undoLengthSig.set(this.interactionHelper.undoRedoStack.historyLength);
+                    this.interactionHelper.redoLengthSig.set(this.interactionHelper.undoRedoStack.redoLength);
+                }
+                original(event);
+            };
+        }, ...(ngDevMode ? [{ debugName: "wrappedOnCellValueChanged" }] : []));
+        // --- Delegated computed signals from layoutHelper ---
+        this.flatColumnsRaw = computed(() => this.layoutHelper.flatColumnsRaw(), ...(ngDevMode ? [{ debugName: "flatColumnsRaw" }] : []));
+        this.flatColumns = computed(() => this.layoutHelper.flatColumns(), ...(ngDevMode ? [{ debugName: "flatColumns" }] : []));
+        this.visibleCols = computed(() => this.layoutHelper.visibleCols(), ...(ngDevMode ? [{ debugName: "visibleCols" }] : []));
+        this.visibleColumnCount = computed(() => this.layoutHelper.visibleColumnCount(), ...(ngDevMode ? [{ debugName: "visibleColumnCount" }] : []));
+        this.hasCheckboxCol = computed(() => this.layoutHelper.hasCheckboxCol(), ...(ngDevMode ? [{ debugName: "hasCheckboxCol" }] : []));
+        this.hasRowNumbersCol = computed(() => this.layoutHelper.hasRowNumbersCol(), ...(ngDevMode ? [{ debugName: "hasRowNumbersCol" }] : []));
+        this.specialColsCount = computed(() => this.layoutHelper.specialColsCount(), ...(ngDevMode ? [{ debugName: "specialColsCount" }] : []));
+        this.totalColCount = computed(() => this.layoutHelper.totalColCount(), ...(ngDevMode ? [{ debugName: "totalColCount" }] : []));
+        this.colOffset = computed(() => this.layoutHelper.colOffset(), ...(ngDevMode ? [{ debugName: "colOffset" }] : []));
+        this.rowIndexByRowId = computed(() => this.layoutHelper.rowIndexByRowId(), ...(ngDevMode ? [{ debugName: "rowIndexByRowId" }] : []));
+        this.selectedRowIds = computed(() => {
+            const p = this.props();
+            if (!p)
+                return new Set();
+            const controlled = p.selectedRows;
+            if (controlled != null) {
+                return controlled instanceof Set ? controlled : new Set(controlled);
+            }
+            return this.internalSelectedRows();
+        }, ...(ngDevMode ? [{ debugName: "selectedRowIds" }] : []));
+        this.allSelected = computed(() => {
+            const p = this.props();
+            if (!p || p.items.length === 0)
+                return false;
+            const selected = this.selectedRowIds();
+            // Fast path: if counts don't match, can't be all selected (avoids O(n) .every())
+            if (selected.size !== p.items.length)
+                return false;
+            return p.items.every((item) => selected.has(p.getRowId(item)));
+        }, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+        this.someSelected = computed(() => {
+            const p = this.props();
+            if (!p)
+                return false;
+            const selected = this.selectedRowIds();
+            return !this.allSelected() && p.items.some((item) => selected.has(p.getRowId(item)));
+        }, ...(ngDevMode ? [{ debugName: "someSelected" }] : []));
+        this.hasCellSelection = computed(() => this.interactionHelper.hasCellSelection(), ...(ngDevMode ? [{ debugName: "hasCellSelection" }] : []));
+        this.canUndo = computed(() => this.interactionHelper.canUndo(), ...(ngDevMode ? [{ debugName: "canUndo" }] : []));
+        this.canRedo = computed(() => this.interactionHelper.canRedo(), ...(ngDevMode ? [{ debugName: "canRedo" }] : []));
+        // Table layout (delegated to layoutHelper)
+        this.minTableWidth = computed(() => this.layoutHelper.minTableWidth(), ...(ngDevMode ? [{ debugName: "minTableWidth" }] : []));
+        this.desiredTableWidth = computed(() => this.layoutHelper.desiredTableWidth(), ...(ngDevMode ? [{ debugName: "desiredTableWidth" }] : []));
+        this.aggregation = computed(() => {
+            const p = this.props();
+            if (!p)
+                return null;
+            return computeAggregations(p.items, this.visibleCols(), this.cellSelection() ? this.interactionHelper.selectionRangeSig() : null);
+        }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+        this.statusBarConfig = computed(() => {
+            const p = this.props();
+            if (!p)
+                return null;
+            const base = getDataGridStatusBarConfig(p.statusBar, p.items.length, this.selectedRowIds().size);
+            if (!base)
+                return null;
+            return { ...base, aggregation: this.aggregation() ?? undefined };
+        }, ...(ngDevMode ? [{ debugName: "statusBarConfig" }] : []));
+        this.showEmptyInGrid = computed(() => {
+            const p = this.props();
+            if (!p)
+                return false;
+            return p.items.length === 0 && !!p.emptyState && !p.isLoading;
+        }, ...(ngDevMode ? [{ debugName: "showEmptyInGrid" }] : []));
+        // --- 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, options) => this.commitCellEdit(item, colId, oldVal, newVal, rowIdx, globalColIdx, options);
+        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();
+        // --- Instantiate sub-helpers ---
+        this.layoutHelper = new DataGridLayoutHelper(this.props, this.wrapperEl, this.ngZone);
+        this.interactionHelper = new DataGridInteractionHelper();
+        this.editingHelper = new DataGridEditingHelper(() => this.visibleCols(), () => this.props()?.items ?? [], () => this.wrappedOnCellValueChanged(), (cell) => this.setActiveCell(cell), (range) => this.setSelectionRange(range), () => this.colOffset());
+        // Setup window event listeners for cell selection drag
+        // Run outside NgZone to avoid 60Hz change detection during drag
+        effect((onCleanup) => {
+            const onMove = (e) => this.onWindowMouseMove(e);
+            const onUp = () => this.onWindowMouseUp();
+            this.ngZone.runOutsideAngular(() => {
+                window.addEventListener('pointermove', onMove, true);
+                window.addEventListener('pointerup', onUp, true);
+            });
+            onCleanup(() => {
+                window.removeEventListener('pointermove', onMove, true);
+                window.removeEventListener('pointerup', onUp, true);
+            });
+        });
+        // Cleanup on destroy  -  cancel pending work and release references
+        this.destroyRef.onDestroy(() => {
+            this.interactionHelper.destroy();
+            this.layoutHelper.destroy();
+        });
+    }
+    // --- Row selection methods ---
+    updateSelection(newSelectedIds) {
+        const p = this.props();
+        if (!p)
+            return;
+        if (p.selectedRows === undefined) {
+            this.internalSelectedRows.set(newSelectedIds);
+        }
+        p.onSelectionChange?.({
+            selectedRowIds: Array.from(newSelectedIds),
+            selectedItems: p.items.filter((item) => newSelectedIds.has(p.getRowId(item))),
+        });
+    }
+    handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey) {
+        const p = this.props();
+        if (!p)
+            return;
+        const rowSelection = p.rowSelection ?? 'none';
+        if (rowSelection === 'single') {
+            this.updateSelection(checked ? new Set([rowId]) : new Set());
+            this.lastClickedRow = rowIndex;
+            return;
+        }
+        const next = new Set(this.selectedRowIds());
+        if (shiftKey && this.lastClickedRow >= 0 && this.lastClickedRow !== rowIndex) {
+            const start = Math.min(this.lastClickedRow, rowIndex);
+            const end = Math.max(this.lastClickedRow, rowIndex);
+            for (let i = start; i <= end; i++) {
+                if (i < p.items.length) {
+                    const id = p.getRowId(p.items[i]);
+                    if (checked)
+                        next.add(id);
+                    else
+                        next.delete(id);
+                }
+            }
+        }
+        else {
+            if (checked)
+                next.add(rowId);
+            else
+                next.delete(rowId);
+        }
+        this.lastClickedRow = rowIndex;
+        this.updateSelection(next);
+    }
+    handleSelectAll(checked) {
+        const p = this.props();
+        if (!p)
+            return;
+        if (checked) {
+            this.updateSelection(new Set(p.items.map((item) => p.getRowId(item))));
+        }
+        else {
+            this.updateSelection(new Set());
+        }
+    }
+    // --- Cell editing (delegated to editingHelper) ---
+    setEditingCell(cell) {
+        this.editingHelper.setEditingCell(cell);
+    }
+    setPendingEditorValue(value) {
+        this.editingHelper.setPendingEditorValue(value);
+    }
+    setActiveCell(cell) {
+        this.interactionHelper.setActiveCell(cell);
+    }
+    setSelectionRange(range) {
+        this.interactionHelper.setSelectionRange(range);
+    }
+    commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex, options) {
+        this.editingHelper.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex, options);
+    }
+    cancelPopoverEdit() {
+        this.editingHelper.cancelPopoverEdit();
+    }
+    // --- Cell selection / mouse handling (delegated to interactionHelper) ---
+    handleCellMouseDown(e, rowIndex, globalColIndex) {
+        this.interactionHelper.handleCellMouseDown(e, rowIndex, globalColIndex, this.colOffset(), this.wrapperEl());
+    }
+    handleSelectAllCells() {
+        const p = this.props();
+        if (!p)
+            return;
+        this.interactionHelper.handleSelectAllCells(p.items.length, this.visibleColumnCount(), this.colOffset());
+    }
+    // --- Context menu (delegated to interactionHelper) ---
+    setContextMenuPosition(pos) {
+        this.interactionHelper.setContextMenuPosition(pos);
+    }
+    handleCellContextMenu(e) {
+        this.interactionHelper.handleCellContextMenu(e);
+    }
+    closeContextMenu() {
+        this.interactionHelper.closeContextMenu();
+    }
+    // --- Clipboard (delegated to interactionHelper) ---
+    handleCopy() {
+        const p = this.props();
+        if (!p)
+            return;
+        this.interactionHelper.handleCopy(p.items, this.visibleCols(), this.colOffset());
+    }
+    handleCut() {
+        const p = this.props();
+        if (!p)
+            return;
+        this.interactionHelper.handleCut(p.items, this.visibleCols(), this.colOffset(), p.editable, this.wrappedOnCellValueChanged());
+    }
+    async handlePaste() {
+        const p = this.props();
+        if (!p)
+            return;
+        await this.interactionHelper.handlePaste(p.items, this.visibleCols(), this.colOffset(), p.editable, this.wrappedOnCellValueChanged());
+        this.mutationTick.update((v) => v + 1);
+    }
+    clearClipboardRanges() {
+        this.interactionHelper.clearClipboardRanges();
+    }
+    // --- Undo/Redo (delegated to interactionHelper) ---
+    beginBatch() {
+        this.interactionHelper.beginBatch();
+    }
+    endBatch() {
+        this.interactionHelper.endBatch();
+    }
+    undo() {
+        const p = this.props();
+        this.interactionHelper.undo(p?.onCellValueChanged);
+        this.mutationTick.update((v) => v + 1);
+    }
+    redo() {
+        const p = this.props();
+        this.interactionHelper.redo(p?.onCellValueChanged);
+        this.mutationTick.update((v) => v + 1);
+    }
+    // --- Keyboard navigation (delegated to interactionHelper) ---
+    handleGridKeyDown(e) {
+        const p = this.props();
+        if (!p)
+            return;
+        this.interactionHelper.handleGridKeyDown(e, p.items, p.getRowId, this.visibleCols(), this.colOffset(), this.hasCheckboxCol(), this.visibleColumnCount(), p.editable, this.wrappedOnCellValueChanged(), p.onCellValueChanged, p.rowSelection ?? 'none', this.selectedRowIds(), this.wrapperEl(), (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey), this.editingHelper.editingCellSig(), (cell) => this.setEditingCell(cell), p.onKeyDown);
+    }
+    // --- Fill handle (delegated to interactionHelper + setupFillHandleDrag) ---
+    handleFillHandleMouseDown(e) {
+        this.interactionHelper.handleFillHandleMouseDown(e);
+        this.setupFillHandleDrag();
+    }
+    // --- Column pinning ---
+    pinColumn(columnId, side) {
+        const props = this.props();
+        props?.onColumnPinned?.(columnId, side);
+    }
+    unpinColumn(columnId) {
+        const props = this.props();
+        props?.onColumnPinned?.(columnId, null);
+    }
+    isPinned(columnId) {
+        const props = this.props();
+        return props?.pinnedColumns?.[columnId];
+    }
+    getPinState(columnId) {
+        const pinned = this.isPinned(columnId);
+        return {
+            canPinLeft: pinned !== 'left',
+            canPinRight: pinned !== 'right',
+            canUnpin: !!pinned,
+        };
+    }
+    // --- Header menu ---
+    openHeaderMenu(columnId, anchorEl) {
+        this.headerMenuOpenForColumnSig.set(columnId);
+        this.headerMenuAnchorElementSig.set(anchorEl);
+        this.headerMenuIsOpenSig.set(true);
+    }
+    closeHeaderMenu() {
+        this.headerMenuIsOpenSig.set(false);
+        this.headerMenuOpenForColumnSig.set(null);
+        this.headerMenuAnchorElementSig.set(null);
+    }
+    headerMenuPinLeft() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col) !== 'left') {
+            this.pinColumn(col, 'left');
+            this.closeHeaderMenu();
+        }
+    }
+    headerMenuPinRight() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col) !== 'right') {
+            this.pinColumn(col, 'right');
+            this.closeHeaderMenu();
+        }
+    }
+    headerMenuUnpin() {
+        const col = this.headerMenuOpenForColumnSig();
+        if (col && this.isPinned(col)) {
+            this.unpinColumn(col);
+            this.closeHeaderMenu();
+        }
+    }
+    // --- Get state result ---
+    getState() {
+        this.mutationTick();
+        const p = this.props();
+        const cellSel = this.cellSelection();
+        const layout = {
+            flatColumns: this.flatColumns(),
+            visibleCols: this.visibleCols(),
+            visibleColumnCount: this.visibleColumnCount(),
+            totalColCount: this.totalColCount(),
+            colOffset: this.colOffset(),
+            hasCheckboxCol: this.hasCheckboxCol(),
+            hasRowNumbersCol: this.hasRowNumbersCol(),
+            rowIndexByRowId: this.rowIndexByRowId(),
+            containerWidth: this.layoutHelper.containerWidthSig(),
+            minTableWidth: this.minTableWidth(),
+            desiredTableWidth: this.desiredTableWidth(),
+            columnSizingOverrides: this.layoutHelper.columnSizingOverridesSig(),
+            setColumnSizingOverrides: this._setColumnSizingOverrides,
+            onColumnResized: p?.onColumnResized,
+            onAutosizeColumn: p?.onAutosizeColumn,
+        };
+        const rowSelection = {
+            selectedRowIds: this.selectedRowIds(),
+            updateSelection: this._updateSelection,
+            handleRowCheckboxChange: this._handleRowCheckboxChange,
+            handleSelectAll: this._handleSelectAll,
+            allSelected: this.allSelected(),
+            someSelected: this.someSelected(),
+        };
+        const editing = {
+            editingCell: this.editingHelper.editingCellSig(),
+            setEditingCell: this._setEditingCell,
+            pendingEditorValue: this.editingHelper.pendingEditorValueSig(),
+            setPendingEditorValue: this._setPendingEditorValue,
+            commitCellEdit: this._commitCellEdit,
+            cancelPopoverEdit: this._cancelPopoverEdit,
+            popoverAnchorEl: this.editingHelper.popoverAnchorElSig(),
+            setPopoverAnchorEl: this._setPopoverAnchorEl,
+        };
+        const interaction = {
+            activeCell: cellSel ? this.interactionHelper.activeCellSig() : null,
+            setActiveCell: cellSel ? this._setActiveCell : undefined,
+            selectionRange: cellSel ? this.interactionHelper.selectionRangeSig() : null,
+            setSelectionRange: cellSel ? this._setSelectionRange : undefined,
+            handleCellMouseDown: cellSel ? this._handleCellMouseDown : NOOP_MOUSE,
+            handleSelectAllCells: cellSel ? this._handleSelectAllCells : NOOP,
+            hasCellSelection: cellSel ? this.hasCellSelection() : false,
+            handleGridKeyDown: cellSel ? this._handleGridKeyDown : NOOP_KEY,
+            handleFillHandleMouseDown: cellSel ? this._handleFillHandleMouseDown : undefined,
+            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,
+            canUndo: this.canUndo(),
+            canRedo: this.canRedo(),
+            onUndo: this._onUndo,
+            onRedo: this._onRedo,
+            isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false,
+        };
+        const contextMenu = {
+            menuPosition: cellSel ? this.interactionHelper.contextMenuPositionSig() : null,
+            setMenuPosition: cellSel ? this._setContextMenuPosition : undefined,
+            handleCellContextMenu: cellSel ? this._handleCellContextMenu : NOOP_CTX,
+            closeContextMenu: cellSel ? this._closeContextMenu : NOOP,
+        };
+        const viewModels = {
+            headerFilterInput: {
+                sortBy: p?.sortBy,
+                sortDirection: p?.sortDirection ?? 'asc',
+                onColumnSort: this._headerFilterOnColumnSort,
+                filters: p?.filters ?? {},
+                onFilterChange: this._headerFilterOnFilterChange,
+                filterOptions: p?.filterOptions ?? {},
+                loadingFilterOptions: p?.loadingFilterOptions ?? {},
+                peopleSearch: p?.peopleSearch,
+            },
+            cellDescriptorInput: {
+                editingCell: this.editingHelper.editingCellSig(),
+                activeCell: cellSel ? this.interactionHelper.activeCellSig() : null,
+                selectionRange: cellSel ? this.interactionHelper.selectionRangeSig() : null,
+                cutRange: cellSel ? this.interactionHelper.cutRangeSig() : null,
+                copyRange: cellSel ? this.interactionHelper.copyRangeSig() : null,
+                colOffset: this.colOffset(),
+                itemsLength: p?.items.length ?? 0,
+                getRowId: p?.getRowId ?? ((item) => item['id']),
+                editable: p?.editable,
+                onCellValueChanged: this.wrappedOnCellValueChanged(),
+                isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false,
+                getFormulaValue: p?.getFormulaValue,
+                hasFormula: p?.hasFormula,
+                getFormula: p?.getFormula,
+                formulaVersion: p?.formulaVersion,
+            },
+            statusBarConfig: this.statusBarConfig(),
+            showEmptyInGrid: this.showEmptyInGrid(),
+            onCellError: p?.onCellError,
+        };
+        // --- Pinning ---
+        const openForColumn = this.headerMenuOpenForColumnSig();
+        const currentPinState = openForColumn ? (p?.pinnedColumns?.[openForColumn]) : undefined;
+        const pinning = {
+            pinnedColumns: p?.pinnedColumns ?? {},
+            pinColumn: this._pinColumn,
+            unpinColumn: this._unpinColumn,
+            isPinned: this._isPinned,
+            headerMenu: {
+                isOpen: this.headerMenuIsOpenSig(),
+                openForColumn,
+                anchorElement: this.headerMenuAnchorElementSig(),
+                open: this._openHeaderMenu,
+                close: this._closeHeaderMenu,
+                handlePinLeft: this._headerMenuPinLeft,
+                handlePinRight: this._headerMenuPinRight,
+                handleUnpin: this._headerMenuUnpin,
+                canPinLeft: currentPinState !== 'left',
+                canPinRight: currentPinState !== 'right',
+                canUnpin: !!currentPinState,
+            },
+        };
+        return { layout, rowSelection, editing, interaction, contextMenu, viewModels, pinning };
+    }
+    // --- Private helpers (drag selection delegated to interactionHelper) ---
+    onWindowMouseMove(e) {
+        this.interactionHelper.onWindowMouseMove(e, this.colOffset(), this.wrapperEl());
+    }
+    onWindowMouseUp() {
+        this.interactionHelper.onWindowMouseUp(this.colOffset(), this.wrapperEl());
+    }
+    setupFillHandleDrag() {
+        const p = this.props();
+        const fillDragStart = this.interactionHelper.fillDragStart;
+        if (!fillDragStart || p?.editable === false || !this.wrappedOnCellValueChanged())
+            return;
+        const colOff = this.colOffset();
+        const fillStart = fillDragStart;
+        let fillDragEnd = { endRow: fillStart.startRow, endCol: fillStart.startCol };
+        let liveFillRange = null;
+        let lastFillMousePos = null;
+        const resolveRange = (cx, cy) => {
+            const target = document.elementFromPoint(cx, cy);
+            const cell = target?.closest?.('[data-row-index][data-col-index]');
+            const wrapper = this.wrapperEl();
+            if (!cell || !wrapper?.contains(cell))
+                return null;
+            const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+            const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+            if (Number.isNaN(r) || Number.isNaN(c) || c < colOff)
+                return null;
+            const dataCol = c - colOff;
+            return normalizeSelectionRange({
+                startRow: fillStart.startRow, startCol: fillStart.startCol,
+                endRow: r, endCol: dataCol,
+            });
+        };
+        const onMove = (e) => {
+            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
+            if (this.interactionHelper.fillRafId)
+                cancelAnimationFrame(this.interactionHelper.fillRafId);
+            this.interactionHelper.fillRafId = requestAnimationFrame(() => {
+                this.interactionHelper.fillRafId = 0;
+                if (!lastFillMousePos)
+                    return;
+                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (!newRange)
+                    return;
+                if (liveFillRange && liveFillRange.startRow === newRange.startRow &&
+                    liveFillRange.startCol === newRange.startCol &&
+                    liveFillRange.endRow === newRange.endRow &&
+                    liveFillRange.endCol === newRange.endCol)
+                    return;
+                liveFillRange = newRange;
+                fillDragEnd = { endRow: newRange.endRow, endCol: newRange.endCol };
+                this.interactionHelper.applyDragAttrs(newRange, colOff, this.wrapperEl());
+            });
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove, true);
+            window.removeEventListener('pointerup', onUp, true);
+            this.interactionHelper.fillMoveHandler = null;
+            this.interactionHelper.fillUpHandler = null;
+            if (this.interactionHelper.fillRafId) {
+                cancelAnimationFrame(this.interactionHelper.fillRafId);
+                this.interactionHelper.fillRafId = 0;
+            }
+            if (lastFillMousePos) {
+                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+                if (flushed) {
+                    liveFillRange = flushed;
+                    fillDragEnd = { endRow: flushed.endRow, endCol: flushed.endCol };
+                }
+            }
+            this.interactionHelper.clearDragAttrs(this.wrapperEl());
+            const norm = normalizeSelectionRange({
+                startRow: fillStart.startRow, startCol: fillStart.startCol,
+                endRow: fillDragEnd.endRow, endCol: fillDragEnd.endCol,
+            });
+            this.setSelectionRange(norm);
+            this.setActiveCell({ rowIndex: fillStart.startRow, columnIndex: fillStart.startCol + colOff });
+            // Apply fill values
+            if (!p)
+                return;
+            const items = p.items;
+            const visibleCols = this.visibleCols();
+            const startItem = items[norm.startRow];
+            const startColDef = visibleCols[norm.startCol];
+            const onCellValueChanged = this.wrappedOnCellValueChanged();
+            if (startItem && startColDef && onCellValueChanged) {
+                const startValue = getCellValue(startItem, startColDef);
+                this.beginBatch();
+                for (let row = norm.startRow; row <= norm.endRow; row++) {
+                    for (let col = norm.startCol; col <= norm.endCol; col++) {
+                        if (row === fillStart.startRow && col === fillStart.startCol)
+                            continue;
+                        if (row >= items.length || col >= visibleCols.length)
+                            continue;
+                        const item = items[row];
+                        const colDef = visibleCols[col];
+                        const colEditable = colDef.editable === true || (typeof colDef.editable === 'function' && colDef.editable(item));
+                        if (!colEditable)
+                            continue;
+                        const oldValue = getCellValue(item, colDef);
+                        const result = parseValue(startValue, oldValue, item, colDef);
+                        if (!result.valid)
+                            continue;
+                        onCellValueChanged({ item, columnId: colDef.columnId, oldValue, newValue: result.value, rowIndex: row });
+                    }
+                }
+                this.endBatch();
+            }
+            this.interactionHelper.fillDragStart = null;
+        };
+        // Track handlers for cleanup on destroy
+        this.interactionHelper.fillMoveHandler = onMove;
+        this.interactionHelper.fillUpHandler = onUp;
+        this.ngZone.runOutsideAngular(() => {
+            window.addEventListener('pointermove', onMove, true);
+            window.addEventListener('pointerup', onUp, true);
+        });
+    }
+    static { this.ɵfac = function DataGridStateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataGridStateService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DataGridStateService, factory: DataGridStateService.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataGridStateService, [{
+        type: Injectable
+    }], () => [], null); })();