@alaarab/ogrid-angular 2.6.1 → 2.7.0

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

@@ -222,6 +222,7 @@ export class BaseDataGridTableComponent {
                     pinnedRight,
                     minWidth: effectiveMinWidth,
                     width: w,
+                    cssWidth: col.width,
                 };
             });
         }, ...(ngDevMode ? [{ debugName: "columnLayouts" }] : []));
@@ -578,6 +579,14 @@ export class BaseDataGridTableComponent {
         this.state().editing.setEditingCell(null);
         this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
     }
+    onNonDataSurfacePointerDown(event) {
+        if (typeof event.button === 'number' && event.button !== 0)
+            return;
+        event.preventDefault();
+    }
+    onNonDataSurfaceSelectStart(event) {
+        event.preventDefault();
+    }
     onCellClick(rowIndex, globalColIndex) {
         this.state().interaction.setActiveCell?.({ rowIndex, columnIndex: globalColIndex });
     }

package/dist/esm/components/base-popover-cell-editor.component.js

@@ -1,7 +1,6 @@
 import { Directive, Input, ViewChild, Injector, EnvironmentInjector, inject, signal, effect, createComponent } from '@angular/core';
 import * as i0 from "@angular/core";
-const _c0 = ["anchorEl"];
-const _c1 = ["editorContainer"];
+const _c0 = ["editorContainer"];
 /**
  * Shared popover cell editor template used by all Angular UI packages.
  */
@@ -45,21 +44,23 @@ export const POPOVER_CELL_EDITOR_OVERLAY_STYLES = `
  * framework-specific .ogrid-popover-anchor CSS styles.
  */
 export class BasePopoverCellEditorComponent {
+    set editorContainerRef(ref) {
+        this.editorContainerRefSig.set(ref);
+    }
+    ngAfterViewInit() {
+        // Defer until after the anchor has painted; the editor container is gated by
+        // `showEditor()`, so the container ViewChild signal will fire on the next render.
+        setTimeout(() => this.showEditor.set(true), 0);
+    }
     constructor() {
         this.injector = inject(Injector);
         this.envInjector = inject(EnvironmentInjector);
+        this.editorContainerRefSig = signal(undefined, ...(ngDevMode ? [{ debugName: "editorContainerRefSig" }] : []));
         this.showEditor = signal(false, ...(ngDevMode ? [{ debugName: "showEditor" }] : []));
-        // 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.
         // Angular's effect() ignores return values  -  use onCleanup() for cleanup.
         effect((onCleanup) => {
-            const container = this.editorContainerRef;
+            const container = this.editorContainerRefSig();
             const props = this.editorProps;
             const col = this.column;
             if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
@@ -83,10 +84,9 @@ export class BasePopoverCellEditorComponent {
     }
     static { this.ɵfac = function BasePopoverCellEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BasePopoverCellEditorComponent)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BasePopoverCellEditorComponent, viewQuery: function BasePopoverCellEditorComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+            i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.anchorRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorContainerRef = _t.first);
         } }, inputs: { item: "item", column: "column", rowIndex: "rowIndex", globalColIndex: "globalColIndex", displayValue: "displayValue", editorProps: "editorProps", onCancel: "onCancel" } }); }
 }
@@ -113,9 +113,6 @@ export class BasePopoverCellEditorComponent {
         }], onCancel: [{
             type: Input,
             args: [{ required: true }]
-        }], anchorRef: [{
-            type: ViewChild,
-            args: ['anchorEl']
         }], editorContainerRef: [{
             type: ViewChild,
             args: ['editorContainer']

package/dist/esm/services/datagrid-state.service.js

@@ -1,5 +1,5 @@
 import { Injectable, signal, computed, effect, DestroyRef, inject, NgZone } from '@angular/core';
-import { getDataGridStatusBarConfig, parseValue, computeAggregations, getCellValue, normalizeSelectionRange, } from '@alaarab/ogrid-core';
+import { getDataGridStatusBarConfig, applyFillValues, computeAggregations, normalizeSelectionRange, } from '@alaarab/ogrid-core';
 import { DataGridLayoutHelper } from './datagrid-layout.service';
 import { DataGridEditingHelper } from './datagrid-editing.service';
 import { DataGridInteractionHelper } from './datagrid-interaction.service';
@@ -596,27 +596,14 @@ export class DataGridStateService {
             const startColDef = visibleCols[norm.startCol];
             const onCellValueChanged = this.wrappedOnCellValueChanged();
             if (startItem && startColDef && onCellValueChanged) {
-                const startValue = getCellValue(startItem, startColDef);
-                this.beginBatch();
-                for (let row = norm.startRow; row <= norm.endRow; row++) {
-                    for (let col = norm.startCol; col <= norm.endCol; col++) {
-                        if (row === fillStart.startRow && col === fillStart.startCol)
-                            continue;
-                        if (row >= items.length || col >= visibleCols.length)
-                            continue;
-                        const item = items[row];
-                        const colDef = visibleCols[col];
-                        const colEditable = colDef.editable === true || (typeof colDef.editable === 'function' && colDef.editable(item));
-                        if (!colEditable)
-                            continue;
-                        const oldValue = getCellValue(item, colDef);
-                        const result = parseValue(startValue, oldValue, item, colDef);
-                        if (!result.valid)
-                            continue;
-                        onCellValueChanged({ item, columnId: colDef.columnId, oldValue, newValue: result.value, rowIndex: row });
+                const fillEvents = applyFillValues(norm, fillStart.startRow, fillStart.startCol, items, visibleCols);
+                if (fillEvents.length > 0) {
+                    this.beginBatch();
+                    for (const event of fillEvents) {
+                        onCellValueChanged(event);
                     }
+                    this.endBatch();
                 }
-                this.endBatch();
             }
             this.interactionHelper.fillDragStart = null;
         };

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

@@ -156,6 +156,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         pinnedRight: boolean;
         minWidth: number;
         width: number;
+        cssWidth: string | undefined;
     }[]>;
     /** Visible columns filtered by column virtualization range (or all if column virt is off). */
     readonly vsVisibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
@@ -178,6 +179,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         pinnedRight: boolean;
         minWidth: number;
         width: number;
+        cssWidth: string | undefined;
     }[]>;
     /** Returns the effective row number column width (from overrides or default). */
     getRowNumberWidth(): number;
@@ -276,6 +278,10 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     onWrapperMouseDown(event: PointerEvent): void;
     onGridKeyDown(event: KeyboardEvent): void;
     onCellMouseDown(event: PointerEvent, rowIndex: number, globalColIndex: number): void;
+    onNonDataSurfacePointerDown(event: Event & {
+        button?: number;
+    }): void;
+    onNonDataSurfaceSelectStart(event: Event): void;
     onCellClick(rowIndex: number, globalColIndex: number): void;
     onCellContextMenu(event: MouseEvent): void;
     onCellDblClick(rowId: RowId, columnId: string): void;

package/dist/types/components/base-popover-cell-editor.component.d.ts

@@ -1,3 +1,4 @@
+import { AfterViewInit } from '@angular/core';
 import type { IColumnDef, ICellEditorProps } from '../types';
 import * as i0 from "@angular/core";
 /**
@@ -16,7 +17,7 @@ export declare const POPOVER_CELL_EDITOR_OVERLAY_STYLES = "\n    :host { display
  * Subclasses only need a @Component decorator with selector, template, and
  * framework-specific .ogrid-popover-anchor CSS styles.
  */
-export declare abstract class BasePopoverCellEditorComponent<T = unknown> {
+export declare abstract class BasePopoverCellEditorComponent<T = unknown> implements AfterViewInit {
     item: T;
     column: IColumnDef<T>;
     rowIndex: number;
@@ -24,11 +25,12 @@ export declare abstract class BasePopoverCellEditorComponent<T = unknown> {
     displayValue: unknown;
     editorProps: ICellEditorProps<T>;
     onCancel: () => void;
-    private anchorRef?;
-    private editorContainerRef?;
+    private set editorContainerRef(value);
     private readonly injector;
     private readonly envInjector;
+    private readonly editorContainerRefSig;
     protected readonly showEditor: import("@angular/core").WritableSignal<boolean>;
+    ngAfterViewInit(): void;
     constructor();
     protected handleOverlayClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasePopoverCellEditorComponent<any>, never>;

package/dist/types/types/dataGridTypes.d.ts

@@ -31,6 +31,7 @@ interface IOGridBaseProps<T> {
     /** Called when user requests autosize for a single column (with measured width). */
     onAutosizeColumn?: (columnId: string, width: number) => void;
     onColumnPinned?: (columnId: string, pinned: 'left' | 'right' | null) => void;
+    pinnedColumns?: Record<string, 'left' | 'right'>;
     editable?: boolean;
     cellSelection?: boolean;
     density?: 'compact' | 'normal' | 'comfortable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.6.1"
+    "@alaarab/ogrid-core": "2.7.0"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",