@alaarab/ogrid-angular-material 2.0.2 → 2.0.3

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

@@ -5,115 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, input, computed, effect, ChangeDetectionStrategy, viewChild, } from '@angular/core';
-import { DataGridStateService, buildHeaderRows, getCellValue, isInSelectionRange, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-angular';
+import { DataGridStateService, ColumnReorderService, VirtualScrollService, buildHeaderRows, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
 import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
-function getHeaderFilterConfig(col, input) {
-    const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
-    const filterType = (filterable?.type ?? 'none');
-    const filterField = filterable?.filterField ?? col.columnId;
-    const sortable = col.sortable !== false;
-    const filterValue = input.filters[filterField];
-    const base = {
-        columnKey: col.columnId,
-        columnName: col.name,
-        filterType,
-        isSorted: input.sortBy === col.columnId,
-        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
-        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
-    };
-    if (filterType === 'text') {
-        return {
-            ...base,
-            textValue: filterValue?.type === 'text' ? filterValue.value : '',
-            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
-        };
-    }
-    if (filterType === 'people') {
-        return {
-            ...base,
-            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
-            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
-            peopleSearch: input.peopleSearch,
-        };
-    }
-    if (filterType === 'multiSelect') {
-        return {
-            ...base,
-            options: input.filterOptions[filterField] ?? [],
-            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
-            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
-            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
-        };
-    }
-    if (filterType === 'date') {
-        return {
-            ...base,
-            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
-            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
-        };
-    }
-    return base;
-}
-function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
-    const rowId = input.getRowId(item);
-    const globalColIndex = colIdx + input.colOffset;
-    const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
-    const canEditInline = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor !== 'function';
-    const canEditPopup = input.editable !== false && !!colEditable && !!input.onCellValueChanged && typeof col.cellEditor === 'function';
-    const canEditAny = canEditInline || canEditPopup;
-    const isEditing = input.editingCell?.rowId === rowId && input.editingCell?.columnId === col.columnId;
-    const isActive = input.activeCell?.rowIndex === rowIndex && input.activeCell?.columnIndex === globalColIndex;
-    const inRange = input.selectionRange != null && isInSelectionRange(input.selectionRange, rowIndex, colIdx);
-    const isInCutRange = input.cutRange != null && isInSelectionRange(input.cutRange, rowIndex, colIdx);
-    const isSelectionEndCell = !input.isDragging && input.copyRange == null && input.cutRange == null &&
-        input.selectionRange != null && rowIndex === input.selectionRange.endRow && colIdx === input.selectionRange.endCol;
-    let mode = 'display';
-    let editorType;
-    const value = getCellValue(item, col);
-    if (isEditing && canEditInline) {
-        mode = 'editing-inline';
-        if (col.cellEditor === 'text' || col.cellEditor === 'select' || col.cellEditor === 'checkbox' || col.cellEditor === 'richSelect' || col.cellEditor === 'date') {
-            editorType = col.cellEditor;
-        }
-        else if (col.type === 'date')
-            editorType = 'date';
-        else if (col.type === 'boolean')
-            editorType = 'checkbox';
-        else
-            editorType = 'text';
-    }
-    else if (isEditing && canEditPopup) {
-        mode = 'editing-popover';
-    }
-    return {
-        mode, editorType, value,
-        isActive, isInRange: inRange, isInCutRange, isSelectionEndCell,
-        canEditAny, globalColIndex, rowId, rowIndex, displayValue: value,
-    };
-}
-function resolveCellDisplayContent(col, item, displayValue) {
-    if (col.renderCell && typeof col.renderCell === 'function') {
-        const result = col.renderCell(item);
-        return result != null ? String(result) : '';
-    }
-    if (col.valueFormatter)
-        return String(col.valueFormatter(displayValue, item) ?? '');
-    if (displayValue == null)
-        return '';
-    if (col.type === 'date') {
-        const d = new Date(String(displayValue));
-        if (!Number.isNaN(d.getTime()))
-            return d.toLocaleDateString();
-    }
-    if (col.type === 'boolean')
-        return displayValue ? 'True' : 'False';
-    return String(displayValue);
-}
-function resolveCellStyle(col, item) {
-    if (!col.cellStyle)
-        return undefined;
-    return typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
-}
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
  * Standalone component — this is the workhorse of the grid.
@@ -124,6 +17,8 @@ let DataGridTableComponent = class DataGridTableComponent {
         this.wrapperRef = viewChild('wrapperEl');
         this.tableContainerRef = viewChild('tableContainerEl');
         this.stateService = new DataGridStateService();
+        this.columnReorderService = new ColumnReorderService();
+        this.virtualScrollService = new VirtualScrollService();
         this.lastMouseShift = false;
         // --- Delegated state ---
         this.state = computed(() => this.stateService.getState());
@@ -211,8 +106,28 @@ let DataGridTableComponent = class DataGridTableComponent {
         });
         effect(() => {
             const el = this.wrapperRef()?.nativeElement;
-            if (el)
+            if (el) {
                 this.stateService.wrapperEl.set(el);
+                this.columnReorderService.wrapperEl.set(el);
+            }
+        });
+        // Wire column reorder service inputs
+        effect(() => {
+            const p = this.propsInput();
+            if (p) {
+                const cols = this.visibleCols();
+                this.columnReorderService.columns.set(cols);
+                this.columnReorderService.columnOrder.set(p.columnOrder);
+                this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
+                this.columnReorderService.enabled.set(!!p.onColumnOrderChange);
+            }
+        });
+        // Wire virtual scroll service inputs
+        effect(() => {
+            const p = this.propsInput();
+            if (p) {
+                this.virtualScrollService.totalRows.set(p.items.length);
+            }
         });
     }
     // --- Helper methods ---
@@ -351,6 +266,9 @@ let DataGridTableComponent = class DataGridTableComponent {
     onRedo() {
         this.state().interaction.onRedo?.();
     }
+    onHeaderMouseDown(columnId, event) {
+        this.columnReorderService.handleHeaderMouseDown(columnId, event);
+    }
 };
 DataGridTableComponent = __decorate([
     Component({
@@ -416,9 +334,12 @@ DataGridTableComponent = __decorate([
                             [class.ogrid-datagrid-th--pinned-left]="col.pinned === 'left' || (isFreezeCol && colIdx === 0)"
                             [class.ogrid-datagrid-th--pinned-right]="col.pinned === 'right'"
                             [attr.rowSpan]="headerRows().length > 1 ? headerRows().length - rowIdx : null"
+                            [attr.data-column-id]="col.columnId"
                             [style.minWidth.px]="col.minWidth ?? 80"
                             [style.width.px]="colW"
                             [style.maxWidth.px]="colW"
+                            [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
+                            (mousedown)="onHeaderMouseDown(col.columnId, $event)"
                           >
                             <ogrid-column-header-filter
                               [columnKey]="col.columnId"
@@ -586,6 +507,10 @@ DataGridTableComponent = __decorate([
           </div>
         </div>
 
+        @if (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
+          <div class="ogrid-datagrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
+        }
+
         @if (menuPosition()) {
           <div
             class="ogrid-datagrid-context-menu-overlay"
@@ -744,6 +669,11 @@ DataGridTableComponent = __decorate([
       border-radius: 50%; animation: ogrid-spin 0.8s linear infinite;
     }
     @keyframes ogrid-spin { to { transform: rotate(360deg); } }
+    .ogrid-datagrid-drop-indicator {
+      position: absolute; top: 0; bottom: 0; width: 3px;
+      background: var(--ogrid-primary, #217346);
+      pointer-events: none; z-index: 100; transition: left 0.05s;
+    }
     .ogrid-datagrid-context-menu-overlay {
       position: fixed; inset: 0; z-index: 1000;
     }

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

@@ -1,38 +1,5 @@
-import type { IOGridDataGridProps, IColumnDef, RowId, ColumnFilterType, IDateFilterValue, UserLike, IFilters, FilterValue } from '@alaarab/ogrid-angular';
-type CellRenderMode = 'editing-inline' | 'editing-popover' | 'display';
-interface CellRenderDescriptor {
-    mode: CellRenderMode;
-    editorType?: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
-    value?: unknown;
-    isActive: boolean;
-    isInRange: boolean;
-    isInCutRange: boolean;
-    isSelectionEndCell: boolean;
-    canEditAny: boolean;
-    globalColIndex: number;
-    rowId: RowId;
-    rowIndex: number;
-    displayValue?: unknown;
-}
-interface HeaderFilterConfig {
-    columnKey: string;
-    columnName: string;
-    filterType: ColumnFilterType;
-    isSorted: boolean;
-    isSortedDescending: boolean;
-    onSort: (() => void) | undefined;
-    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;
-}
+import { ColumnReorderService, VirtualScrollService } from '@alaarab/ogrid-angular';
+import type { IOGridDataGridProps, IColumnDef, RowId, CellRenderDescriptor, HeaderFilterConfig } from '@alaarab/ogrid-angular';
 /**
  * DataGridTable component using native HTML table with Material Design-inspired styling.
  * Standalone component — this is the workhorse of the grid.
@@ -42,6 +9,8 @@ export declare class DataGridTableComponent<T> {
     private readonly wrapperRef;
     private readonly tableContainerRef;
     private readonly stateService;
+    readonly columnReorderService: ColumnReorderService<T>;
+    readonly virtualScrollService: VirtualScrollService;
     private lastMouseShift;
     constructor();
     private readonly state;
@@ -95,11 +64,11 @@ export declare class DataGridTableComponent<T> {
         sortBy?: string;
         sortDirection: "asc" | "desc";
         onColumnSort: (columnKey: string) => void;
-        filters: IFilters;
-        onFilterChange: (key: string, value: FilterValue | undefined) => void;
+        filters: import("@alaarab/ogrid-angular").IFilters;
+        onFilterChange: (key: string, value: import("@alaarab/ogrid-angular").FilterValue | undefined) => void;
         filterOptions: Record<string, string[]>;
         loadingFilterOptions: Record<string, boolean>;
-        peopleSearch?: (query: string) => Promise<UserLike[]>;
+        peopleSearch?: (query: string) => Promise<import("@alaarab/ogrid-angular").UserLike[]>;
     }>;
     readonly cellDescriptorInput: import("@angular/core").Signal<{
         editingCell: {
@@ -157,5 +126,5 @@ export declare class DataGridTableComponent<T> {
     handleSelectAllCells(): void;
     onUndo(): void;
     onRedo(): void;
+    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "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",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.2"
+    "@alaarab/ogrid-angular": "2.0.3"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",