@gp-grid/angular 0.17.0 → 0.19.0

package/fesm2022/gp-grid-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, output, computed, TemplateRef, ChangeDetectionStrategy, Component, ViewChild, signal, effect, HostListener, inject, PLATFORM_ID, InjectionToken, Injectable } from '@angular/core';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { getFieldValue, isCellSelected, isCellActive, formatCellValue, isCellInFillPreview, buildCellClasses, isCellEditing, calculateFilterPopupPosition, bindPeekSelectAll, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
+import { getFieldValue, isCellSelected, isCellActive, formatCellValue, isCellInFillPreview, buildCellClasses, isCellEditing, calculateFilterPopupPosition, bindPeekSelectAll, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, PendingCellTapController, TouchScrollController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
 export { GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
 
 const TEMPLATE$2 = `
@@ -1470,6 +1470,8 @@ class GpGridBindings {
     dataSourceOwner = new DataSourceOwner();
     autoScroll;
     pendingRowDrag;
+    pendingCellTap;
+    touchScroll;
     input;
     coreRef = null;
     unsubscribe = null;
@@ -1483,16 +1485,28 @@ class GpGridBindings {
             isBrowser: this.deps.isBrowser,
             onDragConfirmed: (state) => this.deps.vm.dragState.set(state),
         });
+        this.pendingCellTap = new PendingCellTapController({
+            getCore: () => this.coreRef,
+            isBrowser: this.deps.isBrowser,
+            onTapConfirmed: () => this.deps.getContainer()?.focus(),
+        });
+        this.touchScroll = new TouchScrollController({
+            getCore: () => this.coreRef,
+            getScrollEl: this.deps.getBody,
+            isBrowser: this.deps.isBrowser,
+        });
         this.input = new InputEventAdapter({
             getCore: () => this.coreRef,
             getBodyEl: this.deps.getBody,
             autoScroll: this.autoScroll,
             pendingRowDrag: this.pendingRowDrag,
+            pendingCellTap: this.pendingCellTap,
             onDragStateChange: (state) => this.deps.vm.dragState.set(state),
         });
     }
     attach(core) {
         this.coreRef = core;
+        this.touchScroll.syncCore();
         this.unsubscribe = core.onBatchInstruction((instructions) => {
             const vm = this.deps.vm;
             const maps = applyBatchInstructions(instructions, vm.slots(), vm.headerState(), vm.batchSetters);
@@ -1517,11 +1531,16 @@ class GpGridBindings {
         });
         this.resizeObserver.observe(container);
         this.coreRef?.setViewport(0, 0, container.clientWidth, bodyEl.clientHeight);
+        // Synthetic touch scrolling: takes over touch gestures only when scroll
+        // virtualization compresses the DOM scroll space; inert otherwise.
+        this.touchScroll.attach();
     }
     destroy() {
         this.autoScroll.stop();
         this.pendingRowDrag.cancel();
         this.pendingRowDrag.releaseLocks();
+        this.pendingCellTap.cancel();
+        this.touchScroll.detach();
         this.unsubscribe?.();
         this.resizeObserver?.disconnect();
         this.coreRef?.destroy();
@@ -1553,16 +1572,22 @@ class GpGridBindings {
         const top = this.deps.vm.pendingScrollTop();
         const body = this.deps.getBody();
         if (top !== null && body) {
+            this.touchScroll.stop();
             body.scrollTop = top;
             this.deps.vm.pendingScrollTop.set(null);
         }
     }
-    scrollToRow(row) {
+    scrollToCell(cell) {
         const core = this.coreRef;
         const body = this.deps.getBody();
         if (core === null || body === null)
             return;
-        scrollCellIntoView(core, body, row, this.deps.getRowHeight(), this.deps.vm.slots(), this.deps.vm.rowsWrapperOffset());
+        scrollCellIntoView(core, body, cell.row, this.deps.getRowHeight(), this.deps.vm.slots(), this.deps.vm.rowsWrapperOffset(), {
+            colIndex: cell.col,
+            visibleColumns: this.deps.vm.visibleColumnWithIndices(),
+            columnPositions: this.deps.vm.columnPositions(),
+            columnWidths: this.deps.vm.columnWidths(),
+        });
     }
 }
 
@@ -1576,6 +1601,7 @@ const buildGridCore = (inputs, emitters) => {
         rowHeight: inputs.rowHeight,
         headerHeight: inputs.headerHeight,
         overscan: inputs.overscan,
+        maxFlingVelocity: inputs.maxFlingVelocity,
         rowLoading: inputs.rowLoading,
         sortingEnabled: inputs.sortingEnabled,
         highlighting: inputs.highlighting,
@@ -1608,6 +1634,8 @@ class GpGridComponent {
     highlighting = input(null, ...(ngDevMode ? [{ debugName: "highlighting" }] : /* istanbul ignore next */ []));
     rowDragEntireRow = input(false, ...(ngDevMode ? [{ debugName: "rowDragEntireRow" }] : /* istanbul ignore next */ []));
     overscan = input(3, ...(ngDevMode ? [{ debugName: "overscan" }] : /* istanbul ignore next */ []));
+    /** Max accumulated touch-fling velocity (logical px/ms) when scroll virtualization is active. Pair higher values with overscan 10-12. */
+    maxFlingVelocity = input(undefined, ...(ngDevMode ? [{ debugName: "maxFlingVelocity" }] : /* istanbul ignore next */ []));
     rowLoading = input(null, ...(ngDevMode ? [{ debugName: "rowLoading" }] : /* istanbul ignore next */ []));
     sortingEnabled = input(true, ...(ngDevMode ? [{ debugName: "sortingEnabled" }] : /* istanbul ignore next */ []));
     wheelDampening = input(0.1, ...(ngDevMode ? [{ debugName: "wheelDampening" }] : /* istanbul ignore next */ []));
@@ -1641,6 +1669,7 @@ class GpGridComponent {
             rowHeight: this.rowHeight(),
             headerHeight: this.headerHeight(),
             overscan: this.overscan(),
+            maxFlingVelocity: this.maxFlingVelocity(),
             rowLoading: this.rowLoading() ?? undefined,
             sortingEnabled: this.sortingEnabled(),
             highlighting: (this.highlighting() ?? undefined),
@@ -1762,7 +1791,7 @@ class GpGridComponent {
         if (result.preventDefault)
             event.preventDefault();
         if (result.scrollToCell)
-            this.bindings.scrollToRow(result.scrollToCell.row);
+            this.bindings.scrollToCell(result.scrollToCell);
     }
     onPaste(event) {
         const editing = this.vm.editingCell();
@@ -1793,7 +1822,7 @@ class GpGridComponent {
             this.bindings.pendingRowDrag.releaseLocks();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GpGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GpGridComponent, isStandalone: true, selector: "gp-grid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, headerRenderers: { classPropertyName: "headerRenderers", publicName: "headerRenderers", isSignal: true, isRequired: false, transformFunction: null }, editRenderers: { classPropertyName: "editRenderers", publicName: "editRenderers", isSignal: true, isRequired: false, transformFunction: null }, cellRenderer: { classPropertyName: "cellRenderer", publicName: "cellRenderer", isSignal: true, isRequired: false, transformFunction: null }, headerRenderer: { classPropertyName: "headerRenderer", publicName: "headerRenderer", isSignal: true, isRequired: false, transformFunction: null }, editRenderer: { classPropertyName: "editRenderer", publicName: "editRenderer", isSignal: true, isRequired: false, transformFunction: null }, highlighting: { classPropertyName: "highlighting", publicName: "highlighting", isSignal: true, isRequired: false, transformFunction: null }, rowDragEntireRow: { classPropertyName: "rowDragEntireRow", publicName: "rowDragEntireRow", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, rowLoading: { classPropertyName: "rowLoading", publicName: "rowLoading", isSignal: true, isRequired: false, transformFunction: null }, sortingEnabled: { classPropertyName: "sortingEnabled", publicName: "sortingEnabled", isSignal: true, isRequired: false, transformFunction: null }, wheelDampening: { classPropertyName: "wheelDampening", publicName: "wheelDampening", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRowDragEnd: "onRowDragEnd", onCellValueChanged: "onCellValueChanged", onColumnResized: "onColumnResized", onColumnMoved: "onColumnMoved" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: GridBodyComponent, descendants: true }], ngImport: i0, template: "\n    <div #container\n      [class]=\"'gp-grid-container' + (darkMode() ? ' gp-grid-container--dark' : '')\"\n      style=\"width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; outline: none;\"\n      tabindex=\"0\"\n      (keydown)=\"onKeyDown($event)\"\n      (paste)=\"onPaste($event)\"\n      (wheel)=\"onWheel($event)\"\n    >\n      <gp-grid-header\n        [headerHeight]=\"headerHeight()\"\n        [scrollLeft]=\"vm.scrollLeft()\"\n        [contentWidth]=\"vm.contentWidth()\"\n        [totalWidth]=\"vm.totalWidth()\"\n        [isLoading]=\"vm.isLoading()\"\n        [visibleColumnsWithIndices]=\"vm.visibleColumnWithIndices()\"\n        [columnPositions]=\"vm.columnPositions()\"\n        [columnWidths]=\"vm.columnWidths()\"\n        [headers]=\"vm.headerState()\"\n        [sortingEnabled]=\"sortingEnabled()\"\n        [headerRenderers]=\"headerRenderers()\"\n        [globalHeaderRenderer]=\"headerRenderer()\"\n        (headerPointerDown)=\"onHeaderPointerDown($event)\"\n        (filterPointerDown)=\"onFilterPointerDown($event)\"\n        (resizePointerDown)=\"onResizePointerDown($event)\"\n        (headerSort)=\"onHeaderSort($event)\"\n      />\n      <gp-grid-body\n        [rowHeight]=\"rowHeight()\"\n        [totalHeaderHeight]=\"headerHeight()\"\n        [contentWidth]=\"vm.contentWidth()\"\n        [contentHeight]=\"vm.contentHeight()\"\n        [totalWidth]=\"vm.totalWidth()\"\n        [rowsWrapperOffset]=\"vm.rowsWrapperOffset()\"\n        [slotsArray]=\"vm.slotsArray()\"\n        [visibleColumnWithIndices]=\"vm.visibleColumnWithIndices()\"\n        [columnPositions]=\"vm.columnPositions()\"\n        [columnWidths]=\"vm.columnWidths()\"\n        [totalRows]=\"vm.totalRows()\"\n        [activeCell]=\"vm.activeCell()\"\n        [selectionRange]=\"vm.selectionRange()\"\n        [editingCell]=\"vm.editingCell()\"\n        [cellRenderers]=\"cellRenderers()\"\n        [globalCellRenderer]=\"cellRenderer()\"\n        [editRenderers]=\"editRenderers()\"\n        [globalEditRenderer]=\"editRenderer()\"\n        [hoverPosition]=\"vm.hoverPosition()\"\n        [computeRowClasses]=\"computeRowClassesFn\"\n        [computeCellClasses]=\"computeCellClassesFn\"\n        [fillHandlePosition]=\"vm.fillHandlePosition()\"\n        [dragState]=\"vm.dragState()\"\n        (scrolled)=\"onBodyScroll($event)\"\n        (cellPointerDown)=\"onCellPointerDown($event)\"\n        (cellPointerEnter)=\"onCellPointerEnter($event)\"\n        (cellPointerLeave)=\"onCellPointerLeave()\"\n        (cellDoubleClick)=\"onCellDoubleClick($event)\"\n        (editValueChange)=\"onEditValueChange($event)\"\n        (editCommit)=\"onEditCommit()\"\n        (editCancel)=\"onEditCancel()\"\n        (fillHandlePointerDown)=\"onFillHandlePointerDown($event)\"\n      />\n      <gp-grid-overlays\n        [filterPopup]=\"vm.filterPopup()\"\n        [isLoading]=\"vm.isLoading()\"\n        [errorMessage]=\"vm.errorMessage()\"\n        [headerHeight]=\"headerHeight()\"\n        [rowHeight]=\"rowHeight()\"\n        [dragState]=\"vm.dragState()\"\n        [visibleColumnWithIndices]=\"vm.visibleColumnWithIndices()\"\n        [columnPositions]=\"vm.columnPositions()\"\n        [scrollLeft]=\"vm.scrollLeft()\"\n        [effectiveColumns]=\"vm.effectiveColumns()\"\n        [totalWidth]=\"vm.totalWidth()\"\n        (filterApply)=\"onFilterApply($event)\"\n        (filterClose)=\"onFilterClose()\"\n      />\n      @if (peekContext(); as ctx) {\n        <gp-grid-cell-peek\n          [peekCell]=\"ctx.peek\"\n          [column]=\"ctx.column\"\n          [rowData]=\"ctx.rowData\"\n          [containerEl]=\"container\"\n          [cellRenderers]=\"cellRenderers()\"\n          [globalCellRenderer]=\"cellRenderer()\"\n          (close)=\"onPeekClose()\"\n        />\n      }\n    </div>\n  ", isInline: true, styles: [":host{display:block;height:100%;min-height:0}\n"], dependencies: [{ kind: "component", type: GridHeaderComponent, selector: "gp-grid-header", inputs: ["headerHeight", "scrollLeft", "contentWidth", "totalWidth", "isLoading", "visibleColumnsWithIndices", "columnPositions", "columnWidths", "headers", "sortingEnabled", "headerRenderers", "globalHeaderRenderer"], outputs: ["headerPointerDown", "filterPointerDown", "resizePointerDown", "headerSort", "headerFilterOpen"] }, { kind: "component", type: GridBodyComponent, selector: "gp-grid-body", inputs: ["rowHeight", "totalHeaderHeight", "contentWidth", "contentHeight", "rowsWrapperOffset", "slotsArray", "visibleColumnWithIndices", "totalWidth", "columnPositions", "columnWidths", "totalRows", "activeCell", "selectionRange", "editingCell", "cellRenderers", "globalCellRenderer", "editRenderers", "globalEditRenderer", "hoverPosition", "computeRowClasses", "computeCellClasses", "fillHandlePosition", "dragState"], outputs: ["scrolled", "cellPointerDown", "cellPointerEnter", "cellPointerLeave", "cellDoubleClick", "editValueChange", "editCommit", "editCancel", "fillHandlePointerDown"] }, { kind: "component", type: GridOverlaysComponent, selector: "gp-grid-overlays", inputs: ["filterPopup", "isLoading", "errorMessage", "headerHeight", "rowHeight", "dragState", "visibleColumnWithIndices", "columnPositions", "scrollLeft", "effectiveColumns", "totalWidth"], outputs: ["filterApply", "filterClose"] }, { kind: "component", type: CellPeekComponent, selector: "gp-grid-cell-peek", inputs: ["peekCell", "column", "rowData", "containerEl", "cellRenderers", "globalCellRenderer"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GpGridComponent, isStandalone: true, selector: "gp-grid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, headerRenderers: { classPropertyName: "headerRenderers", publicName: "headerRenderers", isSignal: true, isRequired: false, transformFunction: null }, editRenderers: { classPropertyName: "editRenderers", publicName: "editRenderers", isSignal: true, isRequired: false, transformFunction: null }, cellRenderer: { classPropertyName: "cellRenderer", publicName: "cellRenderer", isSignal: true, isRequired: false, transformFunction: null }, headerRenderer: { classPropertyName: "headerRenderer", publicName: "headerRenderer", isSignal: true, isRequired: false, transformFunction: null }, editRenderer: { classPropertyName: "editRenderer", publicName: "editRenderer", isSignal: true, isRequired: false, transformFunction: null }, highlighting: { classPropertyName: "highlighting", publicName: "highlighting", isSignal: true, isRequired: false, transformFunction: null }, rowDragEntireRow: { classPropertyName: "rowDragEntireRow", publicName: "rowDragEntireRow", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, maxFlingVelocity: { classPropertyName: "maxFlingVelocity", publicName: "maxFlingVelocity", isSignal: true, isRequired: false, transformFunction: null }, rowLoading: { classPropertyName: "rowLoading", publicName: "rowLoading", isSignal: true, isRequired: false, transformFunction: null }, sortingEnabled: { classPropertyName: "sortingEnabled", publicName: "sortingEnabled", isSignal: true, isRequired: false, transformFunction: null }, wheelDampening: { classPropertyName: "wheelDampening", publicName: "wheelDampening", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRowDragEnd: "onRowDragEnd", onCellValueChanged: "onCellValueChanged", onColumnResized: "onColumnResized", onColumnMoved: "onColumnMoved" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "body", first: true, predicate: GridBodyComponent, descendants: true }], ngImport: i0, template: "\n    <div #container\n      [class]=\"'gp-grid-container' + (darkMode() ? ' gp-grid-container--dark' : '')\"\n      style=\"width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; outline: none;\"\n      tabindex=\"0\"\n      (keydown)=\"onKeyDown($event)\"\n      (paste)=\"onPaste($event)\"\n      (wheel)=\"onWheel($event)\"\n    >\n      <gp-grid-header\n        [headerHeight]=\"headerHeight()\"\n        [scrollLeft]=\"vm.scrollLeft()\"\n        [contentWidth]=\"vm.contentWidth()\"\n        [totalWidth]=\"vm.totalWidth()\"\n        [isLoading]=\"vm.isLoading()\"\n        [visibleColumnsWithIndices]=\"vm.visibleColumnWithIndices()\"\n        [columnPositions]=\"vm.columnPositions()\"\n        [columnWidths]=\"vm.columnWidths()\"\n        [headers]=\"vm.headerState()\"\n        [sortingEnabled]=\"sortingEnabled()\"\n        [headerRenderers]=\"headerRenderers()\"\n        [globalHeaderRenderer]=\"headerRenderer()\"\n        (headerPointerDown)=\"onHeaderPointerDown($event)\"\n        (filterPointerDown)=\"onFilterPointerDown($event)\"\n        (resizePointerDown)=\"onResizePointerDown($event)\"\n        (headerSort)=\"onHeaderSort($event)\"\n      />\n      <gp-grid-body\n        [rowHeight]=\"rowHeight()\"\n        [totalHeaderHeight]=\"headerHeight()\"\n        [contentWidth]=\"vm.contentWidth()\"\n        [contentHeight]=\"vm.contentHeight()\"\n        [totalWidth]=\"vm.totalWidth()\"\n        [rowsWrapperOffset]=\"vm.rowsWrapperOffset()\"\n        [slotsArray]=\"vm.slotsArray()\"\n        [visibleColumnWithIndices]=\"vm.visibleColumnWithIndices()\"\n        [columnPositions]=\"vm.columnPositions()\"\n        [columnWidths]=\"vm.columnWidths()\"\n        [totalRows]=\"vm.totalRows()\"\n        [activeCell]=\"vm.activeCell()\"\n        [selectionRange]=\"vm.selectionRange()\"\n        [editingCell]=\"vm.editingCell()\"\n        [cellRenderers]=\"cellRenderers()\"\n        [globalCellRenderer]=\"cellRenderer()\"\n        [editRenderers]=\"editRenderers()\"\n        [globalEditRenderer]=\"editRenderer()\"\n        [hoverPosition]=\"vm.hoverPosition()\"\n        [computeRowClasses]=\"computeRowClassesFn\"\n        [computeCellClasses]=\"computeCellClassesFn\"\n        [fillHandlePosition]=\"vm.fillHandlePosition()\"\n        [dragState]=\"vm.dragState()\"\n        (scrolled)=\"onBodyScroll($event)\"\n        (cellPointerDown)=\"onCellPointerDown($event)\"\n        (cellPointerEnter)=\"onCellPointerEnter($event)\"\n        (cellPointerLeave)=\"onCellPointerLeave()\"\n        (cellDoubleClick)=\"onCellDoubleClick($event)\"\n        (editValueChange)=\"onEditValueChange($event)\"\n        (editCommit)=\"onEditCommit()\"\n        (editCancel)=\"onEditCancel()\"\n        (fillHandlePointerDown)=\"onFillHandlePointerDown($event)\"\n      />\n      <gp-grid-overlays\n        [filterPopup]=\"vm.filterPopup()\"\n        [isLoading]=\"vm.isLoading()\"\n        [errorMessage]=\"vm.errorMessage()\"\n        [headerHeight]=\"headerHeight()\"\n        [rowHeight]=\"rowHeight()\"\n        [dragState]=\"vm.dragState()\"\n        [visibleColumnWithIndices]=\"vm.visibleColumnWithIndices()\"\n        [columnPositions]=\"vm.columnPositions()\"\n        [scrollLeft]=\"vm.scrollLeft()\"\n        [effectiveColumns]=\"vm.effectiveColumns()\"\n        [totalWidth]=\"vm.totalWidth()\"\n        (filterApply)=\"onFilterApply($event)\"\n        (filterClose)=\"onFilterClose()\"\n      />\n      @if (peekContext(); as ctx) {\n        <gp-grid-cell-peek\n          [peekCell]=\"ctx.peek\"\n          [column]=\"ctx.column\"\n          [rowData]=\"ctx.rowData\"\n          [containerEl]=\"container\"\n          [cellRenderers]=\"cellRenderers()\"\n          [globalCellRenderer]=\"cellRenderer()\"\n          (close)=\"onPeekClose()\"\n        />\n      }\n    </div>\n  ", isInline: true, styles: [":host{display:block;height:100%;min-height:0}\n"], dependencies: [{ kind: "component", type: GridHeaderComponent, selector: "gp-grid-header", inputs: ["headerHeight", "scrollLeft", "contentWidth", "totalWidth", "isLoading", "visibleColumnsWithIndices", "columnPositions", "columnWidths", "headers", "sortingEnabled", "headerRenderers", "globalHeaderRenderer"], outputs: ["headerPointerDown", "filterPointerDown", "resizePointerDown", "headerSort", "headerFilterOpen"] }, { kind: "component", type: GridBodyComponent, selector: "gp-grid-body", inputs: ["rowHeight", "totalHeaderHeight", "contentWidth", "contentHeight", "rowsWrapperOffset", "slotsArray", "visibleColumnWithIndices", "totalWidth", "columnPositions", "columnWidths", "totalRows", "activeCell", "selectionRange", "editingCell", "cellRenderers", "globalCellRenderer", "editRenderers", "globalEditRenderer", "hoverPosition", "computeRowClasses", "computeCellClasses", "fillHandlePosition", "dragState"], outputs: ["scrolled", "cellPointerDown", "cellPointerEnter", "cellPointerLeave", "cellDoubleClick", "editValueChange", "editCommit", "editCancel", "fillHandlePointerDown"] }, { kind: "component", type: GridOverlaysComponent, selector: "gp-grid-overlays", inputs: ["filterPopup", "isLoading", "errorMessage", "headerHeight", "rowHeight", "dragState", "visibleColumnWithIndices", "columnPositions", "scrollLeft", "effectiveColumns", "totalWidth"], outputs: ["filterApply", "filterClose"] }, { kind: "component", type: CellPeekComponent, selector: "gp-grid-cell-peek", inputs: ["peekCell", "column", "rowData", "containerEl", "cellRenderers", "globalCellRenderer"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GpGridComponent, decorators: [{
             type: Component,
@@ -1804,7 +1833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
             }], body: [{
                 type: ViewChild,
                 args: [GridBodyComponent]
-            }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], darkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkMode", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], headerRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerRenderers", required: false }] }], editRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRenderers", required: false }] }], cellRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderer", required: false }] }], headerRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerRenderer", required: false }] }], editRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRenderer", required: false }] }], highlighting: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighting", required: false }] }], rowDragEntireRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDragEntireRow", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], rowLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLoading", required: false }] }], sortingEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingEnabled", required: false }] }], wheelDampening: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheelDampening", required: false }] }], onRowDragEnd: [{ type: i0.Output, args: ["onRowDragEnd"] }], onCellValueChanged: [{ type: i0.Output, args: ["onCellValueChanged"] }], onColumnResized: [{ type: i0.Output, args: ["onColumnResized"] }], onColumnMoved: [{ type: i0.Output, args: ["onColumnMoved"] }] } });
+            }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], darkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkMode", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], headerRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerRenderers", required: false }] }], editRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRenderers", required: false }] }], cellRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderer", required: false }] }], headerRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerRenderer", required: false }] }], editRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRenderer", required: false }] }], highlighting: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighting", required: false }] }], rowDragEntireRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDragEntireRow", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], maxFlingVelocity: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFlingVelocity", required: false }] }], rowLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLoading", required: false }] }], sortingEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingEnabled", required: false }] }], wheelDampening: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheelDampening", required: false }] }], onRowDragEnd: [{ type: i0.Output, args: ["onRowDragEnd"] }], onCellValueChanged: [{ type: i0.Output, args: ["onCellValueChanged"] }], onColumnResized: [{ type: i0.Output, args: ["onColumnResized"] }], onColumnMoved: [{ type: i0.Output, args: ["onColumnMoved"] }] } });
 
 /**
  * Angular helper for efficient grid data mutations.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gp-grid/angular",
   "description": "A high-performance Angular data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "license": "Apache-2.0",
   "module": "fesm2022/gp-grid-angular.mjs",
   "typings": "types/gp-grid-angular.d.ts",
@@ -51,7 +51,7 @@
     "@angular/core": ">=18.0.0"
   },
   "dependencies": {
-    "@gp-grid/core": "0.17.0",
+    "@gp-grid/core": "0.19.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/types/gp-grid-angular.d.ts

@@ -377,6 +377,8 @@ declare class GpGridComponent implements OnInit, AfterViewInit, OnDestroy {
     highlighting: _angular_core.InputSignal<HighlightingOptions<Record<string, unknown>>>;
     rowDragEntireRow: _angular_core.InputSignal<boolean>;
     overscan: _angular_core.InputSignal<number>;
+    /** Max accumulated touch-fling velocity (logical px/ms) when scroll virtualization is active. Pair higher values with overscan 10-12. */
+    maxFlingVelocity: _angular_core.InputSignal<number>;
     rowLoading: _angular_core.InputSignal<RowLoadingOptions>;
     sortingEnabled: _angular_core.InputSignal<boolean>;
     wheelDampening: _angular_core.InputSignal<number>;
@@ -431,7 +433,7 @@ declare class GpGridComponent implements OnInit, AfterViewInit, OnDestroy {
     private onDocumentPointerMove;
     private onDocumentPointerUp;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GpGridComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GpGridComponent, "gp-grid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "getRowId": { "alias": "getRowId"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "headerHeight": { "alias": "headerHeight"; "required": false; "isSignal": true; }; "darkMode": { "alias": "darkMode"; "required": false; "isSignal": true; }; "cellRenderers": { "alias": "cellRenderers"; "required": false; "isSignal": true; }; "headerRenderers": { "alias": "headerRenderers"; "required": false; "isSignal": true; }; "editRenderers": { "alias": "editRenderers"; "required": false; "isSignal": true; }; "cellRenderer": { "alias": "cellRenderer"; "required": false; "isSignal": true; }; "headerRenderer": { "alias": "headerRenderer"; "required": false; "isSignal": true; }; "editRenderer": { "alias": "editRenderer"; "required": false; "isSignal": true; }; "highlighting": { "alias": "highlighting"; "required": false; "isSignal": true; }; "rowDragEntireRow": { "alias": "rowDragEntireRow"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "rowLoading": { "alias": "rowLoading"; "required": false; "isSignal": true; }; "sortingEnabled": { "alias": "sortingEnabled"; "required": false; "isSignal": true; }; "wheelDampening": { "alias": "wheelDampening"; "required": false; "isSignal": true; }; }, { "onRowDragEnd": "onRowDragEnd"; "onCellValueChanged": "onCellValueChanged"; "onColumnResized": "onColumnResized"; "onColumnMoved": "onColumnMoved"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GpGridComponent, "gp-grid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "getRowId": { "alias": "getRowId"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "headerHeight": { "alias": "headerHeight"; "required": false; "isSignal": true; }; "darkMode": { "alias": "darkMode"; "required": false; "isSignal": true; }; "cellRenderers": { "alias": "cellRenderers"; "required": false; "isSignal": true; }; "headerRenderers": { "alias": "headerRenderers"; "required": false; "isSignal": true; }; "editRenderers": { "alias": "editRenderers"; "required": false; "isSignal": true; }; "cellRenderer": { "alias": "cellRenderer"; "required": false; "isSignal": true; }; "headerRenderer": { "alias": "headerRenderer"; "required": false; "isSignal": true; }; "editRenderer": { "alias": "editRenderer"; "required": false; "isSignal": true; }; "highlighting": { "alias": "highlighting"; "required": false; "isSignal": true; }; "rowDragEntireRow": { "alias": "rowDragEntireRow"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "maxFlingVelocity": { "alias": "maxFlingVelocity"; "required": false; "isSignal": true; }; "rowLoading": { "alias": "rowLoading"; "required": false; "isSignal": true; }; "sortingEnabled": { "alias": "sortingEnabled"; "required": false; "isSignal": true; }; "wheelDampening": { "alias": "wheelDampening"; "required": false; "isSignal": true; }; }, { "onRowDragEnd": "onRowDragEnd"; "onCellValueChanged": "onCellValueChanged"; "onColumnResized": "onColumnResized"; "onColumnMoved": "onColumnMoved"; }, never, never, true, never>;
 }
 
 interface CreateGridDataOptions<TData> {