@gp-grid/angular 0.18.0 → 0.20.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, PendingCellTapController, TouchScrollController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
+import { getFieldValue, isCellSelected, isCellActive, formatCellValue, isCellInFillPreview, buildCellClasses, isCellEditing, labelsForSelectedValues, rawValuesForLabels, groupDistinctValues, isBlankCellValue, 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 = `
@@ -540,19 +540,21 @@ const FILTER_POPUP_TEMPLATE = `
           <button type="button" (click)="deselectAll()">Deselect All</button>
         </div>
         <div class="gp-grid-filter-list">
-          <label class="gp-grid-filter-option">
-            <input
-              type="checkbox"
-              [checked]="includeBlanks"
-              (change)="includeBlanks = $any($event.target).checked" />
-            <span class="gp-grid-filter-blank">(Blanks)</span>
-          </label>
-          @for (entry of filteredUniqueEntries(); track entry.key) {
+          @if (hasBlanks()) {
             <label class="gp-grid-filter-option">
               <input
                 type="checkbox"
-                [checked]="selectedValues.has(entry.key)"
-                (change)="toggleValue(entry.key, $any($event.target).checked)" />
+                [checked]="includeBlanks"
+                (change)="includeBlanks = $any($event.target).checked" />
+              <span class="gp-grid-filter-blank">(Blanks)</span>
+            </label>
+          }
+          @for (entry of filteredUniqueEntries(); track entry.label) {
+            <label class="gp-grid-filter-option">
+              <input
+                type="checkbox"
+                [checked]="selectedLabels.has(entry.label)"
+                (change)="toggleValue(entry.label, $any($event.target).checked)" />
               <span>{{ entry.label }}</span>
             </label>
           }
@@ -658,40 +660,24 @@ const defaultNumberCondition = () => ({
     valueTo: '',
     nextOperator: 'and',
 });
-const computeUniqueValues = (distinctValues, formatter) => {
-    const seen = new Set();
-    const result = [];
-    for (const val of distinctValues) {
-        if (val === null || val === undefined || val === '')
-            continue;
-        // Key by formatter output when available so filter-time comparison
-        // (which also goes through the formatter) matches what the user selects.
-        const key = formatter ? formatter(val) : String(val);
-        if (!seen.has(key)) {
-            seen.add(key);
-            result.push({ key, label: key });
-        }
-    }
-    return result.sort((a, b) => a.label.localeCompare(b.label, undefined, { numeric: true, sensitivity: 'base' }));
-};
-const initTextState = (filter, uniqueValues) => {
+const initTextState = (filter, entries) => {
     if (!filter)
-        return defaultTextState(uniqueValues);
+        return defaultTextState(entries);
     const textConds = filter.conditions.filter((c) => c.type === 'text');
     if (textConds.length === 0)
-        return defaultTextState(uniqueValues);
+        return defaultTextState(entries);
     const firstCond = textConds[0];
     if (firstCond?.selectedValues !== undefined) {
         return {
             filterMode: 'values',
-            selectedValues: new Set(firstCond.selectedValues),
+            selectedLabels: labelsForSelectedValues(entries, firstCond.selectedValues),
             includeBlanks: firstCond.includeBlank ?? true,
             textConditions: [defaultTextCondition()],
         };
     }
     return {
         filterMode: 'condition',
-        selectedValues: new Set(uniqueValues),
+        selectedLabels: new Set(entries.map(e => e.label)),
         includeBlanks: true,
         textConditions: textConds.map((c, i) => ({
             operator: c.operator,
@@ -700,9 +686,9 @@ const initTextState = (filter, uniqueValues) => {
         })),
     };
 };
-const defaultTextState = (uniqueValues) => ({
+const defaultTextState = (entries) => ({
     filterMode: 'values',
-    selectedValues: new Set(uniqueValues),
+    selectedLabels: new Set(entries.map(e => e.label)),
     includeBlanks: true,
     textConditions: [defaultTextCondition()],
 });
@@ -726,14 +712,14 @@ const buildTextFilter = (input) => {
     return buildConditionTextFilter(input.textConditions);
 };
 const buildValuesFilter = (input) => {
-    const allSelected = input.uniqueValues.every(v => input.selectedValues.has(v));
+    const allSelected = input.entries.every(e => input.selectedLabels.has(e.label));
     if (allSelected && input.includeBlanks)
         return null;
     return {
         conditions: [{
                 type: 'text',
-                operator: 'contains',
-                selectedValues: new Set(input.selectedValues),
+                operator: 'equals',
+                selectedValues: rawValuesForLabels(input.entries, input.selectedLabels),
                 includeBlank: input.includeBlanks,
             }],
         combination: 'or',
@@ -810,7 +796,8 @@ class FilterPopupComponent {
     positioned = signal(false, ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
     filterMode = 'values';
     searchText = '';
-    selectedValues = new Set();
+    // Ticked display labels; raw values are resolved on apply (buildTextFilter).
+    selectedLabels = new Set();
     includeBlanks = true;
     textConditions = [defaultTextCondition()];
     numberConditions = [defaultNumberCondition()];
@@ -859,10 +846,12 @@ class FilterPopupComponent {
         return this.uniqueEntries().length <= MAX_CHECKBOX_VALUES;
     }
     uniqueEntries() {
-        return computeUniqueValues(this.distinctValues(), this.column().valueFormatter);
+        return groupDistinctValues(this.distinctValues(), this.column().valueFormatter);
     }
-    uniqueValues() {
-        return this.uniqueEntries().map(e => e.key);
+    // Empty arrays count too (tags column with no tags), so the "(Blanks)"
+    // opt-out renders whenever blank rows exist — and only then.
+    hasBlanks() {
+        return this.distinctValues().some(isBlankCellValue);
     }
     filteredUniqueEntries() {
         const search = this.searchText.toLowerCase();
@@ -870,22 +859,22 @@ class FilterPopupComponent {
             return this.uniqueEntries();
         return this.uniqueEntries().filter(e => e.label.toLowerCase().includes(search));
     }
-    toggleValue(val, checked) {
+    toggleValue(label, checked) {
         if (checked) {
-            this.selectedValues.add(val);
+            this.selectedLabels.add(label);
         }
         else {
-            this.selectedValues.delete(val);
+            this.selectedLabels.delete(label);
         }
     }
     selectAll() {
         this.includeBlanks = true;
-        for (const v of this.uniqueValues())
-            this.selectedValues.add(v);
+        for (const entry of this.uniqueEntries())
+            this.selectedLabels.add(entry.label);
     }
     deselectAll() {
         this.includeBlanks = false;
-        this.selectedValues.clear();
+        this.selectedLabels.clear();
     }
     onTextOperatorChange(index, value) {
         setField(this.textConditions, index, 'operator', value);
@@ -925,8 +914,8 @@ class FilterPopupComponent {
             return buildNumberFilter(this.numberConditions);
         return buildTextFilter({
             filterMode: this.filterMode,
-            uniqueValues: this.uniqueValues(),
-            selectedValues: this.selectedValues,
+            entries: this.uniqueEntries(),
+            selectedLabels: this.selectedLabels,
             includeBlanks: this.includeBlanks,
             textConditions: this.textConditions,
         });
@@ -937,9 +926,9 @@ class FilterPopupComponent {
             this.numberConditions = initNumberConditions(filter);
             return;
         }
-        const state = initTextState(filter, this.uniqueValues());
+        const state = initTextState(filter, this.uniqueEntries());
         this.filterMode = state.filterMode;
-        this.selectedValues = state.selectedValues;
+        this.selectedLabels = state.selectedLabels;
         this.includeBlanks = state.includeBlanks;
         this.textConditions = state.textConditions;
     }
@@ -970,7 +959,7 @@ class FilterPopupComponent {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FilterPopupComponent, isStandalone: true, selector: "gp-grid-filter-popup", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: true, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true }], ngImport: i0, template: "\n<div\n  #popupEl\n  class=\"gp-grid-filter-popup\"\n  [style.position]=\"'fixed'\"\n  [style.zIndex]=\"10000\"\n  [style.top.px]=\"popupTop()\"\n  [style.left.px]=\"popupLeft()\"\n  [style.minWidth.px]=\"popupMinWidth()\"\n  [style.visibility]=\"positioned() ? 'visible' : 'hidden'\"\n  (keydown.escape)=\"close.emit()\"\n  (click)=\"$event.stopPropagation()\">\n\n  <div class=\"gp-grid-filter-header\">\n    Filter: {{ column().headerName ?? column().field }}\n  </div>\n\n  <div [class]=\"'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')\">\n  @if (isNumberColumn()) {\n      @for (cond of numberConditions; track $index; let i = $index) {\n        <div class=\"gp-grid-filter-condition\">\n          @if (i > 0) {\n            <div class=\"gp-grid-filter-combination\">\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'and'\"\n                (click)=\"setNumberNextOp(i - 1, 'and')\">\n                AND\n              </button>\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'or'\"\n                (click)=\"setNumberNextOp(i - 1, 'or')\">\n                OR\n              </button>\n            </div>\n          }\n          <div class=\"gp-grid-filter-row\">\n            <select\n              [value]=\"cond.operator\"\n              (change)=\"onNumberOperatorChange(i, $any($event.target).value)\">\n              @for (op of numberOperators; track op.value) {\n                <option [value]=\"op.value\">{{ op.label }}</option>\n              }\n            </select>\n            @if (!isValueLessNumberOp(cond.operator)) {\n              <input\n                type=\"number\"\n                [value]=\"cond.value\"\n                (input)=\"cond.value = $any($event.target).value\"\n                placeholder=\"Value\" />\n              @if (cond.operator === 'between') {\n                <span class=\"gp-grid-filter-to\">to</span>\n                <input\n                  type=\"number\"\n                  [value]=\"cond.valueTo\"\n                  (input)=\"cond.valueTo = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n            }\n            @if (numberConditions.length > 1) {\n              <button\n                type=\"button\"\n                class=\"gp-grid-filter-remove\"\n                (click)=\"removeNumberCondition(i)\">\u00D7</button>\n            }\n          </div>\n        </div>\n      }\n      <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addNumberCondition()\">\n        + Add condition\n      </button>\n  } @else {\n      @if (showValuesMode()) {\n        <div class=\"gp-grid-filter-mode-toggle\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'values'\"\n            (click)=\"filterMode = 'values'\">\n            Values\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'condition'\"\n            (click)=\"filterMode = 'condition'\">\n            Condition\n          </button>\n        </div>\n      }\n\n      @if (filterMode === 'values' && showValuesMode()) {\n        <input\n          class=\"gp-grid-filter-search\"\n          type=\"text\"\n          [value]=\"searchText\"\n          (input)=\"searchText = $any($event.target).value\"\n          placeholder=\"Search...\" />\n        <div class=\"gp-grid-filter-actions\">\n          <button type=\"button\" (click)=\"selectAll()\">Select All</button>\n          <button type=\"button\" (click)=\"deselectAll()\">Deselect All</button>\n        </div>\n        <div class=\"gp-grid-filter-list\">\n          <label class=\"gp-grid-filter-option\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"includeBlanks\"\n              (change)=\"includeBlanks = $any($event.target).checked\" />\n            <span class=\"gp-grid-filter-blank\">(Blanks)</span>\n          </label>\n          @for (entry of filteredUniqueEntries(); track entry.key) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedValues.has(entry.key)\"\n                (change)=\"toggleValue(entry.key, $any($event.target).checked)\" />\n              <span>{{ entry.label }}</span>\n            </label>\n          }\n        </div>\n      }\n\n      @if (filterMode === 'condition') {\n        @for (cond of textConditions; track $index; let i = $index) {\n          <div class=\"gp-grid-filter-condition\">\n            @if (i > 0) {\n              <div class=\"gp-grid-filter-combination\">\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'and'\"\n                  (click)=\"setTextNextOp(i - 1, 'and')\">\n                  AND\n                </button>\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'or'\"\n                  (click)=\"setTextNextOp(i - 1, 'or')\">\n                  OR\n                </button>\n              </div>\n            }\n            <div class=\"gp-grid-filter-row\">\n              <select\n                [value]=\"cond.operator\"\n                (change)=\"onTextOperatorChange(i, $any($event.target).value)\">\n                @for (op of textOperators; track op.value) {\n                  <option [value]=\"op.value\">{{ op.label }}</option>\n                }\n              </select>\n              @if (!isValueLessTextOp(cond.operator)) {\n                <input\n                  class=\"gp-grid-filter-text-input\"\n                  type=\"text\"\n                  [value]=\"cond.value\"\n                  (input)=\"cond.value = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n              @if (textConditions.length > 1) {\n                <button\n                  type=\"button\"\n                  class=\"gp-grid-filter-remove\"\n                  (click)=\"removeTextCondition(i)\">\u00D7</button>\n              }\n            </div>\n          </div>\n        }\n        <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addTextCondition()\">\n          + Add condition\n        </button>\n      }\n  }\n\n    <div class=\"gp-grid-filter-buttons\">\n      <button type=\"button\" class=\"gp-grid-filter-btn-clear\" (click)=\"handleClear()\">\n        Clear\n      </button>\n      <button type=\"button\" class=\"gp-grid-filter-btn-apply\" (click)=\"handleApply()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FilterPopupComponent, isStandalone: true, selector: "gp-grid-filter-popup", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: true, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true }], ngImport: i0, template: "\n<div\n  #popupEl\n  class=\"gp-grid-filter-popup\"\n  [style.position]=\"'fixed'\"\n  [style.zIndex]=\"10000\"\n  [style.top.px]=\"popupTop()\"\n  [style.left.px]=\"popupLeft()\"\n  [style.minWidth.px]=\"popupMinWidth()\"\n  [style.visibility]=\"positioned() ? 'visible' : 'hidden'\"\n  (keydown.escape)=\"close.emit()\"\n  (click)=\"$event.stopPropagation()\">\n\n  <div class=\"gp-grid-filter-header\">\n    Filter: {{ column().headerName ?? column().field }}\n  </div>\n\n  <div [class]=\"'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')\">\n  @if (isNumberColumn()) {\n      @for (cond of numberConditions; track $index; let i = $index) {\n        <div class=\"gp-grid-filter-condition\">\n          @if (i > 0) {\n            <div class=\"gp-grid-filter-combination\">\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'and'\"\n                (click)=\"setNumberNextOp(i - 1, 'and')\">\n                AND\n              </button>\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'or'\"\n                (click)=\"setNumberNextOp(i - 1, 'or')\">\n                OR\n              </button>\n            </div>\n          }\n          <div class=\"gp-grid-filter-row\">\n            <select\n              [value]=\"cond.operator\"\n              (change)=\"onNumberOperatorChange(i, $any($event.target).value)\">\n              @for (op of numberOperators; track op.value) {\n                <option [value]=\"op.value\">{{ op.label }}</option>\n              }\n            </select>\n            @if (!isValueLessNumberOp(cond.operator)) {\n              <input\n                type=\"number\"\n                [value]=\"cond.value\"\n                (input)=\"cond.value = $any($event.target).value\"\n                placeholder=\"Value\" />\n              @if (cond.operator === 'between') {\n                <span class=\"gp-grid-filter-to\">to</span>\n                <input\n                  type=\"number\"\n                  [value]=\"cond.valueTo\"\n                  (input)=\"cond.valueTo = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n            }\n            @if (numberConditions.length > 1) {\n              <button\n                type=\"button\"\n                class=\"gp-grid-filter-remove\"\n                (click)=\"removeNumberCondition(i)\">\u00D7</button>\n            }\n          </div>\n        </div>\n      }\n      <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addNumberCondition()\">\n        + Add condition\n      </button>\n  } @else {\n      @if (showValuesMode()) {\n        <div class=\"gp-grid-filter-mode-toggle\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'values'\"\n            (click)=\"filterMode = 'values'\">\n            Values\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'condition'\"\n            (click)=\"filterMode = 'condition'\">\n            Condition\n          </button>\n        </div>\n      }\n\n      @if (filterMode === 'values' && showValuesMode()) {\n        <input\n          class=\"gp-grid-filter-search\"\n          type=\"text\"\n          [value]=\"searchText\"\n          (input)=\"searchText = $any($event.target).value\"\n          placeholder=\"Search...\" />\n        <div class=\"gp-grid-filter-actions\">\n          <button type=\"button\" (click)=\"selectAll()\">Select All</button>\n          <button type=\"button\" (click)=\"deselectAll()\">Deselect All</button>\n        </div>\n        <div class=\"gp-grid-filter-list\">\n          @if (hasBlanks()) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"includeBlanks\"\n                (change)=\"includeBlanks = $any($event.target).checked\" />\n              <span class=\"gp-grid-filter-blank\">(Blanks)</span>\n            </label>\n          }\n          @for (entry of filteredUniqueEntries(); track entry.label) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedLabels.has(entry.label)\"\n                (change)=\"toggleValue(entry.label, $any($event.target).checked)\" />\n              <span>{{ entry.label }}</span>\n            </label>\n          }\n        </div>\n      }\n\n      @if (filterMode === 'condition') {\n        @for (cond of textConditions; track $index; let i = $index) {\n          <div class=\"gp-grid-filter-condition\">\n            @if (i > 0) {\n              <div class=\"gp-grid-filter-combination\">\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'and'\"\n                  (click)=\"setTextNextOp(i - 1, 'and')\">\n                  AND\n                </button>\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'or'\"\n                  (click)=\"setTextNextOp(i - 1, 'or')\">\n                  OR\n                </button>\n              </div>\n            }\n            <div class=\"gp-grid-filter-row\">\n              <select\n                [value]=\"cond.operator\"\n                (change)=\"onTextOperatorChange(i, $any($event.target).value)\">\n                @for (op of textOperators; track op.value) {\n                  <option [value]=\"op.value\">{{ op.label }}</option>\n                }\n              </select>\n              @if (!isValueLessTextOp(cond.operator)) {\n                <input\n                  class=\"gp-grid-filter-text-input\"\n                  type=\"text\"\n                  [value]=\"cond.value\"\n                  (input)=\"cond.value = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n              @if (textConditions.length > 1) {\n                <button\n                  type=\"button\"\n                  class=\"gp-grid-filter-remove\"\n                  (click)=\"removeTextCondition(i)\">\u00D7</button>\n              }\n            </div>\n          </div>\n        }\n        <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addTextCondition()\">\n          + Add condition\n        </button>\n      }\n  }\n\n    <div class=\"gp-grid-filter-buttons\">\n      <button type=\"button\" class=\"gp-grid-filter-btn-clear\" (click)=\"handleClear()\">\n        Clear\n      </button>\n      <button type=\"button\" class=\"gp-grid-filter-btn-apply\" (click)=\"handleApply()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, decorators: [{
             type: Component,
@@ -1506,6 +1495,7 @@ class GpGridBindings {
     }
     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);
@@ -1600,6 +1590,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,
@@ -1632,6 +1623,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 */ []));
@@ -1665,6 +1658,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),
@@ -1817,7 +1811,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,
@@ -1828,7 +1822,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.18.0",
+  "version": "0.20.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.18.0",
+    "@gp-grid/core": "0.20.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

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

@@ -1,5 +1,5 @@
 import * as _gp_grid_core from '@gp-grid/core';
-import { HeaderRendererParams, SortDirection, VisibleColumnInfo, HeaderData, ColumnDefinition, SlotData, CellPosition, CellRange, CellValue, CellRendererParams, EditRendererParams, FillHandlePosition, DragState, ColumnFilterModel, BatchChangeSetters, DataSource, RowId, HighlightingOptions, RowLoadingOptions, CellValueChangedEvent, ParallelSortOptions, MutableDataSource } from '@gp-grid/core';
+import { HeaderRendererParams, SortDirection, VisibleColumnInfo, HeaderData, ColumnDefinition, SlotData, CellPosition, CellRange, CellValue, CellRendererParams, EditRendererParams, FillHandlePosition, DragState, ColumnFilterModel, DistinctValueEntry, BatchChangeSetters, DataSource, RowId, HighlightingOptions, RowLoadingOptions, CellValueChangedEvent, ParallelSortOptions, MutableDataSource } from '@gp-grid/core';
 export { CellDataType, CellPosition, CellRange, CellRendererParams, CellValue, CellValueChangedEvent, ColumnDefinition, ColumnFilterModel, DataSource, DataSourceLoadMode, DataSourceRange, DataSourceRequest, DataSourceResponse, EditRendererParams, FilterCondition, FilterModel, GridCore, GridInstruction, HeaderRendererParams, HighlightContext, HighlightingOptions, MutableDataSource, RowCacheEviction, RowCacheOptions, RowId, RowLoadingMode, RowLoadingOptions, SortDirection, SortModel, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ElementRef, AfterViewInit, OnDestroy, Signal, OnInit, InjectionToken, Provider } from '@angular/core';
@@ -156,10 +156,6 @@ interface NumberConditionState {
     nextOperator: 'and' | 'or';
 }
 type FilterMode = 'values' | 'condition';
-interface FilterEntry {
-    key: string;
-    label: string;
-}
 
 declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     popupEl: ElementRef<HTMLDivElement>;
@@ -179,7 +175,7 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     positioned: _angular_core.WritableSignal<boolean>;
     filterMode: FilterMode;
     searchText: string;
-    selectedValues: Set<string>;
+    selectedLabels: Set<string>;
     includeBlanks: boolean;
     textConditions: TextConditionState[];
     numberConditions: NumberConditionState[];
@@ -199,10 +195,10 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     onEscape(): void;
     isNumberColumn(): boolean;
     showValuesMode(): boolean;
-    uniqueEntries(): FilterEntry[];
-    uniqueValues(): string[];
-    filteredUniqueEntries(): FilterEntry[];
-    toggleValue(val: string, checked: boolean): void;
+    uniqueEntries(): DistinctValueEntry[];
+    hasBlanks(): boolean;
+    filteredUniqueEntries(): DistinctValueEntry[];
+    toggleValue(label: string, checked: boolean): void;
     selectAll(): void;
     deselectAll(): void;
     onTextOperatorChange(index: number, value: string): void;
@@ -377,6 +373,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 +429,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> {