@alaarab/ogrid-angular-material 2.0.2

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+// Re-export everything from angular adapter
+export * from '@alaarab/ogrid-angular';
+// Components
+export { OGridComponent } from './ogrid/ogrid.component';
+export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
+export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
+export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
+export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';

package/dist/esm/ogrid/ogrid.component.js

@@ -0,0 +1,82 @@
+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, computed, ChangeDetectionStrategy } from '@angular/core';
+import { OGridService, OGridLayoutComponent, } from '@alaarab/ogrid-angular';
+import { DataGridTableComponent } from '../datagrid-table/datagrid-table.component';
+import { ColumnChooserComponent } from '../column-chooser/column-chooser.component';
+import { PaginationControlsComponent } from '../pagination-controls/pagination-controls.component';
+/**
+ * Top-level OGrid component for Angular Material.
+ * Equivalent to the React MaterialDataTable/OGrid component.
+ * Standalone component — provides OGridService and renders OGridLayout with all sub-components.
+ */
+let OGridComponent = class OGridComponent {
+    constructor() {
+        this.props = input.required();
+        this.dataGridProps = computed(() => {
+            // Ensure service is configured before accessing dataGridProps
+            this.ogridService.configure(this.props());
+            return this.ogridService.dataGridProps();
+        });
+        // The OGridService is provided at the component level, so inject it here
+        // But since we can't use inject() with generics well, we use the providers array
+        // and the Angular DI system will handle it.
+        // Actually we need a slightly different approach for the generic service.
+        this.ogridService = new OGridService();
+    }
+    onPageSizeChange(size) {
+        this.ogridService.pagination().setPageSize(size);
+        this.ogridService.pagination().setPage(1);
+    }
+};
+OGridComponent = __decorate([
+    Component({
+        selector: 'ogrid',
+        standalone: true,
+        imports: [
+            OGridLayoutComponent,
+            DataGridTableComponent,
+            ColumnChooserComponent,
+            PaginationControlsComponent,
+        ],
+        providers: [OGridService],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
+    <ogrid-layout
+      [className]="ogridService.className()"
+      [sideBar]="ogridService.sideBarProps()"
+      [toolbar]="ogridService.toolbar()"
+      [toolbarBelow]="ogridService.toolbarBelow()"
+    >
+      <ng-container toolbar-end>
+        @if (ogridService.columnChooserPlacement() === 'toolbar') {
+          <ogrid-column-chooser
+            [columns]="ogridService.columnChooser().columns"
+            [visibleColumns]="ogridService.columnChooser().visibleColumns"
+            (visibilityChange)="ogridService.columnChooser().onVisibilityChange($event.columnKey, $event.visible)"
+          />
+        }
+      </ng-container>
+
+      <ogrid-datagrid-table [props]="dataGridProps()" />
+
+      <ng-container pagination>
+        <ogrid-pagination-controls
+          [currentPage]="ogridService.pagination().page"
+          [pageSize]="ogridService.pagination().pageSize"
+          [totalCount]="ogridService.pagination().displayTotalCount"
+          [pageSizeOptions]="ogridService.pagination().pageSizeOptions"
+          [entityLabelPlural]="ogridService.pagination().entityLabelPlural"
+          (pageChange)="ogridService.pagination().setPage($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        />
+      </ng-container>
+    </ogrid-layout>
+  `,
+    })
+], OGridComponent);
+export { OGridComponent };

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

@@ -0,0 +1,140 @@
+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 using Angular Material styling.
+ * Standalone component with inline template — no Angular Material dependency for pagination.
+ */
+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"
+          >&laquo;</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage() === 1"
+            (click)="pageChange.emit(currentPage() - 1)"
+            aria-label="Previous page"
+          >&lsaquo;</button>
+
+          @if (vm.showStartEllipsis) {
+            <button class="ogrid-pagination__btn" (click)="pageChange.emit(1)" aria-label="Page 1">1</button>
+            <span class="ogrid-pagination__ellipsis" aria-hidden="true">&hellip;</span>
+          }
+
+          @for (pageNum of vm.pageNumbers; track pageNum) {
+            <button
+              class="ogrid-pagination__btn"
+              [class.ogrid-pagination__btn--active]="currentPage() === pageNum"
+              (click)="pageChange.emit(pageNum)"
+              [attr.aria-label]="'Page ' + pageNum"
+              [attr.aria-current]="currentPage() === pageNum ? 'page' : null"
+            >{{ pageNum }}</button>
+          }
+
+          @if (vm.showEndEllipsis) {
+            <span class="ogrid-pagination__ellipsis" aria-hidden="true">&hellip;</span>
+            <button
+              class="ogrid-pagination__btn"
+              (click)="pageChange.emit(vm.totalPages)"
+              [attr.aria-label]="'Page ' + vm.totalPages"
+            >{{ vm.totalPages }}</button>
+          }
+
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage() >= vm.totalPages"
+            (click)="pageChange.emit(currentPage() + 1)"
+            aria-label="Next page"
+          >&rsaquo;</button>
+          <button
+            class="ogrid-pagination__btn"
+            [disabled]="currentPage() >= vm.totalPages"
+            (click)="pageChange.emit(vm.totalPages)"
+            aria-label="Last page"
+          >&raquo;</button>
+        </span>
+
+        <span class="ogrid-pagination__size">
+          <label>Rows
+            <select
+              [value]="pageSize()"
+              (change)="onPageSizeSelect($event)"
+              aria-label="Rows per page"
+            >
+              @for (n of vm.pageSizeOptions; track n) {
+                <option [value]="n" [selected]="pageSize() === n">{{ n }}</option>
+              }
+            </select>
+          </label>
+        </span>
+      </nav>
+    }
+  `,
+        styles: [`
+    :host { display: block; }
+    .ogrid-pagination {
+      display: flex; align-items: center; justify-content: space-between;
+      flex-wrap: wrap; gap: 8px; padding: 6px 12px; font-size: 14px;
+    }
+    .ogrid-pagination__info { color: rgba(0,0,0,0.6); }
+    .ogrid-pagination__pages { display: flex; align-items: center; gap: 2px; }
+    .ogrid-pagination__btn {
+      min-width: 32px; height: 32px; padding: 0 6px;
+      border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      background: transparent; cursor: pointer; font-size: 14px;
+    }
+    .ogrid-pagination__btn:disabled { opacity: 0.38; cursor: default; }
+    .ogrid-pagination__btn--active {
+      background: var(--mat-sys-primary, #1976d2); color: #fff;
+      border-color: var(--mat-sys-primary, #1976d2);
+    }
+    .ogrid-pagination__ellipsis { margin: 0 4px; color: rgba(0,0,0,0.6); }
+    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; }
+    .ogrid-pagination__size select {
+      min-width: 60px; height: 32px; padding: 4px 8px;
+      border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      font-size: 14px; margin-left: 8px;
+    }
+  `],
+    })
+], 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 using Angular Material styling.
+ * Standalone component with inline template.
+ */
+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,73 @@
+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 with sort + filter icon + popover.
+ * Standalone component with inline template.
+ */
+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[] | undefined>;
+    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 headerEl;
+    readonly isFilterOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly tempTextValue: import("@angular/core").WritableSignal<string>;
+    readonly searchText: import("@angular/core").WritableSignal<string>;
+    readonly tempSelected: import("@angular/core").WritableSignal<Set<string>>;
+    readonly peopleSearchText: import("@angular/core").WritableSignal<string>;
+    readonly peopleSuggestions: import("@angular/core").WritableSignal<UserLike[]>;
+    readonly isPeopleLoading: import("@angular/core").WritableSignal<boolean>;
+    readonly tempDateFrom: import("@angular/core").WritableSignal<string>;
+    readonly tempDateTo: import("@angular/core").WritableSignal<string>;
+    readonly popoverTop: import("@angular/core").WritableSignal<number>;
+    readonly popoverLeft: import("@angular/core").WritableSignal<number>;
+    private peopleDebounceTimer;
+    readonly hasActiveFilter: import("@angular/core").Signal<boolean>;
+    readonly filteredOptions: import("@angular/core").Signal<string[]>;
+    asInputValue(event: Event): string;
+    toggleFilter(event: MouseEvent): void;
+    onTextKeydown(event: KeyboardEvent): void;
+    handleTextApply(): void;
+    handleTextClear(): void;
+    handleCheckboxChange(option: string, event: Event): void;
+    handleSelectAllFiltered(): void;
+    handleClearSelection(): void;
+    handleApplyMultiSelect(): void;
+    onPeopleSearchInput(event: Event): void;
+    handleUserSelect(user: UserLike): void;
+    handleClearUser(): void;
+    handleDateApply(): void;
+    handleDateClear(): void;
+    onDocumentClick(event: MouseEvent): void;
+}

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

@@ -0,0 +1,161 @@
+import type { IOGridDataGridProps, IColumnDef, RowId, ColumnFilterType, IDateFilterValue, UserLike, IFilters, FilterValue } from '@alaarab/ogrid-angular';
+type CellRenderMode = 'editing-inline' | 'editing-popover' | 'display';
+interface CellRenderDescriptor {
+    mode: CellRenderMode;
+    editorType?: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+    value?: unknown;
+    isActive: boolean;
+    isInRange: boolean;
+    isInCutRange: boolean;
+    isSelectionEndCell: boolean;
+    canEditAny: boolean;
+    globalColIndex: number;
+    rowId: RowId;
+    rowIndex: number;
+    displayValue?: unknown;
+}
+interface HeaderFilterConfig {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted: boolean;
+    isSortedDescending: boolean;
+    onSort: (() => void) | undefined;
+    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;
+}
+/**
+ * DataGridTable component using native HTML table with Material Design-inspired styling.
+ * Standalone component — this is the workhorse of the grid.
+ */
+export declare class DataGridTableComponent<T> {
+    readonly propsInput: import("@angular/core").InputSignal<IOGridDataGridProps<T>>;
+    private readonly wrapperRef;
+    private readonly tableContainerRef;
+    private readonly stateService;
+    private lastMouseShift;
+    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-angular").IActiveCell | null>;
+    readonly selectionRange: import("@angular/core").Signal<import("@alaarab/ogrid-angular").ISelectionRange | null>;
+    readonly hasCellSelection: import("@angular/core").Signal<boolean>;
+    readonly cutRange: import("@angular/core").Signal<import("@alaarab/ogrid-angular").ISelectionRange | null>;
+    readonly copyRange: import("@angular/core").Signal<import("@alaarab/ogrid-angular").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-angular").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: IFilters;
+        onFilterChange: (key: string, value: FilterValue | undefined) => void;
+        filterOptions: Record<string, string[]>;
+        loadingFilterOptions: Record<string, boolean>;
+        peopleSearch?: (query: string) => Promise<UserLike[]>;
+    }>;
+    readonly cellDescriptorInput: import("@angular/core").Signal<{
+        editingCell: {
+            rowId: RowId;
+            columnId: string;
+        } | null;
+        activeCell: import("@alaarab/ogrid-angular").IActiveCell | null;
+        selectionRange: import("@alaarab/ogrid-angular").ISelectionRange | null;
+        cutRange: import("@alaarab/ogrid-angular").ISelectionRange | null;
+        copyRange: import("@alaarab/ogrid-angular").ISelectionRange | null;
+        colOffset: number;
+        itemsLength: number;
+        getRowId: (item: T) => RowId;
+        editable?: boolean;
+        onCellValueChanged?: ((event: import("@alaarab/ogrid-angular").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-angular").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;
+}
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+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 type { IColumnHeaderFilterProps } from './column-header-filter/column-header-filter.component';
+export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
+export type { IColumnChooserProps } 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 Material.
+ * Equivalent to the React MaterialDataTable/OGrid component.
+ * 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 using Angular Material styling.
+ * Standalone component with inline template — no Angular Material dependency for pagination.
+ */
+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-angular").PaginationViewModel | null>;
+    onPageSizeSelect(event: Event): void;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@alaarab/ogrid-angular-material",
+  "version": "2.0.2",
+  "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",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "test": "jest --passWithNoTests"
+  },
+  "keywords": ["ogrid", "angular", "material", "datatable", "typescript", "grid"],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": ["dist", "README.md", "LICENSE"],
+  "engines": { "node": ">=18" },
+  "dependencies": {
+    "@alaarab/ogrid-angular": "2.0.2"
+  },
+  "peerDependencies": {
+    "@angular/core": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/cdk": "^21.0.0"
+  },
+  "devDependencies": {
+    "@angular/core": "^21.1.4",
+    "@angular/common": "^21.1.4",
+    "@angular/compiler": "^21.1.4",
+    "@angular/platform-browser": "^21.1.4",
+    "@angular/platform-browser-dynamic": "^21.1.4",
+    "@angular/material": "^21.1.4",
+    "@angular/cdk": "^21.1.4",
+    "@angular/animations": "^21.1.4",
+    "rxjs": "^7.8.0",
+    "zone.js": "^0.15.0",
+    "typescript": "^5.7.3"
+  },
+  "publishConfig": { "access": "public" }
+}