@alaarab/ogrid-angular-material 2.3.0 → 2.4.1

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, formatCellReference, indexToColumnLetter, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseOGridComponent } from '@alaarab/ogrid-angular';
+import { INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, OGRID_THEME_VARS_CSS, CHECKBOX_COLUMN_WIDTH, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, FormulaRefOverlayComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, BaseColumnHeaderMenuComponent, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, formatCellReference, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseOGridComponent } from '@alaarab/ogrid-angular';
 export { AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, BaseColumnChooserComponent, BaseColumnHeaderFilterComponent, BaseDataGridTableComponent, BaseInlineCellEditorComponent, BaseOGridComponent, BasePaginationControlsComponent, BasePopoverCellEditorComponent, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, ColumnReorderService, DEFAULT_DEBOUNCE_MS, DEFAULT_MIN_COLUMN_WIDTH, DataGridEditingHelper, DataGridInteractionHelper, DataGridLayoutHelper, DataGridStateService, EmptyStateComponent, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GridContextMenuComponent, INLINE_CELL_EDITOR_STYLES, INLINE_CELL_EDITOR_TEMPLATE, MAX_PAGE_BUTTONS, MarchingAntsOverlayComponent, OGRID_THEME_VARS_CSS, OGridLayoutComponent, OGridService, PAGE_SIZE_OPTIONS, PEOPLE_SEARCH_DEBOUNCE_MS, POPOVER_CELL_EDITOR_OVERLAY_STYLES, POPOVER_CELL_EDITOR_TEMPLATE, ROW_NUMBER_COLUMN_WIDTH, SIDEBAR_TRANSITION_MS, SideBarComponent, StatusBarComponent, UndoRedoStack, VirtualScrollService, Z_INDEX, applyCellDeletion, applyCutClear, applyFillValues, applyPastedValues, applyRangeRowSelection, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, calculateDropTarget, clampSelectionToBounds, computeAggregations, computeArrowNavigation, computeAutoScrollSpeed, computeNextSortState, computeRowSelectionState, computeTabNavigation, computeTotalHeight, computeVisibleRange, createDebouncedCallback, createDebouncedSignal, createLatestCallback, currencyParser, dateParser, debounce, deriveFilterOptionsFromData, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellRenderDescriptor, getCellValue, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getPinStateForColumn, getScrollTopForRow, getStatusBarParts, injectGlobalStyles, isFilterConfig, isInSelectionRange, isRowInRange, measureColumnContentWidth, measureRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, reorderColumnArray, resolveCellDisplayContent, resolveCellStyle, toUserLike, triggerCsvDownload, validateColumns, validateRowIds } from '@alaarab/ogrid-angular';
 import { ViewChild, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, signal, computed, effect } from '@angular/core';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
@@ -329,88 +329,8 @@ ColumnHeaderFilterComponent = __decorateClass([
     }
   })
 ], ColumnHeaderFilterComponent);
-var ColumnHeaderMenuComponent = class {
-  constructor() {
-    // Signal-backed inputs so computed() tracks changes reactively
-    this._canPinLeft = signal(true);
-    this._canPinRight = signal(true);
-    this._canUnpin = signal(false);
-    this._currentSort = signal(null);
-    this._isSortable = signal(true);
-    this._isResizable = signal(true);
-    this.handlers = {};
-    this.menuItems = computed(
-      () => getColumnHeaderMenuItems({
-        canPinLeft: this._canPinLeft(),
-        canPinRight: this._canPinRight(),
-        canUnpin: this._canUnpin(),
-        currentSort: this._currentSort(),
-        isSortable: this._isSortable(),
-        isResizable: this._isResizable()
-      })
-    );
-  }
-  set canPinLeft(v) {
-    this._canPinLeft.set(v);
-  }
-  set canPinRight(v) {
-    this._canPinRight.set(v);
-  }
-  set canUnpin(v) {
-    this._canUnpin.set(v);
-  }
-  set currentSort(v) {
-    this._currentSort.set(v);
-  }
-  set isSortable(v) {
-    this._isSortable.set(v);
-  }
-  set isResizable(v) {
-    this._isResizable.set(v);
-  }
-  handleMenuItemClick(itemId) {
-    const h = this.handlers;
-    const actionMap = {
-      pinLeft: h.onPinLeft,
-      pinRight: h.onPinRight,
-      unpin: h.onUnpin,
-      sortAsc: h.onSortAsc,
-      sortDesc: h.onSortDesc,
-      clearSort: h.onClearSort,
-      autosizeThis: h.onAutosizeThis,
-      autosizeAll: h.onAutosizeAll
-    };
-    const action = actionMap[itemId];
-    if (action) {
-      action();
-      h.onClose?.();
-    }
-  }
+var ColumnHeaderMenuComponent = class extends BaseColumnHeaderMenuComponent {
 };
-__decorateClass([
-  Input({ required: true })
-], ColumnHeaderMenuComponent.prototype, "columnId", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "canPinLeft", 1);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "canPinRight", 1);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "canUnpin", 1);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "currentSort", 1);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "isSortable", 1);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "isResizable", 1);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "handlers", 2);
 __decorateClass([
   ViewChild(MatMenuTrigger)
 ], ColumnHeaderMenuComponent.prototype, "menuTrigger", 2);
@@ -507,6 +427,7 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     super();
     this.propsSignal = signal(void 0);
     this.showColumnLetters = computed(() => !!this.getProps()?.showColumnLetters);
+    this.formulaReferences = computed(() => this.getProps()?.formulaReferences);
     this.initBase();
     effect(() => {
       const props = this.getProps();
@@ -537,6 +458,10 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
   getColumnLetter(colIdx) {
     return indexToColumnLetter(colIdx);
   }
+  onResizeRowNumber(event) {
+    event.stopPropagation();
+    this.onResizeStart(event, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
+  }
 };
 __decorateClass([
   Input({ required: true, alias: "props" })
@@ -553,7 +478,7 @@ DataGridTableComponent = __decorateClass([
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
+    imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, FormulaRefOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
     providers: [DataGridStateService, ColumnReorderService, VirtualScrollService],
     template: `
     <div class="ogrid-datagrid-root">
@@ -615,12 +540,17 @@ DataGridTableComponent = __decorateClass([
                         <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" style="width: 48px; min-width: 48px; padding: 0;"></th>
                       }
                       @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th class="ogrid-datagrid-th ogrid-row-number-header" [attr.rowSpan]="headerRows().length > 1 ? 1 : null">
+                        <th class="ogrid-datagrid-th ogrid-row-number-header" [attr.rowSpan]="headerRows().length > 1 ? 1 : null"
+                          [style.width.px]="getRowNumberWidth()"
+                          [style.min-width.px]="getRowNumberWidth()"
+                          [style.max-width.px]="getRowNumberWidth()"
+                        >
                           <div class="ogrid-row-number-header-content">#</div>
+                          <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeRowNumber($event)" (dblclick)="$event.stopPropagation()"></div>
                         </th>
                       }
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" [style.width.px]="50" [style.min-width.px]="50" style="padding: 0;"></th>
+                        <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-datagrid-th" [style.width.px]="getRowNumberWidth()" [style.min-width.px]="getRowNumberWidth()" style="padding: 0;"></th>
                       }
                       @for (cell of row; track cell.columnDef?.columnId ?? $index; let cellIdx = $index) {
                         @if (cell.isGroup) {
@@ -724,7 +654,11 @@ DataGridTableComponent = __decorateClass([
                           </td>
                         }
                         @if (hasRowNumbersCol()) {
-                          <td class="ogrid-datagrid-td ogrid-row-number-cell">
+                          <td class="ogrid-datagrid-td ogrid-row-number-cell"
+                            [style.width.px]="getRowNumberWidth()"
+                            [style.min-width.px]="getRowNumberWidth()"
+                            [style.max-width.px]="getRowNumberWidth()"
+                          >
                             <div class="ogrid-row-number-cell-content">
                               {{ rowNumberOffset() + rowIndex + 1 }}
                             </div>
@@ -792,7 +726,11 @@ DataGridTableComponent = __decorateClass([
                                 [attr.role]="descriptor.canEditAny ? 'button' : null"
                                 [style]="cellStyle ?? undefined"
                               >
-                                {{ content }}
+                                @if (colLayout.col.type === 'boolean') {
+                                  <input type="checkbox" [checked]="!!descriptor.displayValue" disabled style="margin:0;pointer-events:none" [attr.aria-label]="descriptor.displayValue ? 'True' : 'False'" />
+                                } @else {
+                                  {{ content }}
+                                }
                                 @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
                                   <div
                                     class="ogrid-datagrid-fill-handle"
@@ -828,6 +766,14 @@ DataGridTableComponent = __decorateClass([
                 [columnOrder]="propsColumnOrder()"
               ></ogrid-marching-ants-overlay>
 
+              @if (formulaReferences() && formulaReferences()!.length > 0) {
+                <ogrid-formula-ref-overlay
+                  [containerEl]="tableContainerEl()"
+                  [references]="formulaReferences()!"
+                  [colOffset]="colOffset()"
+                />
+              }
+
               @if (showEmptyInGrid() && emptyState()) {
                 <div class="ogrid-datagrid-empty">
                   <div class="ogrid-datagrid-empty__title">No results found</div>
@@ -948,8 +894,7 @@ DataGridTableComponent = __decorateClass([
     }
     .ogrid-datagrid-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }
     .ogrid-row-number-header, .ogrid-row-number-cell {
-      width: ${ROW_NUMBER_COLUMN_WIDTH}px; min-width: ${ROW_NUMBER_COLUMN_WIDTH}px;
-      max-width: ${ROW_NUMBER_COLUMN_WIDTH}px; text-align: center;
+      text-align: center;
       background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); font-weight: 600;
       font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
       position: sticky; left: 0; z-index: 3;
@@ -1337,8 +1282,13 @@ OGridComponent = __decorateClass([
       [hasToolbarBelow]="false"
       [hasPagination]="true"
       [fullScreen]="ogridService.fullScreen()"
-      [showNameBox]="!!ogridService.cellReferences()"
+      [showNameBox]="!!(ogridService.cellReferences() && !ogridService.formulasEnabled())"
       [activeCellRef]="ogridService.activeCellRef()"
+      [formulaBar]="ogridService.formulasEnabled() ? ogridService.formulaBarState() : null"
+      [sheetDefs]="ogridService.sheetDefs()"
+      [activeSheet]="ogridService.activeSheet()"
+      [onSheetChange]="ogridService.onSheetChange()"
+      [onSheetAdd]="ogridService.onSheetAdd()"
     >
       <ng-container toolbarEnd>
         @if (ogridService.columnChooserPlacement() === 'toolbar') {

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

@@ -1,28 +1,5 @@
 import { MatMenuTrigger } from '@angular/material/menu';
-import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-angular';
-/**
- * Column header dropdown menu for pin/unpin, sort, and autosize actions.
- * Uses Angular Material MatMenu.
- *
- * Uses signal-backed @Input setters so that computed() tracks changes
- * (plain @Input properties are not reactive in Angular signals).
- */
-export declare class ColumnHeaderMenuComponent {
-    columnId: string;
-    private readonly _canPinLeft;
-    private readonly _canPinRight;
-    private readonly _canUnpin;
-    private readonly _currentSort;
-    private readonly _isSortable;
-    private readonly _isResizable;
-    set canPinLeft(v: boolean);
-    set canPinRight(v: boolean);
-    set canUnpin(v: boolean);
-    set currentSort(v: 'asc' | 'desc' | null);
-    set isSortable(v: boolean);
-    set isResizable(v: boolean);
-    handlers: Partial<ColumnHeaderMenuHandlers>;
+import { BaseColumnHeaderMenuComponent } from '@alaarab/ogrid-angular';
+export declare class ColumnHeaderMenuComponent extends BaseColumnHeaderMenuComponent {
     menuTrigger?: MatMenuTrigger;
-    readonly menuItems: import("@angular/core").Signal<IColumnHeaderMenuItem[]>;
-    handleMenuItemClick(itemId: string): void;
 }

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

@@ -11,9 +11,11 @@ export declare class DataGridTableComponent<T> extends BaseDataGridTableComponen
     private wrapperRef?;
     private tableContainerRef?;
     readonly showColumnLetters: import("@angular/core").Signal<boolean>;
+    readonly formulaReferences: import("@angular/core").Signal<import("@alaarab/ogrid-core").FormulaReference[] | undefined>;
     constructor();
     protected getProps(): IOGridDataGridProps<T> | undefined;
     protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     getColumnLetter(colIdx: number): string;
+    onResizeRowNumber(event: MouseEvent): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "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",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.3.0"
+    "@alaarab/ogrid-angular": "2.4.1"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",