@dlh.io/bideux 0.1.0
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/LICENSE +202 -0
- package/README.md +90 -0
- package/dist/all.d.ts +14 -0
- package/dist/all.js +15 -0
- package/dist/all.js.map +1 -0
- package/dist/chunk-62IQGXLW.js +11470 -0
- package/dist/chunk-62IQGXLW.js.map +1 -0
- package/dist/chunk-75CRTQK7.js +315 -0
- package/dist/chunk-75CRTQK7.js.map +1 -0
- package/dist/chunk-FVO6E22Z.js +225 -0
- package/dist/chunk-FVO6E22Z.js.map +1 -0
- package/dist/chunk-GRITOB4M.js +337 -0
- package/dist/chunk-GRITOB4M.js.map +1 -0
- package/dist/chunk-HPFHIZWO.js +40 -0
- package/dist/chunk-HPFHIZWO.js.map +1 -0
- package/dist/chunk-IMNUQGHE.js +2864 -0
- package/dist/chunk-IMNUQGHE.js.map +1 -0
- package/dist/chunk-LHD445PJ.js +571 -0
- package/dist/chunk-LHD445PJ.js.map +1 -0
- package/dist/chunk-LPLBBHOW.js +386 -0
- package/dist/chunk-LPLBBHOW.js.map +1 -0
- package/dist/chunk-NGM5R3LW.js +881 -0
- package/dist/chunk-NGM5R3LW.js.map +1 -0
- package/dist/chunk-OMPR32AR.js +1320 -0
- package/dist/chunk-OMPR32AR.js.map +1 -0
- package/dist/chunk-QDQ5VVTC.js +255 -0
- package/dist/chunk-QDQ5VVTC.js.map +1 -0
- package/dist/chunk-RRWZKNDZ.js +1004 -0
- package/dist/chunk-RRWZKNDZ.js.map +1 -0
- package/dist/chunk-SRWIBMEB.js +178 -0
- package/dist/chunk-SRWIBMEB.js.map +1 -0
- package/dist/element/chunk-AOKCBPMV.js +1646 -0
- package/dist/element/chunk-AOKCBPMV.js.map +1 -0
- package/dist/element/chunk-B67SYRQP.js +281 -0
- package/dist/element/chunk-B67SYRQP.js.map +1 -0
- package/dist/element/chunk-FNRVFA2C.js +55 -0
- package/dist/element/chunk-FNRVFA2C.js.map +1 -0
- package/dist/element/chunk-G3C722QP.js +4707 -0
- package/dist/element/chunk-G3C722QP.js.map +1 -0
- package/dist/element/chunk-H5IFOSQP.js +346 -0
- package/dist/element/chunk-H5IFOSQP.js.map +1 -0
- package/dist/element/chunk-LXR3CLCN.js +30 -0
- package/dist/element/chunk-LXR3CLCN.js.map +1 -0
- package/dist/element/chunk-TFV4CJR4.js +183 -0
- package/dist/element/chunk-TFV4CJR4.js.map +1 -0
- package/dist/element/chunk-TXSK3CIN.js +859 -0
- package/dist/element/chunk-TXSK3CIN.js.map +1 -0
- package/dist/element/chunk-WDTTBY3S.js +45 -0
- package/dist/element/chunk-WDTTBY3S.js.map +1 -0
- package/dist/element/chunk-ZI3RYCAR.js +233 -0
- package/dist/element/chunk-ZI3RYCAR.js.map +1 -0
- package/dist/element/element.d.ts +3044 -0
- package/dist/element/element.js +146554 -0
- package/dist/element/element.js.map +1 -0
- package/dist/element/revo-grid.entry-7FHEBN3O.js +4817 -0
- package/dist/element/revo-grid.entry-7FHEBN3O.js.map +1 -0
- package/dist/element/revogr-attribution_7.entry-LSOFVZRA.js +1328 -0
- package/dist/element/revogr-attribution_7.entry-LSOFVZRA.js.map +1 -0
- package/dist/element/revogr-clipboard_3.entry-V74UIBPJ.js +494 -0
- package/dist/element/revogr-clipboard_3.entry-V74UIBPJ.js.map +1 -0
- package/dist/element/revogr-data_4.entry-2UBOKTFN.js +1041 -0
- package/dist/element/revogr-data_4.entry-2UBOKTFN.js.map +1 -0
- package/dist/element/revogr-filter-panel.entry-B24PLQU4.js +552 -0
- package/dist/element/revogr-filter-panel.entry-B24PLQU4.js.map +1 -0
- package/dist/index.d.ts +1041 -0
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -0
- package/dist/react.d.ts +1915 -0
- package/dist/react.js +14 -0
- package/dist/react.js.map +1 -0
- package/dist/renderers/echarts.d.ts +44 -0
- package/dist/renderers/echarts.js +6 -0
- package/dist/renderers/echarts.js.map +1 -0
- package/dist/renderers/index.d.ts +48 -0
- package/dist/renderers/index.js +12 -0
- package/dist/renderers/index.js.map +1 -0
- package/dist/renderers/revogrid.d.ts +76 -0
- package/dist/renderers/revogrid.js +6 -0
- package/dist/renderers/revogrid.js.map +1 -0
- package/dist/renderers/tabulator.d.ts +37 -0
- package/dist/renderers/tabulator.js +6 -0
- package/dist/renderers/tabulator.js.map +1 -0
- package/dist/result-table-CPls-277.d.ts +1885 -0
- package/dist/schema/dashboard.schema.json +4374 -0
- package/dist/schema/semantic-model.schema.json +1200 -0
- package/dist/schema/widget.schema.json +1793 -0
- package/dist/styles.css +156 -0
- package/dist/theme.css +1789 -0
- package/dist/types-CHFSsU_X.d.ts +1007 -0
- package/package.json +119 -0
|
@@ -0,0 +1,4817 @@
|
|
|
1
|
+
import { getPropertyFromEvent, calculateRowHeaderSize, ViewportStore } from './chunk-H5IFOSQP.js';
|
|
2
|
+
import { timeout, getScrollbarSize } from './chunk-LXR3CLCN.js';
|
|
3
|
+
import { ON_COLUMN_CLICK, dispatch } from './chunk-B67SYRQP.js';
|
|
4
|
+
import { FILTER_PROP, isFilterBtn } from './chunk-WDTTBY3S.js';
|
|
5
|
+
import { getColumnByProp, getColumns, rowTypes, HEADER_SLOT, DATA_SLOT, GROUPING_ROW_TYPE, isGrouping, getSource, getExpanded, PSEUDO_GROUP_COLUMN, columnTypes, gatherGrouping, GROUP_EXPAND_EVENT, isGroupingColumn, getColumnType, reduce, getCellDataParsed, isColGrouping, getColumnSizes, getScrollDimension, cropCellToMax, nextCell, isRowType, viewportDataPartition, FOOTER_SLOT, CONTENT_SLOT, getParsedGroup, PSEUDO_GROUP_ITEM_ID, GROUP_EXPANDED, isSameGroup, GROUP_DEPTH, PSEUDO_GROUP_ITEM_VALUE, baseEach, getGroupingName, GROUP_COLUMN_PROP, getRange, toInteger, getCellRaw } from './chunk-TXSK3CIN.js';
|
|
6
|
+
import { getVisibleSourceItem, getPhysical, setItems, getSourceItem, getItemByPosition, RESIZE_INTERVAL, gatherTrimmedItems, getItemByIndex, DataStore, getSourceItemVirtualIndexByProp, setSourceByPhysicalIndex, setSourceByVirtualIndex, isArray, createStore, setStore, calculateDimensionData, identity } from './chunk-AOKCBPMV.js';
|
|
7
|
+
import { debounce } from './chunk-TFV4CJR4.js';
|
|
8
|
+
import { registerInstance, createEvent, h, Host, getElement } from './chunk-G3C722QP.js';
|
|
9
|
+
|
|
10
|
+
// ../../node_modules/.pnpm/@revolist+revogrid@4.25.2/node_modules/@revolist/revogrid/dist/esm/column.drag.plugin-DKgC_0I1.js
|
|
11
|
+
var themeTokenCssVariables = {
|
|
12
|
+
primary: "--revo-grid-primary",
|
|
13
|
+
primaryTransparent: "--revo-grid-primary-transparent",
|
|
14
|
+
background: "--revo-grid-background",
|
|
15
|
+
foreground: "--revo-grid-foreground",
|
|
16
|
+
divider: "--revo-grid-divider",
|
|
17
|
+
shadow: "--revo-grid-shadow",
|
|
18
|
+
text: "--revo-grid-text",
|
|
19
|
+
border: "--revo-grid-border",
|
|
20
|
+
headerBg: "--revo-grid-header-bg",
|
|
21
|
+
headerColor: "--revo-grid-header-color",
|
|
22
|
+
headerBorder: "--revo-grid-header-border",
|
|
23
|
+
headerFocusedBg: "--revo-grid-header-focused-bg",
|
|
24
|
+
headerHoverBg: "--revo-grid-header-hover-bg",
|
|
25
|
+
cellBorder: "--revo-grid-cell-border",
|
|
26
|
+
cellVerticalBorder: "--revo-grid-cell-vertical-border",
|
|
27
|
+
focusedBg: "--revo-grid-focused-bg",
|
|
28
|
+
rowHover: "--revo-grid-row-hover",
|
|
29
|
+
rowHeadersBg: "--revo-grid-row-headers-bg",
|
|
30
|
+
rowHeadersColor: "--revo-grid-row-headers-color",
|
|
31
|
+
cellDisabledBg: "--revo-grid-cell-disabled-bg",
|
|
32
|
+
filterPanelBg: "--revo-grid-filter-panel-bg",
|
|
33
|
+
filterPanelBorder: "--revo-grid-filter-panel-border",
|
|
34
|
+
filterPanelShadow: "--revo-grid-filter-panel-shadow",
|
|
35
|
+
filterPanelInputBg: "--revo-grid-filter-panel-input-bg",
|
|
36
|
+
filterPanelDivider: "--revo-grid-filter-panel-divider",
|
|
37
|
+
filterPanelSelectBorder: "--revo-grid-filter-panel-select-border",
|
|
38
|
+
filterPanelSelectBorderHover: "--revo-grid-filter-panel-select-border-hover",
|
|
39
|
+
filterPanelReorderAccent: "--revo-grid-filter-panel-reorder-accent",
|
|
40
|
+
filterPanelReorderColor: "--revo-grid-filter-panel-reorder-color",
|
|
41
|
+
filterPanelText: "--revo-grid-filter-panel-text",
|
|
42
|
+
filterPanelMutedText: "--revo-grid-filter-panel-muted-text",
|
|
43
|
+
filterPanelFocusRing: "--revo-grid-filter-panel-focus-ring",
|
|
44
|
+
filterPanelIcon: "--revo-grid-filter-panel-icon",
|
|
45
|
+
filterPanelIconActive: "--revo-grid-filter-panel-icon-active",
|
|
46
|
+
filterPanelSelectArrow: "--revo-grid-filter-panel-select-arrow",
|
|
47
|
+
filterPanelSelectArrowDisabled: "--revo-grid-filter-panel-select-arrow-disabled",
|
|
48
|
+
fontFamily: "--revo-grid-font-family",
|
|
49
|
+
fontSize: "--revo-grid-font-size",
|
|
50
|
+
headerHeight: "--revo-grid-header-height",
|
|
51
|
+
headerFontSize: "--revo-grid-header-font-size",
|
|
52
|
+
headerFontWeight: "--revo-grid-header-font-weight",
|
|
53
|
+
headerTextTransform: "--revo-grid-header-text-transform",
|
|
54
|
+
headerTextAlign: "--revo-grid-header-text-align",
|
|
55
|
+
cellTextAlign: "--revo-grid-cell-text-align",
|
|
56
|
+
headerPadding: "--revo-grid-header-padding",
|
|
57
|
+
cellPadding: "--revo-grid-cell-padding",
|
|
58
|
+
selectionBorder: "--revo-grid-selection-border",
|
|
59
|
+
selectionBg: "--revo-grid-selection-bg",
|
|
60
|
+
autofillHandleBg: "--revo-grid-autofill-handle-bg",
|
|
61
|
+
autofillHandleBorder: "--revo-grid-autofill-handle-border",
|
|
62
|
+
rangeHandleBg: "--revo-grid-range-handle-bg",
|
|
63
|
+
temporaryRangeBorder: "--revo-grid-temporary-range-border",
|
|
64
|
+
temporarySelectionBorder: "--revo-grid-temporary-selection-border",
|
|
65
|
+
headerResizeHover: "--revo-grid-header-resize-hover",
|
|
66
|
+
buttonText: "--revo-grid-button-text",
|
|
67
|
+
buttonBg: "--revo-grid-button-bg",
|
|
68
|
+
buttonSuccessBg: "--revo-grid-button-success-bg",
|
|
69
|
+
buttonDangerBg: "--revo-grid-button-danger-bg",
|
|
70
|
+
buttonOutlineBorder: "--revo-grid-button-outline-border",
|
|
71
|
+
buttonOutlineText: "--revo-grid-button-outline-text"
|
|
72
|
+
};
|
|
73
|
+
function calculateRealSize({ count, originItemSize, sizes }) {
|
|
74
|
+
const safeCount = Math.max(0, count);
|
|
75
|
+
let realSize = safeCount * originItemSize;
|
|
76
|
+
for (let index in sizes) {
|
|
77
|
+
const itemIndex = Number(index);
|
|
78
|
+
if (!Number.isInteger(itemIndex) || itemIndex < 0 || itemIndex >= safeCount || String(itemIndex) !== index) {
|
|
79
|
+
continue;
|
|
80
|
+
}
|
|
81
|
+
realSize += sizes[index] - originItemSize;
|
|
82
|
+
}
|
|
83
|
+
return realSize;
|
|
84
|
+
}
|
|
85
|
+
var recalculateRealSizePlugin = (storeService) => {
|
|
86
|
+
return {
|
|
87
|
+
/**
|
|
88
|
+
* Reacts on changes of count, sizes and originItemSize
|
|
89
|
+
*/
|
|
90
|
+
set(k) {
|
|
91
|
+
switch (k) {
|
|
92
|
+
case "count":
|
|
93
|
+
case "sizes":
|
|
94
|
+
case "originItemSize": {
|
|
95
|
+
storeService.setStore({
|
|
96
|
+
realSize: calculateRealSize({
|
|
97
|
+
count: storeService.store.get("count"),
|
|
98
|
+
sizes: storeService.store.get("sizes"),
|
|
99
|
+
originItemSize: storeService.store.get("originItemSize")
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
break;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
var trimmedPlugin = (storeService) => {
|
|
109
|
+
let trimmingObject = null;
|
|
110
|
+
let trimmedPreviousSizes = null;
|
|
111
|
+
return {
|
|
112
|
+
set(key, val) {
|
|
113
|
+
switch (key) {
|
|
114
|
+
case "sizes": {
|
|
115
|
+
if (trimmingObject && trimmingObject === val) {
|
|
116
|
+
trimmingObject = null;
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
trimmedPreviousSizes = null;
|
|
120
|
+
break;
|
|
121
|
+
}
|
|
122
|
+
case "trimmed": {
|
|
123
|
+
const trim = val;
|
|
124
|
+
if (!trimmedPreviousSizes) {
|
|
125
|
+
trimmedPreviousSizes = storeService.store.get("sizes");
|
|
126
|
+
}
|
|
127
|
+
trimmingObject = removeMultipleAndShift(trimmedPreviousSizes, trim || {});
|
|
128
|
+
storeService.setSizes(trimmingObject);
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
function removeMultipleAndShift(items, toRemove) {
|
|
136
|
+
const newItems = {};
|
|
137
|
+
const sortedIndexes = Object.keys(items || {}).map(Number).sort((a, b) => a - b);
|
|
138
|
+
const lastIndex = sortedIndexes[sortedIndexes.length - 1];
|
|
139
|
+
let shift = 0;
|
|
140
|
+
for (let i = 0; i <= lastIndex; i++) {
|
|
141
|
+
if (toRemove[i] !== void 0) {
|
|
142
|
+
shift++;
|
|
143
|
+
if (items[i] !== void 0) {
|
|
144
|
+
continue;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
if (items[i] !== void 0) {
|
|
148
|
+
newItems[i - shift] = items[i];
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
return newItems;
|
|
152
|
+
}
|
|
153
|
+
function initialBase() {
|
|
154
|
+
return {
|
|
155
|
+
indexes: [],
|
|
156
|
+
count: 0,
|
|
157
|
+
// hidden items
|
|
158
|
+
trimmed: null,
|
|
159
|
+
// virtual item index to size
|
|
160
|
+
sizes: {},
|
|
161
|
+
// order in indexes[] to coordinate
|
|
162
|
+
positionIndexToItem: {},
|
|
163
|
+
// initial element to coordinate ^
|
|
164
|
+
indexToItem: {},
|
|
165
|
+
positionIndexes: []
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
function initialState() {
|
|
169
|
+
return Object.assign(Object.assign({}, initialBase()), {
|
|
170
|
+
// size which all items can take
|
|
171
|
+
realSize: 0,
|
|
172
|
+
// initial item size if it wasn't changed
|
|
173
|
+
originItemSize: 0,
|
|
174
|
+
// logical-to-physical render offset used when scroll space is compressed
|
|
175
|
+
renderOffset: 0
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
var DimensionStore = class {
|
|
179
|
+
constructor(type) {
|
|
180
|
+
this.type = type;
|
|
181
|
+
this.store = createStore(initialState());
|
|
182
|
+
this.store.use(trimmedPlugin({
|
|
183
|
+
store: this.store,
|
|
184
|
+
setSizes: this.setDimensionSize.bind(this)
|
|
185
|
+
}));
|
|
186
|
+
this.store.use(recalculateRealSizePlugin({
|
|
187
|
+
store: this.store,
|
|
188
|
+
setStore: this.setStore.bind(this)
|
|
189
|
+
}));
|
|
190
|
+
}
|
|
191
|
+
getCurrentState() {
|
|
192
|
+
const state = initialState();
|
|
193
|
+
const keys = Object.keys(state);
|
|
194
|
+
return reduce(keys, (r, k) => {
|
|
195
|
+
const data = this.store.get(k);
|
|
196
|
+
r[k] = data;
|
|
197
|
+
return r;
|
|
198
|
+
}, state);
|
|
199
|
+
}
|
|
200
|
+
dispose() {
|
|
201
|
+
setStore(this.store, initialState());
|
|
202
|
+
}
|
|
203
|
+
setStore(data) {
|
|
204
|
+
setStore(this.store, data);
|
|
205
|
+
}
|
|
206
|
+
drop() {
|
|
207
|
+
setStore(this.store, Object.assign(Object.assign({}, initialBase()), { renderOffset: 0 }));
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Set custom dimension sizes and overwrite old
|
|
211
|
+
* Generates new indexes based on sizes
|
|
212
|
+
* @param sizes - sizes to set
|
|
213
|
+
*/
|
|
214
|
+
setDimensionSize(sizes = {}) {
|
|
215
|
+
const dimensionData = calculateDimensionData(this.store.get("originItemSize"), sizes);
|
|
216
|
+
setStore(this.store, Object.assign(Object.assign({}, dimensionData), { sizes }));
|
|
217
|
+
}
|
|
218
|
+
updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder = []) {
|
|
219
|
+
const customSizes = Object.assign({}, this.store.get("sizes"));
|
|
220
|
+
if (!Object.keys(customSizes).length) {
|
|
221
|
+
return;
|
|
222
|
+
}
|
|
223
|
+
const originalIndices = {};
|
|
224
|
+
prevItemsOrder.forEach((physIndex, virtIndex) => {
|
|
225
|
+
if (!originalIndices[physIndex]) {
|
|
226
|
+
originalIndices[physIndex] = [];
|
|
227
|
+
}
|
|
228
|
+
originalIndices[physIndex].push(virtIndex);
|
|
229
|
+
});
|
|
230
|
+
const newSizes = {};
|
|
231
|
+
newItemsOrder.forEach((physIndex, virtIndex) => {
|
|
232
|
+
const indices = originalIndices[physIndex];
|
|
233
|
+
if (indices && indices.length > 0) {
|
|
234
|
+
const originalIndex = indices.shift();
|
|
235
|
+
if (originalIndex !== void 0 && originalIndex !== virtIndex && typeof customSizes[originalIndex] === "number") {
|
|
236
|
+
newSizes[virtIndex] = customSizes[originalIndex];
|
|
237
|
+
delete customSizes[originalIndex];
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
});
|
|
241
|
+
if (Object.keys(newSizes).length) {
|
|
242
|
+
this.setDimensionSize(Object.assign(Object.assign({}, customSizes), newSizes));
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
function defaultState() {
|
|
247
|
+
return {
|
|
248
|
+
range: null,
|
|
249
|
+
tempRange: null,
|
|
250
|
+
tempRangeType: null,
|
|
251
|
+
focus: null,
|
|
252
|
+
edit: null,
|
|
253
|
+
lastCell: null,
|
|
254
|
+
nextFocus: null
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
var SelectionStore = class {
|
|
258
|
+
constructor() {
|
|
259
|
+
this.unsubscribe = [];
|
|
260
|
+
this.store = createStore(defaultState());
|
|
261
|
+
this.store.on("set", (key, newVal) => {
|
|
262
|
+
if (key === "tempRange" && !newVal) {
|
|
263
|
+
this.store.set("tempRangeType", null);
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
onChange(propName, cb) {
|
|
268
|
+
this.unsubscribe.push(this.store.onChange(propName, cb));
|
|
269
|
+
}
|
|
270
|
+
clearFocus() {
|
|
271
|
+
setStore(this.store, { focus: null, range: null, edit: null, tempRange: null });
|
|
272
|
+
}
|
|
273
|
+
setFocus(focus, end) {
|
|
274
|
+
if (!end) {
|
|
275
|
+
setStore(this.store, { focus });
|
|
276
|
+
} else {
|
|
277
|
+
setStore(this.store, {
|
|
278
|
+
focus,
|
|
279
|
+
range: getRange(focus, end),
|
|
280
|
+
edit: null,
|
|
281
|
+
tempRange: null
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
setNextFocus(focus) {
|
|
286
|
+
setStore(this.store, { nextFocus: focus });
|
|
287
|
+
}
|
|
288
|
+
setTempArea(range) {
|
|
289
|
+
setStore(this.store, { tempRange: range === null || range === void 0 ? void 0 : range.area, tempRangeType: range === null || range === void 0 ? void 0 : range.type, edit: null });
|
|
290
|
+
}
|
|
291
|
+
clearTemp() {
|
|
292
|
+
setStore(this.store, { tempRange: null });
|
|
293
|
+
}
|
|
294
|
+
/** Can be applied from selection change or from simple keyboard change clicks */
|
|
295
|
+
setRangeArea(range) {
|
|
296
|
+
setStore(this.store, { range, edit: null, tempRange: null });
|
|
297
|
+
}
|
|
298
|
+
setRange(start, end) {
|
|
299
|
+
const range = getRange(start, end);
|
|
300
|
+
this.setRangeArea(range);
|
|
301
|
+
}
|
|
302
|
+
setLastCell(lastCell) {
|
|
303
|
+
setStore(this.store, { lastCell });
|
|
304
|
+
}
|
|
305
|
+
setEdit(val) {
|
|
306
|
+
const focus = this.store.get("focus");
|
|
307
|
+
if (focus && typeof val === "string") {
|
|
308
|
+
setStore(this.store, {
|
|
309
|
+
edit: { x: focus.x, y: focus.y, val }
|
|
310
|
+
});
|
|
311
|
+
return;
|
|
312
|
+
}
|
|
313
|
+
setStore(this.store, { edit: null });
|
|
314
|
+
}
|
|
315
|
+
dispose() {
|
|
316
|
+
this.unsubscribe.forEach((f) => f());
|
|
317
|
+
this.store.dispose();
|
|
318
|
+
}
|
|
319
|
+
};
|
|
320
|
+
var BasePlugin = class {
|
|
321
|
+
constructor(revogrid, providers) {
|
|
322
|
+
this.revogrid = revogrid;
|
|
323
|
+
this.providers = providers;
|
|
324
|
+
this.h = h;
|
|
325
|
+
this.subscriptions = {};
|
|
326
|
+
}
|
|
327
|
+
/**
|
|
328
|
+
*
|
|
329
|
+
* @param eventName - event name to subscribe to in revo-grid component (e.g. 'beforeheaderclick')
|
|
330
|
+
* @param callback - callback function for event
|
|
331
|
+
*/
|
|
332
|
+
addEventListener(eventName, callback) {
|
|
333
|
+
this.revogrid.addEventListener(eventName, callback);
|
|
334
|
+
this.subscriptions[eventName] = callback;
|
|
335
|
+
}
|
|
336
|
+
/**
|
|
337
|
+
* Subscribe to property change in revo-grid component
|
|
338
|
+
* You can return false in callback to prevent default value set
|
|
339
|
+
*
|
|
340
|
+
* @param prop - property name
|
|
341
|
+
* @param callback - callback function
|
|
342
|
+
* @param immediate - trigger callback immediately with current value
|
|
343
|
+
*/
|
|
344
|
+
watch(prop, callback, { immediate } = { immediate: false }) {
|
|
345
|
+
var _a;
|
|
346
|
+
const nativeValueDesc = Object.getOwnPropertyDescriptor(this.revogrid, prop) || Object.getOwnPropertyDescriptor(this.revogrid.constructor.prototype, prop);
|
|
347
|
+
Object.defineProperty(this.revogrid, prop, {
|
|
348
|
+
configurable: true,
|
|
349
|
+
enumerable: (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.enumerable) !== null && _a !== void 0 ? _a : true,
|
|
350
|
+
set(val) {
|
|
351
|
+
var _a2;
|
|
352
|
+
const keepDefault = callback(val);
|
|
353
|
+
if (keepDefault === false) {
|
|
354
|
+
return;
|
|
355
|
+
}
|
|
356
|
+
return (_a2 = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.set) === null || _a2 === void 0 ? void 0 : _a2.call(this, val);
|
|
357
|
+
},
|
|
358
|
+
get() {
|
|
359
|
+
var _a2;
|
|
360
|
+
return (_a2 = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.get) === null || _a2 === void 0 ? void 0 : _a2.call(this);
|
|
361
|
+
}
|
|
362
|
+
});
|
|
363
|
+
if (immediate) {
|
|
364
|
+
callback((nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.get) ? nativeValueDesc.get.call(this.revogrid) : nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.value);
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* Remove event listener
|
|
369
|
+
* @param eventName
|
|
370
|
+
*/
|
|
371
|
+
removeEventListener(eventName) {
|
|
372
|
+
this.revogrid.removeEventListener(eventName, this.subscriptions[eventName]);
|
|
373
|
+
delete this.subscriptions[eventName];
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* Emit event from revo-grid component
|
|
377
|
+
* Event can be cancelled by calling event.preventDefault() in callback
|
|
378
|
+
*/
|
|
379
|
+
emit(eventName, detail) {
|
|
380
|
+
const event = new CustomEvent(eventName, { detail, cancelable: true });
|
|
381
|
+
this.revogrid.dispatchEvent(event);
|
|
382
|
+
return event;
|
|
383
|
+
}
|
|
384
|
+
/**
|
|
385
|
+
* Clear all subscriptions
|
|
386
|
+
*/
|
|
387
|
+
clearSubscriptions() {
|
|
388
|
+
for (let type in this.subscriptions) {
|
|
389
|
+
this.removeEventListener(type);
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
/**
|
|
393
|
+
* Destroy plugin and clear all subscriptions
|
|
394
|
+
*/
|
|
395
|
+
destroy() {
|
|
396
|
+
this.clearSubscriptions();
|
|
397
|
+
}
|
|
398
|
+
};
|
|
399
|
+
function arrayEach(array, iteratee) {
|
|
400
|
+
var index = -1, length = array == null ? 0 : array.length;
|
|
401
|
+
while (++index < length) {
|
|
402
|
+
if (iteratee(array[index], index, array) === false) {
|
|
403
|
+
break;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
return array;
|
|
407
|
+
}
|
|
408
|
+
function castFunction(value) {
|
|
409
|
+
return typeof value == "function" ? value : identity;
|
|
410
|
+
}
|
|
411
|
+
function forEach(collection, iteratee) {
|
|
412
|
+
var func = isArray(collection) ? arrayEach : baseEach;
|
|
413
|
+
return func(collection, castFunction(iteratee));
|
|
414
|
+
}
|
|
415
|
+
var LETTER_BLOCK_SIZE = 7;
|
|
416
|
+
var ColumnAutoSizeMode;
|
|
417
|
+
(function(ColumnAutoSizeMode2) {
|
|
418
|
+
ColumnAutoSizeMode2["headerClickAutosize"] = "headerClickAutoSize";
|
|
419
|
+
ColumnAutoSizeMode2["autoSizeOnTextOverlap"] = "autoSizeOnTextOverlap";
|
|
420
|
+
ColumnAutoSizeMode2["autoSizeAll"] = "autoSizeAll";
|
|
421
|
+
})(ColumnAutoSizeMode || (ColumnAutoSizeMode = {}));
|
|
422
|
+
var AutoSizeColumnPlugin = class extends BasePlugin {
|
|
423
|
+
constructor(revogrid, providers, config) {
|
|
424
|
+
super(revogrid, providers);
|
|
425
|
+
this.providers = providers;
|
|
426
|
+
this.config = config;
|
|
427
|
+
this.autoSizeColumns = null;
|
|
428
|
+
this.dataResolve = null;
|
|
429
|
+
this.dataReject = null;
|
|
430
|
+
this.letterBlockSize = (config === null || config === void 0 ? void 0 : config.letterBlockSize) || LETTER_BLOCK_SIZE;
|
|
431
|
+
if (config === null || config === void 0 ? void 0 : config.preciseSize) {
|
|
432
|
+
this.precsizeCalculationArea = this.initiatePresizeElement();
|
|
433
|
+
revogrid.appendChild(this.precsizeCalculationArea);
|
|
434
|
+
}
|
|
435
|
+
const aftersourceset = ({ detail: { source } }) => {
|
|
436
|
+
this.setSource(source);
|
|
437
|
+
};
|
|
438
|
+
const beforecolumnsset = ({ detail: { columns } }) => {
|
|
439
|
+
this.columnSet(columns);
|
|
440
|
+
};
|
|
441
|
+
this.addEventListener("beforecolumnsset", beforecolumnsset);
|
|
442
|
+
switch (config === null || config === void 0 ? void 0 : config.mode) {
|
|
443
|
+
case ColumnAutoSizeMode.autoSizeOnTextOverlap:
|
|
444
|
+
this.addEventListener("aftersourceset", aftersourceset);
|
|
445
|
+
this.addEventListener("afteredit", ({ detail }) => {
|
|
446
|
+
this.afteredit(detail);
|
|
447
|
+
});
|
|
448
|
+
break;
|
|
449
|
+
case ColumnAutoSizeMode.autoSizeAll:
|
|
450
|
+
this.addEventListener("aftersourceset", aftersourceset);
|
|
451
|
+
this.addEventListener("afteredit", ({ detail }) => {
|
|
452
|
+
this.afterEditAll(detail);
|
|
453
|
+
});
|
|
454
|
+
break;
|
|
455
|
+
default:
|
|
456
|
+
this.addEventListener("headerdblclick", ({ detail }) => {
|
|
457
|
+
const type = getColumnType(detail.column);
|
|
458
|
+
const size = this.getColumnSize(detail.index, type);
|
|
459
|
+
if (size) {
|
|
460
|
+
this.providers.dimension.setCustomSizes(type, {
|
|
461
|
+
[detail.index]: size
|
|
462
|
+
}, true);
|
|
463
|
+
}
|
|
464
|
+
});
|
|
465
|
+
break;
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
async setSource(source) {
|
|
469
|
+
let autoSize = this.autoSizeColumns;
|
|
470
|
+
if (this.dataReject) {
|
|
471
|
+
this.dataReject();
|
|
472
|
+
this.clearPromise();
|
|
473
|
+
}
|
|
474
|
+
if (!autoSize) {
|
|
475
|
+
const request = new Promise((resolve, reject) => {
|
|
476
|
+
this.dataResolve = resolve;
|
|
477
|
+
this.dataReject = reject;
|
|
478
|
+
});
|
|
479
|
+
try {
|
|
480
|
+
autoSize = await request;
|
|
481
|
+
} catch (e) {
|
|
482
|
+
return;
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
forEach(autoSize, (_v, type) => {
|
|
486
|
+
const sizes = {};
|
|
487
|
+
forEach(autoSize[type], (rgCol) => {
|
|
488
|
+
rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), this.getLength(rgCol.name || ""));
|
|
489
|
+
});
|
|
490
|
+
this.providers.dimension.setCustomSizes(type, sizes, true);
|
|
491
|
+
});
|
|
492
|
+
}
|
|
493
|
+
getLength(len) {
|
|
494
|
+
var _a;
|
|
495
|
+
const padding = 15;
|
|
496
|
+
if (!len) {
|
|
497
|
+
return 0;
|
|
498
|
+
}
|
|
499
|
+
try {
|
|
500
|
+
const str = len.toString();
|
|
501
|
+
if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.preciseSize) {
|
|
502
|
+
this.precsizeCalculationArea.innerText = str;
|
|
503
|
+
return this.precsizeCalculationArea.scrollWidth + padding * 2;
|
|
504
|
+
}
|
|
505
|
+
return str.length * this.letterBlockSize + padding * 2;
|
|
506
|
+
} catch (e) {
|
|
507
|
+
return 0;
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
afteredit(e) {
|
|
511
|
+
let data;
|
|
512
|
+
if (this.isRangeEdit(e)) {
|
|
513
|
+
data = e.data;
|
|
514
|
+
} else {
|
|
515
|
+
data = { 0: { [e.prop]: e.val } };
|
|
516
|
+
}
|
|
517
|
+
forEach(this.autoSizeColumns, (columns, type) => {
|
|
518
|
+
const sizes = {};
|
|
519
|
+
forEach(columns, (rgCol) => {
|
|
520
|
+
var _a;
|
|
521
|
+
const size = reduce(data, (prev, rgRow) => {
|
|
522
|
+
if (typeof rgRow[rgCol.prop] === "undefined") {
|
|
523
|
+
return prev;
|
|
524
|
+
}
|
|
525
|
+
return Math.max(prev || 0, this.getLength(rgRow[rgCol.prop]));
|
|
526
|
+
}, void 0);
|
|
527
|
+
if (size && ((_a = rgCol.size) !== null && _a !== void 0 ? _a : 0) < size) {
|
|
528
|
+
rgCol.size = sizes[rgCol.index] = size;
|
|
529
|
+
}
|
|
530
|
+
});
|
|
531
|
+
this.providers.dimension.setCustomSizes(type, sizes, true);
|
|
532
|
+
});
|
|
533
|
+
}
|
|
534
|
+
afterEditAll(e) {
|
|
535
|
+
const props = {};
|
|
536
|
+
if (this.isRangeEdit(e)) {
|
|
537
|
+
forEach(e.data, (r) => forEach(r, (_v, p) => props[p] = true));
|
|
538
|
+
} else {
|
|
539
|
+
props[e.prop] = true;
|
|
540
|
+
}
|
|
541
|
+
forEach(this.autoSizeColumns, (columns, type) => {
|
|
542
|
+
const sizes = {};
|
|
543
|
+
forEach(columns, (rgCol) => {
|
|
544
|
+
if (props[rgCol.prop]) {
|
|
545
|
+
const size = this.getColumnSize(rgCol.index, type);
|
|
546
|
+
if (size) {
|
|
547
|
+
sizes[rgCol.index] = size;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
});
|
|
551
|
+
this.providers.dimension.setCustomSizes(type, sizes, true);
|
|
552
|
+
});
|
|
553
|
+
}
|
|
554
|
+
getColumnSize(index, type) {
|
|
555
|
+
var _a, _b;
|
|
556
|
+
const rgCol = (_b = (_a = this.autoSizeColumns) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b[index];
|
|
557
|
+
if (!rgCol) {
|
|
558
|
+
return 0;
|
|
559
|
+
}
|
|
560
|
+
return reduce(this.providers.data.stores, (r, s) => {
|
|
561
|
+
const perStore = reduce(s.store.get("items"), (prev, _row, i) => {
|
|
562
|
+
const item = getSourceItem(s.store, i);
|
|
563
|
+
return Math.max(prev || 0, this.getLength(item === null || item === void 0 ? void 0 : item[rgCol.prop]));
|
|
564
|
+
}, 0);
|
|
565
|
+
return Math.max(r, perStore);
|
|
566
|
+
}, rgCol.size || 0);
|
|
567
|
+
}
|
|
568
|
+
columnSet(columns) {
|
|
569
|
+
var _a;
|
|
570
|
+
for (let t of columnTypes) {
|
|
571
|
+
const type = t;
|
|
572
|
+
const cols = columns[type];
|
|
573
|
+
for (let i in cols) {
|
|
574
|
+
if (cols[i].autoSize || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.allColumns)) {
|
|
575
|
+
if (!this.autoSizeColumns) {
|
|
576
|
+
this.autoSizeColumns = {};
|
|
577
|
+
}
|
|
578
|
+
if (!this.autoSizeColumns[type]) {
|
|
579
|
+
this.autoSizeColumns[type] = {};
|
|
580
|
+
}
|
|
581
|
+
this.autoSizeColumns[type][i] = Object.assign(Object.assign({}, cols[i]), { index: parseInt(i, 10) });
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
if (this.dataResolve) {
|
|
586
|
+
this.dataResolve(this.autoSizeColumns || {});
|
|
587
|
+
this.clearPromise();
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
clearPromise() {
|
|
591
|
+
this.dataResolve = null;
|
|
592
|
+
this.dataReject = null;
|
|
593
|
+
}
|
|
594
|
+
isRangeEdit(e) {
|
|
595
|
+
return !!e.data;
|
|
596
|
+
}
|
|
597
|
+
initiatePresizeElement() {
|
|
598
|
+
var _a;
|
|
599
|
+
const styleForFontTest = {
|
|
600
|
+
position: "absolute",
|
|
601
|
+
fontSize: "14px",
|
|
602
|
+
height: "0",
|
|
603
|
+
width: "0",
|
|
604
|
+
whiteSpace: "nowrap",
|
|
605
|
+
top: "0",
|
|
606
|
+
overflowX: "scroll",
|
|
607
|
+
display: "block"
|
|
608
|
+
};
|
|
609
|
+
const el = document.createElement("div");
|
|
610
|
+
for (let s in styleForFontTest) {
|
|
611
|
+
el.style[s] = (_a = styleForFontTest[s]) !== null && _a !== void 0 ? _a : "";
|
|
612
|
+
}
|
|
613
|
+
el.classList.add("revo-test-container");
|
|
614
|
+
return el;
|
|
615
|
+
}
|
|
616
|
+
destroy() {
|
|
617
|
+
var _a;
|
|
618
|
+
super.destroy();
|
|
619
|
+
(_a = this.precsizeCalculationArea) === null || _a === void 0 ? void 0 : _a.remove();
|
|
620
|
+
}
|
|
621
|
+
};
|
|
622
|
+
var StretchColumn = class extends BasePlugin {
|
|
623
|
+
constructor(revogrid, providers) {
|
|
624
|
+
super(revogrid, providers);
|
|
625
|
+
this.providers = providers;
|
|
626
|
+
this.stretchedColumn = null;
|
|
627
|
+
this.scrollSize = getScrollbarSize(document);
|
|
628
|
+
const beforecolumnapplied = ({ detail: { columns } }) => this.applyStretch(columns);
|
|
629
|
+
this.addEventListener("beforecolumnapplied", beforecolumnapplied);
|
|
630
|
+
}
|
|
631
|
+
setScroll({ type, hasScroll }) {
|
|
632
|
+
var _a;
|
|
633
|
+
if (type === "rgRow" && this.stretchedColumn && ((_a = this.stretchedColumn) === null || _a === void 0 ? void 0 : _a.initialSize) === this.stretchedColumn.size) {
|
|
634
|
+
if (hasScroll) {
|
|
635
|
+
this.stretchedColumn.size -= this.scrollSize;
|
|
636
|
+
this.apply();
|
|
637
|
+
this.dropChanges();
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
activateChanges() {
|
|
642
|
+
const setScroll = ({ detail }) => this.setScroll(detail);
|
|
643
|
+
this.addEventListener("scrollchange", setScroll);
|
|
644
|
+
}
|
|
645
|
+
dropChanges() {
|
|
646
|
+
this.stretchedColumn = null;
|
|
647
|
+
this.removeEventListener("scrollchange");
|
|
648
|
+
}
|
|
649
|
+
apply() {
|
|
650
|
+
if (!this.stretchedColumn) {
|
|
651
|
+
return;
|
|
652
|
+
}
|
|
653
|
+
const type = "rgCol";
|
|
654
|
+
const sizes = this.providers.dimension.stores[type].store.get("sizes");
|
|
655
|
+
this.providers.dimension.setCustomSizes(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }), true);
|
|
656
|
+
}
|
|
657
|
+
/**
|
|
658
|
+
* Apply stretch changes
|
|
659
|
+
*/
|
|
660
|
+
applyStretch(columns) {
|
|
661
|
+
this.dropChanges();
|
|
662
|
+
let sizeDifference = this.revogrid.clientWidth - 1;
|
|
663
|
+
forEach(columns, (_, type) => {
|
|
664
|
+
const realSize = this.providers.dimension.stores[type].store.get("realSize");
|
|
665
|
+
sizeDifference -= realSize;
|
|
666
|
+
});
|
|
667
|
+
if (this.revogrid.rowHeaders) {
|
|
668
|
+
const itemsLength = this.providers.data.stores.rgRow.store.get("source").length;
|
|
669
|
+
const header = this.revogrid.rowHeaders;
|
|
670
|
+
const rowHeaderSize = calculateRowHeaderSize(itemsLength, typeof header === "object" ? header : void 0);
|
|
671
|
+
if (rowHeaderSize) {
|
|
672
|
+
sizeDifference -= rowHeaderSize;
|
|
673
|
+
}
|
|
674
|
+
}
|
|
675
|
+
if (sizeDifference > 0) {
|
|
676
|
+
const index = columns.rgCol.length - 1;
|
|
677
|
+
const last = columns.rgCol[index];
|
|
678
|
+
const colSize = (last === null || last === void 0 ? void 0 : last.size) || this.revogrid.colSize || 0;
|
|
679
|
+
const size = sizeDifference + colSize - 1;
|
|
680
|
+
if (last && !last.autoSize && colSize < size) {
|
|
681
|
+
this.stretchedColumn = {
|
|
682
|
+
initialSize: size,
|
|
683
|
+
index,
|
|
684
|
+
size
|
|
685
|
+
};
|
|
686
|
+
this.apply();
|
|
687
|
+
this.activateChanges();
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
};
|
|
692
|
+
function isStretchPlugin(plugin) {
|
|
693
|
+
return !!plugin.applyStretch;
|
|
694
|
+
}
|
|
695
|
+
function baseClamp(number, lower, upper) {
|
|
696
|
+
if (number === number) {
|
|
697
|
+
{
|
|
698
|
+
number = number <= upper ? number : upper;
|
|
699
|
+
}
|
|
700
|
+
{
|
|
701
|
+
number = number >= lower ? number : lower;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
return number;
|
|
705
|
+
}
|
|
706
|
+
var MAX_ARRAY_LENGTH = 4294967295;
|
|
707
|
+
function toLength(value) {
|
|
708
|
+
return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;
|
|
709
|
+
}
|
|
710
|
+
function baseFill(array, value, start, end) {
|
|
711
|
+
var length = array.length;
|
|
712
|
+
start = toInteger(start);
|
|
713
|
+
if (start < 0) {
|
|
714
|
+
start = -start > length ? 0 : length + start;
|
|
715
|
+
}
|
|
716
|
+
end = end === void 0 || end > length ? length : toInteger(end);
|
|
717
|
+
if (end < 0) {
|
|
718
|
+
end += length;
|
|
719
|
+
}
|
|
720
|
+
end = start > end ? 0 : toLength(end);
|
|
721
|
+
while (start < end) {
|
|
722
|
+
array[start++] = value;
|
|
723
|
+
}
|
|
724
|
+
return array;
|
|
725
|
+
}
|
|
726
|
+
function fill(array, value, start, end) {
|
|
727
|
+
var length = array == null ? 0 : array.length;
|
|
728
|
+
if (!length) {
|
|
729
|
+
return [];
|
|
730
|
+
}
|
|
731
|
+
return baseFill(array, value, start, end);
|
|
732
|
+
}
|
|
733
|
+
var INITIAL = {
|
|
734
|
+
mime: "text/csv",
|
|
735
|
+
fileKind: "csv",
|
|
736
|
+
// BOM signature
|
|
737
|
+
bom: true,
|
|
738
|
+
columnDelimiter: ",",
|
|
739
|
+
rowDelimiter: "\r\n",
|
|
740
|
+
encoding: ""
|
|
741
|
+
};
|
|
742
|
+
var CARRIAGE_RETURN = String.fromCharCode(13);
|
|
743
|
+
var LINE_FEED = String.fromCharCode(10);
|
|
744
|
+
var DOUBLE_QT = String.fromCharCode(34);
|
|
745
|
+
var NO_BREAK_SPACE = String.fromCharCode(65279);
|
|
746
|
+
var escapeRegex = new RegExp('"', "g");
|
|
747
|
+
var ExportCsv = class {
|
|
748
|
+
constructor(options = {}) {
|
|
749
|
+
this.options = Object.assign(Object.assign({}, INITIAL), options);
|
|
750
|
+
}
|
|
751
|
+
doExport({ data, headers, props }) {
|
|
752
|
+
let result = this.options.bom ? NO_BREAK_SPACE : "";
|
|
753
|
+
if ((headers === null || headers === void 0 ? void 0 : headers.length) > 0) {
|
|
754
|
+
headers.forEach((header) => {
|
|
755
|
+
if (!header.length) {
|
|
756
|
+
return;
|
|
757
|
+
}
|
|
758
|
+
result += this.prepareHeader(header, this.options.columnDelimiter);
|
|
759
|
+
result += this.options.rowDelimiter;
|
|
760
|
+
});
|
|
761
|
+
}
|
|
762
|
+
data.forEach((rgRow, index) => {
|
|
763
|
+
if (index > 0) {
|
|
764
|
+
result += this.options.rowDelimiter;
|
|
765
|
+
}
|
|
766
|
+
if (isGrouping(rgRow)) {
|
|
767
|
+
result += this.parseCell(getGroupingName(rgRow), this.options.columnDelimiter);
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
result += props.map((p) => this.parseCell(rgRow[p], this.options.columnDelimiter)).join(this.options.columnDelimiter);
|
|
771
|
+
});
|
|
772
|
+
return result;
|
|
773
|
+
}
|
|
774
|
+
prepareHeader(columnHeaders, columnDelimiter) {
|
|
775
|
+
let result = "";
|
|
776
|
+
const newColumnHeaders = columnHeaders.map((v) => this.parseCell(v, columnDelimiter, true));
|
|
777
|
+
result += newColumnHeaders.join(columnDelimiter);
|
|
778
|
+
return result;
|
|
779
|
+
}
|
|
780
|
+
parseCell(value, columnDelimiter, force = false) {
|
|
781
|
+
let escape = value;
|
|
782
|
+
if (typeof value !== "string") {
|
|
783
|
+
escape = JSON.stringify(value);
|
|
784
|
+
}
|
|
785
|
+
const toEscape = [CARRIAGE_RETURN, DOUBLE_QT, LINE_FEED, columnDelimiter];
|
|
786
|
+
if (typeof escape === "undefined") {
|
|
787
|
+
return "";
|
|
788
|
+
}
|
|
789
|
+
if (escape !== "" && (force || toEscape.some((i) => escape.indexOf(i) >= 0))) {
|
|
790
|
+
return `"${escape.replace(escapeRegex, '""')}"`;
|
|
791
|
+
}
|
|
792
|
+
return escape;
|
|
793
|
+
}
|
|
794
|
+
};
|
|
795
|
+
var ExportTypes;
|
|
796
|
+
(function(ExportTypes2) {
|
|
797
|
+
ExportTypes2["csv"] = "csv";
|
|
798
|
+
})(ExportTypes || (ExportTypes = {}));
|
|
799
|
+
var ExportFilePlugin = class extends BasePlugin {
|
|
800
|
+
/** Exports string */
|
|
801
|
+
async exportString(options = {}, t = ExportTypes.csv) {
|
|
802
|
+
const data = await this.beforeexport();
|
|
803
|
+
if (!data) {
|
|
804
|
+
return null;
|
|
805
|
+
}
|
|
806
|
+
return this.formatter(t, options).doExport(data);
|
|
807
|
+
}
|
|
808
|
+
/** Exports Blob */
|
|
809
|
+
async exportBlob(options = {}, t = ExportTypes.csv) {
|
|
810
|
+
return await this.getBlob(this.formatter(t, options));
|
|
811
|
+
}
|
|
812
|
+
/** Export file */
|
|
813
|
+
async exportFile(options = {}, t = ExportTypes.csv) {
|
|
814
|
+
const formatter = this.formatter(t, options);
|
|
815
|
+
const URL = window.URL || window.webkitURL;
|
|
816
|
+
const a = document.createElement("a");
|
|
817
|
+
const { filename, fileKind } = formatter.options;
|
|
818
|
+
const name = `${filename}.${fileKind}`;
|
|
819
|
+
const blob = await this.getBlob(formatter);
|
|
820
|
+
const url = blob ? URL.createObjectURL(blob) : "";
|
|
821
|
+
a.style.display = "none";
|
|
822
|
+
a.setAttribute("href", url);
|
|
823
|
+
a.setAttribute("download", name);
|
|
824
|
+
this.revogrid.appendChild(a);
|
|
825
|
+
a.dispatchEvent(new MouseEvent("click"));
|
|
826
|
+
this.revogrid.removeChild(a);
|
|
827
|
+
await timeout(120);
|
|
828
|
+
URL.revokeObjectURL(url);
|
|
829
|
+
}
|
|
830
|
+
/** Blob object */
|
|
831
|
+
async getBlob(formatter) {
|
|
832
|
+
const type = `${formatter.options.mime};charset=${formatter.options.encoding}`;
|
|
833
|
+
if (typeof Blob !== "undefined") {
|
|
834
|
+
const data = await this.beforeexport();
|
|
835
|
+
if (!data) {
|
|
836
|
+
return null;
|
|
837
|
+
}
|
|
838
|
+
return new Blob([formatter.doExport(data)], { type });
|
|
839
|
+
}
|
|
840
|
+
return null;
|
|
841
|
+
}
|
|
842
|
+
// before event
|
|
843
|
+
async beforeexport() {
|
|
844
|
+
let data = await this.getData();
|
|
845
|
+
const event = this.emit("beforeexport", { data });
|
|
846
|
+
if (event.defaultPrevented) {
|
|
847
|
+
return null;
|
|
848
|
+
}
|
|
849
|
+
return event.detail.data;
|
|
850
|
+
}
|
|
851
|
+
async getData() {
|
|
852
|
+
const data = await this.getSource();
|
|
853
|
+
const colSource = [];
|
|
854
|
+
const colPromises = [];
|
|
855
|
+
columnTypes.forEach((t, i) => {
|
|
856
|
+
colPromises.push(this.getColPerSource(t).then((s) => colSource[i] = s));
|
|
857
|
+
});
|
|
858
|
+
await Promise.all(colPromises);
|
|
859
|
+
const columns = {
|
|
860
|
+
headers: [],
|
|
861
|
+
props: []
|
|
862
|
+
};
|
|
863
|
+
for (let source of colSource) {
|
|
864
|
+
source.headers.forEach((h2, i) => {
|
|
865
|
+
if (!columns.headers[i]) {
|
|
866
|
+
columns.headers[i] = [];
|
|
867
|
+
}
|
|
868
|
+
columns.headers[i].push(...h2);
|
|
869
|
+
});
|
|
870
|
+
columns.props.push(...source.props);
|
|
871
|
+
}
|
|
872
|
+
return Object.assign({ data }, columns);
|
|
873
|
+
}
|
|
874
|
+
async getColPerSource(t) {
|
|
875
|
+
const store = await this.revogrid.getColumnStore(t);
|
|
876
|
+
const source = store.get("source");
|
|
877
|
+
const virtualIndexes = store.get("items");
|
|
878
|
+
const depth = store.get("groupingDepth");
|
|
879
|
+
const groups = store.get("groups");
|
|
880
|
+
const colNames = [];
|
|
881
|
+
const colProps = [];
|
|
882
|
+
virtualIndexes.forEach((v) => {
|
|
883
|
+
const prop = source[v].prop;
|
|
884
|
+
colNames.push(source[v].name || "");
|
|
885
|
+
colProps.push(prop);
|
|
886
|
+
});
|
|
887
|
+
const rows = this.getGroupHeaders(depth, groups, virtualIndexes);
|
|
888
|
+
rows.push(colNames);
|
|
889
|
+
return {
|
|
890
|
+
headers: rows,
|
|
891
|
+
props: colProps
|
|
892
|
+
};
|
|
893
|
+
}
|
|
894
|
+
getGroupHeaders(depth, groups, items) {
|
|
895
|
+
const rows = [];
|
|
896
|
+
const template = fill(new Array(items.length), "");
|
|
897
|
+
for (let d = 0; d < depth; d++) {
|
|
898
|
+
const rgRow = [...template];
|
|
899
|
+
rows.push(rgRow);
|
|
900
|
+
if (!groups[d]) {
|
|
901
|
+
continue;
|
|
902
|
+
}
|
|
903
|
+
const levelGroups = groups[d];
|
|
904
|
+
levelGroups.forEach((group) => {
|
|
905
|
+
const minIndex = group.indexes[0];
|
|
906
|
+
if (typeof minIndex === "number") {
|
|
907
|
+
rgRow[minIndex] = group.name;
|
|
908
|
+
}
|
|
909
|
+
});
|
|
910
|
+
}
|
|
911
|
+
return rows;
|
|
912
|
+
}
|
|
913
|
+
async getSource() {
|
|
914
|
+
const data = [];
|
|
915
|
+
const promisesData = [];
|
|
916
|
+
rowTypes.forEach((t) => {
|
|
917
|
+
const dataPart = [];
|
|
918
|
+
data.push(dataPart);
|
|
919
|
+
const promise = this.revogrid.getVisibleSource(t).then((d) => dataPart.push(...d));
|
|
920
|
+
promisesData.push(promise);
|
|
921
|
+
});
|
|
922
|
+
await Promise.all(promisesData);
|
|
923
|
+
return data.reduce((r, v) => {
|
|
924
|
+
r.push(...v);
|
|
925
|
+
return r;
|
|
926
|
+
}, []);
|
|
927
|
+
}
|
|
928
|
+
// get correct class for future multiple types support
|
|
929
|
+
formatter(type, options = {}) {
|
|
930
|
+
switch (type) {
|
|
931
|
+
case ExportTypes.csv:
|
|
932
|
+
return new ExportCsv(options);
|
|
933
|
+
default:
|
|
934
|
+
throw new Error("Unknown format");
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
};
|
|
938
|
+
var eq = (value, extra) => {
|
|
939
|
+
if (typeof value === "undefined" || value === null && !extra) {
|
|
940
|
+
return true;
|
|
941
|
+
}
|
|
942
|
+
if (typeof value !== "string") {
|
|
943
|
+
value = JSON.stringify(value);
|
|
944
|
+
}
|
|
945
|
+
const filterVal = extra === null || extra === void 0 ? void 0 : extra.toString().toLocaleLowerCase();
|
|
946
|
+
if ((filterVal === null || filterVal === void 0 ? void 0 : filterVal.length) === 0) {
|
|
947
|
+
return true;
|
|
948
|
+
}
|
|
949
|
+
return value.toLocaleLowerCase() === filterVal;
|
|
950
|
+
};
|
|
951
|
+
var notEq = (value, extra) => !eq(value, extra);
|
|
952
|
+
notEq.extra = "input";
|
|
953
|
+
eq.extra = "input";
|
|
954
|
+
var gtThan = function(value, extra) {
|
|
955
|
+
let conditionValue;
|
|
956
|
+
if (typeof value === "number" && typeof extra !== "undefined" && extra !== null) {
|
|
957
|
+
conditionValue = parseFloat(extra === null || extra === void 0 ? void 0 : extra.toString());
|
|
958
|
+
return value > conditionValue;
|
|
959
|
+
}
|
|
960
|
+
return false;
|
|
961
|
+
};
|
|
962
|
+
gtThan.extra = "input";
|
|
963
|
+
var gtThanEq = function(value, extra) {
|
|
964
|
+
return eq(value, extra) || gtThan(value, extra);
|
|
965
|
+
};
|
|
966
|
+
gtThanEq.extra = "input";
|
|
967
|
+
var lt = function(value, extra) {
|
|
968
|
+
let conditionValue;
|
|
969
|
+
if (typeof value === "number" && typeof extra !== "undefined" && extra !== null) {
|
|
970
|
+
conditionValue = parseFloat(extra.toString());
|
|
971
|
+
return value < conditionValue;
|
|
972
|
+
} else {
|
|
973
|
+
return false;
|
|
974
|
+
}
|
|
975
|
+
};
|
|
976
|
+
lt.extra = "input";
|
|
977
|
+
var lsEq = function(value, extra) {
|
|
978
|
+
return eq(value, extra) || lt(value, extra);
|
|
979
|
+
};
|
|
980
|
+
lsEq.extra = "input";
|
|
981
|
+
var set = (value) => !(value === "" || value === null || value === void 0);
|
|
982
|
+
var notSet = (value) => !set(value);
|
|
983
|
+
var beginsWith = (value, extra) => {
|
|
984
|
+
if (!value) {
|
|
985
|
+
return false;
|
|
986
|
+
}
|
|
987
|
+
if (!extra) {
|
|
988
|
+
return true;
|
|
989
|
+
}
|
|
990
|
+
if (typeof value !== "string") {
|
|
991
|
+
value = JSON.stringify(value);
|
|
992
|
+
}
|
|
993
|
+
if (typeof extra !== "string") {
|
|
994
|
+
extra = JSON.stringify(extra);
|
|
995
|
+
}
|
|
996
|
+
return value.toLocaleLowerCase().indexOf(extra.toLocaleLowerCase()) === 0;
|
|
997
|
+
};
|
|
998
|
+
beginsWith.extra = "input";
|
|
999
|
+
var contains = (value, extra) => {
|
|
1000
|
+
if (!extra) {
|
|
1001
|
+
return true;
|
|
1002
|
+
}
|
|
1003
|
+
if (!value) {
|
|
1004
|
+
return false;
|
|
1005
|
+
}
|
|
1006
|
+
if (extra) {
|
|
1007
|
+
if (typeof value !== "string") {
|
|
1008
|
+
value = JSON.stringify(value);
|
|
1009
|
+
}
|
|
1010
|
+
return value.toLocaleLowerCase().indexOf(extra.toString().toLowerCase()) > -1;
|
|
1011
|
+
}
|
|
1012
|
+
return true;
|
|
1013
|
+
};
|
|
1014
|
+
var notContains = (value, extra) => {
|
|
1015
|
+
return !contains(value, extra);
|
|
1016
|
+
};
|
|
1017
|
+
notContains.extra = "input";
|
|
1018
|
+
contains.extra = "input";
|
|
1019
|
+
var filterCoreFunctionsIndexedByType = {
|
|
1020
|
+
none: () => true,
|
|
1021
|
+
empty: notSet,
|
|
1022
|
+
notEmpty: set,
|
|
1023
|
+
eq,
|
|
1024
|
+
notEq,
|
|
1025
|
+
begins: beginsWith,
|
|
1026
|
+
contains,
|
|
1027
|
+
notContains,
|
|
1028
|
+
eqN: eq,
|
|
1029
|
+
neqN: notEq,
|
|
1030
|
+
gt: gtThan,
|
|
1031
|
+
gte: gtThanEq,
|
|
1032
|
+
lt,
|
|
1033
|
+
lte: lsEq
|
|
1034
|
+
};
|
|
1035
|
+
var filterTypes = {
|
|
1036
|
+
string: ["notEmpty", "empty", "eq", "notEq", "begins", "contains", "notContains"],
|
|
1037
|
+
number: ["notEmpty", "empty", "eqN", "neqN", "gt", "gte", "lt", "lte"]
|
|
1038
|
+
};
|
|
1039
|
+
var filterNames = {
|
|
1040
|
+
none: "None",
|
|
1041
|
+
empty: "Not set",
|
|
1042
|
+
notEmpty: "Set",
|
|
1043
|
+
eq: "Equal",
|
|
1044
|
+
notEq: "Not equal",
|
|
1045
|
+
begins: "Begins with",
|
|
1046
|
+
contains: "Contains",
|
|
1047
|
+
notContains: "Does not contain",
|
|
1048
|
+
eqN: "=",
|
|
1049
|
+
neqN: "!=",
|
|
1050
|
+
gt: ">",
|
|
1051
|
+
gte: ">=",
|
|
1052
|
+
lt: "<",
|
|
1053
|
+
lte: "<="
|
|
1054
|
+
};
|
|
1055
|
+
var FILTER_TRIMMED_TYPE = "filter";
|
|
1056
|
+
var FILTER_CONFIG_CHANGED_EVENT = "filterconfigchanged";
|
|
1057
|
+
var FILTE_PANEL = "revogr-filter-panel";
|
|
1058
|
+
var FilterPlugin = class extends BasePlugin {
|
|
1059
|
+
constructor(revogrid, providers, config) {
|
|
1060
|
+
var _a;
|
|
1061
|
+
super(revogrid, providers);
|
|
1062
|
+
this.revogrid = revogrid;
|
|
1063
|
+
this.config = config;
|
|
1064
|
+
this.filterCollection = {};
|
|
1065
|
+
this.multiFilterItems = {};
|
|
1066
|
+
this.filterByType = Object.assign({}, filterTypes);
|
|
1067
|
+
this.filterNameIndexByType = Object.assign({}, filterNames);
|
|
1068
|
+
this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
|
|
1069
|
+
this.filterProp = FILTER_PROP;
|
|
1070
|
+
this.allowDuplicateOperators = true;
|
|
1071
|
+
if (config) {
|
|
1072
|
+
this.initConfig(config);
|
|
1073
|
+
}
|
|
1074
|
+
const existingNodes = this.revogrid.registerVNode.filter((n) => typeof n === "object" && n.$tag$ !== FILTE_PANEL);
|
|
1075
|
+
this.revogrid.registerVNode = [
|
|
1076
|
+
...existingNodes,
|
|
1077
|
+
h("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: (e) => this.onFilterChange(e.detail), onResetChange: (e) => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, closeOnOutsideClick: config === null || config === void 0 ? void 0 : config.closeFilterPanelOnOutsideClick, allowDuplicateOperators: this.allowDuplicateOperators, ref: (e) => this.pop = e }, " ", this.extraContent())
|
|
1078
|
+
];
|
|
1079
|
+
const aftersourceset = async () => {
|
|
1080
|
+
const filterCollectionProps = Object.keys(this.filterCollection);
|
|
1081
|
+
if (filterCollectionProps.length > 0) {
|
|
1082
|
+
filterCollectionProps.forEach((prop, index) => {
|
|
1083
|
+
if (!this.multiFilterItems[prop]) {
|
|
1084
|
+
this.multiFilterItems[prop] = [
|
|
1085
|
+
{
|
|
1086
|
+
id: index,
|
|
1087
|
+
type: this.filterCollection[prop].type,
|
|
1088
|
+
value: this.filterCollection[prop].value,
|
|
1089
|
+
relation: "and"
|
|
1090
|
+
}
|
|
1091
|
+
];
|
|
1092
|
+
}
|
|
1093
|
+
});
|
|
1094
|
+
}
|
|
1095
|
+
if (Object.keys(this.multiFilterItems).length === 0) {
|
|
1096
|
+
return;
|
|
1097
|
+
}
|
|
1098
|
+
await timeout();
|
|
1099
|
+
await this.runFiltering(this.multiFilterItems);
|
|
1100
|
+
};
|
|
1101
|
+
this.addEventListener("headerclick", (e) => this.headerclick(e));
|
|
1102
|
+
this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
|
|
1103
|
+
if (!detail) {
|
|
1104
|
+
this.clearFiltering();
|
|
1105
|
+
return;
|
|
1106
|
+
}
|
|
1107
|
+
if (typeof detail === "object") {
|
|
1108
|
+
const detailKeys = Object.keys(detail);
|
|
1109
|
+
const preserveCurrentFilters = !detailKeys.includes("multiFilterItems") && detailKeys.includes("allowDuplicateOperators");
|
|
1110
|
+
this.initConfig(preserveCurrentFilters ? Object.assign(Object.assign({}, detail), { multiFilterItems: this.multiFilterItems }) : detail);
|
|
1111
|
+
if (!detail.multiFilterItems || !Object.keys(detail.multiFilterItems).length) {
|
|
1112
|
+
if (preserveCurrentFilters) {
|
|
1113
|
+
aftersourceset();
|
|
1114
|
+
return;
|
|
1115
|
+
}
|
|
1116
|
+
this.clearFiltering();
|
|
1117
|
+
return;
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
aftersourceset();
|
|
1121
|
+
});
|
|
1122
|
+
this.addEventListener("aftersourceset", aftersourceset);
|
|
1123
|
+
this.addEventListener("filter", ({ detail }) => this.onFilterChange(detail));
|
|
1124
|
+
}
|
|
1125
|
+
beforeshow(_) {
|
|
1126
|
+
}
|
|
1127
|
+
extraContent() {
|
|
1128
|
+
return null;
|
|
1129
|
+
}
|
|
1130
|
+
initConfig(config) {
|
|
1131
|
+
var _a;
|
|
1132
|
+
this.allowDuplicateOperators = (_a = config.allowDuplicateOperators) !== null && _a !== void 0 ? _a : true;
|
|
1133
|
+
if (this.pop) {
|
|
1134
|
+
this.pop.allowDuplicateOperators = this.allowDuplicateOperators;
|
|
1135
|
+
}
|
|
1136
|
+
if (config.multiFilterItems) {
|
|
1137
|
+
this.multiFilterItems = Object.assign({}, config.multiFilterItems);
|
|
1138
|
+
} else {
|
|
1139
|
+
this.multiFilterItems = {};
|
|
1140
|
+
}
|
|
1141
|
+
if (config.customFilters) {
|
|
1142
|
+
for (let customFilterType in config.customFilters) {
|
|
1143
|
+
const cFilter = config.customFilters[customFilterType];
|
|
1144
|
+
if (!this.filterByType[cFilter.columnFilterType]) {
|
|
1145
|
+
this.filterByType[cFilter.columnFilterType] = [];
|
|
1146
|
+
}
|
|
1147
|
+
this.filterByType[cFilter.columnFilterType].push(customFilterType);
|
|
1148
|
+
this.filterFunctionsIndexedByType[customFilterType] = cFilter.func;
|
|
1149
|
+
this.filterNameIndexByType[customFilterType] = cFilter.name;
|
|
1150
|
+
}
|
|
1151
|
+
}
|
|
1152
|
+
if (config.filterProp) {
|
|
1153
|
+
this.filterProp = config.filterProp;
|
|
1154
|
+
}
|
|
1155
|
+
const cfgInlcude = config.include;
|
|
1156
|
+
if (cfgInlcude) {
|
|
1157
|
+
const filters = {};
|
|
1158
|
+
for (let t in this.filterByType) {
|
|
1159
|
+
const newTypes = this.filterByType[t].filter((f) => cfgInlcude.indexOf(f) > -1);
|
|
1160
|
+
if (newTypes.length) {
|
|
1161
|
+
filters[t] = newTypes;
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1164
|
+
if (Object.keys(filters).length > 0) {
|
|
1165
|
+
this.filterByType = filters;
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1168
|
+
if (config.collection) {
|
|
1169
|
+
const filterCollection = {};
|
|
1170
|
+
for (const prop of Object.keys(config.collection)) {
|
|
1171
|
+
const item = config.collection[prop];
|
|
1172
|
+
if (this.filterFunctionsIndexedByType[item.type]) {
|
|
1173
|
+
filterCollection[prop] = item;
|
|
1174
|
+
}
|
|
1175
|
+
}
|
|
1176
|
+
this.filterCollection = filterCollection;
|
|
1177
|
+
} else {
|
|
1178
|
+
this.filterCollection = {};
|
|
1179
|
+
}
|
|
1180
|
+
if (config.localization) {
|
|
1181
|
+
if (config.localization.filterNames) {
|
|
1182
|
+
const filterNames2 = config.localization.filterNames;
|
|
1183
|
+
Object.keys(filterNames2).forEach((k) => {
|
|
1184
|
+
if (this.filterNameIndexByType[k] != void 0) {
|
|
1185
|
+
this.filterNameIndexByType[k] = filterNames2[k];
|
|
1186
|
+
}
|
|
1187
|
+
});
|
|
1188
|
+
}
|
|
1189
|
+
}
|
|
1190
|
+
}
|
|
1191
|
+
async headerclick(e) {
|
|
1192
|
+
var _a, _b;
|
|
1193
|
+
const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
|
|
1194
|
+
const filterButton = isFilterBtn(el);
|
|
1195
|
+
if (!filterButton) {
|
|
1196
|
+
return;
|
|
1197
|
+
}
|
|
1198
|
+
e.preventDefault();
|
|
1199
|
+
if (!this.pop) {
|
|
1200
|
+
return;
|
|
1201
|
+
}
|
|
1202
|
+
const prop = e.detail.prop;
|
|
1203
|
+
const currentPanel = await this.pop.getChanges();
|
|
1204
|
+
if ((currentPanel === null || currentPanel === void 0 ? void 0 : currentPanel.prop) === prop) {
|
|
1205
|
+
await this.pop.show();
|
|
1206
|
+
return;
|
|
1207
|
+
}
|
|
1208
|
+
const buttonPos = (filterButton instanceof HTMLElement ? filterButton : el).getBoundingClientRect();
|
|
1209
|
+
const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x, y: buttonPos.y + buttonPos.height, anchorY: buttonPos.y, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
|
|
1210
|
+
(_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
|
|
1211
|
+
this.pop.show(data);
|
|
1212
|
+
}
|
|
1213
|
+
getColumnFilter(type) {
|
|
1214
|
+
let filterType = "string";
|
|
1215
|
+
if (!type) {
|
|
1216
|
+
return { [filterType]: this.filterByType[filterType] };
|
|
1217
|
+
}
|
|
1218
|
+
if (this.isValidType(type)) {
|
|
1219
|
+
filterType = type;
|
|
1220
|
+
} else if (typeof type === "object" && type.length) {
|
|
1221
|
+
return type.reduce((r, multiType) => {
|
|
1222
|
+
if (this.isValidType(multiType)) {
|
|
1223
|
+
r[multiType] = this.filterByType[multiType];
|
|
1224
|
+
}
|
|
1225
|
+
return r;
|
|
1226
|
+
}, {});
|
|
1227
|
+
}
|
|
1228
|
+
return { [filterType]: this.filterByType[filterType] };
|
|
1229
|
+
}
|
|
1230
|
+
isValidType(type) {
|
|
1231
|
+
return !!(typeof type === "string" && this.filterByType[type]);
|
|
1232
|
+
}
|
|
1233
|
+
/**
|
|
1234
|
+
* Called on internal component change
|
|
1235
|
+
*/
|
|
1236
|
+
async onFilterChange(filterItems) {
|
|
1237
|
+
this.multiFilterItems = filterItems;
|
|
1238
|
+
this.runFiltering(this.multiFilterItems);
|
|
1239
|
+
}
|
|
1240
|
+
onFilterReset(prop) {
|
|
1241
|
+
delete this.multiFilterItems[prop !== null && prop !== void 0 ? prop : ""];
|
|
1242
|
+
this.onFilterChange(this.multiFilterItems);
|
|
1243
|
+
}
|
|
1244
|
+
/**
|
|
1245
|
+
* Triggers grid filtering
|
|
1246
|
+
*/
|
|
1247
|
+
async doFiltering(collection, source, columns, filterItems) {
|
|
1248
|
+
const columnsToUpdate = [];
|
|
1249
|
+
const columnByProp = {};
|
|
1250
|
+
columns.forEach((rgCol) => {
|
|
1251
|
+
const column = Object.assign({}, rgCol);
|
|
1252
|
+
const hasFilter = filterItems[column.prop];
|
|
1253
|
+
columnByProp[column.prop] = column;
|
|
1254
|
+
if (column[this.filterProp] && !hasFilter) {
|
|
1255
|
+
delete column[this.filterProp];
|
|
1256
|
+
columnsToUpdate.push(column);
|
|
1257
|
+
}
|
|
1258
|
+
if (!column[this.filterProp] && hasFilter) {
|
|
1259
|
+
columnsToUpdate.push(column);
|
|
1260
|
+
column[this.filterProp] = true;
|
|
1261
|
+
}
|
|
1262
|
+
});
|
|
1263
|
+
const itemsToTrim = this.getRowFilter(source, filterItems, columnByProp);
|
|
1264
|
+
const { defaultPrevented, detail } = this.emit("beforefiltertrimmed", {
|
|
1265
|
+
collection,
|
|
1266
|
+
itemsToFilter: itemsToTrim,
|
|
1267
|
+
source,
|
|
1268
|
+
filterItems
|
|
1269
|
+
});
|
|
1270
|
+
if (defaultPrevented) {
|
|
1271
|
+
return;
|
|
1272
|
+
}
|
|
1273
|
+
this.providers.data.setTrimmed({ [FILTER_TRIMMED_TYPE]: detail.itemsToFilter });
|
|
1274
|
+
this.providers.column.updateColumns(columnsToUpdate);
|
|
1275
|
+
this.emit("afterfilterapply", {
|
|
1276
|
+
multiFilterItems: filterItems,
|
|
1277
|
+
source,
|
|
1278
|
+
collection
|
|
1279
|
+
});
|
|
1280
|
+
}
|
|
1281
|
+
async clearFiltering() {
|
|
1282
|
+
this.multiFilterItems = {};
|
|
1283
|
+
await this.runFiltering(this.multiFilterItems);
|
|
1284
|
+
}
|
|
1285
|
+
async runFiltering(multiFilterItems) {
|
|
1286
|
+
const collection = {};
|
|
1287
|
+
const filterProps = Object.keys(multiFilterItems);
|
|
1288
|
+
for (const prop of filterProps) {
|
|
1289
|
+
if (multiFilterItems[prop].length > 0) {
|
|
1290
|
+
const firstFilterItem = multiFilterItems[prop][0];
|
|
1291
|
+
collection[prop] = {
|
|
1292
|
+
type: firstFilterItem.type,
|
|
1293
|
+
value: firstFilterItem.value
|
|
1294
|
+
};
|
|
1295
|
+
}
|
|
1296
|
+
}
|
|
1297
|
+
this.filterCollection = collection;
|
|
1298
|
+
const columns = this.providers.column.getColumns();
|
|
1299
|
+
const source = this.providers.data.stores["rgRow"].store.get("source");
|
|
1300
|
+
const { defaultPrevented, detail } = this.emit("beforefilterapply", {
|
|
1301
|
+
collection: this.filterCollection,
|
|
1302
|
+
source,
|
|
1303
|
+
columns,
|
|
1304
|
+
filterItems: this.multiFilterItems
|
|
1305
|
+
});
|
|
1306
|
+
if (defaultPrevented) {
|
|
1307
|
+
return;
|
|
1308
|
+
}
|
|
1309
|
+
this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
|
|
1310
|
+
}
|
|
1311
|
+
/**
|
|
1312
|
+
* Get trimmed rows based on filter
|
|
1313
|
+
*/
|
|
1314
|
+
getRowFilter(rows, filterItems, columnByProp) {
|
|
1315
|
+
const propKeys = Object.keys(filterItems);
|
|
1316
|
+
const trimmed = {};
|
|
1317
|
+
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
|
|
1318
|
+
for (const prop of propKeys) {
|
|
1319
|
+
if (this.shouldTrimRow(filterItems[prop], prop, columnByProp[prop], rows[rowIndex])) {
|
|
1320
|
+
trimmed[rowIndex] = true;
|
|
1321
|
+
}
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
return trimmed;
|
|
1325
|
+
}
|
|
1326
|
+
shouldTrimRow(propFilters, prop, column, model = {}) {
|
|
1327
|
+
let propFilterSatisfiedCount = 0;
|
|
1328
|
+
let lastFilterResults = [];
|
|
1329
|
+
for (const [filterIndex, filterData] of propFilters.entries()) {
|
|
1330
|
+
const filterFunc = this.filterFunctionsIndexedByType[filterData.type];
|
|
1331
|
+
const value = column ? getCellDataParsed(model, column) : model[prop];
|
|
1332
|
+
if (filterData.relation === "or") {
|
|
1333
|
+
lastFilterResults = [];
|
|
1334
|
+
if (filterFunc(value, filterData.value)) {
|
|
1335
|
+
continue;
|
|
1336
|
+
}
|
|
1337
|
+
propFilterSatisfiedCount++;
|
|
1338
|
+
} else {
|
|
1339
|
+
lastFilterResults.push(!filterFunc(value, filterData.value));
|
|
1340
|
+
if (isFinalAndFilter(filterIndex, propFilters)) {
|
|
1341
|
+
if (allAndConditionsSatisfied(lastFilterResults)) {
|
|
1342
|
+
lastFilterResults = [];
|
|
1343
|
+
continue;
|
|
1344
|
+
}
|
|
1345
|
+
propFilterSatisfiedCount += lastFilterResults.length;
|
|
1346
|
+
lastFilterResults = [];
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
return propFilterSatisfiedCount === propFilters.length;
|
|
1351
|
+
}
|
|
1352
|
+
};
|
|
1353
|
+
function isFinalAndFilter(index, filters) {
|
|
1354
|
+
const nextFilter = filters[index + 1];
|
|
1355
|
+
return !nextFilter || !!nextFilter.relation && nextFilter.relation !== "and";
|
|
1356
|
+
}
|
|
1357
|
+
function allAndConditionsSatisfied(pendingResults) {
|
|
1358
|
+
return !pendingResults.includes(true);
|
|
1359
|
+
}
|
|
1360
|
+
function hasActiveSorting(sorting) {
|
|
1361
|
+
for (const prop of Object.keys(sorting || {})) {
|
|
1362
|
+
if (sorting === null || sorting === void 0 ? void 0 : sorting[prop]) {
|
|
1363
|
+
return true;
|
|
1364
|
+
}
|
|
1365
|
+
}
|
|
1366
|
+
return false;
|
|
1367
|
+
}
|
|
1368
|
+
function isSameColumnProp(a, b) {
|
|
1369
|
+
return String(a) === String(b);
|
|
1370
|
+
}
|
|
1371
|
+
function getActiveSortingProps(sorting, sortingOrder) {
|
|
1372
|
+
const activeProps = [];
|
|
1373
|
+
const add = (prop) => {
|
|
1374
|
+
if ((sorting === null || sorting === void 0 ? void 0 : sorting[prop]) && !activeProps.some((active) => isSameColumnProp(active, prop))) {
|
|
1375
|
+
activeProps.push(prop);
|
|
1376
|
+
}
|
|
1377
|
+
};
|
|
1378
|
+
sortingOrder === null || sortingOrder === void 0 ? void 0 : sortingOrder.forEach(add);
|
|
1379
|
+
Object.keys(sorting || {}).forEach(add);
|
|
1380
|
+
return activeProps;
|
|
1381
|
+
}
|
|
1382
|
+
function getSortingIndex(sorting, prop, sortingOrder) {
|
|
1383
|
+
const activeProps = getActiveSortingProps(sorting, sortingOrder);
|
|
1384
|
+
if (activeProps.length <= 1) {
|
|
1385
|
+
return void 0;
|
|
1386
|
+
}
|
|
1387
|
+
const index = activeProps.findIndex((active) => isSameColumnProp(active, prop));
|
|
1388
|
+
return index >= 0 ? index + 1 : void 0;
|
|
1389
|
+
}
|
|
1390
|
+
function activeSortingEntries(sortingFunc = {}, sortingOrder) {
|
|
1391
|
+
const entries = [];
|
|
1392
|
+
const add = (prop) => {
|
|
1393
|
+
const cmp = sortingFunc[prop];
|
|
1394
|
+
if (typeof cmp === "function" && !entries.some(([active]) => isSameColumnProp(active, prop))) {
|
|
1395
|
+
entries.push([prop, cmp]);
|
|
1396
|
+
}
|
|
1397
|
+
};
|
|
1398
|
+
sortingOrder === null || sortingOrder === void 0 ? void 0 : sortingOrder.forEach(add);
|
|
1399
|
+
Object.keys(sortingFunc).forEach(add);
|
|
1400
|
+
return entries;
|
|
1401
|
+
}
|
|
1402
|
+
function getDefaultCompareValue(item, prop, column) {
|
|
1403
|
+
const aRaw = column ? getCellRaw(item, column) : item === null || item === void 0 ? void 0 : item[prop];
|
|
1404
|
+
return typeof aRaw === "number" ? aRaw : aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
|
|
1405
|
+
}
|
|
1406
|
+
function isEmptyCompareValue(value) {
|
|
1407
|
+
return value === "" || value === null || value === void 0;
|
|
1408
|
+
}
|
|
1409
|
+
function compareValues(av, bv) {
|
|
1410
|
+
if (av === bv) {
|
|
1411
|
+
return 0;
|
|
1412
|
+
}
|
|
1413
|
+
const aEmpty = isEmptyCompareValue(av);
|
|
1414
|
+
const bEmpty = isEmptyCompareValue(bv);
|
|
1415
|
+
if (aEmpty || bEmpty) {
|
|
1416
|
+
if (aEmpty && bEmpty) {
|
|
1417
|
+
return 0;
|
|
1418
|
+
}
|
|
1419
|
+
return aEmpty ? -1 : 1;
|
|
1420
|
+
}
|
|
1421
|
+
if (av > bv) {
|
|
1422
|
+
return 1;
|
|
1423
|
+
}
|
|
1424
|
+
return -1;
|
|
1425
|
+
}
|
|
1426
|
+
function sortIndexByDefaultComparers(indexes, source, entries, sorting, sortingColumns) {
|
|
1427
|
+
const prepared = entries.map(([prop]) => {
|
|
1428
|
+
const values = [];
|
|
1429
|
+
const column = sortingColumns[prop];
|
|
1430
|
+
for (const index of indexes) {
|
|
1431
|
+
values[index] = getDefaultCompareValue(source[index], prop, column);
|
|
1432
|
+
}
|
|
1433
|
+
return {
|
|
1434
|
+
order: sorting[prop],
|
|
1435
|
+
values
|
|
1436
|
+
};
|
|
1437
|
+
});
|
|
1438
|
+
return indexes.sort((a, b) => {
|
|
1439
|
+
for (const { order, values } of prepared) {
|
|
1440
|
+
const sorted = compareValues(values[a], values[b]);
|
|
1441
|
+
if (sorted) {
|
|
1442
|
+
return order === "desc" ? -sorted : sorted;
|
|
1443
|
+
}
|
|
1444
|
+
}
|
|
1445
|
+
return 0;
|
|
1446
|
+
});
|
|
1447
|
+
}
|
|
1448
|
+
function canUseDefaultCompareFastPath(entries, indexes, source, sorting, sortingColumns) {
|
|
1449
|
+
return !indexes.some((index) => isGrouping(source[index])) && !!sorting && !!sortingColumns && entries.every(([prop]) => {
|
|
1450
|
+
const order = sorting[prop];
|
|
1451
|
+
const column = sortingColumns[prop];
|
|
1452
|
+
return !!order && !(column === null || column === void 0 ? void 0 : column.cellCompare);
|
|
1453
|
+
});
|
|
1454
|
+
}
|
|
1455
|
+
function hasGroupingRowsForOtherSorting(entries, indexes, source) {
|
|
1456
|
+
return indexes.some((index) => {
|
|
1457
|
+
const item = source[index];
|
|
1458
|
+
return isGrouping(item) && !entries.some(([prop]) => isSameColumnProp(item[GROUP_COLUMN_PROP], prop));
|
|
1459
|
+
});
|
|
1460
|
+
}
|
|
1461
|
+
function sortIndexByItems(indexes, source, sortingFunc = {}, sorting, sortingColumns, sortingOrder) {
|
|
1462
|
+
const hasSortingKeys = Object.keys(sortingFunc).length > 0;
|
|
1463
|
+
const sortingEntries = activeSortingEntries(sortingFunc, sortingOrder);
|
|
1464
|
+
if (sortingEntries.length === 0) {
|
|
1465
|
+
return hasSortingKeys ? indexes : [...new Array(indexes.length).keys()];
|
|
1466
|
+
}
|
|
1467
|
+
if (hasGroupingRowsForOtherSorting(sortingEntries, indexes, source)) {
|
|
1468
|
+
return indexes;
|
|
1469
|
+
}
|
|
1470
|
+
if (canUseDefaultCompareFastPath(sortingEntries, indexes, source, sorting, sortingColumns)) {
|
|
1471
|
+
return sortIndexByDefaultComparers(indexes, source, sortingEntries, sorting, sortingColumns);
|
|
1472
|
+
}
|
|
1473
|
+
return indexes.sort((a, b) => {
|
|
1474
|
+
const itemA = source[a];
|
|
1475
|
+
const itemB = source[b];
|
|
1476
|
+
for (const [prop, cmp] of sortingEntries) {
|
|
1477
|
+
if (isGrouping(itemA)) {
|
|
1478
|
+
if (!isSameColumnProp(itemA[GROUP_COLUMN_PROP], prop)) {
|
|
1479
|
+
return a - b;
|
|
1480
|
+
}
|
|
1481
|
+
}
|
|
1482
|
+
if (isGrouping(itemB)) {
|
|
1483
|
+
if (!isSameColumnProp(itemB[GROUP_COLUMN_PROP], prop)) {
|
|
1484
|
+
return a - b;
|
|
1485
|
+
}
|
|
1486
|
+
}
|
|
1487
|
+
const sorted = cmp === null || cmp === void 0 ? void 0 : cmp(prop, itemA, itemB);
|
|
1488
|
+
if (sorted) {
|
|
1489
|
+
return sorted;
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1492
|
+
return 0;
|
|
1493
|
+
});
|
|
1494
|
+
}
|
|
1495
|
+
function defaultCellCompare(prop, a, b) {
|
|
1496
|
+
const aRaw = this.column ? getCellRaw(a, this.column) : a === null || a === void 0 ? void 0 : a[prop];
|
|
1497
|
+
const bRaw = this.column ? getCellRaw(b, this.column) : b === null || b === void 0 ? void 0 : b[prop];
|
|
1498
|
+
const av = typeof aRaw === "number" ? aRaw : aRaw === null || aRaw === void 0 ? void 0 : aRaw.toString().toLowerCase();
|
|
1499
|
+
const bv = typeof bRaw === "number" ? bRaw : bRaw === null || bRaw === void 0 ? void 0 : bRaw.toString().toLowerCase();
|
|
1500
|
+
return compareValues(av, bv);
|
|
1501
|
+
}
|
|
1502
|
+
function descCellCompare(cmp) {
|
|
1503
|
+
return (prop, a, b) => {
|
|
1504
|
+
return -1 * cmp(prop, a, b);
|
|
1505
|
+
};
|
|
1506
|
+
}
|
|
1507
|
+
function getNextOrder(currentOrder) {
|
|
1508
|
+
switch (currentOrder) {
|
|
1509
|
+
case void 0:
|
|
1510
|
+
return "asc";
|
|
1511
|
+
case "asc":
|
|
1512
|
+
return "desc";
|
|
1513
|
+
case "desc":
|
|
1514
|
+
return void 0;
|
|
1515
|
+
}
|
|
1516
|
+
}
|
|
1517
|
+
function getComparer(column, order) {
|
|
1518
|
+
var _a;
|
|
1519
|
+
const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || (defaultCellCompare === null || defaultCellCompare === void 0 ? void 0 : defaultCellCompare.bind({ column, order }));
|
|
1520
|
+
if (order == "asc") {
|
|
1521
|
+
return cellCmp;
|
|
1522
|
+
}
|
|
1523
|
+
if (order == "desc") {
|
|
1524
|
+
return descCellCompare(cellCmp);
|
|
1525
|
+
}
|
|
1526
|
+
return void 0;
|
|
1527
|
+
}
|
|
1528
|
+
function getSortableRowIndexes(indexes, source) {
|
|
1529
|
+
return indexes.filter((index) => !isGrouping(source[index]));
|
|
1530
|
+
}
|
|
1531
|
+
function mergeSortedRowsWithGroups(indexes, source, sortedRows) {
|
|
1532
|
+
if (sortedRows.length === indexes.length) {
|
|
1533
|
+
return sortedRows;
|
|
1534
|
+
}
|
|
1535
|
+
let rowIndex = 0;
|
|
1536
|
+
return indexes.map((index) => {
|
|
1537
|
+
if (isGrouping(source[index])) {
|
|
1538
|
+
return index;
|
|
1539
|
+
}
|
|
1540
|
+
return sortedRows[rowIndex++];
|
|
1541
|
+
});
|
|
1542
|
+
}
|
|
1543
|
+
var SortingPlugin = class extends BasePlugin {
|
|
1544
|
+
constructor(revogrid, providers, config) {
|
|
1545
|
+
super(revogrid, providers);
|
|
1546
|
+
this.revogrid = revogrid;
|
|
1547
|
+
this.sortingPromise = null;
|
|
1548
|
+
this.postponeSort = debounce((order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate) => this.runSorting(order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate), 50);
|
|
1549
|
+
this.applySortingConfig(config);
|
|
1550
|
+
this.addEventListener("sortingconfigchanged", ({ detail }) => {
|
|
1551
|
+
config = detail;
|
|
1552
|
+
this.applySortingConfig(detail);
|
|
1553
|
+
this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
|
|
1554
|
+
});
|
|
1555
|
+
this.addEventListener("beforeheaderrender", ({ detail }) => {
|
|
1556
|
+
var _a;
|
|
1557
|
+
const { data: column } = detail;
|
|
1558
|
+
if (column.sortable) {
|
|
1559
|
+
detail.data = Object.assign(Object.assign({}, column), { order: (_a = this.sorting) === null || _a === void 0 ? void 0 : _a[column.prop], sortIndex: getSortingIndex(this.sorting, column.prop, this.sortingOrder) });
|
|
1560
|
+
}
|
|
1561
|
+
});
|
|
1562
|
+
this.addEventListener("beforeanysource", ({ detail: { type } }) => {
|
|
1563
|
+
if (hasActiveSorting(this.sorting) && this.sortingFunc) {
|
|
1564
|
+
const event = this.emit("beforesourcesortingapply", { type, sorting: this.sorting });
|
|
1565
|
+
if (event.defaultPrevented) {
|
|
1566
|
+
return;
|
|
1567
|
+
}
|
|
1568
|
+
this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
|
|
1569
|
+
}
|
|
1570
|
+
});
|
|
1571
|
+
this.addEventListener("aftercolumnsset", ({ detail: { order } }) => {
|
|
1572
|
+
if (config) {
|
|
1573
|
+
return;
|
|
1574
|
+
}
|
|
1575
|
+
const columns = this.providers.column.getColumns();
|
|
1576
|
+
const sortingFunc = {};
|
|
1577
|
+
const sortingColumns = {};
|
|
1578
|
+
const sortingOrder = [];
|
|
1579
|
+
const sorting = {};
|
|
1580
|
+
for (let prop in order) {
|
|
1581
|
+
if (order[prop]) {
|
|
1582
|
+
const column = getColumnByProp(columns, prop);
|
|
1583
|
+
const cmp = getComparer(column, order[prop]);
|
|
1584
|
+
sorting[prop] = order[prop];
|
|
1585
|
+
sortingFunc[prop] = cmp;
|
|
1586
|
+
sortingColumns[prop] = column;
|
|
1587
|
+
sortingOrder.push(prop);
|
|
1588
|
+
}
|
|
1589
|
+
}
|
|
1590
|
+
this.sorting = hasActiveSorting(sorting) ? sorting : void 0;
|
|
1591
|
+
this.sortingFunc = this.sorting ? sortingFunc : void 0;
|
|
1592
|
+
this.sortingColumns = this.sorting ? sortingColumns : void 0;
|
|
1593
|
+
this.sortingOrder = this.sorting ? sortingOrder : void 0;
|
|
1594
|
+
});
|
|
1595
|
+
this.addEventListener("beforeheaderclick", (e) => {
|
|
1596
|
+
var _a, _b, _c, _d;
|
|
1597
|
+
if (e.defaultPrevented) {
|
|
1598
|
+
return;
|
|
1599
|
+
}
|
|
1600
|
+
if (!((_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.sortable)) {
|
|
1601
|
+
return;
|
|
1602
|
+
}
|
|
1603
|
+
this.headerclick(e.detail.column, (_d = (_c = e.detail) === null || _c === void 0 ? void 0 : _c.originalEvent) === null || _d === void 0 ? void 0 : _d.shiftKey);
|
|
1604
|
+
});
|
|
1605
|
+
}
|
|
1606
|
+
/**
|
|
1607
|
+
* Creates mutable sorting maps from current state when additive sorting is requested.
|
|
1608
|
+
*/
|
|
1609
|
+
createSortingState(additive) {
|
|
1610
|
+
var _a;
|
|
1611
|
+
return {
|
|
1612
|
+
sorting: additive ? Object.assign({}, this.sorting) : {},
|
|
1613
|
+
sortingFunc: additive ? Object.assign({}, this.sortingFunc) : {},
|
|
1614
|
+
sortingColumns: additive ? Object.assign({}, this.sortingColumns) : {},
|
|
1615
|
+
sortingOrder: additive ? [...(_a = this.sortingOrder) !== null && _a !== void 0 ? _a : []] : []
|
|
1616
|
+
};
|
|
1617
|
+
}
|
|
1618
|
+
/**
|
|
1619
|
+
* Stores normalized sorting state, clearing inactive empty maps.
|
|
1620
|
+
*/
|
|
1621
|
+
setSortingState({ sorting, sortingFunc, sortingColumns, sortingOrder }) {
|
|
1622
|
+
this.sorting = hasActiveSorting(sorting) ? sorting : void 0;
|
|
1623
|
+
this.sortingFunc = this.sorting ? sortingFunc : void 0;
|
|
1624
|
+
this.sortingColumns = this.sorting ? sortingColumns : void 0;
|
|
1625
|
+
this.sortingOrder = this.sorting ? sortingOrder : void 0;
|
|
1626
|
+
}
|
|
1627
|
+
/**
|
|
1628
|
+
* Adds or replaces a column in a sorting state.
|
|
1629
|
+
*/
|
|
1630
|
+
setColumnSorting(state, prop, order, cmp, column) {
|
|
1631
|
+
state.sorting[prop] = order;
|
|
1632
|
+
state.sortingFunc[prop] = cmp;
|
|
1633
|
+
state.sortingColumns[prop] = column;
|
|
1634
|
+
if (!state.sortingOrder.some((sortingProp) => String(sortingProp) === String(prop))) {
|
|
1635
|
+
state.sortingOrder.push(prop);
|
|
1636
|
+
}
|
|
1637
|
+
}
|
|
1638
|
+
/**
|
|
1639
|
+
* Removes a column from a sorting state.
|
|
1640
|
+
*/
|
|
1641
|
+
clearColumnSorting(state, prop) {
|
|
1642
|
+
delete state.sorting[prop];
|
|
1643
|
+
delete state.sortingFunc[prop];
|
|
1644
|
+
delete state.sortingColumns[prop];
|
|
1645
|
+
const index = state.sortingOrder.findIndex((sortingProp) => String(sortingProp) === String(prop));
|
|
1646
|
+
if (index >= 0) {
|
|
1647
|
+
state.sortingOrder.splice(index, 1);
|
|
1648
|
+
}
|
|
1649
|
+
}
|
|
1650
|
+
/**
|
|
1651
|
+
* Normalizes external sorting configuration into internal order,
|
|
1652
|
+
* comparator, and column metadata maps.
|
|
1653
|
+
*/
|
|
1654
|
+
applySortingConfig(cfg) {
|
|
1655
|
+
var _a;
|
|
1656
|
+
if (!cfg) {
|
|
1657
|
+
return;
|
|
1658
|
+
}
|
|
1659
|
+
const state = this.createSortingState(cfg.additive);
|
|
1660
|
+
(_a = cfg.columns) === null || _a === void 0 ? void 0 : _a.forEach((col) => {
|
|
1661
|
+
if (col.order) {
|
|
1662
|
+
this.setColumnSorting(state, col.prop, col.order, getComparer(col, col.order), col);
|
|
1663
|
+
return;
|
|
1664
|
+
}
|
|
1665
|
+
this.clearColumnSorting(state, col.prop);
|
|
1666
|
+
});
|
|
1667
|
+
this.setSortingState(state);
|
|
1668
|
+
}
|
|
1669
|
+
resetSortingForStore(type) {
|
|
1670
|
+
const storeService = this.providers.data.stores[type];
|
|
1671
|
+
const source = storeService.store.get("source");
|
|
1672
|
+
const proxyItems = storeService.store.get("proxyItems");
|
|
1673
|
+
const newItemsOrder = Array.from({ length: source.length }, (_, i) => i);
|
|
1674
|
+
this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
|
|
1675
|
+
storeService.setData({ proxyItems: newItemsOrder });
|
|
1676
|
+
}
|
|
1677
|
+
applySortingForStore(type, sorting, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate) {
|
|
1678
|
+
const storeService = this.providers.data.stores[type];
|
|
1679
|
+
const source = storeService.store.get("source");
|
|
1680
|
+
const proxyItems = storeService.store.get("proxyItems");
|
|
1681
|
+
const sortItems = getSortableRowIndexes(proxyItems, source);
|
|
1682
|
+
const sortedItems = sortIndexByItems([...sortItems], source, sortingFunc, sorting, sortingColumns, sortingOrder);
|
|
1683
|
+
const newItemsOrder = mergeSortedRowsWithGroups(proxyItems, source, sortedItems);
|
|
1684
|
+
const prevItems = storeService.store.get("items");
|
|
1685
|
+
storeService.setData({
|
|
1686
|
+
proxyItems: newItemsOrder
|
|
1687
|
+
});
|
|
1688
|
+
const newItems = storeService.store.get("items");
|
|
1689
|
+
if (!ignoreViewportUpdate) {
|
|
1690
|
+
this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
|
|
1691
|
+
}
|
|
1692
|
+
}
|
|
1693
|
+
startSorting(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate) {
|
|
1694
|
+
if (!this.sortingPromise) {
|
|
1695
|
+
this.revogrid.jobsBeforeRender.push(new Promise((resolve) => {
|
|
1696
|
+
this.sortingPromise = resolve;
|
|
1697
|
+
}));
|
|
1698
|
+
}
|
|
1699
|
+
if (typeof sortingColumns === "boolean") {
|
|
1700
|
+
this.postponeSort(order, sortingFunc, void 0, void 0, sortingColumns);
|
|
1701
|
+
return;
|
|
1702
|
+
}
|
|
1703
|
+
this.postponeSort(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate);
|
|
1704
|
+
}
|
|
1705
|
+
/**
|
|
1706
|
+
* Applies sorting requested by a sortable header click.
|
|
1707
|
+
*
|
|
1708
|
+
* @param column - Column that initiated sorting.
|
|
1709
|
+
* @param additive - If true, add/remove this column from the current multi-sort state.
|
|
1710
|
+
*/
|
|
1711
|
+
headerclick(column, additive) {
|
|
1712
|
+
var _a;
|
|
1713
|
+
const columnProp = column.prop;
|
|
1714
|
+
let order = getNextOrder((_a = this.sorting) === null || _a === void 0 ? void 0 : _a[columnProp]);
|
|
1715
|
+
const beforeEvent = this.emit("beforesorting", { column, order, additive });
|
|
1716
|
+
if (beforeEvent.defaultPrevented) {
|
|
1717
|
+
return;
|
|
1718
|
+
}
|
|
1719
|
+
order = beforeEvent.detail.order;
|
|
1720
|
+
const beforeApplyEvent = this.emit("beforesortingapply", {
|
|
1721
|
+
column: beforeEvent.detail.column,
|
|
1722
|
+
order,
|
|
1723
|
+
additive
|
|
1724
|
+
});
|
|
1725
|
+
if (beforeApplyEvent.defaultPrevented) {
|
|
1726
|
+
return;
|
|
1727
|
+
}
|
|
1728
|
+
const cmp = getComparer(beforeApplyEvent.detail.column, beforeApplyEvent.detail.order);
|
|
1729
|
+
this.applyHeaderSorting(beforeApplyEvent.detail.column, beforeApplyEvent.detail.additive, order, cmp);
|
|
1730
|
+
this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
|
|
1731
|
+
}
|
|
1732
|
+
/**
|
|
1733
|
+
* Applies sorting state produced by a header click.
|
|
1734
|
+
*/
|
|
1735
|
+
applyHeaderSorting(column, additive, order, cmp) {
|
|
1736
|
+
if (!additive) {
|
|
1737
|
+
this.setSortingState(order ? {
|
|
1738
|
+
sorting: { [column.prop]: order },
|
|
1739
|
+
sortingFunc: { [column.prop]: cmp },
|
|
1740
|
+
sortingColumns: { [column.prop]: column },
|
|
1741
|
+
sortingOrder: [column.prop]
|
|
1742
|
+
} : this.createSortingState());
|
|
1743
|
+
return;
|
|
1744
|
+
}
|
|
1745
|
+
const state = this.createSortingState(true);
|
|
1746
|
+
if (order) {
|
|
1747
|
+
this.setColumnSorting(state, column.prop, order, cmp, column);
|
|
1748
|
+
} else {
|
|
1749
|
+
this.clearColumnSorting(state, column.prop);
|
|
1750
|
+
}
|
|
1751
|
+
this.setSortingState(state);
|
|
1752
|
+
}
|
|
1753
|
+
runSorting(order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate) {
|
|
1754
|
+
var _a, _b;
|
|
1755
|
+
if (typeof sortingColumns === "boolean") {
|
|
1756
|
+
this.sort(order, comparison, void 0, void 0, void 0, sortingColumns);
|
|
1757
|
+
(_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
1758
|
+
this.sortingPromise = null;
|
|
1759
|
+
return;
|
|
1760
|
+
}
|
|
1761
|
+
this.sort(order, comparison, sortingColumns, sortingOrder, void 0, ignoreViewportUpdate);
|
|
1762
|
+
(_b = this.sortingPromise) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
1763
|
+
this.sortingPromise = null;
|
|
1764
|
+
}
|
|
1765
|
+
sort(sorting, sortingFunc, sortingColumns, sortingOrder, types = rowTypes, ignoreViewportUpdate = false) {
|
|
1766
|
+
let activeSortingColumns;
|
|
1767
|
+
let activeSortingOrder;
|
|
1768
|
+
let activeTypes = types;
|
|
1769
|
+
let activeIgnoreViewportUpdate = ignoreViewportUpdate;
|
|
1770
|
+
if (Array.isArray(sortingColumns)) {
|
|
1771
|
+
activeTypes = sortingColumns;
|
|
1772
|
+
activeIgnoreViewportUpdate = typeof sortingOrder === "boolean" ? sortingOrder : false;
|
|
1773
|
+
} else {
|
|
1774
|
+
activeSortingColumns = sortingColumns;
|
|
1775
|
+
activeSortingOrder = Array.isArray(sortingOrder) ? sortingOrder : void 0;
|
|
1776
|
+
}
|
|
1777
|
+
if (!Object.keys(sorting || {}).length) {
|
|
1778
|
+
for (let type of activeTypes) {
|
|
1779
|
+
this.resetSortingForStore(type);
|
|
1780
|
+
}
|
|
1781
|
+
} else {
|
|
1782
|
+
for (let type of activeTypes) {
|
|
1783
|
+
this.applySortingForStore(type, sorting, sortingFunc, activeSortingColumns, activeSortingOrder, activeIgnoreViewportUpdate);
|
|
1784
|
+
}
|
|
1785
|
+
}
|
|
1786
|
+
columnTypes.forEach((type) => {
|
|
1787
|
+
this.providers.column.dataSources[type].refresh();
|
|
1788
|
+
});
|
|
1789
|
+
const afterSortingDetail = {
|
|
1790
|
+
sorting: hasActiveSorting(sorting) ? sorting : void 0,
|
|
1791
|
+
sortingColumns: activeSortingColumns,
|
|
1792
|
+
sortingOrder: activeSortingOrder,
|
|
1793
|
+
types: activeTypes
|
|
1794
|
+
};
|
|
1795
|
+
this.emit("aftersortingapply", afterSortingDetail);
|
|
1796
|
+
}
|
|
1797
|
+
};
|
|
1798
|
+
function doCollapse(pIndex, source) {
|
|
1799
|
+
const model = source[pIndex];
|
|
1800
|
+
const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
|
|
1801
|
+
const trimmed = {};
|
|
1802
|
+
let i = pIndex + 1;
|
|
1803
|
+
const total = source.length;
|
|
1804
|
+
while (i < total) {
|
|
1805
|
+
const currentModel = source[i];
|
|
1806
|
+
if (isGrouping(currentModel)) {
|
|
1807
|
+
const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
|
|
1808
|
+
if (!currentValue.length || !currentValue.startsWith(collapseValue + ",")) {
|
|
1809
|
+
break;
|
|
1810
|
+
}
|
|
1811
|
+
currentModel[GROUP_EXPANDED] = false;
|
|
1812
|
+
}
|
|
1813
|
+
trimmed[i++] = true;
|
|
1814
|
+
}
|
|
1815
|
+
model[GROUP_EXPANDED] = false;
|
|
1816
|
+
return { trimmed };
|
|
1817
|
+
}
|
|
1818
|
+
function doExpand(vIndex, source, rowItemsIndexes) {
|
|
1819
|
+
const physicalIndex = rowItemsIndexes[vIndex];
|
|
1820
|
+
const model = source[physicalIndex];
|
|
1821
|
+
const currentGroup = getParsedGroup(model[PSEUDO_GROUP_ITEM_ID]);
|
|
1822
|
+
const trimmed = {};
|
|
1823
|
+
if (!currentGroup) {
|
|
1824
|
+
return { trimmed };
|
|
1825
|
+
}
|
|
1826
|
+
const groupItems = [];
|
|
1827
|
+
model[GROUP_EXPANDED] = true;
|
|
1828
|
+
let i = physicalIndex + 1;
|
|
1829
|
+
const total = source.length;
|
|
1830
|
+
let groupLevelOnly = 0;
|
|
1831
|
+
while (i < total) {
|
|
1832
|
+
const currentModel = source[i];
|
|
1833
|
+
const isGroup = isGrouping(currentModel);
|
|
1834
|
+
if (isGroup) {
|
|
1835
|
+
if (!isSameGroup(currentGroup, model, currentModel)) {
|
|
1836
|
+
break;
|
|
1837
|
+
} else if (!groupLevelOnly) {
|
|
1838
|
+
groupLevelOnly = currentModel[GROUP_DEPTH];
|
|
1839
|
+
}
|
|
1840
|
+
}
|
|
1841
|
+
if (!groupLevelOnly || isGroup && groupLevelOnly === currentModel[GROUP_DEPTH]) {
|
|
1842
|
+
trimmed[i] = false;
|
|
1843
|
+
groupItems.push(i);
|
|
1844
|
+
}
|
|
1845
|
+
i++;
|
|
1846
|
+
}
|
|
1847
|
+
const result = {
|
|
1848
|
+
trimmed
|
|
1849
|
+
};
|
|
1850
|
+
if (groupItems.length) {
|
|
1851
|
+
const items = [...rowItemsIndexes];
|
|
1852
|
+
items.splice(vIndex + 1, 0, ...groupItems);
|
|
1853
|
+
result.items = items;
|
|
1854
|
+
}
|
|
1855
|
+
return result;
|
|
1856
|
+
}
|
|
1857
|
+
var TRIMMED_GROUPING = "grouping";
|
|
1858
|
+
function convertTrimmedIndex(initialIndex, firstLevelMap, secondLevelMap) {
|
|
1859
|
+
const sourceIndex = Number.parseInt(initialIndex, 10);
|
|
1860
|
+
const firstConversionIndex = firstLevelMap[sourceIndex];
|
|
1861
|
+
if (!secondLevelMap) {
|
|
1862
|
+
return firstConversionIndex;
|
|
1863
|
+
}
|
|
1864
|
+
const secondConversionKey = typeof firstConversionIndex === "number" ? firstConversionIndex : sourceIndex;
|
|
1865
|
+
return secondLevelMap[secondConversionKey];
|
|
1866
|
+
}
|
|
1867
|
+
function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLevelMap) {
|
|
1868
|
+
const trimemedOptionsToUpgrade = {};
|
|
1869
|
+
for (let type in initiallyTrimed) {
|
|
1870
|
+
if (type === TRIMMED_GROUPING) {
|
|
1871
|
+
continue;
|
|
1872
|
+
}
|
|
1873
|
+
const items = initiallyTrimed[type];
|
|
1874
|
+
const newItems = {};
|
|
1875
|
+
for (let initialIndex in items) {
|
|
1876
|
+
if (!items[initialIndex]) {
|
|
1877
|
+
continue;
|
|
1878
|
+
}
|
|
1879
|
+
const newConversionIndex = convertTrimmedIndex(initialIndex, firstLevelMap, secondLevelMap);
|
|
1880
|
+
if (typeof newConversionIndex !== "number") {
|
|
1881
|
+
continue;
|
|
1882
|
+
}
|
|
1883
|
+
newItems[newConversionIndex] = true;
|
|
1884
|
+
}
|
|
1885
|
+
trimemedOptionsToUpgrade[type] = newItems;
|
|
1886
|
+
}
|
|
1887
|
+
return trimemedOptionsToUpgrade;
|
|
1888
|
+
}
|
|
1889
|
+
function hasVisibleGroupItems(source, trimmed, groupIndex) {
|
|
1890
|
+
var _a;
|
|
1891
|
+
const depth = (_a = source[groupIndex]) === null || _a === void 0 ? void 0 : _a[GROUP_DEPTH];
|
|
1892
|
+
if (depth == null) {
|
|
1893
|
+
return false;
|
|
1894
|
+
}
|
|
1895
|
+
for (let i = groupIndex + 1; i < source.length; i++) {
|
|
1896
|
+
const model = source[i];
|
|
1897
|
+
if (isGrouping(model)) {
|
|
1898
|
+
if (model[GROUP_DEPTH] <= depth) {
|
|
1899
|
+
break;
|
|
1900
|
+
}
|
|
1901
|
+
continue;
|
|
1902
|
+
}
|
|
1903
|
+
if (!trimmed[i]) {
|
|
1904
|
+
return true;
|
|
1905
|
+
}
|
|
1906
|
+
}
|
|
1907
|
+
return false;
|
|
1908
|
+
}
|
|
1909
|
+
function filterOutEmptyGroupRows(source, filterTrimmed) {
|
|
1910
|
+
const trimmed = Object.assign({}, filterTrimmed);
|
|
1911
|
+
source.forEach((model, index) => {
|
|
1912
|
+
if (!isGrouping(model)) {
|
|
1913
|
+
return;
|
|
1914
|
+
}
|
|
1915
|
+
if (hasVisibleGroupItems(source, trimmed, index)) {
|
|
1916
|
+
delete trimmed[index];
|
|
1917
|
+
} else {
|
|
1918
|
+
trimmed[index] = true;
|
|
1919
|
+
}
|
|
1920
|
+
});
|
|
1921
|
+
return trimmed;
|
|
1922
|
+
}
|
|
1923
|
+
var __rest = function(s, e) {
|
|
1924
|
+
var t = {};
|
|
1925
|
+
for (var p in s)
|
|
1926
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
1927
|
+
t[p] = s[p];
|
|
1928
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
1929
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
1930
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
1931
|
+
t[p[i]] = s[p[i]];
|
|
1932
|
+
}
|
|
1933
|
+
return t;
|
|
1934
|
+
};
|
|
1935
|
+
var GroupingRowPlugin = class extends BasePlugin {
|
|
1936
|
+
getStore(type = GROUPING_ROW_TYPE) {
|
|
1937
|
+
return this.providers.data.stores[type].store;
|
|
1938
|
+
}
|
|
1939
|
+
constructor(revogrid, providers) {
|
|
1940
|
+
super(revogrid, providers);
|
|
1941
|
+
}
|
|
1942
|
+
// befoce cell focus
|
|
1943
|
+
onFocus(e) {
|
|
1944
|
+
if (isGrouping(e.detail.model)) {
|
|
1945
|
+
e.preventDefault();
|
|
1946
|
+
}
|
|
1947
|
+
}
|
|
1948
|
+
// expand event triggered
|
|
1949
|
+
onExpand({ virtualIndex }) {
|
|
1950
|
+
const { source } = getSource(this.getStore().get("source"), this.getStore().get("proxyItems"));
|
|
1951
|
+
let newTrimmed = this.getStore().get("trimmed")[TRIMMED_GROUPING];
|
|
1952
|
+
let i = getPhysical(this.getStore(), virtualIndex);
|
|
1953
|
+
const isExpanded = getExpanded(source[i]);
|
|
1954
|
+
if (!isExpanded) {
|
|
1955
|
+
const { trimmed, items } = doExpand(virtualIndex, source, this.getStore().get("items"));
|
|
1956
|
+
newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
|
|
1957
|
+
if (items) {
|
|
1958
|
+
setItems(this.getStore(), items);
|
|
1959
|
+
}
|
|
1960
|
+
} else {
|
|
1961
|
+
const { trimmed } = doCollapse(i, source);
|
|
1962
|
+
newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
|
|
1963
|
+
this.revogrid.clearFocus();
|
|
1964
|
+
}
|
|
1965
|
+
this.getStore().set("source", source);
|
|
1966
|
+
this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
|
|
1967
|
+
}
|
|
1968
|
+
setColumnGrouping(cols) {
|
|
1969
|
+
if (cols === null || cols === void 0 ? void 0 : cols.length) {
|
|
1970
|
+
cols[0][PSEUDO_GROUP_COLUMN] = true;
|
|
1971
|
+
return true;
|
|
1972
|
+
}
|
|
1973
|
+
return false;
|
|
1974
|
+
}
|
|
1975
|
+
setColumns({ columns }) {
|
|
1976
|
+
for (let type of columnTypes) {
|
|
1977
|
+
if (this.setColumnGrouping(columns[type])) {
|
|
1978
|
+
break;
|
|
1979
|
+
}
|
|
1980
|
+
}
|
|
1981
|
+
}
|
|
1982
|
+
// evaluate drag between groups
|
|
1983
|
+
onDrag(e) {
|
|
1984
|
+
const { from, to } = e.detail;
|
|
1985
|
+
const isDown = to - from >= 0;
|
|
1986
|
+
const { source } = getSource(this.getStore().get("source"), this.getStore().get("proxyItems"));
|
|
1987
|
+
const items = this.getStore().get("items");
|
|
1988
|
+
let i = isDown ? from : to;
|
|
1989
|
+
const end = isDown ? to : from;
|
|
1990
|
+
for (; i < end; i++) {
|
|
1991
|
+
const model = source[items[i]];
|
|
1992
|
+
const isGroup = isGrouping(model);
|
|
1993
|
+
if (isGroup) {
|
|
1994
|
+
e.preventDefault();
|
|
1995
|
+
return;
|
|
1996
|
+
}
|
|
1997
|
+
}
|
|
1998
|
+
}
|
|
1999
|
+
beforeTrimmedApply(trimmed, type) {
|
|
2000
|
+
if (type === FILTER_TRIMMED_TYPE) {
|
|
2001
|
+
const source = this.getStore().get("source");
|
|
2002
|
+
const updatedTrimmed = filterOutEmptyGroupRows(source, trimmed);
|
|
2003
|
+
Object.keys(trimmed).forEach((index) => delete trimmed[Number.parseInt(index, 10)]);
|
|
2004
|
+
Object.assign(trimmed, updatedTrimmed);
|
|
2005
|
+
}
|
|
2006
|
+
}
|
|
2007
|
+
beforeFilterTrimmed(trimmed) {
|
|
2008
|
+
const source = this.getStore().get("source");
|
|
2009
|
+
return filterOutEmptyGroupRows(source, trimmed);
|
|
2010
|
+
}
|
|
2011
|
+
isSortingRunning() {
|
|
2012
|
+
const sortingPlugin = this.providers.plugins.getByClass(SortingPlugin);
|
|
2013
|
+
return !!(sortingPlugin === null || sortingPlugin === void 0 ? void 0 : sortingPlugin.sortingPromise);
|
|
2014
|
+
}
|
|
2015
|
+
/**
|
|
2016
|
+
* Returns grouping options for regrouping that must preserve current UI state.
|
|
2017
|
+
*
|
|
2018
|
+
* `expandedAll` and config `prevExpanded` are initial/config instructions.
|
|
2019
|
+
* Reusing them after sorting would reopen groups the user collapsed before
|
|
2020
|
+
* sorting instead of using the current grouped source state.
|
|
2021
|
+
*/
|
|
2022
|
+
getCurrentExpandedOptions() {
|
|
2023
|
+
var _a;
|
|
2024
|
+
const _b = (_a = this.options) !== null && _a !== void 0 ? _a : {}, options = __rest(_b, ["expandedAll", "prevExpanded"]);
|
|
2025
|
+
return options;
|
|
2026
|
+
}
|
|
2027
|
+
/**
|
|
2028
|
+
* Starts global source update with group clearing and applying new one
|
|
2029
|
+
* Initiated when need to reapply grouping
|
|
2030
|
+
*/
|
|
2031
|
+
doSourceUpdate(options) {
|
|
2032
|
+
var _a, _b;
|
|
2033
|
+
const store = this.getStore();
|
|
2034
|
+
const { source, prevExpanded, oldNewIndexes } = getSource(store.get("source"), store.get("proxyItems"), true);
|
|
2035
|
+
const expanded = Object.assign({ prevExpanded }, options);
|
|
2036
|
+
const { sourceWithGroups, depth, trimmed, oldNewIndexMap } = gatherGrouping(source, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : [], expanded);
|
|
2037
|
+
const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
|
|
2038
|
+
const cellRenderer = options === null || options === void 0 ? void 0 : options.groupCellTemplate;
|
|
2039
|
+
this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer, cellRenderer }, true);
|
|
2040
|
+
this.updateTrimmed(trimmed, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, sourceWithGroups);
|
|
2041
|
+
}
|
|
2042
|
+
/**
|
|
2043
|
+
* Apply grouping on data set
|
|
2044
|
+
* Clear grouping from source
|
|
2045
|
+
* If source came from other plugin
|
|
2046
|
+
*/
|
|
2047
|
+
onDataSet(data) {
|
|
2048
|
+
var _a, _b, _c;
|
|
2049
|
+
let preservedExpanded = {};
|
|
2050
|
+
if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.preserveGroupingOnUpdate) !== false) {
|
|
2051
|
+
let { prevExpanded } = getSource(this.getStore().get("source"), this.getStore().get("proxyItems"), true);
|
|
2052
|
+
preservedExpanded = prevExpanded;
|
|
2053
|
+
}
|
|
2054
|
+
const source = data.source.filter((s) => !isGrouping(s));
|
|
2055
|
+
const options = Object.assign(Object.assign({}, this.options), { prevExpanded: preservedExpanded });
|
|
2056
|
+
const { sourceWithGroups, depth, trimmed, oldNewIndexMap } = gatherGrouping(source, (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : [], options);
|
|
2057
|
+
data.source = sourceWithGroups;
|
|
2058
|
+
this.providers.data.setGrouping({
|
|
2059
|
+
depth,
|
|
2060
|
+
customRenderer: options.groupLabelTemplate,
|
|
2061
|
+
cellRenderer: options.groupCellTemplate
|
|
2062
|
+
});
|
|
2063
|
+
this.updateTrimmed(trimmed, oldNewIndexMap, void 0, sourceWithGroups);
|
|
2064
|
+
}
|
|
2065
|
+
/**
|
|
2066
|
+
* External call to apply grouping. Called by revogrid when prop changed.
|
|
2067
|
+
*/
|
|
2068
|
+
setGrouping(options) {
|
|
2069
|
+
var _a, _b;
|
|
2070
|
+
this.clearSubscriptions();
|
|
2071
|
+
this.options = options;
|
|
2072
|
+
if (!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.length)) {
|
|
2073
|
+
this.clearGrouping();
|
|
2074
|
+
return;
|
|
2075
|
+
}
|
|
2076
|
+
const store = this.getStore();
|
|
2077
|
+
const { source } = getSource(store.get("source"), store.get("proxyItems"));
|
|
2078
|
+
if (source.length) {
|
|
2079
|
+
this.doSourceUpdate(Object.assign({}, options));
|
|
2080
|
+
}
|
|
2081
|
+
for (let t of columnTypes) {
|
|
2082
|
+
if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
|
|
2083
|
+
this.providers.column.refreshByType(t);
|
|
2084
|
+
break;
|
|
2085
|
+
}
|
|
2086
|
+
}
|
|
2087
|
+
this.addEventListener("beforesourceset", ({ detail }) => {
|
|
2088
|
+
var _a2, _b2, _c;
|
|
2089
|
+
if (!(((_b2 = (_a2 = this.options) === null || _a2 === void 0 ? void 0 : _a2.props) === null || _b2 === void 0 ? void 0 : _b2.length) && ((_c = detail === null || detail === void 0 ? void 0 : detail.source) === null || _c === void 0 ? void 0 : _c.length))) {
|
|
2090
|
+
return;
|
|
2091
|
+
}
|
|
2092
|
+
if (this.isSortingRunning()) {
|
|
2093
|
+
return;
|
|
2094
|
+
}
|
|
2095
|
+
this.onDataSet(detail);
|
|
2096
|
+
});
|
|
2097
|
+
this.addEventListener("beforecolumnsset", ({ detail }) => {
|
|
2098
|
+
this.setColumns(detail);
|
|
2099
|
+
});
|
|
2100
|
+
this.addEventListener("beforetrimmed", ({ detail: { trimmed, trimmedType } }) => this.beforeTrimmedApply(trimmed, trimmedType));
|
|
2101
|
+
this.addEventListener("beforefiltertrimmed", ({ detail }) => {
|
|
2102
|
+
detail.itemsToFilter = this.beforeFilterTrimmed(detail.itemsToFilter);
|
|
2103
|
+
});
|
|
2104
|
+
this.addEventListener("aftersortingapply", () => {
|
|
2105
|
+
var _a2, _b2;
|
|
2106
|
+
if (!((_b2 = (_a2 = this.options) === null || _a2 === void 0 ? void 0 : _a2.props) === null || _b2 === void 0 ? void 0 : _b2.length)) {
|
|
2107
|
+
return;
|
|
2108
|
+
}
|
|
2109
|
+
this.doSourceUpdate(this.getCurrentExpandedOptions());
|
|
2110
|
+
});
|
|
2111
|
+
this.addEventListener("beforecellfocus", (e) => this.onFocus(e));
|
|
2112
|
+
this.addEventListener("roworderchanged", (e) => this.onDrag(e));
|
|
2113
|
+
this.addEventListener(GROUP_EXPAND_EVENT, (e) => this.onExpand(e.detail));
|
|
2114
|
+
}
|
|
2115
|
+
// clear grouping
|
|
2116
|
+
clearGrouping() {
|
|
2117
|
+
columnTypes.forEach((t) => {
|
|
2118
|
+
const cols = this.providers.column.getColumns(t);
|
|
2119
|
+
let deleted = false;
|
|
2120
|
+
cols.forEach((c) => {
|
|
2121
|
+
if (isGroupingColumn(c)) {
|
|
2122
|
+
delete c[PSEUDO_GROUP_COLUMN];
|
|
2123
|
+
deleted = true;
|
|
2124
|
+
}
|
|
2125
|
+
});
|
|
2126
|
+
if (deleted) {
|
|
2127
|
+
this.providers.column.refreshByType(t);
|
|
2128
|
+
}
|
|
2129
|
+
});
|
|
2130
|
+
const { source, oldNewIndexes } = getSource(this.getStore().get("source"), this.getStore().get("proxyItems"), true);
|
|
2131
|
+
this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, void 0, true);
|
|
2132
|
+
this.updateTrimmed(void 0, void 0, oldNewIndexes, source);
|
|
2133
|
+
}
|
|
2134
|
+
updateTrimmed(trimmedGroup = {}, firstLevelMap = {}, secondLevelMap, source = this.getStore().get("source")) {
|
|
2135
|
+
const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.getStore().get("trimmed"), firstLevelMap, secondLevelMap);
|
|
2136
|
+
for (let type in trimemedOptionsToUpgrade) {
|
|
2137
|
+
if (type === FILTER_TRIMMED_TYPE) {
|
|
2138
|
+
trimemedOptionsToUpgrade[type] = filterOutEmptyGroupRows(source, trimemedOptionsToUpgrade[type]);
|
|
2139
|
+
}
|
|
2140
|
+
this.revogrid.addTrimmed(trimemedOptionsToUpgrade[type], type);
|
|
2141
|
+
}
|
|
2142
|
+
this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
|
|
2143
|
+
}
|
|
2144
|
+
};
|
|
2145
|
+
var COLUMN_DRAG_CLASS = "column-drag-start";
|
|
2146
|
+
var ColumnOrderHandler = class {
|
|
2147
|
+
constructor() {
|
|
2148
|
+
this.offset = 0;
|
|
2149
|
+
}
|
|
2150
|
+
renderAutoscroll(_, parent) {
|
|
2151
|
+
if (!parent) {
|
|
2152
|
+
return;
|
|
2153
|
+
}
|
|
2154
|
+
this.autoscrollEl = document.createElement("div");
|
|
2155
|
+
this.autoscrollEl.classList.add("drag-auto-scroll-y");
|
|
2156
|
+
parent.appendChild(this.autoscrollEl);
|
|
2157
|
+
}
|
|
2158
|
+
autoscroll(pos, dataContainerSize, direction = "translateX") {
|
|
2159
|
+
if (!this.autoscrollEl) {
|
|
2160
|
+
return;
|
|
2161
|
+
}
|
|
2162
|
+
const helperOffset = 10;
|
|
2163
|
+
const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
|
|
2164
|
+
this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
|
|
2165
|
+
this.autoscrollEl.scrollIntoView({
|
|
2166
|
+
block: "nearest",
|
|
2167
|
+
inline: "nearest"
|
|
2168
|
+
});
|
|
2169
|
+
}
|
|
2170
|
+
start(e, { dataEl, gridRect, scrollEl, gridEl }, dir = "left") {
|
|
2171
|
+
gridEl.classList.add(COLUMN_DRAG_CLASS);
|
|
2172
|
+
const scrollContainerRect = scrollEl.getBoundingClientRect();
|
|
2173
|
+
if (scrollContainerRect) {
|
|
2174
|
+
this.offset = scrollContainerRect[dir] - gridRect[dir];
|
|
2175
|
+
}
|
|
2176
|
+
this.renderAutoscroll(e, dataEl);
|
|
2177
|
+
}
|
|
2178
|
+
stop(gridEl) {
|
|
2179
|
+
var _a;
|
|
2180
|
+
gridEl.classList.remove(COLUMN_DRAG_CLASS);
|
|
2181
|
+
if (this.element) {
|
|
2182
|
+
this.element.hidden = true;
|
|
2183
|
+
}
|
|
2184
|
+
this.offset = 0;
|
|
2185
|
+
(_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
|
|
2186
|
+
this.autoscrollEl = void 0;
|
|
2187
|
+
}
|
|
2188
|
+
showHandler(pos, size, direction = "translateX") {
|
|
2189
|
+
if (!this.element) {
|
|
2190
|
+
return;
|
|
2191
|
+
}
|
|
2192
|
+
if (this.offset) {
|
|
2193
|
+
pos = Math.max(pos, this.offset);
|
|
2194
|
+
}
|
|
2195
|
+
pos = Math.min(pos, size);
|
|
2196
|
+
this.element.style.transform = `${direction}(${pos}px)`;
|
|
2197
|
+
this.element.hidden = false;
|
|
2198
|
+
}
|
|
2199
|
+
render() {
|
|
2200
|
+
const el = this.element = document.createElement("div");
|
|
2201
|
+
el.classList.add("drag-position-y");
|
|
2202
|
+
el.hidden = true;
|
|
2203
|
+
return el;
|
|
2204
|
+
}
|
|
2205
|
+
};
|
|
2206
|
+
var COLUMN_CLICK = ON_COLUMN_CLICK;
|
|
2207
|
+
var COLUMN_DRAG_MOVE_EVENT = "columndragmousemove";
|
|
2208
|
+
var COLUMN_DRAG_END_EVENT = "columndragend";
|
|
2209
|
+
var BEFORE_COLUMN_DRAG_END_EVENT = "beforecolumndragend";
|
|
2210
|
+
var COLUMN_DRAG_START_EVENT = "columndragstart";
|
|
2211
|
+
var ColumnMovePlugin = class extends BasePlugin {
|
|
2212
|
+
constructor(revogrid, providers) {
|
|
2213
|
+
super(revogrid, providers);
|
|
2214
|
+
this.moveFunc = debounce((e) => this.doMove(e), 5);
|
|
2215
|
+
this.preventHeaderClickAfterDrag = (event) => {
|
|
2216
|
+
if (!this.preventNextHeaderClick) {
|
|
2217
|
+
return;
|
|
2218
|
+
}
|
|
2219
|
+
this.preventNextHeaderClick = false;
|
|
2220
|
+
event.preventDefault();
|
|
2221
|
+
};
|
|
2222
|
+
this.staticDragData = null;
|
|
2223
|
+
this.dragData = null;
|
|
2224
|
+
this.columnDragMoved = false;
|
|
2225
|
+
this.preventNextHeaderClick = false;
|
|
2226
|
+
this.localSubscriptions = {};
|
|
2227
|
+
this.orderUi = new ColumnOrderHandler();
|
|
2228
|
+
revogrid.appendChild(this.orderUi.render());
|
|
2229
|
+
revogrid.classList.add("column-draggable");
|
|
2230
|
+
this.localSubscriptions["mouseleave"] = {
|
|
2231
|
+
target: document,
|
|
2232
|
+
callback: (e) => this.onMouseOut(e)
|
|
2233
|
+
};
|
|
2234
|
+
this.localSubscriptions["mouseup"] = {
|
|
2235
|
+
target: document,
|
|
2236
|
+
callback: (e) => this.onMouseUp(e)
|
|
2237
|
+
};
|
|
2238
|
+
this.localSubscriptions["mousemove"] = {
|
|
2239
|
+
target: document,
|
|
2240
|
+
callback: (e) => this.move(e)
|
|
2241
|
+
};
|
|
2242
|
+
this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
|
|
2243
|
+
this.revogrid.addEventListener("beforeheaderclick", this.preventHeaderClickAfterDrag, { capture: true });
|
|
2244
|
+
}
|
|
2245
|
+
dragStart({ event, data }) {
|
|
2246
|
+
if (event.defaultPrevented) {
|
|
2247
|
+
return;
|
|
2248
|
+
}
|
|
2249
|
+
this.preventNextHeaderClick = false;
|
|
2250
|
+
const { defaultPrevented } = dispatch(this.revogrid, COLUMN_DRAG_START_EVENT, data);
|
|
2251
|
+
if (defaultPrevented) {
|
|
2252
|
+
return;
|
|
2253
|
+
}
|
|
2254
|
+
this.clearOrder();
|
|
2255
|
+
const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
|
|
2256
|
+
mouseleave.target.addEventListener("mouseleave", mouseleave.callback);
|
|
2257
|
+
mouseup.target.addEventListener("mouseup", mouseup.callback);
|
|
2258
|
+
const dataEl = event.target.closest("revogr-header");
|
|
2259
|
+
const scrollEl = event.target.closest("revogr-viewport-scroll");
|
|
2260
|
+
if (!dataEl || !scrollEl) {
|
|
2261
|
+
return;
|
|
2262
|
+
}
|
|
2263
|
+
if (isColGrouping(data) || data.providers.type === "rowHeaders") {
|
|
2264
|
+
return;
|
|
2265
|
+
}
|
|
2266
|
+
const cols = this.getDimension(data.pin || "rgCol");
|
|
2267
|
+
const gridRect = this.revogrid.getBoundingClientRect();
|
|
2268
|
+
const elRect = dataEl.getBoundingClientRect();
|
|
2269
|
+
const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left) + (cols.renderOffset || 0));
|
|
2270
|
+
this.staticDragData = {
|
|
2271
|
+
startPos: event.x,
|
|
2272
|
+
startItem,
|
|
2273
|
+
pin: data.pin,
|
|
2274
|
+
dataEl,
|
|
2275
|
+
scrollEl,
|
|
2276
|
+
gridEl: this.revogrid,
|
|
2277
|
+
cols
|
|
2278
|
+
};
|
|
2279
|
+
this.dragData = this.getData(this.staticDragData, []);
|
|
2280
|
+
mousemove.target.addEventListener("mousemove", mousemove.callback);
|
|
2281
|
+
this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
|
|
2282
|
+
}
|
|
2283
|
+
doMove(e) {
|
|
2284
|
+
if (!this.staticDragData) {
|
|
2285
|
+
return;
|
|
2286
|
+
}
|
|
2287
|
+
const dragData = this.dragData = this.getData(this.staticDragData, []);
|
|
2288
|
+
if (!dragData) {
|
|
2289
|
+
return;
|
|
2290
|
+
}
|
|
2291
|
+
const start = this.staticDragData.startPos;
|
|
2292
|
+
if (Math.abs(start - e.x) > 10) {
|
|
2293
|
+
const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
|
|
2294
|
+
const rgCol = getItemByPosition(this.staticDragData.cols, x + (this.staticDragData.cols.renderOffset || 0));
|
|
2295
|
+
this.orderUi.autoscroll(x, dragData.elRect.width);
|
|
2296
|
+
if (rgCol.itemIndex >= this.staticDragData.cols.count) {
|
|
2297
|
+
return;
|
|
2298
|
+
}
|
|
2299
|
+
this.orderUi.showHandler(getColumnDragPosition(rgCol, this.staticDragData.startItem, this.staticDragData.cols.renderOffset || 0, dragData.scrollOffset), dragData.gridRect.width);
|
|
2300
|
+
}
|
|
2301
|
+
}
|
|
2302
|
+
move(e) {
|
|
2303
|
+
if (this.staticDragData && Math.abs(this.staticDragData.startPos - e.x) > 10) {
|
|
2304
|
+
this.columnDragMoved = true;
|
|
2305
|
+
}
|
|
2306
|
+
dispatch(this.revogrid, COLUMN_DRAG_MOVE_EVENT, e);
|
|
2307
|
+
this.moveFunc(e);
|
|
2308
|
+
}
|
|
2309
|
+
onMouseOut(_) {
|
|
2310
|
+
this.clearOrder();
|
|
2311
|
+
}
|
|
2312
|
+
onMouseUp(e) {
|
|
2313
|
+
const suppressClick = this.columnDragMoved;
|
|
2314
|
+
if (this.dragData && this.staticDragData) {
|
|
2315
|
+
let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
|
|
2316
|
+
if (relativePos < 0) {
|
|
2317
|
+
relativePos = 0;
|
|
2318
|
+
}
|
|
2319
|
+
const newPosition = getItemByPosition(this.staticDragData.cols, relativePos + (this.staticDragData.cols.renderOffset || 0));
|
|
2320
|
+
const store = this.providers.column.stores[this.dragData.type].store;
|
|
2321
|
+
const source = store.get("source");
|
|
2322
|
+
const newItems = [...store.get("items")];
|
|
2323
|
+
const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_COLUMN_DRAG_END_EVENT, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: source[newItems[this.staticDragData.startItem.itemIndex]] }));
|
|
2324
|
+
if (!stopDrag) {
|
|
2325
|
+
const prevItems = [...newItems];
|
|
2326
|
+
const toMove = newItems.splice(this.staticDragData.startItem.itemIndex, 1);
|
|
2327
|
+
newItems.splice(newPosition.itemIndex, 0, ...toMove);
|
|
2328
|
+
store.set("items", newItems);
|
|
2329
|
+
this.providers.dimension.updateSizesPositionByNewDataIndexes(this.dragData.type, newItems, prevItems);
|
|
2330
|
+
}
|
|
2331
|
+
dispatch(this.revogrid, COLUMN_DRAG_END_EVENT, this.getData(this.staticDragData, newItems, source));
|
|
2332
|
+
}
|
|
2333
|
+
if (suppressClick) {
|
|
2334
|
+
this.preventNextHeaderClick = !!e.target.closest("revogr-header");
|
|
2335
|
+
}
|
|
2336
|
+
this.clearOrder();
|
|
2337
|
+
}
|
|
2338
|
+
clearLocalSubscriptions() {
|
|
2339
|
+
forEach(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
|
|
2340
|
+
}
|
|
2341
|
+
clearOrder() {
|
|
2342
|
+
this.staticDragData = null;
|
|
2343
|
+
this.dragData = null;
|
|
2344
|
+
this.columnDragMoved = false;
|
|
2345
|
+
this.clearLocalSubscriptions();
|
|
2346
|
+
this.orderUi.stop(this.revogrid);
|
|
2347
|
+
}
|
|
2348
|
+
/**
|
|
2349
|
+
* Clearing subscription
|
|
2350
|
+
*/
|
|
2351
|
+
clearSubscriptions() {
|
|
2352
|
+
super.clearSubscriptions();
|
|
2353
|
+
this.clearLocalSubscriptions();
|
|
2354
|
+
this.revogrid.removeEventListener("beforeheaderclick", this.preventHeaderClickAfterDrag, { capture: true });
|
|
2355
|
+
}
|
|
2356
|
+
getData({ gridEl, dataEl, pin }, order, source = []) {
|
|
2357
|
+
const gridRect = gridEl.getBoundingClientRect();
|
|
2358
|
+
const elRect = dataEl.getBoundingClientRect();
|
|
2359
|
+
const scrollOffset = elRect.left - gridRect.left;
|
|
2360
|
+
return {
|
|
2361
|
+
columns: order.map((index) => source[index]).filter(Boolean),
|
|
2362
|
+
elRect,
|
|
2363
|
+
gridRect,
|
|
2364
|
+
order,
|
|
2365
|
+
type: pin || "rgCol",
|
|
2366
|
+
scrollOffset
|
|
2367
|
+
};
|
|
2368
|
+
}
|
|
2369
|
+
getDimension(type) {
|
|
2370
|
+
return this.providers.dimension.stores[type].getCurrentState();
|
|
2371
|
+
}
|
|
2372
|
+
};
|
|
2373
|
+
function getLeftRelative(absoluteX, gridPos, offset) {
|
|
2374
|
+
return absoluteX - gridPos - offset;
|
|
2375
|
+
}
|
|
2376
|
+
function getColumnDragPosition(targetItem, startItem, renderOffset, scrollOffset) {
|
|
2377
|
+
const insertionEdge = startItem.itemIndex > targetItem.itemIndex ? targetItem.start : targetItem.end;
|
|
2378
|
+
return insertionEdge - renderOffset + scrollOffset;
|
|
2379
|
+
}
|
|
2380
|
+
|
|
2381
|
+
// ../../node_modules/.pnpm/@revolist+revogrid@4.25.2/node_modules/@revolist/revogrid/dist/esm/revo-grid.entry.js
|
|
2382
|
+
var ColumnDataProvider = class {
|
|
2383
|
+
get stores() {
|
|
2384
|
+
return this.dataSources;
|
|
2385
|
+
}
|
|
2386
|
+
constructor() {
|
|
2387
|
+
this.collection = null;
|
|
2388
|
+
this.dataSources = columnTypes.reduce((sources, k) => {
|
|
2389
|
+
sources[k] = new DataStore(k);
|
|
2390
|
+
return sources;
|
|
2391
|
+
}, {});
|
|
2392
|
+
}
|
|
2393
|
+
column(c, type = "rgCol") {
|
|
2394
|
+
return this.getColumn(c, type);
|
|
2395
|
+
}
|
|
2396
|
+
getColumn(virtualIndex, type) {
|
|
2397
|
+
return getSourceItem(this.dataSources[type].store, virtualIndex);
|
|
2398
|
+
}
|
|
2399
|
+
getRawColumns() {
|
|
2400
|
+
return reduce(this.dataSources, (result, item, type) => {
|
|
2401
|
+
result[type] = item.store.get("source");
|
|
2402
|
+
return result;
|
|
2403
|
+
}, {
|
|
2404
|
+
rgCol: [],
|
|
2405
|
+
colPinStart: [],
|
|
2406
|
+
colPinEnd: []
|
|
2407
|
+
});
|
|
2408
|
+
}
|
|
2409
|
+
getColumns(type = "all") {
|
|
2410
|
+
const columnsByType = this.getRawColumns();
|
|
2411
|
+
if (type !== "all") {
|
|
2412
|
+
return columnsByType[type];
|
|
2413
|
+
}
|
|
2414
|
+
return columnTypes.reduce((r, t) => [...r, ...columnsByType[t]], []);
|
|
2415
|
+
}
|
|
2416
|
+
getColumnIndexByProp(prop, type) {
|
|
2417
|
+
return getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
|
|
2418
|
+
}
|
|
2419
|
+
getColumnByProp(prop) {
|
|
2420
|
+
var _a;
|
|
2421
|
+
return (_a = this.collection) === null || _a === void 0 ? void 0 : _a.columnByProp[prop];
|
|
2422
|
+
}
|
|
2423
|
+
refreshByType(type) {
|
|
2424
|
+
this.dataSources[type].refresh();
|
|
2425
|
+
}
|
|
2426
|
+
/**
|
|
2427
|
+
* Main method to set columns
|
|
2428
|
+
*/
|
|
2429
|
+
setColumns(data) {
|
|
2430
|
+
columnTypes.forEach((k) => {
|
|
2431
|
+
this.dataSources[k].updateData(data.columns[k], {
|
|
2432
|
+
// max depth level
|
|
2433
|
+
depth: data.maxLevel,
|
|
2434
|
+
// groups
|
|
2435
|
+
groups: data.columnGrouping[k].reduce((res, g) => {
|
|
2436
|
+
if (!res[g.level]) {
|
|
2437
|
+
res[g.level] = [];
|
|
2438
|
+
}
|
|
2439
|
+
res[g.level].push(g);
|
|
2440
|
+
return res;
|
|
2441
|
+
}, {})
|
|
2442
|
+
});
|
|
2443
|
+
});
|
|
2444
|
+
this.collection = data;
|
|
2445
|
+
return data;
|
|
2446
|
+
}
|
|
2447
|
+
/**
|
|
2448
|
+
* Used in plugins
|
|
2449
|
+
* Modify columns in store
|
|
2450
|
+
*/
|
|
2451
|
+
updateColumns(updatedColumns) {
|
|
2452
|
+
const columnByKey = updatedColumns.reduce((res, c) => {
|
|
2453
|
+
const type = getColumnType(c);
|
|
2454
|
+
if (!res[type]) {
|
|
2455
|
+
res[type] = {};
|
|
2456
|
+
}
|
|
2457
|
+
res[type][c.prop] = c;
|
|
2458
|
+
return res;
|
|
2459
|
+
}, {});
|
|
2460
|
+
const colByIndex = {};
|
|
2461
|
+
for (const t in columnByKey) {
|
|
2462
|
+
if (!columnByKey.hasOwnProperty(t)) {
|
|
2463
|
+
continue;
|
|
2464
|
+
}
|
|
2465
|
+
const type = t;
|
|
2466
|
+
const colsToUpdate = columnByKey[type];
|
|
2467
|
+
const sourceItems = this.dataSources[type].store.get("source");
|
|
2468
|
+
colByIndex[type] = {};
|
|
2469
|
+
for (let i = 0; i < sourceItems.length; i++) {
|
|
2470
|
+
const column = sourceItems[i];
|
|
2471
|
+
const colToUpdateIfExists = colsToUpdate === null || colsToUpdate === void 0 ? void 0 : colsToUpdate[column.prop];
|
|
2472
|
+
if (colToUpdateIfExists) {
|
|
2473
|
+
colByIndex[type][i] = colToUpdateIfExists;
|
|
2474
|
+
}
|
|
2475
|
+
}
|
|
2476
|
+
}
|
|
2477
|
+
for (const t in colByIndex) {
|
|
2478
|
+
if (!colByIndex.hasOwnProperty(t)) {
|
|
2479
|
+
continue;
|
|
2480
|
+
}
|
|
2481
|
+
const type = t;
|
|
2482
|
+
setSourceByPhysicalIndex(this.dataSources[type].store, colByIndex[type] || {});
|
|
2483
|
+
}
|
|
2484
|
+
}
|
|
2485
|
+
updateColumn(column, index) {
|
|
2486
|
+
const type = getColumnType(column);
|
|
2487
|
+
setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
|
|
2488
|
+
}
|
|
2489
|
+
};
|
|
2490
|
+
var DataProvider = class {
|
|
2491
|
+
constructor(dimensionProvider) {
|
|
2492
|
+
this.dimensionProvider = dimensionProvider;
|
|
2493
|
+
this.stores = reduce(rowTypes, (sources, k) => {
|
|
2494
|
+
sources[k] = new DataStore(k);
|
|
2495
|
+
return sources;
|
|
2496
|
+
}, {});
|
|
2497
|
+
}
|
|
2498
|
+
/**
|
|
2499
|
+
* Replaces the data source for a row type and synchronizes the related dimension metadata.
|
|
2500
|
+
*
|
|
2501
|
+
* `rgRow` updates also refresh the virtual row model unless `disableVirtualRows` is set.
|
|
2502
|
+
* Pinned row types skip virtual row recalculation because they are rendered directly.
|
|
2503
|
+
*
|
|
2504
|
+
* @param data Full source data assigned to the target row store.
|
|
2505
|
+
* @param type Row collection to update. Defaults to the main body rows.
|
|
2506
|
+
* @param disableVirtualRows Prevents recalculating virtual rows for the main row store.
|
|
2507
|
+
* @param grouping Optional grouping metadata applied together with the new data set.
|
|
2508
|
+
* @param silent Preserves the current trimmed state instead of resetting it during the update.
|
|
2509
|
+
* @param preserveTrimmed Re-applies current trimmed indexes after a silent update.
|
|
2510
|
+
* @returns The same `data` array that was provided to the method.
|
|
2511
|
+
*/
|
|
2512
|
+
setData(data, type = "rgRow", disableVirtualRows = false, grouping, silent = false, preserveTrimmed = false) {
|
|
2513
|
+
this.stores[type].updateData([...data], grouping, silent, preserveTrimmed);
|
|
2514
|
+
const noVirtual = type !== "rgRow" || disableVirtualRows;
|
|
2515
|
+
this.dimensionProvider.setData(data.length, type, noVirtual);
|
|
2516
|
+
return data;
|
|
2517
|
+
}
|
|
2518
|
+
getModel(virtualIndex, type = "rgRow") {
|
|
2519
|
+
const store = this.stores[type].store;
|
|
2520
|
+
return getSourceItem(store, virtualIndex);
|
|
2521
|
+
}
|
|
2522
|
+
changeOrder({ rowType = "rgRow", from, to }) {
|
|
2523
|
+
const storeService = this.stores[rowType];
|
|
2524
|
+
const newItemsOrder = [...storeService.store.get("proxyItems")];
|
|
2525
|
+
const prevItems = storeService.store.get("items");
|
|
2526
|
+
const toMove = newItemsOrder.splice(
|
|
2527
|
+
newItemsOrder.indexOf(prevItems[from]),
|
|
2528
|
+
// get index in proxy
|
|
2529
|
+
1
|
|
2530
|
+
);
|
|
2531
|
+
const targetItem = prevItems[from < to ? to + 1 : to];
|
|
2532
|
+
const targetIndex = targetItem === void 0 ? newItemsOrder.length : newItemsOrder.indexOf(targetItem);
|
|
2533
|
+
newItemsOrder.splice(targetIndex, 0, ...toMove);
|
|
2534
|
+
storeService.setData({
|
|
2535
|
+
proxyItems: newItemsOrder
|
|
2536
|
+
});
|
|
2537
|
+
const newItems = storeService.store.get("items");
|
|
2538
|
+
this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, newItems, prevItems);
|
|
2539
|
+
}
|
|
2540
|
+
setCellData({ type, rowIndex, prop, val }, mutate = true) {
|
|
2541
|
+
const model = this.getModel(rowIndex, type);
|
|
2542
|
+
model[prop] = val;
|
|
2543
|
+
this.stores[type].setSourceData({ [rowIndex]: model }, mutate);
|
|
2544
|
+
}
|
|
2545
|
+
setRangeData(data, type) {
|
|
2546
|
+
const items = {};
|
|
2547
|
+
for (let rowIndex in data) {
|
|
2548
|
+
const oldModel = items[rowIndex] = getSourceItem(this.stores[type].store, parseInt(rowIndex, 10));
|
|
2549
|
+
if (!oldModel) {
|
|
2550
|
+
continue;
|
|
2551
|
+
}
|
|
2552
|
+
for (let prop in data[rowIndex]) {
|
|
2553
|
+
oldModel[prop] = data[rowIndex][prop];
|
|
2554
|
+
}
|
|
2555
|
+
}
|
|
2556
|
+
this.stores[type].setSourceData(items);
|
|
2557
|
+
}
|
|
2558
|
+
refresh(type = "all") {
|
|
2559
|
+
if (isRowType(type)) {
|
|
2560
|
+
this.refreshItems(type);
|
|
2561
|
+
}
|
|
2562
|
+
rowTypes.forEach((t) => this.refreshItems(t));
|
|
2563
|
+
}
|
|
2564
|
+
refreshItems(type = "rgRow") {
|
|
2565
|
+
const items = this.stores[type].store.get("items");
|
|
2566
|
+
this.stores[type].setData({ items: [...items] });
|
|
2567
|
+
}
|
|
2568
|
+
setGrouping({ depth, customRenderer, cellRenderer }, type = "rgRow") {
|
|
2569
|
+
this.stores[type].setData({
|
|
2570
|
+
groupingDepth: depth,
|
|
2571
|
+
groupingCustomRenderer: customRenderer,
|
|
2572
|
+
groupingCellRenderer: cellRenderer
|
|
2573
|
+
});
|
|
2574
|
+
}
|
|
2575
|
+
setTrimmed(trimmed, type = "rgRow") {
|
|
2576
|
+
const store = this.stores[type];
|
|
2577
|
+
store.addTrimmed(trimmed);
|
|
2578
|
+
this.dimensionProvider.setTrimmed(trimmed, type);
|
|
2579
|
+
if (type === "rgRow") {
|
|
2580
|
+
this.dimensionProvider.setData(getVisibleSourceItem(store.store).length, type);
|
|
2581
|
+
}
|
|
2582
|
+
}
|
|
2583
|
+
};
|
|
2584
|
+
var DEFAULT_VIRTUAL_X = ["rgCol"];
|
|
2585
|
+
function isVirtualXDimension(type, disableVirtualX = false, virtualX = DEFAULT_VIRTUAL_X) {
|
|
2586
|
+
return !disableVirtualX && virtualX.includes(type);
|
|
2587
|
+
}
|
|
2588
|
+
var DimensionProvider = class {
|
|
2589
|
+
constructor(viewports, config) {
|
|
2590
|
+
this.viewports = viewports;
|
|
2591
|
+
const sizeChanged = debounce((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
|
|
2592
|
+
this.stores = [...rowTypes, ...columnTypes].reduce((sources, t) => {
|
|
2593
|
+
sources[t] = new DimensionStore(t);
|
|
2594
|
+
sources[t].store.onChange("realSize", () => sizeChanged(t));
|
|
2595
|
+
return sources;
|
|
2596
|
+
}, {});
|
|
2597
|
+
}
|
|
2598
|
+
/**
|
|
2599
|
+
* Clear old sizes from dimension and viewports
|
|
2600
|
+
* @param type - dimension type
|
|
2601
|
+
* @param count - count of items
|
|
2602
|
+
*/
|
|
2603
|
+
clearSize(t, count) {
|
|
2604
|
+
this.stores[t].drop();
|
|
2605
|
+
this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get("originItemSize"));
|
|
2606
|
+
this.setItemCount(count, t);
|
|
2607
|
+
}
|
|
2608
|
+
/**
|
|
2609
|
+
* Apply new custom sizes to dimension and view port
|
|
2610
|
+
* @param type - dimension type
|
|
2611
|
+
* @param sizes - new custom sizes
|
|
2612
|
+
* @param keepOld - keep old sizes merge new with old
|
|
2613
|
+
*/
|
|
2614
|
+
setCustomSizes(type, sizes, keepOld = false) {
|
|
2615
|
+
let newSizes = sizes;
|
|
2616
|
+
if (keepOld) {
|
|
2617
|
+
const oldSizes = this.stores[type].store.get("sizes");
|
|
2618
|
+
newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
|
|
2619
|
+
}
|
|
2620
|
+
this.stores[type].setDimensionSize(newSizes);
|
|
2621
|
+
this.setViewPortCoordinate({
|
|
2622
|
+
type,
|
|
2623
|
+
force: true
|
|
2624
|
+
});
|
|
2625
|
+
}
|
|
2626
|
+
setItemCount(realCount, type) {
|
|
2627
|
+
this.viewports.stores[type].setViewport({ realCount });
|
|
2628
|
+
this.stores[type].setStore({ count: realCount });
|
|
2629
|
+
}
|
|
2630
|
+
/**
|
|
2631
|
+
* Apply trimmed items
|
|
2632
|
+
* @param trimmed - trimmed items
|
|
2633
|
+
* @param type
|
|
2634
|
+
*/
|
|
2635
|
+
setTrimmed(trimmed, type) {
|
|
2636
|
+
const allTrimmed = gatherTrimmedItems(trimmed);
|
|
2637
|
+
const dimStoreType = this.stores[type];
|
|
2638
|
+
dimStoreType.setStore({ trimmed: allTrimmed });
|
|
2639
|
+
this.setViewPortCoordinate({
|
|
2640
|
+
type,
|
|
2641
|
+
force: true
|
|
2642
|
+
});
|
|
2643
|
+
}
|
|
2644
|
+
/**
|
|
2645
|
+
* Sets dimension data and viewport coordinate
|
|
2646
|
+
* @param itemCount
|
|
2647
|
+
* @param type - dimension type
|
|
2648
|
+
* @param noVirtual - disable virtual data
|
|
2649
|
+
*/
|
|
2650
|
+
setData(itemCount, type, noVirtual = false) {
|
|
2651
|
+
this.setItemCount(itemCount, type);
|
|
2652
|
+
if (noVirtual) {
|
|
2653
|
+
const dimension = this.stores[type].getCurrentState();
|
|
2654
|
+
this.viewports.stores[type].setViewport({
|
|
2655
|
+
virtualSize: dimension.realSize
|
|
2656
|
+
});
|
|
2657
|
+
}
|
|
2658
|
+
this.setViewPortCoordinate({
|
|
2659
|
+
type
|
|
2660
|
+
});
|
|
2661
|
+
}
|
|
2662
|
+
/**
|
|
2663
|
+
* Applies new columns to the dimension provider
|
|
2664
|
+
* @param columns - new columns data
|
|
2665
|
+
* @param disableVirtualX - disable virtual data for X axis
|
|
2666
|
+
* @param virtualX - column dimensions that should use virtual data
|
|
2667
|
+
*/
|
|
2668
|
+
applyNewColumns(columns, disableVirtualX, keepOld = false, virtualX = DEFAULT_VIRTUAL_X) {
|
|
2669
|
+
for (let type of columnTypes) {
|
|
2670
|
+
if (!keepOld) {
|
|
2671
|
+
this.stores[type].drop();
|
|
2672
|
+
}
|
|
2673
|
+
const items = columns[type];
|
|
2674
|
+
const noVirtual = !isVirtualXDimension(type, disableVirtualX, virtualX);
|
|
2675
|
+
this.stores[type].setStore({ count: items.length });
|
|
2676
|
+
const newSizes = getColumnSizes(items);
|
|
2677
|
+
this.stores[type].setDimensionSize(newSizes);
|
|
2678
|
+
const vpUpdate = {
|
|
2679
|
+
// This triggers drop on realCount change
|
|
2680
|
+
realCount: items.length
|
|
2681
|
+
};
|
|
2682
|
+
if (noVirtual) {
|
|
2683
|
+
vpUpdate.virtualSize = this.stores[type].getCurrentState().realSize;
|
|
2684
|
+
}
|
|
2685
|
+
this.viewports.stores[type].setViewport(vpUpdate);
|
|
2686
|
+
this.setViewPortCoordinate({
|
|
2687
|
+
type
|
|
2688
|
+
});
|
|
2689
|
+
}
|
|
2690
|
+
}
|
|
2691
|
+
/**
|
|
2692
|
+
* Gets the full size of the grid by summing up the sizes of all dimensions
|
|
2693
|
+
* Goes through all dimensions columnTypes (x) and rowTypes (y) and sums up their sizes
|
|
2694
|
+
*/
|
|
2695
|
+
getFullSize() {
|
|
2696
|
+
var _a, _b;
|
|
2697
|
+
let x = 0;
|
|
2698
|
+
let y = 0;
|
|
2699
|
+
for (let type of columnTypes) {
|
|
2700
|
+
x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get("realSize")) || 0;
|
|
2701
|
+
}
|
|
2702
|
+
for (let type of rowTypes) {
|
|
2703
|
+
y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get("realSize")) || 0;
|
|
2704
|
+
}
|
|
2705
|
+
return { y, x };
|
|
2706
|
+
}
|
|
2707
|
+
setViewPortCoordinate({ type, coordinate = this.viewports.stores[type].lastCoordinate, force = false }) {
|
|
2708
|
+
const dimension = this.stores[type].getCurrentState();
|
|
2709
|
+
const viewport = this.viewports.stores[type].store;
|
|
2710
|
+
const clientSize = viewport.get("clientSize");
|
|
2711
|
+
const viewportSize = viewport.get("virtualSize");
|
|
2712
|
+
const scrollDimension = getScrollDimension({
|
|
2713
|
+
contentSize: dimension.realSize,
|
|
2714
|
+
clientSize,
|
|
2715
|
+
virtualSize: viewportSize
|
|
2716
|
+
});
|
|
2717
|
+
const renderCoordinate = Math.min(
|
|
2718
|
+
Math.max(0, coordinate),
|
|
2719
|
+
// prevents negative scroll positions
|
|
2720
|
+
scrollDimension.logicalScrollSize
|
|
2721
|
+
);
|
|
2722
|
+
const renderOffset = clientSize && viewportSize ? scrollDimension.getRenderOffset(renderCoordinate) : 0;
|
|
2723
|
+
this.stores[type].setStore({ renderOffset });
|
|
2724
|
+
this.viewports.stores[type].setViewport({ renderOffset });
|
|
2725
|
+
this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
|
|
2726
|
+
}
|
|
2727
|
+
getViewPortPos(e) {
|
|
2728
|
+
const dimension = this.stores[e.dimension].getCurrentState();
|
|
2729
|
+
const item = getItemByIndex(dimension, e.coordinate);
|
|
2730
|
+
return item.start;
|
|
2731
|
+
}
|
|
2732
|
+
setSettings(data, dimensionType) {
|
|
2733
|
+
let stores = [];
|
|
2734
|
+
switch (dimensionType) {
|
|
2735
|
+
case "rgCol":
|
|
2736
|
+
stores = columnTypes;
|
|
2737
|
+
break;
|
|
2738
|
+
case "rgRow":
|
|
2739
|
+
stores = rowTypes;
|
|
2740
|
+
break;
|
|
2741
|
+
}
|
|
2742
|
+
for (let s of stores) {
|
|
2743
|
+
this.stores[s].setStore(data);
|
|
2744
|
+
}
|
|
2745
|
+
}
|
|
2746
|
+
updateSizesPositionByNewDataIndexes(type, newItemsOrder, prevItemsOrder = []) {
|
|
2747
|
+
this.stores[type].updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder);
|
|
2748
|
+
this.setViewPortCoordinate({
|
|
2749
|
+
type,
|
|
2750
|
+
force: true
|
|
2751
|
+
});
|
|
2752
|
+
}
|
|
2753
|
+
};
|
|
2754
|
+
var ViewportProvider = class {
|
|
2755
|
+
constructor() {
|
|
2756
|
+
this.stores = reduce([...rowTypes, ...columnTypes], (sources, k) => {
|
|
2757
|
+
sources[k] = new ViewportStore(k);
|
|
2758
|
+
return sources;
|
|
2759
|
+
}, {});
|
|
2760
|
+
}
|
|
2761
|
+
setViewport(type, data) {
|
|
2762
|
+
this.stores[type].setViewport(data);
|
|
2763
|
+
}
|
|
2764
|
+
};
|
|
2765
|
+
var DEFAULT_THEME = "default";
|
|
2766
|
+
var allowedThemes = [
|
|
2767
|
+
DEFAULT_THEME,
|
|
2768
|
+
"material",
|
|
2769
|
+
"compact",
|
|
2770
|
+
"darkMaterial",
|
|
2771
|
+
"darkCompact"
|
|
2772
|
+
];
|
|
2773
|
+
var builtInThemeNames = new Set(allowedThemes);
|
|
2774
|
+
var builtInThemes = Object.freeze({
|
|
2775
|
+
default: Object.freeze({
|
|
2776
|
+
name: "default",
|
|
2777
|
+
colorScheme: "light",
|
|
2778
|
+
defaultRowSize: 27,
|
|
2779
|
+
tokens: Object.freeze({}),
|
|
2780
|
+
custom: false
|
|
2781
|
+
}),
|
|
2782
|
+
material: Object.freeze({
|
|
2783
|
+
name: "material",
|
|
2784
|
+
colorScheme: "light",
|
|
2785
|
+
defaultRowSize: 42,
|
|
2786
|
+
tokens: Object.freeze({}),
|
|
2787
|
+
custom: false
|
|
2788
|
+
}),
|
|
2789
|
+
compact: Object.freeze({
|
|
2790
|
+
name: "compact",
|
|
2791
|
+
colorScheme: "light",
|
|
2792
|
+
defaultRowSize: 32,
|
|
2793
|
+
tokens: Object.freeze({}),
|
|
2794
|
+
custom: false
|
|
2795
|
+
}),
|
|
2796
|
+
darkMaterial: Object.freeze({
|
|
2797
|
+
name: "darkMaterial",
|
|
2798
|
+
colorScheme: "dark",
|
|
2799
|
+
defaultRowSize: 42,
|
|
2800
|
+
tokens: Object.freeze({}),
|
|
2801
|
+
custom: false
|
|
2802
|
+
}),
|
|
2803
|
+
darkCompact: Object.freeze({
|
|
2804
|
+
name: "darkCompact",
|
|
2805
|
+
colorScheme: "dark",
|
|
2806
|
+
defaultRowSize: 32,
|
|
2807
|
+
tokens: Object.freeze({}),
|
|
2808
|
+
custom: false
|
|
2809
|
+
})
|
|
2810
|
+
});
|
|
2811
|
+
function isBuiltInTheme(theme) {
|
|
2812
|
+
return builtInThemeNames.has(theme);
|
|
2813
|
+
}
|
|
2814
|
+
function isPositiveSize(size) {
|
|
2815
|
+
return typeof size === "number" && Number.isFinite(size) && size > 0;
|
|
2816
|
+
}
|
|
2817
|
+
function getColorScheme(scheme, fallback) {
|
|
2818
|
+
return scheme === "light" || scheme === "dark" ? scheme : fallback;
|
|
2819
|
+
}
|
|
2820
|
+
function getCssOnlyThemeColorScheme(theme) {
|
|
2821
|
+
return theme.includes("dark") ? "dark" : "light";
|
|
2822
|
+
}
|
|
2823
|
+
function getThemeTokens(tokens) {
|
|
2824
|
+
if (!tokens || typeof tokens !== "object") {
|
|
2825
|
+
return {};
|
|
2826
|
+
}
|
|
2827
|
+
const result = {};
|
|
2828
|
+
for (const [name, value] of Object.entries(tokens)) {
|
|
2829
|
+
if (Object.hasOwn(themeTokenCssVariables, name) && typeof value === "string" && value.trim()) {
|
|
2830
|
+
result[name] = value;
|
|
2831
|
+
}
|
|
2832
|
+
}
|
|
2833
|
+
return result;
|
|
2834
|
+
}
|
|
2835
|
+
var ThemeService = class {
|
|
2836
|
+
get theme() {
|
|
2837
|
+
return this.currentTheme;
|
|
2838
|
+
}
|
|
2839
|
+
get rowSize() {
|
|
2840
|
+
return this.customRowSize || this.currentTheme.defaultRowSize;
|
|
2841
|
+
}
|
|
2842
|
+
set rowSize(size) {
|
|
2843
|
+
this.customRowSize = isPositiveSize(size) ? size : 0;
|
|
2844
|
+
}
|
|
2845
|
+
constructor(cfg) {
|
|
2846
|
+
this.currentTheme = Object.assign({}, builtInThemes.default);
|
|
2847
|
+
this.customThemes = /* @__PURE__ */ new Map();
|
|
2848
|
+
this.customRowSize = 0;
|
|
2849
|
+
this.rowSize = cfg.rowSize;
|
|
2850
|
+
this.register("default");
|
|
2851
|
+
}
|
|
2852
|
+
setDefinitions(definitions = []) {
|
|
2853
|
+
const customThemes = /* @__PURE__ */ new Map();
|
|
2854
|
+
if (Array.isArray(definitions)) {
|
|
2855
|
+
for (const definition of definitions) {
|
|
2856
|
+
if (!definition || typeof definition !== "object") {
|
|
2857
|
+
continue;
|
|
2858
|
+
}
|
|
2859
|
+
if (typeof definition.name !== "string" || !definition.name.trim()) {
|
|
2860
|
+
continue;
|
|
2861
|
+
}
|
|
2862
|
+
const name = getTheme(definition.name);
|
|
2863
|
+
if (isBuiltInTheme(name)) {
|
|
2864
|
+
continue;
|
|
2865
|
+
}
|
|
2866
|
+
customThemes.set(name, Object.assign(Object.assign({}, definition), { name }));
|
|
2867
|
+
}
|
|
2868
|
+
}
|
|
2869
|
+
this.customThemes = customThemes;
|
|
2870
|
+
}
|
|
2871
|
+
register(theme) {
|
|
2872
|
+
const name = getTheme(theme);
|
|
2873
|
+
if (isBuiltInTheme(name)) {
|
|
2874
|
+
this.currentTheme = Object.assign(Object.assign({}, builtInThemes[name]), { tokens: {} });
|
|
2875
|
+
return this.currentTheme;
|
|
2876
|
+
}
|
|
2877
|
+
const definition = this.customThemes.get(name);
|
|
2878
|
+
if (!definition) {
|
|
2879
|
+
this.currentTheme = Object.assign(Object.assign({}, builtInThemes.default), { name, colorScheme: getCssOnlyThemeColorScheme(name), tokens: {}, custom: true });
|
|
2880
|
+
return this.currentTheme;
|
|
2881
|
+
}
|
|
2882
|
+
this.currentTheme = this.resolveDefinition(name);
|
|
2883
|
+
return this.currentTheme;
|
|
2884
|
+
}
|
|
2885
|
+
resolveDefinition(name) {
|
|
2886
|
+
const chain = [];
|
|
2887
|
+
const visited = /* @__PURE__ */ new Set();
|
|
2888
|
+
let parentName = name;
|
|
2889
|
+
let validChain = true;
|
|
2890
|
+
while (!isBuiltInTheme(parentName)) {
|
|
2891
|
+
if (visited.has(parentName)) {
|
|
2892
|
+
validChain = false;
|
|
2893
|
+
break;
|
|
2894
|
+
}
|
|
2895
|
+
visited.add(parentName);
|
|
2896
|
+
const definition = this.customThemes.get(parentName);
|
|
2897
|
+
if (!definition) {
|
|
2898
|
+
validChain = false;
|
|
2899
|
+
break;
|
|
2900
|
+
}
|
|
2901
|
+
chain.push(definition);
|
|
2902
|
+
parentName = getTheme(definition.extends);
|
|
2903
|
+
}
|
|
2904
|
+
let resolved = Object.assign(Object.assign({}, validChain && isBuiltInTheme(parentName) ? builtInThemes[parentName] : builtInThemes.default), { tokens: {} });
|
|
2905
|
+
if (validChain) {
|
|
2906
|
+
chain.reverse();
|
|
2907
|
+
}
|
|
2908
|
+
const definitions = validChain ? chain : chain.slice(0, 1);
|
|
2909
|
+
for (const definition of definitions) {
|
|
2910
|
+
resolved = {
|
|
2911
|
+
name: definition.name,
|
|
2912
|
+
colorScheme: getColorScheme(definition.colorScheme, resolved.colorScheme),
|
|
2913
|
+
defaultRowSize: isPositiveSize(definition.defaultRowSize) ? definition.defaultRowSize : resolved.defaultRowSize,
|
|
2914
|
+
tokens: Object.assign(Object.assign({}, resolved.tokens), getThemeTokens(definition.tokens)),
|
|
2915
|
+
custom: true
|
|
2916
|
+
};
|
|
2917
|
+
}
|
|
2918
|
+
return resolved;
|
|
2919
|
+
}
|
|
2920
|
+
};
|
|
2921
|
+
function getTheme(theme) {
|
|
2922
|
+
const normalizedTheme = typeof theme === "string" ? theme.trim() : "";
|
|
2923
|
+
return normalizedTheme || DEFAULT_THEME;
|
|
2924
|
+
}
|
|
2925
|
+
function getViewportResizeDimension(colType, dimension) {
|
|
2926
|
+
return dimension === "rgCol" ? colType : dimension;
|
|
2927
|
+
}
|
|
2928
|
+
function gatherColumnData(data) {
|
|
2929
|
+
const colDimension = data.dimensions[data.colType].store;
|
|
2930
|
+
const realWidth = colDimension.get("realSize");
|
|
2931
|
+
const prop = {
|
|
2932
|
+
contentWidth: realWidth,
|
|
2933
|
+
class: data.colType,
|
|
2934
|
+
contentHeight: data.contentHeight,
|
|
2935
|
+
key: data.colType,
|
|
2936
|
+
colType: data.colType,
|
|
2937
|
+
noHorizontalScrollTransfer: data.noHorizontalScrollTransfer,
|
|
2938
|
+
onResizeviewport: data.onResizeviewport,
|
|
2939
|
+
// set viewport size to real size
|
|
2940
|
+
style: data.fixWidth ? { minWidth: `${realWidth}px` } : void 0
|
|
2941
|
+
};
|
|
2942
|
+
const headerProp = {
|
|
2943
|
+
colData: getVisibleSourceItem(data.colStore),
|
|
2944
|
+
dimensionCol: colDimension,
|
|
2945
|
+
type: data.colType,
|
|
2946
|
+
groups: data.colStore.get("groups"),
|
|
2947
|
+
groupingDepth: data.colStore.get("groupingDepth"),
|
|
2948
|
+
resizeHandler: data.colType === "colPinEnd" ? ["l"] : void 0,
|
|
2949
|
+
onHeaderresize: data.onHeaderresize
|
|
2950
|
+
};
|
|
2951
|
+
return {
|
|
2952
|
+
prop,
|
|
2953
|
+
type: data.colType,
|
|
2954
|
+
position: data.position,
|
|
2955
|
+
headerProp,
|
|
2956
|
+
viewportCol: data.viewports[data.colType].store
|
|
2957
|
+
};
|
|
2958
|
+
}
|
|
2959
|
+
var ViewportService = class {
|
|
2960
|
+
constructor(config, contentHeight) {
|
|
2961
|
+
var _a;
|
|
2962
|
+
this.config = config;
|
|
2963
|
+
const columns = [];
|
|
2964
|
+
let x = 0;
|
|
2965
|
+
columnTypes.forEach((val) => {
|
|
2966
|
+
const colStore = config.columnProvider.stores[val].store;
|
|
2967
|
+
if (!colStore.get("items").length) {
|
|
2968
|
+
return;
|
|
2969
|
+
}
|
|
2970
|
+
const column = {
|
|
2971
|
+
colType: val,
|
|
2972
|
+
position: { x, y: 1 },
|
|
2973
|
+
contentHeight,
|
|
2974
|
+
// only central column has dynamic width
|
|
2975
|
+
fixWidth: val !== "rgCol",
|
|
2976
|
+
viewports: config.viewportProvider.stores,
|
|
2977
|
+
dimensions: config.dimensionProvider.stores,
|
|
2978
|
+
rowStores: config.dataProvider.stores,
|
|
2979
|
+
noHorizontalScrollTransfer: config.noHorizontalScrollTransfer,
|
|
2980
|
+
colStore,
|
|
2981
|
+
onHeaderresize: (e) => this.onColumnResize(val, e, colStore)
|
|
2982
|
+
};
|
|
2983
|
+
column.onResizeviewport = (e) => {
|
|
2984
|
+
var _a2;
|
|
2985
|
+
const vpState = {
|
|
2986
|
+
clientSize: e.detail.size
|
|
2987
|
+
};
|
|
2988
|
+
const dimension = getViewportResizeDimension(val, e.detail.dimension);
|
|
2989
|
+
const isVirtualColumn = columnTypes.includes(dimension) && isVirtualXDimension(dimension, config.disableVirtualX, config.virtualX);
|
|
2990
|
+
if (dimension === "rgRow" && !config.disableVirtualY || isVirtualColumn) {
|
|
2991
|
+
vpState.virtualSize = e.detail.size;
|
|
2992
|
+
}
|
|
2993
|
+
(_a2 = config.viewportProvider) === null || _a2 === void 0 ? void 0 : _a2.setViewport(dimension, vpState);
|
|
2994
|
+
};
|
|
2995
|
+
const colData = gatherColumnData(column);
|
|
2996
|
+
const columnSelectionStore = this.registerCol(colData.position.x, val);
|
|
2997
|
+
const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
|
|
2998
|
+
const segmentSelection = this.registerSegment(rgRow.position, rgRow.lastCell);
|
|
2999
|
+
const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
|
|
3000
|
+
const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, onSetrange: (e) => {
|
|
3001
|
+
segmentSelection.setRangeArea(e.detail);
|
|
3002
|
+
}, onSettemprange: (e) => segmentSelection.setTempArea(e.detail), onFocuscell: (e) => {
|
|
3003
|
+
segmentSelection.clearFocus();
|
|
3004
|
+
config.selectionStoreConnector.focus(segmentSelection, e.detail);
|
|
3005
|
+
} });
|
|
3006
|
+
r.push(rowDef);
|
|
3007
|
+
return r;
|
|
3008
|
+
}, []);
|
|
3009
|
+
columns.push(Object.assign(Object.assign({}, colData), {
|
|
3010
|
+
columnSelectionStore,
|
|
3011
|
+
dataPorts
|
|
3012
|
+
}));
|
|
3013
|
+
x++;
|
|
3014
|
+
});
|
|
3015
|
+
this.columns = columns;
|
|
3016
|
+
(_a = this.config.scrollingService) === null || _a === void 0 ? void 0 : _a.unregister();
|
|
3017
|
+
}
|
|
3018
|
+
onColumnResize(type, { detail }, store) {
|
|
3019
|
+
var _a;
|
|
3020
|
+
(_a = this.config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
|
|
3021
|
+
const changedItems = {};
|
|
3022
|
+
for (const i of Object.keys(detail || {})) {
|
|
3023
|
+
const size = detail[i];
|
|
3024
|
+
const virtualIndex = parseInt(i, 10);
|
|
3025
|
+
const item = getSourceItem(store, virtualIndex);
|
|
3026
|
+
if (item) {
|
|
3027
|
+
changedItems[virtualIndex] = Object.assign(Object.assign({}, item), { size });
|
|
3028
|
+
}
|
|
3029
|
+
}
|
|
3030
|
+
this.config.resize(changedItems);
|
|
3031
|
+
}
|
|
3032
|
+
/** register selection store for Segment */
|
|
3033
|
+
registerSegment(position, lastCell) {
|
|
3034
|
+
const store = this.config.selectionStoreConnector.register(position);
|
|
3035
|
+
store.setLastCell(lastCell);
|
|
3036
|
+
return store;
|
|
3037
|
+
}
|
|
3038
|
+
/** register selection store for Row */
|
|
3039
|
+
registerRow(y, type) {
|
|
3040
|
+
return this.config.selectionStoreConnector.registerRow(y, type).store;
|
|
3041
|
+
}
|
|
3042
|
+
/** register selection store for Column */
|
|
3043
|
+
registerCol(x, type) {
|
|
3044
|
+
return this.config.selectionStoreConnector.registerColumn(x, type).store;
|
|
3045
|
+
}
|
|
3046
|
+
/** Collect Row data */
|
|
3047
|
+
dataViewPort(data) {
|
|
3048
|
+
const slots = {
|
|
3049
|
+
rowPinStart: HEADER_SLOT,
|
|
3050
|
+
rgRow: CONTENT_SLOT,
|
|
3051
|
+
rowPinEnd: FOOTER_SLOT
|
|
3052
|
+
};
|
|
3053
|
+
let y = 0;
|
|
3054
|
+
return rowTypes.reduce((result, type) => {
|
|
3055
|
+
const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y }) });
|
|
3056
|
+
const partition = viewportDataPartition(rgCol, type, slots[type], type !== "rgRow");
|
|
3057
|
+
result.push(partition);
|
|
3058
|
+
y++;
|
|
3059
|
+
return result;
|
|
3060
|
+
}, []);
|
|
3061
|
+
}
|
|
3062
|
+
scrollToCell(cell) {
|
|
3063
|
+
for (let key in cell) {
|
|
3064
|
+
const coordinate = cell[key];
|
|
3065
|
+
if (typeof coordinate === "number") {
|
|
3066
|
+
this.config.scrollingService.proxyScroll({
|
|
3067
|
+
dimension: key === "x" ? "rgCol" : "rgRow",
|
|
3068
|
+
coordinate
|
|
3069
|
+
});
|
|
3070
|
+
}
|
|
3071
|
+
}
|
|
3072
|
+
}
|
|
3073
|
+
/**
|
|
3074
|
+
* Clear current grid focus
|
|
3075
|
+
*/
|
|
3076
|
+
clearFocused() {
|
|
3077
|
+
this.config.selectionStoreConnector.clearAll();
|
|
3078
|
+
}
|
|
3079
|
+
clearEdit() {
|
|
3080
|
+
this.config.selectionStoreConnector.setEdit(false);
|
|
3081
|
+
}
|
|
3082
|
+
/**
|
|
3083
|
+
* Collect focused element data
|
|
3084
|
+
*/
|
|
3085
|
+
getFocused() {
|
|
3086
|
+
const focused = this.config.selectionStoreConnector.focusedStore;
|
|
3087
|
+
if (!focused) {
|
|
3088
|
+
return null;
|
|
3089
|
+
}
|
|
3090
|
+
const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
|
|
3091
|
+
const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
|
|
3092
|
+
const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
|
|
3093
|
+
const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
|
|
3094
|
+
return {
|
|
3095
|
+
column,
|
|
3096
|
+
model,
|
|
3097
|
+
cell: focused.cell,
|
|
3098
|
+
colType,
|
|
3099
|
+
rowType
|
|
3100
|
+
};
|
|
3101
|
+
}
|
|
3102
|
+
getStoreCoordinateByType(colType, rowType) {
|
|
3103
|
+
const stores = this.config.selectionStoreConnector.storesByType;
|
|
3104
|
+
if (typeof stores[colType] === "undefined" || typeof stores[rowType] === "undefined") {
|
|
3105
|
+
return;
|
|
3106
|
+
}
|
|
3107
|
+
return {
|
|
3108
|
+
x: stores[colType],
|
|
3109
|
+
y: stores[rowType]
|
|
3110
|
+
};
|
|
3111
|
+
}
|
|
3112
|
+
setFocus(colType, rowType, start, end) {
|
|
3113
|
+
var _a;
|
|
3114
|
+
const coordinate = this.getStoreCoordinateByType(colType, rowType);
|
|
3115
|
+
if (coordinate) {
|
|
3116
|
+
(_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
|
|
3117
|
+
}
|
|
3118
|
+
}
|
|
3119
|
+
getSelectedRange() {
|
|
3120
|
+
const focused = this.config.selectionStoreConnector.focusedStore;
|
|
3121
|
+
if (!focused) {
|
|
3122
|
+
return null;
|
|
3123
|
+
}
|
|
3124
|
+
const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
|
|
3125
|
+
const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
|
|
3126
|
+
const range = focused.entity.store.get("range");
|
|
3127
|
+
if (!range) {
|
|
3128
|
+
return null;
|
|
3129
|
+
}
|
|
3130
|
+
return Object.assign(Object.assign({}, range), {
|
|
3131
|
+
colType,
|
|
3132
|
+
rowType
|
|
3133
|
+
});
|
|
3134
|
+
}
|
|
3135
|
+
setEdit(rowIndex, colIndex, colType, rowType) {
|
|
3136
|
+
var _a;
|
|
3137
|
+
const coordinate = this.getStoreCoordinateByType(colType, rowType);
|
|
3138
|
+
if (coordinate) {
|
|
3139
|
+
(_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(coordinate, { x: colIndex, y: rowIndex });
|
|
3140
|
+
}
|
|
3141
|
+
}
|
|
3142
|
+
};
|
|
3143
|
+
var GridScrollingService = class {
|
|
3144
|
+
constructor(setViewport) {
|
|
3145
|
+
this.setViewport = setViewport;
|
|
3146
|
+
this.elements = {};
|
|
3147
|
+
}
|
|
3148
|
+
async proxyScroll(e, key, skipEvent) {
|
|
3149
|
+
var _a;
|
|
3150
|
+
let newEventPromise;
|
|
3151
|
+
let event = e;
|
|
3152
|
+
for (let elKey in skipEvent ? {} : this.elements) {
|
|
3153
|
+
if (e.dimension === "rgCol" && elKey === "headerRow") {
|
|
3154
|
+
continue;
|
|
3155
|
+
} else if (this.isPinnedColumn(key) && e.dimension === "rgCol") {
|
|
3156
|
+
if (elKey === key || !e.delta) {
|
|
3157
|
+
continue;
|
|
3158
|
+
}
|
|
3159
|
+
for (let el of this.elements[elKey]) {
|
|
3160
|
+
if (el.changeScroll) {
|
|
3161
|
+
newEventPromise = el.changeScroll(e);
|
|
3162
|
+
}
|
|
3163
|
+
}
|
|
3164
|
+
} else {
|
|
3165
|
+
for (let el of this.elements[elKey]) {
|
|
3166
|
+
await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
|
|
3167
|
+
}
|
|
3168
|
+
}
|
|
3169
|
+
}
|
|
3170
|
+
const newEvent = await newEventPromise;
|
|
3171
|
+
if (newEvent) {
|
|
3172
|
+
event = newEvent;
|
|
3173
|
+
}
|
|
3174
|
+
this.setViewport(skipEvent && this.isPinnedColumn(key) ? Object.assign(Object.assign({}, event), { dimension: key }) : event);
|
|
3175
|
+
}
|
|
3176
|
+
/**
|
|
3177
|
+
* Silent scroll update for mobile devices when we have negative scroll top
|
|
3178
|
+
*/
|
|
3179
|
+
async scrollSilentService(e, key) {
|
|
3180
|
+
var _a;
|
|
3181
|
+
for (let elKey in this.elements) {
|
|
3182
|
+
if (elKey === key) {
|
|
3183
|
+
continue;
|
|
3184
|
+
}
|
|
3185
|
+
if (columnTypes.includes(key) && (elKey === "headerRow" || columnTypes.includes(elKey))) {
|
|
3186
|
+
for (let el of this.elements[elKey]) {
|
|
3187
|
+
await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
|
|
3188
|
+
}
|
|
3189
|
+
continue;
|
|
3190
|
+
}
|
|
3191
|
+
}
|
|
3192
|
+
}
|
|
3193
|
+
isPinnedColumn(key) {
|
|
3194
|
+
return !!key && ["colPinStart", "colPinEnd"].indexOf(key) > -1;
|
|
3195
|
+
}
|
|
3196
|
+
registerElements(els) {
|
|
3197
|
+
this.elements = els;
|
|
3198
|
+
}
|
|
3199
|
+
/**
|
|
3200
|
+
* Register new element for farther scroll support
|
|
3201
|
+
* @param el - can be null if holder removed
|
|
3202
|
+
* @param key - element key
|
|
3203
|
+
*/
|
|
3204
|
+
registerElement(el, key) {
|
|
3205
|
+
if (!this.elements[key]) {
|
|
3206
|
+
this.elements[key] = [];
|
|
3207
|
+
}
|
|
3208
|
+
if (el) {
|
|
3209
|
+
this.elements[key].push(el);
|
|
3210
|
+
} else if (this.elements[key]) {
|
|
3211
|
+
delete this.elements[key];
|
|
3212
|
+
}
|
|
3213
|
+
}
|
|
3214
|
+
unregister() {
|
|
3215
|
+
this.elements = {};
|
|
3216
|
+
}
|
|
3217
|
+
};
|
|
3218
|
+
var SelectionStoreConnector = class {
|
|
3219
|
+
constructor() {
|
|
3220
|
+
this.stores = {};
|
|
3221
|
+
this.columnStores = {};
|
|
3222
|
+
this.rowStores = {};
|
|
3223
|
+
this.storesByType = {};
|
|
3224
|
+
this.storesXToType = {};
|
|
3225
|
+
this.storesYToType = {};
|
|
3226
|
+
}
|
|
3227
|
+
get focusedStore() {
|
|
3228
|
+
var _a;
|
|
3229
|
+
for (let y in this.stores) {
|
|
3230
|
+
for (let x in this.stores[y]) {
|
|
3231
|
+
const focused = (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.store.get("focus");
|
|
3232
|
+
if (focused) {
|
|
3233
|
+
return {
|
|
3234
|
+
entity: this.stores[y][x],
|
|
3235
|
+
cell: focused,
|
|
3236
|
+
position: {
|
|
3237
|
+
x: parseInt(x, 10),
|
|
3238
|
+
y: parseInt(y, 10)
|
|
3239
|
+
}
|
|
3240
|
+
};
|
|
3241
|
+
}
|
|
3242
|
+
}
|
|
3243
|
+
}
|
|
3244
|
+
return null;
|
|
3245
|
+
}
|
|
3246
|
+
get edit() {
|
|
3247
|
+
var _a;
|
|
3248
|
+
return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get("edit");
|
|
3249
|
+
}
|
|
3250
|
+
get focused() {
|
|
3251
|
+
var _a;
|
|
3252
|
+
return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get("focus");
|
|
3253
|
+
}
|
|
3254
|
+
get selectedRange() {
|
|
3255
|
+
var _a;
|
|
3256
|
+
return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get("range");
|
|
3257
|
+
}
|
|
3258
|
+
registerColumn(x, type) {
|
|
3259
|
+
this.updateColumnTypeMapping(x, type);
|
|
3260
|
+
if (this.columnStores[x]) {
|
|
3261
|
+
return this.columnStores[x];
|
|
3262
|
+
}
|
|
3263
|
+
this.columnStores[x] = new SelectionStore();
|
|
3264
|
+
return this.columnStores[x];
|
|
3265
|
+
}
|
|
3266
|
+
registerRow(y, type) {
|
|
3267
|
+
if (this.rowStores[y]) {
|
|
3268
|
+
return this.rowStores[y];
|
|
3269
|
+
}
|
|
3270
|
+
this.rowStores[y] = new SelectionStore();
|
|
3271
|
+
this.storesByType[type] = y;
|
|
3272
|
+
this.storesYToType[y] = type;
|
|
3273
|
+
return this.rowStores[y];
|
|
3274
|
+
}
|
|
3275
|
+
/**
|
|
3276
|
+
* Cross store proxy, based on multiple dimensions
|
|
3277
|
+
*/
|
|
3278
|
+
register({ x, y }) {
|
|
3279
|
+
if (!this.stores[y]) {
|
|
3280
|
+
this.stores[y] = {};
|
|
3281
|
+
}
|
|
3282
|
+
let store = this.stores[y][x];
|
|
3283
|
+
if (store) {
|
|
3284
|
+
return store;
|
|
3285
|
+
}
|
|
3286
|
+
this.stores[y][x] = store = new SelectionStore();
|
|
3287
|
+
store.onChange("range", (c) => {
|
|
3288
|
+
this.columnStores[x].setRangeArea(c);
|
|
3289
|
+
this.rowStores[y].setRangeArea(c);
|
|
3290
|
+
});
|
|
3291
|
+
store.store.on("dispose", () => this.destroy(x, y));
|
|
3292
|
+
return store;
|
|
3293
|
+
}
|
|
3294
|
+
destroy(x, y) {
|
|
3295
|
+
var _a, _b;
|
|
3296
|
+
(_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
3297
|
+
(_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
|
|
3298
|
+
delete this.rowStores[y];
|
|
3299
|
+
delete this.columnStores[x];
|
|
3300
|
+
if (this.storesXToType[x]) {
|
|
3301
|
+
const type = this.storesXToType[x];
|
|
3302
|
+
delete this.storesXToType[x];
|
|
3303
|
+
delete this.storesByType[type];
|
|
3304
|
+
}
|
|
3305
|
+
if (this.storesYToType[y]) {
|
|
3306
|
+
const type = this.storesYToType[y];
|
|
3307
|
+
delete this.storesYToType[y];
|
|
3308
|
+
delete this.storesByType[type];
|
|
3309
|
+
}
|
|
3310
|
+
if (this.stores[y]) {
|
|
3311
|
+
delete this.stores[y][x];
|
|
3312
|
+
}
|
|
3313
|
+
if (!Object.keys(this.stores[y] || {}).length) {
|
|
3314
|
+
delete this.stores[y];
|
|
3315
|
+
}
|
|
3316
|
+
}
|
|
3317
|
+
setEditByCell(storePos, editCell) {
|
|
3318
|
+
this.focusByCell(storePos, editCell, editCell);
|
|
3319
|
+
this.setEdit("");
|
|
3320
|
+
}
|
|
3321
|
+
/**
|
|
3322
|
+
* Sets the next focus cell before the current one.
|
|
3323
|
+
*
|
|
3324
|
+
* @param focus - The cell to set as the next focus.
|
|
3325
|
+
*/
|
|
3326
|
+
beforeNextFocusCell(focus) {
|
|
3327
|
+
var _a;
|
|
3328
|
+
if (!this.focusedStore) {
|
|
3329
|
+
return;
|
|
3330
|
+
}
|
|
3331
|
+
const lastCell = this.focusedStore.entity.store.get("lastCell");
|
|
3332
|
+
const next = lastCell && this.getNextStore(focus, this.focusedStore.position, lastCell);
|
|
3333
|
+
(_a = next === null || next === void 0 ? void 0 : next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
|
|
3334
|
+
}
|
|
3335
|
+
focusByCell(storePos, start, end) {
|
|
3336
|
+
const store = this.stores[storePos.y][storePos.x];
|
|
3337
|
+
this.focus(store, { focus: start, end });
|
|
3338
|
+
}
|
|
3339
|
+
focus(store, { focus, end }) {
|
|
3340
|
+
const currentStorePointer = this.getCurrentStorePointer(store);
|
|
3341
|
+
if (!currentStorePointer) {
|
|
3342
|
+
return null;
|
|
3343
|
+
}
|
|
3344
|
+
const lastCell = store.store.get("lastCell");
|
|
3345
|
+
const next = lastCell && this.getNextStore(focus, currentStorePointer, lastCell);
|
|
3346
|
+
if (next === null || next === void 0 ? void 0 : next.store) {
|
|
3347
|
+
const item = Object.assign(Object.assign({}, focus), next.item);
|
|
3348
|
+
this.focus(next.store, { focus: item, end: item });
|
|
3349
|
+
return null;
|
|
3350
|
+
}
|
|
3351
|
+
if (lastCell) {
|
|
3352
|
+
focus = cropCellToMax(focus, lastCell);
|
|
3353
|
+
end = cropCellToMax(end, lastCell);
|
|
3354
|
+
}
|
|
3355
|
+
store.setFocus(focus, end);
|
|
3356
|
+
return focus;
|
|
3357
|
+
}
|
|
3358
|
+
/**
|
|
3359
|
+
* Retrieves the current store pointer based on the active store.
|
|
3360
|
+
* Clears focus from all stores except the active one.
|
|
3361
|
+
*/
|
|
3362
|
+
getCurrentStorePointer(store) {
|
|
3363
|
+
let currentStorePointer;
|
|
3364
|
+
for (let y in this.stores) {
|
|
3365
|
+
for (let x in this.stores[y]) {
|
|
3366
|
+
const s = this.stores[y][x];
|
|
3367
|
+
if (s !== store) {
|
|
3368
|
+
s.clearFocus();
|
|
3369
|
+
} else {
|
|
3370
|
+
currentStorePointer = {
|
|
3371
|
+
x: parseInt(x, 10),
|
|
3372
|
+
y: parseInt(y, 10)
|
|
3373
|
+
};
|
|
3374
|
+
}
|
|
3375
|
+
}
|
|
3376
|
+
}
|
|
3377
|
+
return currentStorePointer;
|
|
3378
|
+
}
|
|
3379
|
+
/**
|
|
3380
|
+
* Retrieves the next store based on the focus cell and current store pointer.
|
|
3381
|
+
* If the next store exists, returns an object with the next store and the item in the new store.
|
|
3382
|
+
* If the next store does not exist, returns null.
|
|
3383
|
+
*/
|
|
3384
|
+
getNextStore(focus, currentStorePointer, lastCell) {
|
|
3385
|
+
const nextItem = nextCell(focus, lastCell);
|
|
3386
|
+
let nextStore;
|
|
3387
|
+
if (nextItem) {
|
|
3388
|
+
Object.keys(nextItem).forEach((t) => {
|
|
3389
|
+
var _a;
|
|
3390
|
+
const type = t;
|
|
3391
|
+
const nextItemCoord = (_a = nextItem[type]) !== null && _a !== void 0 ? _a : 0;
|
|
3392
|
+
let stores;
|
|
3393
|
+
switch (type) {
|
|
3394
|
+
case "x":
|
|
3395
|
+
stores = this.getXStores(currentStorePointer.y);
|
|
3396
|
+
break;
|
|
3397
|
+
case "y":
|
|
3398
|
+
stores = this.getYStores(currentStorePointer.x);
|
|
3399
|
+
break;
|
|
3400
|
+
}
|
|
3401
|
+
if (nextItemCoord >= 0) {
|
|
3402
|
+
nextStore = stores[++currentStorePointer[type]];
|
|
3403
|
+
} else {
|
|
3404
|
+
nextStore = stores[--currentStorePointer[type]];
|
|
3405
|
+
const nextLastCell = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get("lastCell");
|
|
3406
|
+
if (nextLastCell) {
|
|
3407
|
+
nextItem[type] = nextLastCell[type] + nextItemCoord;
|
|
3408
|
+
}
|
|
3409
|
+
}
|
|
3410
|
+
});
|
|
3411
|
+
}
|
|
3412
|
+
const lastCellNext = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get("lastCell");
|
|
3413
|
+
if (!(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.x) || !(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.y)) {
|
|
3414
|
+
nextStore = void 0;
|
|
3415
|
+
}
|
|
3416
|
+
return {
|
|
3417
|
+
store: nextStore,
|
|
3418
|
+
item: nextItem
|
|
3419
|
+
};
|
|
3420
|
+
}
|
|
3421
|
+
clearAll() {
|
|
3422
|
+
var _a;
|
|
3423
|
+
for (let y in this.stores) {
|
|
3424
|
+
for (let x in this.stores[y]) {
|
|
3425
|
+
(_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.clearFocus();
|
|
3426
|
+
}
|
|
3427
|
+
}
|
|
3428
|
+
}
|
|
3429
|
+
setEdit(val) {
|
|
3430
|
+
if (!this.focusedStore) {
|
|
3431
|
+
return;
|
|
3432
|
+
}
|
|
3433
|
+
this.focusedStore.entity.setEdit(val);
|
|
3434
|
+
}
|
|
3435
|
+
/**
|
|
3436
|
+
* Select all cells across all stores
|
|
3437
|
+
*/
|
|
3438
|
+
selectAll() {
|
|
3439
|
+
for (let y in this.stores) {
|
|
3440
|
+
for (let x in this.stores[y]) {
|
|
3441
|
+
const store = this.stores[y][x];
|
|
3442
|
+
if (!store) {
|
|
3443
|
+
continue;
|
|
3444
|
+
}
|
|
3445
|
+
const lastCell = store.store.get("lastCell");
|
|
3446
|
+
if (lastCell) {
|
|
3447
|
+
store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
|
|
3448
|
+
}
|
|
3449
|
+
}
|
|
3450
|
+
}
|
|
3451
|
+
}
|
|
3452
|
+
getXStores(y) {
|
|
3453
|
+
return this.stores[y];
|
|
3454
|
+
}
|
|
3455
|
+
getYStores(x) {
|
|
3456
|
+
const stores = {};
|
|
3457
|
+
for (let i in this.stores) {
|
|
3458
|
+
stores[i] = this.stores[i][x];
|
|
3459
|
+
}
|
|
3460
|
+
return stores;
|
|
3461
|
+
}
|
|
3462
|
+
/**
|
|
3463
|
+
* Keep column viewport positions and types in sync across pin/unpin rerenders.
|
|
3464
|
+
* Regression case: when a selected rgCol cell was pinned left, colPinStart
|
|
3465
|
+
* could take over x=0 and render the stale rgCol focus store in the pinned area.
|
|
3466
|
+
*/
|
|
3467
|
+
updateColumnTypeMapping(x, type) {
|
|
3468
|
+
const previousType = this.storesXToType[x];
|
|
3469
|
+
const previousX = this.storesByType[type];
|
|
3470
|
+
let shouldClearFocus = false;
|
|
3471
|
+
this.storesByType[type] = x;
|
|
3472
|
+
this.storesXToType[x] = type;
|
|
3473
|
+
if (previousType && previousType !== type) {
|
|
3474
|
+
shouldClearFocus = true;
|
|
3475
|
+
if (this.storesByType[previousType] === x) {
|
|
3476
|
+
delete this.storesByType[previousType];
|
|
3477
|
+
}
|
|
3478
|
+
}
|
|
3479
|
+
if (typeof previousX === "number" && previousX !== x && this.storesXToType[previousX] === type) {
|
|
3480
|
+
delete this.storesXToType[previousX];
|
|
3481
|
+
shouldClearFocus = true;
|
|
3482
|
+
}
|
|
3483
|
+
if (shouldClearFocus) {
|
|
3484
|
+
this.clearAll();
|
|
3485
|
+
}
|
|
3486
|
+
}
|
|
3487
|
+
};
|
|
3488
|
+
var OrdererService = class {
|
|
3489
|
+
constructor() {
|
|
3490
|
+
this.parentY = 0;
|
|
3491
|
+
}
|
|
3492
|
+
start(parent, { pos, text, event }) {
|
|
3493
|
+
var _a;
|
|
3494
|
+
const { top } = parent.getBoundingClientRect();
|
|
3495
|
+
this.parentY = top;
|
|
3496
|
+
if (this.text) {
|
|
3497
|
+
this.text.innerText = text;
|
|
3498
|
+
}
|
|
3499
|
+
this.move(pos);
|
|
3500
|
+
this.moveTip({ x: event.x, y: event.y });
|
|
3501
|
+
(_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
|
|
3502
|
+
}
|
|
3503
|
+
end() {
|
|
3504
|
+
var _a;
|
|
3505
|
+
(_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
|
|
3506
|
+
}
|
|
3507
|
+
move(pos) {
|
|
3508
|
+
this.moveElement(pos.end - this.parentY);
|
|
3509
|
+
}
|
|
3510
|
+
moveTip({ x, y }) {
|
|
3511
|
+
if (!this.draggable) {
|
|
3512
|
+
return;
|
|
3513
|
+
}
|
|
3514
|
+
this.draggable.style.left = `${x}px`;
|
|
3515
|
+
this.draggable.style.top = `${y}px`;
|
|
3516
|
+
}
|
|
3517
|
+
moveElement(y) {
|
|
3518
|
+
if (!this.rgRow) {
|
|
3519
|
+
return;
|
|
3520
|
+
}
|
|
3521
|
+
this.rgRow.style.transform = `translateY(${y}px)`;
|
|
3522
|
+
}
|
|
3523
|
+
};
|
|
3524
|
+
var OrderRenderer = ({ ref }) => {
|
|
3525
|
+
const service = new OrdererService();
|
|
3526
|
+
ref(service);
|
|
3527
|
+
return h("div", { class: "draggable-wrapper hidden", ref: (e) => service.el = e }, h("div", { class: "draggable", ref: (el) => service.draggable = el }, h("span", { class: "revo-alt-icon" }), h("span", { ref: (e) => service.text = e })), h("div", { class: "drag-position", ref: (e) => service.rgRow = e }));
|
|
3528
|
+
};
|
|
3529
|
+
var rowDefinitionByType = (newVal = []) => {
|
|
3530
|
+
const result = {};
|
|
3531
|
+
for (const v of newVal) {
|
|
3532
|
+
let rowDefs = result[v.type];
|
|
3533
|
+
if (!rowDefs) {
|
|
3534
|
+
rowDefs = result[v.type] = {};
|
|
3535
|
+
}
|
|
3536
|
+
if (typeof v.size === "number") {
|
|
3537
|
+
if (!rowDefs.sizes) {
|
|
3538
|
+
rowDefs.sizes = {};
|
|
3539
|
+
}
|
|
3540
|
+
rowDefs.sizes[v.index] = v.size;
|
|
3541
|
+
}
|
|
3542
|
+
}
|
|
3543
|
+
return result;
|
|
3544
|
+
};
|
|
3545
|
+
var rowDefinitionRemoveByType = (oldVal = []) => {
|
|
3546
|
+
const result = {};
|
|
3547
|
+
for (const v of oldVal) {
|
|
3548
|
+
let rowDefs = result[v.type];
|
|
3549
|
+
if (!rowDefs) {
|
|
3550
|
+
rowDefs = result[v.type] = [];
|
|
3551
|
+
}
|
|
3552
|
+
if (typeof v.size === "number") {
|
|
3553
|
+
rowDefs.push(v.index);
|
|
3554
|
+
}
|
|
3555
|
+
}
|
|
3556
|
+
return result;
|
|
3557
|
+
};
|
|
3558
|
+
function isMobileDevice() {
|
|
3559
|
+
return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
|
|
3560
|
+
}
|
|
3561
|
+
var WCAGPlugin = class extends BasePlugin {
|
|
3562
|
+
constructor(revogrid, providers) {
|
|
3563
|
+
super(revogrid, providers);
|
|
3564
|
+
revogrid.setAttribute("role", "treegrid");
|
|
3565
|
+
revogrid.setAttribute("aria-keyshortcuts", "Enter");
|
|
3566
|
+
revogrid.setAttribute("aria-multiselectable", "true");
|
|
3567
|
+
revogrid.setAttribute("tabindex", "0");
|
|
3568
|
+
this.addEventListener("beforecolumnsset", ({ detail }) => {
|
|
3569
|
+
const columns = [
|
|
3570
|
+
...detail.columns.colPinStart,
|
|
3571
|
+
...detail.columns.rgCol,
|
|
3572
|
+
...detail.columns.colPinEnd
|
|
3573
|
+
];
|
|
3574
|
+
revogrid.setAttribute("aria-colcount", `${columns.length}`);
|
|
3575
|
+
columns.forEach((column, index) => {
|
|
3576
|
+
const { columnProperties, cellProperties } = column;
|
|
3577
|
+
column.columnProperties = (...args) => {
|
|
3578
|
+
const result = (columnProperties === null || columnProperties === void 0 ? void 0 : columnProperties(...args)) || {};
|
|
3579
|
+
result.role = "columnheader";
|
|
3580
|
+
result["aria-colindex"] = `${index}`;
|
|
3581
|
+
return result;
|
|
3582
|
+
};
|
|
3583
|
+
column.cellProperties = (...args) => {
|
|
3584
|
+
const wcagProps = {
|
|
3585
|
+
["role"]: "gridcell",
|
|
3586
|
+
["aria-colindex"]: `${index}`,
|
|
3587
|
+
["aria-rowindex"]: `${args[0].rowIndex}`,
|
|
3588
|
+
["tabindex"]: -1
|
|
3589
|
+
};
|
|
3590
|
+
const columnProps = (cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties(...args)) || {};
|
|
3591
|
+
return Object.assign(Object.assign({}, wcagProps), columnProps);
|
|
3592
|
+
};
|
|
3593
|
+
});
|
|
3594
|
+
});
|
|
3595
|
+
this.addEventListener("beforesourceset", ({ detail }) => {
|
|
3596
|
+
revogrid.setAttribute("aria-rowcount", `${detail.source.length}`);
|
|
3597
|
+
});
|
|
3598
|
+
this.addEventListener("beforerowrender", ({ detail }) => {
|
|
3599
|
+
detail.node.$attrs$ = Object.assign(Object.assign({}, detail.node.$attrs$), { role: "row", ["aria-rowindex"]: detail.item.itemIndex });
|
|
3600
|
+
});
|
|
3601
|
+
this.addEventListener("afterfocus", async (e) => {
|
|
3602
|
+
if (e.defaultPrevented) {
|
|
3603
|
+
return;
|
|
3604
|
+
}
|
|
3605
|
+
const el = this.revogrid.querySelector(`revogr-data[type="${e.detail.rowType}"][col-type="${e.detail.colType}"] [data-rgrow="${e.detail.rowIndex}"][data-rgcol="${e.detail.colIndex}"]`);
|
|
3606
|
+
if (el instanceof HTMLElement) {
|
|
3607
|
+
el.focus();
|
|
3608
|
+
}
|
|
3609
|
+
});
|
|
3610
|
+
}
|
|
3611
|
+
};
|
|
3612
|
+
var PluginService = class {
|
|
3613
|
+
constructor() {
|
|
3614
|
+
this.internalPlugins = [];
|
|
3615
|
+
}
|
|
3616
|
+
/**
|
|
3617
|
+
* Get all plugins
|
|
3618
|
+
*/
|
|
3619
|
+
get() {
|
|
3620
|
+
return [...this.internalPlugins];
|
|
3621
|
+
}
|
|
3622
|
+
/**
|
|
3623
|
+
* Add plugin to collection
|
|
3624
|
+
*/
|
|
3625
|
+
add(plugin) {
|
|
3626
|
+
this.internalPlugins.push(plugin);
|
|
3627
|
+
}
|
|
3628
|
+
/**
|
|
3629
|
+
* Add user plugins and create
|
|
3630
|
+
*/
|
|
3631
|
+
addUserPluginsAndCreate(element, plugins = [], prevPlugins, pluginData) {
|
|
3632
|
+
if (!pluginData) {
|
|
3633
|
+
return;
|
|
3634
|
+
}
|
|
3635
|
+
const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter((prevPlugin) => !plugins.some((userPlugin) => userPlugin === prevPlugin))) || [];
|
|
3636
|
+
pluginsToRemove.forEach((plugin) => {
|
|
3637
|
+
var _a, _b;
|
|
3638
|
+
const index = this.internalPlugins.findIndex((createdPlugin) => createdPlugin instanceof plugin);
|
|
3639
|
+
if (index !== -1) {
|
|
3640
|
+
(_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
3641
|
+
this.internalPlugins.splice(index, 1);
|
|
3642
|
+
}
|
|
3643
|
+
});
|
|
3644
|
+
plugins === null || plugins === void 0 ? void 0 : plugins.forEach((userPlugin) => {
|
|
3645
|
+
const existingPlugin = this.internalPlugins.find((createdPlugin) => createdPlugin instanceof userPlugin);
|
|
3646
|
+
if (existingPlugin) {
|
|
3647
|
+
return;
|
|
3648
|
+
}
|
|
3649
|
+
this.add(new userPlugin(element, pluginData));
|
|
3650
|
+
});
|
|
3651
|
+
}
|
|
3652
|
+
/**
|
|
3653
|
+
* Get plugin by class
|
|
3654
|
+
*/
|
|
3655
|
+
getByClass(pluginClass) {
|
|
3656
|
+
return this.internalPlugins.find((p) => p instanceof pluginClass);
|
|
3657
|
+
}
|
|
3658
|
+
/**
|
|
3659
|
+
* Remove plugin
|
|
3660
|
+
*/
|
|
3661
|
+
remove(plugin) {
|
|
3662
|
+
var _a, _b;
|
|
3663
|
+
const index = this.internalPlugins.indexOf(plugin);
|
|
3664
|
+
if (index > -1) {
|
|
3665
|
+
(_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
3666
|
+
this.internalPlugins.splice(index, 1);
|
|
3667
|
+
}
|
|
3668
|
+
}
|
|
3669
|
+
/**
|
|
3670
|
+
* Remove all plugins
|
|
3671
|
+
*/
|
|
3672
|
+
destroy() {
|
|
3673
|
+
this.internalPlugins.forEach((p) => {
|
|
3674
|
+
var _a;
|
|
3675
|
+
return (_a = p.destroy) === null || _a === void 0 ? void 0 : _a.call(p);
|
|
3676
|
+
});
|
|
3677
|
+
this.internalPlugins = [];
|
|
3678
|
+
}
|
|
3679
|
+
};
|
|
3680
|
+
var RTLPlugin = class extends BasePlugin {
|
|
3681
|
+
constructor(revogrid, providers) {
|
|
3682
|
+
super(revogrid, providers);
|
|
3683
|
+
this.isRTLEnabled = false;
|
|
3684
|
+
this.init();
|
|
3685
|
+
}
|
|
3686
|
+
init() {
|
|
3687
|
+
this.addEventListener("beforecolumnsset", (event) => {
|
|
3688
|
+
this.handleBeforeColumnsSet(event);
|
|
3689
|
+
});
|
|
3690
|
+
this.addEventListener("aftergridinit", () => {
|
|
3691
|
+
this.updateRTLState();
|
|
3692
|
+
});
|
|
3693
|
+
this.watch("rtl", (value) => {
|
|
3694
|
+
this.isRTLEnabled = value;
|
|
3695
|
+
this.emit("rtlstatechanged", { rtl: this.isRTLEnabled });
|
|
3696
|
+
}, { immediate: true });
|
|
3697
|
+
}
|
|
3698
|
+
/**
|
|
3699
|
+
* Handle the beforecolumnsset event to apply RTL transformation
|
|
3700
|
+
*/
|
|
3701
|
+
handleBeforeColumnsSet(event) {
|
|
3702
|
+
if (!this.isRTLEnabled) {
|
|
3703
|
+
return;
|
|
3704
|
+
}
|
|
3705
|
+
const columnCollection = event.detail;
|
|
3706
|
+
const transformedColumns = this.applyRTLTransformationToCollection(columnCollection);
|
|
3707
|
+
event.detail.columns = transformedColumns.columns;
|
|
3708
|
+
event.detail.columnByProp = transformedColumns.columnByProp;
|
|
3709
|
+
event.detail.columnGrouping = transformedColumns.columnGrouping;
|
|
3710
|
+
}
|
|
3711
|
+
/**
|
|
3712
|
+
* Apply RTL transformation to the entire column collection
|
|
3713
|
+
*/
|
|
3714
|
+
applyRTLTransformationToCollection(collection) {
|
|
3715
|
+
const transformedCollection = {
|
|
3716
|
+
columns: {
|
|
3717
|
+
rgCol: [],
|
|
3718
|
+
colPinStart: [],
|
|
3719
|
+
colPinEnd: []
|
|
3720
|
+
},
|
|
3721
|
+
columnByProp: Object.assign({}, collection.columnByProp),
|
|
3722
|
+
columnGrouping: {
|
|
3723
|
+
rgCol: [],
|
|
3724
|
+
colPinStart: [],
|
|
3725
|
+
colPinEnd: []
|
|
3726
|
+
},
|
|
3727
|
+
maxLevel: collection.maxLevel,
|
|
3728
|
+
sort: Object.assign({}, collection.sort)
|
|
3729
|
+
};
|
|
3730
|
+
Object.keys(collection.columns).forEach((type) => {
|
|
3731
|
+
const columnType = type;
|
|
3732
|
+
const columns = collection.columns[columnType];
|
|
3733
|
+
const reversedColumns = [...columns].reverse();
|
|
3734
|
+
transformedCollection.columns[columnType] = reversedColumns;
|
|
3735
|
+
transformedCollection.columnGrouping[columnType] = this.applyRTLTransformationToGroups(collection.columnGrouping[columnType], columns.length);
|
|
3736
|
+
});
|
|
3737
|
+
return transformedCollection;
|
|
3738
|
+
}
|
|
3739
|
+
/**
|
|
3740
|
+
* Apply RTL transformation to column groups
|
|
3741
|
+
*/
|
|
3742
|
+
applyRTLTransformationToGroups(groups, totalColumns) {
|
|
3743
|
+
return groups.map((group) => {
|
|
3744
|
+
const reversedIndexes = group.indexes.map((index) => totalColumns - 1 - index).reverse();
|
|
3745
|
+
return Object.assign(Object.assign({}, group), { indexes: reversedIndexes });
|
|
3746
|
+
}).reverse();
|
|
3747
|
+
}
|
|
3748
|
+
/**
|
|
3749
|
+
* Update RTL state based on the grid's rtl property
|
|
3750
|
+
*/
|
|
3751
|
+
updateRTLState() {
|
|
3752
|
+
const grid = this.revogrid;
|
|
3753
|
+
if (grid && typeof grid.rtl === "boolean") {
|
|
3754
|
+
this.isRTLEnabled = grid.rtl;
|
|
3755
|
+
}
|
|
3756
|
+
}
|
|
3757
|
+
/**
|
|
3758
|
+
* Get current RTL state
|
|
3759
|
+
*/
|
|
3760
|
+
getRTLState() {
|
|
3761
|
+
return this.isRTLEnabled;
|
|
3762
|
+
}
|
|
3763
|
+
/**
|
|
3764
|
+
* Clean up the plugin
|
|
3765
|
+
*/
|
|
3766
|
+
destroy() {
|
|
3767
|
+
super.destroy();
|
|
3768
|
+
}
|
|
3769
|
+
};
|
|
3770
|
+
var revoGridStyleCss = () => `revo-grid:is([theme=default],[theme=dark]),revo-grid:not([theme]){--rg-theme-font-family:var( --revo-grid-font-family, Helvetica, Arial, Sans-Serif, serif );--rg-theme-font-size:var(--revo-grid-font-size, 12px);--rg-theme-header-height:var(--revo-grid-header-height, 30px);--rg-theme-header-font-size:var(--revo-grid-header-font-size, 12px);--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, normal);--rg-theme-header-text-transform:var( --revo-grid-header-text-transform, uppercase );--rg-theme-header-text-align:var(--revo-grid-header-text-align, center);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, center);--rg-theme-header-padding:var(--revo-grid-header-padding, 0);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0);border:1px solid var(--rg-theme-header-border);font-size:var(--rg-theme-font-size)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header,revo-grid:not([theme]) revogr-header{text-align:var(--rg-theme-header-text-align);line-height:var(--rg-theme-header-height);background-color:var(--rg-theme-header-bg)}revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow .rgHeaderCell,revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell{box-shadow:-1px 0 0 0 var(--rg-theme-header-border), -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header .header-rgRow,revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:var(--rg-theme-header-text-transform);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);color:var(--rg-theme-header-color)}revo-grid:is([theme=default],[theme=dark]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:var(--rg-theme-header-height);box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid var(--rg-theme-header-border)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinEnd,revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset, 0 -1px 0 0 var(--rg-theme-cell-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-data,revo-grid:not([theme]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=default],[theme=dark]) revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid:is([theme=default],[theme=dark]) revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 27px)}revo-grid:is([theme=default],[theme=dark]) revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset}revo-grid:is([theme=material],[theme=darkMaterial]),revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]){--rg-theme-font-family:var( --revo-grid-font-family, Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' );--rg-theme-header-height:var(--revo-grid-header-height, 50px);--rg-theme-header-font-size:var( --revo-grid-header-font-size, var(--rg-theme-font-size) );--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, 600);--rg-theme-header-text-transform:var( --revo-grid-header-text-transform, none );--rg-theme-header-text-align:var(--revo-grid-header-text-align, left);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0 15px);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 15px);font-family:var(--rg-theme-font-family)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header{color:var(--rg-theme-header-color);background-color:var(--rg-theme-header-bg);line-height:var(--rg-theme-header-height);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);text-transform:var(--rg-theme-header-text-transform);text-align:var(--rg-theme-header-text-align)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .rgHeaderCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell{padding:var(--rg-theme-header-padding);text-overflow:ellipsis}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .header-rgRow,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .header-rgRow{height:var(--rg-theme-header-height)}revo-grid:is([theme=material],[theme=darkMaterial]) .rowHeaders,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) .rowHeaders{color:var(--rg-theme-row-headers-color);background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=material],[theme=darkMaterial]) .rowHeaders revogr-data .rgCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data .rgRow,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 42px)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data .rgCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:-1px 0 0 0 var(--rg-theme-cell-vertical-border) inset}revo-grid:is([theme=compact],[theme=darkCompact]){--rg-theme-font-family:var( --revo-grid-font-family, Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' );--rg-theme-header-height:var(--revo-grid-header-height, 45px);--rg-theme-header-font-size:var( --revo-grid-header-font-size, var(--rg-theme-font-size) );--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, 600);--rg-theme-header-text-transform:var( --revo-grid-header-text-transform, none );--rg-theme-header-text-align:var(--revo-grid-header-text-align, left);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0 15px);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 15px);font-family:var(--rg-theme-font-family)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header{color:var(--rg-theme-header-color);background-color:var(--rg-theme-header-bg);line-height:var(--rg-theme-header-height);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);text-transform:var(--rg-theme-header-text-transform);text-align:var(--rg-theme-header-text-align)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell{padding:var(--rg-theme-header-padding);text-overflow:ellipsis}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .header-rgRow{height:var(--rg-theme-header-height)}revo-grid:is([theme=compact],[theme=darkCompact]) .rowHeaders{color:var(--rg-theme-row-headers-color);background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=compact],[theme=darkCompact]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 32px)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:-1px 0 0 0 var(--rg-theme-cell-vertical-border) inset}revo-grid:is([theme=compact],[theme=darkCompact]) revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid[dir=rtl] .viewports{flex-direction:row-reverse}revo-grid[dir=rtl] revogr-header .rgHeaderCell{text-align:right}revo-grid[dir=rtl] revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] .rowHeaders revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] revogr-filter-panel{direction:rtl}revo-grid[dir=rtl] revo-dropdown .rv-dr-root{text-align:right}revo-grid[dir=rtl] .drag-position{right:0;left:auto}revo-grid[dir=rtl] .drag-auto-scroll-y{right:0;left:auto}revo-grid[dir=rtl] .clipboard{right:0;left:auto}revo-grid[dir=rtl] .draggable{margin-left:-20px;margin-right:0;padding-right:20px;padding-left:5px}revo-grid[dir=rtl] .draggable .revo-alt-icon{right:5px;left:auto}revo-grid[dir=rtl] .focused-cell{border-right:2px solid var(--rg-theme-primary);border-left:none}revo-grid[dir=rtl] .selection-range{border-right:2px solid var(--rg-theme-primary);border-left:none}revo-grid[dir=rtl] .resize-handle{right:0;left:auto}revo-grid[dir=rtl] .sort-indicator{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .filter-button{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .group-expand{margin-right:0;margin-left:2px;padding-right:5px;padding-left:0}revo-grid[dir=rtl] .rgCell,revo-grid[dir=rtl] .rgHeaderCell{padding-left:5px;padding-right:5px}revo-grid[dir=rtl] revogr-edit{direction:rtl}revo-grid[dir=rtl] .rgHeaderCell{direction:rtl}revo-grid[dir=rtl] revogr-header,revo-grid[dir=rtl] revogr-data{text-align:right}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders,revo-grid[dir=rtl]:not([theme]) .rowHeaders{background-color:var(--rg-theme-row-headers-bg)}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:first-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset, 1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:last-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-left:1px solid var(--rg-theme-header-border);border-right:none}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data revogr-header,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) revogr-header,revo-grid[dir=rtl]:not([theme]) revogr-header{text-align:right}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) revogr-data,revo-grid[dir=rtl]:not([theme]) revogr-data{text-align:right}.revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:"::";display:inline-block}.revo-alt-icon{-webkit-mask-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]){background-color:transparent}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) revogr-header,revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) .rowHeaders{background-color:transparent;color:inherit}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) .rowHeaders revogr-data .rgCell{color:inherit}revo-grid{--rg-theme-primary:var(--revo-grid-primary, #266ae8);--rg-theme-primary-transparent:var( --revo-grid-primary-transparent, rgba(38, 106, 232, 0.9) );--rg-theme-background:var(--revo-grid-background, #fff);--rg-theme-foreground:var(--revo-grid-foreground, black);--rg-theme-divider:var(--revo-grid-divider, gray);--rg-theme-shadow:var(--revo-grid-shadow, rgba(0, 0, 0, 0.15));--rg-theme-text:var(--revo-grid-text, black);--rg-theme-border:var(--revo-grid-border, rgba(0, 0, 0, 0.2));--rg-theme-header-bg:var(--revo-grid-header-bg, #f8f9fa);--rg-theme-header-color:var(--revo-grid-header-color, #000);--rg-theme-header-border:var(--revo-grid-header-border, #cecece);--rg-theme-header-focused-bg:var( --revo-grid-header-focused-bg, var(--rg-theme-focused-bg) );--rg-theme-header-hover-bg:var( --revo-grid-header-hover-bg, var(--rg-theme-row-hover) );--rg-theme-cell-border:var(--revo-grid-cell-border, #e2e3e3);--rg-theme-cell-vertical-border:var( --revo-grid-cell-vertical-border, transparent );--rg-theme-focused-bg:var(--revo-grid-focused-bg, rgba(233, 234, 237, 0.5));--rg-theme-row-hover:var(--revo-grid-row-hover, #f1f1f1);--rg-theme-row-headers-bg:var( --revo-grid-row-headers-bg, var(--rg-theme-header-bg) );--rg-theme-row-headers-color:var( --revo-grid-row-headers-color, var(--rg-theme-header-color) );--rg-theme-cell-disabled-bg:var( --revo-grid-cell-disabled-bg, rgba(0, 0, 0, 0.07) );--rg-theme-filter-panel-bg:var(--revo-grid-filter-panel-bg, #fff);--rg-theme-filter-panel-border:var(--revo-grid-filter-panel-border, #d9d9d9);--rg-theme-filter-panel-shadow:var( --revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15) );--rg-theme-filter-panel-input-bg:var( --revo-grid-filter-panel-input-bg, #eaeaeb );--rg-theme-filter-panel-divider:var( --revo-grid-filter-panel-divider, #d9d9d9 );--rg-theme-filter-panel-select-border:var( --revo-grid-filter-panel-select-border, transparent );--rg-theme-filter-panel-select-border-hover:var( --revo-grid-filter-panel-select-border-hover, transparent );--rg-theme-filter-panel-reorder-accent:var( --revo-grid-filter-panel-reorder-accent, #007cb2 );--rg-theme-filter-panel-reorder-color:var( --revo-grid-filter-panel-reorder-color, #6b7280 );--rg-theme-filter-panel-text:var( --revo-grid-filter-panel-text, var(--rg-theme-text) );--rg-theme-filter-panel-muted-text:var( --revo-grid-filter-panel-muted-text, gray );--rg-theme-filter-panel-focus-ring:var( --revo-grid-filter-panel-focus-ring, 0 0 1px 3px rgba(59, 153, 252, 0.7) );--rg-theme-filter-panel-icon:var(--revo-grid-filter-panel-icon, gray);--rg-theme-filter-panel-icon-active:var( --revo-grid-filter-panel-icon-active, #10224a );--rg-theme-font-family:var( --revo-grid-font-family, Helvetica, Arial, Sans-Serif, serif );--rg-theme-font-size:var(--revo-grid-font-size, 14px);--rg-theme-header-height:var(--revo-grid-header-height, 30px);--rg-theme-header-font-size:var(--revo-grid-header-font-size, 12px);--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, normal);--rg-theme-header-text-transform:var( --revo-grid-header-text-transform, uppercase );--rg-theme-header-text-align:var(--revo-grid-header-text-align, center);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, center);--rg-theme-header-padding:var(--revo-grid-header-padding, 0);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0);--rg-theme-selection-border:var(--revo-grid-selection-border, #0d63e8);--rg-theme-selection-bg:var(--revo-grid-selection-bg, transparent);--rg-theme-autofill-handle-bg:var( --revo-grid-autofill-handle-bg, var(--rg-theme-selection-border) );--rg-theme-autofill-handle-border:var( --revo-grid-autofill-handle-border, white );--rg-theme-range-handle-bg:var( --revo-grid-range-handle-bg, rgba(0, 0, 0, 0.2) );--rg-theme-temporary-range-border:var( --revo-grid-temporary-range-border, rgb(255, 94, 0) );--rg-theme-temporary-selection-border:var( --revo-grid-temporary-selection-border, gray );--rg-theme-header-resize-hover:var( --revo-grid-header-resize-hover, deepskyblue );--rg-theme-button-text:var(--revo-grid-button-text, #fff);--rg-theme-button-bg:var(--revo-grid-button-bg, #4545ff);--rg-theme-button-success-bg:var(--revo-grid-button-success-bg, #009037);--rg-theme-button-danger-bg:var(--revo-grid-button-danger-bg, #e0662e);--rg-theme-button-outline-border:var( --revo-grid-button-outline-border, #dbdbdb );--rg-theme-button-outline-text:var(--revo-grid-button-outline-text, #000)}revo-grid[data-rg-theme-scheme=dark]{color-scheme:dark;--rg-theme-background:var(--revo-grid-background, #212529);--rg-theme-foreground:var(--revo-grid-foreground, #fff);--rg-theme-text:var(--revo-grid-text, rgba(255, 255, 255, 0.9));--rg-theme-divider:var(--revo-grid-divider, #505050);--rg-theme-border:var( --revo-grid-border, rgba(255, 255, 255, 0.2) );--rg-theme-filter-panel-bg:var(--revo-grid-filter-panel-bg, #212529);--rg-theme-filter-panel-border:var( --revo-grid-filter-panel-border, #505050 );--rg-theme-filter-panel-input-bg:var( --revo-grid-filter-panel-input-bg, #343a40 );--rg-theme-filter-panel-divider:var( --revo-grid-filter-panel-divider, #505050 );--rg-theme-filter-panel-icon-active:var( --revo-grid-filter-panel-icon-active, #fff );--rg-theme-header-bg:var(--revo-grid-header-bg, #343a40);--rg-theme-header-color:var(--revo-grid-header-color, #fff);--rg-theme-header-border:var(--revo-grid-header-border, #505050);--rg-theme-cell-border:var(--revo-grid-cell-border, #424242);--rg-theme-focused-bg:var( --revo-grid-focused-bg, rgba(52, 58, 64, 0.5) );--rg-theme-row-hover:var( --revo-grid-row-hover, rgba(80, 80, 80, 0.5) );--rg-theme-row-headers-bg:var( --revo-grid-row-headers-bg, rgba(52, 58, 64, 0.8) );--rg-theme-row-headers-color:var( --revo-grid-row-headers-color, rgba(255, 255, 255, 0.8) );--rg-theme-cell-disabled-bg:var( --revo-grid-cell-disabled-bg, rgba(255, 255, 255, 0.07) );--rg-theme-button-outline-border:var( --revo-grid-button-outline-border, #404040 );--rg-theme-button-outline-text:var( --revo-grid-button-outline-text, #d8d8d8 )}revo-grid[data-rg-theme-scheme=light]{color-scheme:light}revo-grid{}revo-grid>*{--revo-grid-primary:var(--rg-theme-primary);--revo-grid-primary-transparent:var(--rg-theme-primary-transparent);--revo-grid-background:var(--rg-theme-background);--revo-grid-foreground:var(--rg-theme-foreground);--revo-grid-divider:var(--rg-theme-divider);--revo-grid-shadow:var(--rg-theme-shadow);--revo-grid-text:var(--rg-theme-text);--revo-grid-border:var(--rg-theme-border);--revo-grid-header-bg:var(--rg-theme-header-bg);--revo-grid-header-color:var(--rg-theme-header-color);--revo-grid-header-border:var(--rg-theme-header-border);--revo-grid-header-focused-bg:var(--rg-theme-header-focused-bg);--revo-grid-header-hover-bg:var(--rg-theme-header-hover-bg);--revo-grid-cell-border:var(--rg-theme-cell-border);--revo-grid-cell-vertical-border:var(--rg-theme-cell-vertical-border);--revo-grid-focused-bg:var(--rg-theme-focused-bg);--revo-grid-row-hover:var(--rg-theme-row-hover);--revo-grid-row-headers-bg:var(--rg-theme-row-headers-bg);--revo-grid-row-headers-color:var(--rg-theme-row-headers-color);--revo-grid-cell-disabled-bg:var(--rg-theme-cell-disabled-bg);--revo-grid-filter-panel-bg:var(--rg-theme-filter-panel-bg);--revo-grid-filter-panel-border:var(--rg-theme-filter-panel-border);--revo-grid-filter-panel-shadow:var(--rg-theme-filter-panel-shadow);--revo-grid-filter-panel-input-bg:var(--rg-theme-filter-panel-input-bg);--revo-grid-filter-panel-divider:var(--rg-theme-filter-panel-divider);--revo-grid-filter-panel-select-border:var(--rg-theme-filter-panel-select-border);--revo-grid-filter-panel-select-border-hover:var(--rg-theme-filter-panel-select-border-hover);--revo-grid-filter-panel-reorder-accent:var(--rg-theme-filter-panel-reorder-accent);--revo-grid-filter-panel-reorder-color:var(--rg-theme-filter-panel-reorder-color);--revo-grid-filter-panel-text:var(--rg-theme-filter-panel-text);--revo-grid-filter-panel-muted-text:var(--rg-theme-filter-panel-muted-text);--revo-grid-filter-panel-focus-ring:var(--rg-theme-filter-panel-focus-ring);--revo-grid-filter-panel-icon:var(--rg-theme-filter-panel-icon);--revo-grid-filter-panel-icon-active:var(--rg-theme-filter-panel-icon-active);--revo-grid-font-family:var(--rg-theme-font-family);--revo-grid-font-size:var(--rg-theme-font-size);--revo-grid-header-height:var(--rg-theme-header-height);--revo-grid-header-font-size:var(--rg-theme-header-font-size);--revo-grid-header-font-weight:var(--rg-theme-header-font-weight);--revo-grid-header-text-transform:var(--rg-theme-header-text-transform);--revo-grid-header-text-align:var(--rg-theme-header-text-align);--revo-grid-cell-text-align:var(--rg-theme-cell-text-align);--revo-grid-header-padding:var(--rg-theme-header-padding);--revo-grid-cell-padding:var(--rg-theme-cell-padding);--revo-grid-selection-border:var(--rg-theme-selection-border);--revo-grid-selection-bg:var(--rg-theme-selection-bg);--revo-grid-autofill-handle-bg:var(--rg-theme-autofill-handle-bg);--revo-grid-autofill-handle-border:var(--rg-theme-autofill-handle-border);--revo-grid-range-handle-bg:var(--rg-theme-range-handle-bg);--revo-grid-temporary-range-border:var(--rg-theme-temporary-range-border);--revo-grid-temporary-selection-border:var(--rg-theme-temporary-selection-border);--revo-grid-header-resize-hover:var(--rg-theme-header-resize-hover);--revo-grid-button-text:var(--rg-theme-button-text);--revo-grid-button-bg:var(--rg-theme-button-bg);--revo-grid-button-success-bg:var(--rg-theme-button-success-bg);--revo-grid-button-danger-bg:var(--rg-theme-button-danger-bg);--revo-grid-button-outline-border:var(--rg-theme-button-outline-border);--revo-grid-button-outline-text:var(--rg-theme-button-outline-text)}revo-grid{direction:ltr !important}revo-grid revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid revogr-header .rgHeaderCell.sortable:hover{background-color:var(--rg-theme-header-hover-bg)}revo-grid revogr-header .rgHeaderCell.focused-cell{background:var(--rg-theme-header-focused-bg)}revo-grid .footer-wrapper revogr-data{box-shadow:0 -1px 0 var(--rg-theme-cell-border)}revo-grid revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 var(--rg-theme-cell-border) inset}revo-grid revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 var(--rg-theme-cell-border)}revo-grid revogr-data .rgRow{box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset}revo-grid revogr-data .rgRow.focused-rgRow{background-color:var(--rg-theme-focused-bg)}revo-grid revogr-data .rgCell{color:var(--rg-theme-text)}revo-grid revogr-data .rgCell.disabled{background-color:var(--rg-theme-cell-disabled-bg)}revo-grid{display:flex !important;height:100%;min-height:300px;background-color:var(--rg-theme-background);font-family:var(--rg-theme-font-family);font-size:var(--rg-theme-font-size);position:relative;color:var(--rg-theme-text);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}revo-grid .attribution{position:absolute;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid var(--rg-theme-primary-transparent);border-bottom:4px solid var(--rg-theme-primary-transparent);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom:0;left:0;background-color:var(--rg-theme-background);padding:4px;border-radius:4px;box-shadow:0 1px 10px var(--rg-theme-border);white-space:nowrap;text-decoration:none;color:var(--rg-theme-text);letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid{display:flex;flex-direction:column;width:100%;height:100%}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:var(--rg-theme-background);border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 var(--rg-theme-shadow);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:var(--rg-theme-foreground);position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:var(--rg-theme-divider);pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:var(--rg-theme-divider);pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}`;
|
|
3771
|
+
var DEFAULT_COLUMN_SIZE = 100;
|
|
3772
|
+
function getColumnSize(size) {
|
|
3773
|
+
return Number.isFinite(size) && size > 0 ? size : DEFAULT_COLUMN_SIZE;
|
|
3774
|
+
}
|
|
3775
|
+
var RevoGridComponent = class {
|
|
3776
|
+
constructor(hostRef) {
|
|
3777
|
+
registerInstance(this, hostRef);
|
|
3778
|
+
this.contentsizechanged = createEvent(this, "contentsizechanged", 7);
|
|
3779
|
+
this.beforeedit = createEvent(this, "beforeedit", 7);
|
|
3780
|
+
this.beforerangeedit = createEvent(this, "beforerangeedit", 7);
|
|
3781
|
+
this.afteredit = createEvent(this, "afteredit", 7);
|
|
3782
|
+
this.beforeautofill = createEvent(this, "beforeautofill", 7);
|
|
3783
|
+
this.beforerange = createEvent(this, "beforerange", 7);
|
|
3784
|
+
this.afterfocus = createEvent(this, "afterfocus", 7);
|
|
3785
|
+
this.roworderchanged = createEvent(this, "roworderchanged", 7);
|
|
3786
|
+
this.beforesorting = createEvent(this, "beforesorting", 7);
|
|
3787
|
+
this.beforesourcesortingapply = createEvent(this, "beforesourcesortingapply", 7);
|
|
3788
|
+
this.beforesortingapply = createEvent(this, "beforesortingapply", 7);
|
|
3789
|
+
this.aftersortingapply = createEvent(this, "aftersortingapply", 7);
|
|
3790
|
+
this.rowdragstart = createEvent(this, "rowdragstart", 7);
|
|
3791
|
+
this.headerclick = createEvent(this, "headerclick", 7);
|
|
3792
|
+
this.beforecellfocus = createEvent(this, "beforecellfocus", 7);
|
|
3793
|
+
this.beforefocuslost = createEvent(this, "beforefocuslost", 7);
|
|
3794
|
+
this.beforesourceset = createEvent(this, "beforesourceset", 7);
|
|
3795
|
+
this.beforeanysource = createEvent(this, "beforeanysource", 7);
|
|
3796
|
+
this.aftersourceset = createEvent(this, "aftersourceset", 7);
|
|
3797
|
+
this.afteranysource = createEvent(this, "afteranysource", 7);
|
|
3798
|
+
this.beforecolumnsgather = createEvent(this, "beforecolumnsgather", 7);
|
|
3799
|
+
this.beforecolumnsset = createEvent(this, "beforecolumnsset", 7);
|
|
3800
|
+
this.beforecolumnapplied = createEvent(this, "beforecolumnapplied", 7);
|
|
3801
|
+
this.aftercolumnsset = createEvent(this, "aftercolumnsset", 7);
|
|
3802
|
+
this.beforefilterapply = createEvent(this, "beforefilterapply", 7);
|
|
3803
|
+
this.beforefiltertrimmed = createEvent(this, "beforefiltertrimmed", 7);
|
|
3804
|
+
this.beforetrimmed = createEvent(this, "beforetrimmed", 7);
|
|
3805
|
+
this.aftertrimmed = createEvent(this, "aftertrimmed", 7);
|
|
3806
|
+
this.viewportscroll = createEvent(this, "viewportscroll", 7);
|
|
3807
|
+
this.beforeexport = createEvent(this, "beforeexport", 7);
|
|
3808
|
+
this.beforeeditstart = createEvent(this, "beforeeditstart", 7);
|
|
3809
|
+
this.aftercolumnresize = createEvent(this, "aftercolumnresize", 7);
|
|
3810
|
+
this.beforerowdefinition = createEvent(this, "beforerowdefinition", 7);
|
|
3811
|
+
this.filterconfigchanged = createEvent(this, "filterconfigchanged", 7);
|
|
3812
|
+
this.sortingconfigchanged = createEvent(this, "sortingconfigchanged", 7);
|
|
3813
|
+
this.rowheaderschanged = createEvent(this, "rowheaderschanged", 7);
|
|
3814
|
+
this.beforegridrender = createEvent(this, "beforegridrender", 7);
|
|
3815
|
+
this.aftergridrender = createEvent(this, "aftergridrender", 7);
|
|
3816
|
+
this.aftergridinit = createEvent(this, "aftergridinit", 7);
|
|
3817
|
+
this.additionaldatachanged = createEvent(this, "additionaldatachanged", 7);
|
|
3818
|
+
this.afterthemechanged = createEvent(this, "afterthemechanged", 7);
|
|
3819
|
+
this.created = createEvent(this, "created", 7);
|
|
3820
|
+
this.frameSize = 1;
|
|
3821
|
+
this.rowSize = 0;
|
|
3822
|
+
this.colSize = 100;
|
|
3823
|
+
this.range = false;
|
|
3824
|
+
this.readonly = false;
|
|
3825
|
+
this.resize = false;
|
|
3826
|
+
this.noHorizontalScrollTransfer = false;
|
|
3827
|
+
this.canFocus = true;
|
|
3828
|
+
this.useClipboard = true;
|
|
3829
|
+
this.columns = [];
|
|
3830
|
+
this.source = [];
|
|
3831
|
+
this.pinnedTopSource = [];
|
|
3832
|
+
this.pinnedBottomSource = [];
|
|
3833
|
+
this.rowDefinitions = [];
|
|
3834
|
+
this.editors = {};
|
|
3835
|
+
this.applyOnClose = false;
|
|
3836
|
+
this.plugins = [];
|
|
3837
|
+
this.columnTypes = {};
|
|
3838
|
+
this.theme = "default";
|
|
3839
|
+
this.themeDefinitions = [];
|
|
3840
|
+
this.rowClass = "";
|
|
3841
|
+
this.autoSizeColumn = false;
|
|
3842
|
+
this.filter = false;
|
|
3843
|
+
this.canMoveColumns = false;
|
|
3844
|
+
this.trimmedRows = {};
|
|
3845
|
+
this.exporting = false;
|
|
3846
|
+
this.stretch = false;
|
|
3847
|
+
this.additionalData = {};
|
|
3848
|
+
this.disableVirtualX = false;
|
|
3849
|
+
this.virtualX = ["rgCol"];
|
|
3850
|
+
this.disableVirtualY = false;
|
|
3851
|
+
this.hideAttribution = false;
|
|
3852
|
+
this.jobsBeforeRender = [];
|
|
3853
|
+
this.registerVNode = [];
|
|
3854
|
+
this.accessible = true;
|
|
3855
|
+
this.rtl = false;
|
|
3856
|
+
this.canDrag = true;
|
|
3857
|
+
this.extraElements = [];
|
|
3858
|
+
this.pluginService = new PluginService();
|
|
3859
|
+
this.viewport = null;
|
|
3860
|
+
this.isInited = false;
|
|
3861
|
+
this.themeStyles = {};
|
|
3862
|
+
}
|
|
3863
|
+
// #endregion
|
|
3864
|
+
// #region Methods
|
|
3865
|
+
/**
|
|
3866
|
+
* Refreshes data viewport.
|
|
3867
|
+
* Can be specific part as rgRow or pinned rgRow or 'all' by default.
|
|
3868
|
+
*/
|
|
3869
|
+
async refresh(type = "all") {
|
|
3870
|
+
if (!this.dataProvider) {
|
|
3871
|
+
throw new Error("Not connected");
|
|
3872
|
+
}
|
|
3873
|
+
this.dataProvider.refresh(type);
|
|
3874
|
+
}
|
|
3875
|
+
/**
|
|
3876
|
+
* Refreshes data at specified cell.
|
|
3877
|
+
* Useful for performance optimization.
|
|
3878
|
+
* No viewport update will be triggered.
|
|
3879
|
+
*
|
|
3880
|
+
* @example
|
|
3881
|
+
* const grid = document.querySelector('revo-grid');
|
|
3882
|
+
* grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh
|
|
3883
|
+
*/
|
|
3884
|
+
async setDataAt({ row, col, colType = "rgCol", rowType = "rgRow", val, skipDataUpdate = false }) {
|
|
3885
|
+
var _a;
|
|
3886
|
+
if (this.dataProvider && this.columnProvider && !skipDataUpdate) {
|
|
3887
|
+
const columnProp = (_a = this.columnProvider.getColumn(col, colType)) === null || _a === void 0 ? void 0 : _a.prop;
|
|
3888
|
+
if (typeof columnProp !== "undefined") {
|
|
3889
|
+
this.dataProvider.setCellData({
|
|
3890
|
+
type: rowType,
|
|
3891
|
+
rowIndex: row,
|
|
3892
|
+
prop: columnProp,
|
|
3893
|
+
val
|
|
3894
|
+
}, false);
|
|
3895
|
+
}
|
|
3896
|
+
}
|
|
3897
|
+
const dataElement = this.element.querySelector(`revogr-data[type="${rowType}"][col-type="${colType}"]`);
|
|
3898
|
+
return dataElement === null || dataElement === void 0 ? void 0 : dataElement.updateCell({
|
|
3899
|
+
row,
|
|
3900
|
+
col
|
|
3901
|
+
});
|
|
3902
|
+
}
|
|
3903
|
+
/**
|
|
3904
|
+
* Scrolls viewport to specified row by index.
|
|
3905
|
+
*/
|
|
3906
|
+
async scrollToRow(coordinate = 0) {
|
|
3907
|
+
if (!this.dimensionProvider) {
|
|
3908
|
+
throw new Error("Not connected");
|
|
3909
|
+
}
|
|
3910
|
+
const y = this.dimensionProvider.getViewPortPos({
|
|
3911
|
+
coordinate,
|
|
3912
|
+
dimension: "rgRow"
|
|
3913
|
+
});
|
|
3914
|
+
await this.scrollToCoordinate({ y });
|
|
3915
|
+
}
|
|
3916
|
+
/**
|
|
3917
|
+
* Scrolls viewport to specified column by index.
|
|
3918
|
+
*/
|
|
3919
|
+
async scrollToColumnIndex(coordinate = 0) {
|
|
3920
|
+
if (!this.dimensionProvider) {
|
|
3921
|
+
throw new Error("Not connected");
|
|
3922
|
+
}
|
|
3923
|
+
const x = this.dimensionProvider.getViewPortPos({
|
|
3924
|
+
coordinate,
|
|
3925
|
+
dimension: "rgCol"
|
|
3926
|
+
});
|
|
3927
|
+
await this.scrollToCoordinate({ x });
|
|
3928
|
+
}
|
|
3929
|
+
/**
|
|
3930
|
+
* Scrolls viewport to specified column by prop
|
|
3931
|
+
*/
|
|
3932
|
+
async scrollToColumnProp(prop, dimension = "rgCol") {
|
|
3933
|
+
if (!this.dimensionProvider || !this.columnProvider) {
|
|
3934
|
+
throw new Error("Not connected");
|
|
3935
|
+
}
|
|
3936
|
+
const coordinate = this.columnProvider.getColumnIndexByProp(prop, dimension);
|
|
3937
|
+
if (coordinate < 0) {
|
|
3938
|
+
return;
|
|
3939
|
+
}
|
|
3940
|
+
const x = this.dimensionProvider.getViewPortPos({
|
|
3941
|
+
coordinate,
|
|
3942
|
+
dimension
|
|
3943
|
+
});
|
|
3944
|
+
await this.scrollToCoordinate({ x });
|
|
3945
|
+
}
|
|
3946
|
+
/** Update columns */
|
|
3947
|
+
async updateColumns(cols) {
|
|
3948
|
+
var _a;
|
|
3949
|
+
(_a = this.columnProvider) === null || _a === void 0 ? void 0 : _a.updateColumns(cols);
|
|
3950
|
+
}
|
|
3951
|
+
/** Add trimmed by type */
|
|
3952
|
+
async addTrimmed(trimmed, trimmedType = "external", type = "rgRow") {
|
|
3953
|
+
if (!this.dataProvider) {
|
|
3954
|
+
throw new Error("Not connected");
|
|
3955
|
+
}
|
|
3956
|
+
const event = this.beforetrimmed.emit({
|
|
3957
|
+
trimmed,
|
|
3958
|
+
trimmedType,
|
|
3959
|
+
type
|
|
3960
|
+
});
|
|
3961
|
+
if (event.defaultPrevented) {
|
|
3962
|
+
return event;
|
|
3963
|
+
}
|
|
3964
|
+
this.dataProvider.setTrimmed({ [trimmedType]: event.detail.trimmed }, type);
|
|
3965
|
+
this.aftertrimmed.emit();
|
|
3966
|
+
return event;
|
|
3967
|
+
}
|
|
3968
|
+
/** Scrolls view port to coordinate */
|
|
3969
|
+
async scrollToCoordinate(cell) {
|
|
3970
|
+
var _a;
|
|
3971
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToCell(cell);
|
|
3972
|
+
}
|
|
3973
|
+
/** Open editor for cell. */
|
|
3974
|
+
async setCellEdit(rgRow, prop, rowSource = "rgRow") {
|
|
3975
|
+
var _a;
|
|
3976
|
+
const rgCol = getColumnByProp(this.columns, prop);
|
|
3977
|
+
if (!rgCol) {
|
|
3978
|
+
return;
|
|
3979
|
+
}
|
|
3980
|
+
await timeout();
|
|
3981
|
+
const colGroup = rgCol.pin || "rgCol";
|
|
3982
|
+
if (!this.columnProvider) {
|
|
3983
|
+
throw new Error("Not connected");
|
|
3984
|
+
}
|
|
3985
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
|
|
3986
|
+
}
|
|
3987
|
+
/** Set focus range. */
|
|
3988
|
+
async setCellsFocus(cellStart = { x: 0, y: 0 }, cellEnd = { x: 0, y: 0 }, colType = "rgCol", rowType = "rgRow") {
|
|
3989
|
+
var _a;
|
|
3990
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setFocus(colType, rowType, cellStart, cellEnd);
|
|
3991
|
+
}
|
|
3992
|
+
/** Get data from source */
|
|
3993
|
+
async getSource(type = "rgRow") {
|
|
3994
|
+
if (!this.dataProvider) {
|
|
3995
|
+
throw new Error("Not connected");
|
|
3996
|
+
}
|
|
3997
|
+
return this.dataProvider.stores[type].store.get("source");
|
|
3998
|
+
}
|
|
3999
|
+
/**
|
|
4000
|
+
* Get data from visible part of source
|
|
4001
|
+
* Trimmed/filtered rows will be excluded
|
|
4002
|
+
* @param type - type of source
|
|
4003
|
+
*/
|
|
4004
|
+
async getVisibleSource(type = "rgRow") {
|
|
4005
|
+
if (!this.dataProvider) {
|
|
4006
|
+
throw new Error("Not connected");
|
|
4007
|
+
}
|
|
4008
|
+
return getVisibleSourceItem(this.dataProvider.stores[type].store);
|
|
4009
|
+
}
|
|
4010
|
+
/**
|
|
4011
|
+
* Provides access to rows internal store observer
|
|
4012
|
+
* Can be used for plugin support
|
|
4013
|
+
* @param type - type of source
|
|
4014
|
+
*/
|
|
4015
|
+
async getSourceStore(type = "rgRow") {
|
|
4016
|
+
if (!this.dataProvider) {
|
|
4017
|
+
throw new Error("Not connected");
|
|
4018
|
+
}
|
|
4019
|
+
return this.dataProvider.stores[type].store;
|
|
4020
|
+
}
|
|
4021
|
+
/**
|
|
4022
|
+
* Provides access to column internal store observer
|
|
4023
|
+
* Can be used for plugin support
|
|
4024
|
+
* @param type - type of column
|
|
4025
|
+
*/
|
|
4026
|
+
async getColumnStore(type = "rgCol") {
|
|
4027
|
+
if (!this.columnProvider) {
|
|
4028
|
+
throw new Error("Not connected");
|
|
4029
|
+
}
|
|
4030
|
+
return this.columnProvider.stores[type].store;
|
|
4031
|
+
}
|
|
4032
|
+
/**
|
|
4033
|
+
* Update column sorting
|
|
4034
|
+
* @param column - column prop and cellCompare
|
|
4035
|
+
* @param order - order to apply
|
|
4036
|
+
* @param additive - if false will replace current order
|
|
4037
|
+
*
|
|
4038
|
+
* later passed to SortingPlugin
|
|
4039
|
+
*/
|
|
4040
|
+
async updateColumnSorting(column, order, additive) {
|
|
4041
|
+
this.sortingconfigchanged.emit({
|
|
4042
|
+
columns: [{
|
|
4043
|
+
prop: column.prop,
|
|
4044
|
+
order,
|
|
4045
|
+
cellCompare: column.cellCompare
|
|
4046
|
+
}],
|
|
4047
|
+
additive
|
|
4048
|
+
});
|
|
4049
|
+
}
|
|
4050
|
+
/**
|
|
4051
|
+
* Clears column sorting
|
|
4052
|
+
*/
|
|
4053
|
+
async clearSorting() {
|
|
4054
|
+
this.sortingconfigchanged.emit({
|
|
4055
|
+
columns: []
|
|
4056
|
+
});
|
|
4057
|
+
}
|
|
4058
|
+
/**
|
|
4059
|
+
* Receive all columns in data source
|
|
4060
|
+
*/
|
|
4061
|
+
async getColumns() {
|
|
4062
|
+
if (!this.columnProvider) {
|
|
4063
|
+
throw new Error("Not connected");
|
|
4064
|
+
}
|
|
4065
|
+
return this.columnProvider.getColumns();
|
|
4066
|
+
}
|
|
4067
|
+
/**
|
|
4068
|
+
* Clear current grid focus. Grid has no longer focus on it.
|
|
4069
|
+
*/
|
|
4070
|
+
async clearFocus() {
|
|
4071
|
+
var _a, _b;
|
|
4072
|
+
const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
|
|
4073
|
+
const event = this.beforefocuslost.emit(focused);
|
|
4074
|
+
if (event.defaultPrevented) {
|
|
4075
|
+
return;
|
|
4076
|
+
}
|
|
4077
|
+
(_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.clearAll();
|
|
4078
|
+
}
|
|
4079
|
+
/**
|
|
4080
|
+
* Get all active plugins instances
|
|
4081
|
+
*/
|
|
4082
|
+
async getPlugins() {
|
|
4083
|
+
return this.pluginService.get();
|
|
4084
|
+
}
|
|
4085
|
+
/**
|
|
4086
|
+
* Get the currently focused cell.
|
|
4087
|
+
*/
|
|
4088
|
+
async getFocused() {
|
|
4089
|
+
var _a, _b;
|
|
4090
|
+
return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused()) !== null && _b !== void 0 ? _b : null;
|
|
4091
|
+
}
|
|
4092
|
+
/**
|
|
4093
|
+
* Get size of content
|
|
4094
|
+
* Including all pinned data
|
|
4095
|
+
*/
|
|
4096
|
+
async getContentSize() {
|
|
4097
|
+
var _a;
|
|
4098
|
+
if (!this.dimensionProvider) {
|
|
4099
|
+
throw new Error("Not connected");
|
|
4100
|
+
}
|
|
4101
|
+
return (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.getFullSize();
|
|
4102
|
+
}
|
|
4103
|
+
/**
|
|
4104
|
+
* Get the currently selected Range.
|
|
4105
|
+
*/
|
|
4106
|
+
async getSelectedRange() {
|
|
4107
|
+
var _a, _b;
|
|
4108
|
+
return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange()) !== null && _b !== void 0 ? _b : null;
|
|
4109
|
+
}
|
|
4110
|
+
/**
|
|
4111
|
+
* Refresh extra elements. Triggers re-rendering of extra elements and functions.
|
|
4112
|
+
* Part of extraElements and registerVNode methods.
|
|
4113
|
+
* Useful for plugins.
|
|
4114
|
+
*/
|
|
4115
|
+
async refreshExtraElements() {
|
|
4116
|
+
var _a;
|
|
4117
|
+
(_a = this.extraService) === null || _a === void 0 ? void 0 : _a.refresh();
|
|
4118
|
+
}
|
|
4119
|
+
/**
|
|
4120
|
+
* Get all providers for grid
|
|
4121
|
+
* Useful for external grid integration
|
|
4122
|
+
*/
|
|
4123
|
+
async getProviders() {
|
|
4124
|
+
return this.getPluginData();
|
|
4125
|
+
}
|
|
4126
|
+
mousedownHandle(event) {
|
|
4127
|
+
const screenX = getPropertyFromEvent(event, "screenX");
|
|
4128
|
+
const screenY = getPropertyFromEvent(event, "screenY");
|
|
4129
|
+
if (screenX === null || screenY === null) {
|
|
4130
|
+
return;
|
|
4131
|
+
}
|
|
4132
|
+
this.clickTrackForFocusClear = screenX + screenY;
|
|
4133
|
+
}
|
|
4134
|
+
/**
|
|
4135
|
+
* To keep your elements from losing focus use mouseup/touchend e.preventDefault();
|
|
4136
|
+
*/
|
|
4137
|
+
async mouseupHandle(event) {
|
|
4138
|
+
var _a;
|
|
4139
|
+
const screenX = getPropertyFromEvent(event, "screenX");
|
|
4140
|
+
const screenY = getPropertyFromEvent(event, "screenY");
|
|
4141
|
+
if (screenX === null || screenY === null) {
|
|
4142
|
+
return;
|
|
4143
|
+
}
|
|
4144
|
+
if (event.defaultPrevented) {
|
|
4145
|
+
return;
|
|
4146
|
+
}
|
|
4147
|
+
const pos = screenX + screenY;
|
|
4148
|
+
if (Math.abs(((_a = this.clickTrackForFocusClear) !== null && _a !== void 0 ? _a : 0) - pos) > 10) {
|
|
4149
|
+
return;
|
|
4150
|
+
}
|
|
4151
|
+
const path = event.composedPath();
|
|
4152
|
+
if (!path.includes(this.element) && !(this.element.shadowRoot && path.includes(this.element.shadowRoot))) {
|
|
4153
|
+
await this.clearFocus();
|
|
4154
|
+
}
|
|
4155
|
+
}
|
|
4156
|
+
// #endregion
|
|
4157
|
+
// #region Listeners
|
|
4158
|
+
/** Drag events */
|
|
4159
|
+
onRowDragStarted(e) {
|
|
4160
|
+
var _a;
|
|
4161
|
+
const dragStart = this.rowdragstart.emit(e.detail);
|
|
4162
|
+
if (dragStart.defaultPrevented) {
|
|
4163
|
+
e.preventDefault();
|
|
4164
|
+
return;
|
|
4165
|
+
}
|
|
4166
|
+
(_a = this.orderService) === null || _a === void 0 ? void 0 : _a.start(this.element, Object.assign(Object.assign({}, e.detail), dragStart.detail));
|
|
4167
|
+
}
|
|
4168
|
+
onRowDragEnd() {
|
|
4169
|
+
var _a;
|
|
4170
|
+
(_a = this.orderService) === null || _a === void 0 ? void 0 : _a.end();
|
|
4171
|
+
}
|
|
4172
|
+
onRowOrderChange(e) {
|
|
4173
|
+
var _a;
|
|
4174
|
+
(_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.changeOrder(e.detail);
|
|
4175
|
+
}
|
|
4176
|
+
onRowDrag({ detail }) {
|
|
4177
|
+
var _a;
|
|
4178
|
+
(_a = this.orderService) === null || _a === void 0 ? void 0 : _a.move(detail);
|
|
4179
|
+
}
|
|
4180
|
+
onRowMouseMove(e) {
|
|
4181
|
+
var _a;
|
|
4182
|
+
(_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
|
|
4183
|
+
}
|
|
4184
|
+
async onCellEdit(e) {
|
|
4185
|
+
var _a;
|
|
4186
|
+
const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
|
|
4187
|
+
await timeout();
|
|
4188
|
+
if (!defaultPrevented) {
|
|
4189
|
+
(_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.setCellData(detail);
|
|
4190
|
+
this.afteredit.emit(detail);
|
|
4191
|
+
}
|
|
4192
|
+
}
|
|
4193
|
+
onRangeEdit(e) {
|
|
4194
|
+
if (!this.dataProvider) {
|
|
4195
|
+
throw new Error("Not connected");
|
|
4196
|
+
}
|
|
4197
|
+
const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
|
|
4198
|
+
if (defaultPrevented) {
|
|
4199
|
+
e.preventDefault();
|
|
4200
|
+
return;
|
|
4201
|
+
}
|
|
4202
|
+
this.dataProvider.setRangeData(detail.data, detail.type);
|
|
4203
|
+
this.afteredit.emit(detail);
|
|
4204
|
+
}
|
|
4205
|
+
onRangeChanged(e) {
|
|
4206
|
+
const beforeange = this.beforerange.emit(e.detail);
|
|
4207
|
+
if (beforeange.defaultPrevented) {
|
|
4208
|
+
e.preventDefault();
|
|
4209
|
+
}
|
|
4210
|
+
const beforeFill = this.beforeautofill.emit(beforeange.detail);
|
|
4211
|
+
if (beforeFill.defaultPrevented) {
|
|
4212
|
+
e.preventDefault();
|
|
4213
|
+
}
|
|
4214
|
+
}
|
|
4215
|
+
onRowDropped(e) {
|
|
4216
|
+
const { defaultPrevented } = this.roworderchanged.emit(e.detail);
|
|
4217
|
+
if (defaultPrevented) {
|
|
4218
|
+
e.preventDefault();
|
|
4219
|
+
}
|
|
4220
|
+
}
|
|
4221
|
+
onHeaderClick(e) {
|
|
4222
|
+
const { defaultPrevented } = this.headerclick.emit(Object.assign(Object.assign({}, e.detail.column), { originalEvent: e.detail.originalEvent }));
|
|
4223
|
+
if (defaultPrevented) {
|
|
4224
|
+
e.preventDefault();
|
|
4225
|
+
}
|
|
4226
|
+
}
|
|
4227
|
+
onCellFocus(e) {
|
|
4228
|
+
const { defaultPrevented } = this.beforecellfocus.emit(e.detail);
|
|
4229
|
+
if (!this.canFocus || defaultPrevented) {
|
|
4230
|
+
e.preventDefault();
|
|
4231
|
+
}
|
|
4232
|
+
}
|
|
4233
|
+
// #endregion
|
|
4234
|
+
// #region Watchers
|
|
4235
|
+
columnTypesChanged() {
|
|
4236
|
+
this.columnChanged(this.columns);
|
|
4237
|
+
}
|
|
4238
|
+
columnChanged(newVal = [], _prevVal = void 0, __watchName = "columns", init = false) {
|
|
4239
|
+
if (!this.dimensionProvider || !this.columnProvider) {
|
|
4240
|
+
return;
|
|
4241
|
+
}
|
|
4242
|
+
const focusToRestore = init ? void 0 : this.getColumnFocusRestore();
|
|
4243
|
+
const beforeGatherEvent = this.beforecolumnsgather.emit({
|
|
4244
|
+
columns: [...newVal]
|
|
4245
|
+
});
|
|
4246
|
+
if (beforeGatherEvent.defaultPrevented) {
|
|
4247
|
+
return;
|
|
4248
|
+
}
|
|
4249
|
+
const columnGather = getColumns(beforeGatherEvent.detail.columns, 0, this.columnTypes);
|
|
4250
|
+
const beforeSetEvent = this.beforecolumnsset.emit(columnGather);
|
|
4251
|
+
if (beforeSetEvent.defaultPrevented) {
|
|
4252
|
+
return;
|
|
4253
|
+
}
|
|
4254
|
+
this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX, init, this.virtualX);
|
|
4255
|
+
const beforeApplyEvent = this.beforecolumnapplied.emit(columnGather);
|
|
4256
|
+
if (beforeApplyEvent.defaultPrevented) {
|
|
4257
|
+
return;
|
|
4258
|
+
}
|
|
4259
|
+
const columns = this.columnProvider.setColumns(beforeApplyEvent.detail);
|
|
4260
|
+
if (focusToRestore) {
|
|
4261
|
+
this.pendingColumnFocusRestore = focusToRestore;
|
|
4262
|
+
}
|
|
4263
|
+
const order = {};
|
|
4264
|
+
for (const prop of Object.keys(beforeApplyEvent.detail.sort)) {
|
|
4265
|
+
order[prop] = beforeApplyEvent.detail.sort[prop].order;
|
|
4266
|
+
}
|
|
4267
|
+
this.aftercolumnsset.emit({
|
|
4268
|
+
columns,
|
|
4269
|
+
order
|
|
4270
|
+
});
|
|
4271
|
+
}
|
|
4272
|
+
/**
|
|
4273
|
+
* Capture logical focus before columns are repartitioned by pin state.
|
|
4274
|
+
* Regression case: selecting a regular cell, then pinning that column left,
|
|
4275
|
+
* used to let the new pinned viewport reuse the old rgCol selection store.
|
|
4276
|
+
*/
|
|
4277
|
+
getColumnFocusRestore() {
|
|
4278
|
+
var _a, _b, _c, _d;
|
|
4279
|
+
const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
|
|
4280
|
+
const prevStoreX = (_c = (_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.focusedStore) === null || _c === void 0 ? void 0 : _c.position.x;
|
|
4281
|
+
const prop = (_d = focused === null || focused === void 0 ? void 0 : focused.column) === null || _d === void 0 ? void 0 : _d.prop;
|
|
4282
|
+
if (!focused || prop === void 0 || prevStoreX === void 0) {
|
|
4283
|
+
return;
|
|
4284
|
+
}
|
|
4285
|
+
return {
|
|
4286
|
+
prop,
|
|
4287
|
+
colType: focused.colType,
|
|
4288
|
+
colIndex: focused.cell.x,
|
|
4289
|
+
prevStoreX,
|
|
4290
|
+
rowType: focused.rowType,
|
|
4291
|
+
rowIndex: focused.cell.y
|
|
4292
|
+
};
|
|
4293
|
+
}
|
|
4294
|
+
/**
|
|
4295
|
+
* Reapply focus by column prop after render, once pinning has moved the
|
|
4296
|
+
* column to its new viewport and virtual index.
|
|
4297
|
+
*/
|
|
4298
|
+
restoreColumnFocusAfterRender() {
|
|
4299
|
+
var _a, _b, _c, _d;
|
|
4300
|
+
const pending = this.pendingColumnFocusRestore;
|
|
4301
|
+
if (!pending) {
|
|
4302
|
+
return;
|
|
4303
|
+
}
|
|
4304
|
+
this.pendingColumnFocusRestore = void 0;
|
|
4305
|
+
if (!this.viewport || !this.columnProvider) {
|
|
4306
|
+
return;
|
|
4307
|
+
}
|
|
4308
|
+
const column = (_b = (_a = this.columnProvider.getColumnByProp(pending.prop)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : getColumnByProp(this.columns, pending.prop);
|
|
4309
|
+
if (!column) {
|
|
4310
|
+
return;
|
|
4311
|
+
}
|
|
4312
|
+
const colType = column.pin || "rgCol";
|
|
4313
|
+
const columnIndex = this.columnProvider.getColumnIndexByProp(pending.prop, colType);
|
|
4314
|
+
if (columnIndex < 0) {
|
|
4315
|
+
return;
|
|
4316
|
+
}
|
|
4317
|
+
if (colType === pending.colType && columnIndex === pending.colIndex && pending.prevStoreX === ((_d = (_c = this.selectionStoreConnector) === null || _c === void 0 ? void 0 : _c.focusedStore) === null || _d === void 0 ? void 0 : _d.position.x)) {
|
|
4318
|
+
return;
|
|
4319
|
+
}
|
|
4320
|
+
const cell = {
|
|
4321
|
+
x: columnIndex,
|
|
4322
|
+
y: pending.rowIndex
|
|
4323
|
+
};
|
|
4324
|
+
this.viewport.setFocus(colType, pending.rowType, cell, cell);
|
|
4325
|
+
}
|
|
4326
|
+
refreshColumnsOnConfigChange(newVal, prevVal) {
|
|
4327
|
+
if (newVal === prevVal) {
|
|
4328
|
+
return;
|
|
4329
|
+
}
|
|
4330
|
+
this.columnChanged(this.columns);
|
|
4331
|
+
}
|
|
4332
|
+
disableVirtualXChanged(newVal = false, prevVal = false) {
|
|
4333
|
+
this.refreshColumnsOnConfigChange(newVal, prevVal);
|
|
4334
|
+
}
|
|
4335
|
+
virtualXChanged(newVal = ["rgCol"], prevVal = ["rgCol"]) {
|
|
4336
|
+
this.refreshColumnsOnConfigChange(newVal, prevVal);
|
|
4337
|
+
}
|
|
4338
|
+
rowSizeChanged(s) {
|
|
4339
|
+
if (!this.themeService || !this.dimensionProvider) {
|
|
4340
|
+
return;
|
|
4341
|
+
}
|
|
4342
|
+
this.themeService.rowSize = s;
|
|
4343
|
+
this.applyTheme(this.theme, false, false, "rowSize");
|
|
4344
|
+
}
|
|
4345
|
+
colSizeChanged(s) {
|
|
4346
|
+
if (!this.dimensionProvider || !this.columnProvider) {
|
|
4347
|
+
return;
|
|
4348
|
+
}
|
|
4349
|
+
this.dimensionProvider.setSettings({ originItemSize: getColumnSize(s) }, "rgCol");
|
|
4350
|
+
this.columnChanged(this.columns);
|
|
4351
|
+
}
|
|
4352
|
+
themeChanged(t, _, __ = "theme", init = false) {
|
|
4353
|
+
if (!this.themeService || !this.dimensionProvider) {
|
|
4354
|
+
return;
|
|
4355
|
+
}
|
|
4356
|
+
if (this.pendingNormalizedTheme === t) {
|
|
4357
|
+
this.pendingNormalizedTheme = void 0;
|
|
4358
|
+
return;
|
|
4359
|
+
}
|
|
4360
|
+
const normalizedTheme = getTheme(t);
|
|
4361
|
+
if (normalizedTheme !== t) {
|
|
4362
|
+
this.pendingNormalizedTheme = normalizedTheme;
|
|
4363
|
+
this.theme = normalizedTheme;
|
|
4364
|
+
}
|
|
4365
|
+
this.applyTheme(normalizedTheme, init, true, "theme");
|
|
4366
|
+
}
|
|
4367
|
+
themeDefinitionsChanged(definitions = []) {
|
|
4368
|
+
if (!this.themeService || !this.dimensionProvider) {
|
|
4369
|
+
return;
|
|
4370
|
+
}
|
|
4371
|
+
this.themeService.setDefinitions(definitions);
|
|
4372
|
+
this.applyTheme(this.theme, false, true, "themeDefinitions");
|
|
4373
|
+
}
|
|
4374
|
+
applyTheme(theme, init, emitEvent, reason) {
|
|
4375
|
+
var _a;
|
|
4376
|
+
const resolvedTheme = this.themeService.register(theme);
|
|
4377
|
+
const rowSize = this.themeService.rowSize;
|
|
4378
|
+
const densityChanged = this.appliedThemeRowSize !== rowSize;
|
|
4379
|
+
const hadAppliedTheme = this.appliedThemeRowSize !== void 0;
|
|
4380
|
+
this.appliedThemeRowSize = rowSize;
|
|
4381
|
+
this.themeStyles = this.getThemeStyles();
|
|
4382
|
+
if (densityChanged) {
|
|
4383
|
+
(_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setSettings({ originItemSize: rowSize }, "rgRow");
|
|
4384
|
+
if (!init && hadAppliedTheme) {
|
|
4385
|
+
this.rowDefChanged(this.rowDefinitions, this.rowDefinitions, reason, true);
|
|
4386
|
+
}
|
|
4387
|
+
}
|
|
4388
|
+
if (emitEvent) {
|
|
4389
|
+
this.afterthemechanged.emit(resolvedTheme.name);
|
|
4390
|
+
}
|
|
4391
|
+
}
|
|
4392
|
+
getThemeStyles() {
|
|
4393
|
+
const styles = {
|
|
4394
|
+
"--rg-theme-row-size": `${this.themeService.rowSize}px`
|
|
4395
|
+
};
|
|
4396
|
+
for (const [name, value] of Object.entries(this.themeService.theme.tokens)) {
|
|
4397
|
+
const cssVariable = themeTokenCssVariables[name];
|
|
4398
|
+
if (cssVariable && value) {
|
|
4399
|
+
styles[cssVariable] = value;
|
|
4400
|
+
}
|
|
4401
|
+
}
|
|
4402
|
+
return styles;
|
|
4403
|
+
}
|
|
4404
|
+
dataSourceChanged(newVal = [], _, watchName) {
|
|
4405
|
+
if (!this.dataProvider) {
|
|
4406
|
+
return;
|
|
4407
|
+
}
|
|
4408
|
+
let type = "rgRow";
|
|
4409
|
+
switch (watchName) {
|
|
4410
|
+
case "pinnedBottomSource":
|
|
4411
|
+
type = "rowPinEnd";
|
|
4412
|
+
break;
|
|
4413
|
+
case "pinnedTopSource":
|
|
4414
|
+
type = "rowPinStart";
|
|
4415
|
+
break;
|
|
4416
|
+
case "source":
|
|
4417
|
+
type = "rgRow";
|
|
4418
|
+
const beforesourceset2 = this.beforesourceset.emit({
|
|
4419
|
+
type,
|
|
4420
|
+
source: newVal
|
|
4421
|
+
});
|
|
4422
|
+
newVal = beforesourceset2.detail.source;
|
|
4423
|
+
break;
|
|
4424
|
+
}
|
|
4425
|
+
const beforesourceset = this.beforeanysource.emit({
|
|
4426
|
+
type,
|
|
4427
|
+
source: newVal
|
|
4428
|
+
});
|
|
4429
|
+
const newSource = [...beforesourceset.detail.source];
|
|
4430
|
+
this.dataProvider.setData(newSource, type, this.disableVirtualY);
|
|
4431
|
+
if (watchName === "source") {
|
|
4432
|
+
this.aftersourceset.emit({
|
|
4433
|
+
type,
|
|
4434
|
+
source: newVal
|
|
4435
|
+
});
|
|
4436
|
+
}
|
|
4437
|
+
this.afteranysource.emit({
|
|
4438
|
+
type,
|
|
4439
|
+
source: newVal
|
|
4440
|
+
});
|
|
4441
|
+
}
|
|
4442
|
+
disableVirtualYChanged(newVal = false, prevVal = false) {
|
|
4443
|
+
if (newVal === prevVal) {
|
|
4444
|
+
return;
|
|
4445
|
+
}
|
|
4446
|
+
this.dataSourceChanged(this.source, this.source, "source");
|
|
4447
|
+
}
|
|
4448
|
+
rowDefChanged(after, before, _watchName, forceUpdate = true) {
|
|
4449
|
+
if (!this.dimensionProvider || !this.dataProvider) {
|
|
4450
|
+
return;
|
|
4451
|
+
}
|
|
4452
|
+
const { detail: { vals: newVal, oldVals: oldVal } } = this.beforerowdefinition.emit({
|
|
4453
|
+
vals: after,
|
|
4454
|
+
oldVals: before
|
|
4455
|
+
});
|
|
4456
|
+
const newRows = rowDefinitionByType(newVal);
|
|
4457
|
+
if (oldVal) {
|
|
4458
|
+
const remove = rowDefinitionRemoveByType(oldVal);
|
|
4459
|
+
for (const t in remove) {
|
|
4460
|
+
if (remove.hasOwnProperty(t)) {
|
|
4461
|
+
const type = t;
|
|
4462
|
+
const store = this.dataProvider.stores[type];
|
|
4463
|
+
const sourceLength = store.store.get("source").length;
|
|
4464
|
+
this.dimensionProvider.clearSize(type, sourceLength);
|
|
4465
|
+
}
|
|
4466
|
+
}
|
|
4467
|
+
}
|
|
4468
|
+
rowTypes.forEach((t) => {
|
|
4469
|
+
var _a;
|
|
4470
|
+
const newSizes = newRows[t];
|
|
4471
|
+
if (newSizes || forceUpdate) {
|
|
4472
|
+
(_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(t, (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {});
|
|
4473
|
+
}
|
|
4474
|
+
});
|
|
4475
|
+
}
|
|
4476
|
+
trimmedRowsChanged(newVal = {}) {
|
|
4477
|
+
this.addTrimmed(newVal);
|
|
4478
|
+
}
|
|
4479
|
+
/**
|
|
4480
|
+
* Grouping
|
|
4481
|
+
*/
|
|
4482
|
+
groupingChanged(newVal = {}) {
|
|
4483
|
+
var _a;
|
|
4484
|
+
(_a = this.pluginService.getByClass(GroupingRowPlugin)) === null || _a === void 0 ? void 0 : _a.setGrouping(newVal || {});
|
|
4485
|
+
}
|
|
4486
|
+
/**
|
|
4487
|
+
* Stretch Plugin Apply
|
|
4488
|
+
*/
|
|
4489
|
+
applyStretch(isStretch) {
|
|
4490
|
+
if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider) {
|
|
4491
|
+
return;
|
|
4492
|
+
}
|
|
4493
|
+
if (isStretch === "false") {
|
|
4494
|
+
isStretch = false;
|
|
4495
|
+
}
|
|
4496
|
+
const pluginData = this.getPluginData();
|
|
4497
|
+
if (!pluginData) {
|
|
4498
|
+
return;
|
|
4499
|
+
}
|
|
4500
|
+
const stretch = this.pluginService.getByClass(StretchColumn);
|
|
4501
|
+
if (typeof isStretch === "boolean" && isStretch || isStretch === "true") {
|
|
4502
|
+
if (!stretch) {
|
|
4503
|
+
this.pluginService.add(new StretchColumn(this.element, pluginData));
|
|
4504
|
+
} else if (isStretchPlugin(stretch)) {
|
|
4505
|
+
stretch.applyStretch(this.columnProvider.getRawColumns());
|
|
4506
|
+
}
|
|
4507
|
+
} else if (stretch) {
|
|
4508
|
+
this.pluginService.remove(stretch);
|
|
4509
|
+
}
|
|
4510
|
+
}
|
|
4511
|
+
applyFilter(cfg) {
|
|
4512
|
+
this.filterconfigchanged.emit(cfg);
|
|
4513
|
+
}
|
|
4514
|
+
applySorting(cfg) {
|
|
4515
|
+
this.sortingconfigchanged.emit(cfg);
|
|
4516
|
+
}
|
|
4517
|
+
rowHeadersChange(rowHeaders) {
|
|
4518
|
+
this.rowheaderschanged.emit(rowHeaders);
|
|
4519
|
+
}
|
|
4520
|
+
/**
|
|
4521
|
+
* Register external VNodes
|
|
4522
|
+
*/
|
|
4523
|
+
registerOutsideVNodes(elements = []) {
|
|
4524
|
+
this.extraElements = elements;
|
|
4525
|
+
}
|
|
4526
|
+
additionalDataChanged(data) {
|
|
4527
|
+
this.additionaldatachanged.emit(data);
|
|
4528
|
+
}
|
|
4529
|
+
/**
|
|
4530
|
+
* Watch for RTL changes and reapply column ordering
|
|
4531
|
+
*/
|
|
4532
|
+
rtlChanged() {
|
|
4533
|
+
this.columnChanged(this.columns);
|
|
4534
|
+
}
|
|
4535
|
+
/**
|
|
4536
|
+
* User can add plugins via plugins property
|
|
4537
|
+
*/
|
|
4538
|
+
pluginsChanged(plugins = [], prevPlugins) {
|
|
4539
|
+
this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
|
|
4540
|
+
}
|
|
4541
|
+
// #endregion
|
|
4542
|
+
// #region Plugins
|
|
4543
|
+
setPlugins() {
|
|
4544
|
+
this.removePlugins();
|
|
4545
|
+
const pluginData = this.getPluginData();
|
|
4546
|
+
if (!pluginData) {
|
|
4547
|
+
return;
|
|
4548
|
+
}
|
|
4549
|
+
this.setCorePlugins(pluginData);
|
|
4550
|
+
this.pluginsChanged(this.plugins);
|
|
4551
|
+
}
|
|
4552
|
+
setCorePlugins(pluginData) {
|
|
4553
|
+
if (this.accessible) {
|
|
4554
|
+
this.pluginService.add(new WCAGPlugin(this.element, pluginData));
|
|
4555
|
+
}
|
|
4556
|
+
this.pluginService.add(new RTLPlugin(this.element, pluginData));
|
|
4557
|
+
if (this.autoSizeColumn) {
|
|
4558
|
+
this.pluginService.add(new AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === "object" ? this.autoSizeColumn : void 0));
|
|
4559
|
+
}
|
|
4560
|
+
if (this.filter) {
|
|
4561
|
+
this.pluginService.add(new FilterPlugin(this.element, pluginData, typeof this.filter === "object" ? this.filter : void 0));
|
|
4562
|
+
}
|
|
4563
|
+
if (this.exporting) {
|
|
4564
|
+
this.pluginService.add(new ExportFilePlugin(this.element, pluginData));
|
|
4565
|
+
}
|
|
4566
|
+
this.pluginService.add(new SortingPlugin(this.element, pluginData));
|
|
4567
|
+
this.pluginService.add(new GroupingRowPlugin(this.element, pluginData));
|
|
4568
|
+
if (this.canMoveColumns) {
|
|
4569
|
+
this.pluginService.add(new ColumnMovePlugin(this.element, pluginData));
|
|
4570
|
+
}
|
|
4571
|
+
}
|
|
4572
|
+
getPluginData() {
|
|
4573
|
+
if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
|
|
4574
|
+
return;
|
|
4575
|
+
}
|
|
4576
|
+
const pluginData = {
|
|
4577
|
+
data: this.dataProvider,
|
|
4578
|
+
column: this.columnProvider,
|
|
4579
|
+
dimension: this.dimensionProvider,
|
|
4580
|
+
viewport: this.viewportProvider,
|
|
4581
|
+
selection: this.selectionStoreConnector,
|
|
4582
|
+
plugins: this.pluginService
|
|
4583
|
+
};
|
|
4584
|
+
return pluginData;
|
|
4585
|
+
}
|
|
4586
|
+
removePlugins() {
|
|
4587
|
+
this.pluginService.destroy();
|
|
4588
|
+
}
|
|
4589
|
+
// #endregion
|
|
4590
|
+
// if reconnect to dom we need to set up plugins
|
|
4591
|
+
connectedCallback() {
|
|
4592
|
+
if (this.isInited) {
|
|
4593
|
+
this.setPlugins();
|
|
4594
|
+
}
|
|
4595
|
+
this.created.emit();
|
|
4596
|
+
}
|
|
4597
|
+
/**
|
|
4598
|
+
* Called once just after the component is first connected to the DOM.
|
|
4599
|
+
* Since this method is only called once, it's a good place to load data asynchronously and to setup the state
|
|
4600
|
+
* without triggering extra re-renders.
|
|
4601
|
+
* A promise can be returned, that can be used to wait for the first render().
|
|
4602
|
+
*/
|
|
4603
|
+
componentWillLoad() {
|
|
4604
|
+
var _a;
|
|
4605
|
+
this.viewportProvider = new ViewportProvider();
|
|
4606
|
+
this.themeService = new ThemeService({
|
|
4607
|
+
rowSize: this.rowSize
|
|
4608
|
+
});
|
|
4609
|
+
this.themeService.setDefinitions(this.themeDefinitions);
|
|
4610
|
+
this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
|
|
4611
|
+
realSizeChanged: (k) => this.contentsizechanged.emit(k)
|
|
4612
|
+
});
|
|
4613
|
+
this.dimensionProvider.setSettings({ originItemSize: getColumnSize(this.colSize) }, "rgCol");
|
|
4614
|
+
this.columnProvider = new ColumnDataProvider();
|
|
4615
|
+
this.selectionStoreConnector = new SelectionStoreConnector();
|
|
4616
|
+
this.dataProvider = new DataProvider(this.dimensionProvider);
|
|
4617
|
+
this.registerOutsideVNodes(this.registerVNode);
|
|
4618
|
+
this.setPlugins();
|
|
4619
|
+
this.applyStretch(this.stretch);
|
|
4620
|
+
this.themeChanged(this.theme, void 0, void 0, true);
|
|
4621
|
+
this.columnChanged(this.columns, void 0, void 0, true);
|
|
4622
|
+
this.dataSourceChanged(this.source, void 0, "source");
|
|
4623
|
+
this.dataSourceChanged(this.pinnedTopSource, void 0, "pinnedTopSource");
|
|
4624
|
+
this.dataSourceChanged(this.pinnedBottomSource, void 0, "pinnedBottomSource");
|
|
4625
|
+
if (Object.keys((_a = this.trimmedRows) !== null && _a !== void 0 ? _a : {}).length > 0) {
|
|
4626
|
+
this.trimmedRowsChanged(this.trimmedRows);
|
|
4627
|
+
}
|
|
4628
|
+
this.rowDefChanged(this.rowDefinitions, void 0, void 0, false);
|
|
4629
|
+
if (this.grouping && Object.keys(this.grouping).length > 0) {
|
|
4630
|
+
this.groupingChanged(this.grouping);
|
|
4631
|
+
}
|
|
4632
|
+
this.scrollingService = new GridScrollingService((e) => {
|
|
4633
|
+
var _a2;
|
|
4634
|
+
(_a2 = this.dimensionProvider) === null || _a2 === void 0 ? void 0 : _a2.setViewPortCoordinate({
|
|
4635
|
+
coordinate: e.coordinate,
|
|
4636
|
+
type: e.dimension
|
|
4637
|
+
});
|
|
4638
|
+
this.viewportscroll.emit(e);
|
|
4639
|
+
});
|
|
4640
|
+
this.aftergridinit.emit();
|
|
4641
|
+
this.isInited = true;
|
|
4642
|
+
}
|
|
4643
|
+
componentWillRender() {
|
|
4644
|
+
const event = this.beforegridrender.emit();
|
|
4645
|
+
if (event.defaultPrevented) {
|
|
4646
|
+
return false;
|
|
4647
|
+
}
|
|
4648
|
+
return Promise.all(this.jobsBeforeRender);
|
|
4649
|
+
}
|
|
4650
|
+
componentDidRender() {
|
|
4651
|
+
this.restoreColumnFocusAfterRender();
|
|
4652
|
+
this.aftergridrender.emit();
|
|
4653
|
+
}
|
|
4654
|
+
render() {
|
|
4655
|
+
if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
|
|
4656
|
+
return;
|
|
4657
|
+
}
|
|
4658
|
+
const contentHeight = this.dimensionProvider.stores["rgRow"].store.get("realSize");
|
|
4659
|
+
this.viewport = new ViewportService({
|
|
4660
|
+
columnProvider: this.columnProvider,
|
|
4661
|
+
dataProvider: this.dataProvider,
|
|
4662
|
+
dimensionProvider: this.dimensionProvider,
|
|
4663
|
+
viewportProvider: this.viewportProvider,
|
|
4664
|
+
scrollingService: this.scrollingService,
|
|
4665
|
+
orderService: this.orderService,
|
|
4666
|
+
selectionStoreConnector: this.selectionStoreConnector,
|
|
4667
|
+
noHorizontalScrollTransfer: this.noHorizontalScrollTransfer,
|
|
4668
|
+
disableVirtualX: this.disableVirtualX,
|
|
4669
|
+
virtualX: this.virtualX,
|
|
4670
|
+
disableVirtualY: this.disableVirtualY,
|
|
4671
|
+
resize: (c) => this.aftercolumnresize.emit(c)
|
|
4672
|
+
}, contentHeight);
|
|
4673
|
+
const viewportSections = [];
|
|
4674
|
+
if (this.rowHeaders && this.viewport.columns.length) {
|
|
4675
|
+
const anyView = this.viewport.columns[0];
|
|
4676
|
+
viewportSections.push(h("revogr-row-headers", { additionalData: this.additionalData, height: contentHeight, rowClass: this.rowClass, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, jobsBeforeRender: this.jobsBeforeRender, rowHeaderColumn: typeof this.rowHeaders === "object" ? this.rowHeaders : void 0, onScrollview: ({ detail: e }) => this.scrollingService.proxyScroll(e, "headerRow"), onRef: ({ detail: e }) => this.scrollingService.registerElement(e, "headerRow") }));
|
|
4677
|
+
}
|
|
4678
|
+
const isMobile = isMobileDevice();
|
|
4679
|
+
const viewPortHtml = [];
|
|
4680
|
+
for (let view of this.viewport.columns) {
|
|
4681
|
+
const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
|
|
4682
|
+
const dataViews = [
|
|
4683
|
+
h("revogr-header", Object.assign({}, headerProperties, { slot: HEADER_SLOT }))
|
|
4684
|
+
];
|
|
4685
|
+
view.dataPorts.forEach((data) => {
|
|
4686
|
+
const key = `${data.type}_${view.type}`;
|
|
4687
|
+
const dataView = h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => {
|
|
4688
|
+
var _a;
|
|
4689
|
+
return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll();
|
|
4690
|
+
}, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => {
|
|
4691
|
+
var _a;
|
|
4692
|
+
return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail);
|
|
4693
|
+
}, onCanceledit: () => {
|
|
4694
|
+
var _a;
|
|
4695
|
+
return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false);
|
|
4696
|
+
}, onSetedit: (e) => {
|
|
4697
|
+
var _a;
|
|
4698
|
+
const event = this.beforeeditstart.emit(e.detail);
|
|
4699
|
+
if (event.defaultPrevented) {
|
|
4700
|
+
e.preventDefault();
|
|
4701
|
+
} else {
|
|
4702
|
+
(_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
|
|
4703
|
+
}
|
|
4704
|
+
} }), h("revogr-data", Object.assign({}, data, { colType: view.type, key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` })));
|
|
4705
|
+
dataViews.push(dataView);
|
|
4706
|
+
});
|
|
4707
|
+
viewPortHtml.push(h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: (el) => this.scrollingService.registerElement(el, `${view.prop.key}`), onScrollviewport: (e) => {
|
|
4708
|
+
this.scrollingService.proxyScroll(e.detail, `${view.prop.key}`, this.noHorizontalScrollTransfer && e.detail.dimension === "rgCol");
|
|
4709
|
+
}, onScrollviewportsilent: (e) => this.scrollingService.scrollSilentService(e.detail, `${view.prop.key}`) }), dataViews));
|
|
4710
|
+
}
|
|
4711
|
+
viewportSections.push(viewPortHtml);
|
|
4712
|
+
const typeRow = "rgRow";
|
|
4713
|
+
const typeCol = "rgCol";
|
|
4714
|
+
const viewports = this.viewportProvider.stores;
|
|
4715
|
+
const dimensions = this.dimensionProvider.stores;
|
|
4716
|
+
const verticalScroll = h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, clientSize: viewports[typeRow].store.get("clientSize"), virtualSize: viewports[typeRow].store.get("virtualSize"), realSize: dimensions[typeRow].store.get("realSize"), ref: (el) => this.scrollingService.registerElement(el, "rowScroll"), onScrollvirtual: (e) => this.scrollingService.proxyScroll(e.detail) });
|
|
4717
|
+
const horizontalScroll = h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, clientSize: viewports[typeCol].store.get("clientSize"), virtualSize: viewports[typeCol].store.get("virtualSize"), realSize: dimensions[typeCol].store.get("realSize"), ref: (el) => this.scrollingService.registerElement(el, "colScroll"), onScrollvirtual: (e) => this.scrollingService.proxyScroll(e.detail) });
|
|
4718
|
+
return h(Host, { dir: this.rtl ? "rtl" : "ltr", "data-rg-theme-scheme": this.themeService.theme.colorScheme, style: this.themeStyles }, this.hideAttribution ? null : h("revogr-attribution", { class: "attribution" }), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
|
|
4719
|
+
var _a;
|
|
4720
|
+
if (e.currentTarget === e.target) {
|
|
4721
|
+
(_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
|
|
4722
|
+
}
|
|
4723
|
+
} }, h("div", { class: "viewports" }, h("slot", { name: "viewport" }), viewportSections, verticalScroll, h(OrderRenderer, { ref: (e) => this.orderService = e }))), horizontalScroll, h("revogr-extra", { ref: (el) => this.extraService = el, nodes: this.extraElements }), h("slot", { name: "footer" }));
|
|
4724
|
+
}
|
|
4725
|
+
disconnectedCallback() {
|
|
4726
|
+
this.removePlugins();
|
|
4727
|
+
}
|
|
4728
|
+
get element() {
|
|
4729
|
+
return getElement(this);
|
|
4730
|
+
}
|
|
4731
|
+
static get watchers() {
|
|
4732
|
+
return {
|
|
4733
|
+
"columnTypes": [{
|
|
4734
|
+
"columnTypesChanged": 0
|
|
4735
|
+
}],
|
|
4736
|
+
"columns": [{
|
|
4737
|
+
"columnChanged": 0
|
|
4738
|
+
}],
|
|
4739
|
+
"disableVirtualX": [{
|
|
4740
|
+
"disableVirtualXChanged": 0
|
|
4741
|
+
}],
|
|
4742
|
+
"virtualX": [{
|
|
4743
|
+
"virtualXChanged": 0
|
|
4744
|
+
}],
|
|
4745
|
+
"rowSize": [{
|
|
4746
|
+
"rowSizeChanged": 0
|
|
4747
|
+
}],
|
|
4748
|
+
"colSize": [{
|
|
4749
|
+
"colSizeChanged": 0
|
|
4750
|
+
}],
|
|
4751
|
+
"theme": [{
|
|
4752
|
+
"themeChanged": 0
|
|
4753
|
+
}],
|
|
4754
|
+
"themeDefinitions": [{
|
|
4755
|
+
"themeDefinitionsChanged": 0
|
|
4756
|
+
}],
|
|
4757
|
+
"source": [{
|
|
4758
|
+
"dataSourceChanged": 0
|
|
4759
|
+
}],
|
|
4760
|
+
"pinnedBottomSource": [{
|
|
4761
|
+
"dataSourceChanged": 0
|
|
4762
|
+
}],
|
|
4763
|
+
"pinnedTopSource": [{
|
|
4764
|
+
"dataSourceChanged": 0
|
|
4765
|
+
}],
|
|
4766
|
+
"disableVirtualY": [{
|
|
4767
|
+
"disableVirtualYChanged": 0
|
|
4768
|
+
}],
|
|
4769
|
+
"rowDefinitions": [{
|
|
4770
|
+
"rowDefChanged": 0
|
|
4771
|
+
}],
|
|
4772
|
+
"trimmedRows": [{
|
|
4773
|
+
"trimmedRowsChanged": 0
|
|
4774
|
+
}],
|
|
4775
|
+
"grouping": [{
|
|
4776
|
+
"groupingChanged": 0
|
|
4777
|
+
}],
|
|
4778
|
+
"stretch": [{
|
|
4779
|
+
"applyStretch": 0
|
|
4780
|
+
}],
|
|
4781
|
+
"filter": [{
|
|
4782
|
+
"applyFilter": 0
|
|
4783
|
+
}],
|
|
4784
|
+
"sorting": [{
|
|
4785
|
+
"applySorting": 0
|
|
4786
|
+
}],
|
|
4787
|
+
"rowHeaders": [{
|
|
4788
|
+
"rowHeadersChange": 0
|
|
4789
|
+
}],
|
|
4790
|
+
"registerVNode": [{
|
|
4791
|
+
"registerOutsideVNodes": 0
|
|
4792
|
+
}],
|
|
4793
|
+
"additionalData": [{
|
|
4794
|
+
"additionalDataChanged": 0
|
|
4795
|
+
}],
|
|
4796
|
+
"rtl": [{
|
|
4797
|
+
"rtlChanged": 0
|
|
4798
|
+
}],
|
|
4799
|
+
"plugins": [{
|
|
4800
|
+
"pluginsChanged": 0
|
|
4801
|
+
}]
|
|
4802
|
+
};
|
|
4803
|
+
}
|
|
4804
|
+
};
|
|
4805
|
+
RevoGridComponent.style = revoGridStyleCss();
|
|
4806
|
+
/*! Bundled license information:
|
|
4807
|
+
|
|
4808
|
+
@revolist/revogrid/dist/esm/column.drag.plugin-DKgC_0I1.js:
|
|
4809
|
+
@revolist/revogrid/dist/esm/revo-grid.entry.js:
|
|
4810
|
+
(*!
|
|
4811
|
+
* Built by Revolist OU ❤️
|
|
4812
|
+
*)
|
|
4813
|
+
*/
|
|
4814
|
+
|
|
4815
|
+
export { RevoGridComponent as revo_grid };
|
|
4816
|
+
//# sourceMappingURL=revo-grid.entry-7FHEBN3O.js.map
|
|
4817
|
+
//# sourceMappingURL=revo-grid.entry-7FHEBN3O.js.map
|