@alaarab/ogrid-angular-radix 2.0.4

package/dist/esm/pagination-controls/pagination-controls.component.js

@@ -0,0 +1,189 @@
+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;
+};
+import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';
+import { getPaginationViewModel } from '@alaarab/ogrid-angular';
+/**
+ * Pagination controls component for Angular Radix (lightweight styling).
+ * Standalone component with inline template and CSS variables for theming.
+ */
+let PaginationControlsComponent = class PaginationControlsComponent {
+    constructor() {
+        this.currentPage = input.required();
+        this.pageSize = input.required();
+        this.totalCount = input.required();
+        this.pageSizeOptions = input(undefined);
+        this.entityLabelPlural = input('items');
+        this.pageChange = output();
+        this.pageSizeChange = output();
+        this.vm = computed(() => {
+            const opts = this.pageSizeOptions();
+            return getPaginationViewModel(this.currentPage(), this.pageSize(), this.totalCount(), opts ? { pageSizeOptions: opts } : undefined);
+        });
+    }
+    onPageSizeSelect(event) {
+        const value = Number(event.target.value);
+        this.pageSizeChange.emit(value);
+    }
+};
+PaginationControlsComponent = __decorate([
+    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"
+          >⏮</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage() === 1"
+            (click)="pageChange.emit(currentPage() - 1)"
+            aria-label="Previous page"
+          >◀</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">…</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">…</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"
+          >▶</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage() >= vm.totalPages"
+            (click)="pageChange.emit(vm.totalPages)"
+            aria-label="Last page"
+          >⏭</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;
+      background: var(--ogrid-bg, #ffffff);
+    }
+    .ogrid-pagination__info {
+      color: var(--ogrid-fg, #242424);
+      opacity: 0.7;
+    }
+    .ogrid-pagination__pages {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .ogrid-pagination__btn {
+      min-width: 32px;
+      height: 32px;
+      padding: 0 8px;
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, #242424);
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.15s ease;
+    }
+    .ogrid-pagination__btn:hover:not(:disabled) {
+      background: var(--ogrid-hover-bg, #f0f0f0);
+      border-color: var(--ogrid-active-border, #0078d4);
+    }
+    .ogrid-pagination__btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .ogrid-pagination__btn--active {
+      background: var(--ogrid-active-border, #0078d4);
+      color: #ffffff;
+      border-color: var(--ogrid-active-border, #0078d4);
+      font-weight: 600;
+    }
+    .ogrid-pagination__ellipsis {
+      margin: 0 4px;
+      color: var(--ogrid-fg, #242424);
+      opacity: 0.6;
+    }
+    .ogrid-pagination__size {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-pagination__size select {
+      min-width: 60px;
+      height: 32px;
+      padding: 4px 8px;
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, #242424);
+      font-size: 14px;
+      margin-left: 8px;
+      cursor: pointer;
+    }
+    .ogrid-pagination__size select:focus {
+      outline: 2px solid var(--ogrid-active-border, #0078d4);
+      outline-offset: 1px;
+    }
+  `],
+    })
+], PaginationControlsComponent);
+export { PaginationControlsComponent };

package/dist/types/column-chooser/column-chooser.component.d.ts

@@ -0,0 +1,26 @@
+import type { IColumnDefinition } from '@alaarab/ogrid-angular';
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+}
+/**
+ * Column visibility chooser dropdown for Angular Radix (lightweight styling).
+ * Standalone component with inline template and CSS variables for theming.
+ */
+export declare class ColumnChooserComponent {
+    readonly columns: import("@angular/core").InputSignal<IColumnDefinition[]>;
+    readonly visibleColumns: import("@angular/core").InputSignal<Set<string>>;
+    readonly visibilityChange: import("@angular/core").OutputEmitterRef<{
+        columnKey: string;
+        visible: boolean;
+    }>;
+    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly visibleCount: import("@angular/core").Signal<number>;
+    readonly totalCount: import("@angular/core").Signal<number>;
+    toggle(): void;
+    onCheckboxChange(columnKey: string, event: Event): void;
+    selectAll(): void;
+    clearAll(): void;
+    onDocumentClick(event: MouseEvent): void;
+}

package/dist/types/column-header-filter/column-header-filter.component.d.ts

@@ -0,0 +1,67 @@
+import type { ColumnFilterType, IDateFilterValue, UserLike } from '@alaarab/ogrid-angular';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+}
+/**
+ * Column header filter component for Angular Radix (lightweight styling).
+ * Standalone component with inline template and positioned popovers.
+ */
+export declare class ColumnHeaderFilterComponent {
+    readonly columnKey: import("@angular/core").InputSignal<string>;
+    readonly columnName: import("@angular/core").InputSignal<string>;
+    readonly filterType: import("@angular/core").InputSignal<ColumnFilterType>;
+    readonly isSorted: import("@angular/core").InputSignal<boolean>;
+    readonly isSortedDescending: import("@angular/core").InputSignal<boolean>;
+    readonly onSort: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly selectedValues: import("@angular/core").InputSignal<string[]>;
+    readonly onFilterChange: import("@angular/core").InputSignal<((values: string[]) => void) | undefined>;
+    readonly options: import("@angular/core").InputSignal<string[] | undefined>;
+    readonly isLoadingOptions: import("@angular/core").InputSignal<boolean>;
+    readonly textValue: import("@angular/core").InputSignal<string>;
+    readonly onTextChange: import("@angular/core").InputSignal<((value: string) => void) | undefined>;
+    readonly selectedUser: import("@angular/core").InputSignal<UserLike | undefined>;
+    readonly onUserChange: import("@angular/core").InputSignal<((user: UserLike | undefined) => void) | undefined>;
+    readonly peopleSearch: import("@angular/core").InputSignal<((query: string) => Promise<UserLike[]>) | undefined>;
+    readonly dateValue: import("@angular/core").InputSignal<IDateFilterValue | undefined>;
+    readonly onDateChange: import("@angular/core").InputSignal<((value: IDateFilterValue | undefined) => void) | undefined>;
+    private readonly headerRef;
+    readonly isFilterOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly popoverTop: import("@angular/core").WritableSignal<number>;
+    readonly popoverLeft: import("@angular/core").WritableSignal<number>;
+    readonly tempTextValue: import("@angular/core").WritableSignal<string>;
+    readonly searchText: import("@angular/core").WritableSignal<string>;
+    readonly tempSelected: import("@angular/core").WritableSignal<Set<string>>;
+    readonly tempDateFrom: import("@angular/core").WritableSignal<string>;
+    readonly tempDateTo: import("@angular/core").WritableSignal<string>;
+    readonly hasActiveFilter: import("@angular/core").Signal<boolean>;
+    readonly filteredOptions: import("@angular/core").Signal<string[]>;
+    toggleFilter(event: MouseEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    asInputValue(event: Event): string;
+    onTextKeydown(event: KeyboardEvent): void;
+    handleTextApply(): void;
+    handleTextClear(): void;
+    handleCheckboxChange(option: string, event: Event): void;
+    handleSelectAllFiltered(): void;
+    handleClearSelection(): void;
+    handleMultiSelectApply(): void;
+    handleMultiSelectClear(): void;
+    handleDateApply(): void;
+    handleDateClear(): void;
+}

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

@@ -0,0 +1,131 @@
+import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
+import type { IOGridDataGridProps, IColumnDef, RowId, CellRenderDescriptor, HeaderFilterConfig } 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> {
+    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;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @alaarab/ogrid-angular-radix
+ *
+ * Lightweight Angular data grid using Angular CDK for overlays.
+ * This is the recommended "default" option for Angular developers.
+ */
+export * from '@alaarab/ogrid-angular';
+export { OGridComponent } from './ogrid/ogrid.component';
+export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
+export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
+export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
+export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';

package/dist/types/ogrid/ogrid.component.d.ts

@@ -0,0 +1,14 @@
+import { OGridService } from '@alaarab/ogrid-angular';
+import type { IOGridProps, IOGridDataGridProps } from '@alaarab/ogrid-angular';
+/**
+ * Top-level OGrid component for Angular Radix (lightweight Angular CDK-based implementation).
+ * This is the recommended default option for Angular developers.
+ * Standalone component — provides OGridService and renders OGridLayout with all sub-components.
+ */
+export declare class OGridComponent<T> {
+    readonly props: import("@angular/core").InputSignal<IOGridProps<T>>;
+    readonly ogridService: OGridService<T>;
+    readonly dataGridProps: import("@angular/core").Signal<IOGridDataGridProps<T>>;
+    constructor();
+    onPageSizeChange(size: number): void;
+}

package/dist/types/pagination-controls/pagination-controls.component.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Pagination controls component for Angular Radix (lightweight styling).
+ * Standalone component with inline template and CSS variables for theming.
+ */
+export declare class PaginationControlsComponent {
+    readonly currentPage: import("@angular/core").InputSignal<number>;
+    readonly pageSize: import("@angular/core").InputSignal<number>;
+    readonly totalCount: import("@angular/core").InputSignal<number>;
+    readonly pageSizeOptions: import("@angular/core").InputSignal<number[] | undefined>;
+    readonly entityLabelPlural: import("@angular/core").InputSignal<string>;
+    readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
+    readonly pageSizeChange: import("@angular/core").OutputEmitterRef<number>;
+    readonly vm: import("@angular/core").Signal<import("@alaarab/ogrid-core").PaginationViewModel | null>;
+    onPageSizeSelect(event: Event): void;
+}

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

@@ -0,0 +1,38 @@
+// 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

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

package/jest.config.js

@@ -0,0 +1,43 @@
+/** @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/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@alaarab/ogrid-angular-radix",
+  "version": "2.0.4",
+  "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",
+  "types": "dist/types/index.d.ts",
+  "keywords": ["ogrid", "datagrid", "angular", "angular-cdk", "data-table", "spreadsheet", "grid"],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alaarab/ogrid.git",
+    "directory": "packages/angular-radix"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/compile-styles.js",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-angular": "2.0.4",
+    "@angular/cdk": "^21.0.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^21.0.0",
+    "@angular/common": "^21.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.0",
+    "jest": "^29.7.0",
+    "rimraf": "^5.0.0",
+    "sass": "^1.69.0",
+    "typescript": "^5.7.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/compile-styles.js

@@ -0,0 +1,53 @@
+/**
+ * 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.');