@alaarab/ogrid-angular 2.1.2 → 2.1.4

package/dist/esm/index.js

@@ -1,31 +1,4607 @@
-// Re-export core types + utils
+import { flattenColumns, getMultiSelectFilterFields, deriveFilterOptionsFromData, processClientSideData, validateColumns, validateRowIds, computeNextSortState, mergeFilter, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, parseValue, UndoRedoStack, rangesEqual, normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, getCellValue, computeTabNavigation, computeAggregations, getDataGridStatusBarConfig, computeVisibleRange, computeTotalHeight, getScrollTopForRow, GRID_BORDER_RADIUS, getStatusBarParts, GRID_CONTEXT_MENU_ITEMS, formatShortcut, injectGlobalStyles, buildHeaderRows, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildPopoverEditorProps, measureColumnContentWidth, getPaginationViewModel, ROW_NUMBER_COLUMN_WIDTH, reorderColumnArray, findCtrlArrowTarget, measureRange } from '@alaarab/ogrid-core';
 export * from '@alaarab/ogrid-core';
-// Explicitly re-export constants for test resolution
-export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, DEFAULT_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-core';
-export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
-// Services
-export { OGridService } from './services/ogrid.service';
-export { DataGridStateService } from './services/datagrid-state.service';
-export { DataGridLayoutHelper } from './services/datagrid-layout.service';
-export { DataGridEditingHelper } from './services/datagrid-editing.service';
-export { DataGridInteractionHelper } from './services/datagrid-interaction.service';
-export { ColumnReorderService } from './services/column-reorder.service';
-export { VirtualScrollService } from './services/virtual-scroll.service';
-// Components
-export { OGridLayoutComponent } from './components/ogrid-layout.component';
-export { StatusBarComponent } from './components/status-bar.component';
-export { GridContextMenuComponent } from './components/grid-context-menu.component';
-export { SideBarComponent } from './components/sidebar.component';
-export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
-export { EmptyStateComponent } from './components/empty-state.component';
-export { BaseOGridComponent } from './components/base-ogrid.component';
-export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
-export { BaseColumnHeaderFilterComponent } from './components/base-column-header-filter.component';
-export { BaseColumnChooserComponent } from './components/base-column-chooser.component';
-export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
-export { BaseInlineCellEditorComponent } from './components/base-inline-cell-editor.component';
-export { INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from './components/inline-cell-editor-template';
-export { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from './components/base-popover-cell-editor.component';
-// Shared styles
-export { OGRID_THEME_VARS_CSS } from './styles/ogrid-theme-vars';
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestCallback, } from './utils';
+export { CELL_PADDING, CHECKBOX_COLUMN_WIDTH, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, GRID_BORDER_RADIUS, PEOPLE_SEARCH_DEBOUNCE_MS, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, Z_INDEX, debounce, getCellRenderDescriptor, getHeaderFilterConfig, isInSelectionRange, normalizeSelectionRange, resolveCellDisplayContent, resolveCellStyle, toUserLike } from '@alaarab/ogrid-core';
+import { Injectable, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, inject, DestroyRef, signal, computed, effect, NgZone, EventEmitter, Injector, EnvironmentInjector, createComponent } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var DEFAULT_PAGE_SIZE = 25;
+var EMPTY_LOADING_OPTIONS = {};
+var DEFAULT_PANELS = ["columns", "filters"];
+var OGridService = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    // --- Input signals (set by the component consuming this service) ---
+    this.columnsProp = signal([]);
+    this.getRowId = signal((item) => item["id"]);
+    this.data = signal(void 0);
+    this.dataSource = signal(void 0);
+    this.controlledPage = signal(void 0);
+    this.controlledPageSize = signal(void 0);
+    this.controlledSort = signal(void 0);
+    this.controlledFilters = signal(void 0);
+    this.controlledVisibleColumns = signal(void 0);
+    this.controlledLoading = signal(void 0);
+    this.onPageChange = signal(void 0);
+    this.onPageSizeChange = signal(void 0);
+    this.onSortChange = signal(void 0);
+    this.onFiltersChange = signal(void 0);
+    this.onVisibleColumnsChange = signal(void 0);
+    this.columnOrder = signal(void 0);
+    this.onColumnOrderChange = signal(void 0);
+    this.onColumnResized = signal(void 0);
+    this.onAutosizeColumn = signal(void 0);
+    this.onColumnPinned = signal(void 0);
+    this.defaultPageSize = signal(DEFAULT_PAGE_SIZE);
+    this.defaultSortBy = signal(void 0);
+    this.defaultSortDirection = signal("asc");
+    this.toolbar = signal(void 0);
+    this.toolbarBelow = signal(void 0);
+    this.emptyState = signal(void 0);
+    this.entityLabelPlural = signal("items");
+    this.className = signal(void 0);
+    this.layoutMode = signal("fill");
+    this.suppressHorizontalScroll = signal(void 0);
+    this.stickyHeader = signal(true);
+    this.fullScreen = signal(false);
+    this.editable = signal(void 0);
+    this.cellSelection = signal(void 0);
+    this.density = signal("normal");
+    this.rowHeight = signal(void 0);
+    this.onCellValueChanged = signal(void 0);
+    this.onUndo = signal(void 0);
+    this.onRedo = signal(void 0);
+    this.canUndo = signal(void 0);
+    this.canRedo = signal(void 0);
+    this.rowSelection = signal("none");
+    this.selectedRows = signal(void 0);
+    this.onSelectionChange = signal(void 0);
+    this.statusBar = signal(void 0);
+    this.pageSizeOptions = signal(void 0);
+    this.sideBarConfig = signal(void 0);
+    this.onFirstDataRendered = signal(void 0);
+    this.onError = signal(void 0);
+    this.columnChooserProp = signal(void 0);
+    this.columnReorder = signal(void 0);
+    this.virtualScroll = signal(void 0);
+    this.ariaLabel = signal(void 0);
+    this.ariaLabelledBy = signal(void 0);
+    // --- Internal state signals ---
+    this.internalData = signal([]);
+    this.internalLoading = signal(false);
+    this.internalPage = signal(1);
+    this.internalPageSizeOverride = signal(null);
+    this.internalSortOverride = signal(null);
+    this.internalFilters = signal({});
+    this.internalVisibleColumnsOverride = signal(null);
+    this.internalSelectedRows = signal(/* @__PURE__ */ new Set());
+    this.columnWidthOverrides = signal({});
+    this.pinnedOverrides = signal({});
+    // Server-side state
+    this.serverItems = signal([]);
+    this.serverTotalCount = signal(0);
+    this.serverLoading = signal(true);
+    this.fetchAbortController = null;
+    this.filterAbortController = null;
+    this.refreshCounter = signal(0);
+    this.firstDataRendered = signal(false);
+    // Side bar state
+    this.sideBarActivePanel = signal(null);
+    // Filter options state
+    this.serverFilterOptions = signal({});
+    this.loadingFilterOptions = signal({});
+    // --- Derived computed signals ---
+    this.columns = computed(() => flattenColumns(this.columnsProp()));
+    this.isServerSide = computed(() => this.dataSource() != null);
+    this.isClientSide = computed(() => !this.isServerSide());
+    this.displayData = computed(() => this.data() ?? this.internalData());
+    this.displayLoading = computed(() => this.controlledLoading() ?? this.internalLoading());
+    this.defaultSortField = computed(() => this.defaultSortBy() ?? this.columns()[0]?.columnId ?? "");
+    this.page = computed(() => this.controlledPage() ?? this.internalPage());
+    this.pageSize = computed(() => this.controlledPageSize() ?? this.internalPageSizeOverride() ?? this.defaultPageSize());
+    this.sort = computed(() => this.controlledSort() ?? this.internalSortOverride() ?? {
+      field: this.defaultSortField(),
+      direction: this.defaultSortDirection()
+    });
+    this.filters = computed(() => this.controlledFilters() ?? this.internalFilters());
+    this.visibleColumns = computed(() => {
+      const controlled = this.controlledVisibleColumns();
+      if (controlled) return controlled;
+      const override = this.internalVisibleColumnsOverride();
+      if (override) return override;
+      const cols = this.columns();
+      if (cols.length === 0) return /* @__PURE__ */ new Set();
+      const visible = cols.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
+      return new Set(visible.length > 0 ? visible : cols.map((c) => c.columnId));
+    });
+    this.effectiveSelectedRows = computed(() => this.selectedRows() ?? this.internalSelectedRows());
+    this.columnChooserPlacement = computed(() => {
+      const prop = this.columnChooserProp();
+      return prop === false ? "none" : prop === "sidebar" ? "sidebar" : "toolbar";
+    });
+    this.multiSelectFilterFields = computed(() => getMultiSelectFilterFields(this.columns()));
+    this.hasServerFilterOptions = computed(() => this.dataSource()?.fetchFilterOptions != null);
+    this.clientFilterOptions = computed(() => {
+      if (this.hasServerFilterOptions()) return this.serverFilterOptions();
+      return deriveFilterOptionsFromData(this.displayData(), this.columns());
+    });
+    this.clientItemsAndTotal = computed(() => {
+      if (!this.isClientSide()) return null;
+      const rows = processClientSideData(
+        this.displayData(),
+        this.columns(),
+        this.filters(),
+        this.sort().field,
+        this.sort().direction
+      );
+      const total = rows.length;
+      const start = (this.page() - 1) * this.pageSize();
+      const paged = rows.slice(start, start + this.pageSize());
+      return { items: paged, totalCount: total };
+    });
+    this.displayItems = computed(() => {
+      const cit = this.clientItemsAndTotal();
+      return this.isClientSide() && cit ? cit.items : this.serverItems();
+    });
+    this.displayTotalCount = computed(() => {
+      const cit = this.clientItemsAndTotal();
+      return this.isClientSide() && cit ? cit.totalCount : this.serverTotalCount();
+    });
+    this.hasActiveFilters = computed(() => {
+      return Object.values(this.filters()).some((v) => v !== void 0);
+    });
+    this.columnChooserColumns = computed(
+      () => this.columns().map((c) => ({
+        columnId: c.columnId,
+        name: c.name,
+        required: c.required === true
+      }))
+    );
+    this.statusBarConfig = computed(() => {
+      const sb = this.statusBar();
+      if (!sb) return void 0;
+      if (typeof sb === "object") return sb;
+      const totalData = this.isClientSide() ? this.data()?.length ?? 0 : this.serverTotalCount();
+      const filteredData = this.displayTotalCount();
+      return {
+        totalCount: totalData,
+        filteredCount: this.hasActiveFilters() ? filteredData : void 0,
+        selectedCount: this.effectiveSelectedRows().size,
+        suppressRowCount: true
+      };
+    });
+    this.isLoadingResolved = computed(() => {
+      return this.isServerSide() && this.serverLoading() || this.displayLoading();
+    });
+    // Side bar
+    this.sideBarEnabled = computed(() => {
+      const config = this.sideBarConfig();
+      return config != null && config !== false;
+    });
+    this.sideBarParsed = computed(() => {
+      const config = this.sideBarConfig();
+      if (!this.sideBarEnabled() || config === true) {
+        return { panels: DEFAULT_PANELS, position: "right", defaultPanel: null };
+      }
+      const def = config;
+      return {
+        panels: def.panels ?? DEFAULT_PANELS,
+        position: def.position ?? "right",
+        defaultPanel: def.defaultPanel ?? null
+      };
+    });
+    this.filterableColumns = computed(
+      () => this.columns().filter((c) => c.filterable && c.filterable.type).map((c) => ({
+        columnId: c.columnId,
+        name: c.name,
+        filterField: c.filterable?.filterField ?? c.columnId,
+        filterType: c.filterable?.type
+      }))
+    );
+    this.sideBarState = computed(() => ({
+      isEnabled: this.sideBarEnabled(),
+      activePanel: this.sideBarActivePanel(),
+      setActivePanel: (panel) => this.sideBarActivePanel.set(panel),
+      panels: this.sideBarParsed().panels,
+      position: this.sideBarParsed().position,
+      isOpen: this.sideBarActivePanel() !== null,
+      toggle: (panel) => this.sideBarActivePanel.update((p) => p === panel ? null : panel),
+      close: () => this.sideBarActivePanel.set(null)
+    }));
+    // --- Pre-computed stable callback references for dataGridProps ---
+    // These avoid recreating arrow functions on every dataGridProps recomputation.
+    this.handleSortFn = (columnKey, direction) => this.handleSort(columnKey, direction);
+    this.handleColumnResizedFn = (columnId, width) => this.handleColumnResized(columnId, width);
+    this.handleColumnPinnedFn = (columnId, pinned) => this.handleColumnPinned(columnId, pinned);
+    this.handleSelectionChangeFn = (event) => this.handleSelectionChange(event);
+    this.handleFilterChangeFn = (key, value) => this.handleFilterChange(key, value);
+    this.clearAllFiltersFn = () => this.setFilters({});
+    this.setPageFn = (p) => this.setPage(p);
+    this.setPageSizeFn = (size) => this.setPageSize(size);
+    this.handleVisibilityChangeFn = (columnKey, isVisible) => this.handleVisibilityChange(columnKey, isVisible);
+    // --- Data grid props computed ---
+    this.dataGridProps = computed(() => ({
+      items: this.displayItems(),
+      columns: this.columnsProp(),
+      getRowId: this.getRowId(),
+      sortBy: this.sort().field,
+      sortDirection: this.sort().direction,
+      onColumnSort: this.handleSortFn,
+      visibleColumns: this.visibleColumns(),
+      columnOrder: this.columnOrder(),
+      onColumnOrderChange: this.onColumnOrderChange(),
+      onColumnResized: this.handleColumnResizedFn,
+      onAutosizeColumn: this.onAutosizeColumn(),
+      onColumnPinned: this.handleColumnPinnedFn,
+      pinnedColumns: this.pinnedOverrides(),
+      initialColumnWidths: this.columnWidthOverrides(),
+      editable: this.editable(),
+      cellSelection: this.cellSelection(),
+      density: this.density(),
+      rowHeight: this.rowHeight(),
+      onCellValueChanged: this.onCellValueChanged(),
+      onUndo: this.onUndo(),
+      onRedo: this.onRedo(),
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo(),
+      rowSelection: this.rowSelection(),
+      selectedRows: this.effectiveSelectedRows(),
+      onSelectionChange: this.handleSelectionChangeFn,
+      statusBar: this.statusBarConfig(),
+      isLoading: this.isLoadingResolved(),
+      filters: this.filters(),
+      onFilterChange: this.handleFilterChangeFn,
+      filterOptions: this.clientFilterOptions(),
+      loadingFilterOptions: this.dataSource()?.fetchFilterOptions ? this.loadingFilterOptions() : EMPTY_LOADING_OPTIONS,
+      peopleSearch: this.dataSource()?.searchPeople?.bind(this.dataSource()),
+      getUserByEmail: this.dataSource()?.getUserByEmail?.bind(this.dataSource()),
+      layoutMode: this.layoutMode(),
+      suppressHorizontalScroll: this.suppressHorizontalScroll(),
+      stickyHeader: this.stickyHeader(),
+      columnReorder: this.columnReorder(),
+      virtualScroll: this.virtualScroll(),
+      "aria-label": this.ariaLabel(),
+      "aria-labelledby": this.ariaLabelledBy(),
+      emptyState: {
+        hasActiveFilters: this.hasActiveFilters(),
+        onClearAll: this.clearAllFiltersFn,
+        message: this.emptyState()?.message,
+        render: this.emptyState()?.render
+      }
+    }));
+    this.pagination = computed(() => ({
+      page: this.page(),
+      pageSize: this.pageSize(),
+      displayTotalCount: this.displayTotalCount(),
+      setPage: this.setPageFn,
+      setPageSize: this.setPageSizeFn,
+      pageSizeOptions: this.pageSizeOptions(),
+      entityLabelPlural: this.entityLabelPlural()
+    }));
+    this.columnChooser = computed(() => ({
+      columns: this.columnChooserColumns(),
+      visibleColumns: this.visibleColumns(),
+      onVisibilityChange: this.handleVisibilityChangeFn,
+      placement: this.columnChooserPlacement()
+    }));
+    this.filtersResult = computed(() => ({
+      hasActiveFilters: this.hasActiveFilters(),
+      setFilters: (f) => this.setFilters(f)
+    }));
+    this.sideBarProps = computed(() => {
+      const state = this.sideBarState();
+      if (!state.isEnabled) return null;
+      return {
+        activePanel: state.activePanel,
+        onPanelChange: state.setActivePanel,
+        panels: state.panels,
+        position: state.position,
+        columns: this.columnChooserColumns(),
+        visibleColumns: this.visibleColumns(),
+        onVisibilityChange: (columnKey, visible) => this.handleVisibilityChange(columnKey, visible),
+        onSetVisibleColumns: (cols) => this.setVisibleColumns(cols),
+        filterableColumns: this.filterableColumns(),
+        filters: this.filters(),
+        onFilterChange: (key, value) => this.handleFilterChange(key, value),
+        filterOptions: this.clientFilterOptions()
+      };
+    });
+    let columnsValidated = false;
+    effect(() => {
+      const cols = this.columns();
+      if (!columnsValidated && cols.length > 0) {
+        columnsValidated = true;
+        validateColumns(cols);
+      }
+    });
+    effect((onCleanup) => {
+      const ds = this.dataSource();
+      if (!this.isServerSide() || !ds) {
+        if (!this.isServerSide()) this.serverLoading.set(false);
+        return;
+      }
+      const page = this.page();
+      const pageSize = this.pageSize();
+      const sort = this.sort();
+      const filters = this.filters();
+      this.refreshCounter();
+      const controller = new AbortController();
+      this.fetchAbortController = controller;
+      this.serverLoading.set(true);
+      ds.fetchPage({ page, pageSize, sort: { field: sort.field, direction: sort.direction }, filters }).then((res) => {
+        if (controller.signal.aborted) return;
+        this.serverItems.set(res.items);
+        this.serverTotalCount.set(res.totalCount);
+      }).catch((err) => {
+        if (controller.signal.aborted) return;
+        this.onError()?.(err);
+        this.serverItems.set([]);
+        this.serverTotalCount.set(0);
+      }).finally(() => {
+        if (!controller.signal.aborted) this.serverLoading.set(false);
+      });
+      onCleanup(() => {
+        controller.abort();
+      });
+    });
+    let rowIdsValidated = false;
+    effect(() => {
+      const items = this.displayItems();
+      if (!this.firstDataRendered() && items.length > 0) {
+        this.firstDataRendered.set(true);
+        this.onFirstDataRendered()?.();
+      }
+      if (!rowIdsValidated && items.length > 0) {
+        rowIdsValidated = true;
+        validateRowIds(items, this.getRowId());
+      }
+    });
+    effect((onCleanup) => {
+      const ds = this.dataSource();
+      const fields = this.multiSelectFilterFields();
+      const fetcher = ds && "fetchFilterOptions" in ds && typeof ds.fetchFilterOptions === "function" ? ds.fetchFilterOptions.bind(ds) : void 0;
+      if (!fetcher || fields.length === 0) {
+        this.serverFilterOptions.set({});
+        this.loadingFilterOptions.set({});
+        return;
+      }
+      const controller = new AbortController();
+      this.filterAbortController = controller;
+      const loading = {};
+      fields.forEach((f) => {
+        loading[f] = true;
+      });
+      this.loadingFilterOptions.set(loading);
+      const results = {};
+      Promise.all(
+        fields.map(async (field) => {
+          try {
+            results[field] = await fetcher(field);
+          } catch {
+            results[field] = [];
+          }
+        })
+      ).then(() => {
+        if (controller.signal.aborted) return;
+        this.serverFilterOptions.set(results);
+        this.loadingFilterOptions.set({});
+      });
+      onCleanup(() => {
+        controller.abort();
+      });
+    });
+    effect(() => {
+      const parsed = this.sideBarParsed();
+      if (parsed.defaultPanel) {
+        this.sideBarActivePanel.set(parsed.defaultPanel);
+      }
+    });
+    this.destroyRef.onDestroy(() => {
+      this.fetchAbortController?.abort();
+      this.filterAbortController?.abort();
+      this.fetchAbortController = null;
+      this.filterAbortController = null;
+      this.onPageChange.set(void 0);
+      this.onPageSizeChange.set(void 0);
+      this.onSortChange.set(void 0);
+      this.onFiltersChange.set(void 0);
+      this.onVisibleColumnsChange.set(void 0);
+      this.onColumnOrderChange.set(void 0);
+      this.onColumnResized.set(void 0);
+      this.onAutosizeColumn.set(void 0);
+      this.onColumnPinned.set(void 0);
+      this.onCellValueChanged.set(void 0);
+      this.onSelectionChange.set(void 0);
+      this.onFirstDataRendered.set(void 0);
+      this.onError.set(void 0);
+      this.onUndo.set(void 0);
+      this.onRedo.set(void 0);
+    });
+  }
+  // --- Setters ---
+  setPage(p) {
+    if (this.controlledPage() === void 0) this.internalPage.set(p);
+    this.onPageChange()?.(p);
+  }
+  setPageSize(size) {
+    if (this.controlledPageSize() === void 0) this.internalPageSizeOverride.set(size);
+    this.onPageSizeChange()?.(size);
+    this.setPage(1);
+  }
+  setSort(s) {
+    if (this.controlledSort() === void 0) this.internalSortOverride.set(s);
+    this.onSortChange()?.(s);
+    this.setPage(1);
+  }
+  setFilters(f) {
+    if (this.controlledFilters() === void 0) this.internalFilters.set(f);
+    this.onFiltersChange()?.(f);
+    this.setPage(1);
+  }
+  setVisibleColumns(cols) {
+    if (this.controlledVisibleColumns() === void 0) this.internalVisibleColumnsOverride.set(cols);
+    this.onVisibleColumnsChange()?.(cols);
+  }
+  handleSort(columnKey, direction) {
+    this.setSort(computeNextSortState(this.sort(), columnKey, direction));
+  }
+  handleFilterChange(key, value) {
+    this.setFilters(mergeFilter(this.filters(), key, value));
+  }
+  handleVisibilityChange(columnKey, isVisible) {
+    const next = new Set(this.visibleColumns());
+    if (isVisible) next.add(columnKey);
+    else next.delete(columnKey);
+    this.setVisibleColumns(next);
+  }
+  handleSelectionChange(event) {
+    if (this.selectedRows() === void 0) {
+      this.internalSelectedRows.set(new Set(event.selectedRowIds));
+    }
+    this.onSelectionChange()?.(event);
+  }
+  handleColumnResized(columnId, width) {
+    this.columnWidthOverrides.update((prev) => ({ ...prev, [columnId]: width }));
+    this.onColumnResized()?.(columnId, width);
+  }
+  handleColumnPinned(columnId, pinned) {
+    this.pinnedOverrides.update((prev) => {
+      if (pinned === null) {
+        const { [columnId]: _removed, ...rest } = prev;
+        return rest;
+      }
+      return { ...prev, [columnId]: pinned };
+    });
+    this.onColumnPinned()?.(columnId, pinned);
+  }
+  // --- Configure from props ---
+  configure(props) {
+    this.columnsProp.set(props.columns);
+    this.getRowId.set(props.getRowId);
+    if ("data" in props && props.data !== void 0) this.data.set(props.data);
+    if ("dataSource" in props && props.dataSource !== void 0) this.dataSource.set(props.dataSource);
+    if (props.page !== void 0) this.controlledPage.set(props.page);
+    if (props.pageSize !== void 0) this.controlledPageSize.set(props.pageSize);
+    if (props.sort !== void 0) this.controlledSort.set(props.sort);
+    if (props.filters !== void 0) this.controlledFilters.set(props.filters);
+    if (props.visibleColumns !== void 0) this.controlledVisibleColumns.set(props.visibleColumns);
+    if (props.isLoading !== void 0) this.controlledLoading.set(props.isLoading);
+    if (props.onPageChange) this.onPageChange.set(props.onPageChange);
+    if (props.onPageSizeChange) this.onPageSizeChange.set(props.onPageSizeChange);
+    if (props.onSortChange) this.onSortChange.set(props.onSortChange);
+    if (props.onFiltersChange) this.onFiltersChange.set(props.onFiltersChange);
+    if (props.onVisibleColumnsChange) this.onVisibleColumnsChange.set(props.onVisibleColumnsChange);
+    if (props.columnOrder !== void 0) this.columnOrder.set(props.columnOrder);
+    if (props.onColumnOrderChange) this.onColumnOrderChange.set(props.onColumnOrderChange);
+    if (props.onColumnResized) this.onColumnResized.set(props.onColumnResized);
+    if (props.onAutosizeColumn) this.onAutosizeColumn.set(props.onAutosizeColumn);
+    if (props.onColumnPinned) this.onColumnPinned.set(props.onColumnPinned);
+    if (props.defaultPageSize !== void 0) this.defaultPageSize.set(props.defaultPageSize);
+    if (props.defaultSortBy !== void 0) this.defaultSortBy.set(props.defaultSortBy);
+    if (props.defaultSortDirection !== void 0) this.defaultSortDirection.set(props.defaultSortDirection);
+    if (props.editable !== void 0) this.editable.set(props.editable);
+    if (props.cellSelection !== void 0) this.cellSelection.set(props.cellSelection);
+    if (props.density !== void 0) this.density.set(props.density);
+    if (props.rowHeight !== void 0) this.rowHeight.set(props.rowHeight);
+    if (props.onCellValueChanged) this.onCellValueChanged.set(props.onCellValueChanged);
+    if (props.onUndo) this.onUndo.set(props.onUndo);
+    if (props.onRedo) this.onRedo.set(props.onRedo);
+    if (props.canUndo !== void 0) this.canUndo.set(props.canUndo);
+    if (props.canRedo !== void 0) this.canRedo.set(props.canRedo);
+    if (props.rowSelection !== void 0) this.rowSelection.set(props.rowSelection);
+    if (props.selectedRows !== void 0) this.selectedRows.set(props.selectedRows);
+    if (props.onSelectionChange) this.onSelectionChange.set(props.onSelectionChange);
+    if (props.statusBar !== void 0) this.statusBar.set(props.statusBar);
+    if (props.pageSizeOptions !== void 0) this.pageSizeOptions.set(props.pageSizeOptions);
+    if (props.sideBar !== void 0) this.sideBarConfig.set(props.sideBar);
+    if (props.onFirstDataRendered) this.onFirstDataRendered.set(props.onFirstDataRendered);
+    if (props.onError) this.onError.set(props.onError);
+    if (props.columnChooser !== void 0) this.columnChooserProp.set(props.columnChooser);
+    if (props.columnReorder !== void 0) this.columnReorder.set(props.columnReorder);
+    if (props.virtualScroll !== void 0) this.virtualScroll.set(props.virtualScroll);
+    if (props.entityLabelPlural !== void 0) this.entityLabelPlural.set(props.entityLabelPlural);
+    if (props.className !== void 0) this.className.set(props.className);
+    if (props.layoutMode !== void 0) this.layoutMode.set(props.layoutMode);
+    if (props.suppressHorizontalScroll !== void 0) this.suppressHorizontalScroll.set(props.suppressHorizontalScroll);
+    if (props.stickyHeader !== void 0) this.stickyHeader.set(props.stickyHeader);
+    if (props.fullScreen !== void 0) this.fullScreen.set(props.fullScreen);
+    if (props["aria-label"] !== void 0) this.ariaLabel.set(props["aria-label"]);
+    if (props["aria-labelledby"] !== void 0) this.ariaLabelledBy.set(props["aria-labelledby"]);
+  }
+  // --- API ---
+  // --- Column Pinning Methods ---
+  /**
+   * Pin a column to the left or right edge.
+   */
+  pinColumn(columnId, side) {
+    this.pinnedOverrides.update((prev) => ({ ...prev, [columnId]: side }));
+    this.onColumnPinned()?.(columnId, side);
+  }
+  /**
+   * Unpin a column (remove sticky positioning).
+   */
+  unpinColumn(columnId) {
+    this.pinnedOverrides.update((prev) => {
+      const { [columnId]: _, ...next } = prev;
+      return next;
+    });
+    this.onColumnPinned()?.(columnId, null);
+  }
+  /**
+   * Check if a column is pinned and which side.
+   */
+  isPinned(columnId) {
+    return this.pinnedOverrides()[columnId];
+  }
+  /**
+   * Compute sticky left offsets for left-pinned columns.
+   * Returns a map of columnId -> left offset in pixels.
+   */
+  computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) {
+    const offsets = {};
+    const pinned = this.pinnedOverrides();
+    let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+    for (const col of visibleCols) {
+      if (pinned[col.columnId] === "left") {
+        offsets[col.columnId] = left;
+        left += columnWidths[col.columnId] ?? defaultWidth;
+      }
+    }
+    return offsets;
+  }
+  /**
+   * Compute sticky right offsets for right-pinned columns.
+   * Returns a map of columnId -> right offset in pixels.
+   */
+  computeRightOffsets(visibleCols, columnWidths, defaultWidth) {
+    const offsets = {};
+    const pinned = this.pinnedOverrides();
+    let right = 0;
+    for (let i = visibleCols.length - 1; i >= 0; i--) {
+      const col = visibleCols[i];
+      if (pinned[col.columnId] === "right") {
+        offsets[col.columnId] = right;
+        right += columnWidths[col.columnId] ?? defaultWidth;
+      }
+    }
+    return offsets;
+  }
+  getApi() {
+    return {
+      setRowData: (d) => {
+        if (!this.isServerSide()) this.internalData.set(d);
+      },
+      setLoading: (loading) => this.internalLoading.set(loading),
+      getColumnState: () => ({
+        visibleColumns: Array.from(this.visibleColumns()),
+        sort: this.sort(),
+        columnOrder: this.columnOrder() ?? void 0,
+        columnWidths: Object.keys(this.columnWidthOverrides()).length > 0 ? this.columnWidthOverrides() : void 0,
+        filters: Object.keys(this.filters()).length > 0 ? this.filters() : void 0,
+        pinnedColumns: Object.keys(this.pinnedOverrides()).length > 0 ? this.pinnedOverrides() : void 0
+      }),
+      applyColumnState: (state) => {
+        if (state.visibleColumns) this.setVisibleColumns(new Set(state.visibleColumns));
+        if (state.sort) this.setSort(state.sort);
+        if (state.columnOrder) this.onColumnOrderChange()?.(state.columnOrder);
+        if (state.columnWidths) this.columnWidthOverrides.set(state.columnWidths);
+        if (state.filters) this.setFilters(state.filters);
+        if (state.pinnedColumns) this.pinnedOverrides.set(state.pinnedColumns);
+      },
+      setFilterModel: (filters) => this.setFilters(filters),
+      getSelectedRows: () => Array.from(this.effectiveSelectedRows()),
+      setSelectedRows: (rowIds) => {
+        if (this.selectedRows() === void 0) this.internalSelectedRows.set(new Set(rowIds));
+      },
+      selectAll: () => {
+        const allIds = new Set(this.displayItems().map((item) => this.getRowId()(item)));
+        if (this.selectedRows() === void 0) this.internalSelectedRows.set(allIds);
+        this.onSelectionChange()?.({
+          selectedRowIds: Array.from(allIds),
+          selectedItems: this.displayItems()
+        });
+      },
+      deselectAll: () => {
+        if (this.selectedRows() === void 0) this.internalSelectedRows.set(/* @__PURE__ */ new Set());
+        this.onSelectionChange()?.({ selectedRowIds: [], selectedItems: [] });
+      },
+      clearFilters: () => this.setFilters({}),
+      clearSort: () => this.setSort({ field: this.defaultSortField(), direction: this.defaultSortDirection() }),
+      resetGridState: (options) => {
+        this.setFilters({});
+        this.setSort({ field: this.defaultSortField(), direction: this.defaultSortDirection() });
+        if (!options?.keepSelection) {
+          if (this.selectedRows() === void 0) this.internalSelectedRows.set(/* @__PURE__ */ new Set());
+          this.onSelectionChange()?.({ selectedRowIds: [], selectedItems: [] });
+        }
+      },
+      getDisplayedRows: () => this.displayItems(),
+      refreshData: () => {
+        if (this.isServerSide()) {
+          this.refreshCounter.update((c) => c + 1);
+        }
+      },
+      getColumnOrder: () => this.columnOrder() ?? this.columns().map((c) => c.columnId),
+      setColumnOrder: (order) => {
+        this.onColumnOrderChange()?.(order);
+      },
+      scrollToRow: (_index, _options) => {
+      }
+    };
+  }
+};
+OGridService = __decorateClass([
+  Injectable()
+], OGridService);
+var DataGridLayoutHelper = class {
+  constructor(props, wrapperEl, ngZone) {
+    // --- Internal state ---
+    this.containerWidthSig = signal(0);
+    this.columnSizingOverridesSig = signal({});
+    // ResizeObserver
+    this.resizeObserver = null;
+    this.props = props;
+    this.wrapperEl = wrapperEl;
+    this.initialColumnWidthsSig = computed(() => this.props()?.initialColumnWidths);
+    this.flatColumnsRaw = computed(() => {
+      const p = this.props();
+      if (!p) return [];
+      return flattenColumns(p.columns);
+    });
+    this.flatColumns = computed(() => {
+      const raw = this.flatColumnsRaw();
+      const p = this.props();
+      const pinnedColumns = p?.pinnedColumns;
+      if (!pinnedColumns || Object.keys(pinnedColumns).length === 0) return raw;
+      return raw.map((col) => {
+        const override = pinnedColumns[col.columnId];
+        if (override && col.pinned !== override) return { ...col, pinned: override };
+        return col;
+      });
+    });
+    this.visibleCols = computed(() => {
+      const p = this.props();
+      if (!p) return [];
+      const flatCols = this.flatColumns();
+      const filtered = p.visibleColumns ? flatCols.filter((c) => p.visibleColumns.has(c.columnId)) : flatCols;
+      const order = p.columnOrder;
+      if (!order?.length) return filtered;
+      const orderMap = /* @__PURE__ */ new Map();
+      for (let i = 0; i < order.length; i++) {
+        orderMap.set(order[i], i);
+      }
+      return [...filtered].sort((a, b) => {
+        const ia = orderMap.get(a.columnId) ?? -1;
+        const ib = orderMap.get(b.columnId) ?? -1;
+        if (ia === -1 && ib === -1) return 0;
+        if (ia === -1) return 1;
+        if (ib === -1) return -1;
+        return ia - ib;
+      });
+    });
+    this.visibleColumnCount = computed(() => this.visibleCols().length);
+    this.hasCheckboxCol = computed(() => (this.props()?.rowSelection ?? "none") === "multiple");
+    this.hasRowNumbersCol = computed(() => !!this.props()?.showRowNumbers);
+    this.specialColsCount = computed(() => (this.hasCheckboxCol() ? 1 : 0) + (this.hasRowNumbersCol() ? 1 : 0));
+    this.totalColCount = computed(() => this.visibleColumnCount() + this.specialColsCount());
+    this.colOffset = computed(() => this.specialColsCount());
+    this.rowIndexByRowId = computed(() => {
+      const p = this.props();
+      if (!p) return /* @__PURE__ */ new Map();
+      const m = /* @__PURE__ */ new Map();
+      p.items.forEach((item, idx) => m.set(p.getRowId(item), idx));
+      return m;
+    });
+    this.minTableWidth = computed(() => {
+      const checkboxW = this.hasCheckboxCol() ? CHECKBOX_COLUMN_WIDTH : 0;
+      return this.visibleCols().reduce(
+        (sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING,
+        checkboxW
+      );
+    });
+    this.desiredTableWidth = computed(() => {
+      const checkboxW = this.hasCheckboxCol() ? CHECKBOX_COLUMN_WIDTH : 0;
+      const overrides = this.columnSizingOverridesSig();
+      return this.visibleCols().reduce((sum, c) => {
+        const override = overrides[c.columnId];
+        const w = override ? override.widthPx : c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
+      }, checkboxW);
+    });
+    effect(() => {
+      const widths = this.initialColumnWidthsSig();
+      if (widths) {
+        const result = {};
+        for (const [id, width] of Object.entries(widths)) {
+          result[id] = { widthPx: width };
+        }
+        this.columnSizingOverridesSig.set(result);
+      }
+    });
+    effect(() => {
+      const el = this.wrapperEl();
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+      if (!el) return;
+      const measure = () => {
+        const rect = el.getBoundingClientRect();
+        const cs = window.getComputedStyle(el);
+        const borderX = (parseFloat(cs.borderLeftWidth || "0") || 0) + (parseFloat(cs.borderRightWidth || "0") || 0);
+        this.containerWidthSig.set(Math.max(0, rect.width - borderX));
+      };
+      ngZone.runOutsideAngular(() => {
+        this.resizeObserver = new ResizeObserver(measure);
+        this.resizeObserver.observe(el);
+      });
+      measure();
+    });
+    effect(() => {
+      const colIds = new Set(this.flatColumns().map((c) => c.columnId));
+      this.columnSizingOverridesSig.update((prev) => {
+        const next = {};
+        let changed = false;
+        for (const [id, value] of Object.entries(prev)) {
+          if (colIds.has(id)) {
+            next[id] = value;
+          } else {
+            changed = true;
+          }
+        }
+        return changed ? next : prev;
+      });
+    });
+  }
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+};
+var DataGridEditingHelper = class {
+  constructor(getVisibleCols, getItems, getWrappedOnCellValueChanged, setActiveCellFn) {
+    this.editingCellSig = signal(null);
+    this.pendingEditorValueSig = signal(void 0);
+    this.popoverAnchorElSig = signal(null);
+    this.getVisibleCols = getVisibleCols;
+    this.getItems = getItems;
+    this.getWrappedOnCellValueChanged = getWrappedOnCellValueChanged;
+    this.setActiveCellFn = setActiveCellFn;
+  }
+  setEditingCell(cell) {
+    this.editingCellSig.set(cell);
+  }
+  setPendingEditorValue(value) {
+    this.pendingEditorValueSig.set(value);
+  }
+  commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+    const col = this.getVisibleCols().find((c) => c.columnId === columnId);
+    if (col) {
+      const result = parseValue(newValue, oldValue, item, col);
+      if (!result.valid) {
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(void 0);
+        return;
+      }
+      newValue = result.value;
+    }
+    const onCellValueChanged = this.getWrappedOnCellValueChanged();
+    onCellValueChanged?.({ item, columnId, oldValue, newValue, rowIndex });
+    this.editingCellSig.set(null);
+    this.popoverAnchorElSig.set(null);
+    this.pendingEditorValueSig.set(void 0);
+    const items = this.getItems();
+    if (rowIndex < items.length - 1) {
+      this.setActiveCellFn({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+    }
+  }
+  cancelPopoverEdit() {
+    this.editingCellSig.set(null);
+    this.popoverAnchorElSig.set(null);
+    this.pendingEditorValueSig.set(void 0);
+  }
+};
+var DataGridInteractionHelper = class {
+  constructor() {
+    // --- Signals ---
+    this.activeCellSig = signal(null);
+    this.selectionRangeSig = signal(null);
+    this.isDraggingSig = signal(false);
+    this.contextMenuPositionSig = signal(null);
+    this.cutRangeSig = signal(null);
+    this.copyRangeSig = signal(null);
+    this.internalClipboard = null;
+    // Undo/redo
+    this.undoRedoStack = new UndoRedoStack(100);
+    this.undoLengthSig = signal(0);
+    this.redoLengthSig = signal(0);
+    this.canUndo = computed(() => this.undoLengthSig() > 0);
+    this.canRedo = computed(() => this.redoLengthSig() > 0);
+    this.hasCellSelection = computed(() => this.selectionRangeSig() != null || this.activeCellSig() != null);
+    // Fill handle state
+    this.fillDragStart = null;
+    this.fillRafId = 0;
+    this.fillMoveHandler = null;
+    this.fillUpHandler = null;
+    // Drag selection refs
+    this.dragStartPos = null;
+    this.dragMoved = false;
+    this.isDraggingRef = false;
+    this.liveDragRange = null;
+    this.rafId = 0;
+    this.lastMousePos = null;
+    this.autoScrollInterval = null;
+  }
+  setActiveCell(cell) {
+    const prev = this.activeCellSig();
+    if (prev === cell) return;
+    if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex) return;
+    this.activeCellSig.set(cell);
+  }
+  setSelectionRange(range) {
+    const prev = this.selectionRangeSig();
+    if (rangesEqual(prev, range)) return;
+    this.selectionRangeSig.set(range);
+  }
+  // --- Context menu ---
+  setContextMenuPosition(pos) {
+    this.contextMenuPositionSig.set(pos);
+  }
+  handleCellContextMenu(e) {
+    e.preventDefault?.();
+    this.contextMenuPositionSig.set({ x: e.clientX, y: e.clientY });
+  }
+  closeContextMenu() {
+    this.contextMenuPositionSig.set(null);
+  }
+  // --- Clipboard ---
+  handleCopy(items, visibleCols, colOffset) {
+    const range = this.getEffectiveRange(colOffset);
+    if (range == null) return;
+    const norm = normalizeSelectionRange(range);
+    const tsv = formatSelectionAsTsv(items, visibleCols, norm);
+    this.internalClipboard = tsv;
+    this.copyRangeSig.set(norm);
+    void navigator.clipboard.writeText(tsv).catch(() => {
+    });
+  }
+  handleCut(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged) {
+    if (editable === false) return;
+    const range = this.getEffectiveRange(colOffset);
+    if (range == null || !wrappedOnCellValueChanged) return;
+    const norm = normalizeSelectionRange(range);
+    this.cutRangeSig.set(norm);
+    this.copyRangeSig.set(null);
+    this.handleCopy(items, visibleCols, colOffset);
+    this.copyRangeSig.set(null);
+  }
+  async handlePaste(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged) {
+    if (editable === false) return;
+    if (!wrappedOnCellValueChanged) return;
+    let text;
+    try {
+      text = await navigator.clipboard.readText();
+    } catch {
+      text = "";
+    }
+    if (!text.trim() && this.internalClipboard != null) {
+      text = this.internalClipboard;
+    }
+    if (!text.trim()) return;
+    const norm = this.getEffectiveRange(colOffset);
+    const anchorRow = norm ? norm.startRow : 0;
+    const anchorCol = norm ? norm.startCol : 0;
+    const parsedRows = parseTsvClipboard(text);
+    this.beginBatch();
+    for (let r = 0; r < parsedRows.length; r++) {
+      const cells = parsedRows[r];
+      for (let c = 0; c < cells.length; c++) {
+        const targetRow = anchorRow + r;
+        const targetCol = anchorCol + c;
+        if (targetRow >= items.length || targetCol >= visibleCols.length) continue;
+        const item = items[targetRow];
+        const col = visibleCols[targetCol];
+        const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
+        if (!colEditable) continue;
+        const rawValue = cells[c] ?? "";
+        const oldValue = getCellValue(item, col);
+        const result = parseValue(rawValue, oldValue, item, col);
+        if (!result.valid) continue;
+        wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: targetRow });
+      }
+    }
+    const cutRange = this.cutRangeSig();
+    if (cutRange) {
+      for (let r = cutRange.startRow; r <= cutRange.endRow; r++) {
+        for (let c = cutRange.startCol; c <= cutRange.endCol; c++) {
+          if (r >= items.length || c >= visibleCols.length) continue;
+          const item = items[r];
+          const col = visibleCols[c];
+          const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
+          if (!colEditable) continue;
+          const oldValue = getCellValue(item, col);
+          const result = parseValue("", oldValue, item, col);
+          if (!result.valid) continue;
+          wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
+        }
+      }
+      this.cutRangeSig.set(null);
+    }
+    this.endBatch();
+    this.copyRangeSig.set(null);
+  }
+  clearClipboardRanges() {
+    this.copyRangeSig.set(null);
+    this.cutRangeSig.set(null);
+  }
+  // --- Undo/Redo ---
+  beginBatch() {
+    this.undoRedoStack.beginBatch();
+  }
+  endBatch() {
+    this.undoRedoStack.endBatch();
+    this.undoLengthSig.set(this.undoRedoStack.historyLength);
+    this.redoLengthSig.set(this.undoRedoStack.redoLength);
+  }
+  undo(originalOnCellValueChanged) {
+    if (!originalOnCellValueChanged) return;
+    const lastBatch = this.undoRedoStack.undo();
+    if (!lastBatch) return;
+    this.undoLengthSig.set(this.undoRedoStack.historyLength);
+    this.redoLengthSig.set(this.undoRedoStack.redoLength);
+    for (let i = lastBatch.length - 1; i >= 0; i--) {
+      const ev = lastBatch[i];
+      originalOnCellValueChanged({ ...ev, oldValue: ev.newValue, newValue: ev.oldValue });
+    }
+  }
+  redo(originalOnCellValueChanged) {
+    if (!originalOnCellValueChanged) return;
+    const nextBatch = this.undoRedoStack.redo();
+    if (!nextBatch) return;
+    this.undoLengthSig.set(this.undoRedoStack.historyLength);
+    this.redoLengthSig.set(this.undoRedoStack.redoLength);
+    for (const ev of nextBatch) {
+      originalOnCellValueChanged(ev);
+    }
+  }
+  // --- Cell selection / mouse handling ---
+  handleCellMouseDown(e, rowIndex, globalColIndex, colOffset, wrapperEl) {
+    if (e.button !== 0) return;
+    wrapperEl?.focus({ preventScroll: true });
+    this.clearClipboardRanges();
+    if (globalColIndex < colOffset) return;
+    e.preventDefault();
+    const dataColIndex = globalColIndex - colOffset;
+    const currentRange = this.selectionRangeSig();
+    if (e.shiftKey && currentRange != null) {
+      this.setSelectionRange(
+        normalizeSelectionRange({
+          startRow: currentRange.startRow,
+          startCol: currentRange.startCol,
+          endRow: rowIndex,
+          endCol: dataColIndex
+        })
+      );
+      this.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+    } else {
+      this.dragStartPos = { row: rowIndex, col: dataColIndex };
+      this.dragMoved = false;
+      const initial = {
+        startRow: rowIndex,
+        startCol: dataColIndex,
+        endRow: rowIndex,
+        endCol: dataColIndex
+      };
+      this.setSelectionRange(initial);
+      this.liveDragRange = initial;
+      this.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+      this.isDraggingRef = true;
+    }
+  }
+  handleSelectAllCells(rowCount, visibleColCount, colOffset) {
+    if (rowCount === 0 || visibleColCount === 0) return;
+    this.setSelectionRange({
+      startRow: 0,
+      startCol: 0,
+      endRow: rowCount - 1,
+      endCol: visibleColCount - 1
+    });
+    this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+  }
+  // --- Fill handle ---
+  handleFillHandleMouseDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const range = this.selectionRangeSig();
+    if (!range) return;
+    this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
+  }
+  // --- Keyboard navigation ---
+  handleGridKeyDown(e, items, getRowId, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, editable, wrappedOnCellValueChanged, originalOnCellValueChanged, rowSelection, selectedRowIds, wrapperEl, handleRowCheckboxChange, editingCell, setEditingCell) {
+    const activeCell = this.activeCellSig();
+    const selectionRange = this.selectionRangeSig();
+    const maxRowIndex = items.length - 1;
+    const maxColIndex = visibleColumnCount - 1 + colOffset;
+    if (items.length === 0) return;
+    if (activeCell === null) {
+      if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"].includes(e.key)) {
+        this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+        e.preventDefault();
+      }
+      return;
+    }
+    const { rowIndex, columnIndex } = activeCell;
+    const dataColIndex = columnIndex - colOffset;
+    const shift = e.shiftKey;
+    const ctrl = e.ctrlKey || e.metaKey;
+    const isEmptyAt = (r, c) => {
+      if (r < 0 || r >= items.length || c < 0 || c >= visibleCols.length) return true;
+      const v = getCellValue(items[r], visibleCols[c]);
+      return v == null || v === "";
+    };
+    const findCtrlTarget = findCtrlArrowTarget;
+    switch (e.key) {
+      case "c":
+        if (ctrl) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          this.handleCopy(items, visibleCols, colOffset);
+        }
+        break;
+      case "x":
+        if (ctrl) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          this.handleCut(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged);
+        }
+        break;
+      case "v":
+        if (ctrl) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          void this.handlePaste(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged);
+        }
+        break;
+      case "ArrowDown": {
+        e.preventDefault();
+        const newRow = ctrl ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex))) : Math.min(rowIndex + 1, maxRowIndex);
+        if (shift) {
+          this.setSelectionRange(normalizeSelectionRange({
+            startRow: selectionRange?.startRow ?? rowIndex,
+            startCol: selectionRange?.startCol ?? dataColIndex,
+            endRow: newRow,
+            endCol: selectionRange?.endCol ?? dataColIndex
+          }));
+        } else {
+          this.setSelectionRange({ startRow: newRow, startCol: dataColIndex, endRow: newRow, endCol: dataColIndex });
+        }
+        this.setActiveCell({ rowIndex: newRow, columnIndex });
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const newRowUp = ctrl ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex))) : Math.max(rowIndex - 1, 0);
+        if (shift) {
+          this.setSelectionRange(normalizeSelectionRange({
+            startRow: selectionRange?.startRow ?? rowIndex,
+            startCol: selectionRange?.startCol ?? dataColIndex,
+            endRow: newRowUp,
+            endCol: selectionRange?.endCol ?? dataColIndex
+          }));
+        } else {
+          this.setSelectionRange({ startRow: newRowUp, startCol: dataColIndex, endRow: newRowUp, endCol: dataColIndex });
+        }
+        this.setActiveCell({ rowIndex: newRowUp, columnIndex });
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        let newCol;
+        if (ctrl && dataColIndex >= 0) {
+          newCol = findCtrlTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+        } else {
+          newCol = Math.min(columnIndex + 1, maxColIndex);
+        }
+        const newDataCol = newCol - colOffset;
+        if (shift) {
+          this.setSelectionRange(normalizeSelectionRange({
+            startRow: selectionRange?.startRow ?? rowIndex,
+            startCol: selectionRange?.startCol ?? dataColIndex,
+            endRow: selectionRange?.endRow ?? rowIndex,
+            endCol: newDataCol
+          }));
+        } else {
+          this.setSelectionRange({ startRow: rowIndex, startCol: newDataCol, endRow: rowIndex, endCol: newDataCol });
+        }
+        this.setActiveCell({ rowIndex, columnIndex: newCol });
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        let newColLeft;
+        if (ctrl && dataColIndex >= 0) {
+          newColLeft = findCtrlTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+        } else {
+          newColLeft = Math.max(columnIndex - 1, colOffset);
+        }
+        const newDataColLeft = newColLeft - colOffset;
+        if (shift) {
+          this.setSelectionRange(normalizeSelectionRange({
+            startRow: selectionRange?.startRow ?? rowIndex,
+            startCol: selectionRange?.startCol ?? dataColIndex,
+            endRow: selectionRange?.endRow ?? rowIndex,
+            endCol: newDataColLeft
+          }));
+        } else {
+          this.setSelectionRange({ startRow: rowIndex, startCol: newDataColLeft, endRow: rowIndex, endCol: newDataColLeft });
+        }
+        this.setActiveCell({ rowIndex, columnIndex: newColLeft });
+        break;
+      }
+      case "Tab": {
+        e.preventDefault();
+        const tabResult = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
+        const newDataColTab = tabResult.columnIndex - colOffset;
+        this.setSelectionRange({ startRow: tabResult.rowIndex, startCol: newDataColTab, endRow: tabResult.rowIndex, endCol: newDataColTab });
+        this.setActiveCell({ rowIndex: tabResult.rowIndex, columnIndex: tabResult.columnIndex });
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        const newRowHome = ctrl ? 0 : rowIndex;
+        this.setSelectionRange({ startRow: newRowHome, startCol: 0, endRow: newRowHome, endCol: 0 });
+        this.setActiveCell({ rowIndex: newRowHome, columnIndex: colOffset });
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const newRowEnd = ctrl ? maxRowIndex : rowIndex;
+        this.setSelectionRange({ startRow: newRowEnd, startCol: visibleColumnCount - 1, endRow: newRowEnd, endCol: visibleColumnCount - 1 });
+        this.setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
+        break;
+      }
+      case "Enter":
+      case "F2": {
+        e.preventDefault();
+        if (dataColIndex >= 0 && dataColIndex < visibleCols.length) {
+          const col = visibleCols[dataColIndex];
+          const item = items[rowIndex];
+          if (item && col) {
+            const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
+            if (editable !== false && colEditable && wrappedOnCellValueChanged != null) {
+              setEditingCell({ rowId: getRowId(item), columnId: col.columnId });
+            }
+          }
+        }
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        if (editingCell != null) {
+          setEditingCell(null);
+        } else {
+          this.clearClipboardRanges();
+          this.setActiveCell(null);
+          this.setSelectionRange(null);
+        }
+        break;
+      case " ":
+        if (rowSelection !== "none" && columnIndex === 0 && hasCheckboxCol) {
+          e.preventDefault();
+          const item = items[rowIndex];
+          if (item) {
+            const id = getRowId(item);
+            const isSelected = selectedRowIds.has(id);
+            handleRowCheckboxChange(id, !isSelected, rowIndex, e.shiftKey);
+          }
+        }
+        break;
+      case "z":
+        if (ctrl) {
+          if (editingCell == null) {
+            if (e.shiftKey) {
+              e.preventDefault();
+              this.redo(originalOnCellValueChanged);
+            } else {
+              e.preventDefault();
+              this.undo(originalOnCellValueChanged);
+            }
+          }
+        }
+        break;
+      case "y":
+        if (ctrl && editingCell == null) {
+          e.preventDefault();
+          this.redo(originalOnCellValueChanged);
+        }
+        break;
+      case "a":
+        if (ctrl) {
+          if (editingCell != null) break;
+          e.preventDefault();
+          if (items.length > 0 && visibleColumnCount > 0) {
+            this.setSelectionRange({ startRow: 0, startCol: 0, endRow: items.length - 1, endCol: visibleColumnCount - 1 });
+            this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+          }
+        }
+        break;
+      case "Delete":
+      case "Backspace": {
+        if (editingCell != null) break;
+        if (editable === false) break;
+        if (wrappedOnCellValueChanged == null) break;
+        const range = selectionRange ?? (activeCell != null ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset } : null);
+        if (range == null) break;
+        e.preventDefault();
+        const norm = normalizeSelectionRange(range);
+        for (let r = norm.startRow; r <= norm.endRow; r++) {
+          for (let c = norm.startCol; c <= norm.endCol; c++) {
+            if (r >= items.length || c >= visibleCols.length) continue;
+            const item = items[r];
+            const col = visibleCols[c];
+            const colEditable = col.editable === true || typeof col.editable === "function" && col.editable(item);
+            if (!colEditable) continue;
+            const oldValue = getCellValue(item, col);
+            const result = parseValue("", oldValue, item, col);
+            if (!result.valid) continue;
+            wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
+          }
+        }
+        break;
+      }
+      case "F10":
+        if (e.shiftKey) {
+          e.preventDefault();
+          if (activeCell != null && wrapperEl) {
+            const sel = `[data-row-index="${activeCell.rowIndex}"][data-col-index="${activeCell.columnIndex}"]`;
+            const cell = wrapperEl.querySelector(sel);
+            if (cell) {
+              const rect = cell.getBoundingClientRect();
+              this.setContextMenuPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+            } else {
+              this.setContextMenuPosition({ x: 100, y: 100 });
+            }
+          } else {
+            this.setContextMenuPosition({ x: 100, y: 100 });
+          }
+        }
+        break;
+    }
+  }
+  // --- Drag helpers ---
+  onWindowMouseMove(e, colOffset, wrapperEl) {
+    if (!this.isDraggingRef || !this.dragStartPos) return;
+    if (!this.dragMoved) {
+      this.dragMoved = true;
+      this.isDraggingSig.set(true);
+    }
+    this.lastMousePos = { cx: e.clientX, cy: e.clientY };
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = 0;
+      const pos = this.lastMousePos;
+      if (!pos) return;
+      const newRange = this.resolveRangeFromMouse(pos.cx, pos.cy, colOffset);
+      if (!newRange) return;
+      const prev = this.liveDragRange;
+      if (prev && prev.startRow === newRange.startRow && prev.startCol === newRange.startCol && prev.endRow === newRange.endRow && prev.endCol === newRange.endCol) return;
+      this.liveDragRange = newRange;
+      this.applyDragAttrs(newRange, colOffset, wrapperEl);
+    });
+  }
+  onWindowMouseUp(colOffset, wrapperEl) {
+    if (!this.isDraggingRef) return;
+    if (this.autoScrollInterval) {
+      clearInterval(this.autoScrollInterval);
+      this.autoScrollInterval = null;
+    }
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = 0;
+    }
+    this.isDraggingRef = false;
+    const wasDrag = this.dragMoved;
+    if (wasDrag) {
+      const pos = this.lastMousePos;
+      if (pos) {
+        const flushed = this.resolveRangeFromMouse(pos.cx, pos.cy, colOffset);
+        if (flushed) this.liveDragRange = flushed;
+      }
+      const finalRange = this.liveDragRange;
+      if (finalRange) {
+        this.setSelectionRange(finalRange);
+        this.setActiveCell({
+          rowIndex: finalRange.endRow,
+          columnIndex: finalRange.endCol + colOffset
+        });
+      }
+    }
+    this.clearDragAttrs(wrapperEl);
+    this.liveDragRange = null;
+    this.lastMousePos = null;
+    this.dragStartPos = null;
+    if (wasDrag) this.isDraggingSig.set(false);
+  }
+  resolveRangeFromMouse(cx, cy, colOffset) {
+    if (!this.dragStartPos) return null;
+    const target = document.elementFromPoint(cx, cy);
+    const cell = target?.closest?.("[data-row-index][data-col-index]");
+    if (!cell) return null;
+    const r = parseInt(cell.getAttribute("data-row-index") ?? "", 10);
+    const c = parseInt(cell.getAttribute("data-col-index") ?? "", 10);
+    if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset) return null;
+    const dataCol = c - colOffset;
+    const start = this.dragStartPos;
+    return normalizeSelectionRange({
+      startRow: start.row,
+      startCol: start.col,
+      endRow: r,
+      endCol: dataCol
+    });
+  }
+  applyDragAttrs(range, colOff, wrapper) {
+    if (!wrapper) return;
+    const minR = Math.min(range.startRow, range.endRow);
+    const maxR = Math.max(range.startRow, range.endRow);
+    const minC = Math.min(range.startCol, range.endCol);
+    const maxC = Math.max(range.startCol, range.endCol);
+    const cells = wrapper.querySelectorAll("[data-row-index][data-col-index]");
+    for (let i = 0; i < cells.length; i++) {
+      const el = cells[i];
+      const r = parseInt(el.getAttribute("data-row-index") ?? "", 10);
+      const c = parseInt(el.getAttribute("data-col-index") ?? "", 10) - colOff;
+      const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+      if (inRange) {
+        if (!el.hasAttribute("data-drag-range")) el.setAttribute("data-drag-range", "");
+      } else {
+        if (el.hasAttribute("data-drag-range")) el.removeAttribute("data-drag-range");
+      }
+    }
+  }
+  clearDragAttrs(wrapper) {
+    if (!wrapper) return;
+    const marked = wrapper.querySelectorAll("[data-drag-range]");
+    for (let i = 0; i < marked.length; i++) marked[i].removeAttribute("data-drag-range");
+  }
+  // --- Private helpers ---
+  getEffectiveRange(colOffset) {
+    const sel = this.selectionRangeSig();
+    const ac = this.activeCellSig();
+    return sel ?? (ac != null ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset } : null);
+  }
+  destroy() {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = 0;
+    }
+    if (this.fillRafId) {
+      cancelAnimationFrame(this.fillRafId);
+      this.fillRafId = 0;
+    }
+    if (this.autoScrollInterval) {
+      clearInterval(this.autoScrollInterval);
+      this.autoScrollInterval = null;
+    }
+    if (this.fillMoveHandler) {
+      window.removeEventListener("mousemove", this.fillMoveHandler, true);
+      this.fillMoveHandler = null;
+    }
+    if (this.fillUpHandler) {
+      window.removeEventListener("mouseup", this.fillUpHandler, true);
+      this.fillUpHandler = null;
+    }
+    this.undoRedoStack.clear();
+  }
+};
+
+// src/services/datagrid-state.service.ts
+var NOOP = () => {
+};
+var NOOP_ASYNC = async () => {
+};
+var NOOP_MOUSE = (_e, _r, _c) => {
+};
+var NOOP_KEY = (_e) => {
+};
+var NOOP_CTX = (_e) => {
+};
+var DataGridStateService = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    this.ngZone = inject(NgZone);
+    // --- Input signals ---
+    this.props = signal(null);
+    this.wrapperEl = signal(null);
+    // --- Internal state (still owned by main service for backward compat) ---
+    this.internalSelectedRows = signal(/* @__PURE__ */ new Set());
+    // Row selection
+    this.lastClickedRow = -1;
+    // Header menu state (for column pinning UI)
+    this.headerMenuIsOpenSig = signal(false);
+    this.headerMenuOpenForColumnSig = signal(null);
+    this.headerMenuAnchorElementSig = signal(null);
+    // --- Derived computed ---
+    this.propsResolved = computed(() => {
+      const p = this.props();
+      if (!p) throw new Error("DataGridStateService: props must be set before use");
+      return p;
+    });
+    this.cellSelection = computed(() => {
+      const p = this.props();
+      return p ? p.cellSelection !== false : true;
+    });
+    // Narrow signal extractors — prevent full props() dependency in effects/computed
+    this.originalOnCellValueChanged = computed(() => this.props()?.onCellValueChanged);
+    // Undo/redo wrapped callback — only recomputes when the actual callback reference changes
+    this.wrappedOnCellValueChanged = computed(() => {
+      const original = this.originalOnCellValueChanged();
+      if (!original) return void 0;
+      return (event) => {
+        this.interactionHelper.undoRedoStack.record(event);
+        if (!this.interactionHelper.undoRedoStack.isBatching) {
+          this.interactionHelper.undoLengthSig.set(this.interactionHelper.undoRedoStack.historyLength);
+          this.interactionHelper.redoLengthSig.set(this.interactionHelper.undoRedoStack.redoLength);
+        }
+        original(event);
+      };
+    });
+    // --- Delegated computed signals from layoutHelper ---
+    this.flatColumnsRaw = computed(() => this.layoutHelper.flatColumnsRaw());
+    this.flatColumns = computed(() => this.layoutHelper.flatColumns());
+    this.visibleCols = computed(() => this.layoutHelper.visibleCols());
+    this.visibleColumnCount = computed(() => this.layoutHelper.visibleColumnCount());
+    this.hasCheckboxCol = computed(() => this.layoutHelper.hasCheckboxCol());
+    this.hasRowNumbersCol = computed(() => this.layoutHelper.hasRowNumbersCol());
+    this.specialColsCount = computed(() => this.layoutHelper.specialColsCount());
+    this.totalColCount = computed(() => this.layoutHelper.totalColCount());
+    this.colOffset = computed(() => this.layoutHelper.colOffset());
+    this.rowIndexByRowId = computed(() => this.layoutHelper.rowIndexByRowId());
+    this.selectedRowIds = computed(() => {
+      const p = this.props();
+      if (!p) return /* @__PURE__ */ new Set();
+      const controlled = p.selectedRows;
+      if (controlled != null) {
+        return controlled instanceof Set ? controlled : new Set(controlled);
+      }
+      return this.internalSelectedRows();
+    });
+    this.allSelected = computed(() => {
+      const p = this.props();
+      if (!p || p.items.length === 0) return false;
+      const selected = this.selectedRowIds();
+      return p.items.every((item) => selected.has(p.getRowId(item)));
+    });
+    this.someSelected = computed(() => {
+      const p = this.props();
+      if (!p) return false;
+      const selected = this.selectedRowIds();
+      return !this.allSelected() && p.items.some((item) => selected.has(p.getRowId(item)));
+    });
+    this.hasCellSelection = computed(() => this.interactionHelper.hasCellSelection());
+    this.canUndo = computed(() => this.interactionHelper.canUndo());
+    this.canRedo = computed(() => this.interactionHelper.canRedo());
+    // Table layout (delegated to layoutHelper)
+    this.minTableWidth = computed(() => this.layoutHelper.minTableWidth());
+    this.desiredTableWidth = computed(() => this.layoutHelper.desiredTableWidth());
+    this.aggregation = computed(() => {
+      const p = this.props();
+      if (!p) return null;
+      return computeAggregations(
+        p.items,
+        this.visibleCols(),
+        this.cellSelection() ? this.interactionHelper.selectionRangeSig() : null
+      );
+    });
+    this.statusBarConfig = computed(() => {
+      const p = this.props();
+      if (!p) return null;
+      const base = getDataGridStatusBarConfig(
+        p.statusBar,
+        p.items.length,
+        this.selectedRowIds().size
+      );
+      if (!base) return null;
+      return { ...base, aggregation: this.aggregation() ?? void 0 };
+    });
+    this.showEmptyInGrid = computed(() => {
+      const p = this.props();
+      if (!p) return false;
+      return p.items.length === 0 && !!p.emptyState && !p.isLoading;
+    });
+    this.layoutHelper = new DataGridLayoutHelper(this.props, this.wrapperEl, this.ngZone);
+    this.interactionHelper = new DataGridInteractionHelper();
+    this.editingHelper = new DataGridEditingHelper(
+      () => this.visibleCols(),
+      () => this.props()?.items ?? [],
+      () => this.wrappedOnCellValueChanged(),
+      (cell) => this.setActiveCell(cell)
+    );
+    effect((onCleanup) => {
+      const onMove = (e) => this.onWindowMouseMove(e);
+      const onUp = () => this.onWindowMouseUp();
+      this.ngZone.runOutsideAngular(() => {
+        window.addEventListener("mousemove", onMove, true);
+        window.addEventListener("mouseup", onUp, true);
+      });
+      onCleanup(() => {
+        window.removeEventListener("mousemove", onMove, true);
+        window.removeEventListener("mouseup", onUp, true);
+      });
+    });
+    this.destroyRef.onDestroy(() => {
+      this.interactionHelper.destroy();
+      this.layoutHelper.destroy();
+    });
+  }
+  // --- Row selection methods ---
+  updateSelection(newSelectedIds) {
+    const p = this.props();
+    if (!p) return;
+    if (p.selectedRows === void 0) {
+      this.internalSelectedRows.set(newSelectedIds);
+    }
+    p.onSelectionChange?.({
+      selectedRowIds: Array.from(newSelectedIds),
+      selectedItems: p.items.filter((item) => newSelectedIds.has(p.getRowId(item)))
+    });
+  }
+  handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey) {
+    const p = this.props();
+    if (!p) return;
+    const rowSelection = p.rowSelection ?? "none";
+    if (rowSelection === "single") {
+      this.updateSelection(checked ? /* @__PURE__ */ new Set([rowId]) : /* @__PURE__ */ new Set());
+      this.lastClickedRow = rowIndex;
+      return;
+    }
+    const next = new Set(this.selectedRowIds());
+    if (shiftKey && this.lastClickedRow >= 0 && this.lastClickedRow !== rowIndex) {
+      const start = Math.min(this.lastClickedRow, rowIndex);
+      const end = Math.max(this.lastClickedRow, rowIndex);
+      for (let i = start; i <= end; i++) {
+        if (i < p.items.length) {
+          const id = p.getRowId(p.items[i]);
+          if (checked) next.add(id);
+          else next.delete(id);
+        }
+      }
+    } else {
+      if (checked) next.add(rowId);
+      else next.delete(rowId);
+    }
+    this.lastClickedRow = rowIndex;
+    this.updateSelection(next);
+  }
+  handleSelectAll(checked) {
+    const p = this.props();
+    if (!p) return;
+    if (checked) {
+      this.updateSelection(new Set(p.items.map((item) => p.getRowId(item))));
+    } else {
+      this.updateSelection(/* @__PURE__ */ new Set());
+    }
+  }
+  // --- Cell editing (delegated to editingHelper) ---
+  setEditingCell(cell) {
+    this.editingHelper.setEditingCell(cell);
+  }
+  setPendingEditorValue(value) {
+    this.editingHelper.setPendingEditorValue(value);
+  }
+  setActiveCell(cell) {
+    this.interactionHelper.setActiveCell(cell);
+  }
+  setSelectionRange(range) {
+    this.interactionHelper.setSelectionRange(range);
+  }
+  commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+    this.editingHelper.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+  }
+  cancelPopoverEdit() {
+    this.editingHelper.cancelPopoverEdit();
+  }
+  // --- Cell selection / mouse handling (delegated to interactionHelper) ---
+  handleCellMouseDown(e, rowIndex, globalColIndex) {
+    this.interactionHelper.handleCellMouseDown(e, rowIndex, globalColIndex, this.colOffset(), this.wrapperEl());
+  }
+  handleSelectAllCells() {
+    const p = this.props();
+    if (!p) return;
+    this.interactionHelper.handleSelectAllCells(p.items.length, this.visibleColumnCount(), this.colOffset());
+  }
+  // --- Context menu (delegated to interactionHelper) ---
+  setContextMenuPosition(pos) {
+    this.interactionHelper.setContextMenuPosition(pos);
+  }
+  handleCellContextMenu(e) {
+    this.interactionHelper.handleCellContextMenu(e);
+  }
+  closeContextMenu() {
+    this.interactionHelper.closeContextMenu();
+  }
+  // --- Clipboard (delegated to interactionHelper) ---
+  handleCopy() {
+    const p = this.props();
+    if (!p) return;
+    this.interactionHelper.handleCopy(p.items, this.visibleCols(), this.colOffset());
+  }
+  handleCut() {
+    const p = this.props();
+    if (!p) return;
+    this.interactionHelper.handleCut(
+      p.items,
+      this.visibleCols(),
+      this.colOffset(),
+      p.editable,
+      this.wrappedOnCellValueChanged()
+    );
+  }
+  async handlePaste() {
+    const p = this.props();
+    if (!p) return;
+    await this.interactionHelper.handlePaste(
+      p.items,
+      this.visibleCols(),
+      this.colOffset(),
+      p.editable,
+      this.wrappedOnCellValueChanged()
+    );
+  }
+  clearClipboardRanges() {
+    this.interactionHelper.clearClipboardRanges();
+  }
+  // --- Undo/Redo (delegated to interactionHelper) ---
+  beginBatch() {
+    this.interactionHelper.beginBatch();
+  }
+  endBatch() {
+    this.interactionHelper.endBatch();
+  }
+  undo() {
+    const p = this.props();
+    this.interactionHelper.undo(p?.onCellValueChanged);
+  }
+  redo() {
+    const p = this.props();
+    this.interactionHelper.redo(p?.onCellValueChanged);
+  }
+  // --- Keyboard navigation (delegated to interactionHelper) ---
+  handleGridKeyDown(e) {
+    const p = this.props();
+    if (!p) return;
+    this.interactionHelper.handleGridKeyDown(
+      e,
+      p.items,
+      p.getRowId,
+      this.visibleCols(),
+      this.colOffset(),
+      this.hasCheckboxCol(),
+      this.visibleColumnCount(),
+      p.editable,
+      this.wrappedOnCellValueChanged(),
+      p.onCellValueChanged,
+      p.rowSelection ?? "none",
+      this.selectedRowIds(),
+      this.wrapperEl(),
+      (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey),
+      this.editingHelper.editingCellSig(),
+      (cell) => this.setEditingCell(cell)
+    );
+  }
+  // --- Fill handle (delegated to interactionHelper + setupFillHandleDrag) ---
+  handleFillHandleMouseDown(e) {
+    this.interactionHelper.handleFillHandleMouseDown(e);
+    this.setupFillHandleDrag();
+  }
+  // --- Column pinning ---
+  pinColumn(columnId, side) {
+    const props = this.props();
+    props?.onColumnPinned?.(columnId, side);
+  }
+  unpinColumn(columnId) {
+    const props = this.props();
+    props?.onColumnPinned?.(columnId, null);
+  }
+  isPinned(columnId) {
+    const props = this.props();
+    return props?.pinnedColumns?.[columnId];
+  }
+  getPinState(columnId) {
+    const pinned = this.isPinned(columnId);
+    return {
+      canPinLeft: pinned !== "left",
+      canPinRight: pinned !== "right",
+      canUnpin: !!pinned
+    };
+  }
+  // --- Header menu ---
+  openHeaderMenu(columnId, anchorEl) {
+    this.headerMenuOpenForColumnSig.set(columnId);
+    this.headerMenuAnchorElementSig.set(anchorEl);
+    this.headerMenuIsOpenSig.set(true);
+  }
+  closeHeaderMenu() {
+    this.headerMenuIsOpenSig.set(false);
+    this.headerMenuOpenForColumnSig.set(null);
+    this.headerMenuAnchorElementSig.set(null);
+  }
+  headerMenuPinLeft() {
+    const col = this.headerMenuOpenForColumnSig();
+    if (col && this.isPinned(col) !== "left") {
+      this.pinColumn(col, "left");
+      this.closeHeaderMenu();
+    }
+  }
+  headerMenuPinRight() {
+    const col = this.headerMenuOpenForColumnSig();
+    if (col && this.isPinned(col) !== "right") {
+      this.pinColumn(col, "right");
+      this.closeHeaderMenu();
+    }
+  }
+  headerMenuUnpin() {
+    const col = this.headerMenuOpenForColumnSig();
+    if (col && this.isPinned(col)) {
+      this.unpinColumn(col);
+      this.closeHeaderMenu();
+    }
+  }
+  // --- Get state result ---
+  getState() {
+    const p = this.props();
+    const cellSel = this.cellSelection();
+    const layout = {
+      flatColumns: this.flatColumns(),
+      visibleCols: this.visibleCols(),
+      visibleColumnCount: this.visibleColumnCount(),
+      totalColCount: this.totalColCount(),
+      colOffset: this.colOffset(),
+      hasCheckboxCol: this.hasCheckboxCol(),
+      hasRowNumbersCol: this.hasRowNumbersCol(),
+      rowIndexByRowId: this.rowIndexByRowId(),
+      containerWidth: this.layoutHelper.containerWidthSig(),
+      minTableWidth: this.minTableWidth(),
+      desiredTableWidth: this.desiredTableWidth(),
+      columnSizingOverrides: this.layoutHelper.columnSizingOverridesSig(),
+      setColumnSizingOverrides: (overrides) => this.layoutHelper.columnSizingOverridesSig.set(overrides),
+      onColumnResized: p?.onColumnResized,
+      onAutosizeColumn: p?.onAutosizeColumn
+    };
+    const rowSelection = {
+      selectedRowIds: this.selectedRowIds(),
+      updateSelection: (ids) => this.updateSelection(ids),
+      handleRowCheckboxChange: (rowId, checked, rowIndex, shiftKey) => this.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey),
+      handleSelectAll: (checked) => this.handleSelectAll(checked),
+      allSelected: this.allSelected(),
+      someSelected: this.someSelected()
+    };
+    const editing = {
+      editingCell: this.editingHelper.editingCellSig(),
+      setEditingCell: (cell) => this.setEditingCell(cell),
+      pendingEditorValue: this.editingHelper.pendingEditorValueSig(),
+      setPendingEditorValue: (v) => this.setPendingEditorValue(v),
+      commitCellEdit: (item, colId, oldVal, newVal, rowIdx, globalColIdx) => this.commitCellEdit(item, colId, oldVal, newVal, rowIdx, globalColIdx),
+      cancelPopoverEdit: () => this.cancelPopoverEdit(),
+      popoverAnchorEl: this.editingHelper.popoverAnchorElSig(),
+      setPopoverAnchorEl: (el) => this.editingHelper.popoverAnchorElSig.set(el)
+    };
+    const interaction = {
+      activeCell: cellSel ? this.interactionHelper.activeCellSig() : null,
+      setActiveCell: cellSel ? (cell) => this.setActiveCell(cell) : void 0,
+      selectionRange: cellSel ? this.interactionHelper.selectionRangeSig() : null,
+      setSelectionRange: cellSel ? (range) => this.setSelectionRange(range) : void 0,
+      handleCellMouseDown: cellSel ? (e, r, c) => this.handleCellMouseDown(e, r, c) : NOOP_MOUSE,
+      handleSelectAllCells: cellSel ? () => this.handleSelectAllCells() : NOOP,
+      hasCellSelection: cellSel ? this.hasCellSelection() : false,
+      handleGridKeyDown: cellSel ? (e) => this.handleGridKeyDown(e) : NOOP_KEY,
+      handleFillHandleMouseDown: cellSel ? (e) => this.handleFillHandleMouseDown(e) : void 0,
+      handleCopy: cellSel ? () => this.handleCopy() : NOOP,
+      handleCut: cellSel ? () => this.handleCut() : NOOP,
+      handlePaste: cellSel ? () => this.handlePaste() : NOOP_ASYNC,
+      cutRange: cellSel ? this.interactionHelper.cutRangeSig() : null,
+      copyRange: cellSel ? this.interactionHelper.copyRangeSig() : null,
+      clearClipboardRanges: cellSel ? () => this.clearClipboardRanges() : NOOP,
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo(),
+      onUndo: () => this.undo(),
+      onRedo: () => this.redo(),
+      isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false
+    };
+    const contextMenu = {
+      menuPosition: cellSel ? this.interactionHelper.contextMenuPositionSig() : null,
+      setMenuPosition: cellSel ? (pos) => this.setContextMenuPosition(pos) : void 0,
+      handleCellContextMenu: cellSel ? (e) => this.handleCellContextMenu(e) : NOOP_CTX,
+      closeContextMenu: cellSel ? () => this.closeContextMenu() : NOOP
+    };
+    const viewModels = {
+      headerFilterInput: {
+        sortBy: p?.sortBy,
+        sortDirection: p?.sortDirection ?? "asc",
+        onColumnSort: (columnKey, direction) => p?.onColumnSort(columnKey, direction),
+        filters: p?.filters ?? {},
+        onFilterChange: (key, value) => p?.onFilterChange(key, value),
+        filterOptions: p?.filterOptions ?? {},
+        loadingFilterOptions: p?.loadingFilterOptions ?? {},
+        peopleSearch: p?.peopleSearch
+      },
+      cellDescriptorInput: {
+        editingCell: this.editingHelper.editingCellSig(),
+        activeCell: cellSel ? this.interactionHelper.activeCellSig() : null,
+        selectionRange: cellSel ? this.interactionHelper.selectionRangeSig() : null,
+        cutRange: cellSel ? this.interactionHelper.cutRangeSig() : null,
+        copyRange: cellSel ? this.interactionHelper.copyRangeSig() : null,
+        colOffset: this.colOffset(),
+        itemsLength: p?.items.length ?? 0,
+        getRowId: p?.getRowId ?? ((item) => item["id"]),
+        editable: p?.editable,
+        onCellValueChanged: this.wrappedOnCellValueChanged(),
+        isDragging: cellSel ? this.interactionHelper.isDraggingSig() : false
+      },
+      statusBarConfig: this.statusBarConfig(),
+      showEmptyInGrid: this.showEmptyInGrid(),
+      onCellError: p?.onCellError
+    };
+    const openForColumn = this.headerMenuOpenForColumnSig();
+    const currentPinState = openForColumn ? p?.pinnedColumns?.[openForColumn] : void 0;
+    const pinning = {
+      pinnedColumns: p?.pinnedColumns ?? {},
+      pinColumn: (columnId, side) => this.pinColumn(columnId, side),
+      unpinColumn: (columnId) => this.unpinColumn(columnId),
+      isPinned: (columnId) => this.isPinned(columnId),
+      headerMenu: {
+        isOpen: this.headerMenuIsOpenSig(),
+        openForColumn,
+        anchorElement: this.headerMenuAnchorElementSig(),
+        open: (columnId, anchorEl) => this.openHeaderMenu(columnId, anchorEl),
+        close: () => this.closeHeaderMenu(),
+        handlePinLeft: () => this.headerMenuPinLeft(),
+        handlePinRight: () => this.headerMenuPinRight(),
+        handleUnpin: () => this.headerMenuUnpin(),
+        canPinLeft: currentPinState !== "left",
+        canPinRight: currentPinState !== "right",
+        canUnpin: !!currentPinState
+      }
+    };
+    return { layout, rowSelection, editing, interaction, contextMenu, viewModels, pinning };
+  }
+  // --- Private helpers (drag selection delegated to interactionHelper) ---
+  onWindowMouseMove(e) {
+    this.interactionHelper.onWindowMouseMove(e, this.colOffset(), this.wrapperEl());
+  }
+  onWindowMouseUp() {
+    this.interactionHelper.onWindowMouseUp(this.colOffset(), this.wrapperEl());
+  }
+  setupFillHandleDrag() {
+    const p = this.props();
+    const fillDragStart = this.interactionHelper.fillDragStart;
+    if (!fillDragStart || p?.editable === false || !this.wrappedOnCellValueChanged()) return;
+    const colOff = this.colOffset();
+    const fillStart = fillDragStart;
+    let fillDragEnd = { endRow: fillStart.startRow, endCol: fillStart.startCol };
+    let liveFillRange = null;
+    let lastFillMousePos = null;
+    const resolveRange = (cx, cy) => {
+      const target = document.elementFromPoint(cx, cy);
+      const cell = target?.closest?.("[data-row-index][data-col-index]");
+      const wrapper = this.wrapperEl();
+      if (!cell || !wrapper?.contains(cell)) return null;
+      const r = parseInt(cell.getAttribute("data-row-index") ?? "", 10);
+      const c = parseInt(cell.getAttribute("data-col-index") ?? "", 10);
+      if (Number.isNaN(r) || Number.isNaN(c) || c < colOff) return null;
+      const dataCol = c - colOff;
+      return normalizeSelectionRange({
+        startRow: fillStart.startRow,
+        startCol: fillStart.startCol,
+        endRow: r,
+        endCol: dataCol
+      });
+    };
+    const onMove = (e) => {
+      lastFillMousePos = { cx: e.clientX, cy: e.clientY };
+      if (this.interactionHelper.fillRafId) cancelAnimationFrame(this.interactionHelper.fillRafId);
+      this.interactionHelper.fillRafId = requestAnimationFrame(() => {
+        this.interactionHelper.fillRafId = 0;
+        if (!lastFillMousePos) return;
+        const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+        if (!newRange) return;
+        if (liveFillRange && liveFillRange.startRow === newRange.startRow && liveFillRange.startCol === newRange.startCol && liveFillRange.endRow === newRange.endRow && liveFillRange.endCol === newRange.endCol) return;
+        liveFillRange = newRange;
+        fillDragEnd = { endRow: newRange.endRow, endCol: newRange.endCol };
+        this.interactionHelper.applyDragAttrs(newRange, colOff, this.wrapperEl());
+      });
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("mouseup", onUp, true);
+      this.interactionHelper.fillMoveHandler = null;
+      this.interactionHelper.fillUpHandler = null;
+      if (this.interactionHelper.fillRafId) {
+        cancelAnimationFrame(this.interactionHelper.fillRafId);
+        this.interactionHelper.fillRafId = 0;
+      }
+      if (lastFillMousePos) {
+        const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
+        if (flushed) {
+          liveFillRange = flushed;
+          fillDragEnd = { endRow: flushed.endRow, endCol: flushed.endCol };
+        }
+      }
+      this.interactionHelper.clearDragAttrs(this.wrapperEl());
+      const norm = normalizeSelectionRange({
+        startRow: fillStart.startRow,
+        startCol: fillStart.startCol,
+        endRow: fillDragEnd.endRow,
+        endCol: fillDragEnd.endCol
+      });
+      this.setSelectionRange(norm);
+      this.setActiveCell({ rowIndex: fillDragEnd.endRow, columnIndex: fillDragEnd.endCol + colOff });
+      if (!p) return;
+      const items = p.items;
+      const visibleCols = this.visibleCols();
+      const startItem = items[norm.startRow];
+      const startColDef = visibleCols[norm.startCol];
+      const onCellValueChanged = this.wrappedOnCellValueChanged();
+      if (startItem && startColDef && onCellValueChanged) {
+        const startValue = getCellValue(startItem, startColDef);
+        this.beginBatch();
+        for (let row = norm.startRow; row <= norm.endRow; row++) {
+          for (let col = norm.startCol; col <= norm.endCol; col++) {
+            if (row === fillStart.startRow && col === fillStart.startCol) continue;
+            if (row >= items.length || col >= visibleCols.length) continue;
+            const item = items[row];
+            const colDef = visibleCols[col];
+            const colEditable = colDef.editable === true || typeof colDef.editable === "function" && colDef.editable(item);
+            if (!colEditable) continue;
+            const oldValue = getCellValue(item, colDef);
+            const result = parseValue(startValue, oldValue, item, colDef);
+            if (!result.valid) continue;
+            onCellValueChanged({ item, columnId: colDef.columnId, oldValue, newValue: result.value, rowIndex: row });
+          }
+        }
+        this.endBatch();
+      }
+      this.interactionHelper.fillDragStart = null;
+    };
+    this.interactionHelper.fillMoveHandler = onMove;
+    this.interactionHelper.fillUpHandler = onUp;
+    this.ngZone.runOutsideAngular(() => {
+      window.addEventListener("mousemove", onMove, true);
+      window.addEventListener("mouseup", onUp, true);
+    });
+  }
+};
+DataGridStateService = __decorateClass([
+  Injectable()
+], DataGridStateService);
+var RESIZE_HANDLE_ZONE = 8;
+var ColumnReorderService = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    // --- Input signals (set by consuming component) ---
+    this.columns = signal([]);
+    this.columnOrder = signal(void 0);
+    this.onColumnOrderChange = signal(void 0);
+    this.enabled = signal(true);
+    this.wrapperEl = signal(null);
+    // --- Internal state ---
+    this.isDragging = signal(false);
+    this.dropIndicatorX = signal(null);
+    // Imperative drag tracking (not reactive)
+    this.rafId = 0;
+    this.cleanupFn = null;
+    // Refs for latest values (captured in closure)
+    this.latestDropTargetIndex = null;
+    this.destroyRef.onDestroy(() => {
+      if (this.cleanupFn) {
+        this.cleanupFn();
+        this.cleanupFn = null;
+      }
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId);
+        this.rafId = 0;
+      }
+    });
+  }
+  /**
+   * Call this from the header cell's mousedown handler.
+   * @param columnId - The column being dragged
+   * @param event - The native MouseEvent
+   */
+  handleHeaderMouseDown(columnId, event) {
+    if (!this.enabled()) return;
+    if (!this.onColumnOrderChange()) return;
+    if (event.button !== 0) return;
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    if (event.clientX > rect.right - RESIZE_HANDLE_ZONE) return;
+    const cols = this.columns();
+    const colIndex = cols.findIndex((c) => c.columnId === columnId);
+    if (colIndex === -1) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    let hasMoved = false;
+    this.latestDropTargetIndex = null;
+    const prevUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    const onMove = (moveEvent) => {
+      if (!hasMoved && Math.abs(moveEvent.clientX - startX) < 5) return;
+      if (!hasMoved) {
+        hasMoved = true;
+        this.isDragging.set(true);
+      }
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      this.rafId = requestAnimationFrame(() => {
+        this.rafId = 0;
+        const wrapper = this.wrapperEl();
+        if (!wrapper) return;
+        const headerCells = wrapper.querySelectorAll("th[data-column-id]");
+        const rects = [];
+        for (let i = 0; i < headerCells.length; i++) {
+          const th = headerCells[i];
+          const id = th.getAttribute("data-column-id");
+          if (!id) continue;
+          const thRect = th.getBoundingClientRect();
+          rects.push({
+            columnId: id,
+            left: thRect.left,
+            right: thRect.right,
+            centerX: thRect.left + thRect.width / 2
+          });
+        }
+        const result = this.calculateDrop(columnId, moveEvent.clientX, rects);
+        this.latestDropTargetIndex = result.dropIndex;
+        this.dropIndicatorX.set(result.indicatorX);
+      });
+    };
+    const cleanup = () => {
+      window.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("mouseup", onUp, true);
+      this.cleanupFn = null;
+      document.body.style.userSelect = prevUserSelect;
+      if (this.rafId) {
+        cancelAnimationFrame(this.rafId);
+        this.rafId = 0;
+      }
+    };
+    const onUp = () => {
+      cleanup();
+      if (hasMoved && this.latestDropTargetIndex != null) {
+        const currentOrder = this.columnOrder() ?? this.columns().map((c) => c.columnId);
+        const newOrder = reorderColumnArray(currentOrder, columnId, this.latestDropTargetIndex);
+        this.onColumnOrderChange()?.(newOrder);
+      }
+      this.isDragging.set(false);
+      this.dropIndicatorX.set(null);
+    };
+    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("mouseup", onUp, true);
+    this.cleanupFn = cleanup;
+  }
+  /**
+   * Calculate drop target from mouse position and header cell rects.
+   * Same logic as React's useColumnReorder inline calculation.
+   */
+  calculateDrop(draggedColumnId, mouseX, rects) {
+    if (rects.length === 0) {
+      return { dropIndex: null, indicatorX: null };
+    }
+    const order = this.columnOrder() ?? this.columns().map((c) => c.columnId);
+    const currentIndex = order.indexOf(draggedColumnId);
+    let bestIndex = 0;
+    let indicatorX = null;
+    if (mouseX <= rects[0].centerX) {
+      bestIndex = 0;
+      indicatorX = rects[0].left;
+    } else if (mouseX >= rects[rects.length - 1].centerX) {
+      bestIndex = rects.length;
+      indicatorX = rects[rects.length - 1].right;
+    } else {
+      for (let i = 0; i < rects.length - 1; i++) {
+        if (mouseX >= rects[i].centerX && mouseX < rects[i + 1].centerX) {
+          bestIndex = i + 1;
+          indicatorX = rects[i].right;
+          break;
+        }
+      }
+    }
+    const targetOrderIndex = bestIndex < rects.length ? order.indexOf(rects[bestIndex]?.columnId ?? "") : order.length;
+    if (currentIndex === targetOrderIndex || currentIndex + 1 === targetOrderIndex) {
+      return { dropIndex: targetOrderIndex, indicatorX: null };
+    }
+    return { dropIndex: targetOrderIndex, indicatorX };
+  }
+};
+ColumnReorderService = __decorateClass([
+  Injectable()
+], ColumnReorderService);
+var PASSTHROUGH_THRESHOLD = 100;
+var VirtualScrollService = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    // --- Input signals (set by consuming component) ---
+    this.totalRows = signal(0);
+    this.config = signal({ rowHeight: 36 });
+    this.containerHeight = signal(0);
+    // --- Internal state ---
+    this.scrollTop = signal(0);
+    // Scrollable container reference for programmatic scrolling
+    this.containerEl = null;
+    // --- Derived computed signals ---
+    this.rowHeight = computed(() => this.config().rowHeight ?? 36);
+    this.overscan = computed(() => this.config().overscan ?? 5);
+    this.enabled = computed(() => this.config().enabled !== false);
+    /** Whether virtual scrolling is actually active (enabled + enough rows). */
+    this.isActive = computed(() => this.enabled() && this.totalRows() >= PASSTHROUGH_THRESHOLD);
+    /** The visible range of rows with spacer offsets. */
+    this.visibleRange = computed(() => {
+      if (!this.isActive()) {
+        return {
+          startIndex: 0,
+          endIndex: Math.max(0, this.totalRows() - 1),
+          offsetTop: 0,
+          offsetBottom: 0
+        };
+      }
+      return computeVisibleRange(
+        this.scrollTop(),
+        this.rowHeight(),
+        this.containerHeight(),
+        this.totalRows(),
+        this.overscan()
+      );
+    });
+    /** Total scrollable height in pixels. */
+    this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()));
+    this.destroyRef.onDestroy(() => {
+      this.containerEl = null;
+    });
+  }
+  /**
+   * Set the scrollable container element.
+   * Used for programmatic scrolling (scrollToRow).
+   */
+  setContainer(el) {
+    this.containerEl = el;
+  }
+  /**
+   * Call this from the container's scroll event handler.
+   */
+  onScroll(event) {
+    const target = event.target;
+    this.scrollTop.set(target.scrollTop);
+  }
+  /**
+   * Scroll to a specific row index.
+   * @param index - The row index to scroll to.
+   * @param align - Where to position the row: 'start' (top), 'center', or 'end' (bottom). Default: 'start'.
+   */
+  scrollToRow(index, align = "start") {
+    const container = this.containerEl;
+    if (!container) return;
+    const targetScrollTop = getScrollTopForRow(
+      index,
+      this.rowHeight(),
+      this.containerHeight(),
+      align
+    );
+    container.scrollTo({ top: targetScrollTop, behavior: "auto" });
+  }
+  /**
+   * Update the virtual scroll configuration.
+   */
+  updateConfig(updates) {
+    this.config.update((prev) => ({ ...prev, ...updates }));
+  }
+};
+VirtualScrollService = __decorateClass([
+  Injectable()
+], VirtualScrollService);
+var PANEL_LABELS = { columns: "Columns", filters: "Filters" };
+var SideBarComponent = class {
+  constructor() {
+    this.sideBarProps = null;
+    this.panelLabels = PANEL_LABELS;
+  }
+  onTabClick(panel) {
+    const props = this.sideBarProps;
+    if (props) props.onPanelChange(props.activePanel === panel ? null : panel);
+  }
+  allVisible() {
+    const props = this.sideBarProps;
+    if (!props) return false;
+    return props.columns.every((c) => props.visibleColumns.has(c.columnId));
+  }
+  onSelectAll() {
+    const props = this.sideBarProps;
+    if (!props) return;
+    const next = new Set(props.visibleColumns);
+    props.columns.forEach((c) => next.add(c.columnId));
+    props.onSetVisibleColumns(next);
+  }
+  onClearAll() {
+    const props = this.sideBarProps;
+    if (!props) return;
+    const next = /* @__PURE__ */ new Set();
+    props.columns.forEach((c) => {
+      if (c.required && props.visibleColumns.has(c.columnId)) next.add(c.columnId);
+    });
+    props.onSetVisibleColumns(next);
+  }
+  onVisibilityChange(columnKey, visible) {
+    this.sideBarProps?.onVisibilityChange(columnKey, visible);
+  }
+  getTextFilterValue(filterField) {
+    const filters = this.sideBarProps?.filters;
+    const fv = filters?.[filterField];
+    return fv?.type === "text" ? fv.value : "";
+  }
+  onTextFilterChange(filterField, value) {
+    this.sideBarProps?.onFilterChange(filterField, value ? { type: "text", value } : void 0);
+  }
+  getDateFrom(filterField) {
+    const fv = this.sideBarProps?.filters?.[filterField];
+    return fv?.type === "date" ? fv.value.from ?? "" : "";
+  }
+  getDateTo(filterField) {
+    const fv = this.sideBarProps?.filters?.[filterField];
+    return fv?.type === "date" ? fv.value.to ?? "" : "";
+  }
+  onDateFromChange(filterField, value) {
+    const fv = this.sideBarProps?.filters?.[filterField];
+    const existing = fv?.type === "date" ? fv.value : {};
+    const from = value || void 0;
+    const to = existing.to;
+    this.sideBarProps?.onFilterChange(filterField, from || to ? { type: "date", value: { from, to } } : void 0);
+  }
+  onDateToChange(filterField, value) {
+    const fv = this.sideBarProps?.filters?.[filterField];
+    const existing = fv?.type === "date" ? fv.value : {};
+    const to = value || void 0;
+    const from = existing.from;
+    this.sideBarProps?.onFilterChange(filterField, from || to ? { type: "date", value: { from, to } } : void 0);
+  }
+  getFilterOptions(filterField) {
+    return this.sideBarProps?.filterOptions?.[filterField] ?? [];
+  }
+  isMultiSelectChecked(filterField, opt) {
+    const fv = this.sideBarProps?.filters?.[filterField];
+    return fv?.type === "multiSelect" ? fv.value.includes(opt) : false;
+  }
+  onMultiSelectChange(filterField, opt, checked) {
+    const fv = this.sideBarProps?.filters?.[filterField];
+    const current = fv?.type === "multiSelect" ? fv.value : [];
+    const next = checked ? [...current, opt] : current.filter((v) => v !== opt);
+    this.sideBarProps?.onFilterChange(filterField, next.length > 0 ? { type: "multiSelect", value: next } : void 0);
+  }
+};
+__decorateClass([
+  Input()
+], SideBarComponent.prototype, "sideBarProps", 2);
+SideBarComponent = __decorateClass([
+  Component({
+    selector: "ogrid-sidebar",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgTemplateOutlet],
+    styles: [`
+    .ogrid-sidebar-root { display: flex; flex-direction: row; flex-shrink: 0; }
+    .ogrid-sidebar-tab-strip {
+      display: flex; flex-direction: column;
+      width: var(--ogrid-sidebar-tab-size, 36px);
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-tab {
+      width: var(--ogrid-sidebar-tab-size, 36px);
+      height: var(--ogrid-sidebar-tab-size, 36px);
+      border: none; cursor: pointer;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); font-size: 14px;
+      display: flex; align-items: center; justify-content: center;
+      background: transparent; font-weight: normal;
+    }
+    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #ffffff); font-weight: bold; }
+    .ogrid-sidebar-panel {
+      width: var(--ogrid-sidebar-panel-width, 240px);
+      display: flex; flex-direction: column; overflow: hidden;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-panel-header {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); font-weight: 600;
+    }
+    .ogrid-sidebar-panel-close {
+      border: none; background: transparent; cursor: pointer;
+      font-size: 16px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-sidebar-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
+    .ogrid-sidebar-actions { display: flex; gap: 8px; margin-bottom: 8px; }
+    .ogrid-sidebar-action-btn {
+      flex: 1; cursor: pointer;
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px; padding: 4px 8px;
+    }
+    .ogrid-sidebar-col-label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
+    .ogrid-sidebar-empty { color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5)); font-style: italic; }
+    .ogrid-sidebar-filter-group { margin-bottom: 12px; }
+    .ogrid-sidebar-filter-label { font-weight: 500; margin-bottom: 4px; font-size: 13px; }
+    .ogrid-sidebar-text-input {
+      width: 100%; box-sizing: border-box; padding: 4px 6px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
+    }
+    .ogrid-sidebar-date-row { display: flex; flex-direction: column; gap: 4px; }
+    .ogrid-sidebar-date-label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
+    .ogrid-sidebar-date-input {
+      flex: 1; padding: 2px 4px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
+    }
+    .ogrid-sidebar-multiselect-list { max-height: 120px; overflow-y: auto; }
+    .ogrid-sidebar-multiselect-item {
+      display: flex; align-items: center; gap: 4px;
+      padding: 1px 0; cursor: pointer; font-size: 13px;
+    }
+  `],
+    template: `
+    <div class="ogrid-sidebar-root" role="complementary" aria-label="Side bar">
+      @if (sideBarProps?.position === 'left') {
+        <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
+      }
+      @if (sideBarProps?.position === 'right') {
+        <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
+        <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
+      }
+    </div>
+
+    <ng-template #tabStripTpl>
+      <div
+        class="ogrid-sidebar-tab-strip"
+        [class.ogrid-sidebar-tab-strip--left]="sideBarProps?.position === 'left'"
+        [class.ogrid-sidebar-tab-strip--right]="sideBarProps?.position === 'right'"
+        role="tablist"
+        aria-label="Side bar tabs"
+      >
+        @for (panel of sideBarProps?.panels ?? []; track panel) {
+          <button
+            role="tab"
+            class="ogrid-sidebar-tab"
+            [class.ogrid-sidebar-tab--active]="sideBarProps?.activePanel === panel"
+            [attr.aria-selected]="sideBarProps?.activePanel === panel"
+            [attr.aria-label]="panelLabels[panel]"
+            (click)="onTabClick(panel)"
+            [title]="panelLabels[panel]"
+          >
+            {{ panel === 'columns' ? '\u2261' : '\u2A65' }}
+          </button>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #panelContentTpl>
+      @if (sideBarProps?.activePanel) {
+        <div
+          role="tabpanel"
+          class="ogrid-sidebar-panel"
+          [class.ogrid-sidebar-panel--left]="sideBarProps?.position === 'left'"
+          [class.ogrid-sidebar-panel--right]="sideBarProps?.position === 'right'"
+          [attr.aria-label]="panelLabels[sideBarProps!.activePanel!]"
+        >
+          <div class="ogrid-sidebar-panel-header">
+            <span>{{ panelLabels[sideBarProps!.activePanel!] }}</span>
+            <button (click)="sideBarProps?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
+          </div>
+          <div class="ogrid-sidebar-panel-body">
+            @if (sideBarProps?.activePanel === 'columns') {
+              <div class="ogrid-sidebar-actions">
+                <button (click)="onSelectAll()" [disabled]="allVisible()" class="ogrid-sidebar-action-btn">Select All</button>
+                <button (click)="onClearAll()" class="ogrid-sidebar-action-btn">Clear All</button>
+              </div>
+              @for (col of sideBarProps?.columns ?? []; track col.columnId) {
+                <label class="ogrid-sidebar-col-label">
+                  <input type="checkbox" [checked]="sideBarProps?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
+                  <span>{{ col.name }}</span>
+                </label>
+              }
+            }
+            @if (sideBarProps?.activePanel === 'filters') {
+              @if ((sideBarProps?.filterableColumns ?? []).length === 0) {
+                <div class="ogrid-sidebar-empty">No filterable columns</div>
+              }
+              @for (col of sideBarProps?.filterableColumns ?? []; track col.columnId) {
+                <div class="ogrid-sidebar-filter-group">
+                  <div class="ogrid-sidebar-filter-label">{{ col.name }}</div>
+                  @if (col.filterType === 'text') {
+                    <input
+                      type="text"
+                      class="ogrid-sidebar-text-input"
+                      [value]="getTextFilterValue(col.filterField)"
+                      (input)="onTextFilterChange(col.filterField, $any($event.target).value)"
+                      [placeholder]="'Filter ' + col.name + '...'"
+                      [attr.aria-label]="'Filter ' + col.name"
+                    />
+                  }
+                  @if (col.filterType === 'date') {
+                    <div class="ogrid-sidebar-date-row">
+                      <label class="ogrid-sidebar-date-label">
+                        From:
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" />
+                      </label>
+                      <label class="ogrid-sidebar-date-label">
+                        To:
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" />
+                      </label>
+                    </div>
+                  }
+                  @if (col.filterType === 'multiSelect') {
+                    <div class="ogrid-sidebar-multiselect-list" role="group" [attr.aria-label]="col.name + ' options'">
+                      @for (opt of getFilterOptions(col.filterField); track opt) {
+                        <label class="ogrid-sidebar-multiselect-item">
+                          <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, $any($event.target).checked)" />
+                          <span>{{ opt }}</span>
+                        </label>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </div>
+      }
+    </ng-template>
+  `
+  })
+], SideBarComponent);
+
+// src/styles/ogrid-theme-vars.ts
+var OGRID_THEME_VARS_CSS = `
+/* \u2500\u2500\u2500 OGrid Theme Variables \u2500\u2500\u2500 */
+:root {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-header-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-selection-color: #217346;
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  }
+}
+[data-theme="dark"] {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-header-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+}`;
+
+// src/components/ogrid-layout.component.ts
+var OGridLayoutComponent = class {
+  constructor() {
+    this.hasToolbar = false;
+    this.hasToolbarBelow = false;
+    this.hasPagination = false;
+    this.sideBar = null;
+    this.fullScreen = false;
+    this.isFullScreen = false;
+    this.borderRadius = GRID_BORDER_RADIUS;
+    this.escListener = null;
+  }
+  get rootClass() {
+    const base = (this.className ?? "") + " ogrid-layout-root";
+    return this.isFullScreen ? base + " ogrid-layout-root--fullscreen" : base;
+  }
+  toggleFullScreen() {
+    this.isFullScreen = !this.isFullScreen;
+    if (this.isFullScreen) {
+      this.escListener = (e) => {
+        if (e.key === "Escape") {
+          this.isFullScreen = false;
+          this.removeEscListener();
+        }
+      };
+      document.addEventListener("keydown", this.escListener);
+    } else {
+      this.removeEscListener();
+    }
+  }
+  removeEscListener() {
+    if (this.escListener) {
+      document.removeEventListener("keydown", this.escListener);
+      this.escListener = null;
+    }
+  }
+};
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "className", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "hasToolbar", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "hasToolbarBelow", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "hasPagination", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "sideBar", 2);
+__decorateClass([
+  Input()
+], OGridLayoutComponent.prototype, "fullScreen", 2);
+OGridLayoutComponent = __decorateClass([
+  Component({
+    selector: "ogrid-layout",
+    standalone: true,
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [SideBarComponent],
+    styles: [OGRID_THEME_VARS_CSS, `
+    :host { display: block; height: 100%; }
+    .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
+    .ogrid-layout-root--fullscreen {
+      position: fixed; inset: 0; z-index: 9999;
+      background: var(--ogrid-bg, #ffffff);
+    }
+    .ogrid-layout-container {
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      overflow: hidden; display: flex; flex-direction: column;
+      flex: 1; min-height: 0; background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-layout-root--fullscreen .ogrid-layout-container {
+      border: none; border-radius: 0 !important;
+    }
+    .ogrid-layout-toolbar {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+      gap: 8px; flex-wrap: wrap; min-height: 0;
+    }
+    .ogrid-layout-toolbar--has-below { border-bottom: none; }
+    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-layout-toolbar-left { display: flex; align-items: center; gap: 8px; }
+    .ogrid-layout-toolbar-right { display: flex; align-items: center; gap: 8px; }
+    .ogrid-layout-toolbar-below {
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      padding: 6px 12px; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }
+    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+    .ogrid-layout-footer {
+      border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); padding: 6px 12px;
+    }
+    .ogrid-fullscreen-btn {
+      background: none; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-radius: 4px; padding: 4px 6px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-fullscreen-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+  `],
+    template: `
+    <div [class]="rootClass">
+      <div class="ogrid-layout-container" [style.border-radius.px]="borderRadius">
+        <!-- Toolbar strip -->
+        @if (hasToolbar || fullScreen) {
+          <div
+            class="ogrid-layout-toolbar"
+            [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow"
+            [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow"
+          >
+            <div class="ogrid-layout-toolbar-left">
+              <ng-content select="[toolbar]"></ng-content>
+            </div>
+            <div class="ogrid-layout-toolbar-right">
+              <ng-content select="[toolbarEnd]"></ng-content>
+              @if (fullScreen) {
+                <button type="button" class="ogrid-fullscreen-btn"
+                  [attr.title]="isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
+                  [attr.aria-label]="isFullScreen ? 'Exit fullscreen' : 'Fullscreen'"
+                  (click)="toggleFullScreen()">
+                  @if (isFullScreen) {
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="4 10 0 10 0 14"></polyline>
+                      <polyline points="12 6 16 6 16 2"></polyline>
+                      <line x1="0" y1="10" x2="4" y2="6"></line>
+                      <line x1="16" y1="6" x2="12" y2="10"></line>
+                    </svg>
+                  } @else {
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                      <polyline points="10 2 14 2 14 6"></polyline>
+                      <polyline points="6 14 2 14 2 10"></polyline>
+                      <line x1="14" y1="2" x2="10" y2="6"></line>
+                      <line x1="2" y1="14" x2="6" y2="10"></line>
+                    </svg>
+                  }
+                </button>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Secondary toolbar row -->
+        @if (hasToolbarBelow) {
+          <div class="ogrid-layout-toolbar-below">
+            <ng-content select="[toolbarBelow]"></ng-content>
+          </div>
+        }
+
+        <!-- Grid area -->
+        <div class="ogrid-layout-grid-area">
+          @if (sideBar && sideBar.position === 'left') {
+            <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
+          }
+          <div class="ogrid-layout-grid-content">
+            <ng-content></ng-content>
+          </div>
+          @if (sideBar && sideBar.position !== 'left') {
+            <ogrid-sidebar [sideBarProps]="sideBar"></ogrid-sidebar>
+          }
+        </div>
+
+        <!-- Footer strip (pagination) -->
+        @if (hasPagination) {
+          <div class="ogrid-layout-footer">
+            <ng-content select="[pagination]"></ng-content>
+          </div>
+        }
+      </div>
+    </div>
+  `
+  })
+], OGridLayoutComponent);
+var StatusBarComponent = class {
+  constructor() {
+    this.filteredCount = void 0;
+    this.selectedCount = void 0;
+    this.selectedCellCount = void 0;
+    this.aggregation = void 0;
+    this.suppressRowCount = void 0;
+    this.classNames = void 0;
+    this.cachedParts = [];
+  }
+  ngOnChanges() {
+    this.cachedParts = getStatusBarParts({
+      totalCount: this.totalCount,
+      filteredCount: this.filteredCount,
+      selectedCount: this.selectedCount,
+      selectedCellCount: this.selectedCellCount,
+      aggregation: this.aggregation ?? void 0,
+      suppressRowCount: this.suppressRowCount
+    });
+  }
+  getParts() {
+    return this.cachedParts;
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], StatusBarComponent.prototype, "totalCount", 2);
+__decorateClass([
+  Input()
+], StatusBarComponent.prototype, "filteredCount", 2);
+__decorateClass([
+  Input()
+], StatusBarComponent.prototype, "selectedCount", 2);
+__decorateClass([
+  Input()
+], StatusBarComponent.prototype, "selectedCellCount", 2);
+__decorateClass([
+  Input()
+], StatusBarComponent.prototype, "aggregation", 2);
+__decorateClass([
+  Input()
+], StatusBarComponent.prototype, "suppressRowCount", 2);
+__decorateClass([
+  Input()
+], StatusBarComponent.prototype, "classNames", 2);
+StatusBarComponent = __decorateClass([
+  Component({
+    selector: "ogrid-status-bar",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div [class]="classNames?.statusBar ?? ''" role="status" aria-live="polite">
+      @for (part of getParts(); track part.key) {
+        <span [class]="classNames?.statusBarItem ?? ''">
+          <span [class]="classNames?.statusBarLabel ?? ''">{{ part.label }}</span>
+          <span [class]="classNames?.statusBarValue ?? ''">{{ part.value.toLocaleString() }}</span>
+        </span>
+      }
+    </div>
+  `
+  })
+], StatusBarComponent);
+var GridContextMenuComponent = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    this.hasSelection = false;
+    this.canUndoProp = false;
+    this.canRedoProp = false;
+    this.classNames = void 0;
+    this.copyAction = new EventEmitter();
+    this.cutAction = new EventEmitter();
+    this.pasteAction = new EventEmitter();
+    this.selectAllAction = new EventEmitter();
+    this.undoAction = new EventEmitter();
+    this.redoAction = new EventEmitter();
+    this.closeAction = new EventEmitter();
+    this.menuItems = GRID_CONTEXT_MENU_ITEMS;
+    this.formatShortcutFn = formatShortcut;
+    this.clickOutsideHandler = (e) => {
+      const el = this.menuRef?.nativeElement;
+      if (el && !el.contains(e.target)) this.closeAction.emit();
+    };
+    this.keyDownHandler = (e) => {
+      if (e.key === "Escape") this.closeAction.emit();
+    };
+    document.addEventListener("mousedown", this.clickOutsideHandler, true);
+    document.addEventListener("keydown", this.keyDownHandler, true);
+    this.destroyRef.onDestroy(() => {
+      document.removeEventListener("mousedown", this.clickOutsideHandler, true);
+      document.removeEventListener("keydown", this.keyDownHandler, true);
+    });
+  }
+  isDisabled(item) {
+    if (item.disabledWhenNoSelection && !this.hasSelection) return true;
+    if (item.id === "undo" && !this.canUndoProp) return true;
+    if (item.id === "redo" && !this.canRedoProp) return true;
+    return false;
+  }
+  onItemClick(id) {
+    switch (id) {
+      case "copy":
+        this.copyAction.emit();
+        break;
+      case "cut":
+        this.cutAction.emit();
+        break;
+      case "paste":
+        this.pasteAction.emit();
+        break;
+      case "selectAll":
+        this.selectAllAction.emit();
+        break;
+      case "undo":
+        this.undoAction.emit();
+        break;
+      case "redo":
+        this.redoAction.emit();
+        break;
+    }
+    this.closeAction.emit();
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], GridContextMenuComponent.prototype, "x", 2);
+__decorateClass([
+  Input({ required: true })
+], GridContextMenuComponent.prototype, "y", 2);
+__decorateClass([
+  Input()
+], GridContextMenuComponent.prototype, "hasSelection", 2);
+__decorateClass([
+  Input()
+], GridContextMenuComponent.prototype, "canUndoProp", 2);
+__decorateClass([
+  Input()
+], GridContextMenuComponent.prototype, "canRedoProp", 2);
+__decorateClass([
+  Input()
+], GridContextMenuComponent.prototype, "classNames", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "copyAction", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "cutAction", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "pasteAction", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "selectAllAction", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "undoAction", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "redoAction", 2);
+__decorateClass([
+  Output()
+], GridContextMenuComponent.prototype, "closeAction", 2);
+__decorateClass([
+  ViewChild("menuRef")
+], GridContextMenuComponent.prototype, "menuRef", 2);
+GridContextMenuComponent = __decorateClass([
+  Component({
+    selector: "ogrid-context-menu",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div
+      #menuRef
+      [class]="classNames?.contextMenu ?? ''"
+      role="menu"
+      [style.left.px]="x"
+      [style.top.px]="y"
+      aria-label="Grid context menu"
+    >
+      @for (item of menuItems; track item.id) {
+        @if (item.dividerBefore) {
+          <div [class]="classNames?.contextMenuDivider ?? ''"></div>
+        }
+        <button
+          type="button"
+          [class]="classNames?.contextMenuItem ?? ''"
+          (click)="onItemClick(item.id)"
+          [disabled]="isDisabled(item)"
+        >
+          <span [class]="classNames?.contextMenuItemLabel ?? ''">{{ item.label }}</span>
+          @if (item.shortcut) {
+            <span [class]="classNames?.contextMenuItemShortcut ?? ''">
+              {{ formatShortcutFn(item.shortcut) }}
+            </span>
+          }
+        </button>
+      }
+    </div>
+  `
+  })
+], GridContextMenuComponent);
+var MarchingAntsOverlayComponent = class {
+  constructor() {
+    this.destroyRef = inject(DestroyRef);
+    this.selectionRange = null;
+    this.copyRange = null;
+    this.cutRange = null;
+    this.colOffset = 0;
+    this.columnSizingVersion = 0;
+    this.items = [];
+    this.visibleColumns = void 0;
+    this.columnOrder = void 0;
+    this.selRect = signal(null);
+    this.clipRect = signal(null);
+    this.rafId = 0;
+    this.resizeObserver = null;
+    injectGlobalStyles("ogrid-marching-ants-keyframes", "@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}");
+    this.destroyRef.onDestroy(() => {
+      if (this.rafId) cancelAnimationFrame(this.rafId);
+      if (this.resizeObserver) this.resizeObserver.disconnect();
+    });
+  }
+  ngOnChanges(_changes) {
+    this.recalculate();
+  }
+  recalculate() {
+    const container = this.containerEl;
+    const selRange = this.selectionRange;
+    const clipRange = this.copyRange ?? this.cutRange;
+    const colOff = this.colOffset;
+    void this.columnSizingVersion;
+    void this.items;
+    void this.visibleColumns;
+    void this.columnOrder;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (!selRange && !clipRange) {
+      this.selRect.set(null);
+      this.clipRect.set(null);
+      return;
+    }
+    const measureAll = () => {
+      if (!container) {
+        this.selRect.set(null);
+        this.clipRect.set(null);
+        return;
+      }
+      this.selRect.set(selRange ? measureRange(container, selRange, colOff) : null);
+      this.clipRect.set(clipRange ? measureRange(container, clipRange, colOff) : null);
+    };
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.rafId = requestAnimationFrame(measureAll);
+    if (container) {
+      this.resizeObserver = new ResizeObserver(measureAll);
+      this.resizeObserver.observe(container);
+    }
+  }
+  clipRangeMatchesSel() {
+    const selRange = this.selectionRange;
+    const clipRange = this.copyRange ?? this.cutRange;
+    return selRange != null && clipRange != null && selRange.startRow === clipRange.startRow && selRange.startCol === clipRange.startCol && selRange.endRow === clipRange.endRow && selRange.endCol === clipRange.endCol;
+  }
+  max0(n) {
+    return Math.max(0, n);
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], MarchingAntsOverlayComponent.prototype, "containerEl", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "selectionRange", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "copyRange", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "cutRange", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "colOffset", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "columnSizingVersion", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "items", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "visibleColumns", 2);
+__decorateClass([
+  Input()
+], MarchingAntsOverlayComponent.prototype, "columnOrder", 2);
+MarchingAntsOverlayComponent = __decorateClass([
+  Component({
+    selector: "ogrid-marching-ants-overlay",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styles: [`
+    .ogrid-marching-ants-svg { position: absolute; pointer-events: none; overflow: visible; }
+    .ogrid-marching-ants-svg--selection { z-index: 4; }
+    .ogrid-marching-ants-svg--clip { z-index: 5; }
+  `],
+    template: `
+    @if (selRect() && !clipRangeMatchesSel()) {
+      <svg
+        class="ogrid-marching-ants-svg ogrid-marching-ants-svg--selection"
+        [style.top.px]="selRect()!.top"
+        [style.left.px]="selRect()!.left"
+        [style.width.px]="selRect()!.width"
+        [style.height.px]="selRect()!.height"
+        aria-hidden="true"
+      >
+        <rect
+          x="1" y="1"
+          [attr.width]="max0(selRect()!.width - 2)"
+          [attr.height]="max0(selRect()!.height - 2)"
+          fill="none"
+          stroke="var(--ogrid-selection, #217346)"
+          stroke-width="2"
+        />
+      </svg>
+    }
+    @if (clipRect()) {
+      <svg
+        class="ogrid-marching-ants-svg ogrid-marching-ants-svg--clip"
+        [style.top.px]="clipRect()!.top"
+        [style.left.px]="clipRect()!.left"
+        [style.width.px]="clipRect()!.width"
+        [style.height.px]="clipRect()!.height"
+        aria-hidden="true"
+      >
+        <rect
+          x="1" y="1"
+          [attr.width]="max0(clipRect()!.width - 2)"
+          [attr.height]="max0(clipRect()!.height - 2)"
+          fill="none"
+          stroke="var(--ogrid-selection, #217346)"
+          stroke-width="2"
+          stroke-dasharray="4 4"
+          style="animation: ogrid-marching-ants 0.5s linear infinite"
+        />
+      </svg>
+    }
+  `
+  })
+], MarchingAntsOverlayComponent);
+var EmptyStateComponent = class {
+  constructor() {
+    this.message = void 0;
+    this.hasActiveFilters = false;
+    this.render = void 0;
+    this.clearAll = new EventEmitter();
+  }
+};
+__decorateClass([
+  Input()
+], EmptyStateComponent.prototype, "message", 2);
+__decorateClass([
+  Input()
+], EmptyStateComponent.prototype, "hasActiveFilters", 2);
+__decorateClass([
+  Input()
+], EmptyStateComponent.prototype, "render", 2);
+__decorateClass([
+  Output()
+], EmptyStateComponent.prototype, "clearAll", 2);
+EmptyStateComponent = __decorateClass([
+  Component({
+    selector: "ogrid-empty-state",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgTemplateOutlet],
+    styles: [`
+    .ogrid-empty-state-clear-btn {
+      background: none; border: none; color: inherit;
+      text-decoration: underline; cursor: pointer; padding: 0; font: inherit;
+    }
+  `],
+    template: `
+    @if (render) {
+      <ng-container [ngTemplateOutlet]="render"></ng-container>
+    } @else if (message) {
+      {{ message }}
+    } @else if (hasActiveFilters) {
+      No items match your current filters. Try adjusting your search or
+      <button type="button" (click)="clearAll.emit()" class="ogrid-empty-state-clear-btn">
+        clear all filters
+      </button>
+      to see all items.
+    } @else {
+      There are no items available at this time.
+    }
+  `
+  })
+], EmptyStateComponent);
+var BaseOGridComponent = class {
+  constructor() {
+    this.propsSignal = signal(void 0);
+    this.ogridService = inject(OGridService);
+    effect(() => {
+      const p = this.propsSignal();
+      if (p) this.ogridService.configure(p);
+    });
+  }
+  set props(value) {
+    this.propsSignal.set(value);
+  }
+  get showToolbar() {
+    return this.ogridService.columnChooserPlacement() === "toolbar" || this.ogridService.toolbar() != null || this.ogridService.fullScreen();
+  }
+  onPageSizeChange(size) {
+    this.ogridService.pagination().setPageSize(size);
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BaseOGridComponent.prototype, "props", 1);
+function createDebouncedSignal(source, delayMs) {
+  const debouncedValue = signal(source());
+  effect((onCleanup) => {
+    const currentValue = source();
+    const timeoutId = setTimeout(() => {
+      debouncedValue.set(currentValue);
+    }, delayMs);
+    onCleanup(() => clearTimeout(timeoutId));
+  });
+  return debouncedValue;
+}
+function createDebouncedCallback(fn, delayMs) {
+  let timeoutId = null;
+  return ((...args) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+      timeoutId = null;
+    }, delayMs);
+  });
+}
+
+// src/utils/latestRef.ts
+function createLatestCallback(fn) {
+  return ((...args) => {
+    return fn()(...args);
+  });
+}
+
+// src/components/base-datagrid-table.component.ts
+var BaseDataGridTableComponent = class {
+  constructor() {
+    this.stateService = inject(DataGridStateService);
+    this.columnReorderService = inject(ColumnReorderService);
+    this.virtualScrollService = inject(VirtualScrollService);
+    this.lastMouseShift = false;
+    this.columnSizingVersion = signal(0);
+    /** Dirty flag — set when column layout changes, cleared after measurement. */
+    this.measureDirty = signal(true);
+    /** DOM-measured column widths from the last layout pass.
+     *  Used as a minWidth floor to prevent columns from shrinking
+     *  when new data loads (e.g. server-side pagination). */
+    this.measuredColumnWidths = signal({});
+    // Signal-backed view child elements — set from ngAfterViewInit.
+    // @ViewChild is a plain property (not a signal), so effects/computed that read it
+    // only evaluate once during construction when the ref is still undefined.
+    this.wrapperElSignal = signal(null);
+    this.tableContainerElSignal = signal(null);
+    // --- Delegated state ---
+    this.state = computed(() => this.stateService.getState());
+    // Intermediate computed signals — narrow slices of state() so leaf computeds
+    // only recompute when their specific sub-state changes.
+    this.layoutState = computed(() => this.state().layout);
+    this.rowSelectionState = computed(() => this.state().rowSelection);
+    this.editingState = computed(() => this.state().editing);
+    this.interactionState = computed(() => this.state().interaction);
+    this.contextMenuState = computed(() => this.state().contextMenu);
+    this.viewModelsState = computed(() => this.state().viewModels);
+    this.pinningState = computed(() => this.state().pinning);
+    this.tableContainerEl = computed(() => this.tableContainerElSignal());
+    this.items = computed(() => this.getProps()?.items ?? []);
+    this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item["id"]));
+    this.isLoading = computed(() => this.getProps()?.isLoading ?? false);
+    this.loadingMessage = computed(() => "Loading\u2026");
+    this.layoutModeFit = computed(() => (this.getProps()?.layoutMode ?? "fill") === "content");
+    this.rowHeightCssVar = computed(() => {
+      const rh = this.getProps()?.rowHeight;
+      return rh ? `${rh}px` : null;
+    });
+    this.ariaLabel = computed(() => this.getProps()?.["aria-label"] ?? "Data grid");
+    this.ariaLabelledBy = computed(() => this.getProps()?.["aria-labelledby"]);
+    this.stickyHeader = computed(() => this.getProps()?.stickyHeader ?? true);
+    this.emptyState = computed(() => this.getProps()?.emptyState);
+    this.currentPage = computed(() => this.getProps()?.currentPage ?? 1);
+    this.pageSize = computed(() => this.getProps()?.pageSize ?? 25);
+    this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0);
+    this.propsVisibleColumns = computed(() => this.getProps()?.visibleColumns);
+    this.propsColumnOrder = computed(() => this.getProps()?.columnOrder);
+    // State service outputs — read from narrow intermediate signals
+    this.visibleCols = computed(() => this.layoutState().visibleCols);
+    this.hasCheckboxCol = computed(() => this.layoutState().hasCheckboxCol);
+    this.hasRowNumbersCol = computed(() => this.layoutState().hasRowNumbersCol);
+    this.colOffset = computed(() => this.layoutState().colOffset);
+    this.containerWidth = computed(() => this.layoutState().containerWidth);
+    this.minTableWidth = computed(() => this.layoutState().minTableWidth);
+    this.desiredTableWidth = computed(() => this.layoutState().desiredTableWidth);
+    this.columnSizingOverrides = computed(() => this.layoutState().columnSizingOverrides);
+    this.selectedRowIds = computed(() => this.rowSelectionState().selectedRowIds);
+    this.allSelected = computed(() => this.rowSelectionState().allSelected);
+    this.someSelected = computed(() => this.rowSelectionState().someSelected);
+    this.editingCell = computed(() => this.editingState().editingCell);
+    this.pendingEditorValue = computed(() => this.editingState().pendingEditorValue);
+    this.activeCell = computed(() => this.interactionState().activeCell);
+    this.selectionRange = computed(() => this.interactionState().selectionRange);
+    this.hasCellSelection = computed(() => this.interactionState().hasCellSelection);
+    this.cutRange = computed(() => this.interactionState().cutRange);
+    this.copyRange = computed(() => this.interactionState().copyRange);
+    this.canUndo = computed(() => this.interactionState().canUndo);
+    this.canRedo = computed(() => this.interactionState().canRedo);
+    this.isDragging = computed(() => this.interactionState().isDragging);
+    this.menuPosition = computed(() => this.contextMenuState().menuPosition);
+    this.statusBarConfig = computed(() => this.viewModelsState().statusBarConfig);
+    this.showEmptyInGrid = computed(() => this.viewModelsState().showEmptyInGrid);
+    this.headerFilterInput = computed(() => this.viewModelsState().headerFilterInput);
+    this.cellDescriptorInput = computed(() => this.viewModelsState().cellDescriptorInput);
+    // Pinning state
+    this.pinnedColumnsMap = computed(() => this.pinningState().pinnedColumns);
+    // Virtual scrolling
+    this.vsEnabled = computed(() => this.virtualScrollService.isActive());
+    this.vsVisibleRange = computed(() => this.virtualScrollService.visibleRange());
+    this.vsTopSpacerHeight = computed(() => {
+      if (!this.vsEnabled()) return 0;
+      return this.vsVisibleRange().offsetTop;
+    });
+    this.vsBottomSpacerHeight = computed(() => {
+      if (!this.vsEnabled()) return 0;
+      return this.vsVisibleRange().offsetBottom;
+    });
+    this.vsVisibleItems = computed(() => {
+      const items = this.items();
+      if (!this.vsEnabled()) return items;
+      const range = this.vsVisibleRange();
+      return items.slice(range.startIndex, Math.min(range.endIndex + 1, items.length));
+    });
+    this.vsStartIndex = computed(() => {
+      if (!this.vsEnabled()) return 0;
+      return this.vsVisibleRange().startIndex;
+    });
+    // Popover editing
+    this.popoverAnchorEl = computed(() => this.editingState().popoverAnchorEl);
+    this.pendingEditorValueForPopover = computed(() => this.editingState().pendingEditorValue);
+    this.allowOverflowX = computed(() => {
+      const p = this.getProps();
+      if (p?.suppressHorizontalScroll) return false;
+      const cw = this.containerWidth();
+      const mtw = this.minTableWidth();
+      const dtw = this.desiredTableWidth();
+      return cw > 0 && (mtw > cw || dtw > cw);
+    });
+    this.selectionCellCount = computed(() => {
+      const sr = this.selectionRange();
+      if (!sr) return void 0;
+      return (Math.abs(sr.endRow - sr.startRow) + 1) * (Math.abs(sr.endCol - sr.startCol) + 1);
+    });
+    // Header rows from column definition
+    this.headerRows = computed(() => {
+      const p = this.getProps();
+      if (!p) return [];
+      return buildHeaderRows(p.columns, p.visibleColumns);
+    });
+    // Pre-computed column layouts
+    this.columnLayouts = computed(() => {
+      const cols = this.visibleCols();
+      const props = this.getProps();
+      const pinnedCols = props?.pinnedColumns ?? {};
+      const measuredWidths = this.measuredColumnWidths();
+      const sizingOverrides = this.columnSizingOverrides();
+      return cols.map((col) => {
+        const runtimePinned = pinnedCols[col.columnId];
+        const pinnedLeft = runtimePinned === "left" || col.pinned === "left";
+        const pinnedRight = runtimePinned === "right" || col.pinned === "right";
+        const w = this.getColumnWidth(col);
+        const hasResizeOverride = !!sizingOverrides[col.columnId];
+        const measuredW = measuredWidths[col.columnId];
+        const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const effectiveMinWidth = hasResizeOverride ? w : Math.max(baseMinWidth, measuredW ?? 0);
+        return {
+          col,
+          pinnedLeft,
+          pinnedRight,
+          minWidth: effectiveMinWidth,
+          width: w
+        };
+      });
+    });
+    // Compute sticky offsets for pinned columns (single pass from both ends)
+    this.pinningOffsets = computed(() => {
+      const layouts = this.columnLayouts();
+      const leftOffsets = {};
+      const rightOffsets = {};
+      let leftAcc = 0;
+      if (this.hasCheckboxCol()) leftAcc += CHECKBOX_COLUMN_WIDTH;
+      if (this.hasRowNumbersCol()) leftAcc += ROW_NUMBER_COLUMN_WIDTH;
+      let rightAcc = 0;
+      const len = layouts.length;
+      for (let i = 0; i < len; i++) {
+        const leftLayout = layouts[i];
+        if (leftLayout.pinnedLeft) {
+          leftOffsets[leftLayout.col.columnId] = leftAcc;
+          leftAcc += leftLayout.width + CELL_PADDING;
+        }
+        const ri = len - 1 - i;
+        const rightLayout = layouts[ri];
+        if (rightLayout.pinnedRight) {
+          rightOffsets[rightLayout.col.columnId] = rightAcc;
+          rightAcc += rightLayout.width + CELL_PADDING;
+        }
+      }
+      return { leftOffsets, rightOffsets };
+    });
+    /** Memoized column menu handlers — avoids recreating objects on every CD cycle */
+    this.columnMenuHandlersMap = computed(() => {
+      const cols = this.visibleCols();
+      const map = /* @__PURE__ */ new Map();
+      for (const col of cols) {
+        map.set(col.columnId, this.buildColumnMenuHandlers(col.columnId));
+      }
+      return map;
+    });
+  }
+  /** Lifecycle hook — populate element signals from @ViewChild refs */
+  ngAfterViewInit() {
+    const wrapper = this.getWrapperRef()?.nativeElement ?? null;
+    const tableContainer = this.getTableContainerRef()?.nativeElement ?? null;
+    if (wrapper) this.wrapperElSignal.set(wrapper);
+    if (tableContainer) this.tableContainerElSignal.set(tableContainer);
+    this.measureColumnWidths();
+  }
+  /** Lifecycle hook — re-measure column widths only when layout changed */
+  ngAfterViewChecked() {
+    if (this.measureDirty()) {
+      this.measureDirty.set(false);
+      this.measureColumnWidths();
+    }
+  }
+  /** Measure actual th widths from the DOM and update the measuredColumnWidths signal.
+   *  Only updates the signal when values actually change, to avoid render loops. */
+  measureColumnWidths() {
+    const wrapper = this.getWrapperRef()?.nativeElement;
+    if (!wrapper) return;
+    const headerCells = wrapper.querySelectorAll("th[data-column-id]");
+    if (headerCells.length === 0) return;
+    const measured = {};
+    headerCells.forEach((cell) => {
+      const colId = cell.getAttribute("data-column-id");
+      if (colId) measured[colId] = cell.offsetWidth;
+    });
+    const prev = this.measuredColumnWidths();
+    let changed = Object.keys(measured).length !== Object.keys(prev).length;
+    if (!changed) {
+      for (const key in measured) {
+        if (prev[key] !== measured[key]) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    if (changed) {
+      this.measuredColumnWidths.set(measured);
+    }
+  }
+  /**
+   * Initialize base wiring effects. Must be called from subclass constructor.
+   *
+   * **Timing:** Angular requires `effect()` to be created inside an injection
+   * context (constructor or field initializer). On the first run, signals like
+   * `wrapperElSignal()` return `null` because the DOM hasn't been created yet.
+   * After `ngAfterViewInit` sets these signals, Angular's signal graph
+   * automatically re-runs each effect. The null guards inside each effect body
+   * ensure the first (null) run is a safe no-op.
+   *
+   * Sequence:
+   *   1. Constructor → `initBase()` → effects created, first run (signals null → no-ops)
+   *   2. `ngAfterViewInit` → `wrapperElSignal.set(el)` → effects re-run with real values
+   */
+  initBase() {
+    effect(() => {
+      const p = this.getProps();
+      if (p) this.stateService.props.set(p);
+    });
+    effect(() => {
+      const el = this.wrapperElSignal();
+      if (el) {
+        this.stateService.wrapperEl.set(el);
+        this.columnReorderService.wrapperEl.set(el);
+      }
+    });
+    effect(() => {
+      const p = this.getProps();
+      if (p) {
+        const cols = this.visibleCols();
+        this.columnReorderService.columns.set(cols);
+        this.columnReorderService.columnOrder.set(p.columnOrder);
+        this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
+        this.columnReorderService.enabled.set(p.columnReorder === true);
+      }
+    });
+    effect(() => {
+      this.visibleCols();
+      this.columnSizingOverrides();
+      this.columnSizingVersion();
+      this.measureDirty.set(true);
+    });
+    effect(() => {
+      const p = this.getProps();
+      if (p) {
+        this.virtualScrollService.totalRows.set(p.items.length);
+        if (p.virtualScroll) {
+          this.virtualScrollService.updateConfig({
+            enabled: p.virtualScroll.enabled,
+            rowHeight: p.virtualScroll.rowHeight,
+            overscan: p.virtualScroll.overscan
+          });
+        }
+      }
+    });
+    effect(() => {
+      const el = this.wrapperElSignal();
+      if (el) {
+        this.virtualScrollService.setContainer(el);
+        this.virtualScrollService.containerHeight.set(el.clientHeight);
+      }
+    });
+  }
+  // --- Helper methods ---
+  /** Lookup effective min-width for a column (includes measured width floor) */
+  getEffectiveMinWidth(col) {
+    const layout = this.columnLayouts().find((l) => l.col.columnId === col.columnId);
+    return layout?.minWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+  }
+  /**
+   * Returns derived cell interaction metadata (non-event attributes) for use in templates.
+   * Mirrors React's getCellInteractionProps for the Angular view layer.
+   * Event handlers (mousedown, click, dblclick, contextmenu) are still bound inline in templates.
+   */
+  getCellInteractionProps(descriptor) {
+    return {
+      tabIndex: descriptor.isActive ? 0 : -1,
+      dataRowIndex: descriptor.rowIndex,
+      dataColIndex: descriptor.globalColIndex,
+      dataInRange: descriptor.isInRange ? "true" : null,
+      role: descriptor.canEditAny ? "button" : null
+    };
+  }
+  asColumnDef(colDef) {
+    return colDef;
+  }
+  visibleColIndex(col) {
+    return this.visibleCols().indexOf(col);
+  }
+  getColumnWidth(col) {
+    const overrides = this.columnSizingOverrides();
+    const override = overrides[col.columnId];
+    if (override) return override.widthPx;
+    return col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+  }
+  getFilterConfig(col) {
+    return getHeaderFilterConfig(col, this.headerFilterInput());
+  }
+  /** Build column menu handler object for a single column */
+  buildColumnMenuHandlers(columnId) {
+    return {
+      onPinLeft: () => this.onPinColumn(columnId, "left"),
+      onPinRight: () => this.onPinColumn(columnId, "right"),
+      onUnpin: () => this.onUnpinColumn(columnId),
+      onSortAsc: () => this.onSortAsc(columnId),
+      onSortDesc: () => this.onSortDesc(columnId),
+      onClearSort: () => this.onClearSort(columnId),
+      onAutosizeThis: () => this.onAutosizeColumn(columnId),
+      onAutosizeAll: () => this.onAutosizeAllColumns(),
+      onClose: () => {
+      }
+    };
+  }
+  /** Get memoized handlers for a column */
+  getColumnMenuHandlersMemoized(columnId) {
+    return this.columnMenuHandlersMap().get(columnId) ?? this.buildColumnMenuHandlers(columnId);
+  }
+  getCellDescriptor(item, col, rowIndex, colIdx) {
+    return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
+  }
+  resolveCellContent(col, item, displayValue) {
+    return resolveCellDisplayContent(col, item, displayValue);
+  }
+  resolveCellStyleFn(col, item) {
+    return resolveCellStyle(col, item);
+  }
+  buildPopoverEditorProps(item, col, descriptor) {
+    return buildPopoverEditorProps(item, col, descriptor, this.pendingEditorValue(), {
+      setPendingEditorValue: (value) => this.setPendingEditorValue(value),
+      commitCellEdit: (item2, columnId, oldValue, newValue, rowIndex, globalColIndex) => this.commitEdit(item2, columnId, oldValue, newValue, rowIndex, globalColIndex),
+      cancelPopoverEdit: () => this.cancelPopoverEdit()
+    });
+  }
+  /** Check if a specific cell is the active cell (PrimeNG inline template helper). */
+  isActiveCell(rowIndex, colIdx) {
+    const ac = this.activeCell();
+    if (!ac) return false;
+    return ac.rowIndex === rowIndex && ac.columnIndex === colIdx + this.colOffset();
+  }
+  /** Check if a cell is within the current selection range (PrimeNG inline template helper). */
+  isInSelectionRange(rowIndex, colIdx) {
+    const range = this.selectionRange();
+    if (!range) return false;
+    const minR = Math.min(range.startRow, range.endRow);
+    const maxR = Math.max(range.startRow, range.endRow);
+    const minC = Math.min(range.startCol, range.endCol);
+    const maxC = Math.max(range.startCol, range.endCol);
+    return rowIndex >= minR && rowIndex <= maxR && colIdx >= minC && colIdx <= maxC;
+  }
+  /** Check if a cell is the selection end cell for fill handle display. */
+  isSelectionEndCell(rowIndex, colIdx) {
+    const range = this.selectionRange();
+    if (!range || this.isDragging() || this.copyRange() || this.cutRange()) return false;
+    return rowIndex === range.endRow && colIdx === range.endCol;
+  }
+  /** Get cell background color based on selection state. */
+  getCellBackground(rowIndex, colIdx) {
+    if (this.isInSelectionRange(rowIndex, colIdx)) return "var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))";
+    return null;
+  }
+  /** Resolve editor type from column definition. */
+  getEditorType(col, _item) {
+    if (col.cellEditor === "text" || col.cellEditor === "select" || col.cellEditor === "checkbox" || col.cellEditor === "date" || col.cellEditor === "richSelect") {
+      return col.cellEditor;
+    }
+    if (col.type === "date") return "date";
+    if (col.type === "boolean") return "checkbox";
+    return "text";
+  }
+  getSelectValues(col) {
+    const params = col.cellEditorParams;
+    if (params && typeof params === "object" && "values" in params) {
+      return params.values.map(String);
+    }
+    return [];
+  }
+  formatDateForInput(value) {
+    if (!value) return "";
+    const d = new Date(String(value));
+    if (Number.isNaN(d.getTime())) return "";
+    return d.toISOString().split("T")[0];
+  }
+  getPinnedLeftOffset(columnId) {
+    const offsets = this.pinningOffsets();
+    return offsets.leftOffsets[columnId] ?? null;
+  }
+  getPinnedRightOffset(columnId) {
+    const offsets = this.pinningOffsets();
+    return offsets.rightOffsets[columnId] ?? null;
+  }
+  // --- Virtual scroll event handler ---
+  onWrapperScroll(event) {
+    this.virtualScrollService.onScroll(event);
+  }
+  // --- Popover editor helpers ---
+  setPopoverAnchorEl(el) {
+    this.state().editing.setPopoverAnchorEl(el);
+  }
+  setPendingEditorValue(value) {
+    this.state().editing.setPendingEditorValue(value);
+  }
+  cancelPopoverEdit() {
+    this.state().editing.cancelPopoverEdit();
+  }
+  commitPopoverEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+    this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+  }
+  // --- Event handlers ---
+  onWrapperMouseDown(event) {
+    this.lastMouseShift = event.shiftKey;
+  }
+  onGridKeyDown(event) {
+    this.state().interaction.handleGridKeyDown(event);
+  }
+  onCellMouseDown(event, rowIndex, globalColIndex) {
+    this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
+  }
+  onCellClick(rowIndex, globalColIndex) {
+    this.state().interaction.setActiveCell?.({ rowIndex, columnIndex: globalColIndex });
+  }
+  onCellContextMenu(event) {
+    this.state().contextMenu.handleCellContextMenu(event);
+  }
+  onCellDblClick(rowId, columnId) {
+    this.state().editing.setEditingCell({ rowId, columnId });
+  }
+  onFillHandleMouseDown(event) {
+    this.state().interaction.handleFillHandleMouseDown?.(event);
+  }
+  onResizeStart(event, col) {
+    event.preventDefault();
+    this.state().interaction.setActiveCell?.(null);
+    this.state().interaction.setSelectionRange?.(null);
+    this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
+    const startX = event.clientX;
+    const startWidth = this.getColumnWidth(col);
+    const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    const onMove = (e) => {
+      const delta = e.clientX - startX;
+      const newWidth = Math.max(minWidth, startWidth + delta);
+      const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
+      this.state().layout.setColumnSizingOverrides(overrides);
+      this.columnSizingVersion.update((v) => v + 1);
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      const finalWidth = this.getColumnWidth(col);
+      this.state().layout.onColumnResized?.(col.columnId, finalWidth);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }
+  onSelectAllChange(event) {
+    const checked = event.target.checked;
+    this.state().rowSelection.handleSelectAll(!!checked);
+  }
+  onRowClick(event, rowId) {
+    const p = this.getProps();
+    if (p?.rowSelection !== "single") return;
+    const ids = this.selectedRowIds();
+    this.state().rowSelection.updateSelection(ids.has(rowId) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([rowId]));
+  }
+  onRowCheckboxChange(rowId, event, rowIndex) {
+    const checked = event.target.checked;
+    this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
+  }
+  commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+    this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+  }
+  cancelEdit() {
+    this.state().editing.setEditingCell(null);
+  }
+  onEditorKeydown(event, item, columnId, oldValue, rowIndex, globalColIndex) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const newValue = event.target.value;
+      this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      this.cancelEdit();
+    }
+  }
+  closeContextMenu() {
+    this.state().contextMenu.closeContextMenu();
+  }
+  handleCopy() {
+    this.state().interaction.handleCopy();
+  }
+  handleCut() {
+    this.state().interaction.handleCut();
+  }
+  handlePaste() {
+    void this.state().interaction.handlePaste();
+  }
+  handleSelectAllCells() {
+    this.state().interaction.handleSelectAllCells();
+  }
+  onUndo() {
+    this.state().interaction.onUndo?.();
+  }
+  onRedo() {
+    this.state().interaction.onRedo?.();
+  }
+  onHeaderMouseDown(columnId, event) {
+    this.columnReorderService.handleHeaderMouseDown(columnId, event);
+  }
+  // --- Column pinning methods ---
+  onPinColumn(columnId, side) {
+    this.state().pinning.pinColumn(columnId, side);
+  }
+  onUnpinColumn(columnId) {
+    this.state().pinning.unpinColumn(columnId);
+  }
+  isPinned(columnId) {
+    return this.state().pinning.isPinned(columnId);
+  }
+  getPinState(columnId) {
+    const pinned = this.isPinned(columnId);
+    return {
+      canPinLeft: pinned !== "left",
+      canPinRight: pinned !== "right",
+      canUnpin: !!pinned
+    };
+  }
+  // --- Column sorting methods ---
+  onSortAsc(columnId) {
+    const props = this.getProps();
+    props?.onColumnSort?.(columnId, "asc");
+  }
+  onSortDesc(columnId) {
+    const props = this.getProps();
+    props?.onColumnSort?.(columnId, "desc");
+  }
+  onClearSort(columnId) {
+    const props = this.getProps();
+    const col = columnId ?? props?.sortBy;
+    if (col) {
+      props?.onColumnSort?.(col, null);
+    }
+  }
+  getSortState(columnId) {
+    const props = this.getProps();
+    if (props?.sortBy === columnId) {
+      return props.sortDirection ?? "asc";
+    }
+    return null;
+  }
+  // --- Column autosize methods ---
+  onAutosizeColumn(columnId) {
+    const col = this.visibleCols().find((c) => c.columnId === columnId);
+    if (!col) return;
+    const width = measureColumnContentWidth(columnId, col.minWidth, this.tableContainerEl() ?? void 0);
+    this.state().layout.setColumnSizingOverrides({
+      ...this.columnSizingOverrides(),
+      [columnId]: { widthPx: width }
+    });
+    (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(columnId, width);
+  }
+  onAutosizeAllColumns() {
+    const tableEl = this.tableContainerEl() ?? void 0;
+    const overrides = {};
+    for (const col of this.visibleCols()) {
+      const width = measureColumnContentWidth(col.columnId, col.minWidth, tableEl);
+      overrides[col.columnId] = { widthPx: width };
+      (this.state().layout.onAutosizeColumn ?? this.state().layout.onColumnResized)?.(col.columnId, width);
+    }
+    this.state().layout.setColumnSizingOverrides({
+      ...this.columnSizingOverrides(),
+      ...overrides
+    });
+  }
+};
+var BaseColumnHeaderFilterComponent = class {
+  constructor() {
+    // Signal-backed inputs used by computed() — plain @Input properties aren't tracked by computed()
+    this._filterType = signal("none");
+    this._selectedValues = signal(void 0);
+    this._options = signal(void 0);
+    this._textValue = signal("");
+    this._selectedUser = signal(void 0);
+    this._dateValue = signal(void 0);
+    this.isSorted = false;
+    this.isSortedDescending = false;
+    this.onSort = void 0;
+    this.onFilterChange = void 0;
+    this.isLoadingOptions = false;
+    this.onTextChange = void 0;
+    this.onUserChange = void 0;
+    this.peopleSearch = void 0;
+    this.onDateChange = void 0;
+    // Internal state signals
+    this.isFilterOpen = signal(false);
+    this.tempTextValue = signal("");
+    this.searchText = signal("");
+    this.tempSelected = signal(/* @__PURE__ */ new Set());
+    this.peopleSearchText = signal("");
+    this.peopleSuggestions = signal([]);
+    this.isPeopleLoading = signal(false);
+    this.tempDateFrom = signal("");
+    this.tempDateTo = signal("");
+    // Popover position
+    this.popoverTop = signal(0);
+    this.popoverLeft = signal(0);
+    this.peopleDebounceTimer = null;
+    // Computed signals
+    this.hasActiveFilter = computed(() => {
+      const ft = this._filterType();
+      if (ft === "text") return !!this._textValue();
+      if (ft === "multiSelect") return (this._selectedValues()?.length ?? 0) > 0;
+      if (ft === "people") return this._selectedUser() != null;
+      if (ft === "date") return this._dateValue() != null;
+      return false;
+    });
+    this.filteredOptions = computed(() => {
+      const opts = this._options() ?? [];
+      const search = this.searchText().toLowerCase().trim();
+      if (!search) return opts;
+      return opts.filter((o) => o.toLowerCase().includes(search));
+    });
+  }
+  set filterType(v) {
+    this._filterType.set(v);
+  }
+  get filterType() {
+    return this._filterType();
+  }
+  set selectedValues(v) {
+    this._selectedValues.set(v);
+  }
+  get selectedValues() {
+    return this._selectedValues();
+  }
+  set options(v) {
+    this._options.set(v);
+  }
+  get options() {
+    return this._options();
+  }
+  set textValue(v) {
+    this._textValue.set(v);
+  }
+  get textValue() {
+    return this._textValue();
+  }
+  set selectedUser(v) {
+    this._selectedUser.set(v);
+  }
+  get selectedUser() {
+    return this._selectedUser();
+  }
+  set dateValue(v) {
+    this._dateValue.set(v);
+  }
+  get dateValue() {
+    return this._dateValue();
+  }
+  // Utility methods
+  asInputValue(event) {
+    return event.target.value;
+  }
+  toggleFilter(event) {
+    event.stopPropagation();
+    if (this.isFilterOpen()) {
+      this.isFilterOpen.set(false);
+      return;
+    }
+    this.tempTextValue.set(this.textValue);
+    this.tempSelected.set(new Set(this.selectedValues ?? []));
+    this.searchText.set("");
+    this.peopleSearchText.set("");
+    this.peopleSuggestions.set([]);
+    const dv = this.dateValue;
+    this.tempDateFrom.set(dv?.from ?? "");
+    this.tempDateTo.set(dv?.to ?? "");
+    const el = this.getHeaderEl()?.nativeElement;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      this.popoverTop.set(rect.bottom + 4);
+      this.popoverLeft.set(rect.left);
+    }
+    this.isFilterOpen.set(true);
+  }
+  // --- Text filter handlers ---
+  onTextKeydown(event) {
+    event.stopPropagation();
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.handleTextApply();
+    }
+  }
+  handleTextApply() {
+    if (this.onTextChange) this.onTextChange(this.tempTextValue());
+    this.isFilterOpen.set(false);
+  }
+  handleTextClear() {
+    this.tempTextValue.set("");
+    if (this.onTextChange) this.onTextChange("");
+    this.isFilterOpen.set(false);
+  }
+  // --- MultiSelect filter handlers ---
+  handleCheckboxChange(option, event) {
+    const checked = event.target.checked;
+    this.tempSelected.update((s) => {
+      const next = new Set(s);
+      if (checked) next.add(option);
+      else next.delete(option);
+      return next;
+    });
+  }
+  handleSelectAllFiltered() {
+    this.tempSelected.update((s) => {
+      const next = new Set(s);
+      for (const opt of this.filteredOptions()) next.add(opt);
+      return next;
+    });
+  }
+  handleClearSelection() {
+    this.tempSelected.set(/* @__PURE__ */ new Set());
+  }
+  handleApplyMultiSelect() {
+    if (this.onFilterChange) this.onFilterChange(Array.from(this.tempSelected()));
+    this.isFilterOpen.set(false);
+  }
+  // --- People filter handlers ---
+  onPeopleSearchInput(event) {
+    const value = event.target.value;
+    this.peopleSearchText.set(value);
+    if (this.peopleDebounceTimer) clearTimeout(this.peopleDebounceTimer);
+    const query = value.trim();
+    if (!query) {
+      this.peopleSuggestions.set([]);
+      this.isPeopleLoading.set(false);
+      return;
+    }
+    this.isPeopleLoading.set(true);
+    this.peopleDebounceTimer = setTimeout(() => {
+      const fn = this.peopleSearch;
+      if (!fn) return;
+      fn(query).then((results) => {
+        this.peopleSuggestions.set(results);
+        this.isPeopleLoading.set(false);
+      }).catch(() => {
+        this.peopleSuggestions.set([]);
+        this.isPeopleLoading.set(false);
+      });
+    }, 300);
+  }
+  handleUserSelect(user) {
+    if (this.onUserChange) this.onUserChange(user);
+    this.isFilterOpen.set(false);
+  }
+  handleClearUser() {
+    if (this.onUserChange) this.onUserChange(void 0);
+    this.isFilterOpen.set(false);
+  }
+  // --- Date filter handlers ---
+  handleDateApply() {
+    const from = this.tempDateFrom();
+    const to = this.tempDateTo();
+    if (this.onDateChange) {
+      if (!from && !to) {
+        this.onDateChange(void 0);
+      } else {
+        this.onDateChange({ from: from || void 0, to: to || void 0 });
+      }
+    }
+    this.isFilterOpen.set(false);
+  }
+  handleDateClear() {
+    this.tempDateFrom.set("");
+    this.tempDateTo.set("");
+    if (this.onDateChange) this.onDateChange(void 0);
+    this.isFilterOpen.set(false);
+  }
+  /** Clean up debounce timer on destroy. */
+  ngOnDestroy() {
+    if (this.peopleDebounceTimer) {
+      clearTimeout(this.peopleDebounceTimer);
+      this.peopleDebounceTimer = null;
+    }
+  }
+  // --- Document click handler (for click-outside to close) ---
+  onDocumentClick(event, selectorName) {
+    const el = event.target;
+    if (!el.closest(selectorName) && !el.closest(".ogrid-header-filter__popover")) {
+      this.isFilterOpen.set(false);
+    }
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BaseColumnHeaderFilterComponent.prototype, "columnKey", 2);
+__decorateClass([
+  Input({ required: true })
+], BaseColumnHeaderFilterComponent.prototype, "columnName", 2);
+__decorateClass([
+  Input({ required: true })
+], BaseColumnHeaderFilterComponent.prototype, "filterType", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "selectedValues", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "options", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "textValue", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "selectedUser", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "dateValue", 1);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "isSorted", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "isSortedDescending", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "onSort", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "onFilterChange", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "isLoadingOptions", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "onTextChange", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "onUserChange", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "peopleSearch", 2);
+__decorateClass([
+  Input()
+], BaseColumnHeaderFilterComponent.prototype, "onDateChange", 2);
+var BaseColumnChooserComponent = class {
+  constructor() {
+    this._columns = signal([]);
+    this._visibleColumns = signal(/* @__PURE__ */ new Set());
+    this.visibilityChange = new EventEmitter();
+    // Dropdown state
+    this.isOpen = signal(false);
+    // Computed counts (signal-backed so computed() tracks changes)
+    this.visibleCount = computed(() => this._visibleColumns().size);
+    this.totalCount = computed(() => this._columns().length);
+  }
+  set columns(v) {
+    this._columns.set(v);
+  }
+  get columns() {
+    return this._columns();
+  }
+  set visibleColumns(v) {
+    this._visibleColumns.set(v);
+  }
+  get visibleColumns() {
+    return this._visibleColumns();
+  }
+  toggle() {
+    this.isOpen.update((v) => !v);
+  }
+  onCheckboxChange(columnKey, event) {
+    const checked = event.target.checked;
+    this.visibilityChange.emit({ columnKey, visible: checked });
+  }
+  onToggle(columnKey, checked) {
+    this.visibilityChange.emit({ columnKey, visible: checked });
+  }
+  selectAll() {
+    for (const col of this.columns) {
+      if (!this.visibleColumns.has(col.columnId)) {
+        this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
+      }
+    }
+  }
+  clearAll() {
+    for (const col of this.columns) {
+      if (this.visibleColumns.has(col.columnId)) {
+        this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
+      }
+    }
+  }
+  onClearAll() {
+    for (const col of this.columns) {
+      if (col.required !== true && this.visibleColumns.has(col.columnId)) {
+        this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
+      }
+    }
+  }
+  onSelectAll() {
+    for (const col of this.columns) {
+      if (!this.visibleColumns.has(col.columnId)) {
+        this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
+      }
+    }
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BaseColumnChooserComponent.prototype, "columns", 1);
+__decorateClass([
+  Input({ required: true })
+], BaseColumnChooserComponent.prototype, "visibleColumns", 1);
+__decorateClass([
+  Output()
+], BaseColumnChooserComponent.prototype, "visibilityChange", 2);
+var BasePaginationControlsComponent = class {
+  constructor() {
+    this._currentPage = signal(1);
+    this._pageSize = signal(25);
+    this._totalCount = signal(0);
+    this._pageSizeOptions = signal(void 0);
+    this._entityLabelPlural = signal("items");
+    this.pageChange = new EventEmitter();
+    this.pageSizeChange = new EventEmitter();
+    this.labelPlural = computed(() => this._entityLabelPlural() ?? "items");
+    this.vm = computed(() => {
+      const opts = this._pageSizeOptions();
+      return getPaginationViewModel(
+        this._currentPage(),
+        this._pageSize(),
+        this._totalCount(),
+        opts ? { pageSizeOptions: opts } : void 0
+      );
+    });
+  }
+  set currentPage(v) {
+    this._currentPage.set(v);
+  }
+  get currentPage() {
+    return this._currentPage();
+  }
+  set pageSize(v) {
+    this._pageSize.set(v);
+  }
+  get pageSize() {
+    return this._pageSize();
+  }
+  set totalCount(v) {
+    this._totalCount.set(v);
+  }
+  get totalCount() {
+    return this._totalCount();
+  }
+  set pageSizeOptions(v) {
+    this._pageSizeOptions.set(v);
+  }
+  get pageSizeOptions() {
+    return this._pageSizeOptions();
+  }
+  set entityLabelPlural(v) {
+    this._entityLabelPlural.set(v);
+  }
+  get entityLabelPlural() {
+    return this._entityLabelPlural();
+  }
+  onPageSizeSelect(event) {
+    const value = Number(event.target.value);
+    this.pageSizeChange.emit(value);
+  }
+  onPageSizeChange(value) {
+    this.pageSizeChange.emit(Number(value));
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BasePaginationControlsComponent.prototype, "currentPage", 1);
+__decorateClass([
+  Input({ required: true })
+], BasePaginationControlsComponent.prototype, "pageSize", 1);
+__decorateClass([
+  Input({ required: true })
+], BasePaginationControlsComponent.prototype, "totalCount", 1);
+__decorateClass([
+  Input()
+], BasePaginationControlsComponent.prototype, "pageSizeOptions", 1);
+__decorateClass([
+  Input()
+], BasePaginationControlsComponent.prototype, "entityLabelPlural", 1);
+__decorateClass([
+  Output()
+], BasePaginationControlsComponent.prototype, "pageChange", 2);
+__decorateClass([
+  Output()
+], BasePaginationControlsComponent.prototype, "pageSizeChange", 2);
+var BaseInlineCellEditorComponent = class {
+  constructor() {
+    this.commit = new EventEmitter();
+    this.cancel = new EventEmitter();
+    this.localValue = signal("");
+    this.highlightedIndex = signal(0);
+    this.selectOptions = signal([]);
+    this.searchText = signal("");
+    this.filteredOptions = computed(() => {
+      const options = this.selectOptions();
+      const search = this.searchText().trim().toLowerCase();
+      if (!search) return options;
+      return options.filter((v) => this.getDisplayText(v).toLowerCase().includes(search));
+    });
+    this._initialized = false;
+  }
+  ngOnInit() {
+    this._initialized = true;
+    this.syncFromInputs();
+  }
+  ngOnChanges() {
+    if (this._initialized) {
+      this.syncFromInputs();
+    }
+  }
+  syncFromInputs() {
+    const v = this.value;
+    this.localValue.set(v != null ? String(v) : "");
+    const col = this.column;
+    if (col?.cellEditorParams?.values) {
+      const vals = col.cellEditorParams.values;
+      this.selectOptions.set(vals);
+      const initialIdx = vals.findIndex((opt) => String(opt) === String(v));
+      this.highlightedIndex.set(Math.max(initialIdx, 0));
+    }
+  }
+  ngAfterViewInit() {
+    setTimeout(() => {
+      const richSelectInput = this.richSelectInput?.nativeElement;
+      if (richSelectInput) {
+        richSelectInput.focus();
+        richSelectInput.select();
+        this.positionFixedDropdown(this.richSelectWrapper, this.richSelectDropdown);
+        return;
+      }
+      const selectWrap = this.selectWrapper?.nativeElement;
+      if (selectWrap) {
+        selectWrap.focus();
+        this.positionFixedDropdown(this.selectWrapper, this.selectDropdown);
+        return;
+      }
+      const el = this.inputEl?.nativeElement;
+      if (el) {
+        el.focus();
+        if (el instanceof HTMLInputElement && el.type === "text") {
+          el.select();
+        }
+      }
+    });
+  }
+  commitValue(value) {
+    this.commit.emit(value);
+  }
+  onTextKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      this.commitValue(this.localValue());
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      this.cancel.emit();
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      this.commitValue(this.localValue());
+    }
+  }
+  getDisplayText(value) {
+    const formatValue = this.column?.cellEditorParams?.formatValue;
+    if (formatValue) return formatValue(value);
+    return value != null ? String(value) : "";
+  }
+  onCustomSelectKeyDown(e) {
+    const options = this.selectOptions();
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
+        this.scrollOptionIntoView(this.selectDropdown);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
+        this.scrollOptionIntoView(this.selectDropdown);
+        break;
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        if (options.length > 0 && this.highlightedIndex() < options.length) {
+          this.commitValue(options[this.highlightedIndex()]);
+        }
+        break;
+      case "Tab":
+        e.preventDefault();
+        if (options.length > 0 && this.highlightedIndex() < options.length) {
+          this.commitValue(options[this.highlightedIndex()]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancel.emit();
+        break;
+    }
+  }
+  onRichSelectSearch(text) {
+    this.searchText.set(text);
+    this.highlightedIndex.set(0);
+  }
+  onRichSelectKeyDown(e) {
+    const options = this.filteredOptions();
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this.highlightedIndex.set(Math.min(this.highlightedIndex() + 1, options.length - 1));
+        this.scrollOptionIntoView(this.richSelectDropdown);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this.highlightedIndex.set(Math.max(this.highlightedIndex() - 1, 0));
+        this.scrollOptionIntoView(this.richSelectDropdown);
+        break;
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        if (options.length > 0 && this.highlightedIndex() < options.length) {
+          this.commitValue(options[this.highlightedIndex()]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancel.emit();
+        break;
+    }
+  }
+  onCheckboxKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.cancel.emit();
+    }
+  }
+  onTextBlur() {
+    this.commitValue(this.localValue());
+  }
+  getInputStyle() {
+    const baseStyle = "width:100%;box-sizing:border-box;padding:6px 10px;border:none;outline:none;font:inherit;background:transparent;color:inherit;";
+    const col = this.column;
+    if (col.type === "numeric") {
+      return baseStyle + "text-align:right;";
+    }
+    return baseStyle;
+  }
+  /** Position a dropdown using fixed positioning to escape overflow clipping. */
+  positionFixedDropdown(wrapperRef, dropdownRef) {
+    const wrapper = wrapperRef?.nativeElement;
+    const dropdown = dropdownRef?.nativeElement;
+    if (!wrapper || !dropdown) return;
+    const rect = wrapper.getBoundingClientRect();
+    const maxH = 200;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
+    dropdown.style.position = "fixed";
+    dropdown.style.left = `${rect.left}px`;
+    dropdown.style.width = `${rect.width}px`;
+    dropdown.style.maxHeight = `${maxH}px`;
+    dropdown.style.zIndex = "9999";
+    dropdown.style.right = "auto";
+    if (flipUp) {
+      dropdown.style.top = "auto";
+      dropdown.style.bottom = `${window.innerHeight - rect.top}px`;
+    } else {
+      dropdown.style.top = `${rect.bottom}px`;
+    }
+  }
+  /** Scroll the highlighted option into view within a dropdown element. */
+  scrollOptionIntoView(dropdownRef) {
+    setTimeout(() => {
+      const dropdown = dropdownRef?.nativeElement;
+      if (!dropdown) return;
+      const highlighted = dropdown.children[this.highlightedIndex()];
+      highlighted?.scrollIntoView({ block: "nearest" });
+    });
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "value", 2);
+__decorateClass([
+  Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "item", 2);
+__decorateClass([
+  Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "column", 2);
+__decorateClass([
+  Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "rowIndex", 2);
+__decorateClass([
+  Input({ required: true })
+], BaseInlineCellEditorComponent.prototype, "editorType", 2);
+__decorateClass([
+  Output()
+], BaseInlineCellEditorComponent.prototype, "commit", 2);
+__decorateClass([
+  Output()
+], BaseInlineCellEditorComponent.prototype, "cancel", 2);
+__decorateClass([
+  ViewChild("inputEl")
+], BaseInlineCellEditorComponent.prototype, "inputEl", 2);
+__decorateClass([
+  ViewChild("selectWrapper")
+], BaseInlineCellEditorComponent.prototype, "selectWrapper", 2);
+__decorateClass([
+  ViewChild("selectDropdown")
+], BaseInlineCellEditorComponent.prototype, "selectDropdown", 2);
+__decorateClass([
+  ViewChild("richSelectWrapper")
+], BaseInlineCellEditorComponent.prototype, "richSelectWrapper", 2);
+__decorateClass([
+  ViewChild("richSelectInput")
+], BaseInlineCellEditorComponent.prototype, "richSelectInput", 2);
+__decorateClass([
+  ViewChild("richSelectDropdown")
+], BaseInlineCellEditorComponent.prototype, "richSelectDropdown", 2);
+
+// src/components/inline-cell-editor-template.ts
+var INLINE_CELL_EDITOR_TEMPLATE = `
+    @switch (editorType) {
+      @case ('text') {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+      @case ('richSelect') {
+        <div #richSelectWrapper
+             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative">
+          <input
+            #richSelectInput
+            type="text"
+            [value]="searchText()"
+            (input)="onRichSelectSearch($any($event.target).value)"
+            (keydown)="onRichSelectKeyDown($event)"
+            placeholder="Search..."
+            style="width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0"
+          />
+          <div #richSelectDropdown role="listbox"
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+            @for (opt of filteredOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [style]="i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'">
+                {{ getDisplayText(opt) }}
+              </div>
+            }
+            @if (filteredOptions().length === 0) {
+              <div style="padding:6px 8px;color:var(--ogrid-muted, #999)">No matches</div>
+            }
+          </div>
+        </div>
+      }
+      @case ('select') {
+        <div #selectWrapper tabindex="0"
+             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative"
+             (keydown)="onCustomSelectKeyDown($event)">
+          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit">
+            <span>{{ getDisplayText(value) }}</span>
+            <span style="margin-left:4px;font-size:10px;opacity:0.5">&#9662;</span>
+          </div>
+          <div #selectDropdown role="listbox"
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+            @for (opt of selectOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [style]="i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'">
+                {{ getDisplayText(opt) }}
+              </div>
+            }
+          </div>
+        </div>
+      }
+      @case ('checkbox') {
+        <div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%">
+          <input
+            type="checkbox"
+            [checked]="!!localValue()"
+            (change)="commitValue($any($event.target).checked)"
+            (keydown)="onCheckboxKeyDown($event)"
+          />
+        </div>
+      }
+      @case ('date') {
+        <input
+          #inputEl
+          type="date"
+          [value]="localValue()"
+          (change)="commitValue($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+      @default {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+    }
+`;
+var INLINE_CELL_EDITOR_STYLES = `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+`;
+var POPOVER_CELL_EDITOR_TEMPLATE = `
+    <div #anchorEl
+      class="ogrid-popover-anchor"
+      [attr.data-row-index]="rowIndex"
+      [attr.data-col-index]="globalColIndex"
+    >
+      {{ displayValue }}
+    </div>
+    @if (showEditor()) {
+      <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">
+        <div class="ogrid-popover-editor-content" #editorContainer></div>
+      </div>
+    }
+`;
+var POPOVER_CELL_EDITOR_OVERLAY_STYLES = `
+    :host { display: contents; }
+    .ogrid-popover-editor-overlay {
+      position: fixed; inset: 0; z-index: 1000;
+      background: rgba(0,0,0,0.3);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ogrid-popover-editor-content {
+      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      max-width: 90vw; max-height: 90vh; overflow: auto;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+`;
+var BasePopoverCellEditorComponent = class {
+  constructor() {
+    this.injector = inject(Injector);
+    this.envInjector = inject(EnvironmentInjector);
+    this.showEditor = signal(false);
+    effect(() => {
+      const anchor = this.anchorRef;
+      if (anchor) {
+        setTimeout(() => this.showEditor.set(true), 0);
+      }
+    });
+    effect((onCleanup) => {
+      const container = this.editorContainerRef;
+      const props = this.editorProps;
+      const col = this.column;
+      if (!container || !this.showEditor() || typeof col.cellEditor !== "function") return;
+      const EditorComponent = col.cellEditor;
+      const componentRef = createComponent(EditorComponent, {
+        environmentInjector: this.envInjector,
+        elementInjector: this.injector
+      });
+      Object.assign(componentRef.instance, props);
+      componentRef.changeDetectorRef.detectChanges();
+      container.nativeElement.appendChild(componentRef.location.nativeElement);
+      onCleanup(() => componentRef.destroy());
+    });
+  }
+  handleOverlayClick() {
+    this.onCancel();
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "item", 2);
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "column", 2);
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "rowIndex", 2);
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "globalColIndex", 2);
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "displayValue", 2);
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "editorProps", 2);
+__decorateClass([
+  Input({ required: true })
+], BasePopoverCellEditorComponent.prototype, "onCancel", 2);
+__decorateClass([
+  ViewChild("anchorEl")
+], BasePopoverCellEditorComponent.prototype, "anchorRef", 2);
+__decorateClass([
+  ViewChild("editorContainer")
+], BasePopoverCellEditorComponent.prototype, "editorContainerRef", 2);
+
+export { BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, ColumnReorderService, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, SideBarComponent, StatusBarComponent, VirtualScrollService, createDebouncedCallback, createDebouncedSignal, createLatestCallback };