@alaarab/ogrid-angular-primeng 2.0.7 → 2.0.8

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

@@ -9,6 +9,7 @@ import { BaseDataGridTableComponent, DataGridStateService, StatusBarComponent, G
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
 import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
 import { InlineCellEditorComponent } from './inline-cell-editor.component';
+import { PopoverCellEditorComponent } from './popover-cell-editor.component';
 let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTableComponent {
     constructor() {
         super();
@@ -125,7 +126,8 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     }
     resolveCellDisplay(col, item) {
         const value = getCellValue(item, col);
-        return resolveCellDisplayContent(col, item, value);
+        const result = resolveCellDisplayContent(col, item, value);
+        return result != null ? String(result) : '';
     }
     getCellStyleObj(col, item) {
         return resolveCellStyle(col, item) ?? null;
@@ -140,6 +142,26 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             return false;
         return editing.rowId === this.getRowIdInput()(item) && editing.columnId === col.columnId;
     }
+    isEditingCellInline(item, col) {
+        return this.isEditingCell(item, col) && typeof col.cellEditor !== 'function';
+    }
+    isEditingCellPopover(item, col) {
+        return this.isEditingCell(item, col) && typeof col.cellEditor === 'function';
+    }
+    buildPopoverEditorPropsForPrimeng(item, col, rowIndex, colIdx) {
+        const oldValue = getCellValue(item, col);
+        const pendingValue = this.pendingEditorValue();
+        const displayValue = pendingValue !== undefined ? pendingValue : oldValue;
+        return {
+            value: displayValue,
+            onValueChange: (value) => this.setPendingEditorValue(value),
+            item,
+            column: col,
+            rowIndex,
+            onCommit: (newValue) => this.onCellEditorCommit(item, col, rowIndex, colIdx, newValue),
+            onCancel: () => this.cancelEdit(),
+        };
+    }
     getEditorType(col, _item) {
         if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'date' || col.cellEditor === 'richSelect') {
             return col.cellEditor;
@@ -290,6 +312,7 @@ DataGridTableComponent = __decorate([
             ColumnHeaderFilterComponent,
             ColumnHeaderMenuComponent,
             InlineCellEditorComponent,
+            PopoverCellEditorComponent,
         ],
         changeDetection: ChangeDetectionStrategy.OnPush,
         providers: [DataGridStateService],
@@ -310,6 +333,7 @@ DataGridTableComponent = __decorate([
         (contextmenu)="$event.preventDefault()"
         (keydown)="onGridKeyDown($event)"
         (mousedown)="onWrapperMouseDown($event)"
+        (scroll)="onWrapperScroll($event)"
         style="flex:1;min-height:0;overflow:auto;outline:none;position:relative;font-size:13px;color:var(--ogrid-fg, #242424)"
         [style.--data-table-column-count]="state().layout.totalColCount"
         [style.--data-table-width]="tableWidthStyle()"
@@ -424,7 +448,11 @@ DataGridTableComponent = __decorate([
 
                 @if (!showEmptyInGrid()) {
                   <tbody>
-                    @for (item of items(); track trackByRowId($index, item); let rowIndex = $index) {
+                    @if (vsEnabled() && vsTopSpacerHeight() > 0) {
+                      <tr [style.height.px]="vsTopSpacerHeight()"></tr>
+                    }
+                    @for (item of vsVisibleItems(); track trackByRowId($index, item); let localIdx = $index) {
+                      @let rowIndex = vsStartIndex() + localIdx;
                       @let rowId = getRowIdInput()(item);
                       @let isSelected = selectedRowIds().has(rowId);
                       <tr
@@ -465,7 +493,7 @@ DataGridTableComponent = __decorate([
                             [style.max-width.px]="getColumnWidth(col)"
                             [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
                           >
-                            @if (isEditingCell(item, col)) {
+                            @if (isEditingCellInline(item, col)) {
                               <ogrid-primeng-inline-cell-editor
                                 [value]="getCellValueFn(item, col)"
                                 [item]="item"
@@ -475,6 +503,17 @@ DataGridTableComponent = __decorate([
                                 (commit)="onCellEditorCommit(item, col, rowIndex, colIdx, $event)"
                                 (cancel)="cancelEdit()"
                               ></ogrid-primeng-inline-cell-editor>
+                            } @else if (isEditingCellPopover(item, col)) {
+                              @let editorProps = buildPopoverEditorPropsForPrimeng(item, col, rowIndex, colIdx);
+                              <ogrid-primeng-popover-cell-editor
+                                [item]="item"
+                                [column]="col"
+                                [rowIndex]="rowIndex"
+                                [globalColIndex]="colIdx + colOffset()"
+                                [displayValue]="getCellValueFn(item, col)"
+                                [editorProps]="editorProps"
+                                [onCancel]="() => cancelEdit()"
+                              ></ogrid-primeng-popover-cell-editor>
                             } @else {
                               <div
                                 [attr.data-row-index]="rowIndex"
@@ -502,6 +541,9 @@ DataGridTableComponent = __decorate([
                         }
                       </tr>
                     }
+                    @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
+                      <tr [style.height.px]="vsBottomSpacerHeight()"></tr>
+                    }
                   </tbody>
                 }
               </table>

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/datagrid-table/datagrid-table.component.d.ts

@@ -86,6 +86,9 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     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;

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.7",
+  "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,11 +16,24 @@
     "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.7"
   },
@@ -42,5 +55,7 @@
     "typescript": "^5.9.3"
   },
   "sideEffects": false,
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }