@gp-grid/angular 0.20.0 → 0.21.0

package/dist/styles.css

@@ -391,12 +391,34 @@
   box-sizing: border-box;
   display: flex;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
   user-select: none;
   -webkit-user-select: none;
 }
 
+/* Default cell content wrapper - the framework adapters wrap plain-text values
+   in this element so text-overflow can apply (it has no effect on the flex
+   container itself, which previously caused long text to hard-clip). */
+.gp-grid-cell-content {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Wrapped cell content - ColumnDefinition.wrapText: true.
+   Text flows onto additional lines and is clipped to the fixed row height. */
+.gp-grid-cell--wrap {
+  align-items: flex-start;
+}
+
+.gp-grid-cell--wrap .gp-grid-cell-content {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+}
+
 /* Visual properties - :where() for zero specificity, so user highlight classes always win */
 :where(.gp-grid-cell) {
   align-items: center;

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, labelsForSelectedValues, rawValuesForLabels, groupDistinctValues, isBlankCellValue, calculateFilterPopupPosition, bindPeekSelectAll, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, PendingCellTapController, TouchScrollController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
+import { defaultGridLabels, getFieldValue, isCellSelected, isCellActive, formatCellValue, isCellInFillPreview, isCellEditing, buildCellClasses, labelsForSelectedValues, rawValuesForLabels, getTextOperatorOptions, getNumberOperatorOptions, formatLabel, groupDistinctValues, isBlankCellValue, calculateFilterPopupPosition, bindPeekSelectAll, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, PendingCellTapController, TouchScrollController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, resolveGridLabels, createMutableClientDataSource } from '@gp-grid/core';
 export { GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
 
 const TEMPLATE$2 = `
@@ -219,7 +219,7 @@ const GRID_BODY_TEMPLATE = `<div
                         [ngTemplateOutletContext]="{ $implicit: cellParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
                       </ng-container>
                     } @else {
-                      {{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}
+                      <span class="gp-grid-cell-content">{{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}</span>
                     }
                   }
                 </div>
@@ -246,7 +246,7 @@ const GRID_BODY_TEMPLATE = `<div
       </div>
     </div>
     @if (totalRows() === 0) {
-      <div class="gp-grid-empty">No data to display</div>
+      <div class="gp-grid-empty">{{ labels().emptyState }}</div>
     }
   </div>
 `;
@@ -276,6 +276,7 @@ class GridBodyComponent {
     computeCellClasses = input(null, ...(ngDevMode ? [{ debugName: "computeCellClasses" }] : /* istanbul ignore next */ []));
     fillHandlePosition = input(null, ...(ngDevMode ? [{ debugName: "fillHandlePosition" }] : /* istanbul ignore next */ []));
     dragState = input(null, ...(ngDevMode ? [{ debugName: "dragState" }] : /* istanbul ignore next */ []));
+    labels = input(defaultGridLabels, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     scrolled = output();
     cellPointerDown = output();
     cellPointerEnter = output();
@@ -381,17 +382,22 @@ class GridBodyComponent {
         this.hoverPosition();
         const ds = this.dragState();
         const inFillPreview = isCellInFillPreview(rowIndex, colIndex, ds?.dragType === "fill", ds?.fillSourceRange ?? null, ds?.fillTarget ?? null);
-        const base = buildCellClasses(isCellActive(rowIndex, colIndex, this.activeCell()), isCellSelected(rowIndex, colIndex, this.selectionRange()), isCellEditing(rowIndex, colIndex, editingCell), inFillPreview);
+        const editing = isCellEditing(rowIndex, colIndex, editingCell);
+        const base = buildCellClasses(isCellActive(rowIndex, colIndex, this.activeCell()), isCellSelected(rowIndex, colIndex, this.selectionRange()), editing, inFillPreview);
         const withHandle = column.rowDrag === true
             ? `${base} gp-grid-cell--row-drag-handle`
             : base;
+        // Wrap only affects the default text content, so skip it in edit mode.
+        const withWrap = column.wrapText === true && !editing
+            ? `${withHandle} gp-grid-cell--wrap`
+            : withHandle;
         const fn = this.computeCellClasses();
         if (fn === null)
-            return withHandle;
+            return withWrap;
         const extra = fn(rowIndex, colIndex, column, rowData);
         if (extra.length === 0)
-            return withHandle;
-        return `${withHandle} ${extra.join(' ')}`;
+            return withWrap;
+        return `${withWrap} ${extra.join(' ')}`;
     }
     rowClass(rowIndex, rowData) {
         this.hoverPosition();
@@ -428,7 +434,7 @@ class GridBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GridBodyComponent, isStandalone: true, selector: "gp-grid-body", inputs: { rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, totalHeaderHeight: { classPropertyName: "totalHeaderHeight", publicName: "totalHeaderHeight", isSignal: true, isRequired: true, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: true, transformFunction: null }, contentHeight: { classPropertyName: "contentHeight", publicName: "contentHeight", isSignal: true, isRequired: true, transformFunction: null }, rowsWrapperOffset: { classPropertyName: "rowsWrapperOffset", publicName: "rowsWrapperOffset", isSignal: true, isRequired: true, transformFunction: null }, slotsArray: { classPropertyName: "slotsArray", publicName: "slotsArray", isSignal: true, isRequired: true, transformFunction: null }, visibleColumnWithIndices: { classPropertyName: "visibleColumnWithIndices", publicName: "visibleColumnWithIndices", isSignal: true, isRequired: true, transformFunction: null }, totalWidth: { classPropertyName: "totalWidth", publicName: "totalWidth", isSignal: true, isRequired: true, transformFunction: null }, columnPositions: { classPropertyName: "columnPositions", publicName: "columnPositions", isSignal: true, isRequired: true, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: true, transformFunction: null }, totalRows: { classPropertyName: "totalRows", publicName: "totalRows", isSignal: true, isRequired: true, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, selectionRange: { classPropertyName: "selectionRange", publicName: "selectionRange", isSignal: true, isRequired: false, transformFunction: null }, editingCell: { classPropertyName: "editingCell", publicName: "editingCell", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, globalCellRenderer: { classPropertyName: "globalCellRenderer", publicName: "globalCellRenderer", isSignal: true, isRequired: false, transformFunction: null }, editRenderers: { classPropertyName: "editRenderers", publicName: "editRenderers", isSignal: true, isRequired: false, transformFunction: null }, globalEditRenderer: { classPropertyName: "globalEditRenderer", publicName: "globalEditRenderer", isSignal: true, isRequired: false, transformFunction: null }, hoverPosition: { classPropertyName: "hoverPosition", publicName: "hoverPosition", isSignal: true, isRequired: false, transformFunction: null }, computeRowClasses: { classPropertyName: "computeRowClasses", publicName: "computeRowClasses", isSignal: true, isRequired: false, transformFunction: null }, computeCellClasses: { classPropertyName: "computeCellClasses", publicName: "computeCellClasses", isSignal: true, isRequired: false, transformFunction: null }, fillHandlePosition: { classPropertyName: "fillHandlePosition", publicName: "fillHandlePosition", isSignal: true, isRequired: false, transformFunction: null }, dragState: { classPropertyName: "dragState", publicName: "dragState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled", cellPointerDown: "cellPointerDown", cellPointerEnter: "cellPointerEnter", cellPointerLeave: "cellPointerLeave", cellDoubleClick: "cellDoubleClick", editValueChange: "editValueChange", editCommit: "editCommit", editCancel: "editCancel", fillHandlePointerDown: "fillHandlePointerDown" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div\n  #scrollContainer\n  style=\"height: 100%; overflow: auto; position: relative;\"\n  (scroll)=\"onScroll()\">\n    <div\n      style=\"position: relative; min-width: 100%\"\n      [style.width.px]=\"innerWidth()\"\n      [style.height.px]=\"sizerHeight()\">\n      <div\n        class=\"gp-grid-rows-wrapper\"\n        [style.width.px]=\"innerWidth()\"\n        [style.transform]=\"wrapperTransform()\">\n        @for (slot of slotsArray(); track slot.slotId) {\n          @if (slot.rowIndex >= 0) {\n            <div\n              [class]=\"rowClass(slot.rowIndex, slot.rowData)\"\n              style=\"position: absolute; top: 0; left: 0\"\n              [style.transform]=\"'translateY(' + slot.translateY + 'px)'\"\n              [style.width.px]=\"innerWidth()\"\n              [style.height.px]=\"rowHeight()\"\n            >\n              @for (entry of visibleColumnWithIndices(); track entry.originalIndex; let i = $index) {\n                @let editing = isEditing(slot.rowIndex, entry.originalIndex);\n                <div\n                  [class]=\"cellClass(slot.rowIndex, entry.originalIndex, entry.column, slot.rowData)\"\n                  style=\"position: absolute; top: 0;\"\n                  [attr.data-cell-row]=\"slot.rowIndex\"\n                  [attr.data-cell-col]=\"entry.originalIndex\"\n                  [style.left.px]=\"columnPositions()[i]\"\n                  [style.width.px]=\"columnWidths()[i]\"\n                  [style.height.px]=\"rowHeight()\"\n                  (pointerdown)=\"cellPointerDown.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex, event: $event })\"\n                  (mouseenter)=\"cellPointerEnter.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })\"\n                  (mouseleave)=\"cellPointerLeave.emit()\"\n                  (dblclick)=\"cellDoubleClick.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })\"\n                >\n                  @if (editing) {\n                    @let etpl = editTemplate(entry.column);\n                    @if (etpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"etpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: editParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }\">\n                      </ng-container>\n                    } @else {\n                      <input\n                        class=\"gp-grid-edit-input\"\n                        type=\"text\"\n                        [value]=\"editInitialValue()\"\n                        autofocus\n                        (focus)=\"onEditFocus($event)\"\n                        (input)=\"editValueChange.emit(asInput($event).value)\"\n                        (keydown)=\"onEditKeyDown($event)\"\n                        (blur)=\"editCommit.emit()\" />\n                    }\n                  } @else {\n                    @let tpl = cellTemplate(entry.column);\n                    @if (tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: cellParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }\">\n                      </ng-container>\n                    } @else {\n                      {{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}\n                    }\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n        @if (fillHandlePosition(); as fhp) {\n          @if (editingCell() === null) {\n            <div\n              class=\"gp-grid-fill-handle\"\n              [style.top.px]=\"fhp.top\"\n              [style.left.px]=\"fhp.left\"\n              (pointerdown)=\"fillHandlePointerDown.emit({ event: $event })\">\n            </div>\n          }\n        }\n        @if (rowDropIndicator(); as rd) {\n          <div\n            class=\"gp-grid-row-drop-indicator\"\n            [style.transform]=\"'translateY(' + rd.dropIndicatorY + 'px)'\"\n            [style.width.px]=\"rowDropIndicatorWidth()\"></div>\n        }\n      </div>\n    </div>\n    @if (totalRows() === 0) {\n      <div class=\"gp-grid-empty\">No data to display</div>\n    }\n  </div>\n", isInline: true, styles: [":host{display:flex;flex:1;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GridBodyComponent, isStandalone: true, selector: "gp-grid-body", inputs: { rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, totalHeaderHeight: { classPropertyName: "totalHeaderHeight", publicName: "totalHeaderHeight", isSignal: true, isRequired: true, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: true, transformFunction: null }, contentHeight: { classPropertyName: "contentHeight", publicName: "contentHeight", isSignal: true, isRequired: true, transformFunction: null }, rowsWrapperOffset: { classPropertyName: "rowsWrapperOffset", publicName: "rowsWrapperOffset", isSignal: true, isRequired: true, transformFunction: null }, slotsArray: { classPropertyName: "slotsArray", publicName: "slotsArray", isSignal: true, isRequired: true, transformFunction: null }, visibleColumnWithIndices: { classPropertyName: "visibleColumnWithIndices", publicName: "visibleColumnWithIndices", isSignal: true, isRequired: true, transformFunction: null }, totalWidth: { classPropertyName: "totalWidth", publicName: "totalWidth", isSignal: true, isRequired: true, transformFunction: null }, columnPositions: { classPropertyName: "columnPositions", publicName: "columnPositions", isSignal: true, isRequired: true, transformFunction: null }, columnWidths: { classPropertyName: "columnWidths", publicName: "columnWidths", isSignal: true, isRequired: true, transformFunction: null }, totalRows: { classPropertyName: "totalRows", publicName: "totalRows", isSignal: true, isRequired: true, transformFunction: null }, activeCell: { classPropertyName: "activeCell", publicName: "activeCell", isSignal: true, isRequired: false, transformFunction: null }, selectionRange: { classPropertyName: "selectionRange", publicName: "selectionRange", isSignal: true, isRequired: false, transformFunction: null }, editingCell: { classPropertyName: "editingCell", publicName: "editingCell", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, globalCellRenderer: { classPropertyName: "globalCellRenderer", publicName: "globalCellRenderer", isSignal: true, isRequired: false, transformFunction: null }, editRenderers: { classPropertyName: "editRenderers", publicName: "editRenderers", isSignal: true, isRequired: false, transformFunction: null }, globalEditRenderer: { classPropertyName: "globalEditRenderer", publicName: "globalEditRenderer", isSignal: true, isRequired: false, transformFunction: null }, hoverPosition: { classPropertyName: "hoverPosition", publicName: "hoverPosition", isSignal: true, isRequired: false, transformFunction: null }, computeRowClasses: { classPropertyName: "computeRowClasses", publicName: "computeRowClasses", isSignal: true, isRequired: false, transformFunction: null }, computeCellClasses: { classPropertyName: "computeCellClasses", publicName: "computeCellClasses", isSignal: true, isRequired: false, transformFunction: null }, fillHandlePosition: { classPropertyName: "fillHandlePosition", publicName: "fillHandlePosition", isSignal: true, isRequired: false, transformFunction: null }, dragState: { classPropertyName: "dragState", publicName: "dragState", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrolled: "scrolled", cellPointerDown: "cellPointerDown", cellPointerEnter: "cellPointerEnter", cellPointerLeave: "cellPointerLeave", cellDoubleClick: "cellDoubleClick", editValueChange: "editValueChange", editCommit: "editCommit", editCancel: "editCancel", fillHandlePointerDown: "fillHandlePointerDown" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div\n  #scrollContainer\n  style=\"height: 100%; overflow: auto; position: relative;\"\n  (scroll)=\"onScroll()\">\n    <div\n      style=\"position: relative; min-width: 100%\"\n      [style.width.px]=\"innerWidth()\"\n      [style.height.px]=\"sizerHeight()\">\n      <div\n        class=\"gp-grid-rows-wrapper\"\n        [style.width.px]=\"innerWidth()\"\n        [style.transform]=\"wrapperTransform()\">\n        @for (slot of slotsArray(); track slot.slotId) {\n          @if (slot.rowIndex >= 0) {\n            <div\n              [class]=\"rowClass(slot.rowIndex, slot.rowData)\"\n              style=\"position: absolute; top: 0; left: 0\"\n              [style.transform]=\"'translateY(' + slot.translateY + 'px)'\"\n              [style.width.px]=\"innerWidth()\"\n              [style.height.px]=\"rowHeight()\"\n            >\n              @for (entry of visibleColumnWithIndices(); track entry.originalIndex; let i = $index) {\n                @let editing = isEditing(slot.rowIndex, entry.originalIndex);\n                <div\n                  [class]=\"cellClass(slot.rowIndex, entry.originalIndex, entry.column, slot.rowData)\"\n                  style=\"position: absolute; top: 0;\"\n                  [attr.data-cell-row]=\"slot.rowIndex\"\n                  [attr.data-cell-col]=\"entry.originalIndex\"\n                  [style.left.px]=\"columnPositions()[i]\"\n                  [style.width.px]=\"columnWidths()[i]\"\n                  [style.height.px]=\"rowHeight()\"\n                  (pointerdown)=\"cellPointerDown.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex, event: $event })\"\n                  (mouseenter)=\"cellPointerEnter.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })\"\n                  (mouseleave)=\"cellPointerLeave.emit()\"\n                  (dblclick)=\"cellDoubleClick.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })\"\n                >\n                  @if (editing) {\n                    @let etpl = editTemplate(entry.column);\n                    @if (etpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"etpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: editParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }\">\n                      </ng-container>\n                    } @else {\n                      <input\n                        class=\"gp-grid-edit-input\"\n                        type=\"text\"\n                        [value]=\"editInitialValue()\"\n                        autofocus\n                        (focus)=\"onEditFocus($event)\"\n                        (input)=\"editValueChange.emit(asInput($event).value)\"\n                        (keydown)=\"onEditKeyDown($event)\"\n                        (blur)=\"editCommit.emit()\" />\n                    }\n                  } @else {\n                    @let tpl = cellTemplate(entry.column);\n                    @if (tpl) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"tpl\"\n                        [ngTemplateOutletContext]=\"{ $implicit: cellParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }\">\n                      </ng-container>\n                    } @else {\n                      <span class=\"gp-grid-cell-content\">{{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}</span>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n        @if (fillHandlePosition(); as fhp) {\n          @if (editingCell() === null) {\n            <div\n              class=\"gp-grid-fill-handle\"\n              [style.top.px]=\"fhp.top\"\n              [style.left.px]=\"fhp.left\"\n              (pointerdown)=\"fillHandlePointerDown.emit({ event: $event })\">\n            </div>\n          }\n        }\n        @if (rowDropIndicator(); as rd) {\n          <div\n            class=\"gp-grid-row-drop-indicator\"\n            [style.transform]=\"'translateY(' + rd.dropIndicatorY + 'px)'\"\n            [style.width.px]=\"rowDropIndicatorWidth()\"></div>\n        }\n      </div>\n    </div>\n    @if (totalRows() === 0) {\n      <div class=\"gp-grid-empty\">{{ labels().emptyState }}</div>\n    }\n  </div>\n", isInline: true, styles: [":host{display:flex;flex:1;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridBodyComponent, decorators: [{
             type: Component,
@@ -436,7 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
         }], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ["scrollContainer"]
-            }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], totalHeaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalHeaderHeight", required: true }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: true }] }], contentHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHeight", required: true }] }], rowsWrapperOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsWrapperOffset", required: true }] }], slotsArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotsArray", required: true }] }], visibleColumnWithIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleColumnWithIndices", required: true }] }], totalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalWidth", required: true }] }], columnPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnPositions", required: true }] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: true }] }], totalRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRows", required: true }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }], selectionRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionRange", required: false }] }], editingCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingCell", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], globalCellRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalCellRenderer", required: false }] }], editRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRenderers", required: false }] }], globalEditRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalEditRenderer", required: false }] }], hoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverPosition", required: false }] }], computeRowClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "computeRowClasses", required: false }] }], computeCellClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "computeCellClasses", required: false }] }], fillHandlePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHandlePosition", required: false }] }], dragState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragState", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }], cellPointerDown: [{ type: i0.Output, args: ["cellPointerDown"] }], cellPointerEnter: [{ type: i0.Output, args: ["cellPointerEnter"] }], cellPointerLeave: [{ type: i0.Output, args: ["cellPointerLeave"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], editValueChange: [{ type: i0.Output, args: ["editValueChange"] }], editCommit: [{ type: i0.Output, args: ["editCommit"] }], editCancel: [{ type: i0.Output, args: ["editCancel"] }], fillHandlePointerDown: [{ type: i0.Output, args: ["fillHandlePointerDown"] }] } });
+            }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], totalHeaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalHeaderHeight", required: true }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: true }] }], contentHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHeight", required: true }] }], rowsWrapperOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsWrapperOffset", required: true }] }], slotsArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotsArray", required: true }] }], visibleColumnWithIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleColumnWithIndices", required: true }] }], totalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalWidth", required: true }] }], columnPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnPositions", required: true }] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: true }] }], totalRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRows", required: true }] }], activeCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeCell", required: false }] }], selectionRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionRange", required: false }] }], editingCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "editingCell", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], globalCellRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalCellRenderer", required: false }] }], editRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRenderers", required: false }] }], globalEditRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalEditRenderer", required: false }] }], hoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverPosition", required: false }] }], computeRowClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "computeRowClasses", required: false }] }], computeCellClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "computeCellClasses", required: false }] }], fillHandlePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHandlePosition", required: false }] }], dragState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragState", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], scrolled: [{ type: i0.Output, args: ["scrolled"] }], cellPointerDown: [{ type: i0.Output, args: ["cellPointerDown"] }], cellPointerEnter: [{ type: i0.Output, args: ["cellPointerEnter"] }], cellPointerLeave: [{ type: i0.Output, args: ["cellPointerLeave"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], editValueChange: [{ type: i0.Output, args: ["editValueChange"] }], editCommit: [{ type: i0.Output, args: ["editCommit"] }], editCancel: [{ type: i0.Output, args: ["editCancel"] }], fillHandlePointerDown: [{ type: i0.Output, args: ["fillHandlePointerDown"] }] } });
 
 const FILTER_POPUP_TEMPLATE = `
 <div
@@ -452,7 +458,7 @@ const FILTER_POPUP_TEMPLATE = `
   (click)="$event.stopPropagation()">
 
   <div class="gp-grid-filter-header">
-    Filter: {{ column().headerName ?? column().field }}
+    {{ filterTitle() }}
   </div>
 
   <div [class]="'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')">
@@ -465,13 +471,13 @@ const FILTER_POPUP_TEMPLATE = `
                 type="button"
                 [class.active]="numberConditions[i - 1]?.nextOperator === 'and'"
                 (click)="setNumberNextOp(i - 1, 'and')">
-                AND
+                {{ labels().and }}
               </button>
               <button
                 type="button"
                 [class.active]="numberConditions[i - 1]?.nextOperator === 'or'"
                 (click)="setNumberNextOp(i - 1, 'or')">
-                OR
+                {{ labels().or }}
               </button>
             </div>
           }
@@ -479,7 +485,7 @@ const FILTER_POPUP_TEMPLATE = `
             <select
               [value]="cond.operator"
               (change)="onNumberOperatorChange(i, $any($event.target).value)">
-              @for (op of numberOperators; track op.value) {
+              @for (op of numberOperators(); track op.value) {
                 <option [value]="op.value">{{ op.label }}</option>
               }
             </select>
@@ -488,27 +494,27 @@ const FILTER_POPUP_TEMPLATE = `
                 type="number"
                 [value]="cond.value"
                 (input)="cond.value = $any($event.target).value"
-                placeholder="Value" />
+                [placeholder]="labels().valuePlaceholder" />
               @if (cond.operator === 'between') {
-                <span class="gp-grid-filter-to">to</span>
+                <span class="gp-grid-filter-to">{{ labels().betweenSeparator }}</span>
                 <input
                   type="number"
                   [value]="cond.valueTo"
                   (input)="cond.valueTo = $any($event.target).value"
-                  placeholder="Value" />
+                  [placeholder]="labels().valuePlaceholder" />
               }
             }
             @if (numberConditions.length > 1) {
               <button
                 type="button"
                 class="gp-grid-filter-remove"
-                (click)="removeNumberCondition(i)">×</button>
+                (click)="removeNumberCondition(i)">{{ labels().removeCondition }}</button>
             }
           </div>
         </div>
       }
       <button type="button" class="gp-grid-filter-add" (click)="addNumberCondition()">
-        + Add condition
+        {{ labels().addCondition }}
       </button>
   } @else {
       @if (showValuesMode()) {
@@ -517,13 +523,13 @@ const FILTER_POPUP_TEMPLATE = `
             type="button"
             [class.active]="filterMode === 'values'"
             (click)="filterMode = 'values'">
-            Values
+            {{ labels().valuesMode }}
           </button>
           <button
             type="button"
             [class.active]="filterMode === 'condition'"
             (click)="filterMode = 'condition'">
-            Condition
+            {{ labels().conditionMode }}
           </button>
         </div>
       }
@@ -534,10 +540,10 @@ const FILTER_POPUP_TEMPLATE = `
           type="text"
           [value]="searchText"
           (input)="searchText = $any($event.target).value"
-          placeholder="Search..." />
+          [placeholder]="labels().searchPlaceholder" />
         <div class="gp-grid-filter-actions">
-          <button type="button" (click)="selectAll()">Select All</button>
-          <button type="button" (click)="deselectAll()">Deselect All</button>
+          <button type="button" (click)="selectAll()">{{ labels().selectAll }}</button>
+          <button type="button" (click)="deselectAll()">{{ labels().deselectAll }}</button>
         </div>
         <div class="gp-grid-filter-list">
           @if (hasBlanks()) {
@@ -546,7 +552,7 @@ const FILTER_POPUP_TEMPLATE = `
                 type="checkbox"
                 [checked]="includeBlanks"
                 (change)="includeBlanks = $any($event.target).checked" />
-              <span class="gp-grid-filter-blank">(Blanks)</span>
+              <span class="gp-grid-filter-blank">{{ labels().blanks }}</span>
             </label>
           }
           @for (entry of filteredUniqueEntries(); track entry.label) {
@@ -570,13 +576,13 @@ const FILTER_POPUP_TEMPLATE = `
                   type="button"
                   [class.active]="textConditions[i - 1]?.nextOperator === 'and'"
                   (click)="setTextNextOp(i - 1, 'and')">
-                  AND
+                  {{ labels().and }}
                 </button>
                 <button
                   type="button"
                   [class.active]="textConditions[i - 1]?.nextOperator === 'or'"
                   (click)="setTextNextOp(i - 1, 'or')">
-                  OR
+                  {{ labels().or }}
                 </button>
               </div>
             }
@@ -584,7 +590,7 @@ const FILTER_POPUP_TEMPLATE = `
               <select
                 [value]="cond.operator"
                 (change)="onTextOperatorChange(i, $any($event.target).value)">
-                @for (op of textOperators; track op.value) {
+                @for (op of textOperators(); track op.value) {
                   <option [value]="op.value">{{ op.label }}</option>
                 }
               </select>
@@ -594,56 +600,35 @@ const FILTER_POPUP_TEMPLATE = `
                   type="text"
                   [value]="cond.value"
                   (input)="cond.value = $any($event.target).value"
-                  placeholder="Value" />
+                  [placeholder]="labels().valuePlaceholder" />
               }
               @if (textConditions.length > 1) {
                 <button
                   type="button"
                   class="gp-grid-filter-remove"
-                  (click)="removeTextCondition(i)">×</button>
+                  (click)="removeTextCondition(i)">{{ labels().removeCondition }}</button>
               }
             </div>
           </div>
         }
         <button type="button" class="gp-grid-filter-add" (click)="addTextCondition()">
-          + Add condition
+          {{ labels().addCondition }}
         </button>
       }
   }
 
     <div class="gp-grid-filter-buttons">
       <button type="button" class="gp-grid-filter-btn-clear" (click)="handleClear()">
-        Clear
+        {{ labels().clear }}
       </button>
       <button type="button" class="gp-grid-filter-btn-apply" (click)="handleApply()">
-        Apply
+        {{ labels().apply }}
       </button>
     </div>
   </div>
 </div>
 `;
 
-const TEXT_OPERATORS = [
-    { value: 'contains', label: 'Contains' },
-    { value: 'notContains', label: 'Does not contain' },
-    { value: 'equals', label: 'Equals' },
-    { value: 'notEquals', label: 'Does not equal' },
-    { value: 'startsWith', label: 'Starts with' },
-    { value: 'endsWith', label: 'Ends with' },
-    { value: 'blank', label: 'Is blank' },
-    { value: 'notBlank', label: 'Is not blank' },
-];
-const NUMBER_OPERATORS = [
-    { value: '=', label: 'Equals' },
-    { value: '!=', label: 'Does not equal' },
-    { value: '>', label: 'Greater than' },
-    { value: '<', label: 'Less than' },
-    { value: '>=', label: 'Greater than or equal' },
-    { value: '<=', label: 'Less than or equal' },
-    { value: 'between', label: 'Between' },
-    { value: 'blank', label: 'Is blank' },
-    { value: 'notBlank', label: 'Is not blank' },
-];
 const VALUE_LESS_TEXT_OPERATORS = ['blank', 'notBlank'];
 const VALUE_LESS_NUMBER_OPERATORS = ['blank', 'notBlank'];
 const MAX_CHECKBOX_VALUES = 100;
@@ -788,6 +773,7 @@ class FilterPopupComponent {
     anchorEl = input.required(...(ngDevMode ? [{ debugName: "anchorEl" }] : /* istanbul ignore next */ []));
     distinctValues = input.required(...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
     currentFilter = input(undefined, ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
+    labels = input(defaultGridLabels, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     apply = output();
     close = output();
     popupTop = signal(0, ...(ngDevMode ? [{ debugName: "popupTop" }] : /* istanbul ignore next */ []));
@@ -801,8 +787,18 @@ class FilterPopupComponent {
     includeBlanks = true;
     textConditions = [defaultTextCondition()];
     numberConditions = [defaultNumberCondition()];
-    textOperators = TEXT_OPERATORS;
-    numberOperators = NUMBER_OPERATORS;
+    textOperators() {
+        return getTextOperatorOptions(this.labels());
+    }
+    numberOperators() {
+        return getNumberOperatorOptions(this.labels());
+    }
+    filterTitle() {
+        const column = this.column();
+        return formatLabel(this.labels().filterTitle, {
+            column: column.headerName ?? column.field,
+        });
+    }
     isValueLessTextOp = isValueLessTextOp;
     isValueLessNumberOp = isValueLessNumberOp;
     constructor() {
@@ -959,7 +955,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          @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 });
+    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 }, labels: { classPropertyName: "labels", publicName: "labels", 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    {{ filterTitle() }}\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                {{ labels().and }}\n              </button>\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'or'\"\n                (click)=\"setNumberNextOp(i - 1, 'or')\">\n                {{ labels().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]=\"labels().valuePlaceholder\" />\n              @if (cond.operator === 'between') {\n                <span class=\"gp-grid-filter-to\">{{ labels().betweenSeparator }}</span>\n                <input\n                  type=\"number\"\n                  [value]=\"cond.valueTo\"\n                  (input)=\"cond.valueTo = $any($event.target).value\"\n                  [placeholder]=\"labels().valuePlaceholder\" />\n              }\n            }\n            @if (numberConditions.length > 1) {\n              <button\n                type=\"button\"\n                class=\"gp-grid-filter-remove\"\n                (click)=\"removeNumberCondition(i)\">{{ labels().removeCondition }}</button>\n            }\n          </div>\n        </div>\n      }\n      <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addNumberCondition()\">\n        {{ labels().addCondition }}\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            {{ labels().valuesMode }}\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'condition'\"\n            (click)=\"filterMode = 'condition'\">\n            {{ labels().conditionMode }}\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]=\"labels().searchPlaceholder\" />\n        <div class=\"gp-grid-filter-actions\">\n          <button type=\"button\" (click)=\"selectAll()\">{{ labels().selectAll }}</button>\n          <button type=\"button\" (click)=\"deselectAll()\">{{ labels().deselectAll }}</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\">{{ labels().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                  {{ labels().and }}\n                </button>\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'or'\"\n                  (click)=\"setTextNextOp(i - 1, 'or')\">\n                  {{ labels().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]=\"labels().valuePlaceholder\" />\n              }\n              @if (textConditions.length > 1) {\n                <button\n                  type=\"button\"\n                  class=\"gp-grid-filter-remove\"\n                  (click)=\"removeTextCondition(i)\">{{ labels().removeCondition }}</button>\n              }\n            </div>\n          </div>\n        }\n        <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addTextCondition()\">\n          {{ labels().addCondition }}\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        {{ labels().clear }}\n      </button>\n      <button type=\"button\" class=\"gp-grid-filter-btn-apply\" (click)=\"handleApply()\">\n        {{ labels().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,
@@ -973,7 +969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { popupEl: [{
                 type: ViewChild,
                 args: ['popupEl', { static: false }]
-            }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: true }] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: true }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], close: [{ type: i0.Output, args: ["close"] }], onEscape: [{
+            }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], anchorEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorEl", required: true }] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: true }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], close: [{ type: i0.Output, args: ["close"] }], onEscape: [{
                 type: HostListener,
                 args: ['keydown.escape']
             }] } });
@@ -991,6 +987,7 @@ const TEMPLATE$1 = `
       [anchorEl]="fp.anchorEl!"
       [distinctValues]="fp.distinctValues"
       [currentFilter]="fp.currentFilter"
+      [labels]="labels()"
       (apply)="filterApply.emit($event)"
       (close)="filterClose.emit()"
     />
@@ -1009,7 +1006,7 @@ const TEMPLATE$1 = `
     </div>
   }
   @if (errorMessage(); as msg) {
-    <div class="gp-grid-error">Error: {{ msg }}</div>
+    <div class="gp-grid-error">{{ errorLabel(msg) }}</div>
   }
   @if (columnMove(); as cm) {
     <div
@@ -1040,6 +1037,7 @@ class GridOverlaysComponent {
     filterPopup = input(null, ...(ngDevMode ? [{ debugName: "filterPopup" }] : /* istanbul ignore next */ []));
     isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     errorMessage = input(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    labels = input(defaultGridLabels, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
     headerHeight = input.required(...(ngDevMode ? [{ debugName: "headerHeight" }] : /* istanbul ignore next */ []));
     rowHeight = input.required(...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
     dragState = input.required(...(ngDevMode ? [{ debugName: "dragState" }] : /* istanbul ignore next */ []));
@@ -1050,6 +1048,9 @@ class GridOverlaysComponent {
     totalWidth = input.required(...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
     filterApply = output();
     filterClose = output();
+    errorLabel(message) {
+        return formatLabel(this.labels().errorPrefix, { message });
+    }
     isResizing = computed(() => this.dragState().dragType === 'column-resize', ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
     resizeLineLeft = computed(() => {
         const cr = this.dragState().columnResize;
@@ -1087,7 +1088,7 @@ class GridOverlaysComponent {
     }, ...(ngDevMode ? [{ debugName: "columnMoveDropLeft" }] : /* istanbul ignore next */ []));
     rowDragGhostWidth = computed(() => Math.min(300, this.totalWidth()), ...(ngDevMode ? [{ debugName: "rowDragGhostWidth" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridOverlaysComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GridOverlaysComponent, isStandalone: true, selector: "gp-grid-overlays", inputs: { filterPopup: { classPropertyName: "filterPopup", publicName: "filterPopup", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, dragState: { classPropertyName: "dragState", publicName: "dragState", isSignal: true, isRequired: true, transformFunction: null }, visibleColumnWithIndices: { classPropertyName: "visibleColumnWithIndices", publicName: "visibleColumnWithIndices", isSignal: true, isRequired: true, transformFunction: null }, columnPositions: { classPropertyName: "columnPositions", publicName: "columnPositions", isSignal: true, isRequired: true, transformFunction: null }, scrollLeft: { classPropertyName: "scrollLeft", publicName: "scrollLeft", isSignal: true, isRequired: true, transformFunction: null }, effectiveColumns: { classPropertyName: "effectiveColumns", publicName: "effectiveColumns", isSignal: true, isRequired: true, transformFunction: null }, totalWidth: { classPropertyName: "totalWidth", publicName: "totalWidth", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterApply: "filterApply", filterClose: "filterClose" }, ngImport: i0, template: "\n  @if (filterPopup(); as fp) {\n    <gp-grid-filter-popup\n      [column]=\"fp.column\"\n      [colIndex]=\"fp.colIndex\"\n      [anchorEl]=\"fp.anchorEl!\"\n      [distinctValues]=\"fp.distinctValues\"\n      [currentFilter]=\"fp.currentFilter\"\n      (apply)=\"filterApply.emit($event)\"\n      (close)=\"filterClose.emit()\"\n    />\n  }\n  @if (isResizing()) {\n    <div class=\"gp-grid-column-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n  }\n  @if (isLoading()) {\n    <div\n      style=\"position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none;\"\n      [style.top.px]=\"headerHeight()\">\n      <div class=\"gp-grid-loading-overlay\"></div>\n      <div class=\"gp-grid-loading\">\n        <div class=\"gp-grid-loading-spinner\"></div>\n      </div>\n    </div>\n  }\n  @if (errorMessage(); as msg) {\n    <div class=\"gp-grid-error\">Error: {{ msg }}</div>\n  }\n  @if (columnMove(); as cm) {\n    <div\n      class=\"gp-grid-column-move-ghost\"\n      [style.left.px]=\"cm.currentX - cm.ghostWidth / 2\"\n      [style.top.px]=\"cm.currentY - cm.ghostHeight / 2\"\n      [style.width.px]=\"cm.ghostWidth\"\n      [style.height.px]=\"cm.ghostHeight\">\n      {{ columnMoveGhostText() }}\n    </div>\n    @if (columnMoveDropLeft() !== null) {\n      <div\n        class=\"gp-grid-column-drop-indicator\"\n        [style.left.px]=\"columnMoveDropLeft()\"\n        [style.height.px]=\"headerHeight()\"></div>\n    }\n  }\n  @if (rowDragGhost(); as rd) {\n    <div\n      class=\"gp-grid-row-drag-ghost\"\n      [style.left.px]=\"rd.currentX + 12\"\n      [style.top.px]=\"rd.currentY - rowHeight() / 2\"\n      [style.width.px]=\"rowDragGhostWidth()\"\n      [style.height.px]=\"rowHeight()\"></div>\n  }\n", isInline: true, dependencies: [{ kind: "component", type: FilterPopupComponent, selector: "gp-grid-filter-popup", inputs: ["column", "colIndex", "anchorEl", "distinctValues", "currentFilter"], outputs: ["apply", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GridOverlaysComponent, isStandalone: true, selector: "gp-grid-overlays", inputs: { filterPopup: { classPropertyName: "filterPopup", publicName: "filterPopup", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: true, transformFunction: null }, dragState: { classPropertyName: "dragState", publicName: "dragState", isSignal: true, isRequired: true, transformFunction: null }, visibleColumnWithIndices: { classPropertyName: "visibleColumnWithIndices", publicName: "visibleColumnWithIndices", isSignal: true, isRequired: true, transformFunction: null }, columnPositions: { classPropertyName: "columnPositions", publicName: "columnPositions", isSignal: true, isRequired: true, transformFunction: null }, scrollLeft: { classPropertyName: "scrollLeft", publicName: "scrollLeft", isSignal: true, isRequired: true, transformFunction: null }, effectiveColumns: { classPropertyName: "effectiveColumns", publicName: "effectiveColumns", isSignal: true, isRequired: true, transformFunction: null }, totalWidth: { classPropertyName: "totalWidth", publicName: "totalWidth", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterApply: "filterApply", filterClose: "filterClose" }, ngImport: i0, template: "\n  @if (filterPopup(); as fp) {\n    <gp-grid-filter-popup\n      [column]=\"fp.column\"\n      [colIndex]=\"fp.colIndex\"\n      [anchorEl]=\"fp.anchorEl!\"\n      [distinctValues]=\"fp.distinctValues\"\n      [currentFilter]=\"fp.currentFilter\"\n      [labels]=\"labels()\"\n      (apply)=\"filterApply.emit($event)\"\n      (close)=\"filterClose.emit()\"\n    />\n  }\n  @if (isResizing()) {\n    <div class=\"gp-grid-column-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n  }\n  @if (isLoading()) {\n    <div\n      style=\"position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none;\"\n      [style.top.px]=\"headerHeight()\">\n      <div class=\"gp-grid-loading-overlay\"></div>\n      <div class=\"gp-grid-loading\">\n        <div class=\"gp-grid-loading-spinner\"></div>\n      </div>\n    </div>\n  }\n  @if (errorMessage(); as msg) {\n    <div class=\"gp-grid-error\">{{ errorLabel(msg) }}</div>\n  }\n  @if (columnMove(); as cm) {\n    <div\n      class=\"gp-grid-column-move-ghost\"\n      [style.left.px]=\"cm.currentX - cm.ghostWidth / 2\"\n      [style.top.px]=\"cm.currentY - cm.ghostHeight / 2\"\n      [style.width.px]=\"cm.ghostWidth\"\n      [style.height.px]=\"cm.ghostHeight\">\n      {{ columnMoveGhostText() }}\n    </div>\n    @if (columnMoveDropLeft() !== null) {\n      <div\n        class=\"gp-grid-column-drop-indicator\"\n        [style.left.px]=\"columnMoveDropLeft()\"\n        [style.height.px]=\"headerHeight()\"></div>\n    }\n  }\n  @if (rowDragGhost(); as rd) {\n    <div\n      class=\"gp-grid-row-drag-ghost\"\n      [style.left.px]=\"rd.currentX + 12\"\n      [style.top.px]=\"rd.currentY - rowHeight() / 2\"\n      [style.width.px]=\"rowDragGhostWidth()\"\n      [style.height.px]=\"rowHeight()\"></div>\n  }\n", isInline: true, dependencies: [{ kind: "component", type: FilterPopupComponent, selector: "gp-grid-filter-popup", inputs: ["column", "colIndex", "anchorEl", "distinctValues", "currentFilter", "labels"], outputs: ["apply", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridOverlaysComponent, decorators: [{
             type: Component,
@@ -1098,7 +1099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: TEMPLATE$1,
                 }]
-        }], propDecorators: { filterPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopup", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], dragState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragState", required: true }] }], visibleColumnWithIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleColumnWithIndices", required: true }] }], columnPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnPositions", required: true }] }], scrollLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLeft", required: true }] }], effectiveColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "effectiveColumns", required: true }] }], totalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalWidth", required: true }] }], filterApply: [{ type: i0.Output, args: ["filterApply"] }], filterClose: [{ type: i0.Output, args: ["filterClose"] }] } });
+        }], propDecorators: { filterPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopup", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: true }] }], dragState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragState", required: true }] }], visibleColumnWithIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleColumnWithIndices", required: true }] }], columnPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnPositions", required: true }] }], scrollLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLeft", required: true }] }], effectiveColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "effectiveColumns", required: true }] }], totalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalWidth", required: true }] }], filterApply: [{ type: i0.Output, args: ["filterApply"] }], filterClose: [{ type: i0.Output, args: ["filterClose"] }] } });
 
 const TEMPLATE = `
   <div
@@ -1304,6 +1305,7 @@ const GP_GRID_TEMPLATE = `
         [computeCellClasses]="computeCellClassesFn"
         [fillHandlePosition]="vm.fillHandlePosition()"
         [dragState]="vm.dragState()"
+        [labels]="resolvedLabels()"
         (scrolled)="onBodyScroll($event)"
         (cellPointerDown)="onCellPointerDown($event)"
         (cellPointerEnter)="onCellPointerEnter($event)"
@@ -1316,6 +1318,7 @@ const GP_GRID_TEMPLATE = `
       />
       <gp-grid-overlays
         [filterPopup]="vm.filterPopup()"
+        [labels]="resolvedLabels()"
         [isLoading]="vm.isLoading()"
         [errorMessage]="vm.errorMessage()"
         [headerHeight]="headerHeight()"
@@ -1632,6 +1635,8 @@ class GpGridComponent {
     onCellValueChanged = output();
     onColumnResized = output();
     onColumnMoved = output();
+    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    resolvedLabels = computed(() => resolveGridLabels(this.labels()), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     vm = new GpGridViewModel({
         getColumns: () => this.columns(),
         getRows: () => this.rows(),
@@ -1811,7 +1816,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 }, 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 });
+    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 }, labels: { classPropertyName: "labels", publicName: "labels", 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        [labels]=\"resolvedLabels()\"\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        [labels]=\"resolvedLabels()\"\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", "labels"], outputs: ["scrolled", "cellPointerDown", "cellPointerEnter", "cellPointerLeave", "cellDoubleClick", "editValueChange", "editCommit", "editCancel", "fillHandlePointerDown"] }, { kind: "component", type: GridOverlaysComponent, selector: "gp-grid-overlays", inputs: ["filterPopup", "isLoading", "errorMessage", "labels", "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,
@@ -1822,7 +1827,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 }] }], 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"] }] } });
+            }], 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"] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
 
 /**
  * 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.20.0",
+  "version": "0.21.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.20.0",
+    "@gp-grid/core": "0.21.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

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

@@ -1,6 +1,6 @@
 import * as _gp_grid_core 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 { HeaderRendererParams, SortDirection, VisibleColumnInfo, HeaderData, ColumnDefinition, SlotData, CellPosition, CellRange, CellValue, CellRendererParams, EditRendererParams, FillHandlePosition, DragState, GridLabels, ColumnFilterModel, getTextOperatorOptions, getNumberOperatorOptions, 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, GridFilterOperatorLabels, GridInstruction, GridLabels, 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';
 
@@ -113,6 +113,7 @@ declare class GridBodyComponent {
     computeCellClasses: _angular_core.InputSignal<CellClassFn>;
     fillHandlePosition: _angular_core.InputSignal<FillHandlePosition>;
     dragState: _angular_core.InputSignal<DragState>;
+    labels: _angular_core.InputSignal<GridLabels>;
     scrolled: _angular_core.OutputEmitterRef<number>;
     cellPointerDown: _angular_core.OutputEmitterRef<CellPointerDownEvent>;
     cellPointerEnter: _angular_core.OutputEmitterRef<CellPointerEnterEvent>;
@@ -141,7 +142,7 @@ declare class GridBodyComponent {
     protected onEditFocus(event: FocusEvent): void;
     protected onEditKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridBodyComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridBodyComponent, "gp-grid-body", never, { "rowHeight": { "alias": "rowHeight"; "required": true; "isSignal": true; }; "totalHeaderHeight": { "alias": "totalHeaderHeight"; "required": true; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": true; "isSignal": true; }; "contentHeight": { "alias": "contentHeight"; "required": true; "isSignal": true; }; "rowsWrapperOffset": { "alias": "rowsWrapperOffset"; "required": true; "isSignal": true; }; "slotsArray": { "alias": "slotsArray"; "required": true; "isSignal": true; }; "visibleColumnWithIndices": { "alias": "visibleColumnWithIndices"; "required": true; "isSignal": true; }; "totalWidth": { "alias": "totalWidth"; "required": true; "isSignal": true; }; "columnPositions": { "alias": "columnPositions"; "required": true; "isSignal": true; }; "columnWidths": { "alias": "columnWidths"; "required": true; "isSignal": true; }; "totalRows": { "alias": "totalRows"; "required": true; "isSignal": true; }; "activeCell": { "alias": "activeCell"; "required": false; "isSignal": true; }; "selectionRange": { "alias": "selectionRange"; "required": false; "isSignal": true; }; "editingCell": { "alias": "editingCell"; "required": false; "isSignal": true; }; "cellRenderers": { "alias": "cellRenderers"; "required": false; "isSignal": true; }; "globalCellRenderer": { "alias": "globalCellRenderer"; "required": false; "isSignal": true; }; "editRenderers": { "alias": "editRenderers"; "required": false; "isSignal": true; }; "globalEditRenderer": { "alias": "globalEditRenderer"; "required": false; "isSignal": true; }; "hoverPosition": { "alias": "hoverPosition"; "required": false; "isSignal": true; }; "computeRowClasses": { "alias": "computeRowClasses"; "required": false; "isSignal": true; }; "computeCellClasses": { "alias": "computeCellClasses"; "required": false; "isSignal": true; }; "fillHandlePosition": { "alias": "fillHandlePosition"; "required": false; "isSignal": true; }; "dragState": { "alias": "dragState"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; "cellPointerDown": "cellPointerDown"; "cellPointerEnter": "cellPointerEnter"; "cellPointerLeave": "cellPointerLeave"; "cellDoubleClick": "cellDoubleClick"; "editValueChange": "editValueChange"; "editCommit": "editCommit"; "editCancel": "editCancel"; "fillHandlePointerDown": "fillHandlePointerDown"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridBodyComponent, "gp-grid-body", never, { "rowHeight": { "alias": "rowHeight"; "required": true; "isSignal": true; }; "totalHeaderHeight": { "alias": "totalHeaderHeight"; "required": true; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": true; "isSignal": true; }; "contentHeight": { "alias": "contentHeight"; "required": true; "isSignal": true; }; "rowsWrapperOffset": { "alias": "rowsWrapperOffset"; "required": true; "isSignal": true; }; "slotsArray": { "alias": "slotsArray"; "required": true; "isSignal": true; }; "visibleColumnWithIndices": { "alias": "visibleColumnWithIndices"; "required": true; "isSignal": true; }; "totalWidth": { "alias": "totalWidth"; "required": true; "isSignal": true; }; "columnPositions": { "alias": "columnPositions"; "required": true; "isSignal": true; }; "columnWidths": { "alias": "columnWidths"; "required": true; "isSignal": true; }; "totalRows": { "alias": "totalRows"; "required": true; "isSignal": true; }; "activeCell": { "alias": "activeCell"; "required": false; "isSignal": true; }; "selectionRange": { "alias": "selectionRange"; "required": false; "isSignal": true; }; "editingCell": { "alias": "editingCell"; "required": false; "isSignal": true; }; "cellRenderers": { "alias": "cellRenderers"; "required": false; "isSignal": true; }; "globalCellRenderer": { "alias": "globalCellRenderer"; "required": false; "isSignal": true; }; "editRenderers": { "alias": "editRenderers"; "required": false; "isSignal": true; }; "globalEditRenderer": { "alias": "globalEditRenderer"; "required": false; "isSignal": true; }; "hoverPosition": { "alias": "hoverPosition"; "required": false; "isSignal": true; }; "computeRowClasses": { "alias": "computeRowClasses"; "required": false; "isSignal": true; }; "computeCellClasses": { "alias": "computeCellClasses"; "required": false; "isSignal": true; }; "fillHandlePosition": { "alias": "fillHandlePosition"; "required": false; "isSignal": true; }; "dragState": { "alias": "dragState"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; "cellPointerDown": "cellPointerDown"; "cellPointerEnter": "cellPointerEnter"; "cellPointerLeave": "cellPointerLeave"; "cellDoubleClick": "cellDoubleClick"; "editValueChange": "editValueChange"; "editCommit": "editCommit"; "editCancel": "editCancel"; "fillHandlePointerDown": "fillHandlePointerDown"; }, never, never, true, never>;
 }
 
 interface TextConditionState {
@@ -164,6 +165,7 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     anchorEl: _angular_core.InputSignal<HTMLElement>;
     distinctValues: _angular_core.InputSignal<CellValue[]>;
     currentFilter: _angular_core.InputSignal<ColumnFilterModel>;
+    labels: _angular_core.InputSignal<GridLabels>;
     apply: _angular_core.OutputEmitterRef<{
         colId: string;
         filter: ColumnFilterModel | null;
@@ -179,14 +181,9 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     includeBlanks: boolean;
     textConditions: TextConditionState[];
     numberConditions: NumberConditionState[];
-    readonly textOperators: readonly {
-        value: _gp_grid_core.TextFilterOperator;
-        label: string;
-    }[];
-    readonly numberOperators: readonly {
-        value: _gp_grid_core.NumberFilterOperator;
-        label: string;
-    }[];
+    protected textOperators(): ReturnType<typeof getTextOperatorOptions>;
+    protected numberOperators(): ReturnType<typeof getNumberOperatorOptions>;
+    protected filterTitle(): string;
     protected readonly isValueLessTextOp: (operator: string) => boolean;
     protected readonly isValueLessNumberOp: (operator: string) => boolean;
     constructor();
@@ -218,7 +215,7 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     private repositionRafId;
     private onWindowScrollOrResize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterPopupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterPopupComponent, "gp-grid-filter-popup", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": true; "isSignal": true; }; "anchorEl": { "alias": "anchorEl"; "required": true; "isSignal": true; }; "distinctValues": { "alias": "distinctValues"; "required": true; "isSignal": true; }; "currentFilter": { "alias": "currentFilter"; "required": false; "isSignal": true; }; }, { "apply": "apply"; "close": "close"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterPopupComponent, "gp-grid-filter-popup", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": true; "isSignal": true; }; "anchorEl": { "alias": "anchorEl"; "required": true; "isSignal": true; }; "distinctValues": { "alias": "distinctValues"; "required": true; "isSignal": true; }; "currentFilter": { "alias": "currentFilter"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "apply": "apply"; "close": "close"; }, never, never, true, never>;
 }
 
 interface ActiveFilterPopup {
@@ -232,6 +229,7 @@ declare class GridOverlaysComponent {
     filterPopup: _angular_core.InputSignal<ActiveFilterPopup>;
     isLoading: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
+    labels: _angular_core.InputSignal<GridLabels>;
     headerHeight: _angular_core.InputSignal<number>;
     rowHeight: _angular_core.InputSignal<number>;
     dragState: _angular_core.InputSignal<DragState>;
@@ -245,6 +243,7 @@ declare class GridOverlaysComponent {
         filter: ColumnFilterModel | null;
     }>;
     filterClose: _angular_core.OutputEmitterRef<void>;
+    protected errorLabel(message: string): string;
     protected isResizing: _angular_core.Signal<boolean>;
     protected resizeLineLeft: _angular_core.Signal<number>;
     protected columnMove: _angular_core.Signal<_gp_grid_core.ColumnMoveDragState>;
@@ -253,7 +252,7 @@ declare class GridOverlaysComponent {
     protected columnMoveDropLeft: _angular_core.Signal<number>;
     protected rowDragGhostWidth: _angular_core.Signal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridOverlaysComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridOverlaysComponent, "gp-grid-overlays", never, { "filterPopup": { "alias": "filterPopup"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "headerHeight": { "alias": "headerHeight"; "required": true; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": true; "isSignal": true; }; "dragState": { "alias": "dragState"; "required": true; "isSignal": true; }; "visibleColumnWithIndices": { "alias": "visibleColumnWithIndices"; "required": true; "isSignal": true; }; "columnPositions": { "alias": "columnPositions"; "required": true; "isSignal": true; }; "scrollLeft": { "alias": "scrollLeft"; "required": true; "isSignal": true; }; "effectiveColumns": { "alias": "effectiveColumns"; "required": true; "isSignal": true; }; "totalWidth": { "alias": "totalWidth"; "required": true; "isSignal": true; }; }, { "filterApply": "filterApply"; "filterClose": "filterClose"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridOverlaysComponent, "gp-grid-overlays", never, { "filterPopup": { "alias": "filterPopup"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "headerHeight": { "alias": "headerHeight"; "required": true; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": true; "isSignal": true; }; "dragState": { "alias": "dragState"; "required": true; "isSignal": true; }; "visibleColumnWithIndices": { "alias": "visibleColumnWithIndices"; "required": true; "isSignal": true; }; "columnPositions": { "alias": "columnPositions"; "required": true; "isSignal": true; }; "scrollLeft": { "alias": "scrollLeft"; "required": true; "isSignal": true; }; "effectiveColumns": { "alias": "effectiveColumns"; "required": true; "isSignal": true; }; "totalWidth": { "alias": "totalWidth"; "required": true; "isSignal": true; }; }, { "filterApply": "filterApply"; "filterClose": "filterClose"; }, never, never, true, never>;
 }
 
 declare class CellPeekComponent implements AfterViewInit, OnDestroy {
@@ -391,6 +390,8 @@ declare class GpGridComponent implements OnInit, AfterViewInit, OnDestroy {
         fromIndex: number;
         toIndex: number;
     }>;
+    labels: _angular_core.InputSignal<Partial<GridLabels>>;
+    protected readonly resolvedLabels: _angular_core.Signal<GridLabels>;
     protected readonly vm: GpGridViewModel;
     private readonly bindings;
     constructor();
@@ -429,7 +430,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; }; "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>;
+    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; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "onRowDragEnd": "onRowDragEnd"; "onCellValueChanged": "onCellValueChanged"; "onColumnResized": "onColumnResized"; "onColumnMoved": "onColumnMoved"; }, never, never, true, never>;
 }
 
 interface CreateGridDataOptions<TData> {