@alaarab/ogrid-angular-primeng 2.4.2 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/esm/index.js CHANGED
@@ -1,74 +1,4 @@
1
- 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';
2
- 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';
3
- import { ViewChild, Component, ChangeDetectionStrategy, Input, ViewEncapsulation, inject, DestroyRef, effect, computed, signal } from '@angular/core';
4
- import { ButtonModule } from 'primeng/button';
5
- import { MenuModule } from 'primeng/menu';
6
-
7
- var __defProp = Object.defineProperty;
8
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
9
- var __decorateClass = (decorators, target, key, kind) => {
10
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
11
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
12
- if (decorator = decorators[i])
13
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
14
- if (kind && result) __defProp(target, key, result);
15
- return result;
16
- };
17
- var ColumnHeaderFilterComponent = class extends BaseColumnHeaderFilterComponent {
18
- constructor() {
19
- super();
20
- this.destroyRef = inject(DestroyRef);
21
- this.clickOutsideHandler = (e) => {
22
- const trigger = this.filterTrigger?.nativeElement;
23
- const panel = this.filterPanel?.nativeElement;
24
- if (trigger && !trigger.contains(e.target) && (!panel || !panel.contains(e.target))) {
25
- this.isFilterOpen.set(false);
26
- }
27
- };
28
- effect(() => {
29
- if (this.isFilterOpen()) {
30
- this.tempTextValue.set(this.textValue ?? "");
31
- this.searchText.set("");
32
- const sv = this.selectedValues;
33
- this.tempSelected.set(new Set(sv ?? []));
34
- const dv = this.dateValue;
35
- this.tempDateFrom.set(dv?.from ?? "");
36
- this.tempDateTo.set(dv?.to ?? "");
37
- document.addEventListener("mousedown", this.clickOutsideHandler, true);
38
- } else {
39
- document.removeEventListener("mousedown", this.clickOutsideHandler, true);
40
- }
41
- });
42
- this.destroyRef.onDestroy(() => {
43
- document.removeEventListener("mousedown", this.clickOutsideHandler, true);
44
- });
45
- }
46
- getHeaderEl() {
47
- return this.filterTrigger;
48
- }
49
- handleSortClick() {
50
- this.onSort?.();
51
- }
52
- toggleFilter() {
53
- this.isFilterOpen.update((v) => !v);
54
- }
55
- // Adapter methods for template compatibility
56
- handleSelectAllOptions() {
57
- this.handleSelectAllFiltered();
58
- }
59
- };
60
- __decorateClass([
61
- ViewChild("filterTrigger")
62
- ], ColumnHeaderFilterComponent.prototype, "filterTrigger", 2);
63
- __decorateClass([
64
- ViewChild("filterPanel")
65
- ], ColumnHeaderFilterComponent.prototype, "filterPanel", 2);
66
- ColumnHeaderFilterComponent = __decorateClass([
67
- Component({
68
- selector: "ogrid-primeng-column-header-filter",
69
- standalone: true,
70
- changeDetection: ChangeDetectionStrategy.OnPush,
71
- template: `
1
+ 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';import {MenuModule}from'primeng/menu';var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var e=(d,l,o,r)=>{for(var n=r>1?void 0:r?O(l,o):l,a=d.length-1,s;a>=0;a--)(s=d[a])&&(n=(r?s(l,o,n):s(n))||n);return r&&n&&E(l,o,n),n};var p=class extends BaseColumnHeaderFilterComponent{constructor(){super();this.destroyRef=inject(DestroyRef);this.clickOutsideHandler=o=>{let r=this.filterTrigger?.nativeElement,n=this.filterPanel?.nativeElement;r&&!r.contains(o.target)&&(!n||!n.contains(o.target))&&this.isFilterOpen.set(false);};effect(()=>{if(this.isFilterOpen()){this.tempTextValue.set(this.textValue??""),this.searchText.set("");let o=this.selectedValues;this.tempSelected.set(new Set(o??[]));let r=this.dateValue;this.tempDateFrom.set(r?.from??""),this.tempDateTo.set(r?.to??""),document.addEventListener("mousedown",this.clickOutsideHandler,true);}else document.removeEventListener("mousedown",this.clickOutsideHandler,true);}),this.destroyRef.onDestroy(()=>{document.removeEventListener("mousedown",this.clickOutsideHandler,true);});}getHeaderEl(){return this.filterTrigger}handleSortClick(){this.onSort?.();}toggleFilter(){this.isFilterOpen.update(o=>!o);}handleSelectAllOptions(){this.handleSelectAllFiltered();}};e([ViewChild("filterTrigger")],p.prototype,"filterTrigger",2),e([ViewChild("filterPanel")],p.prototype,"filterPanel",2),p=e([Component({selector:"ogrid-primeng-column-header-filter",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
72
2
  <div style="display:flex;align-items:center;flex:1;min-width:0;gap:4px">
73
3
  <div style="flex:1;min-width:0;overflow:hidden">
74
4
  <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" [title]="columnName" data-header-label>
@@ -245,46 +175,14 @@ ColumnHeaderFilterComponent = __decorateClass([
245
175
  }
246
176
  </div>
247
177
  </div>
248
- `,
249
- styles: [`
178
+ `,styles:[`
250
179
  :host {
251
180
  display: flex;
252
181
  position: relative;
253
182
  flex: 1;
254
183
  min-width: 0;
255
184
  }
256
- `]
257
- })
258
- ], ColumnHeaderFilterComponent);
259
- var ColumnHeaderMenuComponent = class extends BaseColumnHeaderMenuComponent {
260
- constructor() {
261
- super(...arguments);
262
- this.menuModel = computed(() => {
263
- const result = [];
264
- for (const item of this.menuItems()) {
265
- result.push({
266
- label: item.label,
267
- disabled: item.disabled,
268
- command: () => this.handleMenuItemClick(item.id)
269
- });
270
- if (item.divider) {
271
- result.push({ separator: true });
272
- }
273
- }
274
- return result;
275
- });
276
- }
277
- };
278
- __decorateClass([
279
- ViewChild("menu")
280
- ], ColumnHeaderMenuComponent.prototype, "menuRef", 2);
281
- ColumnHeaderMenuComponent = __decorateClass([
282
- Component({
283
- selector: "column-header-menu",
284
- standalone: true,
285
- imports: [ButtonModule, MenuModule],
286
- changeDetection: ChangeDetectionStrategy.OnPush,
287
- template: `
185
+ `]})],p);var c=class extends BaseColumnHeaderMenuComponent{constructor(){super(...arguments);this.menuModel=computed(()=>{let o=[];for(let r of this.menuItems())o.push({label:r.label,disabled:r.disabled,command:()=>this.handleMenuItemClick(r.id)}),r.divider&&o.push({separator:true});return o});}};e([ViewChild("menu")],c.prototype,"menuRef",2),c=e([Component({selector:"column-header-menu",standalone:true,imports:[ButtonModule,MenuModule],changeDetection:ChangeDetectionStrategy.OnPush,template:`
288
186
  <button
289
187
  pButton
290
188
  type="button"
@@ -300,8 +198,7 @@ ColumnHeaderMenuComponent = __decorateClass([
300
198
  [popup]="true"
301
199
  appendTo="body"
302
200
  ></p-menu>
303
- `,
304
- styles: [`
201
+ `,styles:[`
305
202
  .column-header-menu-trigger {
306
203
  padding: 0.25rem;
307
204
  min-width: 24px;
@@ -317,459 +214,14 @@ ColumnHeaderMenuComponent = __decorateClass([
317
214
  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
318
215
  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
319
216
  }
320
- `]
321
- })
322
- ], ColumnHeaderMenuComponent);
323
- var InlineCellEditorComponent = class extends BaseInlineCellEditorComponent {
324
- };
325
- InlineCellEditorComponent = __decorateClass([
326
- Component({
327
- selector: "ogrid-primeng-inline-cell-editor",
328
- standalone: true,
329
- changeDetection: ChangeDetectionStrategy.OnPush,
330
- template: INLINE_CELL_EDITOR_TEMPLATE,
331
- styles: [INLINE_CELL_EDITOR_STYLES]
332
- })
333
- ], InlineCellEditorComponent);
334
- var PopoverCellEditorComponent = class extends BasePopoverCellEditorComponent {
335
- };
336
- PopoverCellEditorComponent = __decorateClass([
337
- Component({
338
- selector: "ogrid-primeng-popover-cell-editor",
339
- standalone: true,
340
- changeDetection: ChangeDetectionStrategy.OnPush,
341
- template: POPOVER_CELL_EDITOR_TEMPLATE,
342
- styles: [`
217
+ `]})],c);var g=class extends BaseInlineCellEditorComponent{};g=e([Component({selector:"ogrid-primeng-inline-cell-editor",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:INLINE_CELL_EDITOR_TEMPLATE,styles:[INLINE_CELL_EDITOR_STYLES]})],g);var u=class extends BasePopoverCellEditorComponent{};u=e([Component({selector:"ogrid-primeng-popover-cell-editor",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:POPOVER_CELL_EDITOR_TEMPLATE,styles:[`
343
218
  ${POPOVER_CELL_EDITOR_OVERLAY_STYLES}
344
219
  .ogrid-popover-anchor {
345
220
  padding: 6px 10px; min-height: 20px; cursor: default; overflow: hidden;
346
221
  text-overflow: ellipsis; white-space: nowrap;
347
222
  outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -2px;
348
223
  }
349
- `]
350
- })
351
- ], PopoverCellEditorComponent);
352
-
353
- // src/datagrid-table/datagrid-table.component.ts
354
- var DataGridTableComponent = class extends BaseDataGridTableComponent {
355
- constructor() {
356
- super();
357
- this.sortBy = void 0;
358
- this.sortDirection = "asc";
359
- this.columnOrder = void 0;
360
- this.onColumnOrderChange = void 0;
361
- this.onColumnResized = void 0;
362
- this.onColumnPinned = void 0;
363
- this.pinnedColumnsInput = void 0;
364
- this.initialColumnWidths = void 0;
365
- this.layoutMode = "fill";
366
- this.suppressHorizontalScroll = void 0;
367
- this.stickyHeaderInput = void 0;
368
- this.columnReorder = void 0;
369
- this.isLoadingInput = false;
370
- this.loadingMessageInput = "Loading\u2026";
371
- this.editable = void 0;
372
- this.cellSelection = void 0;
373
- this.onCellValueChanged = void 0;
374
- this.onUndoInput = void 0;
375
- this.onRedoInput = void 0;
376
- this.canUndoInput = void 0;
377
- this.canRedoInput = void 0;
378
- this.rowSelectionMode = "none";
379
- this.selectedRows = void 0;
380
- this.onSelectionChange = void 0;
381
- this.statusBar = void 0;
382
- this.filterOptions = {};
383
- this.loadingFilterOptions = {};
384
- this.peopleSearch = void 0;
385
- this.getUserByEmail = void 0;
386
- this.emptyStateInput = void 0;
387
- this.onCellError = void 0;
388
- this.ariaLabelInput = void 0;
389
- this.ariaLabelledByInput = void 0;
390
- this.showRowNumbers = false;
391
- this.showColumnLettersInput = false;
392
- this.showNameBoxInput = false;
393
- this.onActiveCellChange = void 0;
394
- this.formulaReferencesInput = void 0;
395
- this.currentPageInput = 1;
396
- this.pageSizeInput = 25;
397
- this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
398
- this.statusBarClasses = {
399
- statusBar: "ogrid-status-bar",
400
- statusBarItem: "ogrid-status-bar-item",
401
- statusBarLabel: "ogrid-status-bar-label",
402
- statusBarValue: "ogrid-status-bar-value"
403
- };
404
- this.contextMenuClasses = {
405
- contextMenu: "ogrid-context-menu",
406
- contextMenuItem: "ogrid-context-menu-item",
407
- contextMenuItemLabel: "ogrid-context-menu-item-label",
408
- contextMenuItemShortcut: "ogrid-context-menu-item-shortcut",
409
- contextMenuDivider: "ogrid-context-menu-divider"
410
- };
411
- // PrimeNG uses flat number overrides for column sizing
412
- this.primengColumnSizingOverrides = signal({});
413
- this.propsSignal = signal(void 0);
414
- this.resizeStartX = 0;
415
- this.resizeColumnId = "";
416
- this.resizeStartWidth = 0;
417
- // Bound method reference for template
418
- this.cancelEditHandler = () => this.cancelEdit();
419
- this.showColumnLetters = computed(() => !!this.getProps()?.showColumnLetters);
420
- this.formulaReferences = computed(() => this.getProps()?.formulaReferences);
421
- // --- PrimeNG-specific computed signals ---
422
- this.resolvedAriaLabel = computed(
423
- () => this.ariaLabelInput ?? (this.ariaLabelledByInput ? void 0 : "Data grid")
424
- );
425
- this.tableWidthStyle = computed(() => {
426
- if (this.showEmptyInGrid()) return "100%";
427
- if (this.allowOverflowX()) return "fit-content";
428
- if (this.layoutMode === "content") return "fit-content";
429
- return "100%";
430
- });
431
- this.tableMinWidthStyle = computed(() => {
432
- if (this.showEmptyInGrid()) return "100%";
433
- if (this.allowOverflowX()) return "max-content";
434
- if (this.layoutMode === "content") return "max-content";
435
- return "100%";
436
- });
437
- this.initBase();
438
- effect(() => {
439
- const props = this.getProps();
440
- const onActiveCellChange = props?.onActiveCellChange;
441
- if (!onActiveCellChange) return;
442
- const ac = this.activeCell();
443
- if (ac) {
444
- const colIndex = ac.columnIndex - this.colOffset();
445
- const rowNumber = ac.rowIndex + 1;
446
- onActiveCellChange(formatCellReference(colIndex, rowNumber));
447
- } else {
448
- onActiveCellChange(null);
449
- }
450
- });
451
- }
452
- ngOnChanges(changes) {
453
- if (changes["initialColumnWidths"]) {
454
- const iw = this.initialColumnWidths;
455
- if (iw) {
456
- this.primengColumnSizingOverrides.set({ ...iw });
457
- }
458
- }
459
- const next = this.buildProps();
460
- const prev = this.propsSignal();
461
- if (!prev || !this.shallowEqual(prev, next)) {
462
- this.propsSignal.set(next);
463
- }
464
- }
465
- /** Shallow-compare two props objects by their top-level keys. */
466
- shallowEqual(a, b) {
467
- const aObj = a;
468
- const bObj = b;
469
- const keysA = Object.keys(aObj);
470
- const keysB = Object.keys(bObj);
471
- if (keysA.length !== keysB.length) return false;
472
- for (const key of keysA) {
473
- if (aObj[key] !== bObj[key]) return false;
474
- }
475
- return true;
476
- }
477
- // --- Abstract method implementations ---
478
- getProps() {
479
- return this.propsSignal();
480
- }
481
- getWrapperRef() {
482
- return this.wrapperRef;
483
- }
484
- getTableContainerRef() {
485
- return this.tableContainerRefEl;
486
- }
487
- // --- Column width override (PrimeNG uses flat number instead of { widthPx }) ---
488
- getColumnWidth(col) {
489
- const override = this.primengColumnSizingOverrides()[col.columnId];
490
- if (override) return override;
491
- return col.idealWidth ?? col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
492
- }
493
- // --- PrimeNG-specific helpers ---
494
- trackByRowId(_index, item) {
495
- return this.getRowIdInput(item);
496
- }
497
- // --- PrimeNG-specific event handlers ---
498
- onSelectAllChangePrimeng(checked) {
499
- this.state().rowSelection.handleSelectAll(checked);
500
- }
501
- onRowClickPrimeng(e, item) {
502
- if (this.rowSelectionMode !== "single") return;
503
- const rowId = this.getRowIdInput(item);
504
- const ids = this.selectedRowIds();
505
- this.state().rowSelection.updateSelection(ids.has(rowId) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([rowId]));
506
- }
507
- onRowCheckboxChangePrimeng(item, checked, rowIndex, _e) {
508
- const rowId = this.getRowIdInput(item);
509
- this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
510
- }
511
- onResizeStartPrimeng(e, col) {
512
- e.preventDefault();
513
- this.state().interaction.setActiveCell?.(null);
514
- this.state().interaction.setSelectionRange?.(null);
515
- this.getWrapperRef()?.nativeElement.focus({ preventScroll: true });
516
- this.resizeStartX = e.clientX;
517
- this.resizeColumnId = col.columnId;
518
- this.resizeStartWidth = col.columnId === ROW_NUMBER_COLUMN_ID ? this.getRowNumberWidth() : this.getColumnWidth(col);
519
- const onMove = (me) => {
520
- const delta = me.clientX - this.resizeStartX;
521
- const minW = col.columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
522
- const newWidth = Math.max(minW, this.resizeStartWidth + delta);
523
- this.primengColumnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
524
- this.columnSizingVersion.update((v) => v + 1);
525
- };
526
- const onUp = () => {
527
- window.removeEventListener("mousemove", onMove, true);
528
- window.removeEventListener("mouseup", onUp, true);
529
- const finalWidth = this.primengColumnSizingOverrides()[this.resizeColumnId];
530
- if (finalWidth) {
531
- this.onColumnResized?.(this.resizeColumnId, finalWidth);
532
- const overrides = {};
533
- for (const [id, w] of Object.entries(this.primengColumnSizingOverrides())) {
534
- overrides[id] = { widthPx: w };
535
- }
536
- this.state().layout.setColumnSizingOverrides(overrides);
537
- }
538
- };
539
- window.addEventListener("mousemove", onMove, true);
540
- window.addEventListener("mouseup", onUp, true);
541
- }
542
- onResizeRowNumber(event) {
543
- event.stopPropagation();
544
- this.onResizeStartPrimeng(event, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
545
- }
546
- getRowNumberWidth() {
547
- const override = this.primengColumnSizingOverrides()[ROW_NUMBER_COLUMN_ID];
548
- if (override) return override;
549
- return super.getRowNumberWidth();
550
- }
551
- // --- Build props ---
552
- buildProps() {
553
- return {
554
- items: this.itemsInput,
555
- columns: this.columns,
556
- getRowId: this.getRowIdInput,
557
- sortBy: this.sortBy,
558
- sortDirection: this.sortDirection,
559
- onColumnSort: this.onColumnSort,
560
- visibleColumns: this.visibleColumns,
561
- columnOrder: this.columnOrder,
562
- onColumnOrderChange: this.onColumnOrderChange,
563
- onColumnResized: this.onColumnResized,
564
- onColumnPinned: this.onColumnPinned,
565
- pinnedColumns: this.pinnedColumnsInput,
566
- initialColumnWidths: this.initialColumnWidths,
567
- layoutMode: this.layoutMode,
568
- suppressHorizontalScroll: this.suppressHorizontalScroll,
569
- columnReorder: this.columnReorder,
570
- isLoading: this.isLoadingInput,
571
- loadingMessage: this.loadingMessageInput,
572
- editable: this.editable,
573
- cellSelection: this.cellSelection,
574
- onCellValueChanged: this.onCellValueChanged,
575
- onUndo: this.onUndoInput,
576
- onRedo: this.onRedoInput,
577
- canUndo: this.canUndoInput,
578
- canRedo: this.canRedoInput,
579
- rowSelection: this.rowSelectionMode,
580
- selectedRows: this.selectedRows,
581
- onSelectionChange: this.onSelectionChange,
582
- showRowNumbers: this.showRowNumbers,
583
- showColumnLetters: this.showColumnLettersInput,
584
- showNameBox: this.showNameBoxInput,
585
- onActiveCellChange: this.onActiveCellChange,
586
- currentPage: this.currentPageInput,
587
- pageSize: this.pageSizeInput,
588
- statusBar: this.statusBar,
589
- filters: this.filters,
590
- onFilterChange: this.onFilterChange,
591
- filterOptions: this.filterOptions,
592
- loadingFilterOptions: this.loadingFilterOptions,
593
- peopleSearch: this.peopleSearch,
594
- getUserByEmail: this.getUserByEmail,
595
- emptyState: this.emptyStateInput,
596
- onCellError: this.onCellError,
597
- stickyHeader: this.stickyHeaderInput,
598
- "aria-label": this.ariaLabelInput,
599
- "aria-labelledby": this.ariaLabelledByInput,
600
- formulaReferences: this.formulaReferencesInput
601
- };
602
- }
603
- getColumnLetter(colIdx) {
604
- return indexToColumnLetter(colIdx);
605
- }
606
- };
607
- __decorateClass([
608
- ViewChild("wrapper")
609
- ], DataGridTableComponent.prototype, "wrapperRef", 2);
610
- __decorateClass([
611
- ViewChild("tableContainer")
612
- ], DataGridTableComponent.prototype, "tableContainerRefEl", 2);
613
- __decorateClass([
614
- Input({ required: true, alias: "items" })
615
- ], DataGridTableComponent.prototype, "itemsInput", 2);
616
- __decorateClass([
617
- Input({ required: true })
618
- ], DataGridTableComponent.prototype, "columns", 2);
619
- __decorateClass([
620
- Input({ required: true, alias: "getRowId" })
621
- ], DataGridTableComponent.prototype, "getRowIdInput", 2);
622
- __decorateClass([
623
- Input()
624
- ], DataGridTableComponent.prototype, "sortBy", 2);
625
- __decorateClass([
626
- Input()
627
- ], DataGridTableComponent.prototype, "sortDirection", 2);
628
- __decorateClass([
629
- Input({ required: true })
630
- ], DataGridTableComponent.prototype, "onColumnSort", 2);
631
- __decorateClass([
632
- Input({ required: true })
633
- ], DataGridTableComponent.prototype, "visibleColumns", 2);
634
- __decorateClass([
635
- Input()
636
- ], DataGridTableComponent.prototype, "columnOrder", 2);
637
- __decorateClass([
638
- Input()
639
- ], DataGridTableComponent.prototype, "onColumnOrderChange", 2);
640
- __decorateClass([
641
- Input()
642
- ], DataGridTableComponent.prototype, "onColumnResized", 2);
643
- __decorateClass([
644
- Input()
645
- ], DataGridTableComponent.prototype, "onColumnPinned", 2);
646
- __decorateClass([
647
- Input({ alias: "pinnedColumns" })
648
- ], DataGridTableComponent.prototype, "pinnedColumnsInput", 2);
649
- __decorateClass([
650
- Input()
651
- ], DataGridTableComponent.prototype, "initialColumnWidths", 2);
652
- __decorateClass([
653
- Input()
654
- ], DataGridTableComponent.prototype, "layoutMode", 2);
655
- __decorateClass([
656
- Input()
657
- ], DataGridTableComponent.prototype, "suppressHorizontalScroll", 2);
658
- __decorateClass([
659
- Input()
660
- ], DataGridTableComponent.prototype, "stickyHeaderInput", 2);
661
- __decorateClass([
662
- Input()
663
- ], DataGridTableComponent.prototype, "columnReorder", 2);
664
- __decorateClass([
665
- Input({ alias: "isLoading" })
666
- ], DataGridTableComponent.prototype, "isLoadingInput", 2);
667
- __decorateClass([
668
- Input({ alias: "loadingMessage" })
669
- ], DataGridTableComponent.prototype, "loadingMessageInput", 2);
670
- __decorateClass([
671
- Input()
672
- ], DataGridTableComponent.prototype, "editable", 2);
673
- __decorateClass([
674
- Input()
675
- ], DataGridTableComponent.prototype, "cellSelection", 2);
676
- __decorateClass([
677
- Input()
678
- ], DataGridTableComponent.prototype, "onCellValueChanged", 2);
679
- __decorateClass([
680
- Input({ alias: "onUndo" })
681
- ], DataGridTableComponent.prototype, "onUndoInput", 2);
682
- __decorateClass([
683
- Input({ alias: "onRedo" })
684
- ], DataGridTableComponent.prototype, "onRedoInput", 2);
685
- __decorateClass([
686
- Input({ alias: "canUndo" })
687
- ], DataGridTableComponent.prototype, "canUndoInput", 2);
688
- __decorateClass([
689
- Input({ alias: "canRedo" })
690
- ], DataGridTableComponent.prototype, "canRedoInput", 2);
691
- __decorateClass([
692
- Input({ alias: "rowSelection" })
693
- ], DataGridTableComponent.prototype, "rowSelectionMode", 2);
694
- __decorateClass([
695
- Input()
696
- ], DataGridTableComponent.prototype, "selectedRows", 2);
697
- __decorateClass([
698
- Input()
699
- ], DataGridTableComponent.prototype, "onSelectionChange", 2);
700
- __decorateClass([
701
- Input()
702
- ], DataGridTableComponent.prototype, "statusBar", 2);
703
- __decorateClass([
704
- Input({ required: true })
705
- ], DataGridTableComponent.prototype, "filters", 2);
706
- __decorateClass([
707
- Input({ required: true })
708
- ], DataGridTableComponent.prototype, "onFilterChange", 2);
709
- __decorateClass([
710
- Input()
711
- ], DataGridTableComponent.prototype, "filterOptions", 2);
712
- __decorateClass([
713
- Input()
714
- ], DataGridTableComponent.prototype, "loadingFilterOptions", 2);
715
- __decorateClass([
716
- Input()
717
- ], DataGridTableComponent.prototype, "peopleSearch", 2);
718
- __decorateClass([
719
- Input()
720
- ], DataGridTableComponent.prototype, "getUserByEmail", 2);
721
- __decorateClass([
722
- Input({ alias: "emptyState" })
723
- ], DataGridTableComponent.prototype, "emptyStateInput", 2);
724
- __decorateClass([
725
- Input()
726
- ], DataGridTableComponent.prototype, "onCellError", 2);
727
- __decorateClass([
728
- Input({ alias: "aria-label" })
729
- ], DataGridTableComponent.prototype, "ariaLabelInput", 2);
730
- __decorateClass([
731
- Input({ alias: "aria-labelledby" })
732
- ], DataGridTableComponent.prototype, "ariaLabelledByInput", 2);
733
- __decorateClass([
734
- Input()
735
- ], DataGridTableComponent.prototype, "showRowNumbers", 2);
736
- __decorateClass([
737
- Input({ alias: "showColumnLetters" })
738
- ], DataGridTableComponent.prototype, "showColumnLettersInput", 2);
739
- __decorateClass([
740
- Input({ alias: "showNameBox" })
741
- ], DataGridTableComponent.prototype, "showNameBoxInput", 2);
742
- __decorateClass([
743
- Input()
744
- ], DataGridTableComponent.prototype, "onActiveCellChange", 2);
745
- __decorateClass([
746
- Input({ alias: "formulaReferences" })
747
- ], DataGridTableComponent.prototype, "formulaReferencesInput", 2);
748
- __decorateClass([
749
- Input({ alias: "currentPage" })
750
- ], DataGridTableComponent.prototype, "currentPageInput", 2);
751
- __decorateClass([
752
- Input({ alias: "pageSize" })
753
- ], DataGridTableComponent.prototype, "pageSizeInput", 2);
754
- DataGridTableComponent = __decorateClass([
755
- Component({
756
- selector: "ogrid-primeng-datagrid-table",
757
- standalone: true,
758
- imports: [
759
- StatusBarComponent,
760
- GridContextMenuComponent,
761
- MarchingAntsOverlayComponent,
762
- EmptyStateComponent,
763
- FormulaRefOverlayComponent,
764
- ColumnHeaderFilterComponent,
765
- ColumnHeaderMenuComponent,
766
- InlineCellEditorComponent,
767
- PopoverCellEditorComponent
768
- ],
769
- changeDetection: ChangeDetectionStrategy.OnPush,
770
- encapsulation: ViewEncapsulation.None,
771
- providers: [DataGridStateService, ColumnReorderService, VirtualScrollService],
772
- template: `
224
+ `]})],u);var t=class extends BaseDataGridTableComponent{constructor(){super();this.sortBy=void 0;this.sortDirection="asc";this.columnOrder=void 0;this.onColumnOrderChange=void 0;this.onColumnResized=void 0;this.onColumnPinned=void 0;this.pinnedColumnsInput=void 0;this.initialColumnWidths=void 0;this.layoutMode="fill";this.suppressHorizontalScroll=void 0;this.stickyHeaderInput=void 0;this.columnReorder=void 0;this.isLoadingInput=false;this.loadingMessageInput="Loading\u2026";this.editable=void 0;this.cellSelection=void 0;this.onCellValueChanged=void 0;this.onUndoInput=void 0;this.onRedoInput=void 0;this.canUndoInput=void 0;this.canRedoInput=void 0;this.rowSelectionMode="none";this.selectedRows=void 0;this.onSelectionChange=void 0;this.statusBar=void 0;this.filterOptions={};this.loadingFilterOptions={};this.peopleSearch=void 0;this.getUserByEmail=void 0;this.emptyStateInput=void 0;this.onCellError=void 0;this.ariaLabelInput=void 0;this.ariaLabelledByInput=void 0;this.showRowNumbers=false;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;this.statusBarClasses={statusBar:"ogrid-status-bar",statusBarItem:"ogrid-status-bar-item",statusBarLabel:"ogrid-status-bar-label",statusBarValue:"ogrid-status-bar-value"};this.contextMenuClasses={contextMenu:"ogrid-context-menu",contextMenuItem:"ogrid-context-menu-item",contextMenuItemLabel:"ogrid-context-menu-item-label",contextMenuItemShortcut:"ogrid-context-menu-item-shortcut",contextMenuDivider:"ogrid-context-menu-divider"};this.primengColumnSizingOverrides=signal({});this.propsSignal=signal(void 0);this.resizeStartX=0;this.resizeColumnId="";this.resizeStartWidth=0;this.cancelEditHandler=()=>this.cancelEdit();this.showColumnLetters=computed(()=>!!this.getProps()?.showColumnLetters);this.formulaReferences=computed(()=>this.getProps()?.formulaReferences);this.resolvedAriaLabel=computed(()=>this.ariaLabelInput??(this.ariaLabelledByInput?void 0:"Data grid"));this.tableWidthStyle=computed(()=>this.showEmptyInGrid()?"100%":this.allowOverflowX()||this.layoutMode==="content"?"fit-content":"100%");this.tableMinWidthStyle=computed(()=>this.showEmptyInGrid()?"100%":this.allowOverflowX()||this.layoutMode==="content"?"max-content":"100%");this.initBase(),effect(()=>{let r=this.getProps()?.onActiveCellChange;if(!r)return;let n=this.activeCell();if(n){let a=n.columnIndex-this.colOffset(),s=n.rowIndex+1;r(formatCellReference(a,s));}else r(null);});}ngOnChanges(o){if(o.initialColumnWidths){let a=this.initialColumnWidths;a&&this.primengColumnSizingOverrides.set({...a});}let r=this.buildProps(),n=this.propsSignal();(!n||!this.shallowEqual(n,r))&&this.propsSignal.set(r);}shallowEqual(o,r){let n=o,a=r,s=Object.keys(n),f=Object.keys(a);if(s.length!==f.length)return false;for(let b of s)if(n[b]!==a[b])return false;return true}getProps(){return this.propsSignal()}getWrapperRef(){return this.wrapperRef}getTableContainerRef(){return this.tableContainerRefEl}getColumnWidth(o){let r=this.primengColumnSizingOverrides()[o.columnId];return r||(o.idealWidth??o.defaultWidth??o.minWidth??DEFAULT_MIN_COLUMN_WIDTH)}trackByRowId(o,r){return this.getRowIdInput(r)}onSelectAllChangePrimeng(o){this.state().rowSelection.handleSelectAll(o);}onRowClickPrimeng(o,r){if(this.rowSelectionMode!=="single")return;let n=this.getRowIdInput(r),a=this.selectedRowIds();this.state().rowSelection.updateSelection(a.has(n)?new Set:new Set([n]));}onRowCheckboxChangePrimeng(o,r,n,a){let s=this.getRowIdInput(o);this.state().rowSelection.handleRowCheckboxChange(s,r,n,this.lastMouseShift);}onResizeStartPrimeng(o,r){o.preventDefault(),this.state().interaction.setActiveCell?.(null),this.state().interaction.setSelectionRange?.(null),this.getWrapperRef()?.nativeElement.focus({preventScroll:true}),this.resizeStartX=o.clientX,this.resizeColumnId=r.columnId,this.resizeStartWidth=r.columnId===ROW_NUMBER_COLUMN_ID?this.getRowNumberWidth():this.getColumnWidth(r);let n=s=>{let f=s.clientX-this.resizeStartX,b=r.columnId===ROW_NUMBER_COLUMN_ID?ROW_NUMBER_COLUMN_MIN_WIDTH:r.minWidth??DEFAULT_MIN_COLUMN_WIDTH,C=Math.max(b,this.resizeStartWidth+f);this.primengColumnSizingOverrides.update(w=>({...w,[this.resizeColumnId]:C})),this.columnSizingVersion.update(w=>w+1);},a=()=>{window.removeEventListener("pointermove",n,true),window.removeEventListener("pointerup",a,true);let s=this.primengColumnSizingOverrides()[this.resizeColumnId];if(s){this.onColumnResized?.(this.resizeColumnId,s);let f={};for(let[b,C]of Object.entries(this.primengColumnSizingOverrides()))f[b]={widthPx:C};this.state().layout.setColumnSizingOverrides(f);}};window.addEventListener("pointermove",n,true),window.addEventListener("pointerup",a,true);}onResizeRowNumber(o){o.stopPropagation(),this.onResizeStartPrimeng(o,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}getRowNumberWidth(){let o=this.primengColumnSizingOverrides()[ROW_NUMBER_COLUMN_ID];return o||super.getRowNumberWidth()}buildProps(){return {items:this.itemsInput,columns:this.columns,getRowId:this.getRowIdInput,sortBy:this.sortBy,sortDirection:this.sortDirection,onColumnSort:this.onColumnSort,visibleColumns:this.visibleColumns,columnOrder:this.columnOrder,onColumnOrderChange:this.onColumnOrderChange,onColumnResized:this.onColumnResized,onColumnPinned:this.onColumnPinned,pinnedColumns:this.pinnedColumnsInput,initialColumnWidths:this.initialColumnWidths,layoutMode:this.layoutMode,suppressHorizontalScroll:this.suppressHorizontalScroll,columnReorder:this.columnReorder,isLoading:this.isLoadingInput,loadingMessage:this.loadingMessageInput,editable:this.editable,cellSelection:this.cellSelection,onCellValueChanged:this.onCellValueChanged,onUndo:this.onUndoInput,onRedo:this.onRedoInput,canUndo:this.canUndoInput,canRedo:this.canRedoInput,rowSelection:this.rowSelectionMode,selectedRows:this.selectedRows,onSelectionChange:this.onSelectionChange,showRowNumbers:this.showRowNumbers,showColumnLetters:this.showColumnLettersInput,showNameBox:this.showNameBoxInput,onActiveCellChange:this.onActiveCellChange,currentPage:this.currentPageInput,pageSize:this.pageSizeInput,statusBar:this.statusBar,filters:this.filters,onFilterChange:this.onFilterChange,filterOptions:this.filterOptions,loadingFilterOptions:this.loadingFilterOptions,peopleSearch:this.peopleSearch,getUserByEmail:this.getUserByEmail,emptyState:this.emptyStateInput,onCellError:this.onCellError,stickyHeader:this.stickyHeaderInput,"aria-label":this.ariaLabelInput,"aria-labelledby":this.ariaLabelledByInput,formulaReferences:this.formulaReferencesInput}}getColumnLetter(o){return indexToColumnLetter(o)}};e([ViewChild("wrapper")],t.prototype,"wrapperRef",2),e([ViewChild("tableContainer")],t.prototype,"tableContainerRefEl",2),e([Input({required:true,alias:"items"})],t.prototype,"itemsInput",2),e([Input({required:true})],t.prototype,"columns",2),e([Input({required:true,alias:"getRowId"})],t.prototype,"getRowIdInput",2),e([Input()],t.prototype,"sortBy",2),e([Input()],t.prototype,"sortDirection",2),e([Input({required:true})],t.prototype,"onColumnSort",2),e([Input({required:true})],t.prototype,"visibleColumns",2),e([Input()],t.prototype,"columnOrder",2),e([Input()],t.prototype,"onColumnOrderChange",2),e([Input()],t.prototype,"onColumnResized",2),e([Input()],t.prototype,"onColumnPinned",2),e([Input({alias:"pinnedColumns"})],t.prototype,"pinnedColumnsInput",2),e([Input()],t.prototype,"initialColumnWidths",2),e([Input()],t.prototype,"layoutMode",2),e([Input()],t.prototype,"suppressHorizontalScroll",2),e([Input()],t.prototype,"stickyHeaderInput",2),e([Input()],t.prototype,"columnReorder",2),e([Input({alias:"isLoading"})],t.prototype,"isLoadingInput",2),e([Input({alias:"loadingMessage"})],t.prototype,"loadingMessageInput",2),e([Input()],t.prototype,"editable",2),e([Input()],t.prototype,"cellSelection",2),e([Input()],t.prototype,"onCellValueChanged",2),e([Input({alias:"onUndo"})],t.prototype,"onUndoInput",2),e([Input({alias:"onRedo"})],t.prototype,"onRedoInput",2),e([Input({alias:"canUndo"})],t.prototype,"canUndoInput",2),e([Input({alias:"canRedo"})],t.prototype,"canRedoInput",2),e([Input({alias:"rowSelection"})],t.prototype,"rowSelectionMode",2),e([Input()],t.prototype,"selectedRows",2),e([Input()],t.prototype,"onSelectionChange",2),e([Input()],t.prototype,"statusBar",2),e([Input({required:true})],t.prototype,"filters",2),e([Input({required:true})],t.prototype,"onFilterChange",2),e([Input()],t.prototype,"filterOptions",2),e([Input()],t.prototype,"loadingFilterOptions",2),e([Input()],t.prototype,"peopleSearch",2),e([Input()],t.prototype,"getUserByEmail",2),e([Input({alias:"emptyState"})],t.prototype,"emptyStateInput",2),e([Input()],t.prototype,"onCellError",2),e([Input({alias:"aria-label"})],t.prototype,"ariaLabelInput",2),e([Input({alias:"aria-labelledby"})],t.prototype,"ariaLabelledByInput",2),e([Input()],t.prototype,"showRowNumbers",2),e([Input({alias:"showColumnLetters"})],t.prototype,"showColumnLettersInput",2),e([Input({alias:"showNameBox"})],t.prototype,"showNameBoxInput",2),e([Input()],t.prototype,"onActiveCellChange",2),e([Input({alias:"formulaReferences"})],t.prototype,"formulaReferencesInput",2),e([Input({alias:"currentPage"})],t.prototype,"currentPageInput",2),e([Input({alias:"pageSize"})],t.prototype,"pageSizeInput",2),t=e([Component({selector:"ogrid-primeng-datagrid-table",standalone:true,imports:[StatusBarComponent,GridContextMenuComponent,MarchingAntsOverlayComponent,EmptyStateComponent,FormulaRefOverlayComponent,p,c,g,u],changeDetection:ChangeDetectionStrategy.OnPush,encapsulation:ViewEncapsulation.None,providers:[DataGridStateService,ColumnReorderService,VirtualScrollService],template:`
773
225
  <div class="ogrid-root">
774
226
  <div
775
227
  #wrapper
@@ -785,7 +237,7 @@ DataGridTableComponent = __decorateClass([
785
237
  [attr.data-has-selection]="rowSelectionMode !== 'none' ? 'true' : null"
786
238
  (contextmenu)="$event.preventDefault()"
787
239
  (keydown)="onGridKeyDown($event)"
788
- (mousedown)="onWrapperMouseDown($event)"
240
+ (pointerdown)="onWrapperMouseDown($event)"
789
241
  (scroll)="onWrapperScroll($event)"
790
242
  [style.--data-table-column-count]="state().layout.totalColCount"
791
243
  [style.--ogrid-row-height]="rowHeightCssVar()"
@@ -835,7 +287,7 @@ DataGridTableComponent = __decorateClass([
835
287
  #
836
288
  <div
837
289
  class="ogrid-resize-handle"
838
- (mousedown)="onResizeRowNumber($event)"
290
+ (pointerdown)="onResizeRowNumber($event)"
839
291
  (dblclick)="$event.stopPropagation()"
840
292
  ></div>
841
293
  </th>
@@ -872,7 +324,7 @@ DataGridTableComponent = __decorateClass([
872
324
  [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
873
325
  [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
874
326
  [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
875
- (mousedown)="onHeaderMouseDown(col.columnId, $event)"
327
+ (pointerdown)="onHeaderMouseDown(col.columnId, $event)"
876
328
  >
877
329
  <div class="ogrid-header-content">
878
330
  <ogrid-primeng-column-header-filter
@@ -908,7 +360,7 @@ DataGridTableComponent = __decorateClass([
908
360
  </div>
909
361
  <div
910
362
  class="ogrid-resize-handle"
911
- (mousedown)="onResizeStartPrimeng($event, col)"
363
+ (pointerdown)="onResizeStartPrimeng($event, col)"
912
364
  (dblclick)="onResizeDoubleClick($event, col)"
913
365
  [attr.aria-label]="'Resize ' + col.name"
914
366
  ></div>
@@ -1006,7 +458,7 @@ DataGridTableComponent = __decorateClass([
1006
458
  [attr.data-active-cell]="descriptor.isActive ? 'true' : null"
1007
459
  [attr.data-in-range]="descriptor.isInRange ? 'true' : null"
1008
460
  [attr.tabindex]="descriptor.isActive ? 0 : -1"
1009
- (mousedown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
461
+ (pointerdown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
1010
462
  (click)="onCellClick(rowIndex, descriptor.globalColIndex)"
1011
463
  (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, col.columnId) : null"
1012
464
  (contextmenu)="onCellContextMenu($event)"
@@ -1023,7 +475,7 @@ DataGridTableComponent = __decorateClass([
1023
475
  }
1024
476
  @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
1025
477
  <div
1026
- (mousedown)="onFillHandleMouseDown($event)"
478
+ (pointerdown)="onFillHandleMouseDown($event)"
1027
479
  class="ogrid-fill-handle"
1028
480
  aria-label="Fill handle"
1029
481
  ></div>
@@ -1125,8 +577,7 @@ DataGridTableComponent = __decorateClass([
1125
577
  </div>
1126
578
  }
1127
579
  </div>
1128
- `,
1129
- styles: [OGRID_THEME_VARS_CSS, `
580
+ `,styles:[OGRID_THEME_VARS_CSS,`
1130
581
  :host { display: block; }
1131
582
  .ogrid-root {
1132
583
  position: relative;
@@ -1210,6 +661,10 @@ DataGridTableComponent = __decorateClass([
1210
661
  bottom: 0;
1211
662
  width: 4px;
1212
663
  cursor: col-resize;
664
+ touch-action: none;
665
+ }
666
+ @media (pointer: coarse) {
667
+ .ogrid-resize-handle { width: 16px; right: -6px; }
1213
668
  }
1214
669
  .ogrid-checkbox-cell {
1215
670
  width: 48px;
@@ -1258,8 +713,12 @@ DataGridTableComponent = __decorateClass([
1258
713
  height: 7px;
1259
714
  background: var(--ogrid-selection, #217346);
1260
715
  cursor: crosshair;
716
+ touch-action: none;
1261
717
  z-index: 2;
1262
718
  }
719
+ @media (pointer: coarse) {
720
+ .ogrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }
721
+ }
1263
722
  .ogrid-empty-container {
1264
723
  display: flex;
1265
724
  align-items: center;
@@ -1441,21 +900,7 @@ DataGridTableComponent = __decorateClass([
1441
900
  user-select: none;
1442
901
  font-variant-numeric: tabular-nums;
1443
902
  }
1444
- `]
1445
- })
1446
- ], DataGridTableComponent);
1447
- var ColumnChooserComponent = class extends BaseColumnChooserComponent {
1448
- // PrimeNG uses 'open' instead of 'isOpen'
1449
- get open() {
1450
- return this.isOpen;
1451
- }
1452
- };
1453
- ColumnChooserComponent = __decorateClass([
1454
- Component({
1455
- selector: "ogrid-primeng-column-chooser",
1456
- standalone: true,
1457
- changeDetection: ChangeDetectionStrategy.OnPush,
1458
- template: `
903
+ `]})],t);var m=class extends BaseColumnChooserComponent{get open(){return this.isOpen}};m=e([Component({selector:"ogrid-primeng-column-chooser",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
1459
904
  <div style="position:relative;display:inline-block">
1460
905
  <button
1461
906
  type="button"
@@ -1505,24 +950,14 @@ ColumnChooserComponent = __decorateClass([
1505
950
  </div>
1506
951
  }
1507
952
  </div>
1508
- `
1509
- })
1510
- ], ColumnChooserComponent);
1511
- var PaginationControlsComponent = class extends BasePaginationControlsComponent {
1512
- };
1513
- PaginationControlsComponent = __decorateClass([
1514
- Component({
1515
- selector: "ogrid-primeng-pagination-controls",
1516
- standalone: true,
1517
- changeDetection: ChangeDetectionStrategy.OnPush,
1518
- template: `
953
+ `})],m);var h=class extends BasePaginationControlsComponent{};h=e([Component({selector:"ogrid-primeng-pagination-controls",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
1519
954
  @if (vm()) {
1520
- <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ogrid-fg, #242424)">
1521
- <div>
955
+ <div class="ogrid-pagination" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ogrid-fg, #242424)">
956
+ <div class="ogrid-pagination__info">
1522
957
  Showing {{ vm()!.startItem }} to {{ vm()!.endItem }} of {{ totalCount.toLocaleString() }} {{ labelPlural() }}
1523
958
  </div>
1524
959
 
1525
- <div style="display:flex;align-items:center;gap:4px" role="navigation" aria-label="Pagination">
960
+ <div class="ogrid-pagination__pages" style="display:flex;align-items:center;gap:4px" role="navigation" aria-label="Pagination">
1526
961
  <button
1527
962
  type="button"
1528
963
  class="p-button p-button-text p-button-sm"
@@ -1592,7 +1027,7 @@ PaginationControlsComponent = __decorateClass([
1592
1027
  >&raquo;</button>
1593
1028
  </div>
1594
1029
 
1595
- <div style="display:flex;align-items:center;gap:6px">
1030
+ <div class="ogrid-pagination__size" style="display:flex;align-items:center;gap:6px">
1596
1031
  <span style="font-size:12px">Rows</span>
1597
1032
  <select
1598
1033
  [value]="'' + pageSize"
@@ -1607,63 +1042,15 @@ PaginationControlsComponent = __decorateClass([
1607
1042
  </div>
1608
1043
  </div>
1609
1044
  }
1610
- `
1611
- })
1612
- ], PaginationControlsComponent);
1613
-
1614
- // src/ogrid/ogrid.component.ts
1615
- var OGridComponent = class {
1616
- constructor() {
1617
- this.service = inject(OGridService);
1618
- this.propsSignal = signal(void 0);
1619
- // Stable callback references (avoid re-creating every template eval)
1620
- this.onColumnSortFn = (columnKey, direction) => this.service.handleSort(columnKey, direction);
1621
- this.onColumnResizedFn = (columnId, width) => this.service.handleColumnResized(columnId, width);
1622
- this.onColumnPinnedFn = (columnId, pinned) => this.service.handleColumnPinned(columnId, pinned);
1623
- this.onSelectionChangeFn = (event) => this.service.handleSelectionChange(event);
1624
- this.onFilterChangeFn = (key, value) => this.service.handleFilterChange(key, value);
1625
- this.clearAllFiltersFn = () => this.service.setFilters({});
1626
- this.emptyStateComputed = computed(() => ({
1627
- hasActiveFilters: this.service.hasActiveFilters(),
1628
- onClearAll: this.clearAllFiltersFn,
1629
- message: this.service.emptyState()?.message,
1630
- render: this.service.emptyState()?.render
1631
- }));
1632
- effect(() => {
1633
- const p = this.propsSignal();
1634
- if (p) this.service.configure(p);
1635
- });
1636
- }
1637
- set props(value) {
1638
- this.propsSignal.set(value);
1639
- }
1640
- get showToolbar() {
1641
- return this.service.columnChooserPlacement() === "toolbar" || this.service.toolbar() != null || this.service.fullScreen();
1642
- }
1643
- get emptyStateObj() {
1644
- return this.emptyStateComputed();
1645
- }
1646
- onPageSizeChange(size) {
1647
- this.service.setPageSize(size);
1648
- }
1649
- };
1650
- __decorateClass([
1651
- Input({ required: true })
1652
- ], OGridComponent.prototype, "props", 1);
1653
- OGridComponent = __decorateClass([
1654
- Component({
1655
- selector: "ogrid-primeng",
1656
- standalone: true,
1657
- imports: [
1658
- OGridLayoutComponent,
1659
- DataGridTableComponent,
1660
- ColumnChooserComponent,
1661
- PaginationControlsComponent
1662
- ],
1663
- changeDetection: ChangeDetectionStrategy.OnPush,
1664
- providers: [OGridService],
1665
- styles: [`:host { display: block; height: 100%; }`],
1666
- template: `
1045
+ `,styles:[`
1046
+ :host { display: block; }
1047
+ @media (max-width: 576px) {
1048
+ .ogrid-pagination { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px; font-size: 12px; }
1049
+ .ogrid-pagination__pages { order: -1; justify-content: center; }
1050
+ .ogrid-pagination__info { text-align: center; font-size: 11px; }
1051
+ .ogrid-pagination__size { font-size: 11px; justify-content: center; }
1052
+ }
1053
+ `]})],h);var v=class{constructor(){this.service=inject(OGridService);this.propsSignal=signal(void 0);this.onColumnSortFn=(l,o)=>this.service.handleSort(l,o);this.onColumnResizedFn=(l,o)=>this.service.handleColumnResized(l,o);this.onColumnPinnedFn=(l,o)=>this.service.handleColumnPinned(l,o);this.onSelectionChangeFn=l=>this.service.handleSelectionChange(l);this.onFilterChangeFn=(l,o)=>this.service.handleFilterChange(l,o);this.clearAllFiltersFn=()=>this.service.setFilters({});this.emptyStateComputed=computed(()=>({hasActiveFilters:this.service.hasActiveFilters(),onClearAll:this.clearAllFiltersFn,message:this.service.emptyState()?.message,render:this.service.emptyState()?.render}));effect(()=>{let l=this.propsSignal();l&&this.service.configure(l);});}set props(l){this.propsSignal.set(l);}get showToolbar(){return this.service.columnChooserPlacement()==="toolbar"||this.service.toolbar()!=null||this.service.fullScreen()}get emptyStateObj(){return this.emptyStateComputed()}onPageSizeChange(l){this.service.setPageSize(l);}};e([Input({required:true})],v.prototype,"props",1),v=e([Component({selector:"ogrid-primeng",standalone:true,imports:[OGridLayoutComponent,t,m,h],changeDetection:ChangeDetectionStrategy.OnPush,providers:[OGridService],styles:[":host { display: block; height: 100%; }"],template:`
1667
1054
  <ogrid-layout
1668
1055
  [className]="service.className()"
1669
1056
  [hasToolbar]="showToolbar"
@@ -1747,8 +1134,4 @@ OGridComponent = __decorateClass([
1747
1134
  ></ogrid-primeng-pagination-controls>
1748
1135
  </div>
1749
1136
  </ogrid-layout>
1750
- `
1751
- })
1752
- ], OGridComponent);
1753
-
1754
- export { ColumnChooserComponent, ColumnHeaderFilterComponent, ColumnHeaderMenuComponent, DataGridTableComponent, InlineCellEditorComponent, OGridComponent, PaginationControlsComponent, PopoverCellEditorComponent };
1137
+ `})],v);export{m as ColumnChooserComponent,p as ColumnHeaderFilterComponent,c as ColumnHeaderMenuComponent,t as DataGridTableComponent,g as InlineCellEditorComponent,v as OGridComponent,h as PaginationControlsComponent,u as PopoverCellEditorComponent};
@@ -102,8 +102,8 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
102
102
  onSelectAllChangePrimeng(checked: boolean): void;
103
103
  onRowClickPrimeng(e: MouseEvent, item: T): void;
104
104
  onRowCheckboxChangePrimeng(item: T, checked: boolean, rowIndex: number, _e: Event): void;
105
- onResizeStartPrimeng(e: MouseEvent, col: IColumnDef<T>): void;
106
- onResizeRowNumber(event: MouseEvent): void;
105
+ onResizeStartPrimeng(e: PointerEvent, col: IColumnDef<T>): void;
106
+ onResizeRowNumber(event: PointerEvent): void;
107
107
  getRowNumberWidth(): number;
108
108
  private buildProps;
109
109
  getColumnLetter(colIdx: number): string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-angular-primeng",
3
- "version": "2.4.2",
3
+ "version": "2.5.1",
4
4
  "description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
37
37
  "node": ">=18"
38
38
  },
39
39
  "dependencies": {
40
- "@alaarab/ogrid-angular": "2.4.2"
40
+ "@alaarab/ogrid-angular": "2.5.1"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "@angular/core": "^21.0.0",