@alaarab/ogrid-angular-radix 2.0.4 → 2.0.6

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

@@ -4,272 +4,29 @@ 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, input, signal, computed, effect, ChangeDetectionStrategy, viewChild, } from '@angular/core';
-import { DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
+import { Component, input, viewChild, ChangeDetectionStrategy, } from '@angular/core';
+import { BaseDataGridTableComponent, DataGridStateService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 /**
  * DataGridTable component for Angular Radix using native HTML table.
  * Standalone component with lightweight styling and CSS variables.
  */
-let DataGridTableComponent = class DataGridTableComponent {
+let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTableComponent {
     constructor() {
+        super();
         this.propsInput = input.required({ alias: 'props' });
         this.wrapperRef = viewChild('wrapperEl');
         this.tableContainerRef = viewChild('tableContainerEl');
-        this.stateService = new DataGridStateService();
-        this.columnReorderService = new ColumnReorderService();
-        this.virtualScrollService = new VirtualScrollService();
-        this.lastMouseShift = false;
-        this.columnSizingVersion = signal(0);
-        // --- Delegated state ---
-        this.state = computed(() => this.stateService.getState());
-        this.items = computed(() => this.propsInput()?.items ?? []);
-        this.getRowId = computed(() => this.propsInput()?.getRowId ?? ((item) => item['id']));
-        this.isLoading = computed(() => this.propsInput()?.isLoading ?? false);
-        this.loadingMessage = computed(() => 'Loading\u2026');
-        this.freezeRows = computed(() => this.propsInput()?.freezeRows);
-        this.freezeCols = computed(() => this.propsInput()?.freezeCols);
-        this.layoutModeFit = computed(() => (this.propsInput()?.layoutMode ?? 'fill') === 'content');
-        this.ariaLabel = computed(() => this.propsInput()?.['aria-label'] ?? 'Data grid');
-        this.ariaLabelledBy = computed(() => this.propsInput()?.['aria-labelledby']);
-        this.emptyState = computed(() => this.propsInput()?.emptyState);
-        // State service outputs
-        this.visibleCols = computed(() => this.state().layout.visibleCols);
-        this.hasCheckboxCol = computed(() => this.state().layout.hasCheckboxCol);
-        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);
-        this.allowOverflowX = computed(() => {
-            const p = this.propsInput();
-            if (p?.suppressHorizontalScroll)
-                return false;
-            const cw = this.containerWidth();
-            const mtw = this.minTableWidth();
-            const dtw = this.desiredTableWidth();
-            return cw > 0 && (mtw > cw || dtw > cw);
-        });
-        this.selectionCellCount = computed(() => {
-            const sr = this.selectionRange();
-            if (!sr)
-                return undefined;
-            return (Math.abs(sr.endRow - sr.startRow) + 1) * (Math.abs(sr.endCol - sr.startCol) + 1);
-        });
-        // Header rows from column definition
-        this.headerRows = computed(() => {
-            const p = this.propsInput();
-            if (!p)
-                return [];
-            return buildHeaderRows(p.columns, p.visibleColumns);
-        });
-        // Pre-computed column layouts
-        this.columnLayouts = computed(() => {
-            const cols = this.visibleCols();
-            const fc = this.freezeCols();
-            return cols.map((col, colIdx) => {
-                const isFreezeCol = fc != null && fc >= 1 && colIdx < fc;
-                const pinnedLeft = col.pinned === 'left' || (isFreezeCol && colIdx === 0);
-                const pinnedRight = col.pinned === 'right';
-                const w = this.getColumnWidth(col);
-                return {
-                    col,
-                    pinnedLeft,
-                    pinnedRight,
-                    minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
-                    width: w,
-                };
-            });
-        });
-        // Wire props and wrapper element to state service
-        effect(() => {
-            const p = this.propsInput();
-            if (p)
-                this.stateService.props.set(p);
-        });
-        effect(() => {
-            const el = this.wrapperRef()?.nativeElement;
-            if (el) {
-                this.stateService.wrapperEl.set(el);
-                this.columnReorderService.wrapperEl.set(el);
-            }
-        });
-        // Wire column reorder service inputs
-        effect(() => {
-            const p = this.propsInput();
-            if (p) {
-                const cols = this.visibleCols();
-                this.columnReorderService.columns.set(cols);
-                this.columnReorderService.columnOrder.set(p.columnOrder);
-                this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
-                this.columnReorderService.enabled.set(!!p.onColumnOrderChange);
-            }
-        });
-        // Wire virtual scroll service inputs
-        effect(() => {
-            const p = this.propsInput();
-            if (p) {
-                this.virtualScrollService.totalRows.set(p.items.length);
-            }
-        });
+        this.initBase();
     }
-    // --- Helper methods ---
-    asColumnDef(colDef) {
-        return colDef;
+    getProps() {
+        return this.propsInput();
     }
-    visibleColIndex(col) {
-        return this.visibleCols().indexOf(col);
+    getWrapperRef() {
+        return this.wrapperRef();
     }
-    getColumnWidth(col) {
-        const overrides = this.columnSizingOverrides();
-        const override = overrides[col.columnId];
-        if (override)
-            return override.widthPx;
-        return col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-    }
-    getFilterConfig(col) {
-        return getHeaderFilterConfig(col, this.headerFilterInput());
-    }
-    getCellDescriptor(item, col, rowIndex, colIdx) {
-        return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
-    }
-    resolveCellContent(col, item, displayValue) {
-        return resolveCellDisplayContent(col, item, displayValue);
-    }
-    resolveCellStyleFn(col, item) {
-        return resolveCellStyle(col, item);
-    }
-    getSelectValues(col) {
-        const params = col.cellEditorParams;
-        if (params && typeof params === 'object' && 'values' in params) {
-            return params.values.map(String);
-        }
-        return [];
-    }
-    formatDateForInput(value) {
-        if (!value)
-            return '';
-        const d = new Date(String(value));
-        if (Number.isNaN(d.getTime()))
-            return '';
-        return d.toISOString().split('T')[0];
-    }
-    // --- Event handlers ---
-    onWrapperMouseDown(event) {
-        this.lastMouseShift = event.shiftKey;
-    }
-    onGridKeyDown(event) {
-        this.state().interaction.handleGridKeyDown(event);
-    }
-    onCellMouseDown(event, rowIndex, globalColIndex) {
-        this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
-    }
-    onCellClick(rowIndex, globalColIndex) {
-        this.state().interaction.setActiveCell({ rowIndex, columnIndex: globalColIndex });
-    }
-    onCellContextMenu(event) {
-        this.state().contextMenu.handleCellContextMenu(event);
-    }
-    onCellDblClick(rowId, columnId) {
-        this.state().editing.setEditingCell({ rowId, columnId });
-    }
-    onFillHandleMouseDown(event) {
-        this.state().interaction.handleFillHandleMouseDown(event);
-    }
-    onResizeStart(event, col) {
-        event.preventDefault();
-        const startX = event.clientX;
-        const startWidth = this.getColumnWidth(col);
-        const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-        const onMove = (e) => {
-            const delta = e.clientX - startX;
-            const newWidth = Math.max(minWidth, startWidth + delta);
-            const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
-            this.state().layout.setColumnSizingOverrides(overrides);
-            this.columnSizingVersion.update(v => v + 1);
-        };
-        const onUp = () => {
-            window.removeEventListener('mousemove', onMove);
-            window.removeEventListener('mouseup', onUp);
-            const finalWidth = this.getColumnWidth(col);
-            this.state().layout.onColumnResized?.(col.columnId, finalWidth);
-        };
-        window.addEventListener('mousemove', onMove);
-        window.addEventListener('mouseup', onUp);
-    }
-    onSelectAllChange(event) {
-        const checked = event.target.checked;
-        this.state().rowSelection.handleSelectAll(!!checked);
-    }
-    onRowClick(event, rowId) {
-        const p = this.propsInput();
-        if (p?.rowSelection !== 'single')
-            return;
-        const ids = this.selectedRowIds();
-        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
-    }
-    onRowCheckboxChange(rowId, event, rowIndex) {
-        const checked = event.target.checked;
-        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
-    }
-    commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
-        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
-    }
-    cancelEdit() {
-        this.state().editing.setEditingCell(null);
-    }
-    onEditorKeydown(event, item, columnId, oldValue, rowIndex, globalColIndex) {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const newValue = event.target.value;
-            this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
-        }
-        else if (event.key === 'Escape') {
-            event.preventDefault();
-            this.cancelEdit();
-        }
-    }
-    closeContextMenu() {
-        this.state().contextMenu.closeContextMenu();
-    }
-    handleCopy() {
-        this.state().interaction.handleCopy();
-    }
-    handleCut() {
-        this.state().interaction.handleCut();
-    }
-    handlePaste() {
-        void this.state().interaction.handlePaste();
-    }
-    handleSelectAllCells() {
-        this.state().interaction.handleSelectAllCells();
-    }
-    onUndo() {
-        this.state().interaction.onUndo?.();
-    }
-    onRedo() {
-        this.state().interaction.onRedo?.();
-    }
-    onHeaderMouseDown(columnId, event) {
-        this.columnReorderService.handleHeaderMouseDown(columnId, event);
+    getTableContainerRef() {
+        return this.tableContainerRef();
     }
 };
 DataGridTableComponent = __decorate([
@@ -320,7 +77,7 @@ DataGridTableComponent = __decorate([
                         </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>
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th ogrid-datagrid-checkbox-spacer"></th>
                       }
                       @for (cell of row; track $index; let cellIdx = $index) {
                         @if (cell.isGroup) {
@@ -341,7 +98,8 @@ DataGridTableComponent = __decorate([
                             [style.minWidth.px]="col.minWidth ?? 80"
                             [style.width.px]="colW"
                             [style.maxWidth.px]="colW"
-                            [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            [class.ogrid-datagrid-th--reorderable]="!columnReorderService.isDragging()"
+                            [class.ogrid-datagrid-th--dragging]="columnReorderService.isDragging()"
                             (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
                             <column-header-filter

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

@@ -1,131 +1,16 @@
-import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
-import type { IOGridDataGridProps, IColumnDef, RowId, CellRenderDescriptor, HeaderFilterConfig } from '@alaarab/ogrid-angular';
+import { ElementRef } from '@angular/core';
+import { BaseDataGridTableComponent } from '@alaarab/ogrid-angular';
+import type { IOGridDataGridProps } from '@alaarab/ogrid-angular';
 /**
  * DataGridTable component for Angular Radix using native HTML table.
  * Standalone component with lightweight styling and CSS variables.
  */
-export declare class DataGridTableComponent<T> {
+export declare class DataGridTableComponent<T> extends BaseDataGridTableComponent<T> {
     readonly propsInput: import("@angular/core").InputSignal<IOGridDataGridProps<T>>;
     private readonly wrapperRef;
     private readonly tableContainerRef;
-    private readonly stateService;
-    readonly columnReorderService: ColumnReorderService<T>;
-    readonly virtualScrollService: VirtualScrollService;
-    private lastMouseShift;
-    private columnSizingVersion;
     constructor();
-    private readonly state;
-    readonly items: import("@angular/core").Signal<T[]>;
-    readonly getRowId: import("@angular/core").Signal<(item: T) => RowId>;
-    readonly isLoading: import("@angular/core").Signal<boolean>;
-    readonly loadingMessage: import("@angular/core").Signal<string>;
-    readonly freezeRows: import("@angular/core").Signal<number | undefined>;
-    readonly freezeCols: import("@angular/core").Signal<number | undefined>;
-    readonly layoutModeFit: import("@angular/core").Signal<boolean>;
-    readonly ariaLabel: import("@angular/core").Signal<string>;
-    readonly ariaLabelledBy: import("@angular/core").Signal<string | undefined>;
-    readonly emptyState: import("@angular/core").Signal<{
-        onClearAll: () => void;
-        hasActiveFilters: boolean;
-        message?: string;
-        render?: import("@angular/core").TemplateRef<unknown>;
-    } | undefined>;
-    readonly visibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
-    readonly hasCheckboxCol: import("@angular/core").Signal<boolean>;
-    readonly colOffset: import("@angular/core").Signal<number>;
-    readonly containerWidth: import("@angular/core").Signal<number>;
-    readonly minTableWidth: import("@angular/core").Signal<number>;
-    readonly desiredTableWidth: import("@angular/core").Signal<number>;
-    readonly columnSizingOverrides: import("@angular/core").Signal<Record<string, {
-        widthPx: number;
-    }>>;
-    readonly selectedRowIds: import("@angular/core").Signal<Set<RowId>>;
-    readonly allSelected: import("@angular/core").Signal<boolean>;
-    readonly someSelected: import("@angular/core").Signal<boolean>;
-    readonly editingCell: import("@angular/core").Signal<{
-        rowId: RowId;
-        columnId: string;
-    } | null>;
-    readonly pendingEditorValue: import("@angular/core").Signal<unknown>;
-    readonly activeCell: import("@angular/core").Signal<import("@alaarab/ogrid-core").IActiveCell | null>;
-    readonly selectionRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
-    readonly hasCellSelection: import("@angular/core").Signal<boolean>;
-    readonly cutRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
-    readonly copyRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
-    readonly canUndo: import("@angular/core").Signal<boolean>;
-    readonly canRedo: import("@angular/core").Signal<boolean>;
-    readonly isDragging: import("@angular/core").Signal<boolean>;
-    readonly menuPosition: import("@angular/core").Signal<{
-        x: number;
-        y: number;
-    } | null>;
-    readonly statusBarConfig: import("@angular/core").Signal<import("@alaarab/ogrid-core").IStatusBarProps | null>;
-    readonly showEmptyInGrid: import("@angular/core").Signal<boolean>;
-    readonly headerFilterInput: import("@angular/core").Signal<{
-        sortBy?: string;
-        sortDirection: "asc" | "desc";
-        onColumnSort: (columnKey: string) => void;
-        filters: import("@alaarab/ogrid-core").IFilters;
-        onFilterChange: (key: string, value: import("@alaarab/ogrid-core").FilterValue | undefined) => void;
-        filterOptions: Record<string, string[]>;
-        loadingFilterOptions: Record<string, boolean>;
-        peopleSearch?: (query: string) => Promise<import("@alaarab/ogrid-core").UserLike[]>;
-    }>;
-    readonly cellDescriptorInput: import("@angular/core").Signal<{
-        editingCell: {
-            rowId: RowId;
-            columnId: string;
-        } | null;
-        activeCell: import("@alaarab/ogrid-core").IActiveCell | null;
-        selectionRange: import("@alaarab/ogrid-core").ISelectionRange | null;
-        cutRange: import("@alaarab/ogrid-core").ISelectionRange | null;
-        copyRange: import("@alaarab/ogrid-core").ISelectionRange | null;
-        colOffset: number;
-        itemsLength: number;
-        getRowId: (item: T) => RowId;
-        editable?: boolean;
-        onCellValueChanged?: ((event: import("@alaarab/ogrid-core").ICellValueChangedEvent<T>) => void) | undefined;
-        isDragging: boolean;
-    }>;
-    readonly allowOverflowX: import("@angular/core").Signal<boolean>;
-    readonly selectionCellCount: import("@angular/core").Signal<number | undefined>;
-    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;
-    readonly columnLayouts: import("@angular/core").Signal<{
-        col: IColumnDef<T>;
-        pinnedLeft: boolean;
-        pinnedRight: boolean;
-        minWidth: number;
-        width: number;
-    }[]>;
-    asColumnDef(colDef: unknown): IColumnDef<T>;
-    visibleColIndex(col: IColumnDef<T>): number;
-    getColumnWidth(col: IColumnDef<T>): number;
-    getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
-    getCellDescriptor(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): CellRenderDescriptor;
-    resolveCellContent(col: IColumnDef<T>, item: T, displayValue: unknown): string;
-    resolveCellStyleFn(col: IColumnDef<T>, item: T): Record<string, string> | undefined;
-    getSelectValues(col: IColumnDef<T>): string[];
-    formatDateForInput(value: unknown): string;
-    onWrapperMouseDown(event: MouseEvent): void;
-    onGridKeyDown(event: KeyboardEvent): void;
-    onCellMouseDown(event: MouseEvent, rowIndex: number, globalColIndex: number): void;
-    onCellClick(rowIndex: number, globalColIndex: number): void;
-    onCellContextMenu(event: MouseEvent): void;
-    onCellDblClick(rowId: RowId, columnId: string): void;
-    onFillHandleMouseDown(event: MouseEvent): void;
-    onResizeStart(event: MouseEvent, col: IColumnDef<T>): void;
-    onSelectAllChange(event: Event): void;
-    onRowClick(event: MouseEvent, rowId: RowId): void;
-    onRowCheckboxChange(rowId: RowId, event: Event, rowIndex: number): void;
-    commitEdit(item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number): void;
-    cancelEdit(): void;
-    onEditorKeydown(event: KeyboardEvent, item: T, columnId: string, oldValue: unknown, rowIndex: number, globalColIndex: number): void;
-    closeContextMenu(): void;
-    handleCopy(): void;
-    handleCut(): void;
-    handlePaste(): void;
-    handleSelectAllCells(): void;
-    onUndo(): void;
-    onRedo(): void;
-    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
+    protected getProps(): IOGridDataGridProps<T> | undefined;
+    protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
+    protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
 }

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "@alaarab/ogrid-angular-radix",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "OGrid Angular Radix – Lightweight data grid with sorting, filtering, pagination, column chooser, and CSV export. Built with Angular CDK.",
   "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "sideEffects": false,
   "keywords": ["ogrid", "datagrid", "angular", "angular-cdk", "data-table", "spreadsheet", "grid"],
   "author": "Ala Arab",
   "license": "MIT",
@@ -17,7 +27,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.4",
+    "@alaarab/ogrid-angular": "2.0.6",
     "@angular/cdk": "^21.0.0"
   },
   "peerDependencies": {
@@ -28,8 +38,8 @@
     "@types/jest": "^29.5.0",
     "jest": "^29.7.0",
     "rimraf": "^5.0.0",
-    "sass": "^1.69.0",
-    "typescript": "^5.7.0"
+    "sass": "^1.97.3",
+    "typescript": "^5.9.3"
   },
   "publishConfig": {
     "access": "public"

package/jest-mocks/angular-cdk-overlay.cjs.js

@@ -1,38 +0,0 @@
-// Mock for @angular/cdk/overlay in tests
-class MockOverlay {
-  position() {
-    return {
-      flexibleConnectedTo() {
-        return {
-          withPositions() {
-            return this;
-          }
-        };
-      }
-    };
-  }
-
-  create(config) {
-    return {
-      attach: jest.fn(),
-      detach: jest.fn(),
-      dispose: jest.fn(),
-      backdropClick: () => ({
-        subscribe: jest.fn()
-      })
-    };
-  }
-}
-
-class MockComponentPortal {
-  constructor(component) {
-    this.component = component;
-  }
-}
-
-module.exports = {
-  Overlay: MockOverlay,
-  OverlayModule: class MockOverlayModule {},
-  ComponentPortal: MockComponentPortal,
-  CdkOverlayOrigin: class MockCdkOverlayOrigin {},
-};

package/jest-mocks/style-mock.js

@@ -1 +0,0 @@
-module.exports = {};

package/jest.config.js

@@ -1,43 +0,0 @@
-/** @type {import('jest').Config} */
-module.exports = {
-  testEnvironment: 'jsdom',
-  roots: ['<rootDir>/src'],
-  testMatch: [
-    '**/__tests__/**/*.test.ts',
-    '**/__tests__/**/*.test.tsx',
-    '**/__tests__/**/*.spec.ts',
-  ],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
-  transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      {
-        useESM: false,
-        tsconfig: {
-          esModuleInterop: true,
-          allowSyntheticDefaultImports: true,
-          module: 'commonjs',
-          target: 'es2019',
-          types: ['jest', 'node'],
-          experimentalDecorators: true,
-          useDefineForClassFields: false,
-        },
-      },
-    ],
-  },
-  moduleNameMapper: {
-    '^@alaarab/ogrid-core$': '<rootDir>/../core/src/index.ts',
-    '^@alaarab/ogrid-core/testing$': '<rootDir>/../core/src/testing/index.ts',
-    '^@alaarab/ogrid-angular$': '<rootDir>/../angular/src/index.ts',
-    '^@angular/core/testing$': '<rootDir>/../angular/jest-mocks/angular-core-testing.cjs.js',
-    '^@angular/core$': '<rootDir>/../angular/jest-mocks/angular-core.cjs.js',
-    '^@angular/common$': '<rootDir>/../angular/jest-mocks/angular-common.cjs.js',
-    '^@angular/platform-browser$': '<rootDir>/../angular/jest-mocks/angular-platform-browser.cjs.js',
-    '^@angular/cdk/overlay$': '<rootDir>/jest-mocks/angular-cdk-overlay.cjs.js',
-    '\\.scss$': '<rootDir>/jest-mocks/style-mock.js',
-  },
-  transformIgnorePatterns: [
-    'node_modules/(?!(@angular|primeng)/)',
-  ],
-  testTimeout: 10000,
-};

package/scripts/compile-styles.js

@@ -1,53 +0,0 @@
-/**
- * Compiles all .module.scss files to .module.css and rewrites dist JS imports.
- */
-const fs = require('fs');
-const path = require('path');
-const sass = require('sass');
-
-const SRC_DIR = path.join(__dirname, '..', 'src');
-const DIST_ESM = path.join(__dirname, '..', 'dist', 'esm');
-
-function* walkDir(dir, base = dir) {
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-  for (const e of entries) {
-    const full = path.join(dir, e.name);
-    const rel = path.relative(base, full);
-    if (e.isDirectory()) {
-      yield* walkDir(full, base);
-    } else if (e.isFile() && e.name.endsWith('.module.scss')) {
-      yield { full, rel };
-    }
-  }
-}
-
-for (const { full, rel } of walkDir(SRC_DIR)) {
-  const outRel = rel.replace(/\.scss$/, '.css');
-  const outPath = path.join(DIST_ESM, outRel);
-  const outDir = path.dirname(outPath);
-  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
-  const result = sass.compile(full);
-  fs.writeFileSync(outPath, result.css, 'utf8');
-  console.log('Compiled:', rel, '→', outRel);
-}
-
-function* walkJs(dir) {
-  if (!fs.existsSync(dir)) return;
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-  for (const e of entries) {
-    const full = path.join(dir, e.name);
-    if (e.isDirectory()) yield* walkJs(full);
-    else if (e.isFile() && e.name.endsWith('.js')) yield full;
-  }
-}
-
-for (const jsPath of walkJs(DIST_ESM)) {
-  let content = fs.readFileSync(jsPath, 'utf8');
-  if (content.includes('.module.scss')) {
-    content = content.replace(/\.module\.scss/g, '.module.css');
-    fs.writeFileSync(jsPath, content, 'utf8');
-    console.log('Rewrote imports:', path.relative(DIST_ESM, jsPath));
-  }
-}
-
-console.log('Styles compiled and dist JS imports updated.');