@gp-grid/angular 0.10.3 → 0.11.1

package/fesm2022/gp-grid-angular.mjs

@@ -0,0 +1,1630 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, TemplateRef, ChangeDetectionStrategy, Component, ViewChild, signal, effect, HostListener, inject, PLATFORM_ID } from '@angular/core';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { isCellSelected, isCellActive, getFieldValue, formatCellValue, isCellInFillPreview, buildCellClasses, isCellEditing, calculateFilterPopupPosition, calculateScaledColumnPositions, getTotalWidth, calculateFillHandlePosition, DataSourceOwner, AutoScrollDriver, PendingRowDragController, InputEventAdapter, applyBatchInstructions, scrollCellIntoView, GridCore, createMutableClientDataSource } from '@gp-grid/core';
+export { GridCore, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource } from '@gp-grid/core';
+
+const TEMPLATE$1 = `
+  <div
+    class="gp-grid-header"
+    [class.gp-grid-header--loading]="isLoading()"
+    [style.height.px]="headerHeight()">
+    <div
+      style="position: absolute; top: 0; left: 0;"
+      [style.transform]="transformStyle()"
+      [style.width.px]="innerWidth()"
+      [style.height.px]="headerHeight()">
+      @for (entry of visibleColumnsWithIndices(); track entry.originalIndex; let i = $index) {
+        @let colW = columnWidths()[i] ?? 0;
+        @let headerData = headers().get(entry.originalIndex);
+        @let tpl = headerTemplate(entry.column);
+        <div
+          class="gp-grid-header-cell"
+          [attr.data-col-index]="entry.originalIndex"
+          [style.left.px]="columnPositions()[i]"
+          [style.width.px]="colW"
+          [style.height.px]="headerHeight()"
+          (pointerdown)="onHeaderPointerDown($event, entry.originalIndex, colW)">
+          @if (tpl) {
+            <ng-container
+              [ngTemplateOutlet]="tpl"
+              [ngTemplateOutletContext]="{ $implicit: headerParams(entry.column, entry.originalIndex, headerData) }">
+            </ng-container>
+          } @else {
+            <span class="gp-grid-header-text">{{ entry.column.headerName ?? entry.column.field }}</span>
+            <span class="gp-grid-header-icons">
+              @if (sortingEnabled() && entry.column.sortable !== false) {
+                <span class="gp-grid-sort-arrows">
+                  <span class="gp-grid-sort-arrows-stack">
+                    <svg
+                      [class]="'gp-grid-sort-arrow-up' + (headerData?.sortDirection === 'asc' ? ' active' : '')"
+                      width="8" height="6" viewBox="0 0 8 6">
+                      <path d="M4 0L8 6H0L4 0Z" fill="currentColor"/>
+                    </svg>
+                    <svg
+                      [class]="'gp-grid-sort-arrow-down' + (headerData?.sortDirection === 'desc' ? ' active' : '')"
+                      width="8" height="6" viewBox="0 0 8 6">
+                      <path d="M4 6L0 0H8L4 6Z" fill="currentColor"/>
+                    </svg>
+                  </span>
+                  @if ((headerData?.sortIndex ?? 0) > 0) {
+                    <span class="gp-grid-sort-index">{{ headerData?.sortIndex }}</span>
+                  }
+                </span>
+              }
+              @if (entry.column.filterable) {
+                <span
+                  [class]="'gp-grid-filter-icon' + (headerData?.hasFilter ? ' active' : '')"
+                  (pointerdown)="onFilterPointerDown($event, entry.originalIndex)">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M4 4h16l-6 8v5l-4 2v-7L4 4z"/>
+                  </svg>
+                </span>
+              }
+            </span>
+          }
+          @if (entry.column.resizable !== false) {
+            <div
+              class="gp-grid-header-resize-handle"
+              (pointerdown)="onResizePointerDown($event, entry.originalIndex, colW)">
+            </div>
+          }
+        </div>
+      }
+    </div>
+  </div>
+`;
+class GridHeaderComponent {
+    headerHeight = input.required(...(ngDevMode ? [{ debugName: "headerHeight" }] : /* istanbul ignore next */ []));
+    scrollLeft = input.required(...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
+    contentWidth = input.required(...(ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []));
+    totalWidth = input.required(...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
+    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    visibleColumnsWithIndices = input.required(...(ngDevMode ? [{ debugName: "visibleColumnsWithIndices" }] : /* istanbul ignore next */ []));
+    columnPositions = input.required(...(ngDevMode ? [{ debugName: "columnPositions" }] : /* istanbul ignore next */ []));
+    columnWidths = input.required(...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    headers = input.required(...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
+    sortingEnabled = input(true, ...(ngDevMode ? [{ debugName: "sortingEnabled" }] : /* istanbul ignore next */ []));
+    headerRenderers = input({}, ...(ngDevMode ? [{ debugName: "headerRenderers" }] : /* istanbul ignore next */ []));
+    globalHeaderRenderer = input(null, ...(ngDevMode ? [{ debugName: "globalHeaderRenderer" }] : /* istanbul ignore next */ []));
+    headerPointerDown = output();
+    filterPointerDown = output();
+    resizePointerDown = output();
+    headerSort = output();
+    headerFilterOpen = output();
+    innerWidth = computed(() => Math.max(this.contentWidth(), this.totalWidth()), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    transformStyle = computed(() => `translateX(${-this.scrollLeft()}px)`, ...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
+    onHeaderPointerDown(event, colIndex, colWidth) {
+        this.headerPointerDown.emit({ colIndex, colWidth, colHeight: this.headerHeight(), event });
+    }
+    onFilterPointerDown(event, colIndex) {
+        event.stopPropagation();
+        const cell = event.currentTarget.closest('.gp-grid-header-cell');
+        if (cell) {
+            this.filterPointerDown.emit({ colIndex, anchorEl: cell });
+        }
+    }
+    onResizePointerDown(event, colIndex, colWidth) {
+        event.stopPropagation();
+        this.resizePointerDown.emit({ colIndex, colWidth, event });
+    }
+    headerTemplate(column) {
+        const renderer = column.headerRenderer;
+        if (renderer instanceof TemplateRef) {
+            return renderer;
+        }
+        if (typeof renderer === 'string') {
+            const registered = this.headerRenderers()[renderer];
+            if (registered)
+                return registered;
+        }
+        return this.globalHeaderRenderer();
+    }
+    headerParams(column, colIndex, headerData) {
+        const sortable = this.sortingEnabled() && column.sortable !== false;
+        const filterable = column.filterable === true;
+        return {
+            column,
+            colIndex,
+            sortDirection: headerData?.sortDirection,
+            sortIndex: headerData?.sortIndex,
+            sortable,
+            filterable,
+            hasFilter: headerData?.hasFilter ?? false,
+            onSort: (direction, addToExisting) => {
+                if (sortable) {
+                    const colId = column.colId ?? column.field;
+                    this.headerSort.emit({ colId, direction, addToExisting });
+                }
+            },
+            onFilterClick: () => {
+                // The anchor is looked up via data-col-index — same pattern as the default filter icon.
+                // No-op here; consumers using a custom header template should use the exposed callback.
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: GridHeaderComponent, isStandalone: true, selector: "gp-grid-header", inputs: { headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: true, transformFunction: null }, scrollLeft: { classPropertyName: "scrollLeft", publicName: "scrollLeft", isSignal: true, isRequired: true, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: true, transformFunction: null }, totalWidth: { classPropertyName: "totalWidth", publicName: "totalWidth", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, visibleColumnsWithIndices: { classPropertyName: "visibleColumnsWithIndices", publicName: "visibleColumnsWithIndices", 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 }, headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: true, transformFunction: null }, sortingEnabled: { classPropertyName: "sortingEnabled", publicName: "sortingEnabled", isSignal: true, isRequired: false, transformFunction: null }, headerRenderers: { classPropertyName: "headerRenderers", publicName: "headerRenderers", isSignal: true, isRequired: false, transformFunction: null }, globalHeaderRenderer: { classPropertyName: "globalHeaderRenderer", publicName: "globalHeaderRenderer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerPointerDown: "headerPointerDown", filterPointerDown: "filterPointerDown", resizePointerDown: "resizePointerDown", headerSort: "headerSort", headerFilterOpen: "headerFilterOpen" }, ngImport: i0, template: "\n  <div\n    class=\"gp-grid-header\"\n    [class.gp-grid-header--loading]=\"isLoading()\"\n    [style.height.px]=\"headerHeight()\">\n    <div\n      style=\"position: absolute; top: 0; left: 0;\"\n      [style.transform]=\"transformStyle()\"\n      [style.width.px]=\"innerWidth()\"\n      [style.height.px]=\"headerHeight()\">\n      @for (entry of visibleColumnsWithIndices(); track entry.originalIndex; let i = $index) {\n        @let colW = columnWidths()[i] ?? 0;\n        @let headerData = headers().get(entry.originalIndex);\n        @let tpl = headerTemplate(entry.column);\n        <div\n          class=\"gp-grid-header-cell\"\n          [attr.data-col-index]=\"entry.originalIndex\"\n          [style.left.px]=\"columnPositions()[i]\"\n          [style.width.px]=\"colW\"\n          [style.height.px]=\"headerHeight()\"\n          (pointerdown)=\"onHeaderPointerDown($event, entry.originalIndex, colW)\">\n          @if (tpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tpl\"\n              [ngTemplateOutletContext]=\"{ $implicit: headerParams(entry.column, entry.originalIndex, headerData) }\">\n            </ng-container>\n          } @else {\n            <span class=\"gp-grid-header-text\">{{ entry.column.headerName ?? entry.column.field }}</span>\n            <span class=\"gp-grid-header-icons\">\n              @if (sortingEnabled() && entry.column.sortable !== false) {\n                <span class=\"gp-grid-sort-arrows\">\n                  <span class=\"gp-grid-sort-arrows-stack\">\n                    <svg\n                      [class]=\"'gp-grid-sort-arrow-up' + (headerData?.sortDirection === 'asc' ? ' active' : '')\"\n                      width=\"8\" height=\"6\" viewBox=\"0 0 8 6\">\n                      <path d=\"M4 0L8 6H0L4 0Z\" fill=\"currentColor\"/>\n                    </svg>\n                    <svg\n                      [class]=\"'gp-grid-sort-arrow-down' + (headerData?.sortDirection === 'desc' ? ' active' : '')\"\n                      width=\"8\" height=\"6\" viewBox=\"0 0 8 6\">\n                      <path d=\"M4 6L0 0H8L4 6Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </span>\n                  @if ((headerData?.sortIndex ?? 0) > 0) {\n                    <span class=\"gp-grid-sort-index\">{{ headerData?.sortIndex }}</span>\n                  }\n                </span>\n              }\n              @if (entry.column.filterable) {\n                <span\n                  [class]=\"'gp-grid-filter-icon' + (headerData?.hasFilter ? ' active' : '')\"\n                  (pointerdown)=\"onFilterPointerDown($event, entry.originalIndex)\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M4 4h16l-6 8v5l-4 2v-7L4 4z\"/>\n                  </svg>\n                </span>\n              }\n            </span>\n          }\n          @if (entry.column.resizable !== false) {\n            <div\n              class=\"gp-grid-header-resize-handle\"\n              (pointerdown)=\"onResizePointerDown($event, entry.originalIndex, colW)\">\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n", isInline: true, 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: GridHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gp-grid-header',
+                    standalone: true,
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: TEMPLATE$1,
+                }]
+        }], propDecorators: { headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: true }] }], scrollLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLeft", required: true }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: true }] }], totalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalWidth", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], visibleColumnsWithIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleColumnsWithIndices", required: true }] }], columnPositions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnPositions", required: true }] }], columnWidths: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidths", required: true }] }], headers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headers", required: true }] }], sortingEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingEnabled", required: false }] }], headerRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerRenderers", required: false }] }], globalHeaderRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalHeaderRenderer", required: false }] }], headerPointerDown: [{ type: i0.Output, args: ["headerPointerDown"] }], filterPointerDown: [{ type: i0.Output, args: ["filterPointerDown"] }], resizePointerDown: [{ type: i0.Output, args: ["resizePointerDown"] }], headerSort: [{ type: i0.Output, args: ["headerSort"] }], headerFilterOpen: [{ type: i0.Output, args: ["headerFilterOpen"] }] } });
+
+const GRID_BODY_TEMPLATE = `<div
+  #scrollContainer
+  style="height: 100%; overflow: auto; position: relative;"
+  (scroll)="onScroll()">
+    <div
+      style="position: relative; min-width: 100%"
+      [style.width.px]="innerWidth()"
+      [style.height.px]="sizerHeight()">
+      <div
+        class="gp-grid-rows-wrapper"
+        [style.width.px]="innerWidth()"
+        [style.transform]="wrapperTransform()">
+        @for (slot of slotsArray(); track slot.slotId) {
+          @if (slot.rowIndex >= 0) {
+            <div
+              [class]="rowClass(slot.rowIndex, slot.rowData)"
+              style="position: absolute; top: 0; left: 0"
+              [style.transform]="'translateY(' + slot.translateY + 'px)'"
+              [style.width.px]="innerWidth()"
+              [style.height.px]="rowHeight()"
+            >
+              @for (entry of visibleColumnWithIndices(); track entry.originalIndex; let i = $index) {
+                @let editing = isEditing(slot.rowIndex, entry.originalIndex);
+                <div
+                  [class]="cellClass(slot.rowIndex, entry.originalIndex, entry.column, slot.rowData)"
+                  style="position: absolute; top: 0;"
+                  [attr.data-row-index]="slot.rowIndex"
+                  [attr.data-col-index]="entry.originalIndex"
+                  [style.left.px]="columnPositions()[i]"
+                  [style.width.px]="columnWidths()[i]"
+                  [style.height.px]="rowHeight()"
+                  (pointerdown)="cellPointerDown.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex, event: $event })"
+                  (mouseenter)="cellPointerEnter.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })"
+                  (mouseleave)="cellPointerLeave.emit()"
+                  (dblclick)="cellDoubleClick.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })"
+                >
+                  @if (editing) {
+                    @let etpl = editTemplate(entry.column);
+                    @if (etpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="etpl"
+                        [ngTemplateOutletContext]="{ $implicit: editParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
+                      </ng-container>
+                    } @else {
+                      <input
+                        class="gp-grid-edit-input"
+                        type="text"
+                        [value]="editInitialValue()"
+                        autofocus
+                        (focus)="onEditFocus($event)"
+                        (input)="editValueChange.emit(asInput($event).value)"
+                        (keydown)="onEditKeyDown($event)"
+                        (blur)="editCommit.emit()" />
+                    }
+                  } @else {
+                    @let tpl = cellTemplate(entry.column);
+                    @if (tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: cellParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
+                      </ng-container>
+                    } @else {
+                      {{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}
+                    }
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+        @if (fillHandlePosition(); as fhp) {
+          @if (editingCell() === null) {
+            <div
+              class="gp-grid-fill-handle"
+              [style.top.px]="fhp.top"
+              [style.left.px]="fhp.left"
+              (pointerdown)="fillHandlePointerDown.emit({ event: $event })">
+            </div>
+          }
+        }
+        @if (rowDropIndicator(); as rd) {
+          <div
+            class="gp-grid-row-drop-indicator"
+            [style.transform]="'translateY(' + rd.dropIndicatorY + 'px)'"
+            [style.width.px]="rowDropIndicatorWidth()"></div>
+        }
+      </div>
+    </div>
+    @if (totalRows() === 0) {
+      <div class="gp-grid-empty">No data to display</div>
+    }
+  </div>
+`;
+
+class GridBodyComponent {
+    scrollContainer;
+    rowHeight = input.required(...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    totalHeaderHeight = input.required(...(ngDevMode ? [{ debugName: "totalHeaderHeight" }] : /* istanbul ignore next */ []));
+    contentWidth = input.required(...(ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []));
+    contentHeight = input.required(...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
+    rowsWrapperOffset = input.required(...(ngDevMode ? [{ debugName: "rowsWrapperOffset" }] : /* istanbul ignore next */ []));
+    slotsArray = input.required(...(ngDevMode ? [{ debugName: "slotsArray" }] : /* istanbul ignore next */ []));
+    visibleColumnWithIndices = input.required(...(ngDevMode ? [{ debugName: "visibleColumnWithIndices" }] : /* istanbul ignore next */ []));
+    totalWidth = input.required(...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
+    columnPositions = input.required(...(ngDevMode ? [{ debugName: "columnPositions" }] : /* istanbul ignore next */ []));
+    columnWidths = input.required(...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    totalRows = input.required(...(ngDevMode ? [{ debugName: "totalRows" }] : /* istanbul ignore next */ []));
+    activeCell = input(null, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
+    selectionRange = input(null, ...(ngDevMode ? [{ debugName: "selectionRange" }] : /* istanbul ignore next */ []));
+    editingCell = input(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
+    cellRenderers = input({}, ...(ngDevMode ? [{ debugName: "cellRenderers" }] : /* istanbul ignore next */ []));
+    globalCellRenderer = input(null, ...(ngDevMode ? [{ debugName: "globalCellRenderer" }] : /* istanbul ignore next */ []));
+    editRenderers = input({}, ...(ngDevMode ? [{ debugName: "editRenderers" }] : /* istanbul ignore next */ []));
+    globalEditRenderer = input(null, ...(ngDevMode ? [{ debugName: "globalEditRenderer" }] : /* istanbul ignore next */ []));
+    hoverPosition = input(null, ...(ngDevMode ? [{ debugName: "hoverPosition" }] : /* istanbul ignore next */ []));
+    computeRowClasses = input(null, ...(ngDevMode ? [{ debugName: "computeRowClasses" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    scrolled = output();
+    cellPointerDown = output();
+    cellPointerEnter = output();
+    cellPointerLeave = output();
+    cellDoubleClick = output();
+    editValueChange = output();
+    editCommit = output();
+    editCancel = output();
+    fillHandlePointerDown = output();
+    innerWidth = computed(() => Math.max(this.contentWidth(), this.totalWidth()), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    sizerHeight = computed(() => Math.max(this.contentHeight() - this.totalHeaderHeight(), 0), ...(ngDevMode ? [{ debugName: "sizerHeight" }] : /* istanbul ignore next */ []));
+    rowDropIndicator = computed(() => {
+        const ds = this.dragState();
+        if (ds?.dragType !== 'row-drag')
+            return null;
+        if (ds.rowDrag === null || ds.rowDrag.dropTargetIndex === null)
+            return null;
+        return ds.rowDrag;
+    }, ...(ngDevMode ? [{ debugName: "rowDropIndicator" }] : /* istanbul ignore next */ []));
+    rowDropIndicatorWidth = computed(() => Math.max(this.contentWidth(), this.totalWidth()), ...(ngDevMode ? [{ debugName: "rowDropIndicatorWidth" }] : /* istanbul ignore next */ []));
+    wrapperTransform = computed(() => `translateY(${this.rowsWrapperOffset()}px)`, ...(ngDevMode ? [{ debugName: "wrapperTransform" }] : /* istanbul ignore next */ []));
+    onScroll() {
+        const el = this.scrollContainer.nativeElement;
+        this.scrolled.emit(el.scrollLeft);
+    }
+    cellParams(rowData, column, rowIndex, colIndex) {
+        return {
+            value: getFieldValue(rowData, column.field),
+            rowData,
+            column,
+            rowIndex,
+            colIndex,
+            isActive: isCellActive(rowIndex, colIndex, this.activeCell()),
+            isSelected: isCellSelected(rowIndex, colIndex, this.selectionRange()),
+            isEditing: false,
+        };
+    }
+    cellTemplate(column) {
+        const renderer = column.cellRenderer;
+        if (renderer instanceof TemplateRef) {
+            return renderer;
+        }
+        if (typeof renderer === 'string') {
+            const registered = this.cellRenderers()[renderer];
+            if (registered)
+                return registered;
+        }
+        return this.globalCellRenderer();
+    }
+    editTemplate(column) {
+        const renderer = column.editRenderer;
+        if (renderer instanceof TemplateRef) {
+            return renderer;
+        }
+        if (typeof renderer === 'string') {
+            const registered = this.editRenderers()[renderer];
+            if (registered)
+                return registered;
+        }
+        return this.globalEditRenderer();
+    }
+    editParams(rowData, column, rowIndex, colIndex) {
+        const ec = this.editingCell();
+        return {
+            value: getFieldValue(rowData, column.field),
+            rowData,
+            column,
+            rowIndex,
+            colIndex,
+            isActive: true,
+            isSelected: true,
+            isEditing: true,
+            initialValue: ec?.initialValue ?? null,
+            onValueChange: (newValue) => {
+                const s = newValue === null || newValue === undefined ? '' : String(newValue);
+                this.editValueChange.emit(s);
+            },
+            onCommit: () => this.editCommit.emit(),
+            onCancel: () => this.editCancel.emit(),
+        };
+    }
+    cellDisplay(rowData, column, rowIndex, colIndex) {
+        const renderer = column.cellRenderer;
+        const value = getFieldValue(rowData, column.field);
+        if (typeof renderer === 'function') {
+            const params = this.cellParams(rowData, column, rowIndex, colIndex);
+            const result = renderer(params);
+            return result === null || result === undefined ? '' : String(result);
+        }
+        return formatCellValue(value, column.valueFormatter);
+    }
+    cellClass(rowIndex, colIndex, column, rowData) {
+        const editingCell = this.editingCell();
+        // Read hoverPosition to register this signal as a dep so Angular re-renders on hover change.
+        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 withHandle = column.rowDrag === true
+            ? `${base} gp-grid-cell--row-drag-handle`
+            : base;
+        const fn = this.computeCellClasses();
+        if (fn === null)
+            return withHandle;
+        const extra = fn(rowIndex, colIndex, column, rowData);
+        if (extra.length === 0)
+            return withHandle;
+        return `${withHandle} ${extra.join(' ')}`;
+    }
+    rowClass(rowIndex, rowData) {
+        this.hoverPosition();
+        const fn = this.computeRowClasses();
+        if (fn === null)
+            return 'gp-grid-row';
+        const extra = fn(rowIndex, rowData);
+        if (extra.length === 0)
+            return 'gp-grid-row';
+        return `gp-grid-row ${extra.join(' ')}`;
+    }
+    isEditing(rowIndex, colIndex) {
+        return isCellEditing(rowIndex, colIndex, this.editingCell());
+    }
+    editInitialValue() {
+        const ec = this.editingCell();
+        if (ec === null || ec.initialValue === null || ec.initialValue === undefined)
+            return '';
+        return String(ec.initialValue);
+    }
+    asInput(event) {
+        return event.target;
+    }
+    onEditFocus(event) {
+        event.target.select();
+    }
+    onEditKeyDown(event) {
+        event.stopPropagation();
+        if (event.key === 'Enter') {
+            this.editCommit.emit();
+        }
+        else if (event.key === 'Escape') {
+            this.editCancel.emit();
+        }
+    }
+    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-row-index]=\"slot.rowIndex\"\n                  [attr.data-col-index]=\"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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "gp-grid-body", standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: GRID_BODY_TEMPLATE, styles: [":host{display:flex;flex:1;min-height:0;overflow:hidden}\n"] }]
+        }], 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"] }] } });
+
+const FILTER_POPUP_TEMPLATE = `
+<div
+  #popupEl
+  class="gp-grid-filter-popup"
+  [style.position]="'fixed'"
+  [style.zIndex]="10000"
+  [style.top.px]="popupTop()"
+  [style.left.px]="popupLeft()"
+  [style.minWidth.px]="popupMinWidth()"
+  [style.visibility]="positioned() ? 'visible' : 'hidden'"
+  (keydown.escape)="close.emit()"
+  (click)="$event.stopPropagation()">
+
+  <div class="gp-grid-filter-header">
+    Filter: {{ column().headerName ?? column().field }}
+  </div>
+
+  <div [class]="'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')">
+  @if (isNumberColumn()) {
+      @for (cond of numberConditions; track $index; let i = $index) {
+        <div class="gp-grid-filter-condition">
+          @if (i > 0) {
+            <div class="gp-grid-filter-combination">
+              <button
+                type="button"
+                [class.active]="numberConditions[i - 1]?.nextOperator === 'and'"
+                (click)="setNumberNextOp(i - 1, 'and')">
+                AND
+              </button>
+              <button
+                type="button"
+                [class.active]="numberConditions[i - 1]?.nextOperator === 'or'"
+                (click)="setNumberNextOp(i - 1, 'or')">
+                OR
+              </button>
+            </div>
+          }
+          <div class="gp-grid-filter-row">
+            <select
+              [value]="cond.operator"
+              (change)="onNumberOperatorChange(i, $any($event.target).value)">
+              @for (op of numberOperators; track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+            @if (!isValueLessNumberOp(cond.operator)) {
+              <input
+                type="number"
+                [value]="cond.value"
+                (input)="cond.value = $any($event.target).value"
+                placeholder="Value" />
+              @if (cond.operator === 'between') {
+                <span class="gp-grid-filter-to">to</span>
+                <input
+                  type="number"
+                  [value]="cond.valueTo"
+                  (input)="cond.valueTo = $any($event.target).value"
+                  placeholder="Value" />
+              }
+            }
+            @if (numberConditions.length > 1) {
+              <button
+                type="button"
+                class="gp-grid-filter-remove"
+                (click)="removeNumberCondition(i)">×</button>
+            }
+          </div>
+        </div>
+      }
+      <button type="button" class="gp-grid-filter-add" (click)="addNumberCondition()">
+        + Add condition
+      </button>
+  } @else {
+      @if (showValuesMode()) {
+        <div class="gp-grid-filter-mode-toggle">
+          <button
+            type="button"
+            [class.active]="filterMode === 'values'"
+            (click)="filterMode = 'values'">
+            Values
+          </button>
+          <button
+            type="button"
+            [class.active]="filterMode === 'condition'"
+            (click)="filterMode = 'condition'">
+            Condition
+          </button>
+        </div>
+      }
+
+      @if (filterMode === 'values' && showValuesMode()) {
+        <input
+          class="gp-grid-filter-search"
+          type="text"
+          [value]="searchText"
+          (input)="searchText = $any($event.target).value"
+          placeholder="Search..." />
+        <div class="gp-grid-filter-actions">
+          <button type="button" (click)="selectAll()">Select All</button>
+          <button type="button" (click)="deselectAll()">Deselect All</button>
+        </div>
+        <div class="gp-grid-filter-list">
+          <label class="gp-grid-filter-option">
+            <input
+              type="checkbox"
+              [checked]="includeBlanks"
+              (change)="includeBlanks = $any($event.target).checked" />
+            <span class="gp-grid-filter-blank">(Blanks)</span>
+          </label>
+          @for (val of filteredUniqueValues(); track val) {
+            <label class="gp-grid-filter-option">
+              <input
+                type="checkbox"
+                [checked]="selectedValues.has(val)"
+                (change)="toggleValue(val, $any($event.target).checked)" />
+              <span>{{ val }}</span>
+            </label>
+          }
+        </div>
+      }
+
+      @if (filterMode === 'condition') {
+        @for (cond of textConditions; track $index; let i = $index) {
+          <div class="gp-grid-filter-condition">
+            @if (i > 0) {
+              <div class="gp-grid-filter-combination">
+                <button
+                  type="button"
+                  [class.active]="textConditions[i - 1]?.nextOperator === 'and'"
+                  (click)="setTextNextOp(i - 1, 'and')">
+                  AND
+                </button>
+                <button
+                  type="button"
+                  [class.active]="textConditions[i - 1]?.nextOperator === 'or'"
+                  (click)="setTextNextOp(i - 1, 'or')">
+                  OR
+                </button>
+              </div>
+            }
+            <div class="gp-grid-filter-row">
+              <select
+                [value]="cond.operator"
+                (change)="onTextOperatorChange(i, $any($event.target).value)">
+                @for (op of textOperators; track op.value) {
+                  <option [value]="op.value">{{ op.label }}</option>
+                }
+              </select>
+              @if (!isValueLessTextOp(cond.operator)) {
+                <input
+                  class="gp-grid-filter-text-input"
+                  type="text"
+                  [value]="cond.value"
+                  (input)="cond.value = $any($event.target).value"
+                  placeholder="Value" />
+              }
+              @if (textConditions.length > 1) {
+                <button
+                  type="button"
+                  class="gp-grid-filter-remove"
+                  (click)="removeTextCondition(i)">×</button>
+              }
+            </div>
+          </div>
+        }
+        <button type="button" class="gp-grid-filter-add" (click)="addTextCondition()">
+          + Add condition
+        </button>
+      }
+  }
+
+    <div class="gp-grid-filter-buttons">
+      <button type="button" class="gp-grid-filter-btn-clear" (click)="handleClear()">
+        Clear
+      </button>
+      <button type="button" class="gp-grid-filter-btn-apply" (click)="handleApply()">
+        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;
+const isValueLessTextOp = (operator) => VALUE_LESS_TEXT_OPERATORS.includes(operator);
+const isValueLessNumberOp = (operator) => VALUE_LESS_NUMBER_OPERATORS.includes(operator);
+const defaultTextCondition = () => ({
+    operator: 'contains',
+    value: '',
+    nextOperator: 'and',
+});
+const defaultNumberCondition = () => ({
+    operator: '=',
+    value: '',
+    valueTo: '',
+    nextOperator: 'and',
+});
+const computeUniqueValues = (distinctValues) => {
+    const seen = new Set();
+    const result = [];
+    for (const val of distinctValues) {
+        if (val === null || val === undefined || val === '')
+            continue;
+        const str = String(val);
+        if (!seen.has(str)) {
+            seen.add(str);
+            result.push(str);
+        }
+    }
+    return result.sort();
+};
+const initTextState = (filter, uniqueValues) => {
+    if (!filter)
+        return defaultTextState(uniqueValues);
+    const textConds = filter.conditions.filter((c) => c.type === 'text');
+    if (textConds.length === 0)
+        return defaultTextState(uniqueValues);
+    const firstCond = textConds[0];
+    if (firstCond?.selectedValues !== undefined) {
+        return {
+            filterMode: 'values',
+            selectedValues: new Set(firstCond.selectedValues),
+            includeBlanks: firstCond.includeBlank ?? true,
+            textConditions: [defaultTextCondition()],
+        };
+    }
+    return {
+        filterMode: 'condition',
+        selectedValues: new Set(uniqueValues),
+        includeBlanks: true,
+        textConditions: textConds.map((c, i) => ({
+            operator: c.operator,
+            value: c.value ?? '',
+            nextOperator: textConds[i]?.nextOperator ?? 'and',
+        })),
+    };
+};
+const defaultTextState = (uniqueValues) => ({
+    filterMode: 'values',
+    selectedValues: new Set(uniqueValues),
+    includeBlanks: true,
+    textConditions: [defaultTextCondition()],
+});
+const initNumberConditions = (filter) => {
+    if (!filter)
+        return [defaultNumberCondition()];
+    const numConds = filter.conditions.filter((c) => c.type === 'number');
+    if (numConds.length === 0)
+        return [defaultNumberCondition()];
+    return numConds.map((c, i) => ({
+        operator: c.operator,
+        value: c.value !== undefined ? String(c.value) : '',
+        valueTo: c.valueTo !== undefined ? String(c.valueTo) : '',
+        nextOperator: numConds[i]?.nextOperator ?? 'and',
+    }));
+};
+const buildTextFilter = (input) => {
+    if (input.filterMode === 'values') {
+        return buildValuesFilter(input);
+    }
+    return buildConditionTextFilter(input.textConditions);
+};
+const buildValuesFilter = (input) => {
+    const allSelected = input.uniqueValues.every(v => input.selectedValues.has(v));
+    if (allSelected && input.includeBlanks)
+        return null;
+    return {
+        conditions: [{
+                type: 'text',
+                operator: 'contains',
+                selectedValues: new Set(input.selectedValues),
+                includeBlank: input.includeBlanks,
+            }],
+        combination: 'or',
+    };
+};
+const buildConditionTextFilter = (textConditions) => {
+    const conditions = [];
+    for (let i = 0; i < textConditions.length; i++) {
+        const cond = textConditions[i];
+        if (!cond)
+            continue;
+        if (!isValueLessTextOp(cond.operator) && !cond.value)
+            continue;
+        const out = {
+            type: 'text',
+            operator: cond.operator,
+        };
+        if (!isValueLessTextOp(cond.operator))
+            out.value = cond.value;
+        linkNextOperator(conditions, i, textConditions);
+        conditions.push(out);
+    }
+    if (conditions.length === 0)
+        return null;
+    return { conditions, combination: textConditions[0]?.nextOperator ?? 'and' };
+};
+const buildNumberFilter = (numberConditions) => {
+    const conditions = [];
+    for (let i = 0; i < numberConditions.length; i++) {
+        const cond = numberConditions[i];
+        if (!cond)
+            continue;
+        if (!isValueLessNumberOp(cond.operator) && !cond.value)
+            continue;
+        const out = {
+            type: 'number',
+            operator: cond.operator,
+        };
+        if (!isValueLessNumberOp(cond.operator)) {
+            out.value = parseFloat(cond.value);
+            if (cond.operator === 'between' && cond.valueTo) {
+                out.valueTo = parseFloat(cond.valueTo);
+            }
+        }
+        linkNextOperator(conditions, i, numberConditions);
+        conditions.push(out);
+    }
+    if (conditions.length === 0)
+        return null;
+    return { conditions, combination: numberConditions[0]?.nextOperator ?? 'and' };
+};
+const linkNextOperator = (built, currentIndex, source) => {
+    const prev = built[built.length - 1];
+    if (prev === undefined || currentIndex === 0)
+        return;
+    const prevSource = source[currentIndex - 1];
+    prev.nextOperator = prevSource?.nextOperator ?? 'and';
+};
+const resolveColId = (column) => column.colId ?? column.field;
+const isNumberColumn = (column) => column.cellDataType === 'number';
+
+class FilterPopupComponent {
+    popupEl;
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    colIndex = input.required(...(ngDevMode ? [{ debugName: "colIndex" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    apply = output();
+    close = output();
+    popupTop = signal(0, ...(ngDevMode ? [{ debugName: "popupTop" }] : /* istanbul ignore next */ []));
+    popupLeft = signal(0, ...(ngDevMode ? [{ debugName: "popupLeft" }] : /* istanbul ignore next */ []));
+    popupMinWidth = signal(200, ...(ngDevMode ? [{ debugName: "popupMinWidth" }] : /* istanbul ignore next */ []));
+    positioned = signal(false, ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    filterMode = 'values';
+    searchText = '';
+    selectedValues = new Set();
+    includeBlanks = true;
+    textConditions = [defaultTextCondition()];
+    numberConditions = [defaultNumberCondition()];
+    textOperators = TEXT_OPERATORS;
+    numberOperators = NUMBER_OPERATORS;
+    isValueLessTextOp = isValueLessTextOp;
+    isValueLessNumberOp = isValueLessNumberOp;
+    constructor() {
+        effect(() => {
+            this.anchorEl();
+            this.currentFilter();
+            this.initFromCurrentFilter();
+            requestAnimationFrame(() => this.updatePosition());
+        });
+    }
+    ngAfterViewInit() {
+        requestAnimationFrame(() => {
+            document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
+        });
+        window.addEventListener('resize', this.onWindowResize);
+    }
+    ngOnDestroy() {
+        document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
+        window.removeEventListener('resize', this.onWindowResize);
+    }
+    onEscape() {
+        this.close.emit();
+    }
+    isNumberColumn() {
+        return isNumberColumn(this.column());
+    }
+    showValuesMode() {
+        return this.uniqueValues().length <= MAX_CHECKBOX_VALUES;
+    }
+    uniqueValues() {
+        return computeUniqueValues(this.distinctValues());
+    }
+    filteredUniqueValues() {
+        const search = this.searchText.toLowerCase();
+        if (!search)
+            return this.uniqueValues();
+        return this.uniqueValues().filter(v => v.toLowerCase().includes(search));
+    }
+    toggleValue(val, checked) {
+        if (checked) {
+            this.selectedValues.add(val);
+        }
+        else {
+            this.selectedValues.delete(val);
+        }
+    }
+    selectAll() {
+        this.includeBlanks = true;
+        for (const v of this.uniqueValues())
+            this.selectedValues.add(v);
+    }
+    deselectAll() {
+        this.includeBlanks = false;
+        this.selectedValues.clear();
+    }
+    onTextOperatorChange(index, value) {
+        setField(this.textConditions, index, 'operator', value);
+    }
+    onNumberOperatorChange(index, value) {
+        setField(this.numberConditions, index, 'operator', value);
+    }
+    addTextCondition() {
+        this.textConditions.push(defaultTextCondition());
+    }
+    addNumberCondition() {
+        this.numberConditions.push(defaultNumberCondition());
+    }
+    removeTextCondition(index) {
+        this.textConditions.splice(index, 1);
+    }
+    removeNumberCondition(index) {
+        this.numberConditions.splice(index, 1);
+    }
+    setTextNextOp(index, value) {
+        setField(this.textConditions, index, 'nextOperator', value);
+    }
+    setNumberNextOp(index, value) {
+        setField(this.numberConditions, index, 'nextOperator', value);
+    }
+    handleApply() {
+        this.apply.emit({
+            colId: resolveColId(this.column()),
+            filter: this.buildFilter(),
+        });
+    }
+    handleClear() {
+        this.apply.emit({ colId: resolveColId(this.column()), filter: null });
+    }
+    buildFilter() {
+        if (this.isNumberColumn())
+            return buildNumberFilter(this.numberConditions);
+        return buildTextFilter({
+            filterMode: this.filterMode,
+            uniqueValues: this.uniqueValues(),
+            selectedValues: this.selectedValues,
+            includeBlanks: this.includeBlanks,
+            textConditions: this.textConditions,
+        });
+    }
+    initFromCurrentFilter() {
+        const filter = this.currentFilter();
+        if (this.isNumberColumn()) {
+            this.numberConditions = initNumberConditions(filter);
+            return;
+        }
+        const state = initTextState(filter, this.uniqueValues());
+        this.filterMode = state.filterMode;
+        this.selectedValues = state.selectedValues;
+        this.includeBlanks = state.includeBlanks;
+        this.textConditions = state.textConditions;
+    }
+    updatePosition() {
+        if (!this.popupEl?.nativeElement)
+            return;
+        const pos = calculateFilterPopupPosition(this.anchorEl(), this.popupEl.nativeElement);
+        this.popupTop.set(pos.top);
+        this.popupLeft.set(pos.left);
+        this.popupMinWidth.set(pos.minWidth);
+        this.positioned.set(true);
+    }
+    onDocumentPointerDown = (event) => {
+        const target = event.target;
+        if (target.closest('.gp-grid-filter-icon'))
+            return;
+        if (this.popupEl?.nativeElement?.contains(target))
+            return;
+        this.close.emit();
+    };
+    onWindowResize = () => {
+        this.updatePosition();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FilterPopupComponent, isStandalone: true, selector: "gp-grid-filter-popup", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: true, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true }], ngImport: i0, template: "\n<div\n  #popupEl\n  class=\"gp-grid-filter-popup\"\n  [style.position]=\"'fixed'\"\n  [style.zIndex]=\"10000\"\n  [style.top.px]=\"popupTop()\"\n  [style.left.px]=\"popupLeft()\"\n  [style.minWidth.px]=\"popupMinWidth()\"\n  [style.visibility]=\"positioned() ? 'visible' : 'hidden'\"\n  (keydown.escape)=\"close.emit()\"\n  (click)=\"$event.stopPropagation()\">\n\n  <div class=\"gp-grid-filter-header\">\n    Filter: {{ column().headerName ?? column().field }}\n  </div>\n\n  <div [class]=\"'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')\">\n  @if (isNumberColumn()) {\n      @for (cond of numberConditions; track $index; let i = $index) {\n        <div class=\"gp-grid-filter-condition\">\n          @if (i > 0) {\n            <div class=\"gp-grid-filter-combination\">\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'and'\"\n                (click)=\"setNumberNextOp(i - 1, 'and')\">\n                AND\n              </button>\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'or'\"\n                (click)=\"setNumberNextOp(i - 1, 'or')\">\n                OR\n              </button>\n            </div>\n          }\n          <div class=\"gp-grid-filter-row\">\n            <select\n              [value]=\"cond.operator\"\n              (change)=\"onNumberOperatorChange(i, $any($event.target).value)\">\n              @for (op of numberOperators; track op.value) {\n                <option [value]=\"op.value\">{{ op.label }}</option>\n              }\n            </select>\n            @if (!isValueLessNumberOp(cond.operator)) {\n              <input\n                type=\"number\"\n                [value]=\"cond.value\"\n                (input)=\"cond.value = $any($event.target).value\"\n                placeholder=\"Value\" />\n              @if (cond.operator === 'between') {\n                <span class=\"gp-grid-filter-to\">to</span>\n                <input\n                  type=\"number\"\n                  [value]=\"cond.valueTo\"\n                  (input)=\"cond.valueTo = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n            }\n            @if (numberConditions.length > 1) {\n              <button\n                type=\"button\"\n                class=\"gp-grid-filter-remove\"\n                (click)=\"removeNumberCondition(i)\">\u00D7</button>\n            }\n          </div>\n        </div>\n      }\n      <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addNumberCondition()\">\n        + Add condition\n      </button>\n  } @else {\n      @if (showValuesMode()) {\n        <div class=\"gp-grid-filter-mode-toggle\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'values'\"\n            (click)=\"filterMode = 'values'\">\n            Values\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'condition'\"\n            (click)=\"filterMode = 'condition'\">\n            Condition\n          </button>\n        </div>\n      }\n\n      @if (filterMode === 'values' && showValuesMode()) {\n        <input\n          class=\"gp-grid-filter-search\"\n          type=\"text\"\n          [value]=\"searchText\"\n          (input)=\"searchText = $any($event.target).value\"\n          placeholder=\"Search...\" />\n        <div class=\"gp-grid-filter-actions\">\n          <button type=\"button\" (click)=\"selectAll()\">Select All</button>\n          <button type=\"button\" (click)=\"deselectAll()\">Deselect All</button>\n        </div>\n        <div class=\"gp-grid-filter-list\">\n          <label class=\"gp-grid-filter-option\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"includeBlanks\"\n              (change)=\"includeBlanks = $any($event.target).checked\" />\n            <span class=\"gp-grid-filter-blank\">(Blanks)</span>\n          </label>\n          @for (val of filteredUniqueValues(); track val) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedValues.has(val)\"\n                (change)=\"toggleValue(val, $any($event.target).checked)\" />\n              <span>{{ val }}</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.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gp-grid-filter-popup',
+                    standalone: true,
+                    imports: [],
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    template: FILTER_POPUP_TEMPLATE,
+                }]
+        }], 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: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+const setField = (arr, index, key, value) => {
+    const item = arr[index];
+    if (item)
+        item[key] = value;
+};
+
+const TEMPLATE = `
+  @if (filterPopup(); as fp) {
+    <gp-grid-filter-popup
+      [column]="fp.column"
+      [colIndex]="fp.colIndex"
+      [anchorEl]="fp.anchorEl!"
+      [distinctValues]="fp.distinctValues"
+      [currentFilter]="fp.currentFilter"
+      (apply)="filterApply.emit($event)"
+      (close)="filterClose.emit()"
+    />
+  }
+  @if (isResizing()) {
+    <div class="gp-grid-column-resize-line" [style.left.px]="resizeLineLeft()"></div>
+  }
+  @if (isLoading()) {
+    <div
+      style="position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none;"
+      [style.top.px]="headerHeight()">
+      <div class="gp-grid-loading-overlay"></div>
+      <div class="gp-grid-loading">
+        <div class="gp-grid-loading-spinner"></div>
+      </div>
+    </div>
+  }
+  @if (errorMessage(); as msg) {
+    <div class="gp-grid-error">Error: {{ msg }}</div>
+  }
+  @if (columnMove(); as cm) {
+    <div
+      class="gp-grid-column-move-ghost"
+      [style.left.px]="cm.currentX - cm.ghostWidth / 2"
+      [style.top.px]="cm.currentY - cm.ghostHeight / 2"
+      [style.width.px]="cm.ghostWidth"
+      [style.height.px]="cm.ghostHeight">
+      {{ columnMoveGhostText() }}
+    </div>
+    @if (columnMoveDropLeft() !== null) {
+      <div
+        class="gp-grid-column-drop-indicator"
+        [style.left.px]="columnMoveDropLeft()"
+        [style.height.px]="headerHeight()"></div>
+    }
+  }
+  @if (rowDragGhost(); as rd) {
+    <div
+      class="gp-grid-row-drag-ghost"
+      [style.left.px]="rd.currentX + 12"
+      [style.top.px]="rd.currentY - rowHeight() / 2"
+      [style.width.px]="rowDragGhostWidth()"
+      [style.height.px]="rowHeight()"></div>
+  }
+`;
+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 */ []));
+    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 */ []));
+    visibleColumnWithIndices = input.required(...(ngDevMode ? [{ debugName: "visibleColumnWithIndices" }] : /* istanbul ignore next */ []));
+    columnPositions = input.required(...(ngDevMode ? [{ debugName: "columnPositions" }] : /* istanbul ignore next */ []));
+    scrollLeft = input.required(...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
+    effectiveColumns = input.required(...(ngDevMode ? [{ debugName: "effectiveColumns" }] : /* istanbul ignore next */ []));
+    totalWidth = input.required(...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
+    filterApply = output();
+    filterClose = output();
+    isResizing = computed(() => this.dragState().dragType === 'column-resize', ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    resizeLineLeft = computed(() => {
+        const cr = this.dragState().columnResize;
+        if (cr === null)
+            return 0;
+        const visibleIndex = this.visibleColumnWithIndices().findIndex(v => v.originalIndex === cr.colIndex);
+        if (visibleIndex === -1)
+            return 0;
+        const positions = this.columnPositions();
+        return (positions[visibleIndex] ?? 0) + cr.currentWidth - this.scrollLeft();
+    }, ...(ngDevMode ? [{ debugName: "resizeLineLeft" }] : /* istanbul ignore next */ []));
+    columnMove = computed(() => {
+        if (this.dragState().dragType !== 'column-move')
+            return null;
+        return this.dragState().columnMove;
+    }, ...(ngDevMode ? [{ debugName: "columnMove" }] : /* istanbul ignore next */ []));
+    rowDragGhost = computed(() => {
+        if (this.dragState().dragType !== 'row-drag')
+            return null;
+        return this.dragState().rowDrag;
+    }, ...(ngDevMode ? [{ debugName: "rowDragGhost" }] : /* istanbul ignore next */ []));
+    columnMoveGhostText = computed(() => {
+        const cm = this.columnMove();
+        if (cm === null)
+            return '';
+        const column = this.effectiveColumns()[cm.sourceColIndex];
+        return column?.headerName ?? column?.field ?? '';
+    }, ...(ngDevMode ? [{ debugName: "columnMoveGhostText" }] : /* istanbul ignore next */ []));
+    columnMoveDropLeft = computed(() => {
+        const cm = this.columnMove();
+        if (cm === null || cm.dropTargetIndex === null)
+            return null;
+        const positions = this.columnPositions();
+        return (positions[cm.dropTargetIndex] ?? 0) - this.scrollLeft();
+    }, ...(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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GridOverlaysComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gp-grid-overlays',
+                    standalone: true,
+                    imports: [FilterPopupComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: TEMPLATE,
+                }]
+        }], 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"] }] } });
+
+const GP_GRID_TEMPLATE = `
+    <div #container
+      [class]="'gp-grid-container' + (darkMode() ? ' gp-grid-container--dark' : '')"
+      style="width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; outline: none;"
+      tabindex="0"
+      (keydown)="onKeyDown($event)"
+      (wheel)="onWheel($event)"
+    >
+      <gp-grid-header
+        [headerHeight]="headerHeight()"
+        [scrollLeft]="vm.scrollLeft()"
+        [contentWidth]="vm.contentWidth()"
+        [totalWidth]="vm.totalWidth()"
+        [isLoading]="vm.isLoading()"
+        [visibleColumnsWithIndices]="vm.visibleColumnWithIndices()"
+        [columnPositions]="vm.columnPositions()"
+        [columnWidths]="vm.columnWidths()"
+        [headers]="vm.headerState()"
+        [sortingEnabled]="sortingEnabled()"
+        [headerRenderers]="headerRenderers()"
+        [globalHeaderRenderer]="headerRenderer()"
+        (headerPointerDown)="onHeaderPointerDown($event)"
+        (filterPointerDown)="onFilterPointerDown($event)"
+        (resizePointerDown)="onResizePointerDown($event)"
+        (headerSort)="onHeaderSort($event)"
+      />
+      <gp-grid-body
+        [rowHeight]="rowHeight()"
+        [totalHeaderHeight]="headerHeight()"
+        [contentWidth]="vm.contentWidth()"
+        [contentHeight]="vm.contentHeight()"
+        [totalWidth]="vm.totalWidth()"
+        [rowsWrapperOffset]="vm.rowsWrapperOffset()"
+        [slotsArray]="vm.slotsArray()"
+        [visibleColumnWithIndices]="vm.visibleColumnWithIndices()"
+        [columnPositions]="vm.columnPositions()"
+        [columnWidths]="vm.columnWidths()"
+        [totalRows]="vm.totalRows()"
+        [activeCell]="vm.activeCell()"
+        [selectionRange]="vm.selectionRange()"
+        [editingCell]="vm.editingCell()"
+        [cellRenderers]="cellRenderers()"
+        [globalCellRenderer]="cellRenderer()"
+        [editRenderers]="editRenderers()"
+        [globalEditRenderer]="editRenderer()"
+        [hoverPosition]="vm.hoverPosition()"
+        [computeRowClasses]="computeRowClassesFn"
+        [computeCellClasses]="computeCellClassesFn"
+        [fillHandlePosition]="vm.fillHandlePosition()"
+        [dragState]="vm.dragState()"
+        (scrolled)="onBodyScroll($event)"
+        (cellPointerDown)="onCellPointerDown($event)"
+        (cellPointerEnter)="onCellPointerEnter($event)"
+        (cellPointerLeave)="onCellPointerLeave()"
+        (cellDoubleClick)="onCellDoubleClick($event)"
+        (editValueChange)="onEditValueChange($event)"
+        (editCommit)="onEditCommit()"
+        (editCancel)="onEditCancel()"
+        (fillHandlePointerDown)="onFillHandlePointerDown($event)"
+      />
+      <gp-grid-overlays
+        [filterPopup]="vm.filterPopup()"
+        [isLoading]="vm.isLoading()"
+        [errorMessage]="vm.errorMessage()"
+        [headerHeight]="headerHeight()"
+        [rowHeight]="rowHeight()"
+        [dragState]="vm.dragState()"
+        [visibleColumnWithIndices]="vm.visibleColumnWithIndices()"
+        [columnPositions]="vm.columnPositions()"
+        [scrollLeft]="vm.scrollLeft()"
+        [effectiveColumns]="vm.effectiveColumns()"
+        [totalWidth]="vm.totalWidth()"
+        (filterApply)="onFilterApply($event)"
+        (filterClose)="onFilterClose()"
+      />
+    </div>
+  `;
+
+const INITIAL_DRAG_STATE = {
+    isDragging: false,
+    dragType: null,
+    fillSourceRange: null,
+    fillTarget: null,
+    columnResize: null,
+    columnMove: null,
+    rowDrag: null,
+};
+/**
+ * Reactive view-state container for GpGridComponent.
+ *
+ * Owns every signal and computed the template binds against, plus the
+ * batch-change setters bag wired into those signals. The component
+ * becomes a thin shell that holds lifecycle, event handlers, and inputs.
+ *
+ * Angular-specific (uses signal/computed from @angular/core) — lives in
+ * the angular package, not core.
+ */
+class GpGridViewModel {
+    headerState = signal(new Map(), ...(ngDevMode ? [{ debugName: "headerState" }] : /* istanbul ignore next */ []));
+    viewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "viewportWidth" }] : /* istanbul ignore next */ []));
+    scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeft" }] : /* istanbul ignore next */ []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    filterPopup = signal(null, ...(ngDevMode ? [{ debugName: "filterPopup" }] : /* istanbul ignore next */ []));
+    pendingScrollTop = signal(null, ...(ngDevMode ? [{ debugName: "pendingScrollTop" }] : /* istanbul ignore next */ []));
+    activeCell = signal(null, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
+    selectionRange = signal(null, ...(ngDevMode ? [{ debugName: "selectionRange" }] : /* istanbul ignore next */ []));
+    editingCell = signal(null, ...(ngDevMode ? [{ debugName: "editingCell" }] : /* istanbul ignore next */ []));
+    hoverPosition = signal(null, ...(ngDevMode ? [{ debugName: "hoverPosition" }] : /* istanbul ignore next */ []));
+    columnsOverride = signal(null, ...(ngDevMode ? [{ debugName: "columnsOverride" }] : /* istanbul ignore next */ []));
+    dragState = signal(INITIAL_DRAG_STATE, ...(ngDevMode ? [{ debugName: "dragState" }] : /* istanbul ignore next */ []));
+    contentWidth = signal(0, ...(ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []));
+    contentHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
+    rowsWrapperOffset = signal(0, ...(ngDevMode ? [{ debugName: "rowsWrapperOffset" }] : /* istanbul ignore next */ []));
+    slots = signal(new Map(), ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    effectiveColumns;
+    visibleColumnWithIndices;
+    columnPositions;
+    columnWidths;
+    totalWidth;
+    fillHandlePosition;
+    slotsArray;
+    totalRows;
+    batchSetters;
+    filterAnchorEl = null;
+    constructor(deps) {
+        this.effectiveColumns = computed(() => this.columnsOverride() ?? deps.getColumns(), ...(ngDevMode ? [{ debugName: "effectiveColumns" }] : /* istanbul ignore next */ []));
+        this.visibleColumnWithIndices = computed(() => this.effectiveColumns()
+            .map((col, index) => ({ column: col, originalIndex: index }))
+            .filter(({ column }) => !column.hidden), ...(ngDevMode ? [{ debugName: "visibleColumnWithIndices" }] : /* istanbul ignore next */ []));
+        const columnLayout = computed(() => calculateScaledColumnPositions(this.visibleColumnWithIndices().map(v => v.column), this.viewportWidth()), ...(ngDevMode ? [{ debugName: "columnLayout" }] : /* istanbul ignore next */ []));
+        this.columnPositions = computed(() => columnLayout().positions, ...(ngDevMode ? [{ debugName: "columnPositions" }] : /* istanbul ignore next */ []));
+        this.columnWidths = computed(() => columnLayout().widths, ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+        this.totalWidth = computed(() => getTotalWidth(this.columnPositions()), ...(ngDevMode ? [{ debugName: "totalWidth" }] : /* istanbul ignore next */ []));
+        this.fillHandlePosition = computed(() => calculateFillHandlePosition({
+            activeCell: this.activeCell(),
+            selectionRange: this.selectionRange(),
+            slots: this.slots(),
+            columns: this.effectiveColumns(),
+            visibleColumnsWithIndices: this.visibleColumnWithIndices(),
+            columnPositions: this.columnPositions(),
+            columnWidths: this.columnWidths(),
+            rowHeight: deps.getRowHeight(),
+        }), ...(ngDevMode ? [{ debugName: "fillHandlePosition" }] : /* istanbul ignore next */ []));
+        this.slotsArray = computed(() => [...this.slots().values()], ...(ngDevMode ? [{ debugName: "slotsArray" }] : /* istanbul ignore next */ []));
+        this.totalRows = computed(() => deps.getRows().length, ...(ngDevMode ? [{ debugName: "totalRows" }] : /* istanbul ignore next */ []));
+        this.batchSetters = {
+            setContentWidth: (v) => this.contentWidth.set(v),
+            setContentHeight: (v) => this.contentHeight.set(v),
+            setRowsWrapperOffset: (v) => this.rowsWrapperOffset.set(v),
+            setIsLoading: (v) => this.isLoading.set(v),
+            setErrorMessage: (v) => this.errorMessage.set(v),
+            setPendingScrollTop: (v) => this.pendingScrollTop.set(v),
+            setActiveCell: (v) => this.activeCell.set(v),
+            setSelectionRange: (v) => this.selectionRange.set(v),
+            setEditingCell: (v) => this.editingCell.set(v),
+            setHoverPosition: (v) => this.hoverPosition.set(v),
+            setColumnsOverride: (v) => this.columnsOverride.set(v),
+            onFilterPopupChange: (v) => this.materializeFilterPopup(v),
+        };
+    }
+    setFilterAnchor(el) {
+        this.filterAnchorEl = el;
+    }
+    materializeFilterPopup(state) {
+        if (state === null) {
+            this.filterPopup.set(null);
+            return;
+        }
+        if (state.isOpen && state.column) {
+            this.filterPopup.set({
+                colIndex: state.colIndex,
+                column: state.column,
+                distinctValues: state.distinctValues,
+                currentFilter: state.currentFilter,
+                anchorEl: this.filterAnchorEl,
+            });
+        }
+    }
+}
+
+/**
+ * Owns the core grid instance plus every framework-agnostic adapter the
+ * Angular component drives (auto-scroll, pending row-drag, input events,
+ * data source ownership). The component becomes a thin shell that holds
+ * lifecycle + Angular template bindings and delegates state work here.
+ */
+class GpGridBindings {
+    deps;
+    dataSourceOwner = new DataSourceOwner();
+    autoScroll;
+    pendingRowDrag;
+    input;
+    coreRef = null;
+    unsubscribe = null;
+    resizeObserver = null;
+    constructor(deps) {
+        this.deps = deps;
+        this.autoScroll = new AutoScrollDriver(() => this.deps.getBody(), (event) => this.input.dragMove(event));
+        this.pendingRowDrag = new PendingRowDragController({
+            getCore: () => this.coreRef,
+            getContainer: this.deps.getContainer,
+            isBrowser: this.deps.isBrowser,
+            onDragConfirmed: (state) => this.deps.vm.dragState.set(state),
+        });
+        this.input = new InputEventAdapter({
+            getCore: () => this.coreRef,
+            getBodyEl: this.deps.getBody,
+            autoScroll: this.autoScroll,
+            pendingRowDrag: this.pendingRowDrag,
+            onDragStateChange: (state) => this.deps.vm.dragState.set(state),
+        });
+    }
+    attach(core) {
+        this.coreRef = core;
+        this.unsubscribe = core.onBatchInstruction((instructions) => {
+            const vm = this.deps.vm;
+            const maps = applyBatchInstructions(instructions, vm.slots(), vm.headerState(), vm.batchSetters);
+            vm.slots.set(new Map(maps.slots));
+            vm.headerState.set(new Map(maps.headers));
+        });
+        core.initialize();
+        core.input.updateDeps({
+            getHeaderHeight: this.deps.getHeaderHeight,
+            getRowHeight: this.deps.getRowHeight,
+            getColumnPositions: () => this.deps.vm.columnPositions(),
+            getColumnCount: () => this.deps.vm.visibleColumnWithIndices().length,
+            getOriginalColumnIndex: (visibleIndex) => this.deps.vm.visibleColumnWithIndices()[visibleIndex]?.originalIndex ?? visibleIndex,
+        });
+    }
+    observeViewport(container, bodyEl) {
+        this.deps.vm.viewportWidth.set(container.clientWidth);
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry)
+                this.deps.vm.viewportWidth.set(entry.contentRect.width);
+        });
+        this.resizeObserver.observe(container);
+        this.coreRef?.setViewport(0, 0, container.clientWidth, bodyEl.clientHeight);
+    }
+    destroy() {
+        this.autoScroll.stop();
+        this.pendingRowDrag.cancel();
+        this.pendingRowDrag.releaseLocks();
+        this.unsubscribe?.();
+        this.resizeObserver?.disconnect();
+        this.coreRef?.destroy();
+        this.dataSourceOwner.destroy();
+        this.coreRef = null;
+    }
+    syncHighlighting(opts) {
+        const core = this.coreRef;
+        if (core?.highlight && opts) {
+            core.highlight.updateOptions(opts);
+        }
+    }
+    syncColumns(cols) {
+        const core = this.coreRef;
+        if (core === null)
+            return;
+        if (this.dataSourceOwner.syncColumns(cols))
+            core.setColumns(cols);
+    }
+    syncRows(rows, dataSource) {
+        const core = this.coreRef;
+        if (core === null)
+            return;
+        const newDs = this.dataSourceOwner.syncRows(rows, dataSource);
+        if (newDs !== null)
+            core.setDataSource(newDs);
+    }
+    applyPendingScroll() {
+        const top = this.deps.vm.pendingScrollTop();
+        const body = this.deps.getBody();
+        if (top !== null && body) {
+            body.scrollTop = top;
+            this.deps.vm.pendingScrollTop.set(null);
+        }
+    }
+    scrollToRow(row) {
+        const core = this.coreRef;
+        const body = this.deps.getBody();
+        if (core === null || body === null)
+            return;
+        scrollCellIntoView(core, body, row, this.deps.getRowHeight(), this.deps.vm.slots(), this.deps.vm.rowsWrapperOffset());
+    }
+}
+
+const buildGridCore = (inputs, emitters) => {
+    const cellValueChanged = inputs.getRowId === undefined
+        ? undefined
+        : emitters.onCellValueChanged;
+    return new GridCore({
+        columns: inputs.columns,
+        dataSource: inputs.dataSource,
+        rowHeight: inputs.rowHeight,
+        headerHeight: inputs.headerHeight,
+        overscan: inputs.overscan,
+        sortingEnabled: inputs.sortingEnabled,
+        highlighting: inputs.highlighting,
+        getRowId: inputs.getRowId,
+        rowDragEntireRow: inputs.rowDragEntireRow,
+        onRowDragEnd: emitters.onRowDragEnd,
+        onCellValueChanged: cellValueChanged,
+        onColumnResized: emitters.onColumnResized,
+        onColumnMoved: emitters.onColumnMoved,
+    });
+};
+
+class GpGridComponent {
+    container;
+    body;
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    dataSource = input(null, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    getRowId = input(null, ...(ngDevMode ? [{ debugName: "getRowId" }] : /* istanbul ignore next */ []));
+    rowHeight = input(32, ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    headerHeight = input(32, ...(ngDevMode ? [{ debugName: "headerHeight" }] : /* istanbul ignore next */ []));
+    darkMode = input(false, ...(ngDevMode ? [{ debugName: "darkMode" }] : /* istanbul ignore next */ []));
+    cellRenderers = input({}, ...(ngDevMode ? [{ debugName: "cellRenderers" }] : /* istanbul ignore next */ []));
+    headerRenderers = input({}, ...(ngDevMode ? [{ debugName: "headerRenderers" }] : /* istanbul ignore next */ []));
+    editRenderers = input({}, ...(ngDevMode ? [{ debugName: "editRenderers" }] : /* istanbul ignore next */ []));
+    cellRenderer = input(null, ...(ngDevMode ? [{ debugName: "cellRenderer" }] : /* istanbul ignore next */ []));
+    headerRenderer = input(null, ...(ngDevMode ? [{ debugName: "headerRenderer" }] : /* istanbul ignore next */ []));
+    editRenderer = input(null, ...(ngDevMode ? [{ debugName: "editRenderer" }] : /* istanbul ignore next */ []));
+    highlighting = input(null, ...(ngDevMode ? [{ debugName: "highlighting" }] : /* istanbul ignore next */ []));
+    rowDragEntireRow = input(false, ...(ngDevMode ? [{ debugName: "rowDragEntireRow" }] : /* istanbul ignore next */ []));
+    overscan = input(3, ...(ngDevMode ? [{ debugName: "overscan" }] : /* istanbul ignore next */ []));
+    sortingEnabled = input(true, ...(ngDevMode ? [{ debugName: "sortingEnabled" }] : /* istanbul ignore next */ []));
+    wheelDampening = input(0.1, ...(ngDevMode ? [{ debugName: "wheelDampening" }] : /* istanbul ignore next */ []));
+    onRowDragEnd = output();
+    onCellValueChanged = output();
+    onColumnResized = output();
+    onColumnMoved = output();
+    vm = new GpGridViewModel({
+        getColumns: () => this.columns(),
+        getRows: () => this.rows(),
+        getRowHeight: () => this.rowHeight(),
+    });
+    bindings = new GpGridBindings({
+        vm: this.vm,
+        isBrowser: this.isBrowser,
+        getContainer: () => this.container?.nativeElement ?? null,
+        getBody: () => this.body?.scrollContainer?.nativeElement ?? null,
+        getRowHeight: () => this.rowHeight(),
+        getHeaderHeight: () => this.headerHeight(),
+    });
+    constructor() {
+        effect(() => this.bindings.applyPendingScroll());
+        effect(() => this.bindings.syncHighlighting(this.highlighting()));
+        effect(() => this.bindings.syncColumns(this.columns()));
+        effect(() => this.bindings.syncRows(this.rows(), this.dataSource()));
+    }
+    ngOnInit() {
+        const core = buildGridCore({
+            columns: this.columns(),
+            dataSource: this.bindings.dataSourceOwner.initialize(this.dataSource(), this.rows()),
+            rowHeight: this.rowHeight(),
+            headerHeight: this.headerHeight(),
+            overscan: this.overscan(),
+            sortingEnabled: this.sortingEnabled(),
+            highlighting: (this.highlighting() ?? undefined),
+            getRowId: this.getRowId() ?? undefined,
+            rowDragEntireRow: this.rowDragEntireRow(),
+        }, {
+            onRowDragEnd: (source, target) => this.onRowDragEnd.emit({ source, target }),
+            onCellValueChanged: (event) => this.onCellValueChanged.emit(event),
+            onColumnResized: (colIndex, newWidth) => this.onColumnResized.emit({ colIndex, newWidth }),
+            onColumnMoved: (fromIndex, toIndex) => this.onColumnMoved.emit({ fromIndex, toIndex }),
+        });
+        this.bindings.attach(core);
+    }
+    ngAfterViewInit() {
+        if (this.isBrowser === false)
+            return;
+        this.bindings.observeViewport(this.container.nativeElement, this.body.scrollContainer.nativeElement);
+        document.addEventListener('pointermove', this.onDocumentPointerMove, { passive: false });
+        document.addEventListener('pointerup', this.onDocumentPointerUp);
+    }
+    ngOnDestroy() {
+        this.bindings.destroy();
+        if (this.isBrowser) {
+            document.removeEventListener('pointermove', this.onDocumentPointerMove);
+            document.removeEventListener('pointerup', this.onDocumentPointerUp);
+        }
+    }
+    onBodyScroll(scrollLeft) {
+        this.vm.scrollLeft.set(scrollLeft);
+        const el = this.body.scrollContainer.nativeElement;
+        this.bindings.coreRef?.setViewport(el.scrollTop, scrollLeft, el.clientWidth, el.clientHeight);
+    }
+    onHeaderPointerDown(evt) {
+        if (this.bindings.input.headerPointerDown(evt.colIndex, evt.colWidth, evt.colHeight, evt.event)) {
+            evt.event.preventDefault();
+        }
+    }
+    onFilterPointerDown(evt) {
+        this.vm.setFilterAnchor(evt.anchorEl);
+        const rect = evt.anchorEl.getBoundingClientRect();
+        this.bindings.coreRef?.openFilterPopup(evt.colIndex, {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
+        });
+    }
+    onCellPointerDown(evt) {
+        const action = this.bindings.input.cellPointerDown(evt.rowIndex, evt.colIndex, evt.event);
+        if (action.preventDefault)
+            evt.event.preventDefault();
+        if (action.focusContainer) {
+            this.container.nativeElement.focus({ preventScroll: true });
+        }
+    }
+    onCellPointerEnter(evt) {
+        this.bindings.input.cellPointerEnter(evt.rowIndex, evt.colIndex);
+    }
+    onFillHandlePointerDown(evt) {
+        const action = this.bindings.input.fillHandlePointerDown(this.vm.activeCell(), this.vm.selectionRange(), evt.event);
+        if (action.preventDefault)
+            evt.event.preventDefault();
+        if (action.stopPropagation)
+            evt.event.stopPropagation();
+    }
+    onCellPointerLeave() {
+        this.bindings.input.cellPointerLeave();
+    }
+    computeRowClassesFn = (rowIndex, rowData) => {
+        return this.bindings.coreRef?.highlight?.computeRowClasses(rowIndex, rowData) ?? [];
+    };
+    computeCellClassesFn = (rowIndex, colIndex, column, rowData) => {
+        return this.bindings.coreRef?.highlight?.computeCombinedCellClasses(rowIndex, colIndex, column, rowData) ?? [];
+    };
+    onCellDoubleClick(evt) {
+        this.bindings.coreRef?.startEdit(evt.rowIndex, evt.colIndex);
+    }
+    onEditValueChange(value) {
+        this.bindings.coreRef?.updateEditValue(value);
+    }
+    onEditCommit() {
+        this.bindings.coreRef?.commitEdit();
+    }
+    onEditCancel() {
+        this.bindings.coreRef?.cancelEdit();
+    }
+    onHeaderSort(evt) {
+        this.bindings.coreRef?.setSort(evt.colId, evt.direction, evt.addToExisting);
+    }
+    onWheel(event) {
+        const bodyEl = this.body?.scrollContainer?.nativeElement;
+        if (!bodyEl)
+            return;
+        const dampened = this.bindings.input.wheel(event.deltaY, event.deltaX, this.wheelDampening());
+        if (dampened) {
+            event.preventDefault();
+            bodyEl.scrollTop += dampened.dy;
+            bodyEl.scrollLeft += dampened.dx;
+        }
+    }
+    onKeyDown(event) {
+        const editing = this.vm.editingCell();
+        const result = this.bindings.input.keyDown(event, this.vm.activeCell(), editing === null ? null : { row: editing.row, col: editing.col }, this.vm.filterPopup() !== null);
+        if (result.preventDefault)
+            event.preventDefault();
+        if (result.scrollToCell)
+            this.bindings.scrollToRow(result.scrollToCell.row);
+    }
+    onResizePointerDown(evt) {
+        if (this.bindings.input.resizePointerDown(evt.colIndex, evt.colWidth, evt.event)) {
+            evt.event.preventDefault();
+        }
+    }
+    onFilterApply(event) {
+        this.bindings.coreRef?.setFilter(event.colId, event.filter);
+        this.vm.filterPopup.set(null);
+    }
+    onFilterClose() {
+        this.bindings.coreRef?.closeFilterPopup();
+        this.vm.filterPopup.set(null);
+    }
+    onDocumentPointerMove = (event) => {
+        if (this.bindings.input.documentPointerMove(event))
+            event.preventDefault();
+    };
+    onDocumentPointerUp = (_event) => {
+        const { wasRowDrag } = this.bindings.input.documentPointerUp();
+        if (wasRowDrag)
+            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.1.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 }, 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      (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    </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: GpGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gp-grid', standalone: true, imports: [GridHeaderComponent, GridBodyComponent, GridOverlaysComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: GP_GRID_TEMPLATE, styles: [":host{display:block;height:100%;min-height:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
+            }], 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 }] }], sortingEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortingEnabled", required: false }] }], wheelDampening: [{ type: i0.Input, args: [{ isSignal: true, alias: "wheelDampening", required: false }] }], onRowDragEnd: [{ type: i0.Output, args: ["onRowDragEnd"] }], onCellValueChanged: [{ type: i0.Output, args: ["onCellValueChanged"] }], onColumnResized: [{ type: i0.Output, args: ["onColumnResized"] }], onColumnMoved: [{ type: i0.Output, args: ["onColumnMoved"] }] } });
+
+/**
+ * Angular helper for efficient grid data mutations.
+ *
+ * Wraps `createMutableClientDataSource` to provide a simple API for
+ * updating grid data without triggering full pipeline rebuilds.
+ *
+ * @example
+ * ```ts
+ * private readonly grid = createGridData(initialRows, {
+ *   getRowId: (row) => row.id,
+ * });
+ *
+ * // Template:
+ * // <gp-grid [dataSource]="grid.dataSource" [columns]="columns" />
+ *
+ * // Update a row imperatively:
+ * this.grid.updateRow(42, { name: 'New name' });
+ * ```
+ */
+const createGridData = (initialData, options) => {
+    const ds = createMutableClientDataSource(initialData, {
+        getRowId: options.getRowId,
+        debounceMs: options.debounceMs,
+        useWorker: options.useWorker,
+        parallelSort: options.parallelSort,
+    });
+    return {
+        dataSource: ds,
+        updateRow: ds.updateRow,
+        addRows: ds.addRows,
+        removeRows: ds.removeRows,
+        updateCell: ds.updateCell,
+        clear: ds.clear,
+        getRowById: ds.getRowById,
+        getTotalRowCount: ds.getTotalRowCount,
+        flushTransactions: ds.flushTransactions,
+    };
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FilterPopupComponent, GpGridComponent, GridBodyComponent, GridHeaderComponent, GridOverlaysComponent, createGridData };
+//# sourceMappingURL=gp-grid-angular.mjs.map