@alaarab/ogrid-angular-material 2.1.3 → 2.1.4

package/dist/esm/index.js

@@ -1,15 +1,1312 @@
-// Re-export all from base package for consumer convenience.
-// Note: This prevents tree-shaking of unused utilities.
-// Consider explicit named exports in a future major version.
-export * from '@alaarab/ogrid-angular';
-// Components
-export { OGridComponent } from './ogrid/ogrid.component';
-export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
-export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
-// IColumnHeaderFilterProps is now exported from @alaarab/ogrid-angular (base class)
-export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
-// IColumnChooserProps is now exported from @alaarab/ogrid-angular (base class)
-export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
-export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
-export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';
-export { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.component';
+import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseOGridComponent } from '@alaarab/ogrid-angular';
+export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ColumnReorderService, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MAX_PAGE_BUTTONS, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, SideBarComponent, StatusBarComponent, UndoRedoStack, VirtualScrollService, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, createDebouncedCallback, createDebouncedSignal, createLatestCallback, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds } from '@alaarab/ogrid-angular';
+import { ViewChild, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, signal, computed } from '@angular/core';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatDividerModule } from '@angular/material/divider';
+
+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 ColumnHeaderFilterComponent = class extends BaseColumnHeaderFilterComponent {
+  getHeaderEl() {
+    return this.headerEl;
+  }
+  onDocumentClickWrapper(event) {
+    this.onDocumentClick(event, "ogrid-column-header-filter");
+  }
+};
+__decorateClass([
+  ViewChild("headerEl")
+], ColumnHeaderFilterComponent.prototype, "headerEl", 2);
+ColumnHeaderFilterComponent = __decorateClass([
+  Component({
+    selector: "ogrid-column-header-filter",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div class="ogrid-header-filter" #headerEl>
+      <div class="ogrid-header-filter__label">
+        <span class="ogrid-header-filter__name" [title]="columnName" data-header-label>
+          {{ columnName }}
+        </span>
+      </div>
+
+      <div class="ogrid-header-filter__actions">
+        @if (filterType !== 'none') {
+          <button
+            class="ogrid-header-filter__filter-btn"
+            [class.ogrid-header-filter__filter-btn--active]="hasActiveFilter() || isFilterOpen()"
+            (click)="toggleFilter($event)"
+            [attr.aria-label]="'Filter ' + columnName"
+            [title]="'Filter ' + columnName"
+          >
+            <span class="ogrid-header-filter__funnel"></span>
+            @if (hasActiveFilter()) {
+              <span class="ogrid-header-filter__dot"></span>
+            }
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (isFilterOpen() && filterType !== 'none') {
+      <div
+        class="ogrid-header-filter__popover"
+        [style.top.px]="popoverTop()"
+        [style.left.px]="popoverLeft()"
+        (click)="$event.stopPropagation()"
+      >
+        <div class="ogrid-header-filter__popover-header">
+          Filter: {{ columnName }}
+        </div>
+
+        @switch (filterType) {
+          @case ('text') {
+            <div class="ogrid-header-filter__popover-body" style="width: 260px;">
+              <div style="padding: 12px;">
+                <input
+                  type="text"
+                  class="ogrid-header-filter__input"
+                  placeholder="Enter search term..."
+                  [value]="tempTextValue()"
+                  (input)="tempTextValue.set(asInputValue($event))"
+                  (keydown)="onTextKeydown($event)"
+                  autocomplete="off"
+                />
+              </div>
+              <div class="ogrid-header-filter__popover-actions">
+                <button class="ogrid-header-filter__action-btn" [disabled]="!tempTextValue()" (click)="handleTextClear()">Clear</button>
+                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleTextApply()">Apply</button>
+              </div>
+            </div>
+          }
+          @case ('multiSelect') {
+            <div class="ogrid-header-filter__popover-body" style="width: 280px;">
+              <div style="padding: 12px 12px 4px;">
+                <input
+                  type="text"
+                  class="ogrid-header-filter__input"
+                  placeholder="Search..."
+                  [value]="searchText()"
+                  (input)="searchText.set(asInputValue($event))"
+                  (keydown)="$event.stopPropagation()"
+                  autocomplete="off"
+                />
+                <div class="ogrid-header-filter__options-info">
+                  {{ filteredOptions().length }} of {{ (options ?? []).length }} options
+                </div>
+              </div>
+              <div class="ogrid-header-filter__select-actions">
+                <button class="ogrid-header-filter__action-btn" (click)="handleSelectAllFiltered()">
+                  Select All ({{ filteredOptions().length }})
+                </button>
+                <button class="ogrid-header-filter__action-btn" (click)="handleClearSelection()">Clear</button>
+              </div>
+              <div class="ogrid-header-filter__options-list">
+                @if (isLoadingOptions) {
+                  <div class="ogrid-header-filter__loading">Loading...</div>
+                } @else if (filteredOptions().length === 0) {
+                  <div class="ogrid-header-filter__empty">No options found</div>
+                } @else {
+                  @for (option of filteredOptions(); track option) {
+                    <label class="ogrid-header-filter__option">
+                      <input
+                        type="checkbox"
+                        [checked]="tempSelected().has(option)"
+                        (change)="handleCheckboxChange(option, $event)"
+                      />
+                      <span>{{ option }}</span>
+                    </label>
+                  }
+                }
+              </div>
+              <div class="ogrid-header-filter__popover-actions" style="border-top: 1px solid rgba(0,0,0,0.12);">
+                <button class="ogrid-header-filter__action-btn" (click)="handleClearSelection()">Clear</button>
+                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleApplyMultiSelect()">Apply</button>
+              </div>
+            </div>
+          }
+          @case ('people') {
+            <div class="ogrid-header-filter__popover-body" style="width: 300px;">
+              @if (selectedUser) {
+                <div class="ogrid-header-filter__people-selected">
+                  <div class="ogrid-header-filter__people-info-label">Currently filtered by:</div>
+                  <div class="ogrid-header-filter__people-card">
+                    <div class="ogrid-header-filter__people-avatar">{{ selectedUser!.displayName?.[0] ?? '?' }}</div>
+                    <div class="ogrid-header-filter__people-details">
+                      <div>{{ selectedUser!.displayName }}</div>
+                      <div class="ogrid-header-filter__people-email">{{ selectedUser!.email }}</div>
+                    </div>
+                    <button class="ogrid-header-filter__btn" (click)="handleClearUser()" aria-label="Remove filter">&times;</button>
+                  </div>
+                </div>
+              }
+              <div style="padding: 12px 12px 4px;">
+                <input
+                  type="text"
+                  class="ogrid-header-filter__input"
+                  placeholder="Search for a person..."
+                  [value]="peopleSearchText()"
+                  (input)="onPeopleSearchInput($event)"
+                  (keydown)="$event.stopPropagation()"
+                  autocomplete="off"
+                />
+              </div>
+              <div class="ogrid-header-filter__options-list">
+                @if (isPeopleLoading() && peopleSearchText().trim()) {
+                  <div class="ogrid-header-filter__loading">Loading...</div>
+                } @else if (peopleSuggestions().length === 0 && peopleSearchText().trim()) {
+                  <div class="ogrid-header-filter__empty">No results found</div>
+                } @else if (peopleSearchText().trim()) {
+                  @for (user of peopleSuggestions(); track user.id || user.email || user.displayName) {
+                    <div class="ogrid-header-filter__people-option" (click)="handleUserSelect(user)">
+                      <div class="ogrid-header-filter__people-avatar">{{ user.displayName?.[0] ?? '?' }}</div>
+                      <div class="ogrid-header-filter__people-details">
+                        <div>{{ user.displayName }}</div>
+                        <div class="ogrid-header-filter__people-email">{{ user.email }}</div>
+                      </div>
+                    </div>
+                  }
+                } @else {
+                  <div class="ogrid-header-filter__empty">Type to search...</div>
+                }
+              </div>
+              @if (selectedUser) {
+                <div style="padding: 8px 12px; border-top: 1px solid rgba(0,0,0,0.12);">
+                  <button class="ogrid-header-filter__action-btn" style="width: 100%;" (click)="handleClearUser()">Clear Filter</button>
+                </div>
+              }
+            </div>
+          }
+          @case ('date') {
+            <div class="ogrid-header-filter__popover-body" style="padding: 12px; display: flex; flex-direction: column; gap: 8px;">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <span style="min-width: 36px; font-size: 12px;">From:</span>
+                <input type="date" [value]="tempDateFrom()" (input)="tempDateFrom.set(asInputValue($event))" style="flex: 1; padding: 4px 6px;" />
+              </div>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <span style="min-width: 36px; font-size: 12px;">To:</span>
+                <input type="date" [value]="tempDateTo()" (input)="tempDateTo.set(asInputValue($event))" style="flex: 1; padding: 4px 6px;" />
+              </div>
+              <div class="ogrid-header-filter__popover-actions" style="margin-top: 4px;">
+                <button class="ogrid-header-filter__action-btn" [disabled]="!tempDateFrom() && !tempDateTo()" (click)="handleDateClear()">Clear</button>
+                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleDateApply()">Apply</button>
+              </div>
+            </div>
+          }
+        }
+      </div>
+    }
+  `,
+    styles: [`
+    :host { display: flex; align-items: center; flex: 1; min-width: 0; position: relative; }
+    .ogrid-header-filter { display: flex; align-items: center; width: 100%; min-width: 0; }
+    .ogrid-header-filter__label { flex: 1; min-width: 0; overflow: hidden; }
+    .ogrid-header-filter__name {
+      display: block; font-weight: 600; font-size: 14px; line-height: 1.4;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .ogrid-header-filter__actions { display: flex; align-items: center; margin-left: 4px; flex-shrink: 0; }
+    .ogrid-header-filter__btn {
+      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;
+      background: transparent; cursor: pointer; font-size: 12px; line-height: 1;
+      display: inline-flex; align-items: center; justify-content: center; position: relative;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
+    }
+    .ogrid-header-filter__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); }
+    .ogrid-header-filter__btn--active { color: var(--mat-sys-primary, #1976d2); }
+    .ogrid-header-filter__filter-btn {
+      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;
+      background: transparent; cursor: pointer; line-height: 1;
+      display: inline-flex; align-items: center; justify-content: center; position: relative;
+      opacity: 0.6; transition: opacity 0.15s;
+    }
+    .ogrid-header-filter:hover .ogrid-header-filter__filter-btn { opacity: 0.8; }
+    .ogrid-header-filter__filter-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); opacity: 1 !important; }
+    .ogrid-header-filter__filter-btn--active { opacity: 1 !important; }
+    .ogrid-header-filter__funnel {
+      display: block; width: 0; height: 0;
+      border-left: 5px solid transparent; border-right: 5px solid transparent;
+      border-top: 6px solid var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65));
+      position: relative;
+    }
+    .ogrid-header-filter__funnel::after {
+      content: ''; display: block; width: 2px; height: 4px;
+      background: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65)); position: absolute;
+      top: -1px; left: -1px;
+    }
+    .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel {
+      border-top-color: var(--mat-sys-primary, #1976d2);
+    }
+    .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel::after {
+      background: var(--mat-sys-primary, #1976d2);
+    }
+    .ogrid-header-filter__dot {
+      position: absolute; top: 2px; right: 2px;
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--mat-sys-primary, #1976d2);
+    }
+    .ogrid-header-filter__popover {
+      position: fixed; z-index: 1000;
+      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.2));
+      border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
+      margin-top: 4px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__popover-header {
+      padding: 8px 12px; font-size: 14px; font-weight: 600;
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__popover-body { }
+    .ogrid-header-filter__popover-actions {
+      display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px;
+    }
+    .ogrid-header-filter__input {
+      width: 100%; padding: 8px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23));
+      border-radius: 4px; font-size: 14px; box-sizing: border-box;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__input:focus { outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -1px; }
+    .ogrid-header-filter__options-info { margin-top: 4px; font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-header-filter__select-actions {
+      display: flex; justify-content: space-between; padding: 4px 12px;
+    }
+    .ogrid-header-filter__options-list { max-height: 240px; overflow-y: auto; padding: 0 4px; }
+    .ogrid-header-filter__option {
+      display: flex; align-items: center; gap: 8px;
+      padding: 4px 8px; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-header-filter__loading, .ogrid-header-filter__empty {
+      padding: 16px; text-align: center; font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+    }
+    .ogrid-header-filter__action-btn {
+      padding: 4px 12px; border: none; border-radius: 4px;
+      background: transparent; cursor: pointer; font-size: 13px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__action-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-header-filter__action-btn:disabled { opacity: 0.38; cursor: default; }
+    .ogrid-header-filter__action-btn--primary {
+      background: var(--mat-sys-primary, #1976d2); color: #fff;
+    }
+    .ogrid-header-filter__action-btn--primary:hover { opacity: 0.9; }
+    .ogrid-header-filter__people-selected {
+      padding: 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+    }
+    .ogrid-header-filter__people-info-label { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-header-filter__people-card {
+      display: flex; align-items: center; gap: 8px; margin-top: 4px;
+    }
+    .ogrid-header-filter__people-avatar {
+      width: 32px; height: 32px; border-radius: 50%; background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
+      display: flex; align-items: center; justify-content: center;
+      font-size: 14px; font-weight: 600; flex-shrink: 0;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__people-details { flex: 1; min-width: 0; font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
+    .ogrid-header-filter__people-details > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .ogrid-header-filter__people-email { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-header-filter__people-option {
+      display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-header-filter__people-option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+  `],
+    host: {
+      "(document:click)": "onDocumentClickWrapper($event)"
+    }
+  })
+], ColumnHeaderFilterComponent);
+var ColumnHeaderMenuComponent = class {
+  constructor() {
+    // Signal-backed inputs so computed() tracks changes reactively
+    this._canPinLeft = signal(true);
+    this._canPinRight = signal(true);
+    this._canUnpin = signal(false);
+    this._currentSort = signal(null);
+    this._isSortable = signal(true);
+    this._isResizable = signal(true);
+    this.handlers = {};
+    this.menuItems = computed(
+      () => getColumnHeaderMenuItems({
+        canPinLeft: this._canPinLeft(),
+        canPinRight: this._canPinRight(),
+        canUnpin: this._canUnpin(),
+        currentSort: this._currentSort(),
+        isSortable: this._isSortable(),
+        isResizable: this._isResizable()
+      })
+    );
+  }
+  set canPinLeft(v) {
+    this._canPinLeft.set(v);
+  }
+  set canPinRight(v) {
+    this._canPinRight.set(v);
+  }
+  set canUnpin(v) {
+    this._canUnpin.set(v);
+  }
+  set currentSort(v) {
+    this._currentSort.set(v);
+  }
+  set isSortable(v) {
+    this._isSortable.set(v);
+  }
+  set isResizable(v) {
+    this._isResizable.set(v);
+  }
+  handleMenuItemClick(itemId) {
+    const h = this.handlers;
+    const actionMap = {
+      pinLeft: h.onPinLeft,
+      pinRight: h.onPinRight,
+      unpin: h.onUnpin,
+      sortAsc: h.onSortAsc,
+      sortDesc: h.onSortDesc,
+      clearSort: h.onClearSort,
+      autosizeThis: h.onAutosizeThis,
+      autosizeAll: h.onAutosizeAll
+    };
+    const action = actionMap[itemId];
+    if (action) {
+      action();
+      h.onClose?.();
+    }
+  }
+};
+__decorateClass([
+  Input({ required: true })
+], ColumnHeaderMenuComponent.prototype, "columnId", 2);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "canPinLeft", 1);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "canPinRight", 1);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "canUnpin", 1);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "currentSort", 1);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "isSortable", 1);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "isResizable", 1);
+__decorateClass([
+  Input()
+], ColumnHeaderMenuComponent.prototype, "handlers", 2);
+__decorateClass([
+  ViewChild(MatMenuTrigger)
+], ColumnHeaderMenuComponent.prototype, "menuTrigger", 2);
+ColumnHeaderMenuComponent = __decorateClass([
+  Component({
+    selector: "column-header-menu",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatMenuModule, MatDividerModule],
+    template: `
+    <button
+      [matMenuTriggerFor]="menu"
+      class="column-header-menu-trigger"
+      [attr.aria-label]="'Column options for ' + columnId"
+    >
+      &#8942;
+    </button>
+
+    <mat-menu #menu="matMenu">
+      @for (item of menuItems(); track item.id) {
+        <button
+          mat-menu-item
+          [disabled]="item.disabled"
+          (click)="handleMenuItemClick(item.id)"
+        >
+          {{ item.label }}
+        </button>
+        @if (item.divider) {
+          <mat-divider></mat-divider>
+        }
+      }
+    </mat-menu>
+  `,
+    styles: [`
+    :host { flex-shrink: 0; }
+    .column-header-menu-trigger {
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
+    }
+
+    .column-header-menu-trigger:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+  `]
+  })
+], ColumnHeaderMenuComponent);
+var InlineCellEditorComponent = class extends BaseInlineCellEditorComponent {
+};
+InlineCellEditorComponent = __decorateClass([
+  Component({
+    selector: "ogrid-mat-inline-cell-editor",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: INLINE_CELL_EDITOR_TEMPLATE,
+    styles: [INLINE_CELL_EDITOR_STYLES]
+  })
+], InlineCellEditorComponent);
+var PopoverCellEditorComponent = class extends BasePopoverCellEditorComponent {
+};
+PopoverCellEditorComponent = __decorateClass([
+  Component({
+    selector: "ogrid-mat-popover-cell-editor",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: POPOVER_CELL_EDITOR_TEMPLATE,
+    styles: [`
+    ${POPOVER_CELL_EDITOR_OVERLAY_STYLES}
+    .ogrid-popover-anchor {
+      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
+      padding: 6px 10px; box-sizing: border-box; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap; user-select: none;
+      outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px;
+      z-index: 2; position: relative;
+    }
+  `]
+  })
+], PopoverCellEditorComponent);
+
+// src/datagrid-table/datagrid-table.component.ts
+var DataGridTableComponent = class extends BaseDataGridTableComponent {
+  constructor() {
+    super();
+    this.propsSignal = signal(void 0);
+    this.initBase();
+  }
+  set propsInput(value) {
+    this.propsSignal.set(value);
+  }
+  getProps() {
+    return this.propsSignal();
+  }
+  getWrapperRef() {
+    return this.wrapperRef;
+  }
+  getTableContainerRef() {
+    return this.tableContainerRef;
+  }
+};
+__decorateClass([
+  Input({ required: true, alias: "props" })
+], DataGridTableComponent.prototype, "propsInput", 1);
+__decorateClass([
+  ViewChild("wrapperEl")
+], DataGridTableComponent.prototype, "wrapperRef", 2);
+__decorateClass([
+  ViewChild("tableContainerElRef")
+], DataGridTableComponent.prototype, "tableContainerRef", 2);
+DataGridTableComponent = __decorateClass([
+  Component({
+    selector: "ogrid-datagrid-table",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
+    providers: [DataGridStateService, ColumnReorderService, VirtualScrollService],
+    template: `
+    <div class="ogrid-datagrid-root">
+      <div
+        #wrapperEl
+        class="ogrid-datagrid-wrapper"
+        [class.ogrid-datagrid-wrapper--fit]="layoutModeFit()"
+        [class.ogrid-datagrid-wrapper--overflow-x]="allowOverflowX()"
+        [class.ogrid-datagrid-wrapper--loading-empty]="isLoading() && items().length === 0"
+        [style.--ogrid-row-height]="rowHeightCssVar()"
+        tabindex="0"
+        role="region"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        (mousedown)="onWrapperMouseDown($event)"
+        (keydown)="onGridKeyDown($event)"
+        (scroll)="onWrapperScroll($event)"
+        (contextmenu)="$event.preventDefault()"
+        [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
+      >
+        <div class="ogrid-datagrid-scroll-wrapper">
+          <div [style.minWidth.px]="allowOverflowX() ? minTableWidth() : undefined">
+            <div [class.ogrid-datagrid-table-wrapper--loading]="isLoading() && items().length > 0" #tableContainerElRef>
+              <table class="ogrid-datagrid-table" [style.minWidth.px]="minTableWidth()"
+              >
+                <thead [class]="stickyHeader() ? 'ogrid-datagrid-thead ogrid-sticky-header' : 'ogrid-datagrid-thead'">
+                  @for (row of headerRows(); track $index; let rowIdx = $index) {
+                    <tr class="ogrid-datagrid-header-row">
+                      @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
+                        <th class="ogrid-datagrid-th ogrid-datagrid-checkbox-col" [attr.rowSpan]="headerRows().length > 1 ? 1 : null">
+                          <div class="ogrid-datagrid-checkbox-wrapper">
+                            <input
+                              type="checkbox"
+                              [checked]="allSelected()"
+                              [indeterminate]="someSelected()"
+                              (change)="onSelectAllChange($event)"
+                              aria-label="Select all rows"
+                            />
+                          </div>
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" style="width: 48px; min-width: 48px; padding: 0;"></th>
+                      }
+                      @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
+                        <th class="ogrid-datagrid-th ogrid-row-number-header" [attr.rowSpan]="headerRows().length > 1 ? 1 : null">
+                          <div class="ogrid-row-number-header-content">#</div>
+                        </th>
+                      }
+                      @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" [style.width.px]="50" [style.min-width.px]="50" style="padding: 0;"></th>
+                      }
+                      @for (cell of row; track cell.columnDef?.columnId ?? $index; let cellIdx = $index) {
+                        @if (cell.isGroup) {
+                          <th [attr.colSpan]="cell.colSpan" scope="colgroup" class="ogrid-datagrid-th ogrid-datagrid-group-header">
+                            {{ cell.label }}
+                          </th>
+                        } @else {
+                          @let col = asColumnDef(cell.columnDef);
+                          @let colW = getColumnWidth(col);
+                          @let pinned = isPinned(col.columnId);
+                          @let pinnedLeft = pinned === 'left';
+                          @let pinnedRight = pinned === 'right';
+                          @let sortState = getSortState(col.columnId);
+                          @let ariaSort = sortState === 'asc' ? 'ascending' : sortState === 'desc' ? 'descending' : null;
+                          @let config = getFilterConfig(col);
+                          <th scope="col"
+                            class="ogrid-datagrid-th"
+                            [class.ogrid-datagrid-th--pinned-left]="pinnedLeft"
+                            [class.ogrid-datagrid-th--pinned-right]="pinnedRight"
+                            [attr.rowSpan]="headerRows().length > 1 ? headerRows().length - rowIdx : null"
+                            [attr.data-column-id]="col.columnId"
+                            [attr.aria-sort]="ariaSort"
+                            [style.minWidth.px]="getEffectiveMinWidth(col)"
+                            [style.width.px]="colW"
+                            [style.maxWidth.px]="colW"
+                            [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            [style.left.px]="pinnedLeft ? getPinnedLeftOffset(col.columnId) : null"
+                            [style.right.px]="pinnedRight ? getPinnedRightOffset(col.columnId) : null"
+                            (mousedown)="onHeaderMouseDown(col.columnId, $event)"
+                          >
+                            <div style="display:flex;align-items:center;gap:4px;">
+                              <ogrid-column-header-filter
+                                [columnKey]="col.columnId"
+                                [columnName]="col.name"
+                                [filterType]="config.filterType"
+                                [isSorted]="config.isSorted"
+                                [isSortedDescending]="config.isSortedDescending"
+                                [onSort]="config.onSort"
+                                [selectedValues]="config.selectedValues"
+                                [onFilterChange]="config.onFilterChange"
+                                [options]="config.options"
+                                [isLoadingOptions]="config.isLoadingOptions ?? false"
+                                [textValue]="config.textValue ?? ''"
+                                [onTextChange]="config.onTextChange"
+                                [selectedUser]="config.selectedUser"
+                                [onUserChange]="config.onUserChange"
+                                [peopleSearch]="config.peopleSearch"
+                                [dateValue]="config.dateValue"
+                                [onDateChange]="config.onDateChange"
+                              />
+                              @let pinState = getPinState(col.columnId);
+                              <column-header-menu
+                                [columnId]="col.columnId"
+                                [canPinLeft]="pinState.canPinLeft"
+                                [canPinRight]="pinState.canPinRight"
+                                [canUnpin]="pinState.canUnpin"
+                                [currentSort]="sortState"
+                                [isSortable]="col.sortable !== false"
+                                [isResizable]="col.resizable !== false"
+                                [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
+                              />
+                            </div>
+                            <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeStart($event, col)"></div>
+                          </th>
+                        }
+                      }
+                    </tr>
+                  }
+                </thead>
+                @if (!showEmptyInGrid()) {
+                  <tbody>
+                    @if (vsEnabled() && vsTopSpacerHeight() > 0) {
+                      <tr class="ogrid-datagrid-vs-spacer" [style.height.px]="vsTopSpacerHeight()"></tr>
+                    }
+                    @for (item of vsVisibleItems(); track getRowId()(item); let localIdx = $index) {
+                      @let rowIndex = vsStartIndex() + localIdx;
+                      @let rowId = getRowId()(item);
+                      @let isSelected = selectedRowIds().has(rowId);
+                      <tr
+                        class="ogrid-datagrid-row"
+                        [class.ogrid-datagrid-row--selected]="isSelected"
+                        [attr.data-row-id]="rowId"
+                        (click)="onRowClick($event, rowId)"
+                      >
+                        @if (hasCheckboxCol()) {
+                          <td class="ogrid-datagrid-td ogrid-datagrid-checkbox-col">
+                            <div
+                              class="ogrid-datagrid-checkbox-wrapper"
+                              [attr.data-row-index]="rowIndex"
+                              [attr.data-col-index]="0"
+                              (click)="$event.stopPropagation()"
+                            >
+                              <input
+                                type="checkbox"
+                                [checked]="isSelected"
+                                (change)="onRowCheckboxChange(rowId, $event, rowIndex)"
+                                [attr.aria-label]="'Select row ' + (rowIndex + 1)"
+                              />
+                            </div>
+                          </td>
+                        }
+                        @if (hasRowNumbersCol()) {
+                          <td class="ogrid-datagrid-td ogrid-row-number-cell">
+                            <div class="ogrid-row-number-cell-content">
+                              {{ rowNumberOffset() + rowIndex + 1 }}
+                            </div>
+                          </td>
+                        }
+                        @for (colLayout of columnLayouts(); track colLayout.col.columnId; let colIdx = $index) {
+                          <td
+                            class="ogrid-datagrid-td"
+                            [attr.data-column-id]="colLayout.col.columnId"
+                            [class.ogrid-datagrid-td--pinned-left]="colLayout.pinnedLeft"
+                            [class.ogrid-datagrid-td--pinned-right]="colLayout.pinnedRight"
+                            [style.minWidth.px]="colLayout.minWidth"
+                            [style.width.px]="colLayout.width"
+                            [style.maxWidth.px]="colLayout.width"
+                            [style.left.px]="colLayout.pinnedLeft ? getPinnedLeftOffset(colLayout.col.columnId) : null"
+                            [style.right.px]="colLayout.pinnedRight ? getPinnedRightOffset(colLayout.col.columnId) : null"
+                          >
+                            @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, colIdx);
+                            @if (descriptor.mode === 'editing-inline') {
+                              <div class="ogrid-editing-cell">
+                              <ogrid-mat-inline-cell-editor
+                                [value]="descriptor.value"
+                                [item]="item"
+                                [column]="colLayout.col"
+                                [rowIndex]="rowIndex"
+                                [editorType]="descriptor.editorType ?? 'text'"
+                                (commit)="commitEdit(item, colLayout.col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
+                                (cancel)="cancelEdit()"
+                              ></ogrid-mat-inline-cell-editor>
+                              </div>
+                            } @else if (descriptor.mode === 'editing-popover') {
+                              @let editorProps = buildPopoverEditorProps(item, colLayout.col, descriptor);
+                              <ogrid-mat-popover-cell-editor
+                                [item]="item"
+                                [column]="colLayout.col"
+                                [rowIndex]="rowIndex"
+                                [globalColIndex]="descriptor.globalColIndex"
+                                [displayValue]="descriptor.displayValue"
+                                [editorProps]="editorProps"
+                                [onCancel]="cancelEdit.bind(this)"
+                              ></ogrid-mat-popover-cell-editor>
+                            } @else {
+                              @let content = resolveCellContent(colLayout.col, item, descriptor.displayValue);
+                              @let cellStyle = resolveCellStyleFn(colLayout.col, item);
+                              <div
+                                class="ogrid-datagrid-cell"
+                                [class.ogrid-datagrid-cell--active]="descriptor.isActive && !descriptor.isInRange"
+                                [class.ogrid-datagrid-cell--in-range]="descriptor.isInRange"
+                                [class.ogrid-datagrid-cell--in-cut-range]="descriptor.isInCutRange"
+                                [class.ogrid-datagrid-cell--editable]="descriptor.canEditAny"
+                                [class.ogrid-datagrid-cell--numeric]="colLayout.col.type === 'numeric'"
+                                [class.ogrid-datagrid-cell--boolean]="colLayout.col.type === 'boolean'"
+                                [attr.data-row-index]="rowIndex"
+                                [attr.data-col-index]="descriptor.globalColIndex"
+                                [attr.data-in-range]="descriptor.isInRange ? 'true' : null"
+                                [attr.tabindex]="descriptor.isActive ? 0 : -1"
+                                (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
+                                (click)="onCellClick(rowIndex, descriptor.globalColIndex)"
+                                (contextmenu)="onCellContextMenu($event)"
+                                (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, colLayout.col.columnId) : null"
+                                [attr.role]="descriptor.canEditAny ? 'button' : null"
+                                [style]="cellStyle ?? undefined"
+                              >
+                                {{ content }}
+                                @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
+                                  <div
+                                    class="ogrid-datagrid-fill-handle"
+                                    (mousedown)="onFillHandleMouseDown($event)"
+                                    aria-label="Fill handle"
+                                  ></div>
+                                }
+                              </div>
+                            }
+                          </td>
+                        }
+                      </tr>
+                    }
+                    @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
+                      <tr class="ogrid-datagrid-vs-spacer" [style.height.px]="vsBottomSpacerHeight()"></tr>
+                    }
+                  </tbody>
+                }
+              </table>
+
+              <ogrid-marching-ants-overlay
+                [containerEl]="tableContainerEl()"
+                [selectionRange]="state().interaction.selectionRange"
+                [copyRange]="state().interaction.copyRange"
+                [cutRange]="state().interaction.cutRange"
+                [colOffset]="state().layout.colOffset"
+                [columnSizingVersion]="columnSizingVersion()"
+                [items]="items()"
+                [visibleColumns]="propsVisibleColumns()"
+                [columnOrder]="propsColumnOrder()"
+              ></ogrid-marching-ants-overlay>
+
+              @if (showEmptyInGrid() && emptyState()) {
+                <div class="ogrid-datagrid-empty">
+                  <div class="ogrid-datagrid-empty__title">No results found</div>
+                  <div class="ogrid-datagrid-empty__message">
+                    <ogrid-empty-state
+                      [message]="emptyState()?.message"
+                      [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
+                      [render]="emptyState()?.render"
+                      (clearAll)="emptyState()?.onClearAll()"
+                    ></ogrid-empty-state>
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+
+        @if (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
+          <div class="ogrid-datagrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
+        }
+
+        @if (menuPosition()) {
+          <div
+            class="ogrid-datagrid-context-menu-overlay"
+            (click)="closeContextMenu()"
+            (contextmenu)="$event.preventDefault(); closeContextMenu()"
+          >
+            <ogrid-context-menu
+              [x]="menuPosition()!.x"
+              [y]="menuPosition()!.y"
+              [hasSelection]="hasCellSelection()"
+              [canUndoProp]="canUndo()"
+              [canRedoProp]="canRedo()"
+              (undoAction)="onUndo()"
+              (redoAction)="onRedo()"
+              (copyAction)="handleCopy()"
+              (cutAction)="handleCut()"
+              (pasteAction)="handlePaste()"
+              (selectAllAction)="handleSelectAllCells()"
+              (closeAction)="closeContextMenu()"
+            />
+          </div>
+        }
+      </div>
+
+      @let sbConfig = statusBarConfig();
+      @if (sbConfig) {
+        <ogrid-status-bar
+          [totalCount]="sbConfig.totalCount"
+          [filteredCount]="sbConfig.filteredCount"
+          [selectedCount]="sbConfig.selectedCount ?? selectedRowIds().size"
+          [selectedCellCount]="selectionCellCount()"
+          [aggregation]="sbConfig.aggregation"
+          [suppressRowCount]="sbConfig.suppressRowCount"
+        />
+      }
+
+      @if (isLoading()) {
+        <div class="ogrid-datagrid-loading-overlay">
+          <div class="ogrid-datagrid-loading-inner">
+            <div class="ogrid-datagrid-spinner"></div>
+            <span>{{ loadingMessage() }}</span>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+    styles: [OGRID_THEME_VARS_CSS, `
+    :host { display: block; }
+    .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+    .ogrid-datagrid-wrapper {
+      position: relative; flex: 1; min-height: 0; width: 100%; max-width: 100%;
+      overflow-x: hidden; overflow-y: auto; background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      will-change: scroll-position; outline: none;
+    }
+    .ogrid-datagrid-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
+    .ogrid-datagrid-wrapper--fit { width: fit-content; }
+    .ogrid-datagrid-wrapper--overflow-x { overflow-x: auto; }
+    .ogrid-datagrid-wrapper--loading-empty { min-height: 200px; }
+    .ogrid-datagrid-scroll-wrapper { display: flex; flex-direction: column; min-height: 100%; }
+    .ogrid-datagrid-table-wrapper--loading { position: relative; opacity: 0.6; }
+    .ogrid-datagrid-table {
+      width: 100%; border-collapse: collapse; table-layout: fixed;
+    }
+    .ogrid-datagrid-table tbody tr { height: var(--ogrid-row-height, auto); }
+    .ogrid-datagrid-thead {
+      z-index: 8; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-datagrid-thead th { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-datagrid-header-row { background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-datagrid-th {
+      font-weight: 600; padding: 6px 10px; text-align: left;
+      font-size: 14px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); z-index: 8;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-sticky-header .ogrid-datagrid-th { position: sticky; top: 0; }
+    .ogrid-datagrid-th:focus-visible {
+      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 11;
+    }
+    .ogrid-datagrid-th--pinned-left {
+      position: sticky; top: 0; left: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-datagrid-th--pinned-right {
+      position: sticky; top: 0; right: 0; z-index: 10; background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); will-change: transform;
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-datagrid-group-header {
+      text-align: center; font-weight: 600; border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); padding: 6px;
+    }
+    .ogrid-datagrid-checkbox-col {
+      width: ${CHECKBOX_COLUMN_WIDTH}px; min-width: ${CHECKBOX_COLUMN_WIDTH}px;
+      max-width: ${CHECKBOX_COLUMN_WIDTH}px; text-align: center;
+    }
+    .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }
+    .ogrid-row-number-header, .ogrid-row-number-cell {
+      width: ${ROW_NUMBER_COLUMN_WIDTH}px; min-width: ${ROW_NUMBER_COLUMN_WIDTH}px;
+      max-width: ${ROW_NUMBER_COLUMN_WIDTH}px; text-align: center;
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;
+      font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      position: sticky; left: 0; z-index: 3;
+    }
+    .ogrid-row-number-header { z-index: 4; }
+    .ogrid-row-number-header-content, .ogrid-row-number-cell-content {
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ogrid-datagrid-row { }
+    .ogrid-datagrid-row:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-datagrid-row--selected { background: var(--ogrid-selected-row-bg, #e6f0fb); }
+    .ogrid-datagrid-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.06)); }
+    .ogrid-datagrid-td--pinned-left {
+      position: sticky; left: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-datagrid-td--pinned-right {
+      position: sticky; right: 0; z-index: 6; background: var(--ogrid-bg, #ffffff); will-change: transform;
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+    }
+    .ogrid-datagrid-cell {
+      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
+      padding: 6px 10px; box-sizing: border-box; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none;
+      font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-datagrid-cell:focus-visible {
+      outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -2px; z-index: 3;
+    }
+    .ogrid-datagrid-cell--numeric { justify-content: flex-end; text-align: right; }
+    .ogrid-datagrid-cell--boolean { justify-content: center; text-align: center; }
+    .ogrid-datagrid-cell--editable { cursor: cell; }
+    .ogrid-datagrid-cell--active {
+      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
+      z-index: 2; position: relative; overflow: visible;
+    }
+    .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
+    .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }
+    .ogrid-datagrid-cell--editing { padding: 0; }
+    .ogrid-editing-cell {
+      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;
+      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
+      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: visible; padding: 0;
+    }
+    .ogrid-datagrid-editor-input {
+      width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);
+      box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-datagrid-cell--numeric .ogrid-datagrid-editor-input {
+      text-align: right;
+    }
+    .ogrid-datagrid-editor-select {
+      width: 100%; height: 100%; padding: 4px 8px; border: 2px solid var(--ogrid-selection-color, #217346);
+      box-sizing: border-box; font-size: 14px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-datagrid-fill-handle {
+      position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
+      background: var(--ogrid-selection-color, #217346);
+      border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;
+      cursor: crosshair; pointer-events: auto; z-index: 3;
+    }
+    .ogrid-datagrid-resize-handle {
+      position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;
+      cursor: col-resize; user-select: none;
+    }
+    .ogrid-datagrid-resize-handle::after {
+      content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;
+      background: var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 1px; transition: background 0.15s;
+    }
+    .ogrid-datagrid-resize-handle:hover::after { background: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4)); }
+    .ogrid-datagrid-resize-handle:active::after { background: var(--mat-sys-primary, #1976d2); }
+    .ogrid-datagrid-empty {
+      padding: 32px 16px; text-align: center; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-datagrid-empty__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
+    .ogrid-datagrid-empty__message { font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-datagrid-empty__clear {
+      background: none; border: none; color: var(--mat-sys-primary, #1976d2);
+      cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0;
+    }
+    .ogrid-datagrid-loading-overlay {
+      position: absolute; inset: 0; z-index: 2;
+      display: flex; align-items: center; justify-content: center;
+      background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
+    }
+    .ogrid-datagrid-loading-inner {
+      display: flex; flex-direction: column; align-items: center; gap: 8px;
+      padding: 16px; background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-datagrid-spinner {
+      width: 24px; height: 24px; border: 3px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-top-color: var(--mat-sys-primary, #1976d2);
+      border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;
+    }
+    @keyframes ogrid-spin { to { transform: rotate(360deg); } }
+    .ogrid-datagrid-drop-indicator {
+      position: absolute; top: 0; bottom: 0; width: 3px;
+      background: var(--ogrid-selection-color, #217346);
+      pointer-events: none; z-index: 100; transition: left 0.05s;
+    }
+    .ogrid-datagrid-context-menu-overlay {
+      position: fixed; inset: 0; z-index: 1000;
+    }
+
+    /* Angular Material Menu popup dark mode overrides */
+    .mat-mdc-menu-panel {
+      background: var(--ogrid-bg, #ffffff) !important;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .mat-mdc-menu-item {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+    .mat-mdc-menu-item:hover:not([disabled]) {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+    }
+    .mat-mdc-menu-item .mat-mdc-menu-item-text {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    }
+  `]
+  })
+], DataGridTableComponent);
+var ColumnChooserComponent = class extends BaseColumnChooserComponent {
+  onDocumentClick(event) {
+    const el = event.target;
+    if (!el.closest("ogrid-column-chooser")) {
+      this.isOpen.set(false);
+    }
+  }
+};
+ColumnChooserComponent = __decorateClass([
+  Component({
+    selector: "ogrid-column-chooser",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div class="ogrid-column-chooser">
+      <button
+        class="ogrid-column-chooser__trigger"
+        (click)="toggle()"
+        [attr.aria-expanded]="isOpen()"
+        aria-haspopup="listbox"
+      >
+        &#9638; Column Visibility ({{ visibleCount() }} of {{ totalCount() }})
+        <span class="ogrid-column-chooser__caret">{{ isOpen() ? '&#9650;' : '&#9660;' }}</span>
+      </button>
+
+      @if (isOpen()) {
+        <div class="ogrid-column-chooser__dropdown" (click)="$event.stopPropagation()">
+          <div class="ogrid-column-chooser__header">
+            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
+          </div>
+
+          <div class="ogrid-column-chooser__list">
+            @for (col of columns; track col.columnId) {
+              <label class="ogrid-column-chooser__item">
+                <input
+                  type="checkbox"
+                  [checked]="visibleColumns.has(col.columnId)"
+                  (change)="onCheckboxChange(col.columnId, $event)"
+                />
+                <span>{{ col.name }}</span>
+              </label>
+            }
+          </div>
+
+          <div class="ogrid-column-chooser__footer">
+            <button class="ogrid-column-chooser__btn" (click)="onClearAll()">Clear All</button>
+            <button class="ogrid-column-chooser__btn ogrid-column-chooser__btn--primary" (click)="selectAll()">Select All</button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+    styles: [`
+    :host { display: inline-flex; position: relative; }
+    .ogrid-column-chooser { position: relative; }
+    .ogrid-column-chooser__trigger {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 6px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
+      background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;
+      text-transform: none; white-space: nowrap;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-column-chooser__trigger:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-column-chooser__caret { font-size: 10px; }
+    .ogrid-column-chooser__dropdown {
+      position: absolute; top: 100%; right: 0; z-index: 1000;
+      min-width: 220px; margin-top: 4px;
+      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+    .ogrid-column-chooser__header {
+      padding: 8px 12px; font-size: 14px; font-weight: 600;
+      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-column-chooser__list {
+      max-height: 320px; overflow-y: auto; padding: 4px 0;
+    }
+    .ogrid-column-chooser__item {
+      display: flex; align-items: center; gap: 8px;
+      padding: 4px 12px; min-height: 32px; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-column-chooser__item:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-column-chooser__footer {
+      display: flex; justify-content: flex-end; gap: 8px;
+      padding: 8px 12px; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
+    }
+    .ogrid-column-chooser__btn {
+      padding: 4px 12px; border: none; border-radius: 4px;
+      background: transparent; cursor: pointer; font-size: 13px; text-transform: none;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-column-chooser__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-column-chooser__btn--primary {
+      background: var(--mat-sys-primary, #1976d2); color: #fff;
+    }
+    .ogrid-column-chooser__btn--primary:hover {
+      opacity: 0.9;
+    }
+  `],
+    host: {
+      "(document:click)": "onDocumentClick($event)"
+    }
+  })
+], ColumnChooserComponent);
+var PaginationControlsComponent = class extends BasePaginationControlsComponent {
+};
+PaginationControlsComponent = __decorateClass([
+  Component({
+    selector: "ogrid-pagination-controls",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    @if (vm(); as vm) {
+      <nav class="ogrid-pagination" role="navigation" aria-label="Pagination">
+        <span class="ogrid-pagination__info">
+          Showing {{ vm.startItem }} to {{ vm.endItem }} of {{ totalCount.toLocaleString() }} {{ entityLabelPlural }}
+        </span>
+
+        <span class="ogrid-pagination__pages">
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(1)"
+            aria-label="First page"
+          >&laquo;</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(currentPage - 1)"
+            aria-label="Previous page"
+          >&lsaquo;</button>
+
+          @if (vm.showStartEllipsis) {
+            <button class="ogrid-pagination__btn" (click)="pageChange.emit(1)" aria-label="Page 1">1</button>
+            <span class="ogrid-pagination__ellipsis" aria-hidden="true">&hellip;</span>
+          }
+
+          @for (pageNum of vm.pageNumbers; track pageNum) {
+            <button
+              class="ogrid-pagination__btn"
+              [class.ogrid-pagination__btn--active]="currentPage === pageNum"
+              (click)="pageChange.emit(pageNum)"
+              [attr.aria-label]="'Page ' + pageNum"
+              [attr.aria-current]="currentPage === pageNum ? 'page' : null"
+            >{{ pageNum }}</button>
+          }
+
+          @if (vm.showEndEllipsis) {
+            <span class="ogrid-pagination__ellipsis" aria-hidden="true">&hellip;</span>
+            <button
+              class="ogrid-pagination__btn"
+              (click)="pageChange.emit(vm.totalPages)"
+              [attr.aria-label]="'Page ' + vm.totalPages"
+            >{{ vm.totalPages }}</button>
+          }
+
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage >= vm.totalPages"
+            (click)="pageChange.emit(currentPage + 1)"
+            aria-label="Next page"
+          >&rsaquo;</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage >= vm.totalPages"
+            (click)="pageChange.emit(vm.totalPages)"
+            aria-label="Last page"
+          >&raquo;</button>
+        </span>
+
+        <span class="ogrid-pagination__size">
+          <label>Rows
+            <select
+              [value]="pageSize"
+              (change)="onPageSizeSelect($event)"
+              aria-label="Rows per page"
+            >
+              @for (n of vm.pageSizeOptions; track n) {
+                <option [value]="n" [selected]="pageSize === n">{{ n }}</option>
+              }
+            </select>
+          </label>
+        </span>
+      </nav>
+    }
+  `,
+    styles: [`
+    :host { display: block; }
+    .ogrid-pagination {
+      display: flex; align-items: center; justify-content: space-between;
+      flex-wrap: wrap; gap: 8px; padding: 6px 12px; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-pagination__info { color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-pagination__pages { display: flex; align-items: center; gap: 2px; }
+    .ogrid-pagination__btn {
+      min-width: 32px; height: 32px; padding: 0 6px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
+      background: transparent; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+    .ogrid-pagination__btn:hover:not(:disabled) { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
+    .ogrid-pagination__btn:disabled { opacity: 0.38; cursor: default; }
+    .ogrid-pagination__btn--active {
+      background: var(--mat-sys-primary, #1976d2); color: #fff;
+      border-color: var(--mat-sys-primary, #1976d2);
+    }
+    .ogrid-pagination__ellipsis { margin: 0 4px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
+    .ogrid-pagination__size select {
+      min-width: 60px; height: 32px; padding: 4px 8px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
+      font-size: 14px; margin-left: 8px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+    }
+  `]
+  })
+], PaginationControlsComponent);
+
+// src/ogrid/ogrid.component.ts
+var OGridComponent = class extends BaseOGridComponent {
+};
+OGridComponent = __decorateClass([
+  Component({
+    selector: "ogrid",
+    standalone: true,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+      OGridLayoutComponent,
+      DataGridTableComponent,
+      ColumnChooserComponent,
+      PaginationControlsComponent
+    ],
+    providers: [OGridService],
+    styles: [`:host { display: block; height: 100%; }`],
+    template: `
+    <ogrid-layout
+      [className]="ogridService.className()"
+      [sideBar]="ogridService.sideBarProps()"
+      [hasToolbar]="showToolbar"
+      [hasToolbarBelow]="false"
+      [hasPagination]="true"
+      [fullScreen]="ogridService.fullScreen()"
+    >
+      <ng-container toolbarEnd>
+        @if (ogridService.columnChooserPlacement() === 'toolbar') {
+          <ogrid-column-chooser
+            [columns]="ogridService.columnChooser().columns"
+            [visibleColumns]="ogridService.columnChooser().visibleColumns"
+            (visibilityChange)="ogridService.columnChooser().onVisibilityChange($event.columnKey, $event.visible)"
+          />
+        }
+      </ng-container>
+
+      <ogrid-datagrid-table [props]="ogridService.dataGridProps()" />
+
+      <ng-container pagination>
+        <ogrid-pagination-controls
+          [currentPage]="ogridService.pagination().page"
+          [pageSize]="ogridService.pagination().pageSize"
+          [totalCount]="ogridService.pagination().displayTotalCount"
+          [pageSizeOptions]="ogridService.pagination().pageSizeOptions"
+          [entityLabelPlural]="ogridService.pagination().entityLabelPlural"
+          (pageChange)="ogridService.pagination().setPage($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        />
+      </ng-container>
+    </ogrid-layout>
+  `
+  })
+], OGridComponent);
+
+export { ColumnChooserComponent, ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, DataGridTableComponent, InlineCellEditorComponent, OGridComponent, PaginationControlsComponent, PopoverCellEditorComponent };