@alaarab/ogrid-angular 2.0.23 → 2.1.0

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

@@ -116,12 +116,14 @@ export class BaseColumnHeaderFilterComponent {
         }
     }
     handleTextApply() {
-        this.onTextChange(this.tempTextValue());
+        if (this.onTextChange)
+            this.onTextChange(this.tempTextValue());
         this.isFilterOpen.set(false);
     }
     handleTextClear() {
         this.tempTextValue.set('');
-        this.onTextChange('');
+        if (this.onTextChange)
+            this.onTextChange('');
         this.isFilterOpen.set(false);
     }
     // --- MultiSelect filter handlers ---
@@ -148,7 +150,8 @@ export class BaseColumnHeaderFilterComponent {
         this.tempSelected.set(new Set());
     }
     handleApplyMultiSelect() {
-        this.onFilterChange(Array.from(this.tempSelected()));
+        if (this.onFilterChange)
+            this.onFilterChange(Array.from(this.tempSelected()));
         this.isFilterOpen.set(false);
     }
     // --- People filter handlers ---
@@ -180,31 +183,43 @@ export class BaseColumnHeaderFilterComponent {
         }, 300);
     }
     handleUserSelect(user) {
-        this.onUserChange(user);
+        if (this.onUserChange)
+            this.onUserChange(user);
         this.isFilterOpen.set(false);
     }
     handleClearUser() {
-        this.onUserChange(undefined);
+        if (this.onUserChange)
+            this.onUserChange(undefined);
         this.isFilterOpen.set(false);
     }
     // --- Date filter handlers ---
     handleDateApply() {
         const from = this.tempDateFrom();
         const to = this.tempDateTo();
-        if (!from && !to) {
-            this.onDateChange(undefined);
-        }
-        else {
-            this.onDateChange({ from: from || undefined, to: to || undefined });
+        if (this.onDateChange) {
+            if (!from && !to) {
+                this.onDateChange(undefined);
+            }
+            else {
+                this.onDateChange({ from: from || undefined, to: to || undefined });
+            }
         }
         this.isFilterOpen.set(false);
     }
     handleDateClear() {
         this.tempDateFrom.set('');
         this.tempDateTo.set('');
-        this.onDateChange(undefined);
+        if (this.onDateChange)
+            this.onDateChange(undefined);
         this.isFilterOpen.set(false);
     }
+    /** Clean up debounce timer on destroy. */
+    ngOnDestroy() {
+        if (this.peopleDebounceTimer) {
+            clearTimeout(this.peopleDebounceTimer);
+            this.peopleDebounceTimer = null;
+        }
+    }
     // --- Document click handler (for click-outside to close) ---
     onDocumentClick(event, selectorName) {
         const el = event.target;

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

@@ -1,4 +1,4 @@
-import { signal, computed, effect } from '@angular/core';
+import { signal, computed, effect, inject } from '@angular/core';
 import { DataGridStateService } from '../services/datagrid-state.service';
 import { ColumnReorderService } from '../services/column-reorder.service';
 import { VirtualScrollService } from '../services/virtual-scroll.service';
@@ -15,13 +15,13 @@ import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayConte
  */
 export class BaseDataGridTableComponent {
     constructor() {
-        this.stateService = new DataGridStateService();
-        this.columnReorderService = new ColumnReorderService();
-        this.virtualScrollService = new VirtualScrollService();
+        this.stateService = inject(DataGridStateService);
+        this.columnReorderService = inject(ColumnReorderService);
+        this.virtualScrollService = inject(VirtualScrollService);
         this.lastMouseShift = false;
         this.columnSizingVersion = signal(0);
         /** Dirty flag — set when column layout changes, cleared after measurement. */
-        this.measureDirty = true;
+        this.measureDirty = signal(true);
         /** DOM-measured column widths from the last layout pass.
          *  Used as a minWidth floor to prevent columns from shrinking
          *  when new data loads (e.g. server-side pagination). */
@@ -33,8 +33,16 @@ export class BaseDataGridTableComponent {
         this.tableContainerElSignal = signal(null);
         // --- Delegated state ---
         this.state = computed(() => this.stateService.getState());
+        // Intermediate computed signals — narrow slices of state() so leaf computeds
+        // only recompute when their specific sub-state changes.
+        this.layoutState = computed(() => this.state().layout);
+        this.rowSelectionState = computed(() => this.state().rowSelection);
+        this.editingState = computed(() => this.state().editing);
+        this.interactionState = computed(() => this.state().interaction);
+        this.contextMenuState = computed(() => this.state().contextMenu);
+        this.viewModelsState = computed(() => this.state().viewModels);
+        this.pinningState = computed(() => this.state().pinning);
         this.tableContainerEl = computed(() => this.tableContainerElSignal());
-        this.allItems = computed(() => this.getProps()?.items ?? []);
         this.items = computed(() => this.getProps()?.items ?? []);
         this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item['id']));
         this.isLoading = computed(() => this.getProps()?.isLoading ?? false);
@@ -52,35 +60,35 @@ export class BaseDataGridTableComponent {
         this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0);
         this.propsVisibleColumns = computed(() => this.getProps()?.visibleColumns);
         this.propsColumnOrder = computed(() => this.getProps()?.columnOrder);
-        // State service outputs
-        this.visibleCols = computed(() => this.state().layout.visibleCols);
-        this.hasCheckboxCol = computed(() => this.state().layout.hasCheckboxCol);
-        this.hasRowNumbersCol = computed(() => this.state().layout.hasRowNumbersCol);
-        this.colOffset = computed(() => this.state().layout.colOffset);
-        this.containerWidth = computed(() => this.state().layout.containerWidth);
-        this.minTableWidth = computed(() => this.state().layout.minTableWidth);
-        this.desiredTableWidth = computed(() => this.state().layout.desiredTableWidth);
-        this.columnSizingOverrides = computed(() => this.state().layout.columnSizingOverrides);
-        this.selectedRowIds = computed(() => this.state().rowSelection.selectedRowIds);
-        this.allSelected = computed(() => this.state().rowSelection.allSelected);
-        this.someSelected = computed(() => this.state().rowSelection.someSelected);
-        this.editingCell = computed(() => this.state().editing.editingCell);
-        this.pendingEditorValue = computed(() => this.state().editing.pendingEditorValue);
-        this.activeCell = computed(() => this.state().interaction.activeCell);
-        this.selectionRange = computed(() => this.state().interaction.selectionRange);
-        this.hasCellSelection = computed(() => this.state().interaction.hasCellSelection);
-        this.cutRange = computed(() => this.state().interaction.cutRange);
-        this.copyRange = computed(() => this.state().interaction.copyRange);
-        this.canUndo = computed(() => this.state().interaction.canUndo);
-        this.canRedo = computed(() => this.state().interaction.canRedo);
-        this.isDragging = computed(() => this.state().interaction.isDragging);
-        this.menuPosition = computed(() => this.state().contextMenu.menuPosition);
-        this.statusBarConfig = computed(() => this.state().viewModels.statusBarConfig);
-        this.showEmptyInGrid = computed(() => this.state().viewModels.showEmptyInGrid);
-        this.headerFilterInput = computed(() => this.state().viewModels.headerFilterInput);
-        this.cellDescriptorInput = computed(() => this.state().viewModels.cellDescriptorInput);
+        // State service outputs — read from narrow intermediate signals
+        this.visibleCols = computed(() => this.layoutState().visibleCols);
+        this.hasCheckboxCol = computed(() => this.layoutState().hasCheckboxCol);
+        this.hasRowNumbersCol = computed(() => this.layoutState().hasRowNumbersCol);
+        this.colOffset = computed(() => this.layoutState().colOffset);
+        this.containerWidth = computed(() => this.layoutState().containerWidth);
+        this.minTableWidth = computed(() => this.layoutState().minTableWidth);
+        this.desiredTableWidth = computed(() => this.layoutState().desiredTableWidth);
+        this.columnSizingOverrides = computed(() => this.layoutState().columnSizingOverrides);
+        this.selectedRowIds = computed(() => this.rowSelectionState().selectedRowIds);
+        this.allSelected = computed(() => this.rowSelectionState().allSelected);
+        this.someSelected = computed(() => this.rowSelectionState().someSelected);
+        this.editingCell = computed(() => this.editingState().editingCell);
+        this.pendingEditorValue = computed(() => this.editingState().pendingEditorValue);
+        this.activeCell = computed(() => this.interactionState().activeCell);
+        this.selectionRange = computed(() => this.interactionState().selectionRange);
+        this.hasCellSelection = computed(() => this.interactionState().hasCellSelection);
+        this.cutRange = computed(() => this.interactionState().cutRange);
+        this.copyRange = computed(() => this.interactionState().copyRange);
+        this.canUndo = computed(() => this.interactionState().canUndo);
+        this.canRedo = computed(() => this.interactionState().canRedo);
+        this.isDragging = computed(() => this.interactionState().isDragging);
+        this.menuPosition = computed(() => this.contextMenuState().menuPosition);
+        this.statusBarConfig = computed(() => this.viewModelsState().statusBarConfig);
+        this.showEmptyInGrid = computed(() => this.viewModelsState().showEmptyInGrid);
+        this.headerFilterInput = computed(() => this.viewModelsState().headerFilterInput);
+        this.cellDescriptorInput = computed(() => this.viewModelsState().cellDescriptorInput);
         // Pinning state
-        this.pinnedColumnsMap = computed(() => this.state().pinning.pinnedColumns);
+        this.pinnedColumnsMap = computed(() => this.pinningState().pinnedColumns);
         // Virtual scrolling
         this.vsEnabled = computed(() => this.virtualScrollService.isActive());
         this.vsVisibleRange = computed(() => this.virtualScrollService.visibleRange());
@@ -95,7 +103,7 @@ export class BaseDataGridTableComponent {
             return this.vsVisibleRange().offsetBottom;
         });
         this.vsVisibleItems = computed(() => {
-            const items = this.allItems();
+            const items = this.items();
             if (!this.vsEnabled())
                 return items;
             const range = this.vsVisibleRange();
@@ -107,8 +115,8 @@ export class BaseDataGridTableComponent {
             return this.vsVisibleRange().startIndex;
         });
         // Popover editing
-        this.popoverAnchorEl = computed(() => this.state().editing.popoverAnchorEl);
-        this.pendingEditorValueForPopover = computed(() => this.state().editing.pendingEditorValue);
+        this.popoverAnchorEl = computed(() => this.editingState().popoverAnchorEl);
+        this.pendingEditorValueForPopover = computed(() => this.editingState().pendingEditorValue);
         this.allowOverflowX = computed(() => {
             const p = this.getProps();
             if (p?.suppressHorizontalScroll)
@@ -209,8 +217,8 @@ export class BaseDataGridTableComponent {
     }
     /** Lifecycle hook — re-measure column widths only when layout changed */
     ngAfterViewChecked() {
-        if (this.measureDirty) {
-            this.measureDirty = false;
+        if (this.measureDirty()) {
+            this.measureDirty.set(false);
             this.measureColumnWidths();
         }
     }
@@ -245,8 +253,18 @@ export class BaseDataGridTableComponent {
         }
     }
     /**
-     * Initialize base wiring effects. Must be called from subclass constructor
-     * (effects need to run inside an injection context).
+     * Initialize base wiring effects. Must be called from subclass constructor.
+     *
+     * **Timing:** Angular requires `effect()` to be created inside an injection
+     * context (constructor or field initializer). On the first run, signals like
+     * `wrapperElSignal()` return `null` because the DOM hasn't been created yet.
+     * After `ngAfterViewInit` sets these signals, Angular's signal graph
+     * automatically re-runs each effect. The null guards inside each effect body
+     * ensure the first (null) run is a safe no-op.
+     *
+     * Sequence:
+     *   1. Constructor → `initBase()` → effects created, first run (signals null → no-ops)
+     *   2. `ngAfterViewInit` → `wrapperElSignal.set(el)` → effects re-run with real values
      */
     initBase() {
         // Wire props to state service
@@ -280,7 +298,7 @@ export class BaseDataGridTableComponent {
             this.visibleCols();
             this.columnSizingOverrides();
             this.columnSizingVersion();
-            this.measureDirty = true;
+            this.measureDirty.set(true);
         });
         // Wire virtual scroll service inputs
         effect(() => {
@@ -468,7 +486,7 @@ export class BaseDataGridTableComponent {
         this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
     }
     onCellClick(rowIndex, globalColIndex) {
-        this.state().interaction.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+        this.state().interaction.setActiveCell?.({ rowIndex, columnIndex: globalColIndex });
     }
     onCellContextMenu(event) {
         this.state().contextMenu.handleCellContextMenu(event);
@@ -477,13 +495,13 @@ export class BaseDataGridTableComponent {
         this.state().editing.setEditingCell({ rowId, columnId });
     }
     onFillHandleMouseDown(event) {
-        this.state().interaction.handleFillHandleMouseDown(event);
+        this.state().interaction.handleFillHandleMouseDown?.(event);
     }
     onResizeStart(event, col) {
         event.preventDefault();
         // Clear cell selection before resize (like React) so selection outlines don't persist during drag
-        this.state().interaction.setActiveCell(null);
-        this.state().interaction.setSelectionRange(null);
+        this.state().interaction.setActiveCell?.(null);
+        this.state().interaction.setSelectionRange?.(null);
         this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
         const startX = event.clientX;
         const startWidth = this.getColumnWidth(col);

package/dist/esm/components/base-ogrid.component.js

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+/**
+ * Base class for OGrid top-level components (Material, Radix).
+ * Contains all shared TypeScript logic. Subclasses provide a @Component
+ * decorator with their own selector, template, and imports.
+ */
+import { Input, signal, effect, inject } from '@angular/core';
+import { OGridService } from '../services/ogrid.service';
+export class BaseOGridComponent {
+    set props(value) {
+        this.propsSignal.set(value);
+    }
+    constructor() {
+        this.propsSignal = signal(undefined);
+        this.ogridService = inject(OGridService);
+        effect(() => {
+            const p = this.propsSignal();
+            if (p)
+                this.ogridService.configure(p);
+        });
+    }
+    get showToolbar() {
+        return this.ogridService.columnChooserPlacement() === 'toolbar' || this.ogridService.toolbar() != null;
+    }
+    onPageSizeChange(size) {
+        this.ogridService.pagination().setPageSize(size);
+    }
+}
+__decorate([
+    Input({ required: true })
+], BaseOGridComponent.prototype, "props", null);

package/dist/esm/components/base-popover-cell-editor.component.js

@@ -59,27 +59,26 @@ export class BasePopoverCellEditorComponent {
                 setTimeout(() => this.showEditor.set(true), 0);
             }
         });
-        // Render custom editor component when container is available
-        effect(() => {
+        // Render custom editor component when container is available.
+        // Angular's effect() ignores return values — use onCleanup() for cleanup.
+        effect((onCleanup) => {
             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 EditorComponent = col.cellEditor;
             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();
+            // Cleanup when effect re-runs or component is destroyed
+            onCleanup(() => componentRef.destroy());
         });
     }
     handleOverlayClick() {

package/dist/esm/components/empty-state.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, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 let EmptyStateComponent = class EmptyStateComponent {
     constructor() {
         this.message = undefined;
@@ -31,7 +31,7 @@ EmptyStateComponent = __decorate([
         selector: 'ogrid-empty-state',
         standalone: true,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        imports: [CommonModule],
+        imports: [NgTemplateOutlet],
         styles: [`
     .ogrid-empty-state-clear-btn {
       background: none; border: none; color: inherit;

package/dist/esm/components/grid-context-menu.component.js

@@ -13,23 +13,23 @@ let GridContextMenuComponent = class GridContextMenuComponent {
         this.canUndoProp = false;
         this.canRedoProp = false;
         this.classNames = undefined;
-        this.copy = new EventEmitter();
-        this.cut = new EventEmitter();
-        this.paste = new EventEmitter();
-        this.selectAll = new EventEmitter();
+        this.copyAction = new EventEmitter();
+        this.cutAction = new EventEmitter();
+        this.pasteAction = new EventEmitter();
+        this.selectAllAction = new EventEmitter();
         this.undoAction = new EventEmitter();
         this.redoAction = new EventEmitter();
-        this.close = new EventEmitter();
+        this.closeAction = new EventEmitter();
         this.menuItems = GRID_CONTEXT_MENU_ITEMS;
         this.formatShortcutFn = formatShortcut;
         this.clickOutsideHandler = (e) => {
             const el = this.menuRef?.nativeElement;
             if (el && !el.contains(e.target))
-                this.close.emit();
+                this.closeAction.emit();
         };
         this.keyDownHandler = (e) => {
             if (e.key === 'Escape')
-                this.close.emit();
+                this.closeAction.emit();
         };
         // Register listeners once on init (no signal dependencies needed)
         document.addEventListener('mousedown', this.clickOutsideHandler, true);
@@ -51,16 +51,16 @@ let GridContextMenuComponent = class GridContextMenuComponent {
     onItemClick(id) {
         switch (id) {
             case 'copy':
-                this.copy.emit();
+                this.copyAction.emit();
                 break;
             case 'cut':
-                this.cut.emit();
+                this.cutAction.emit();
                 break;
             case 'paste':
-                this.paste.emit();
+                this.pasteAction.emit();
                 break;
             case 'selectAll':
-                this.selectAll.emit();
+                this.selectAllAction.emit();
                 break;
             case 'undo':
                 this.undoAction.emit();
@@ -69,7 +69,7 @@ let GridContextMenuComponent = class GridContextMenuComponent {
                 this.redoAction.emit();
                 break;
         }
-        this.close.emit();
+        this.closeAction.emit();
     }
 };
 __decorate([
@@ -92,16 +92,16 @@ __decorate([
 ], GridContextMenuComponent.prototype, "classNames", void 0);
 __decorate([
     Output()
-], GridContextMenuComponent.prototype, "copy", void 0);
+], GridContextMenuComponent.prototype, "copyAction", void 0);
 __decorate([
     Output()
-], GridContextMenuComponent.prototype, "cut", void 0);
+], GridContextMenuComponent.prototype, "cutAction", void 0);
 __decorate([
     Output()
-], GridContextMenuComponent.prototype, "paste", void 0);
+], GridContextMenuComponent.prototype, "pasteAction", void 0);
 __decorate([
     Output()
-], GridContextMenuComponent.prototype, "selectAll", void 0);
+], GridContextMenuComponent.prototype, "selectAllAction", void 0);
 __decorate([
     Output()
 ], GridContextMenuComponent.prototype, "undoAction", void 0);
@@ -110,7 +110,7 @@ __decorate([
 ], GridContextMenuComponent.prototype, "redoAction", void 0);
 __decorate([
     Output()
-], GridContextMenuComponent.prototype, "close", void 0);
+], GridContextMenuComponent.prototype, "closeAction", void 0);
 __decorate([
     ViewChild('menuRef')
 ], GridContextMenuComponent.prototype, "menuRef", void 0);

package/dist/esm/components/ogrid-layout.component.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { SideBarComponent } from './sidebar.component';
 import { GRID_BORDER_RADIUS } from '@alaarab/ogrid-core';
+import { OGRID_THEME_VARS_CSS } from '../styles/ogrid-theme-vars';
 let OGridLayoutComponent = class OGridLayoutComponent {
     constructor() {
         this.hasToolbar = false;
@@ -38,55 +39,7 @@ OGridLayoutComponent = __decorate([
         encapsulation: ViewEncapsulation.None,
         changeDetection: ChangeDetectionStrategy.OnPush,
         imports: [SideBarComponent],
-        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; height: 100%; }
     .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
     .ogrid-layout-container {

package/dist/esm/components/sidebar.component.js

@@ -5,16 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-const PANEL_WIDTH = 240;
-const TAB_WIDTH = 36;
+import { NgTemplateOutlet } from '@angular/common';
 const PANEL_LABELS = { columns: 'Columns', filters: 'Filters' };
 let SideBarComponent = class SideBarComponent {
     constructor() {
         this.sideBarProps = null;
         this.panelLabels = PANEL_LABELS;
-        this.tabWidth = TAB_WIDTH;
-        this.panelWidth = PANEL_WIDTH;
     }
     onTabClick(panel) {
         const props = this.sideBarProps;
@@ -101,7 +97,7 @@ SideBarComponent = __decorate([
         selector: 'ogrid-sidebar',
         standalone: true,
         changeDetection: ChangeDetectionStrategy.OnPush,
-        imports: [CommonModule],
+        imports: [NgTemplateOutlet],
         styles: [`
     .ogrid-sidebar-root { display: flex; flex-direction: row; flex-shrink: 0; }
     .ogrid-sidebar-tab-strip {

package/dist/esm/components/status-bar.component.js

@@ -14,9 +14,10 @@ let StatusBarComponent = class StatusBarComponent {
         this.aggregation = undefined;
         this.suppressRowCount = undefined;
         this.classNames = undefined;
+        this.cachedParts = [];
     }
-    getParts() {
-        return getStatusBarParts({
+    ngOnChanges() {
+        this.cachedParts = getStatusBarParts({
             totalCount: this.totalCount,
             filteredCount: this.filteredCount,
             selectedCount: this.selectedCount,
@@ -25,6 +26,9 @@ let StatusBarComponent = class StatusBarComponent {
             suppressRowCount: this.suppressRowCount,
         });
     }
+    getParts() {
+        return this.cachedParts;
+    }
 };
 __decorate([
     Input({ required: true })

package/dist/esm/index.js

@@ -6,6 +6,9 @@ export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types
 // Services
 export { OGridService } from './services/ogrid.service';
 export { DataGridStateService } from './services/datagrid-state.service';
+export { DataGridLayoutHelper } from './services/datagrid-layout.service';
+export { DataGridEditingHelper } from './services/datagrid-editing.service';
+export { DataGridInteractionHelper } from './services/datagrid-interaction.service';
 export { ColumnReorderService } from './services/column-reorder.service';
 export { VirtualScrollService } from './services/virtual-scroll.service';
 // Components
@@ -15,6 +18,7 @@ export { GridContextMenuComponent } from './components/grid-context-menu.compone
 export { SideBarComponent } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export { BaseOGridComponent } from './components/base-ogrid.component';
 export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
 export { BaseColumnHeaderFilterComponent } from './components/base-column-header-filter.component';
 export { BaseColumnChooserComponent } from './components/base-column-chooser.component';
@@ -24,4 +28,4 @@ export { INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES } from './compon
 export { BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES } from './components/base-popover-cell-editor.component';
 // Shared styles
 export { OGRID_THEME_VARS_CSS } from './styles/ogrid-theme-vars';
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestCallback, } from './utils';

package/dist/esm/services/datagrid-editing.service.js

@@ -0,0 +1,52 @@
+import { signal } from '@angular/core';
+import { parseValue, } from '@alaarab/ogrid-core';
+/**
+ * Manages cell editing state, inline/popover editor, and commit/cancel logic.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable — instantiated and owned by DataGridStateService.
+ */
+export class DataGridEditingHelper {
+    constructor(getVisibleCols, getItems, getWrappedOnCellValueChanged, setActiveCellFn) {
+        this.editingCellSig = signal(null);
+        this.pendingEditorValueSig = signal(undefined);
+        this.popoverAnchorElSig = signal(null);
+        this.getVisibleCols = getVisibleCols;
+        this.getItems = getItems;
+        this.getWrappedOnCellValueChanged = getWrappedOnCellValueChanged;
+        this.setActiveCellFn = setActiveCellFn;
+    }
+    setEditingCell(cell) {
+        this.editingCellSig.set(cell);
+    }
+    setPendingEditorValue(value) {
+        this.pendingEditorValueSig.set(value);
+    }
+    commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        const col = this.getVisibleCols().find((c) => c.columnId === columnId);
+        if (col) {
+            const result = parseValue(newValue, oldValue, item, col);
+            if (!result.valid) {
+                this.editingCellSig.set(null);
+                this.popoverAnchorElSig.set(null);
+                this.pendingEditorValueSig.set(undefined);
+                return;
+            }
+            newValue = result.value;
+        }
+        const onCellValueChanged = this.getWrappedOnCellValueChanged();
+        onCellValueChanged?.({ item, columnId, oldValue, newValue, rowIndex });
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(undefined);
+        const items = this.getItems();
+        if (rowIndex < items.length - 1) {
+            this.setActiveCellFn({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+        }
+    }
+    cancelPopoverEdit() {
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(undefined);
+    }
+}