@alaarab/ogrid-angular-primeng 2.0.6 → 2.0.8

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

@@ -0,0 +1,97 @@
+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, ChangeDetectionStrategy, signal, effect, viewChild, Injector, createComponent, EnvironmentInjector, inject, } from '@angular/core';
+/**
+ * PopoverCellEditor component for Angular PrimeNG.
+ * Renders custom popover editor when anchor element is set.
+ */
+let PopoverCellEditorComponent = class PopoverCellEditorComponent {
+    constructor() {
+        this.item = input.required();
+        this.column = input.required();
+        this.rowIndex = input.required();
+        this.globalColIndex = input.required();
+        this.displayValue = input.required();
+        this.editorProps = input.required();
+        this.onCancel = input.required();
+        this.anchorRef = viewChild('anchorEl');
+        this.editorContainerRef = viewChild('editorContainer');
+        this.injector = inject(Injector);
+        this.envInjector = inject(EnvironmentInjector);
+        this.showEditor = signal(false);
+        // Show editor after anchor is rendered
+        effect(() => {
+            const anchor = this.anchorRef();
+            if (anchor) {
+                setTimeout(() => this.showEditor.set(true), 0);
+            }
+        });
+        // Render custom editor component when container is available
+        effect(() => {
+            const container = this.editorContainerRef();
+            const props = this.editorProps();
+            const col = this.column();
+            if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
+                return;
+            const EditorComponent = col.cellEditor; // ComponentType
+            const componentRef = createComponent(EditorComponent, {
+                environmentInjector: this.envInjector,
+                elementInjector: this.injector,
+            });
+            // Pass props to component instance
+            Object.assign(componentRef.instance, props);
+            componentRef.changeDetectorRef.detectChanges();
+            // Append to DOM
+            container.nativeElement.appendChild(componentRef.location.nativeElement);
+            // Cleanup on destroy
+            return () => componentRef.destroy();
+        });
+    }
+    handleOverlayClick() {
+        this.onCancel()();
+    }
+};
+PopoverCellEditorComponent = __decorate([
+    Component({
+        selector: 'ogrid-primeng-popover-cell-editor',
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
+    <div #anchorEl
+      class="ogrid-popover-anchor"
+      [attr.data-row-index]="rowIndex()"
+      [attr.data-col-index]="globalColIndex()"
+    >
+      {{ displayValue() }}
+    </div>
+    @if (showEditor()) {
+      <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">
+        <div class="ogrid-popover-editor-content" #editorContainer></div>
+      </div>
+    }
+  `,
+        styles: [`
+    :host { display: contents; }
+    .ogrid-popover-anchor {
+      padding: 6px 10px; min-height: 20px; cursor: default; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap;
+      outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -2px;
+    }
+    .ogrid-popover-editor-overlay {
+      position: fixed; inset: 0; z-index: 1000;
+      background: rgba(0,0,0,0.3);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .ogrid-popover-editor-content {
+      background: #fff; border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      max-width: 90vw; max-height: 90vh; overflow: auto;
+    }
+  `],
+    })
+], PopoverCellEditorComponent);
+export { PopoverCellEditorComponent };

package/dist/esm/index.js

@@ -4,6 +4,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 { PopoverCellEditorComponent } from './datagrid-table/popover-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/types/column-chooser/column-chooser.component.d.ts

@@ -1,4 +1,9 @@
 import type { IColumnDefinition } from '@alaarab/ogrid-angular';
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+}
 export declare class ColumnChooserComponent {
     readonly columns: import("@angular/core").InputSignal<IColumnDefinition[]>;
     readonly visibleColumns: import("@angular/core").InputSignal<Set<string>>;

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

@@ -1,5 +1,24 @@
 import { ElementRef } from '@angular/core';
 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;
+}
 export declare class ColumnHeaderFilterComponent {
     private destroyRef;
     readonly columnKey: import("@angular/core").InputSignal<string>;

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

@@ -1,4 +1,3 @@
-import { EventEmitter } from '@angular/core';
 import type { Menu } from 'primeng/menu';
 import type { MenuItem } from 'primeng/api';
 /**
@@ -6,20 +5,15 @@ import type { MenuItem } from 'primeng/api';
  * Uses PrimeNG Menu component.
  */
 export declare class ColumnHeaderMenuComponent {
-    columnId: string;
-    set canPinLeft(value: boolean);
-    set canPinRight(value: boolean);
-    set canUnpin(value: boolean);
-    pinLeft: EventEmitter<void>;
-    pinRight: EventEmitter<void>;
-    unpin: EventEmitter<void>;
-    menu: Menu;
-    private _canPinLeft;
-    private _canPinRight;
-    private _canUnpin;
-    menuModel: MenuItem[];
-    ngOnInit(): void;
-    private updateMenuModel;
+    readonly columnId: import("@angular/core").InputSignal<string>;
+    readonly canPinLeft: import("@angular/core").InputSignal<boolean>;
+    readonly canPinRight: import("@angular/core").InputSignal<boolean>;
+    readonly canUnpin: import("@angular/core").InputSignal<boolean>;
+    readonly onPinLeft: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onPinRight: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onUnpin: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly menuRef: import("@angular/core").Signal<Menu | undefined>;
+    readonly menuModel: import("@angular/core").Signal<MenuItem[]>;
     handlePinLeft(): void;
     handlePinRight(): void;
     handleUnpin(): void;

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

@@ -1,15 +1,12 @@
 import { ElementRef } from '@angular/core';
-import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
-import type { IColumnDef, IColumnGroupDef, RowId, HeaderFilterConfig } from '@alaarab/ogrid-angular';
-export declare class DataGridTableComponent<T = unknown> {
-    private readonly stateService;
-    readonly columnReorderService: ColumnReorderService<T>;
-    readonly virtualScrollService: VirtualScrollService;
-    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[]>;
+import { BaseDataGridTableComponent } from '@alaarab/ogrid-angular';
+import type { IOGridDataGridProps, IColumnDef, IColumnGroupDef, RowId } from '@alaarab/ogrid-angular';
+export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTableComponent<T> {
+    private readonly wrapperRef;
+    private readonly tableContainerRefEl;
+    readonly itemsInput: 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 getRowIdInput: 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>;
@@ -18,14 +15,14 @@ export declare class DataGridTableComponent<T = unknown> {
     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 pinnedColumnsInput: 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 freezeRowsInput: import("@angular/core").InputSignal<number | undefined>;
+    readonly freezeColsInput: 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 isLoadingInput: import("@angular/core").InputSignal<boolean>;
+    readonly loadingMessageInput: 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: {
@@ -35,10 +32,10 @@ export declare class DataGridTableComponent<T = 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 onUndoInput: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly onRedoInput: import("@angular/core").InputSignal<(() => void) | undefined>;
+    readonly canUndoInput: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly canRedoInput: 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: {
@@ -52,18 +49,18 @@ export declare class DataGridTableComponent<T = unknown> {
     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<{
+    readonly emptyStateInput: 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 ariaLabelInput: import("@angular/core").InputSignal<string | undefined>;
+    readonly ariaLabelledByInput: import("@angular/core").InputSignal<string | undefined>;
     readonly showRowNumbers: import("@angular/core").InputSignal<boolean>;
-    readonly currentPage: import("@angular/core").InputSignal<number>;
-    readonly pageSize: import("@angular/core").InputSignal<number>;
+    readonly currentPageInput: import("@angular/core").InputSignal<number>;
+    readonly pageSizeInput: import("@angular/core").InputSignal<number>;
     readonly defaultMinWidth = 80;
     readonly statusBarClasses: {
         statusBar: string;
@@ -71,55 +68,37 @@ export declare class DataGridTableComponent<T = unknown> {
         statusBarLabel: string;
         statusBarValue: string;
     };
-    private readonly columnSizingOverrides;
+    private readonly primengColumnSizingOverrides;
     private resizeStartX;
     private resizeColumnId;
     private resizeStartWidth;
-    private lastMouseShift;
-    private columnSizingVersion;
     constructor();
-    readonly state: import("@angular/core").Signal<import("@alaarab/ogrid-angular").DataGridStateResult<T>>;
-    readonly tableContainerEl: import("@angular/core").Signal<HTMLDivElement | null>;
+    protected getProps(): IOGridDataGridProps<T> | undefined;
+    protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
+    protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     readonly resolvedAriaLabel: import("@angular/core").Signal<string | undefined>;
-    readonly rowNumberOffset: import("@angular/core").Signal<number>;
-    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").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>;
+    getColumnWidth(col: IColumnDef<T>): number;
     trackByRowId(_index: number, item: T): RowId;
-    getColumnWidth(col: IColumnDef<T>): number | undefined;
-    getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
     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;
+    isEditingCellInline(item: T, col: IColumnDef<T>): boolean;
+    isEditingCellPopover(item: T, col: IColumnDef<T>): boolean;
+    buildPopoverEditorPropsForPrimeng(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): unknown;
     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;
+    onCellDblClickPrimeng(item: T, col: IColumnDef<T>, _rowIndex: number, _colIdx: number): 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;
-    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
-    onResizeStart(e: MouseEvent, col: IColumnDef<T>): void;
-    onPinColumn(columnId: string, side: 'left' | 'right'): void;
-    onUnpinColumn(columnId: string): void;
-    isPinned(columnId: string): 'left' | 'right' | undefined;
-    getPinState(columnId: string): {
-        canPinLeft: boolean;
-        canPinRight: boolean;
-        canUnpin: boolean;
-    };
+    onSelectAllChangePrimeng(checked: boolean): void;
+    onRowClickPrimeng(e: MouseEvent, item: T): void;
+    onRowCheckboxChangePrimeng(item: T, checked: boolean, rowIndex: number, _e: Event): void;
+    onResizeStartPrimeng(e: MouseEvent, col: IColumnDef<T>): void;
     private buildProps;
 }

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

@@ -0,0 +1,21 @@
+import type { IColumnDef, ICellEditorProps } from '@alaarab/ogrid-core';
+/**
+ * PopoverCellEditor component for Angular PrimeNG.
+ * Renders custom popover editor when anchor element is set.
+ */
+export declare class PopoverCellEditorComponent<T> {
+    readonly item: import("@angular/core").InputSignal<T>;
+    readonly column: import("@angular/core").InputSignal<IColumnDef<T>>;
+    readonly rowIndex: import("@angular/core").InputSignal<number>;
+    readonly globalColIndex: import("@angular/core").InputSignal<number>;
+    readonly displayValue: import("@angular/core").InputSignal<unknown>;
+    readonly editorProps: import("@angular/core").InputSignal<ICellEditorProps<T>>;
+    readonly onCancel: import("@angular/core").InputSignal<() => void>;
+    private readonly anchorRef;
+    private readonly editorContainerRef;
+    private readonly injector;
+    private readonly envInjector;
+    protected readonly showEditor: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    protected handleOverlayClick(): void;
+}

package/dist/types/index.d.ts

@@ -2,7 +2,10 @@ 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 { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.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';
 export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -16,13 +16,26 @@
     "build": "rimraf dist && tsc -p tsconfig.build.json",
     "test": "jest --passWithNoTests"
   },
-  "keywords": ["ogrid", "angular", "primeng", "datatable", "typescript", "grid"],
+  "keywords": [
+    "ogrid",
+    "angular",
+    "primeng",
+    "datatable",
+    "typescript",
+    "grid"
+  ],
   "author": "Ala Arab",
   "license": "MIT",
-  "files": ["dist", "README.md", "LICENSE"],
-  "engines": { "node": ">=18" },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.6"
+    "@alaarab/ogrid-angular": "2.0.7"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -42,5 +55,7 @@
     "typescript": "^5.9.3"
   },
   "sideEffects": false,
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }