@alaarab/ogrid-angular-material 2.0.18 → 2.0.21

package/dist/esm/column-chooser/column-chooser.component.js

@@ -75,7 +75,7 @@ ColumnChooserComponent = __decorate([
     .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: 10;
+      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);

package/dist/esm/column-header-filter/column-header-filter.component.js

@@ -35,24 +35,6 @@ ColumnHeaderFilterComponent = __decorate([
       </div>
 
       <div class="ogrid-header-filter__actions">
-        @if (onSort) {
-          <button
-            class="ogrid-header-filter__btn"
-            [class.ogrid-header-filter__btn--active]="isSorted"
-            (click)="onSort!()"
-            [attr.aria-label]="'Sort by ' + columnName"
-            [title]="isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
-          >
-            @if (isSorted && isSortedDescending) {
-              &#9660;
-            } @else if (isSorted) {
-              &#9650;
-            } @else {
-              &#8597;
-            }
-          </button>
-        }
-
         @if (filterType !== 'none') {
           <button
             class="ogrid-header-filter__filter-btn"
@@ -268,7 +250,7 @@ ColumnHeaderFilterComponent = __decorate([
       background: var(--mat-sys-primary, #1976d2);
     }
     .ogrid-header-filter__popover {
-      position: fixed; z-index: 10000;
+      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));

package/dist/esm/datagrid-table/datagrid-table.component.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, signal } from '@angular/core';
-import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, StatusBarComponent, GridContextMenuComponent, EmptyStateComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
+import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, StatusBarComponent, GridContextMenuComponent, EmptyStateComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, OGRID_THEME_VARS_CSS, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
 import { InlineCellEditorComponent } from './inline-cell-editor.component';
@@ -32,20 +32,6 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     getTableContainerRef() {
         return this.tableContainerRef;
     }
-    /** Build column header menu handlers for a given column */
-    getColumnMenuHandlers(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: () => { }
-        };
-    }
 };
 __decorate([
     Input({ required: true, alias: 'props' })
@@ -72,6 +58,7 @@ DataGridTableComponent = __decorate([
         [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()"
@@ -114,7 +101,7 @@ DataGridTableComponent = __decorate([
                       @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 $index; let cellIdx = $index) {
+                      @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 }}
@@ -127,6 +114,7 @@ DataGridTableComponent = __decorate([
                           @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"
@@ -146,24 +134,23 @@ DataGridTableComponent = __decorate([
                               <ogrid-column-header-filter
                                 [columnKey]="col.columnId"
                                 [columnName]="col.name"
-                                [filterType]="getFilterConfig(col).filterType"
-                                [isSorted]="getFilterConfig(col).isSorted"
-                                [isSortedDescending]="getFilterConfig(col).isSortedDescending"
-                                [onSort]="getFilterConfig(col).onSort"
-                                [selectedValues]="getFilterConfig(col).selectedValues"
-                                [onFilterChange]="getFilterConfig(col).onFilterChange"
-                                [options]="getFilterConfig(col).options"
-                                [isLoadingOptions]="getFilterConfig(col).isLoadingOptions ?? false"
-                                [textValue]="getFilterConfig(col).textValue ?? ''"
-                                [onTextChange]="getFilterConfig(col).onTextChange"
-                                [selectedUser]="getFilterConfig(col).selectedUser"
-                                [onUserChange]="getFilterConfig(col).onUserChange"
-                                [peopleSearch]="getFilterConfig(col).peopleSearch"
-                                [dateValue]="getFilterConfig(col).dateValue"
-                                [onDateChange]="getFilterConfig(col).onDateChange"
+                                [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);
-                              @let sortState = getSortState(col.columnId);
                               <column-header-menu
                                 [columnId]="col.columnId"
                                 [canPinLeft]="pinState.canPinLeft"
@@ -172,7 +159,7 @@ DataGridTableComponent = __decorate([
                                 [currentSort]="sortState"
                                 [isSortable]="col.sortable !== false"
                                 [isResizable]="col.resizable !== false"
-                                [handlers]="getColumnMenuHandlers(col.columnId)"
+                                [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
                               />
                             </div>
                             <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeStart($event, col)"></div>
@@ -357,14 +344,15 @@ DataGridTableComponent = __decorate([
         }
       </div>
 
-      @if (statusBarConfig()) {
+      @let sbConfig = statusBarConfig();
+      @if (sbConfig) {
         <ogrid-status-bar
-          [totalCount]="statusBarConfig()!.totalCount"
-          [filteredCount]="statusBarConfig()!.filteredCount"
-          [selectedCount]="statusBarConfig()!.selectedCount ?? selectedRowIds().size"
+          [totalCount]="sbConfig.totalCount"
+          [filteredCount]="sbConfig.filteredCount"
+          [selectedCount]="sbConfig.selectedCount ?? selectedRowIds().size"
           [selectedCellCount]="selectionCellCount()"
-          [aggregation]="statusBarConfig()!.aggregation"
-          [suppressRowCount]="statusBarConfig()!.suppressRowCount"
+          [aggregation]="sbConfig.aggregation"
+          [suppressRowCount]="sbConfig.suppressRowCount"
         />
       }
 
@@ -378,55 +366,7 @@ DataGridTableComponent = __decorate([
       }
     </div>
   `,
-        styles: [`
-    /* ─── OGrid Theme Variables ─── */
-    :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);
-    }
+        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 {
@@ -444,6 +384,7 @@ DataGridTableComponent = __decorate([
     .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));
     }

package/dist/esm/datagrid-table/inline-cell-editor.component.js

@@ -4,119 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BaseInlineCellEditorComponent } from '@alaarab/ogrid-angular';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseInlineCellEditorComponent, INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from '@alaarab/ogrid-angular';
 let InlineCellEditorComponent = class InlineCellEditorComponent extends BaseInlineCellEditorComponent {
 };
 InlineCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-mat-inline-cell-editor',
         standalone: true,
-        imports: [CommonModule],
-        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()"
-        />
-      }
-    }
-  `,
-        styles: [`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  `],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: INLINE_CELL_EDITOR_TEMPLATE,
+        styles: [INLINE_CELL_EDITOR_STYLES],
     })
 ], InlineCellEditorComponent);
 export { InlineCellEditorComponent };

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -4,98 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ChangeDetectionStrategy, signal, effect, ViewChild, Injector, createComponent, EnvironmentInjector, inject, Input } from '@angular/core';
-/**
- * PopoverCellEditor component for Angular Material.
- * Renders custom popover editor when anchor element is set.
- */
-let PopoverCellEditorComponent = class PopoverCellEditorComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.envInjector = inject(EnvironmentInjector);
-        this.showEditor = signal(false);
-        // Show editor after anchor is rendered
-        effect(() => {
-            const anchor = this.anchorRef;
-            if (anchor) {
-                setTimeout(() => this.showEditor.set(true), 0);
-            }
-        });
-        // Render custom editor component when container is available
-        effect(() => {
-            const container = this.editorContainerRef;
-            const props = this.editorProps;
-            const col = this.column;
-            if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
-                return;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const EditorComponent = col.cellEditor; // ComponentType
-            const componentRef = createComponent(EditorComponent, {
-                environmentInjector: this.envInjector,
-                elementInjector: this.injector,
-            });
-            // Pass props to component instance
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Object.assign(componentRef.instance, props);
-            componentRef.changeDetectorRef.detectChanges();
-            // Append to DOM
-            container.nativeElement.appendChild(componentRef.location.nativeElement);
-            // Cleanup on destroy
-            return () => componentRef.destroy();
-        });
-    }
-    handleOverlayClick() {
-        this.onCancel();
-    }
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from '@alaarab/ogrid-angular';
+let PopoverCellEditorComponent = class PopoverCellEditorComponent extends BasePopoverCellEditorComponent {
 };
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "item", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "column", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "rowIndex", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "globalColIndex", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "displayValue", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "editorProps", void 0);
-__decorate([
-    Input({ required: true })
-], PopoverCellEditorComponent.prototype, "onCancel", void 0);
-__decorate([
-    ViewChild('anchorEl')
-], PopoverCellEditorComponent.prototype, "anchorRef", void 0);
-__decorate([
-    ViewChild('editorContainer')
-], PopoverCellEditorComponent.prototype, "editorContainerRef", void 0);
 PopoverCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-mat-popover-cell-editor',
         standalone: true,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        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>
-    }
-  `,
+        template: POPOVER_CELL_EDITOR_TEMPLATE,
         styles: [`
-    :host { display: contents; }
+    ${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;
@@ -103,17 +23,6 @@ PopoverCellEditorComponent = __decorate([
       outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px;
       z-index: 2; position: relative;
     }
-    .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));
-    }
   `],
     })
 ], PopoverCellEditorComponent);

package/dist/esm/index.js

@@ -1,4 +1,6 @@
-// Re-export everything from angular adapter
+// 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';

package/dist/types/datagrid-table/datagrid-table.component.d.ts

@@ -14,16 +14,4 @@ export declare class DataGridTableComponent<T> extends BaseDataGridTableComponen
     protected getProps(): IOGridDataGridProps<T> | undefined;
     protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
-    /** Build column header menu handlers for a given column */
-    protected getColumnMenuHandlers(columnId: string): {
-        onPinLeft: () => void;
-        onPinRight: () => void;
-        onUnpin: () => void;
-        onSortAsc: () => void;
-        onSortDesc: () => void;
-        onClearSort: () => void;
-        onAutosizeThis: () => void;
-        onAutosizeAll: () => void;
-        onClose: () => void;
-    };
 }

package/dist/types/datagrid-table/popover-cell-editor.component.d.ts

@@ -1,21 +1,3 @@
-import type { IColumnDef, ICellEditorProps } from '@alaarab/ogrid-angular';
-/**
- * PopoverCellEditor component for Angular Material.
- * Renders custom popover editor when anchor element is set.
- */
-export declare class PopoverCellEditorComponent<T> {
-    item: T;
-    column: IColumnDef<T>;
-    rowIndex: number;
-    globalColIndex: number;
-    displayValue: unknown;
-    editorProps: ICellEditorProps<T>;
-    onCancel: () => void;
-    private anchorRef?;
-    private editorContainerRef?;
-    private readonly injector;
-    private readonly envInjector;
-    protected readonly showEditor: import("@angular/core").WritableSignal<boolean>;
-    constructor();
-    protected handleOverlayClick(): void;
+import { BasePopoverCellEditorComponent } from '@alaarab/ogrid-angular';
+export declare class PopoverCellEditorComponent<T = unknown> extends BasePopoverCellEditorComponent<T> {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.18",
+  "version": "2.0.21",
   "description": "OGrid Angular Material – MatTable-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.18"
+    "@alaarab/ogrid-angular": "2.0.21"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",