@gp-grid/angular 0.19.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,

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.19.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.19.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;