@alaarab/ogrid-angular-primeng 2.0.2

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

@@ -0,0 +1,150 @@
+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, signal, effect, viewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+let InlineCellEditorComponent = class InlineCellEditorComponent {
+    constructor() {
+        this.value = input.required();
+        this.item = input.required();
+        this.column = input.required();
+        this.rowIndex = input.required();
+        this.editorType = input.required();
+        this.commit = output();
+        this.cancel = output();
+        this.inputEl = viewChild('inputEl');
+        this.localValue = signal('');
+        this.selectOptions = signal([]);
+        effect(() => {
+            const v = this.value();
+            this.localValue.set(v != null ? String(v) : '');
+            const col = this.column();
+            if (col.cellEditorParams?.values) {
+                this.selectOptions.set(col.cellEditorParams.values);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const el = this.inputEl()?.nativeElement;
+            if (el) {
+                el.focus();
+                if (el instanceof HTMLInputElement && el.type === 'text') {
+                    el.select();
+                }
+            }
+        });
+    }
+    commitValue(value) {
+        this.commit.emit(value);
+    }
+    onTextKeyDown(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.commitValue(this.localValue());
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancel.emit();
+        }
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            this.commitValue(this.localValue());
+        }
+    }
+    onSelectKeyDown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancel.emit();
+        }
+    }
+    onCheckboxKeyDown(e) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.cancel.emit();
+        }
+    }
+    onTextBlur() {
+        this.commitValue(this.localValue());
+    }
+};
+InlineCellEditorComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng-inline-cell-editor',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    @switch (editorType()) {
+      @case ('text') {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          style="width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+        />
+      }
+      @case ('select') {
+        <div style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;overflow:hidden;min-width:0">
+          <select
+            #inputEl
+            [value]="localValue()"
+            (change)="commitValue($any($event.target).value)"
+            (keydown)="onSelectKeyDown($event)"
+            style="width:100%;border:none;outline:none;background:transparent;font:inherit;cursor:pointer;color:var(--ogrid-fg, #242424)"
+          >
+            @for (opt of selectOptions(); track opt) {
+              <option [value]="opt">{{ opt }}</option>
+            }
+          </select>
+        </div>
+      }
+      @case ('checkbox') {
+        <div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%">
+          <input
+            type="checkbox"
+            [checked]="!!localValue()"
+            (change)="commitValue($any($event.target).checked)"
+            (keydown)="onCheckboxKeyDown($event)"
+          />
+        </div>
+      }
+      @case ('date') {
+        <input
+          #inputEl
+          type="date"
+          [value]="localValue()"
+          (change)="commitValue($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          style="width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+        />
+      }
+      @default {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          style="width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+        />
+      }
+    }
+  `,
+        styles: [`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `],
+    })
+], InlineCellEditorComponent);
+export { InlineCellEditorComponent };

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+// Re-export everything from angular adapter
+export * from '@alaarab/ogrid-angular';
+// PrimeNG UI components
+export { OGridComponent } from './ogrid/ogrid.component';
+export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
+export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.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,125 @@
+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, effect, inject, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+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';
+let OGridComponent = class OGridComponent {
+    constructor() {
+        this.service = inject(OGridService);
+        this.props = input.required();
+        // Stable callback references (avoid re-creating every template eval)
+        this.onColumnSortFn = (columnKey) => this.service.handleSort(columnKey);
+        this.onColumnResizedFn = (columnId, width) => this.service.handleColumnResized(columnId, width);
+        this.onColumnPinnedFn = (columnId, pinned) => this.service.handleColumnPinned(columnId, pinned);
+        this.onSelectionChangeFn = (event) => this.service.handleSelectionChange(event);
+        this.onFilterChangeFn = (key, value) => this.service.handleFilterChange(key, value);
+        this.showToolbar = computed(() => this.service.columnChooserPlacement() === 'toolbar' || this.service.toolbar() != null);
+        this.emptyStateObj = computed(() => ({
+            hasActiveFilters: this.service.hasActiveFilters(),
+            onClearAll: () => this.service.setFilters({}),
+            message: this.service.emptyState()?.message,
+            render: this.service.emptyState()?.render,
+        }));
+        effect(() => {
+            this.service.configure(this.props());
+        });
+    }
+    onPageSizeChange(size) {
+        this.service.setPageSize(size);
+    }
+};
+OGridComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng',
+        standalone: true,
+        imports: [
+            CommonModule,
+            OGridLayoutComponent,
+            DataGridTableComponent,
+            ColumnChooserComponent,
+            PaginationControlsComponent,
+        ],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [OGridService],
+        template: `
+    <ogrid-layout
+      [className]="service.className()"
+      [hasToolbar]="showToolbar()"
+      [hasToolbarBelow]="false"
+      [hasPagination]="true"
+      [sideBar]="service.sideBarProps()"
+    >
+      <ng-content select="[toolbar]" toolbar></ng-content>
+
+      <div toolbarEnd>
+        @if (service.columnChooserPlacement() === 'toolbar') {
+          <ogrid-primeng-column-chooser
+            [columns]="service.columnChooser().columns"
+            [visibleColumns]="service.columnChooser().visibleColumns"
+            (visibilityChange)="service.handleVisibilityChange($event.columnKey, $event.visible)"
+          ></ogrid-primeng-column-chooser>
+        }
+      </div>
+
+      <ogrid-primeng-datagrid-table
+        [items]="service.displayItems()"
+        [columns]="service.columnsProp()"
+        [getRowId]="service.getRowId()"
+        [sortBy]="service.sort().field"
+        [sortDirection]="service.sort().direction"
+        [onColumnSort]="onColumnSortFn"
+        [visibleColumns]="service.visibleColumns()"
+        [columnOrder]="service.columnOrder()"
+        [onColumnOrderChange]="service.onColumnOrderChange()"
+        [onColumnResized]="onColumnResizedFn"
+        [onColumnPinned]="onColumnPinnedFn"
+        [freezeRows]="service.freezeRows()"
+        [freezeCols]="service.freezeCols()"
+        [editable]="service.editable()"
+        [cellSelection]="service.cellSelection()"
+        [onCellValueChanged]="service.onCellValueChanged()"
+        [onUndo]="service.onUndo()"
+        [onRedo]="service.onRedo()"
+        [canUndo]="service.canUndo()"
+        [canRedo]="service.canRedo()"
+        [rowSelection]="service.rowSelection()"
+        [selectedRows]="service.effectiveSelectedRows()"
+        [onSelectionChange]="onSelectionChangeFn"
+        [statusBar]="service.statusBarConfig()"
+        [isLoading]="service.isLoadingResolved()"
+        [filters]="service.filters()"
+        [onFilterChange]="onFilterChangeFn"
+        [filterOptions]="service.clientFilterOptions()"
+        [loadingFilterOptions]="service.loadingFilterOptions()"
+        [peopleSearch]="service.dataSource()?.searchPeople?.bind(service.dataSource())"
+        [getUserByEmail]="service.dataSource()?.getUserByEmail?.bind(service.dataSource())"
+        [layoutMode]="service.layoutMode()"
+        [suppressHorizontalScroll]="service.suppressHorizontalScroll()"
+        [aria-label]="service.ariaLabel()"
+        [aria-labelledby]="service.ariaLabelledBy()"
+        [emptyState]="emptyStateObj()"
+      ></ogrid-primeng-datagrid-table>
+
+      <div pagination>
+        <ogrid-primeng-pagination-controls
+          [currentPage]="service.pagination().page"
+          [pageSize]="service.pagination().pageSize"
+          [totalCount]="service.pagination().displayTotalCount"
+          [pageSizeOptions]="service.pageSizeOptions()"
+          [entityLabelPlural]="service.entityLabelPlural()"
+          (pageChange)="service.setPage($event)"
+          (pageSizeChange)="onPageSizeChange($event)"
+        ></ogrid-primeng-pagination-controls>
+      </div>
+    </ogrid-layout>
+  `,
+    })
+], OGridComponent);
+export { OGridComponent };

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

@@ -0,0 +1,126 @@
+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 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { getPaginationViewModel } from '@alaarab/ogrid-core';
+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.labelPlural = computed(() => this.entityLabelPlural() ?? 'items');
+        this.vm = computed(() => getPaginationViewModel(this.currentPage(), this.pageSize(), this.totalCount(), this.pageSizeOptions() ? { pageSizeOptions: this.pageSizeOptions() } : undefined));
+    }
+    onPageSizeChange(value) {
+        this.pageSizeChange.emit(Number(value));
+    }
+};
+PaginationControlsComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng-pagination-controls',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    @if (vm()) {
+      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ogrid-fg, #242424)">
+        <div>
+          Showing {{ vm()!.startItem }} to {{ vm()!.endItem }} of {{ totalCount().toLocaleString() }} {{ labelPlural() }}
+        </div>
+
+        <div style="display:flex;align-items:center;gap:4px" role="navigation" aria-label="Pagination">
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage() === 1"
+            (click)="pageChange.emit(1)"
+            aria-label="First page"
+            style="min-width:32px;padding:4px 8px"
+          >&laquo;</button>
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage() === 1"
+            (click)="pageChange.emit(currentPage() - 1)"
+            aria-label="Previous page"
+            style="min-width:32px;padding:4px 8px"
+          >&lsaquo;</button>
+
+          @if (vm()!.showStartEllipsis) {
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="pageChange.emit(1)"
+              aria-label="Page 1"
+              style="min-width:32px;padding:4px 8px"
+            >1</button>
+            <span aria-hidden style="padding:0 4px">&hellip;</span>
+          }
+
+          @for (pageNum of vm()!.pageNumbers; track pageNum) {
+            <button
+              type="button"
+              class="p-button p-button-sm"
+              [class.p-button-outlined]="currentPage() !== pageNum"
+              (click)="pageChange.emit(pageNum)"
+              [attr.aria-label]="'Page ' + pageNum"
+              [attr.aria-current]="currentPage() === pageNum ? 'page' : null"
+              style="min-width:32px;padding:4px 8px"
+            >{{ pageNum }}</button>
+          }
+
+          @if (vm()!.showEndEllipsis) {
+            <span aria-hidden style="padding:0 4px">&hellip;</span>
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="pageChange.emit(vm()!.totalPages)"
+              [attr.aria-label]="'Page ' + vm()!.totalPages"
+              style="min-width:32px;padding:4px 8px"
+            >{{ vm()!.totalPages }}</button>
+          }
+
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage() >= vm()!.totalPages"
+            (click)="pageChange.emit(currentPage() + 1)"
+            aria-label="Next page"
+            style="min-width:32px;padding:4px 8px"
+          >&rsaquo;</button>
+          <button
+            type="button"
+            class="p-button p-button-text p-button-sm"
+            [disabled]="currentPage() >= vm()!.totalPages"
+            (click)="pageChange.emit(vm()!.totalPages)"
+            aria-label="Last page"
+            style="min-width:32px;padding:4px 8px"
+          >&raquo;</button>
+        </div>
+
+        <div style="display:flex;align-items:center;gap:6px">
+          <span style="font-size:12px">Rows</span>
+          <select
+            [value]="'' + pageSize()"
+            (change)="onPageSizeChange($any($event.target).value)"
+            aria-label="Rows per page"
+            style="padding:4px 6px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+          >
+            @for (opt of vm()!.pageSizeOptions; track opt) {
+              <option [value]="opt">{{ opt }}</option>
+            }
+          </select>
+        </div>
+      </div>
+    }
+  `,
+    })
+], PaginationControlsComponent);
+export { PaginationControlsComponent };

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

@@ -0,0 +1,15 @@
+import type { IColumnDefinition } from '@alaarab/ogrid-angular';
+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 open: import("@angular/core").WritableSignal<boolean>;
+    protected readonly visibleCount: import("@angular/core").Signal<number>;
+    protected readonly totalCount: import("@angular/core").Signal<number>;
+    onToggle(columnKey: string, checked: boolean): void;
+    onSelectAll(): void;
+    onClearAll(): void;
+}

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

@@ -0,0 +1,51 @@
+import { ElementRef } from '@angular/core';
+import type { ColumnFilterType, IDateFilterValue, UserLike } from '@alaarab/ogrid-angular';
+export declare class ColumnHeaderFilterComponent {
+    private destroyRef;
+    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[]>;
+    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>;
+    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 filterTrigger: import("@angular/core").Signal<ElementRef<HTMLButtonElement> | undefined>;
+    readonly filterPanel: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    private peopleDebounceTimer;
+    private clickOutsideHandler;
+    readonly hasActiveFilter: import("@angular/core").Signal<boolean>;
+    readonly filteredOptions: import("@angular/core").Signal<string[]>;
+    constructor();
+    handleSortClick(): void;
+    toggleFilter(): void;
+    handleTextApply(): void;
+    handleTextClear(): void;
+    handleCheckboxChange(opt: string, checked: boolean): void;
+    handleSelectAllOptions(): void;
+    handleClearSelection(): void;
+    handleApplyMultiSelect(): void;
+    onPeopleSearchInput(value: string): void;
+    handleUserSelect(user: UserLike): void;
+    handleClearUser(): void;
+    handleDateApply(): void;
+    handleDateClear(): void;
+}

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

@@ -0,0 +1,130 @@
+import { ElementRef } from '@angular/core';
+import type { IColumnDef, IColumnGroupDef, RowId } from '@alaarab/ogrid-angular';
+export declare class DataGridTableComponent<T = unknown> {
+    private readonly stateService;
+    readonly wrapperRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    readonly tableContainerRef: import("@angular/core").Signal<ElementRef<HTMLDivElement> | undefined>;
+    readonly items: import("@angular/core").InputSignal<T[]>;
+    readonly columns: import("@angular/core").InputSignal<(IColumnDef<T> | IColumnGroupDef<T>)[]>;
+    readonly getRowIdFn: import("@angular/core").InputSignal<(item: T) => RowId>;
+    readonly sortBy: import("@angular/core").InputSignal<string | undefined>;
+    readonly sortDirection: import("@angular/core").InputSignal<"asc" | "desc">;
+    readonly onColumnSort: import("@angular/core").InputSignal<(columnKey: string) => void>;
+    readonly visibleColumns: import("@angular/core").InputSignal<Set<string>>;
+    readonly columnOrder: import("@angular/core").InputSignal<string[] | undefined>;
+    readonly onColumnOrderChange: import("@angular/core").InputSignal<((order: string[]) => void) | undefined>;
+    readonly onColumnResized: import("@angular/core").InputSignal<((columnId: string, width: number) => void) | undefined>;
+    readonly onColumnPinned: import("@angular/core").InputSignal<((columnId: string, pinned: "left" | "right" | null) => void) | undefined>;
+    readonly pinnedColumns: import("@angular/core").InputSignal<Record<string, "left" | "right"> | undefined>;
+    readonly initialColumnWidths: import("@angular/core").InputSignal<Record<string, number> | undefined>;
+    readonly freezeRows: import("@angular/core").InputSignal<number | undefined>;
+    readonly freezeCols: import("@angular/core").InputSignal<number | undefined>;
+    readonly layoutMode: import("@angular/core").InputSignal<"fill" | "content">;
+    readonly suppressHorizontalScroll: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly isLoading: import("@angular/core").InputSignal<boolean>;
+    readonly loadingMessage: import("@angular/core").InputSignal<string>;
+    readonly editable: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly cellSelection: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly onCellValueChanged: import("@angular/core").InputSignal<((event: {
+        item: T;
+        columnId: string;
+        oldValue: unknown;
+        newValue: unknown;
+        rowIndex: number;
+    }) => void) | undefined>;
+    readonly onUndo: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onRedo: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly canUndo: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly canRedo: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly rowSelectionMode: import("@angular/core").InputSignal<"none" | "single" | "multiple">;
+    readonly selectedRows: import("@angular/core").InputSignal<Set<RowId> | undefined>;
+    readonly onSelectionChange: import("@angular/core").InputSignal<((event: {
+        selectedRowIds: RowId[];
+        selectedItems: T[];
+    }) => void) | undefined>;
+    readonly statusBar: import("@angular/core").InputSignal<unknown>;
+    readonly filters: import("@angular/core").InputSignal<Record<string, unknown>>;
+    readonly onFilterChange: import("@angular/core").InputSignal<(key: string, value: unknown) => void>;
+    readonly filterOptions: import("@angular/core").InputSignal<Record<string, string[]>>;
+    readonly loadingFilterOptions: import("@angular/core").InputSignal<Record<string, boolean>>;
+    readonly peopleSearch: import("@angular/core").InputSignal<((query: string) => Promise<unknown[]>) | undefined>;
+    readonly getUserByEmail: import("@angular/core").InputSignal<((email: string) => Promise<unknown>) | undefined>;
+    readonly emptyState: import("@angular/core").InputSignal<{
+        onClearAll: () => void;
+        hasActiveFilters: boolean;
+        message?: string;
+        render?: unknown;
+    } | undefined>;
+    readonly onCellError: import("@angular/core").InputSignal<((error: Error) => void) | undefined>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+    readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
+    readonly defaultMinWidth = 80;
+    readonly statusBarClasses: {
+        statusBar: string;
+        statusBarItem: string;
+        statusBarLabel: string;
+        statusBarValue: string;
+    };
+    private readonly columnSizingOverrides;
+    private resizeStartX;
+    private resizeColumnId;
+    private resizeStartWidth;
+    private lastMouseShift;
+    constructor();
+    readonly state: import("@angular/core").Signal<import("@alaarab/ogrid-angular").DataGridStateResult<T>>;
+    readonly tableContainerEl: import("@angular/core").Signal<HTMLDivElement | null>;
+    readonly resolvedAriaLabel: import("@angular/core").Signal<string | undefined>;
+    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-angular").HeaderRow<T>[]>;
+    readonly allowOverflowX: import("@angular/core").Signal<boolean>;
+    readonly tableWidthStyle: import("@angular/core").Signal<"100%" | "fit-content">;
+    readonly tableMinWidthStyle: import("@angular/core").Signal<"100%" | "max-content">;
+    readonly selectedCellCount: import("@angular/core").Signal<number | undefined>;
+    trackByRowId(_index: number, item: T): RowId;
+    getColumnWidth(col: IColumnDef<T>): number | undefined;
+    getFilterConfig(col: IColumnDef<T>): {
+        filterType: string;
+        isSorted?: boolean;
+        isSortedDescending?: boolean;
+        onSort?: () => void;
+        selectedValues?: string[];
+        onFilterChange?: (values: string[]) => void;
+        options?: string[];
+        isLoadingOptions?: boolean;
+        textValue?: string;
+        onTextChange?: (value: string) => void;
+        selectedUser?: unknown;
+        onUserChange?: (user: unknown) => void;
+        peopleSearch?: (query: string) => Promise<unknown[]>;
+        dateValue?: {
+            from?: string;
+            to?: string;
+        };
+        onDateChange?: (value: {
+            from?: string;
+            to?: string;
+        } | undefined) => void;
+    };
+    getCellValueFn(item: T, col: IColumnDef<T>): unknown;
+    resolveCellDisplay(col: IColumnDef<T>, item: T): string;
+    getCellStyleObj(col: IColumnDef<T>, item: T): Record<string, string> | null;
+    canEditCell(col: IColumnDef<T>, item: T): boolean;
+    isEditingCell(item: T, col: IColumnDef<T>): boolean;
+    getEditorType(col: IColumnDef<T>, _item: T): 'text' | 'select' | 'checkbox' | 'date' | 'richSelect';
+    isActiveCell(rowIndex: number, colIdx: number): boolean;
+    isInSelectionRange(rowIndex: number, colIdx: number): boolean;
+    isSelectionEndCell(rowIndex: number, colIdx: number): boolean;
+    getCellBackground(rowIndex: number, colIdx: number): string | null;
+    onMouseDown(e: MouseEvent): void;
+    onGridKeyDown(e: KeyboardEvent): void;
+    onCellMouseDown(e: MouseEvent, rowIndex: number, globalColIndex: number): void;
+    onCellDblClick(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): void;
+    onCellContextMenu(e: MouseEvent): void;
+    onCellEditorCommit(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number, newValue: unknown): void;
+    onFillHandleMouseDown(e: MouseEvent): void;
+    onSelectAllChange(checked: boolean): void;
+    onRowClick(e: MouseEvent, item: T): void;
+    onRowCheckboxChange(item: T, checked: boolean, rowIndex: number, e: Event): void;
+    handlePaste(): void;
+    onResizeStart(e: MouseEvent, col: IColumnDef<T>): void;
+    private buildProps;
+}

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

@@ -0,0 +1,21 @@
+import { ElementRef, AfterViewInit } from '@angular/core';
+import type { IColumnDef } from '@alaarab/ogrid-angular';
+export declare class InlineCellEditorComponent<T = unknown> implements AfterViewInit {
+    readonly value: import("@angular/core").InputSignal<unknown>;
+    readonly item: import("@angular/core").InputSignal<T>;
+    readonly column: import("@angular/core").InputSignal<IColumnDef<T>>;
+    readonly rowIndex: import("@angular/core").InputSignal<number>;
+    readonly editorType: import("@angular/core").InputSignal<"text" | "date" | "select" | "checkbox" | "richSelect">;
+    readonly commit: import("@angular/core").OutputEmitterRef<unknown>;
+    readonly cancel: import("@angular/core").OutputEmitterRef<void>;
+    readonly inputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement | HTMLSelectElement> | undefined>;
+    readonly localValue: import("@angular/core").WritableSignal<unknown>;
+    readonly selectOptions: import("@angular/core").WritableSignal<unknown[]>;
+    constructor();
+    ngAfterViewInit(): void;
+    commitValue(value: unknown): void;
+    onTextKeyDown(e: KeyboardEvent): void;
+    onSelectKeyDown(e: KeyboardEvent): void;
+    onCheckboxKeyDown(e: KeyboardEvent): void;
+    onTextBlur(): void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from '@alaarab/ogrid-angular';
+export { OGridComponent } from './ogrid/ogrid.component';
+export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
+export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.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';