@alaarab/ogrid-angular-primeng 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, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, getColumnHeaderMenuItems, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, DEFAULT_MIN_COLUMN_WIDTH, formatCellReference, indexToColumnLetter, BaseColumnChooserComponent, BasePaginationControlsComponent } 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, DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, FormulaRefOverlayComponent, OGridService, OGridLayoutComponent, BaseColumnHeaderFilterComponent, BaseColumnHeaderMenuComponent, BaseInlineCellEditorComponent, BasePopoverCellEditorComponent, BaseDataGridTableComponent, DEFAULT_MIN_COLUMN_WIDTH, formatCellReference, ROW_NUMBER_COLUMN_ID, indexToColumnLetter, BaseColumnChooserComponent, BasePaginationControlsComponent, ROW_NUMBER_COLUMN_MIN_WIDTH } 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, inject, DestroyRef, effect, computed, signal } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
@@ -256,47 +256,16 @@ ColumnHeaderFilterComponent = __decorateClass([
   `]
   })
 ], ColumnHeaderFilterComponent);
-var ColumnHeaderMenuComponent = class {
+var ColumnHeaderMenuComponent = class extends BaseColumnHeaderMenuComponent {
   constructor() {
-    this.canPinLeft = true;
-    this.canPinRight = true;
-    this.canUnpin = false;
-    this.currentSort = null;
-    this.isSortable = true;
-    this.isResizable = true;
-    this.handlers = {};
+    super(...arguments);
     this.menuModel = computed(() => {
-      const items = getColumnHeaderMenuItems({
-        canPinLeft: this.canPinLeft,
-        canPinRight: this.canPinRight,
-        canUnpin: this.canUnpin,
-        currentSort: this.currentSort,
-        isSortable: this.isSortable,
-        isResizable: this.isResizable
-      });
-      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 result = [];
-      for (const item of items) {
+      for (const item of this.menuItems()) {
         result.push({
           label: item.label,
           disabled: item.disabled,
-          command: () => {
-            const action = actionMap[item.id];
-            if (action) {
-              action();
-              h.onClose?.();
-            }
-          }
+          command: () => this.handleMenuItemClick(item.id)
         });
         if (item.divider) {
           result.push({ separator: true });
@@ -306,30 +275,6 @@ var ColumnHeaderMenuComponent = class {
     });
   }
 };
-__decorateClass([
-  Input({ required: true })
-], ColumnHeaderMenuComponent.prototype, "columnId", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "canPinLeft", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "canPinRight", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "canUnpin", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "currentSort", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "isSortable", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "isResizable", 2);
-__decorateClass([
-  Input()
-], ColumnHeaderMenuComponent.prototype, "handlers", 2);
 __decorateClass([
   ViewChild("menu")
 ], ColumnHeaderMenuComponent.prototype, "menuRef", 2);
@@ -446,6 +391,7 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     this.showColumnLettersInput = false;
     this.showNameBoxInput = false;
     this.onActiveCellChange = void 0;
+    this.formulaReferencesInput = void 0;
     this.currentPageInput = 1;
     this.pageSizeInput = 25;
     this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
@@ -471,6 +417,7 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     // Bound method reference for template
     this.cancelEditHandler = () => this.cancelEdit();
     this.showColumnLetters = computed(() => !!this.getProps()?.showColumnLetters);
+    this.formulaReferences = computed(() => this.getProps()?.formulaReferences);
     // --- PrimeNG-specific computed signals ---
     this.resolvedAriaLabel = computed(
       () => this.ariaLabelInput ?? (this.ariaLabelledByInput ? void 0 : "Data grid")
@@ -568,10 +515,10 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
     this.resizeStartX = e.clientX;
     this.resizeColumnId = col.columnId;
-    this.resizeStartWidth = this.getColumnWidth(col);
+    this.resizeStartWidth = col.columnId === ROW_NUMBER_COLUMN_ID ? this.getRowNumberWidth() : this.getColumnWidth(col);
     const onMove = (me) => {
       const delta = me.clientX - this.resizeStartX;
-      const minW = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+      const minW = col.columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
       const newWidth = Math.max(minW, this.resizeStartWidth + delta);
       this.primengColumnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
       this.columnSizingVersion.update((v) => v + 1);
@@ -592,6 +539,15 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     window.addEventListener("mousemove", onMove, true);
     window.addEventListener("mouseup", onUp, true);
   }
+  onResizeRowNumber(event) {
+    event.stopPropagation();
+    this.onResizeStartPrimeng(event, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
+  }
+  getRowNumberWidth() {
+    const override = this.primengColumnSizingOverrides()[ROW_NUMBER_COLUMN_ID];
+    if (override) return override;
+    return super.getRowNumberWidth();
+  }
   // --- Build props ---
   buildProps() {
     return {
@@ -640,7 +596,8 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
       onCellError: this.onCellError,
       stickyHeader: this.stickyHeaderInput,
       "aria-label": this.ariaLabelInput,
-      "aria-labelledby": this.ariaLabelledByInput
+      "aria-labelledby": this.ariaLabelledByInput,
+      formulaReferences: this.formulaReferencesInput
     };
   }
   getColumnLetter(colIdx) {
@@ -785,6 +742,9 @@ __decorateClass([
 __decorateClass([
   Input()
 ], DataGridTableComponent.prototype, "onActiveCellChange", 2);
+__decorateClass([
+  Input({ alias: "formulaReferences" })
+], DataGridTableComponent.prototype, "formulaReferencesInput", 2);
 __decorateClass([
   Input({ alias: "currentPage" })
 ], DataGridTableComponent.prototype, "currentPageInput", 2);
@@ -800,6 +760,7 @@ DataGridTableComponent = __decorateClass([
       GridContextMenuComponent,
       MarchingAntsOverlayComponent,
       EmptyStateComponent,
+      FormulaRefOverlayComponent,
       ColumnHeaderFilterComponent,
       ColumnHeaderMenuComponent,
       InlineCellEditorComponent,
@@ -866,8 +827,17 @@ DataGridTableComponent = __decorateClass([
                         <th [attr.rowSpan]="headerRows().length - 1"></th>
                       }
                       @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
-                        <th scope="col" rowSpan="1" class="ogrid-row-number-header">
+                        <th scope="col" rowSpan="1" class="ogrid-row-number-header"
+                          [style.width.px]="getRowNumberWidth()"
+                          [style.min-width.px]="getRowNumberWidth()"
+                          [style.max-width.px]="getRowNumberWidth()"
+                        >
                           #
+                          <div
+                            class="ogrid-resize-handle"
+                            (mousedown)="onResizeRowNumber($event)"
+                            (dblclick)="$event.stopPropagation()"
+                          ></div>
                         </th>
                       }
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
@@ -980,8 +950,11 @@ DataGridTableComponent = __decorateClass([
                           </td>
                         }
                         @if (hasRowNumbersCol()) {
-                          <td class="ogrid-row-number-cell">
-
+                          <td class="ogrid-row-number-cell"
+                            [style.width.px]="getRowNumberWidth()"
+                            [style.min-width.px]="getRowNumberWidth()"
+                            [style.max-width.px]="getRowNumberWidth()"
+                          >
                             {{ rowNumberOffset() + rowIndex + 1 }}
                           </td>
                         }
@@ -1043,7 +1016,11 @@ DataGridTableComponent = __decorateClass([
                                 [style.outline]="descriptor.isActive && !descriptor.isInRange ? '2px solid var(--ogrid-selection, #217346)' : null"
                                 [style.outline-offset]="descriptor.isActive && !descriptor.isInRange ? '-2px' : null"
                               >
-                                <span [style]="resolveCellStyleFn(col, item, descriptor.displayValue)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
+                                @if (col.type === 'boolean') {
+                                  <input type="checkbox" [checked]="!!descriptor.displayValue" disabled style="margin:0;pointer-events:none" [attr.aria-label]="descriptor.displayValue ? 'True' : 'False'" />
+                                } @else {
+                                  <span [style]="resolveCellStyleFn(col, item, descriptor.displayValue)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
+                                }
                                 @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
                                   <div
                                     (mousedown)="onFillHandleMouseDown($event)"
@@ -1079,6 +1056,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-empty-container">
                   <div>
@@ -1188,19 +1173,14 @@ DataGridTableComponent = __decorateClass([
       z-index: 3;
     }
     .ogrid-row-number-header {
-      width: 50px;
-      min-width: 50px;
-      max-width: 50px;
       text-align: center;
       font-weight: 600;
       background: var(--ogrid-header-bg, #f5f5f5);
       border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
       z-index: 3;
+      position: relative;
     }
     .ogrid-row-number-spacer {
-      width: 50px;
-      min-width: 50px;
-      max-width: 50px;
       background: var(--ogrid-header-bg, #f5f5f5);
     }
     .ogrid-column-group-header {
@@ -1240,9 +1220,6 @@ DataGridTableComponent = __decorateClass([
       border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
     .ogrid-row-number-cell {
-      width: 50px;
-      min-width: 50px;
-      max-width: 50px;
       padding: 6px;
       text-align: center;
       font-weight: 600;
@@ -1694,8 +1671,13 @@ OGridComponent = __decorateClass([
       [hasPagination]="true"
       [sideBar]="service.sideBarProps()"
       [fullScreen]="service.fullScreen()"
-      [showNameBox]="!!service.cellReferences()"
+      [showNameBox]="!!(service.cellReferences() && !service.formulasEnabled())"
       [activeCellRef]="service.activeCellRef()"
+      [formulaBar]="service.formulasEnabled() ? service.formulaBarState() : null"
+      [sheetDefs]="service.sheetDefs()"
+      [activeSheet]="service.activeSheet()"
+      [onSheetChange]="service.onSheetChange()"
+      [onSheetAdd]="service.onSheetAdd()"
     >
       <ng-content select="[toolbar]" toolbar></ng-content>
 
@@ -1750,6 +1732,7 @@ OGridComponent = __decorateClass([
         [showColumnLetters]="service.dataGridProps().showColumnLetters ?? false"
         [showNameBox]="service.dataGridProps().showNameBox ?? false"
         [onActiveCellChange]="service.dataGridProps().onActiveCellChange"
+        [formulaReferences]="service.dataGridProps().formulaReferences"
       ></ogrid-primeng-datagrid-table>
 
       <div pagination>

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

@@ -1,19 +1,7 @@
 import type { Menu } from 'primeng/menu';
 import type { MenuItem } from 'primeng/api';
-import { type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-angular';
-/**
- * Column header dropdown menu for pin/unpin, sort, and autosize actions.
- * Uses PrimeNG Menu component.
- */
-export declare class ColumnHeaderMenuComponent {
-    columnId: string;
-    canPinLeft: boolean;
-    canPinRight: boolean;
-    canUnpin: boolean;
-    currentSort: 'asc' | 'desc' | null;
-    isSortable: boolean;
-    isResizable: boolean;
-    handlers: Partial<ColumnHeaderMenuHandlers>;
+import { BaseColumnHeaderMenuComponent } from '@alaarab/ogrid-angular';
+export declare class ColumnHeaderMenuComponent extends BaseColumnHeaderMenuComponent {
     menuRef?: Menu;
     readonly menuModel: import("@angular/core").Signal<MenuItem[]>;
 }

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

@@ -62,6 +62,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     showColumnLettersInput: boolean;
     showNameBoxInput: boolean;
     onActiveCellChange: ((ref: string | null) => void) | undefined;
+    formulaReferencesInput: import('@alaarab/ogrid-core').FormulaReference[] | undefined;
     currentPageInput: number;
     pageSizeInput: number;
     readonly defaultMinWidth = 80;
@@ -85,6 +86,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     private resizeStartWidth;
     readonly cancelEditHandler: () => void;
     readonly showColumnLetters: import("@angular/core").Signal<boolean>;
+    readonly formulaReferences: import("@angular/core").Signal<import("@alaarab/ogrid-core").FormulaReference[] | undefined>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /** Shallow-compare two props objects by their top-level keys. */
@@ -101,6 +103,8 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     onRowClickPrimeng(e: MouseEvent, item: T): void;
     onRowCheckboxChangePrimeng(item: T, checked: boolean, rowIndex: number, _e: Event): void;
     onResizeStartPrimeng(e: MouseEvent, col: IColumnDef<T>): void;
+    onResizeRowNumber(event: MouseEvent): void;
+    getRowNumberWidth(): number;
     private buildProps;
     getColumnLetter(colIdx: number): string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "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.3.0"
+    "@alaarab/ogrid-angular": "2.4.1"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",