@alaarab/ogrid-angular-material 2.4.1 → 2.5.0

package/dist/esm/index.js

@@ -1,36 +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, 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';
-import { MatDividerModule } from '@angular/material/divider';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var ColumnHeaderFilterComponent = class extends BaseColumnHeaderFilterComponent {
-  getHeaderEl() {
-    return this.headerEl;
-  }
-  onDocumentClickWrapper(event) {
-    this.onDocumentClick(event, "ogrid-column-header-filter");
-  }
-};
-__decorateClass([
-  ViewChild("headerEl")
-], ColumnHeaderFilterComponent.prototype, "headerEl", 2);
-ColumnHeaderFilterComponent = __decorateClass([
-  Component({
-    selector: "ogrid-column-header-filter",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: `
+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';import {MatDividerModule}from'@angular/material/divider';var x=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var e=(t,a,r,d)=>{for(var o=d>1?void 0:d?_(a,r):a,u=t.length-1,f;u>=0;u--)(f=t[u])&&(o=(d?f(a,r,o):f(o))||o);return d&&o&&x(a,r,o),o};var n=class extends BaseColumnHeaderFilterComponent{getHeaderEl(){return this.headerEl}onDocumentClickWrapper(a){this.onDocumentClick(a,"ogrid-column-header-filter");}};e([ViewChild("headerEl")],n.prototype,"headerEl",2),n=e([Component({selector:"ogrid-column-header-filter",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
     <div class="ogrid-header-filter" #headerEl>
       <div class="ogrid-header-filter__label">
         <span class="ogrid-header-filter__name" [title]="columnName" data-header-label>
@@ -206,8 +174,7 @@ ColumnHeaderFilterComponent = __decorateClass([
         }
       </div>
     }
-  `,
-    styles: [`
+  `,styles:[`
     :host { display: flex; align-items: center; flex: 1; min-width: 0; position: relative; }
     .ogrid-header-filter { display: flex; align-items: center; width: 100%; min-width: 0; }
     .ogrid-header-filter__label { flex: 1; min-width: 0; overflow: hidden; }
@@ -323,24 +290,7 @@ ColumnHeaderFilterComponent = __decorateClass([
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-header-filter__people-option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-  `],
-    host: {
-      "(document:click)": "onDocumentClickWrapper($event)"
-    }
-  })
-], ColumnHeaderFilterComponent);
-var ColumnHeaderMenuComponent = class extends BaseColumnHeaderMenuComponent {
-};
-__decorateClass([
-  ViewChild(MatMenuTrigger)
-], ColumnHeaderMenuComponent.prototype, "menuTrigger", 2);
-ColumnHeaderMenuComponent = __decorateClass([
-  Component({
-    selector: "column-header-menu",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [MatMenuModule, MatDividerModule],
-    template: `
+  `],host:{"(document:click)":"onDocumentClickWrapper($event)"}})],n);var l=class extends BaseColumnHeaderMenuComponent{};e([ViewChild(MatMenuTrigger)],l.prototype,"menuTrigger",2),l=e([Component({selector:"column-header-menu",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,imports:[MatMenuModule,MatDividerModule],template:`
     <button
       [matMenuTriggerFor]="menu"
       class="column-header-menu-trigger"
@@ -363,8 +313,7 @@ ColumnHeaderMenuComponent = __decorateClass([
         }
       }
     </mat-menu>
-  `,
-    styles: [`
+  `,styles:[`
     :host { flex-shrink: 0; }
     .column-header-menu-trigger {
       width: 24px;
@@ -386,29 +335,7 @@ ColumnHeaderMenuComponent = __decorateClass([
       background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-  `]
-  })
-], ColumnHeaderMenuComponent);
-var InlineCellEditorComponent = class extends BaseInlineCellEditorComponent {
-};
-InlineCellEditorComponent = __decorateClass([
-  Component({
-    selector: "ogrid-mat-inline-cell-editor",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: INLINE_CELL_EDITOR_TEMPLATE,
-    styles: [INLINE_CELL_EDITOR_STYLES]
-  })
-], InlineCellEditorComponent);
-var PopoverCellEditorComponent = class extends BasePopoverCellEditorComponent {
-};
-PopoverCellEditorComponent = __decorateClass([
-  Component({
-    selector: "ogrid-mat-popover-cell-editor",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: POPOVER_CELL_EDITOR_TEMPLATE,
-    styles: [`
+  `]})],l);var s=class extends BaseInlineCellEditorComponent{};s=e([Component({selector:"ogrid-mat-inline-cell-editor",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:INLINE_CELL_EDITOR_TEMPLATE,styles:[INLINE_CELL_EDITOR_STYLES]})],s);var g=class extends BasePopoverCellEditorComponent{};g=e([Component({selector:"ogrid-mat-popover-cell-editor",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:POPOVER_CELL_EDITOR_TEMPLATE,styles:[`
     ${POPOVER_CELL_EDITOR_OVERLAY_STYLES}
     .ogrid-popover-anchor {
       width: 100%; height: 100%; display: flex; align-items: center; min-width: 0;
@@ -417,70 +344,7 @@ PopoverCellEditorComponent = __decorateClass([
       outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px;
       z-index: 2; position: relative;
     }
-  `]
-  })
-], PopoverCellEditorComponent);
-
-// src/datagrid-table/datagrid-table.component.ts
-var DataGridTableComponent = class extends BaseDataGridTableComponent {
-  constructor() {
-    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();
-      const onActiveCellChange = props?.onActiveCellChange;
-      if (!onActiveCellChange) return;
-      const ac = this.activeCell();
-      if (ac) {
-        const colIndex = ac.columnIndex - this.colOffset();
-        const rowNumber = ac.rowIndex + 1;
-        onActiveCellChange(formatCellReference(colIndex, rowNumber));
-      } else {
-        onActiveCellChange(null);
-      }
-    });
-  }
-  set propsInput(value) {
-    this.propsSignal.set(value);
-  }
-  getProps() {
-    return this.propsSignal();
-  }
-  getWrapperRef() {
-    return this.wrapperRef;
-  }
-  getTableContainerRef() {
-    return this.tableContainerRef;
-  }
-  getColumnLetter(colIdx) {
-    return indexToColumnLetter(colIdx);
-  }
-  onResizeRowNumber(event) {
-    event.stopPropagation();
-    this.onResizeStart(event, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
-  }
-};
-__decorateClass([
-  Input({ required: true, alias: "props" })
-], DataGridTableComponent.prototype, "propsInput", 1);
-__decorateClass([
-  ViewChild("wrapperEl")
-], DataGridTableComponent.prototype, "wrapperRef", 2);
-__decorateClass([
-  ViewChild("tableContainerElRef")
-], DataGridTableComponent.prototype, "tableContainerRef", 2);
-DataGridTableComponent = __decorateClass([
-  Component({
-    selector: "ogrid-datagrid-table",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    imports: [ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, FormulaRefOverlayComponent, InlineCellEditorComponent, PopoverCellEditorComponent],
-    providers: [DataGridStateService, ColumnReorderService, VirtualScrollService],
-    template: `
+  `]})],g);var i=class extends BaseDataGridTableComponent{constructor(){super();this.propsSignal=signal(void 0);this.showColumnLetters=computed(()=>!!this.getProps()?.showColumnLetters);this.formulaReferences=computed(()=>this.getProps()?.formulaReferences);this.initBase(),effect(()=>{let d=this.getProps()?.onActiveCellChange;if(!d)return;let o=this.activeCell();if(o){let u=o.columnIndex-this.colOffset(),f=o.rowIndex+1;d(formatCellReference(u,f));}else d(null);});}set propsInput(r){this.propsSignal.set(r);}getProps(){return this.propsSignal()}getWrapperRef(){return this.wrapperRef}getTableContainerRef(){return this.tableContainerRef}getColumnLetter(r){return indexToColumnLetter(r)}onResizeRowNumber(r){r.stopPropagation(),this.onResizeStart(r,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}};e([Input({required:true,alias:"props"})],i.prototype,"propsInput",1),e([ViewChild("wrapperEl")],i.prototype,"wrapperRef",2),e([ViewChild("tableContainerElRef")],i.prototype,"tableContainerRef",2),i=e([Component({selector:"ogrid-datagrid-table",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,encapsulation:ViewEncapsulation.None,imports:[n,l,StatusBarComponent,GridContextMenuComponent,MarchingAntsOverlayComponent,EmptyStateComponent,FormulaRefOverlayComponent,s,g],providers:[DataGridStateService,ColumnReorderService,VirtualScrollService],template:`
     <div class="ogrid-datagrid-root">
       <div
         #wrapperEl
@@ -492,7 +356,7 @@ DataGridTableComponent = __decorateClass([
         role="region"
         [attr.aria-label]="ariaLabel()"
         [attr.aria-labelledby]="ariaLabelledBy()"
-        (mousedown)="onWrapperMouseDown($event)"
+        (pointerdown)="onWrapperMouseDown($event)"
         (keydown)="onGridKeyDown($event)"
         (scroll)="onWrapperScroll($event)"
         (contextmenu)="$event.preventDefault()"
@@ -546,7 +410,7 @@ DataGridTableComponent = __decorateClass([
                           [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>
+                          <div class="ogrid-datagrid-resize-handle" (pointerdown)="onResizeRowNumber($event)" (dblclick)="$event.stopPropagation()"></div>
                         </th>
                       }
                       @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
@@ -579,7 +443,7 @@ DataGridTableComponent = __decorateClass([
                             [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
                             [style.left.px]="pinnedLeft ? getPinnedLeftOffset(col.columnId) : null"
                             [style.right.px]="pinnedRight ? getPinnedRightOffset(col.columnId) : null"
-                            (mousedown)="onHeaderMouseDown(col.columnId, $event)"
+                            (pointerdown)="onHeaderMouseDown(col.columnId, $event)"
                           >
                             <div style="display:flex;align-items:center;gap:4px;">
                               <ogrid-column-header-filter
@@ -613,7 +477,7 @@ DataGridTableComponent = __decorateClass([
                                 [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
                               />
                             </div>
-                            <div class="ogrid-datagrid-resize-handle" (mousedown)="onResizeStart($event, col)" (dblclick)="onResizeDoubleClick($event, col)"></div>
+                            <div class="ogrid-datagrid-resize-handle" (pointerdown)="onResizeStart($event, col)" (dblclick)="onResizeDoubleClick($event, col)"></div>
                           </th>
                         }
                       }
@@ -719,7 +583,7 @@ DataGridTableComponent = __decorateClass([
                                 [attr.data-col-index]="descriptor.globalColIndex"
                                 [attr.data-in-range]="descriptor.isInRange ? 'true' : null"
                                 [attr.tabindex]="descriptor.isActive ? 0 : -1"
-                                (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
+                                (pointerdown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
                                 (click)="onCellClick(rowIndex, descriptor.globalColIndex)"
                                 (contextmenu)="onCellContextMenu($event)"
                                 (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, colLayout.col.columnId) : null"
@@ -734,7 +598,7 @@ DataGridTableComponent = __decorateClass([
                                 @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
                                   <div
                                     class="ogrid-datagrid-fill-handle"
-                                    (mousedown)="onFillHandleMouseDown($event)"
+                                    (pointerdown)="onFillHandleMouseDown($event)"
                                     aria-label="Fill handle"
                                   ></div>
                                 }
@@ -840,8 +704,7 @@ DataGridTableComponent = __decorateClass([
         </div>
       }
     </div>
-  `,
-    styles: [OGRID_THEME_VARS_CSS, `
+  `,styles:[OGRID_THEME_VARS_CSS,`
     :host { display: block; }
     .ogrid-datagrid-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
     .ogrid-datagrid-wrapper {
@@ -959,11 +822,17 @@ DataGridTableComponent = __decorateClass([
       position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
       background: var(--ogrid-selection-color, #217346);
       border: 1px solid var(--ogrid-bg, #ffffff); border-radius: 1px;
-      cursor: crosshair; pointer-events: auto; z-index: 3;
+      cursor: crosshair; pointer-events: auto; touch-action: none; z-index: 3;
+    }
+    @media (pointer: coarse) {
+      .ogrid-datagrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }
     }
     .ogrid-datagrid-resize-handle {
       position: absolute; top: 0; right: -3px; bottom: 0; width: 8px;
-      cursor: col-resize; user-select: none;
+      cursor: col-resize; user-select: none; touch-action: none;
+    }
+    @media (pointer: coarse) {
+      .ogrid-datagrid-resize-handle { width: 16px; right: -8px; }
     }
     .ogrid-datagrid-resize-handle::after {
       content: ''; position: absolute; top: 4px; right: 3px; bottom: 4px; width: 2px;
@@ -1032,23 +901,7 @@ DataGridTableComponent = __decorateClass([
     .mat-mdc-menu-item.mat-mdc-menu-item .mat-mdc-menu-item-text {
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-  `]
-  })
-], DataGridTableComponent);
-var ColumnChooserComponent = class extends BaseColumnChooserComponent {
-  onDocumentClick(event) {
-    const el = event.target;
-    if (!el.closest("ogrid-column-chooser")) {
-      this.isOpen.set(false);
-    }
-  }
-};
-ColumnChooserComponent = __decorateClass([
-  Component({
-    selector: "ogrid-column-chooser",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: `
+  `]})],i);var c=class extends BaseColumnChooserComponent{onDocumentClick(a){a.target.closest("ogrid-column-chooser")||this.isOpen.set(false);}};c=e([Component({selector:"ogrid-column-chooser",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
     <div class="ogrid-column-chooser">
       <button
         class="ogrid-column-chooser__trigger"
@@ -1086,8 +939,7 @@ ColumnChooserComponent = __decorateClass([
         </div>
       }
     </div>
-  `,
-    styles: [`
+  `,styles:[`
     :host { display: inline-flex; position: relative; }
     .ogrid-column-chooser { position: relative; }
     .ogrid-column-chooser__trigger {
@@ -1137,20 +989,7 @@ ColumnChooserComponent = __decorateClass([
     .ogrid-column-chooser__btn--primary:hover {
       opacity: 0.9;
     }
-  `],
-    host: {
-      "(document:click)": "onDocumentClick($event)"
-    }
-  })
-], ColumnChooserComponent);
-var PaginationControlsComponent = class extends BasePaginationControlsComponent {
-};
-PaginationControlsComponent = __decorateClass([
-  Component({
-    selector: "ogrid-pagination-controls",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: `
+  `],host:{"(document:click)":"onDocumentClick($event)"}})],c);var p=class extends BasePaginationControlsComponent{};p=e([Component({selector:"ogrid-pagination-controls",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
     @if (vm(); as vm) {
       <nav class="ogrid-pagination" role="navigation" aria-label="Pagination">
         <span class="ogrid-pagination__info">
@@ -1224,8 +1063,7 @@ PaginationControlsComponent = __decorateClass([
         </span>
       </nav>
     }
-  `,
-    styles: [`
+  `,styles:[`
     :host { display: block; }
     .ogrid-pagination {
       display: flex; align-items: center; justify-content: space-between;
@@ -1254,27 +1092,13 @@ PaginationControlsComponent = __decorateClass([
       font-size: 14px; margin-left: 8px;
       background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-  `]
-  })
-], PaginationControlsComponent);
-
-// src/ogrid/ogrid.component.ts
-var OGridComponent = class extends BaseOGridComponent {
-};
-OGridComponent = __decorateClass([
-  Component({
-    selector: "ogrid",
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-      OGridLayoutComponent,
-      DataGridTableComponent,
-      ColumnChooserComponent,
-      PaginationControlsComponent
-    ],
-    providers: [OGridService],
-    styles: [`:host { display: block; height: 100%; }`],
-    template: `
+    @media (max-width: 576px) {
+      .ogrid-pagination { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px; font-size: 12px; }
+      .ogrid-pagination__pages { order: -1; justify-content: center; }
+      .ogrid-pagination__info { text-align: center; font-size: 11px; }
+      .ogrid-pagination__size { font-size: 11px; justify-content: center; }
+    }
+  `]})],p);var h=class extends BaseOGridComponent{};h=e([Component({selector:"ogrid",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,imports:[OGridLayoutComponent,i,c,p],providers:[OGridService],styles:[":host { display: block; height: 100%; }"],template:`
     <ogrid-layout
       [className]="ogridService.className()"
       [sideBar]="ogridService.sideBarProps()"
@@ -1314,8 +1138,4 @@ OGridComponent = __decorateClass([
         />
       </ng-container>
     </ogrid-layout>
-  `
-  })
-], OGridComponent);
-
-export { ColumnChooserComponent, ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, DataGridTableComponent, InlineCellEditorComponent, OGridComponent, PaginationControlsComponent, PopoverCellEditorComponent };
+  `})],h);export{c as ColumnChooserComponent,n as ColumnHeaderFilterComponent,l as ColumnHeaderMenuComponent,i as DataGridTableComponent,s as InlineCellEditorComponent,h as OGridComponent,p as PaginationControlsComponent,g as PopoverCellEditorComponent};

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

@@ -17,5 +17,5 @@ export declare class DataGridTableComponent<T> extends BaseDataGridTableComponen
     protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     getColumnLetter(colIdx: number): string;
-    onResizeRowNumber(event: MouseEvent): void;
+    onResizeRowNumber(event: PointerEvent): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "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.4.1"
+    "@alaarab/ogrid-angular": "2.5.0"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",