@alaarab/ogrid-angular-material 2.0.7 → 2.0.8

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

@@ -8,6 +8,8 @@ import { Component, input, viewChild, ChangeDetectionStrategy, } from '@angular/
 import { BaseDataGridTableComponent, DataGridStateService, MarchingAntsOverlayComponent, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
 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';
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
  * Standalone component — this is the workhorse of the grid.
@@ -34,7 +36,7 @@ DataGridTableComponent = __decorate([
     Component({
         selector: 'ogrid-datagrid-table',
         standalone: true,
-        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, MarchingAntsOverlayComponent],
+        imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, MarchingAntsOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
         providers: [DataGridStateService],
         changeDetection: ChangeDetectionStrategy.OnPush,
         template: `
@@ -50,6 +52,7 @@ DataGridTableComponent = __decorate([
         [attr.aria-labelledby]="ariaLabelledBy()"
         (mousedown)="onWrapperMouseDown($event)"
         (keydown)="onGridKeyDown($event)"
+        (scroll)="onWrapperScroll($event)"
         (contextmenu)="$event.preventDefault()"
         [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
       >
@@ -152,7 +155,11 @@ DataGridTableComponent = __decorate([
                 </thead>
                 @if (!showEmptyInGrid()) {
                   <tbody>
-                    @for (item of items(); track getRowId()(item); let rowIndex = $index) {
+                    @if (vsEnabled() && vsTopSpacerHeight() > 0) {
+                      <tr class="ogrid-datagrid-vs-spacer" [style.height.px]="vsTopSpacerHeight()"></tr>
+                    }
+                    @for (item of vsVisibleItems(); track getRowId()(item); let localIdx = $index) {
+                      @let rowIndex = vsStartIndex() + localIdx;
                       @let rowId = getRowId()(item);
                       @let isSelected = selectedRowIds().has(rowId);
                       <tr
@@ -196,47 +203,26 @@ DataGridTableComponent = __decorate([
                           >
                             @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, colIdx);
                             @if (descriptor.mode === 'editing-inline') {
-                              <div class="ogrid-datagrid-cell ogrid-datagrid-cell--editing">
-                                @switch (descriptor.editorType) {
-                                  @case ('checkbox') {
-                                    <input
-                                      type="checkbox"
-                                      [checked]="!!descriptor.value"
-                                      (change)="commitEdit(item, colLayout.col.columnId, descriptor.value, ($event.target as HTMLInputElement).checked, rowIndex, descriptor.globalColIndex)"
-                                      (keydown)="$event.key === 'Escape' && cancelEdit()"
-                                    />
-                                  }
-                                  @case ('select') {
-                                    <select
-                                      class="ogrid-datagrid-editor-select"
-                                      [value]="descriptor.value != null ? '' + descriptor.value : ''"
-                                      (change)="commitEdit(item, colLayout.col.columnId, descriptor.value, ($event.target as HTMLSelectElement).value, rowIndex, descriptor.globalColIndex)"
-                                      (keydown)="$event.key === 'Escape' && cancelEdit()"
-                                    >
-                                      @for (v of getSelectValues(colLayout.col); track v) {
-                                        <option [value]="v">{{ v }}</option>
-                                      }
-                                    </select>
-                                  }
-                                  @case ('date') {
-                                    <input
-                                      type="date"
-                                      class="ogrid-datagrid-editor-input"
-                                      [value]="formatDateForInput(descriptor.value)"
-                                      (change)="commitEdit(item, colLayout.col.columnId, descriptor.value, ($event.target as HTMLInputElement).value, rowIndex, descriptor.globalColIndex)"
-                                      (keydown)="onEditorKeydown($event, item, colLayout.col.columnId, descriptor.value, rowIndex, descriptor.globalColIndex)"
-                                    />
-                                  }
-                                  @default {
-                                    <input
-                                      type="text"
-                                      class="ogrid-datagrid-editor-input"
-                                      [value]="descriptor.value != null ? '' + descriptor.value : ''"
-                                      (keydown)="onEditorKeydown($event, item, colLayout.col.columnId, descriptor.value, rowIndex, descriptor.globalColIndex)"
-                                    />
-                                  }
-                                }
-                              </div>
+                              <ogrid-mat-inline-cell-editor
+                                [value]="descriptor.value"
+                                [item]="item"
+                                [column]="colLayout.col"
+                                [rowIndex]="rowIndex"
+                                [editorType]="descriptor.editorType ?? 'text'"
+                                (commit)="commitEdit(item, colLayout.col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
+                                (cancel)="cancelEdit()"
+                              ></ogrid-mat-inline-cell-editor>
+                            } @else if (descriptor.mode === 'editing-popover') {
+                              @let editorProps = buildPopoverEditorProps(item, colLayout.col, descriptor);
+                              <ogrid-mat-popover-cell-editor
+                                [item]="item"
+                                [column]="colLayout.col"
+                                [rowIndex]="rowIndex"
+                                [globalColIndex]="descriptor.globalColIndex"
+                                [displayValue]="descriptor.displayValue"
+                                [editorProps]="editorProps"
+                                [onCancel]="() => cancelEdit()"
+                              ></ogrid-mat-popover-cell-editor>
                             } @else {
                               @let content = resolveCellContent(colLayout.col, item, descriptor.displayValue);
                               @let cellStyle = resolveCellStyleFn(colLayout.col, item);
@@ -273,6 +259,9 @@ DataGridTableComponent = __decorate([
                         }
                       </tr>
                     }
+                    @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
+                      <tr class="ogrid-datagrid-vs-spacer" [style.height.px]="vsBottomSpacerHeight()"></tr>
+                    }
                   </tbody>
                 }
               </table>

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

@@ -0,0 +1,158 @@
+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());
+    }
+    getInputStyle() {
+        const baseStyle = '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);';
+        const col = this.column();
+        if (col.type === 'numeric') {
+            return baseStyle + 'text-align:right;';
+        }
+        return baseStyle;
+    }
+};
+InlineCellEditorComponent = __decorate([
+    Component({
+        selector: 'ogrid-mat-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]="getInputStyle()"
+        />
+      }
+      @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]="getInputStyle()"
+        />
+      }
+      @default {
+        <input
+          #inputEl
+          type="text"
+          [value]="localValue()"
+          (input)="localValue.set($any($event.target).value)"
+          (keydown)="onTextKeyDown($event)"
+          (blur)="onTextBlur()"
+          [style]="getInputStyle()"
+        />
+      }
+    }
+  `,
+        styles: [`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `],
+    })
+], InlineCellEditorComponent);
+export { InlineCellEditorComponent };

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

@@ -0,0 +1,99 @@
+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 Material.
+ * 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-mat-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 {
+      width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
+      padding: 6px 10px; box-sizing: border-box; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap; user-select: none;
+      outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px;
+      z-index: 2; position: relative;
+    }
+    .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

@@ -7,3 +7,5 @@ export { ColumnHeaderFilterComponent } from './column-header-filter/column-heade
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
 export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
 export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
+export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';
+export { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.component';

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

@@ -0,0 +1,22 @@
+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;
+    getInputStyle(): string;
+}

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 Material.
+ * 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

@@ -7,3 +7,5 @@ export { ColumnChooserComponent } from './column-chooser/column-chooser.componen
 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';
+export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';
+export { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "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",
@@ -16,33 +16,48 @@
     "build": "rimraf dist && tsc -p tsconfig.build.json",
     "test": "jest --passWithNoTests"
   },
-  "keywords": ["ogrid", "angular", "material", "datatable", "typescript", "grid"],
+  "keywords": [
+    "ogrid",
+    "angular",
+    "material",
+    "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"
   },
   "peerDependencies": {
-    "@angular/core": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",
-    "@angular/material": "^21.0.0",
-    "@angular/cdk": "^21.0.0"
+    "@angular/core": "^21.0.0",
+    "@angular/material": "^21.0.0"
   },
   "devDependencies": {
-    "@angular/core": "^21.1.4",
+    "@angular/animations": "^21.1.4",
+    "@angular/cdk": "^21.1.4",
     "@angular/common": "^21.1.4",
     "@angular/compiler": "^21.1.4",
+    "@angular/core": "^21.1.4",
+    "@angular/material": "^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.2",
-    "zone.js": "^0.15.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "zone.js": "^0.15.0"
   },
   "sideEffects": false,
-  "publishConfig": { "access": "public" }
+  "publishConfig": {
+    "access": "public"
+  }
 }