@alaarab/ogrid-angular-primeng 2.0.14 → 2.0.16

package/dist/esm/column-header-menu/column-header-menu.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, computed, ViewChild, ChangeDetectionStrategy, Input } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { MenuModule } from 'primeng/menu';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-angular';
 /**
  * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses PrimeNG Menu component.

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

@@ -243,6 +243,10 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
     }
     onResizeStartPrimeng(e, col) {
         e.preventDefault();
+        // Clear cell selection before resize so selection outlines don't persist during drag
+        this.state().interaction.setActiveCell(null);
+        this.state().interaction.setSelectionRange(null);
+        this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
         this.resizeStartX = e.clientX;
         this.resizeColumnId = col.columnId;
         this.resizeStartWidth = this.getColumnWidth(col);
@@ -546,7 +550,7 @@ DataGridTableComponent = __decorate([
                             [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
                             [class.ogrid-th-pinned-left]="pinned === 'left'"
                             [class.ogrid-th-pinned-right]="pinned === 'right'"
-                            [style.min-width.px]="col.minWidth ?? defaultMinWidth"
+                            [style.min-width.px]="getEffectiveMinWidth(col)"
                             [style.width.px]="getColumnWidth(col)"
                             [style.max-width.px]="getColumnWidth(col)"
                             [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
@@ -641,7 +645,7 @@ DataGridTableComponent = __decorate([
                             [class.ogrid-td-pinned-left]="pinned === 'left'"
                             [class.ogrid-td-pinned-right]="pinned === 'right'"
                             class="ogrid-data-cell"
-                            [style.min-width.px]="col.minWidth ?? defaultMinWidth"
+                            [style.min-width.px]="getEffectiveMinWidth(col)"
                             [style.width.px]="getColumnWidth(col)"
                             [style.max-width.px]="getColumnWidth(col)"
                             [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
@@ -649,6 +653,7 @@ DataGridTableComponent = __decorate([
                             [style.text-align]="col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : null"
                           >
                             @if (isEditingCellInline(item, col)) {
+                              <div class="ogrid-editing-cell">
                               <ogrid-primeng-inline-cell-editor
                                 [value]="getCellValueFn(item, col)"
                                 [item]="item"
@@ -658,6 +663,7 @@ DataGridTableComponent = __decorate([
                                 (commit)="onCellEditorCommit(item, col, rowIndex, colIdx, $event)"
                                 (cancel)="cancelEdit()"
                               ></ogrid-primeng-inline-cell-editor>
+                              </div>
                             } @else if (isEditingCellPopover(item, col)) {
                               @let editorProps = buildPopoverEditorPropsForPrimeng(item, col, rowIndex, colIdx);
                               <ogrid-primeng-popover-cell-editor
@@ -951,6 +957,11 @@ DataGridTableComponent = __decorate([
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    .ogrid-editing-cell {
+      width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;
+      outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
+      z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: visible; padding: 0;
+    }
     .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
     .ogrid-fill-handle {
       position: absolute;

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

@@ -4,99 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, signal, effect, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-let InlineCellEditorComponent = class InlineCellEditorComponent {
-    constructor() {
-        this.commit = new EventEmitter();
-        this.cancel = new EventEmitter();
-        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;
-    }
+import { BaseInlineCellEditorComponent } from '@alaarab/ogrid-angular';
+let InlineCellEditorComponent = class InlineCellEditorComponent extends BaseInlineCellEditorComponent {
 };
-__decorate([
-    Input({ required: true })
-], InlineCellEditorComponent.prototype, "value", void 0);
-__decorate([
-    Input({ required: true })
-], InlineCellEditorComponent.prototype, "item", void 0);
-__decorate([
-    Input({ required: true })
-], InlineCellEditorComponent.prototype, "column", void 0);
-__decorate([
-    Input({ required: true })
-], InlineCellEditorComponent.prototype, "rowIndex", void 0);
-__decorate([
-    Input({ required: true })
-], InlineCellEditorComponent.prototype, "editorType", void 0);
-__decorate([
-    Output()
-], InlineCellEditorComponent.prototype, "commit", void 0);
-__decorate([
-    Output()
-], InlineCellEditorComponent.prototype, "cancel", void 0);
-__decorate([
-    ViewChild('inputEl')
-], InlineCellEditorComponent.prototype, "inputEl", void 0);
 InlineCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-inline-cell-editor',
@@ -115,19 +27,53 @@ InlineCellEditorComponent = __decorate([
           [style]="getInputStyle()"
         />
       }
+      @case ('richSelect') {
+        <div #richSelectWrapper
+             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative">
+          <input
+            #richSelectInput
+            type="text"
+            [value]="searchText()"
+            (input)="onRichSelectSearch($any($event.target).value)"
+            (keydown)="onRichSelectKeyDown($event)"
+            placeholder="Search..."
+            style="width:100%;padding:0;border:none;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none;min-width:0"
+          />
+          <div #richSelectDropdown role="listbox"
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+            @for (opt of filteredOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [style]="i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'">
+                {{ getDisplayText(opt) }}
+              </div>
+            }
+            @if (filteredOptions().length === 0) {
+              <div style="padding:6px 8px;color:var(--ogrid-muted, #999)">No matches</div>
+            }
+          </div>
+        </div>
+      }
       @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>
+        <div #selectWrapper tabindex="0"
+             style="width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative"
+             (keydown)="onCustomSelectKeyDown($event)">
+          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit">
+            <span>{{ getDisplayText(value) }}</span>
+            <span style="margin-left:4px;font-size:10px;opacity:0.5">&#9662;</span>
+          </div>
+          <div #selectDropdown role="listbox"
+               style="position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2)">
+            @for (opt of selectOptions(); track opt; let i = $index) {
+              <div role="option"
+                   [attr.aria-selected]="i === highlightedIndex()"
+                   (click)="commitValue(opt)"
+                   [style]="i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424)'">
+                {{ getDisplayText(opt) }}
+              </div>
             }
-          </select>
+          </div>
         </div>
       }
       @case ('checkbox') {

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

@@ -1,6 +1,6 @@
 import type { Menu } from 'primeng/menu';
 import type { MenuItem } from 'primeng/api';
-import { type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-core';
+import { type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-angular';
 /**
  * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses PrimeNG Menu component.

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

@@ -1,22 +1,3 @@
-import { ElementRef, AfterViewInit, EventEmitter } from '@angular/core';
-import type { IColumnDef } from '@alaarab/ogrid-angular';
-export declare class InlineCellEditorComponent<T = unknown> implements AfterViewInit {
-    value: unknown;
-    item: T;
-    column: IColumnDef<T>;
-    rowIndex: number;
-    editorType: 'text' | 'select' | 'checkbox' | 'date' | 'richSelect';
-    commit: EventEmitter<unknown>;
-    cancel: EventEmitter<void>;
-    inputEl?: ElementRef<HTMLInputElement | HTMLSelectElement>;
-    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;
+import { BaseInlineCellEditorComponent } from '@alaarab/ogrid-angular';
+export declare class InlineCellEditorComponent<T = unknown> extends BaseInlineCellEditorComponent<T> {
 }

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

@@ -1,4 +1,4 @@
-import type { IColumnDef, ICellEditorProps } from '@alaarab/ogrid-core';
+import type { IColumnDef, ICellEditorProps } from '@alaarab/ogrid-angular';
 /**
  * PopoverCellEditor component for Angular PrimeNG.
  * Renders custom popover editor when anchor element is set.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "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",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.14"
+    "@alaarab/ogrid-angular": "2.0.15"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",