@alaarab/ogrid-angular-primeng 2.5.9 → 2.6.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,1152 +1,16 @@
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:`
2
- <div style="display:flex;align-items:center;flex:1;min-width:0;gap:4px">
3
- <div style="flex:1;min-width:0;overflow:hidden">
4
- <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" [title]="columnName" data-header-label>
5
- {{ columnName }}
6
- </span>
7
- </div>
8
- <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
9
- @if (filterType !== 'none') {
10
- <button
11
- type="button"
12
- #filterTrigger
13
- (click)="toggleFilter()"
14
- [attr.aria-label]="'Filter ' + columnName"
15
- [attr.aria-expanded]="isFilterOpen()"
16
- aria-haspopup="dialog"
17
- [title]="'Filter ' + columnName"
18
- style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;position:relative;color:var(--ogrid-fg, #242424)"
19
- [style.font-weight]="hasActiveFilter() ? 'bold' : 'normal'"
20
- >
21
- &#9662;
22
- @if (hasActiveFilter()) {
23
- <span style="position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:var(--ogrid-selection, #217346)"></span>
24
- }
25
- </button>
26
-
27
- @if (isFilterOpen()) {
28
- <div
29
- #filterPanel
30
- style="position:absolute;top:100%;left:0;z-index:1000;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-weight:normal"
31
- >
32
- <div style="padding:8px 12px;font-weight:600;font-size:12px;border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
33
- Filter: {{ columnName }}
34
- </div>
35
-
36
- @if (filterType === 'text') {
37
- <div style="padding:8px 12px">
38
- <input
39
- type="text"
40
- [value]="tempTextValue()"
41
- (input)="tempTextValue.set($any($event.target).value)"
42
- placeholder="Filter text..."
43
- style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
44
- [attr.aria-label]="'Filter ' + columnName"
45
- />
46
- </div>
47
- <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
48
- <button
49
- type="button"
50
- class="p-button p-button-text p-button-sm"
51
- (click)="handleTextClear()"
52
- [disabled]="!textValue"
53
- style="font-size:12px"
54
- >Clear</button>
55
- <button
56
- type="button"
57
- class="p-button p-button-sm"
58
- (click)="handleTextApply()"
59
- style="font-size:12px"
60
- >Apply</button>
61
- </div>
62
- }
63
-
64
- @if (filterType === 'multiSelect') {
65
- <div style="padding:8px 12px">
66
- <input
67
- type="text"
68
- [value]="searchText()"
69
- (input)="searchText.set($any($event.target).value)"
70
- placeholder="Search options..."
71
- style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;margin-bottom:6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
72
- [attr.aria-label]="'Search ' + columnName + ' options'"
73
- />
74
- @if (isLoadingOptions) {
75
- <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
76
- } @else {
77
- <div style="display:flex;gap:4px;margin-bottom:6px">
78
- <button type="button" class="p-button p-button-text p-button-sm" (click)="handleSelectAllOptions()" style="font-size:11px">All</button>
79
- <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearSelection()" style="font-size:11px">None</button>
80
- </div>
81
- <div style="max-height:160px;overflow-y:auto" role="group" [attr.aria-label]="columnName + ' filter options'">
82
- @for (opt of filteredOptions(); track opt) {
83
- <label style="display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;font-size:13px">
84
- <input
85
- type="checkbox"
86
- [checked]="tempSelected().has(opt)"
87
- (change)="handleCheckboxChange(opt, $event)"
88
- />
89
- {{ opt }}
90
- </label>
91
- }
92
- </div>
93
- }
94
- </div>
95
- <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
96
- <button
97
- type="button"
98
- class="p-button p-button-sm"
99
- (click)="handleApplyMultiSelect()"
100
- style="font-size:12px"
101
- >Apply</button>
102
- </div>
103
- }
104
-
105
- @if (filterType === 'people') {
106
- <div style="padding:8px 12px">
107
- @if (selectedUser) {
108
- <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0;margin-bottom:4px">
109
- <span style="font-size:13px">{{ selectedUser!.displayName ?? selectedUser!.email }}</span>
110
- <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearUser()" style="font-size:11px">Clear</button>
111
- </div>
112
- }
113
- <input
114
- type="text"
115
- [value]="peopleSearchText()"
116
- (input)="onPeopleSearchInput($event)"
117
- placeholder="Search people..."
118
- style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
119
- [attr.aria-label]="'Search people for ' + columnName"
120
- />
121
- @if (isPeopleLoading()) {
122
- <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
123
- }
124
- @for (user of peopleSuggestions(); track user.email) {
125
- <button
126
- type="button"
127
- (click)="handleUserSelect(user)"
128
- style="display:block;width:100%;text-align:left;padding:6px 0;border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--ogrid-fg, #242424)"
129
- >
130
- {{ user.displayName ?? user.email }}
131
- </button>
132
- }
133
- </div>
134
- }
135
-
136
- @if (filterType === 'date') {
137
- <div style="padding:8px 12px;display:flex;flex-direction:column;gap:6px">
138
- <label style="display:flex;align-items:center;gap:6px;font-size:12px">
139
- From:
140
- <input
141
- type="date"
142
- [value]="tempDateFrom()"
143
- (change)="tempDateFrom.set($any($event.target).value)"
144
- style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
145
- />
146
- </label>
147
- <label style="display:flex;align-items:center;gap:6px;font-size:12px">
148
- To:
149
- <input
150
- type="date"
151
- [value]="tempDateTo()"
152
- (change)="tempDateTo.set($any($event.target).value)"
153
- style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
154
- />
155
- </label>
156
- </div>
157
- <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
158
- <button
159
- type="button"
160
- class="p-button p-button-text p-button-sm"
161
- (click)="handleDateClear()"
162
- [disabled]="!tempDateFrom() && !tempDateTo()"
163
- style="font-size:12px"
164
- >Clear</button>
165
- <button
166
- type="button"
167
- class="p-button p-button-sm"
168
- (click)="handleDateApply()"
169
- style="font-size:12px"
170
- >Apply</button>
171
- </div>
172
- }
173
- </div>
174
- }
175
- }
176
- </div>
177
- </div>
178
- `,styles:[`
179
- :host {
180
- display: flex;
181
- position: relative;
182
- flex: 1;
183
- min-width: 0;
184
- }
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:`
186
- <button
187
- pButton
188
- type="button"
189
- icon="pi pi-ellipsis-v"
190
- class="p-button-text p-button-sm column-header-menu-trigger"
191
- (click)="menu.toggle($event)"
192
- [attr.aria-label]="'Column options for ' + columnId"
193
- ></button>
194
-
195
- <p-menu
196
- #menu
197
- [model]="menuModel()"
198
- [popup]="true"
199
- appendTo="body"
200
- ></p-menu>
201
- `,styles:[`
202
- .column-header-menu-trigger {
203
- padding: 0.25rem;
204
- min-width: 24px;
205
- height: 24px;
206
- display: inline-flex;
207
- align-items: center;
208
- justify-content: center;
209
- color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
210
- border-radius: 4px;
211
- transition: background-color 0.15s;
212
- }
213
- /* Always reserve space; hide on hover-capable devices until column is hovered.
214
- The th:hover rule lives in the parent (ViewEncapsulation.None) styles. */
215
- @media (hover: hover) {
216
- .column-header-menu-trigger { visibility: hidden; }
217
- }
218
- .column-header-menu-trigger:hover {
219
- background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
220
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
221
- }
222
- `]})],c);var u=class extends BaseInlineCellEditorComponent{};u=e([Component({selector:"ogrid-primeng-inline-cell-editor",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:INLINE_CELL_EDITOR_TEMPLATE,styles:[INLINE_CELL_EDITOR_STYLES]})],u);var g=class extends BasePopoverCellEditorComponent{};g=e([Component({selector:"ogrid-primeng-popover-cell-editor",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:POPOVER_CELL_EDITOR_TEMPLATE,styles:[`
223
- ${POPOVER_CELL_EDITOR_OVERLAY_STYLES}
224
- .ogrid-popover-anchor {
225
- padding: 6px 10px; min-height: 20px; cursor: default; overflow: hidden;
226
- text-overflow: ellipsis; white-space: nowrap;
227
- outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -2px;
228
- }
229
- `]})],g);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,u,g],changeDetection:ChangeDetectionStrategy.OnPush,encapsulation:ViewEncapsulation.None,providers:[DataGridStateService,ColumnReorderService,VirtualScrollService],template:`
230
- <div class="ogrid-root">
231
- <div
232
- #wrapper
233
- tabindex="0"
234
- role="region"
235
- class="ogrid-scroll-wrapper"
236
- [class.ogrid-scroll-wrapper--loading-empty]="isLoading() && items().length === 0"
237
- [attr.aria-label]="resolvedAriaLabel()"
238
- [attr.aria-labelledby]="ariaLabelledBy()"
239
- [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
240
- [attr.data-column-count]="state().layout.totalColCount"
241
- [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
242
- [attr.data-virtual-scroll]="vsEnabled() ? '' : null"
243
- data-ogrid-scroll-container
244
- [attr.data-has-selection]="rowSelectionMode !== 'none' ? 'true' : null"
245
- (contextmenu)="$event.preventDefault()"
246
- (keydown)="onGridKeyDown($event)"
247
- (pointerdown)="onWrapperMouseDown($event)"
248
- (scroll)="onWrapperScroll($event)"
249
- [style.--data-table-column-count]="state().layout.totalColCount"
250
- [style.--ogrid-row-height]="rowHeightCssVar()"
251
- >
252
- <div class="ogrid-table-wrapper">
253
- <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
254
- <div #tableContainer class="ogrid-table-wrapper">
255
- <table class="ogrid-table" role="grid" [attr.data-virtual-scroll]="vsEnabled() ? '' : null">
256
- <thead [class]="stickyHeader() ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead'">
257
- @if (showColumnLetters()) {
258
- <tr class="ogrid-column-letter-row">
259
- @if (hasCheckboxCol()) {
260
- <th class="ogrid-column-letter-cell"></th>
261
- }
262
- @if (hasRowNumbersCol()) {
263
- <th class="ogrid-column-letter-cell"></th>
264
- }
265
- @for (col of visibleCols(); track col.columnId; let colIdx = $index) {
266
- <th class="ogrid-column-letter-cell">
267
- {{ getColumnLetter(colIdx) }}
268
- </th>
269
- }
270
- </tr>
271
- }
272
- @for (row of headerRows(); track $index; let rowIdx = $index) {
273
- <tr>
274
- @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
275
- <th scope="col" rowSpan="1" class="ogrid-checkbox-header">
276
- <input
277
- type="checkbox"
278
- [checked]="allSelected()"
279
- [indeterminate]="someSelected() && !allSelected()"
280
- (change)="onSelectAllChangePrimeng($any($event.target).checked)"
281
- aria-label="Select all rows"
282
- />
283
- </th>
284
- }
285
- @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasCheckboxCol()) {
286
- <th [attr.rowSpan]="headerRows().length - 1"></th>
287
- }
288
- @if (rowIdx === headerRows().length - 1 && hasRowNumbersCol()) {
289
- <th scope="col" rowSpan="1" class="ogrid-row-number-header"
290
- [style.width.px]="getRowNumberWidth()"
291
- [style.min-width.px]="getRowNumberWidth()"
292
- [style.max-width.px]="getRowNumberWidth()"
293
- >
294
- #
295
- <div
296
- class="ogrid-resize-handle"
297
- (pointerdown)="onResizeRowNumber($event)"
298
- (dblclick)="$event.stopPropagation()"
299
- ></div>
300
- </th>
301
- }
302
- @if (rowIdx === 0 && rowIdx < headerRows().length - 1 && hasRowNumbersCol()) {
303
- <th [attr.rowSpan]="headerRows().length - 1" class="ogrid-row-number-spacer"></th>
304
- }
305
- @for (cell of row; track cell.columnDef?.columnId ?? $index; let cellIdx = $index) {
306
- @if (cell.isGroup) {
307
- <th
308
- [attr.colSpan]="cell.colSpan"
309
- scope="colgroup"
310
- class="ogrid-column-group-header"
311
- >
312
- {{ cell.label }}
313
- </th>
314
- } @else {
315
- @let col = asColumnDef(cell.columnDef);
316
- @let pinned = isPinned(col.columnId);
317
- @let config = getFilterConfig(col);
318
- @let sortState = getSortState(col.columnId);
319
- @let ariaSort = sortState === 'asc' ? 'ascending' : sortState === 'desc' ? 'descending' : null;
320
- <th
321
- scope="col"
322
- class="ogrid-header-cell"
323
- [attr.data-column-id]="col.columnId"
324
- [attr.aria-sort]="ariaSort"
325
- [attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
326
- [class.ogrid-th-pinned-left]="pinned === 'left'"
327
- [class.ogrid-th-pinned-right]="pinned === 'right'"
328
- [style.min-width.px]="getEffectiveMinWidth(col)"
329
- [style.width.px]="getColumnWidth(col)"
330
- [style.max-width.px]="getColumnWidth(col)"
331
- [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
332
- [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
333
- [style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
334
- (pointerdown)="onHeaderMouseDown(col.columnId, $event)"
335
- >
336
- <div class="ogrid-header-content">
337
- <ogrid-primeng-column-header-filter
338
- [columnKey]="col.columnId"
339
- [columnName]="col.name"
340
- [filterType]="config.filterType"
341
- [isSorted]="config.isSorted ?? false"
342
- [isSortedDescending]="config.isSortedDescending ?? false"
343
- [onSort]="config.onSort"
344
- [selectedValues]="config.selectedValues"
345
- [onFilterChange]="config.onFilterChange"
346
- [options]="config.options ?? []"
347
- [isLoadingOptions]="config.isLoadingOptions ?? false"
348
- [textValue]="config.textValue ?? ''"
349
- [onTextChange]="config.onTextChange"
350
- [selectedUser]="config.selectedUser"
351
- [onUserChange]="config.onUserChange"
352
- [peopleSearch]="config.peopleSearch"
353
- [dateValue]="config.dateValue"
354
- [onDateChange]="config.onDateChange"
355
- ></ogrid-primeng-column-header-filter>
356
- @let colPinState = getPinState(col.columnId);
357
- <column-header-menu
358
- [columnId]="col.columnId"
359
- [canPinLeft]="colPinState.canPinLeft"
360
- [canPinRight]="colPinState.canPinRight"
361
- [canUnpin]="colPinState.canUnpin"
362
- [currentSort]="sortState"
363
- [isSortable]="col.sortable !== false"
364
- [isResizable]="col.resizable !== false"
365
- [handlers]="getColumnMenuHandlersMemoized(col.columnId)"
366
- />
367
- </div>
368
- <div
369
- class="ogrid-resize-handle"
370
- (pointerdown)="onResizeStartPrimeng($event, col)"
371
- (dblclick)="onResizeDoubleClick($event, col)"
372
- [attr.aria-label]="'Resize ' + col.name"
373
- ></div>
374
- </th>
375
- }
376
- }
377
- </tr>
378
- }
379
- </thead>
380
-
381
- @if (!showEmptyInGrid()) {
382
- <tbody>
383
- @if (vsEnabled() && vsTopSpacerHeight() > 0) {
384
- <tr [style.height.px]="vsTopSpacerHeight()"></tr>
385
- }
386
- @for (item of vsVisibleItems(); track trackByRowId($index, item); let localIdx = $index) {
387
- @let rowIndex = vsStartIndex() + localIdx;
388
- @let rowId = getRowIdInput(item);
389
- @let isSelected = selectedRowIds().has(rowId);
390
- <tr
391
- [attr.data-row-id]="rowId"
392
- [attr.aria-selected]="isSelected || null"
393
- [style.background]="isSelected ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
394
- (click)="onRowClickPrimeng($event, item)"
395
- >
396
- @if (hasCheckboxCol()) {
397
- <td
398
- class="ogrid-checkbox-cell"
399
- [attr.data-row-index]="rowIndex"
400
- [attr.data-col-index]="0"
401
- (click)="$event.stopPropagation()"
402
- >
403
- <input
404
- type="checkbox"
405
- [checked]="isSelected"
406
- (change)="onRowCheckboxChangePrimeng(item, $any($event.target).checked, rowIndex, $event)"
407
- [attr.aria-label]="'Select row ' + (rowIndex + 1)"
408
- />
409
- </td>
410
- }
411
- @if (hasRowNumbersCol()) {
412
- <td class="ogrid-row-number-cell"
413
- [style.width.px]="getRowNumberWidth()"
414
- [style.min-width.px]="getRowNumberWidth()"
415
- [style.max-width.px]="getRowNumberWidth()"
416
- >
417
- {{ rowNumberOffset() + rowIndex + 1 }}
418
- </td>
419
- }
420
- @if (vsColumnsEnabled() && vsLeftSpacerWidth() > 0) {
421
- <td [style.width.px]="vsLeftSpacerWidth()" [style.minWidth.px]="vsLeftSpacerWidth()" [style.maxWidth.px]="vsLeftSpacerWidth()" [style.padding]="'0'"></td>
422
- }
423
- @for (col of vsVisibleCols(); track col.columnId) {
424
- @let pinned = isPinned(col.columnId);
425
- <td
426
- [attr.data-column-id]="col.columnId"
427
- [class.ogrid-td-pinned-left]="pinned === 'left'"
428
- [class.ogrid-td-pinned-right]="pinned === 'right'"
429
- class="ogrid-data-cell"
430
- [style.min-width.px]="getEffectiveMinWidth(col)"
431
- [style.width.px]="getColumnWidth(col)"
432
- [style.max-width.px]="getColumnWidth(col)"
433
- [style.left.px]="pinned === 'left' ? getPinnedLeftOffset(col.columnId) : null"
434
- [style.right.px]="pinned === 'right' ? getPinnedRightOffset(col.columnId) : null"
435
- [style.text-align]="col.type === 'numeric' ? 'right' : null"
436
- >
437
- @let descriptor = getCellDescriptor(item, col, rowIndex, getGlobalColIndex(col));
438
- @if (descriptor.mode === 'editing-inline') {
439
- <div class="ogrid-editing-cell">
440
- <ogrid-primeng-inline-cell-editor
441
- [value]="descriptor.value"
442
- [item]="item"
443
- [column]="col"
444
- [rowIndex]="rowIndex"
445
- [editorType]="descriptor.editorType ?? 'text'"
446
- (commit)="commitEdit(item, col.columnId, descriptor.value, $event, rowIndex, descriptor.globalColIndex)"
447
- (cancel)="cancelEdit()"
448
- ></ogrid-primeng-inline-cell-editor>
449
- </div>
450
- } @else if (descriptor.mode === 'editing-popover') {
451
- @let editorProps = buildPopoverEditorProps(item, col, descriptor);
452
- <ogrid-primeng-popover-cell-editor
453
- [item]="item"
454
- [column]="col"
455
- [rowIndex]="rowIndex"
456
- [globalColIndex]="descriptor.globalColIndex"
457
- [displayValue]="descriptor.displayValue"
458
- [editorProps]="editorProps"
459
- [onCancel]="cancelEditHandler"
460
- ></ogrid-primeng-popover-cell-editor>
461
- } @else {
462
- <div
463
- [attr.data-row-index]="rowIndex"
464
- [attr.data-col-index]="descriptor.globalColIndex"
465
- [attr.data-active-cell]="descriptor.isActive ? 'true' : null"
466
- [attr.data-in-range]="descriptor.isInRange ? 'true' : null"
467
- [attr.tabindex]="descriptor.isActive ? 0 : -1"
468
- (pointerdown)="onCellMouseDown($event, rowIndex, descriptor.globalColIndex)"
469
- (click)="onCellClick(rowIndex, descriptor.globalColIndex)"
470
- (dblclick)="descriptor.canEditAny ? onCellDblClick(descriptor.rowId, col.columnId) : null"
471
- (contextmenu)="onCellContextMenu($event)"
472
- class="ogrid-cell-content"
473
- [style.cursor]="descriptor.canEditAny ? 'cell' : 'default'"
474
- [style.background]="descriptor.isInRange && !descriptor.isActive ? 'var(--ogrid-range-bg, rgba(33, 115, 70, 0.08))' : (descriptor.isActive && descriptor.isInRange ? 'var(--ogrid-bg, #fff)' : null)"
475
- [style.outline]="descriptor.isActive && !descriptor.isInRange ? '2px solid var(--ogrid-selection, #217346)' : null"
476
- [style.outline-offset]="descriptor.isActive && !descriptor.isInRange ? '-2px' : null"
477
- >
478
- @if (col.type === 'boolean') {
479
- <input type="checkbox" [checked]="!!descriptor.displayValue" [disabled]="!descriptor.canEditAny" (change)="descriptor.canEditAny ? commitBooleanEdit(item, col.columnId, !!descriptor.displayValue, rowIndex, descriptor.globalColIndex) : null" (pointerdown)="onBooleanCheckboxPointerDown($event, rowIndex, descriptor.globalColIndex)" (click)="$event.stopPropagation()" style="margin:0;outline:none" [style.cursor]="descriptor.canEditAny ? 'pointer' : 'default'" [attr.aria-label]="descriptor.displayValue ? 'Checked' : 'Unchecked'" />
480
- } @else {
481
- <span [style]="resolveCellStyleFn(col, item, descriptor.displayValue)">{{ resolveCellContent(col, item, descriptor.displayValue) }}</span>
482
- }
483
- @if (descriptor.canEditAny && descriptor.isSelectionEndCell) {
484
- <div
485
- (pointerdown)="onFillHandleMouseDown($event)"
486
- class="ogrid-fill-handle"
487
- aria-label="Fill handle"
488
- ></div>
489
- }
490
- </div>
491
- }
492
- </td>
493
- }
494
- @if (vsColumnsEnabled() && vsRightSpacerWidth() > 0) {
495
- <td [style.width.px]="vsRightSpacerWidth()" [style.minWidth.px]="vsRightSpacerWidth()" [style.maxWidth.px]="vsRightSpacerWidth()" [style.padding]="'0'"></td>
496
- }
497
- </tr>
498
- }
499
- @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
500
- <tr [style.height.px]="vsBottomSpacerHeight()"></tr>
501
- }
502
- </tbody>
503
- }
504
- </table>
505
-
506
- <ogrid-marching-ants-overlay
507
- [containerEl]="tableContainerEl()"
508
- [selectionRange]="state().interaction.selectionRange"
509
- [copyRange]="state().interaction.copyRange"
510
- [cutRange]="state().interaction.cutRange"
511
- [colOffset]="state().layout.colOffset"
512
- [columnSizingVersion]="columnSizingVersion()"
513
- [items]="items()"
514
- [visibleColumns]="propsVisibleColumns()"
515
- [columnOrder]="propsColumnOrder()"
516
- ></ogrid-marching-ants-overlay>
517
-
518
- @if (formulaReferences() && formulaReferences()!.length > 0) {
519
- <ogrid-formula-ref-overlay
520
- [containerEl]="tableContainerEl()"
521
- [references]="formulaReferences()!"
522
- [colOffset]="colOffset()"
523
- />
524
- }
525
-
526
- @if (showEmptyInGrid() && emptyState()) {
527
- <div class="ogrid-empty-container">
528
- <div>
529
- <div class="ogrid-empty-title">No results found</div>
530
- <ogrid-empty-state
531
- [message]="emptyState()?.message"
532
- [hasActiveFilters]="emptyState()?.hasActiveFilters ?? false"
533
- [render]="emptyState()?.render"
534
- (clearAll)="emptyState()?.onClearAll()"
535
- ></ogrid-empty-state>
536
- </div>
537
- </div>
538
- }
539
- </div>
540
- </div>
541
- </div>
542
- </div>
543
-
544
- @if (columnReorderService.isDragging() && columnReorderService.dropIndicatorX() !== null) {
545
- <div class="ogrid-drop-indicator" [style.left.px]="columnReorderService.dropIndicatorX()"></div>
546
- }
547
-
548
- @if (menuPosition()) {
549
- <ogrid-context-menu
550
- [x]="menuPosition()!.x"
551
- [y]="menuPosition()!.y"
552
- [hasSelection]="hasCellSelection()"
553
- [canUndoProp]="canUndo()"
554
- [canRedoProp]="canRedo()"
555
- [classNames]="contextMenuClasses"
556
- (copyAction)="handleCopy()"
557
- (cutAction)="handleCut()"
558
- (pasteAction)="handlePaste()"
559
- (selectAllAction)="handleSelectAllCells()"
560
- (undoAction)="onUndo()"
561
- (redoAction)="onRedo()"
562
- (closeAction)="closeContextMenu()"
563
- ></ogrid-context-menu>
564
- }
565
-
566
- @let sbConfig = statusBarConfig();
567
- @if (sbConfig) {
568
- <ogrid-status-bar
569
- [totalCount]="sbConfig.totalCount"
570
- [filteredCount]="sbConfig.filteredCount"
571
- [selectedCount]="sbConfig.selectedCount ?? selectedRowIds().size"
572
- [selectedCellCount]="selectionCellCount()"
573
- [aggregation]="sbConfig.aggregation"
574
- [suppressRowCount]="sbConfig.suppressRowCount"
575
- [classNames]="statusBarClasses"
576
- ></ogrid-status-bar>
577
- }
578
-
579
- @if (isLoading()) {
580
- <div class="ogrid-loading-overlay" aria-live="polite">
581
- <div class="ogrid-loading-content">
582
- <span class="ogrid-loading-text">{{ loadingMessage() }}</span>
583
- </div>
584
- </div>
585
- }
586
- </div>
587
- `,styles:[OGRID_THEME_VARS_CSS,`
588
- :host { display: block; }
589
- .ogrid-root {
590
- position: relative;
591
- flex: 1;
592
- min-height: 0;
593
- display: flex;
594
- flex-direction: column;
595
- overflow: hidden;
596
- }
597
- .ogrid-scroll-wrapper {
598
- overflow: auto;
599
- position: relative;
600
- background: var(--ogrid-bg, #ffffff);
601
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
602
- }
603
- .ogrid-scroll-wrapper[data-virtual-scroll] { flex: 1; min-height: 0; }
604
- .ogrid-scroll-wrapper--loading-empty { min-height: 200px; }
605
- .ogrid-table-wrapper {
606
- position: relative;
607
- overflow-x: clip;
608
- }
609
- .ogrid-table {
610
- width: var(--data-table-width, 100%);
611
- min-width: var(--data-table-min-width, 100%);
612
- border-collapse: collapse;
613
- table-layout: fixed;
614
- }
615
- .ogrid-table tr th:first-child,
616
- .ogrid-table tr td:first-child { border-left: none; }
617
- .ogrid-table tbody tr { height: var(--ogrid-row-height, auto); }
618
- .ogrid-thead {
619
- z-index: 3;
620
- background: var(--ogrid-header-bg, #f5f5f5);
621
- }
622
- .ogrid-sticky-header { position: sticky; top: 0; }
623
- .ogrid-sticky-header .ogrid-checkbox-header,
624
- .ogrid-sticky-header .ogrid-row-number-header { position: sticky; top: 0; }
625
- .ogrid-checkbox-header {
626
- width: 48px;
627
- min-width: 48px;
628
- max-width: 48px;
629
- text-align: center;
630
- background: var(--ogrid-header-bg, #f5f5f5);
631
- border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
632
- z-index: 3;
633
- }
634
- .ogrid-row-number-header {
635
- text-align: center;
636
- font-weight: 600;
637
- background: var(--ogrid-header-bg, #f5f5f5);
638
- border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
639
- z-index: 3;
640
- position: relative;
641
- }
642
- .ogrid-row-number-spacer {
643
- background: var(--ogrid-header-bg, #f5f5f5);
644
- }
645
- .ogrid-column-group-header {
646
- text-align: center;
647
- font-weight: 600;
648
- background: var(--ogrid-header-bg, #f5f5f5);
649
- border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
650
- padding: 6px 10px;
651
- }
652
- .ogrid-header-cell {
653
- background: var(--ogrid-header-bg, #f5f5f5);
654
- border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
655
- padding: 0;
656
- position: relative;
657
- user-select: none;
658
- }
659
- .ogrid-header-content {
660
- display: flex;
661
- align-items: center;
662
- gap: 4px;
663
- padding: 6px 10px;
664
- }
665
- .ogrid-resize-handle {
666
- position: absolute;
667
- top: 0;
668
- right: 0;
669
- bottom: 0;
670
- width: 4px;
671
- cursor: col-resize;
672
- touch-action: none;
673
- }
674
- @media (pointer: coarse) {
675
- .ogrid-resize-handle { width: 16px; right: -6px; }
676
- }
677
- .ogrid-checkbox-cell {
678
- width: 48px;
679
- min-width: 48px;
680
- max-width: 48px;
681
- padding: 6px 4px;
682
- text-align: center;
683
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
684
- }
685
- .ogrid-row-number-cell {
686
- padding: 6px;
687
- text-align: center;
688
- font-weight: 600;
689
- font-variant-numeric: tabular-nums;
690
- color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
691
- background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
692
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
693
- position: sticky;
694
- left: 0;
695
- z-index: 3;
696
- }
697
- .ogrid-data-cell {
698
- padding: 0;
699
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
700
- position: relative;
701
- }
702
- .ogrid-data-cell:has(> [data-active-cell]),
703
- .ogrid-data-cell:has(> .ogrid-editing-cell) { z-index: 2; }
704
- .ogrid-cell-content {
705
- padding: var(--ogrid-cell-padding, 6px 10px);
706
- min-height: 20px;
707
- cursor: default;
708
- overflow: hidden;
709
- text-overflow: ellipsis;
710
- white-space: nowrap;
711
- }
712
- .ogrid-editing-cell {
713
- width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box;
714
- outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
715
- z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: hidden; padding: 0;
716
- }
717
- .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
718
- .ogrid-fill-handle {
719
- position: absolute;
720
- bottom: -3px;
721
- right: -3px;
722
- width: 7px;
723
- height: 7px;
724
- background: var(--ogrid-selection, #217346);
725
- cursor: crosshair;
726
- touch-action: none;
727
- z-index: 2;
728
- }
729
- @media (pointer: coarse) {
730
- .ogrid-fill-handle { width: 14px; height: 14px; right: -7px; bottom: -7px; border-radius: 2px; }
731
- }
732
- .ogrid-empty-container {
733
- display: flex;
734
- align-items: center;
735
- justify-content: center;
736
- padding: 48px 24px;
737
- text-align: center;
738
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
739
- }
740
- .ogrid-empty-title {
741
- font-weight: 600;
742
- margin-bottom: 8px;
743
- }
744
- .ogrid-loading-overlay {
745
- position: absolute;
746
- inset: 0;
747
- display: flex;
748
- align-items: center;
749
- justify-content: center;
750
- background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
751
- z-index: 10;
752
- }
753
- .ogrid-loading-content {
754
- display: flex;
755
- align-items: center;
756
- gap: 8px;
757
- color: var(--ogrid-fg, #242424);
758
- }
759
- .ogrid-loading-text {
760
- font-size: 14px;
761
- }
762
- .loading-dimmed {
763
- opacity: 0.5;
764
- pointer-events: none;
765
- }
766
- .ogrid-drop-indicator {
767
- position: absolute;
768
- top: 0;
769
- bottom: 0;
770
- width: 3px;
771
- background: var(--ogrid-primary, #217346);
772
- pointer-events: none;
773
- z-index: 100;
774
- transition: left 0.05s;
775
- }
776
- .ogrid-th-pinned-left {
777
- position: sticky;
778
- top: 0;
779
- left: 0;
780
- z-index: 10;
781
- background: var(--ogrid-header-bg, #f5f5f5);
782
- border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
783
- box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
784
- }
785
- .ogrid-th-pinned-right {
786
- position: sticky;
787
- top: 0;
788
- right: 0;
789
- z-index: 10;
790
- background: var(--ogrid-header-bg, #f5f5f5);
791
- border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
792
- box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
793
- }
794
- .ogrid-td-pinned-left {
795
- position: sticky;
796
- left: 0;
797
- z-index: 5;
798
- background: var(--ogrid-bg, #fff);
799
- border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
800
- box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
801
- }
802
- .ogrid-td-pinned-right {
803
- position: sticky;
804
- right: 0;
805
- z-index: 5;
806
- background: var(--ogrid-bg, #fff);
807
- border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
808
- box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
809
- }
810
- ::ng-deep th:focus-visible,
811
- ::ng-deep td:focus-visible {
812
- outline: 2px solid var(--primary-color, #6366f1);
813
- outline-offset: -2px;
814
- z-index: 11;
815
- }
816
- ::ng-deep .p-button:focus-visible,
817
- ::ng-deep button:focus-visible {
818
- outline: 2px solid var(--primary-color, #6366f1);
819
- outline-offset: 2px;
820
- }
821
-
822
- /* Context menu */
823
- .ogrid-context-menu {
824
- position: fixed;
825
- z-index: 1000;
826
- min-width: 160px;
827
- padding: 4px 0;
828
- background: var(--ogrid-bg, #fff);
829
- border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
830
- border-radius: 6px;
831
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
832
- }
833
- .ogrid-context-menu-item {
834
- display: flex;
835
- align-items: center;
836
- justify-content: space-between;
837
- gap: 24px;
838
- width: 100%;
839
- padding: 6px 12px;
840
- border: none;
841
- background: none;
842
- font-size: 13px;
843
- text-align: left;
844
- cursor: pointer;
845
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
846
- }
847
- .ogrid-context-menu-item:hover:not(:disabled) {
848
- background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
849
- }
850
- .ogrid-context-menu-item:disabled {
851
- opacity: 0.5;
852
- cursor: not-allowed;
853
- }
854
- .ogrid-context-menu-item-label {
855
- flex: 1;
856
- }
857
- .ogrid-context-menu-item-shortcut {
858
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
859
- font-size: 0.85em;
860
- }
861
- .ogrid-context-menu-divider {
862
- height: 1px;
863
- margin: 4px 0;
864
- background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
865
- }
866
- ::ng-deep .p-checkbox:focus-visible {
867
- outline: 2px solid var(--primary-color, #6366f1);
868
- outline-offset: 2px;
869
- }
870
-
871
- /* PrimeNG Menu popup overrides.
872
- Double-class selectors (0,2,0) beat PrimeNG's single-class (0,1,0) defaults. */
873
- .p-menu.p-menu {
874
- background: var(--ogrid-bg, #ffffff);
875
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
876
- border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
877
- border-radius: 4px;
878
- padding: 4px 0;
879
- }
880
- .p-menu-overlay.p-menu-overlay {
881
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ogrid-border, rgba(0, 0, 0, 0.12));
882
- }
883
- .p-menu-item-content.p-menu-item-content {
884
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
885
- }
886
- .p-menu-item-link.p-menu-item-link {
887
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
888
- padding: 6px 12px;
889
- }
890
- .p-menu-item-label.p-menu-item-label {
891
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
892
- font-size: 0.875rem;
893
- }
894
- .p-menu-item:not(.p-disabled) .p-menu-item-content.p-menu-item-content:hover {
895
- background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
896
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
897
- }
898
- .p-menu-separator.p-menu-separator {
899
- border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
900
- margin: 4px 0;
901
- }
902
- .ogrid-column-letter-cell {
903
- text-align: center;
904
- font-size: 11px;
905
- font-weight: 500;
906
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.4));
907
- padding: 2px 4px;
908
- background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg, #f5f5f5));
909
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
910
- user-select: none;
911
- font-variant-numeric: tabular-nums;
912
- }
913
- /* Reveal column menu trigger on header hover without layout shift.
914
- The button always takes up space (visibility: hidden); shown when column is hovered. */
915
- @media (hover: hover) {
916
- th:hover .column-header-menu-trigger { visibility: visible; }
917
- }
918
- `]})],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:`
919
- <div style="position:relative;display:inline-block">
920
- <button
921
- type="button"
922
- class="p-button p-button-text p-button-sm"
923
- (click)="open.set(!open())"
924
- [attr.aria-expanded]="open()"
925
- aria-haspopup="listbox"
926
- style="display:flex;align-items:center;gap:6px;font-size:13px"
927
- >
928
- <span aria-hidden>&#9881;</span>
929
- <span>Column Visibility ({{ visibleCount() }} of {{ totalCount() }})</span>
930
- <span aria-hidden>{{ open() ? '\u25B2' : '\u25BC' }}</span>
931
- </button>
932
-
933
- @if (open()) {
934
- <div
935
- style="position:absolute;right:0;top:100%;z-index:1000;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
936
- >
937
- <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6))">
938
- Select Columns ({{ visibleCount() }} of {{ totalCount() }})
939
- </div>
940
- @for (col of columns; track col.columnId) {
941
- <label style="display:flex;align-items:center;gap:8px;padding:4px 12px;cursor:pointer;font-size:13px">
942
- <input
943
- type="checkbox"
944
- [checked]="visibleColumns.has(col.columnId)"
945
- (change)="onToggle(col.columnId, $any($event.target).checked)"
946
- [disabled]="col.required === true"
947
- />
948
- {{ col.name }}
949
- </label>
950
- }
951
- <div style="display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));margin-top:4px">
952
- <button
953
- type="button"
954
- class="p-button p-button-text p-button-sm"
955
- (click)="onClearAll()"
956
- style="flex:1;font-size:12px"
957
- >Clear All</button>
958
- <button
959
- type="button"
960
- class="p-button p-button-text p-button-sm"
961
- (click)="onSelectAll()"
962
- style="flex:1;font-size:12px"
963
- >Select All</button>
964
- </div>
965
- </div>
966
- }
967
- </div>
968
- `})],m);var h=class extends BasePaginationControlsComponent{};h=e([Component({selector:"ogrid-primeng-pagination-controls",standalone:true,changeDetection:ChangeDetectionStrategy.OnPush,template:`
969
- @if (vm()) {
970
- <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)">
971
- <div class="ogrid-pagination__info">
972
- Showing {{ vm()!.startItem }} to {{ vm()!.endItem }} of {{ totalCount.toLocaleString() }} {{ labelPlural() }}
973
- </div>
974
-
975
- <div class="ogrid-pagination__pages" style="display:flex;align-items:center;gap:4px" role="navigation" aria-label="Pagination">
976
- <button
977
- type="button"
978
- class="p-button p-button-text p-button-sm"
979
- [disabled]="currentPage === 1"
980
- (click)="pageChange.emit(1)"
981
- aria-label="First page"
982
- style="min-width:32px;padding:4px 8px"
983
- >&laquo;</button>
984
- <button
985
- type="button"
986
- class="p-button p-button-text p-button-sm"
987
- [disabled]="currentPage === 1"
988
- (click)="pageChange.emit(currentPage - 1)"
989
- aria-label="Previous page"
990
- style="min-width:32px;padding:4px 8px"
991
- >&lsaquo;</button>
992
-
993
- @if (vm()!.showStartEllipsis) {
994
- <button
995
- type="button"
996
- class="p-button p-button-text p-button-sm"
997
- (click)="pageChange.emit(1)"
998
- aria-label="Page 1"
999
- style="min-width:32px;padding:4px 8px"
1000
- >1</button>
1001
- <span aria-hidden style="padding:0 4px">&hellip;</span>
1002
- }
1003
-
1004
- @for (pageNum of vm()!.pageNumbers; track pageNum) {
1005
- <button
1006
- type="button"
1007
- class="p-button p-button-sm"
1008
- [class.p-button-outlined]="currentPage !== pageNum"
1009
- (click)="pageChange.emit(pageNum)"
1010
- [attr.aria-label]="'Page ' + pageNum"
1011
- [attr.aria-current]="currentPage === pageNum ? 'page' : null"
1012
- style="min-width:32px;padding:4px 8px"
1013
- >{{ pageNum }}</button>
1014
- }
1015
-
1016
- @if (vm()!.showEndEllipsis) {
1017
- <span aria-hidden style="padding:0 4px">&hellip;</span>
1018
- <button
1019
- type="button"
1020
- class="p-button p-button-text p-button-sm"
1021
- (click)="pageChange.emit(vm()!.totalPages)"
1022
- [attr.aria-label]="'Page ' + vm()!.totalPages"
1023
- style="min-width:32px;padding:4px 8px"
1024
- >{{ vm()!.totalPages }}</button>
1025
- }
1026
-
1027
- <button
1028
- type="button"
1029
- class="p-button p-button-text p-button-sm"
1030
- [disabled]="currentPage >= vm()!.totalPages"
1031
- (click)="pageChange.emit(currentPage + 1)"
1032
- aria-label="Next page"
1033
- style="min-width:32px;padding:4px 8px"
1034
- >&rsaquo;</button>
1035
- <button
1036
- type="button"
1037
- class="p-button p-button-text p-button-sm"
1038
- [disabled]="currentPage >= vm()!.totalPages"
1039
- (click)="pageChange.emit(vm()!.totalPages)"
1040
- aria-label="Last page"
1041
- style="min-width:32px;padding:4px 8px"
1042
- >&raquo;</button>
1043
- </div>
1044
-
1045
- <div class="ogrid-pagination__size" style="display:flex;align-items:center;gap:6px">
1046
- <span style="font-size:12px">Rows</span>
1047
- <select
1048
- [value]="'' + pageSize"
1049
- (change)="onPageSizeChange($any($event.target).value)"
1050
- aria-label="Rows per page"
1051
- style="padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
1052
- >
1053
- @for (opt of vm()!.pageSizeOptions; track opt) {
1054
- <option [value]="opt">{{ opt }}</option>
1055
- }
1056
- </select>
1057
- </div>
1058
- </div>
1059
- }
1060
- `,styles:[`
1061
- :host { display: block; }
1062
- @media (max-width: 576px) {
1063
- .ogrid-pagination { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px; font-size: 12px; }
1064
- .ogrid-pagination__pages { order: -1; justify-content: center; }
1065
- .ogrid-pagination__info { text-align: center; font-size: 11px; }
1066
- .ogrid-pagination__size { font-size: 11px; justify-content: center; }
1067
- }
1068
- `]})],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:`
1069
- <ogrid-layout
1070
- [className]="service.className()"
1071
- [hasToolbar]="showToolbar"
1072
- [hasToolbarBelow]="false"
1073
- [hasPagination]="true"
1074
- [sideBar]="service.sideBarProps()"
1075
- [fullScreen]="service.fullScreen()"
1076
- [showNameBox]="!!(service.cellReferences() && !service.formulasEnabled())"
1077
- [activeCellRef]="service.activeCellRef()"
1078
- [formulaBar]="service.formulasEnabled() ? service.formulaBarState() : null"
1079
- [sheetDefs]="service.sheetDefs()"
1080
- [activeSheet]="service.activeSheet()"
1081
- [onSheetChange]="service.onSheetChange()"
1082
- [onSheetAdd]="service.onSheetAdd()"
1083
- >
1084
- <ng-content select="[toolbar]" toolbar></ng-content>
1085
-
1086
- <div toolbarEnd>
1087
- @if (service.columnChooserPlacement() === 'toolbar') {
1088
- <ogrid-primeng-column-chooser
1089
- [columns]="service.columnChooser().columns"
1090
- [visibleColumns]="service.columnChooser().visibleColumns"
1091
- (visibilityChange)="service.handleVisibilityChange($event.columnKey, $event.visible)"
1092
- ></ogrid-primeng-column-chooser>
1093
- }
1094
- </div>
1095
-
1096
- <ogrid-primeng-datagrid-table
1097
- [items]="service.displayItems()"
1098
- [columns]="service.columnsProp()"
1099
- [getRowId]="service.getRowId()"
1100
- [sortBy]="service.sort().field"
1101
- [sortDirection]="service.sort().direction"
1102
- [onColumnSort]="onColumnSortFn"
1103
- [visibleColumns]="service.visibleColumns()"
1104
- [columnOrder]="service.columnOrder()"
1105
- [onColumnOrderChange]="service.onColumnOrderChange()"
1106
- [onColumnResized]="onColumnResizedFn"
1107
- [onColumnPinned]="onColumnPinnedFn"
1108
- [editable]="service.editable()"
1109
- [cellSelection]="service.cellSelection()"
1110
- [onCellValueChanged]="service.onCellValueChanged()"
1111
- [onUndo]="service.onUndo()"
1112
- [onRedo]="service.onRedo()"
1113
- [canUndo]="service.canUndo()"
1114
- [canRedo]="service.canRedo()"
1115
- [rowSelection]="service.rowSelection()"
1116
- [selectedRows]="service.effectiveSelectedRows()"
1117
- [onSelectionChange]="onSelectionChangeFn"
1118
- [statusBar]="service.statusBarConfig()"
1119
- [isLoading]="service.isLoadingResolved()"
1120
- [filters]="service.filters()"
1121
- [onFilterChange]="onFilterChangeFn"
1122
- [filterOptions]="service.clientFilterOptions()"
1123
- [loadingFilterOptions]="service.loadingFilterOptions()"
1124
- [peopleSearch]="service.dataSource()?.searchPeople?.bind(service.dataSource())"
1125
- [getUserByEmail]="service.dataSource()?.getUserByEmail?.bind(service.dataSource())"
1126
- [layoutMode]="service.layoutMode()"
1127
- [suppressHorizontalScroll]="service.suppressHorizontalScroll()"
1128
- [stickyHeaderInput]="service.stickyHeader()"
1129
- [columnReorder]="service.columnReorder()"
1130
- [aria-label]="service.ariaLabel()"
1131
- [aria-labelledby]="service.ariaLabelledBy()"
1132
- [emptyState]="emptyStateObj"
1133
- [showRowNumbers]="service.dataGridProps().showRowNumbers ?? false"
1134
- [showColumnLetters]="service.dataGridProps().showColumnLetters ?? false"
1135
- [showNameBox]="service.dataGridProps().showNameBox ?? false"
1136
- [onActiveCellChange]="service.dataGridProps().onActiveCellChange"
1137
- [formulaReferences]="service.dataGridProps().formulaReferences"
1138
- ></ogrid-primeng-datagrid-table>
1139
-
1140
- <div pagination>
1141
- <ogrid-primeng-pagination-controls
1142
- [currentPage]="service.pagination().page"
1143
- [pageSize]="service.pagination().pageSize"
1144
- [totalCount]="service.pagination().displayTotalCount"
1145
- [pageSizeOptions]="service.pageSizeOptions()"
1146
- [entityLabelPlural]="service.entityLabelPlural()"
1147
- (pageChange)="service.setPage($event)"
1148
- (pageSizeChange)="onPageSizeChange($event)"
1149
- ></ogrid-primeng-pagination-controls>
1150
- </div>
1151
- </ogrid-layout>
1152
- `})],v);export{m as ColumnChooserComponent,p as ColumnHeaderFilterComponent,c as ColumnHeaderMenuComponent,t as DataGridTableComponent,u as InlineCellEditorComponent,v as OGridComponent,h as PaginationControlsComponent,g as PopoverCellEditorComponent};
1
+ // Explicit named re-exports from base package (replaces export * for better tree-shaking).
2
+ // Core value exports
3
+ export { toUserLike, isInSelectionRange, normalizeSelectionRange, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, isFilterConfig, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, isRowInRange, getPinStateForColumn, reorderColumnArray, calculateDropTarget, computeVisibleRange, computeTotalHeight, getScrollTopForRow, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, debounce, measureRange, injectGlobalStyles, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, computeArrowNavigation, applyCellDeletion, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, applyRangeRowSelection, computeRowSelectionState, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, UndoRedoStack, validateColumns, validateRowIds, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-angular';
4
+ // Angular services and components
5
+ export { OGridService, DataGridStateService, DataGridLayoutHelper, DataGridEditingHelper, DataGridInteractionHelper, ColumnReorderService, VirtualScrollService, OGridLayoutComponent, StatusBarComponent, GridContextMenuComponent, SideBarComponent, MarchingAntsOverlayComponent, EmptyStateComponent, BaseOGridComponent, BaseDataGridTableComponent, BaseColumnHeaderFilterComponent, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseInlineCellEditorComponent, INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES, BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, OGRID_THEME_VARS_CSS, createDebouncedSignal, createDebouncedCallback, createLatestCallback, } from '@alaarab/ogrid-angular';
6
+ // PrimeNG UI components
7
+ export { OGridComponent } from './ogrid/ogrid.component';
8
+ export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
9
+ export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';
10
+ export { PopoverCellEditorComponent } from './datagrid-table/popover-cell-editor.component';
11
+ export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
12
+ // IColumnHeaderFilterProps is now exported from @alaarab/ogrid-angular (base class)
13
+ export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
14
+ // IColumnChooserProps is now exported from @alaarab/ogrid-angular (base class)
15
+ export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
16
+ export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';