@alaarab/ogrid-angular-material 2.0.15 → 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, ChangeDetectionStrategy, ViewChild, computed, Input } from '@angular/core';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-angular';
 /**
  * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses Angular Material MatMenu.

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

@@ -138,7 +138,7 @@ DataGridTableComponent = __decorate([
                             [attr.rowSpan]="headerRows().length > 1 ? headerRows().length - rowIdx : null"
                             [attr.data-column-id]="col.columnId"
                             [attr.aria-sort]="ariaSort"
-                            [style.minWidth.px]="col.minWidth ?? 80"
+                            [style.minWidth.px]="getEffectiveMinWidth(col)"
                             [style.width.px]="colW"
                             [style.maxWidth.px]="colW"
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
@@ -239,6 +239,7 @@ DataGridTableComponent = __decorate([
                           >
                             @let descriptor = getCellDescriptor(item, colLayout.col, rowIndex, colIdx);
                             @if (descriptor.mode === 'editing-inline') {
+                              <div class="ogrid-editing-cell">
                               <ogrid-mat-inline-cell-editor
                                 [value]="descriptor.value"
                                 [item]="item"
@@ -248,6 +249,7 @@ DataGridTableComponent = __decorate([
                                 (commit)="commitEdit(item, colLayout.col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
                                 (cancel)="cancelEdit()"
                               ></ogrid-mat-inline-cell-editor>
+                              </div>
                             } @else if (descriptor.mode === 'editing-popover') {
                               @let editorProps = buildPopoverEditorProps(item, colLayout.col, descriptor);
                               <ogrid-mat-popover-cell-editor
@@ -518,6 +520,11 @@ DataGridTableComponent = __decorate([
     .ogrid-datagrid-cell--in-range { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
     .ogrid-datagrid-cell--in-cut-range { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); opacity: 0.7; }
     .ogrid-datagrid-cell--editing { padding: 0; }
+    .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-datagrid-editor-input {
       width: 100%; height: 100%; padding: 6px 10px; border: 2px solid var(--ogrid-selection-color, #217346);
       box-sizing: border-box; font-size: 14px; outline: none; font-family: inherit; line-height: inherit;

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

@@ -4,109 +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, Input, Output, EventEmitter, signal, ViewChild } 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([]);
-        this._initialized = false;
-    }
-    ngOnInit() {
-        this._initialized = true;
-        this.syncFromInputs();
-    }
-    ngOnChanges() {
-        if (this._initialized) {
-            this.syncFromInputs();
-        }
-    }
-    syncFromInputs() {
-        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-mat-inline-cell-editor',
@@ -125,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,5 +1,5 @@
 import { MatMenuTrigger } from '@angular/material/menu';
-import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-core';
+import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-angular';
 /**
  * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses Angular Material MatMenu.

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

@@ -1,25 +1,3 @@
-import { EventEmitter, ElementRef, AfterViewInit } 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[]>;
-    private _initialized;
-    ngOnInit(): void;
-    ngOnChanges(): void;
-    private syncFromInputs;
-    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 Material.
  * Renders custom popover editor when anchor element is set.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "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",