@vuu-ui/vuu-datatable 0.6.13-debug → 0.8.14-debug

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.
Files changed (43) hide show
  1. package/cjs/index.js +47 -23358
  2. package/cjs/index.js.map +7 -0
  3. package/esm/index.js +63 -0
  4. package/esm/index.js.map +7 -0
  5. package/index.css +3 -634
  6. package/index.css.map +3 -3
  7. package/package.json +14 -8
  8. package/types/filter-table/FilterTable.d.ts +10 -0
  9. package/types/filter-table/index.d.ts +1 -0
  10. package/types/index.d.ts +2 -3
  11. package/types/json-table/JsonTable.d.ts +9 -0
  12. package/types/json-table/index.d.ts +1 -0
  13. package/LICENSE +0 -201
  14. package/types/ColumnBasedTable.d.ts +0 -3
  15. package/types/ColumnResizer.d.ts +0 -8
  16. package/types/DataTable.d.ts +0 -4
  17. package/types/DragVisualizer.d.ts +0 -8
  18. package/types/KeySet.d.ts +0 -12
  19. package/types/RowBasedTable.d.ts +0 -3
  20. package/types/SortIndicator.d.ts +0 -7
  21. package/types/TableCell.d.ts +0 -9
  22. package/types/TableGroupCell.d.ts +0 -7
  23. package/types/TableGroupHeaderCell.d.ts +0 -13
  24. package/types/TableHeaderCell.d.ts +0 -11
  25. package/types/TableRow.d.ts +0 -14
  26. package/types/context-menu/buildContextMenuDescriptors.d.ts +0 -4
  27. package/types/context-menu/index.d.ts +0 -2
  28. package/types/context-menu/useContextMenu.d.ts +0 -16
  29. package/types/dataTableTypes.d.ts +0 -67
  30. package/types/filter-indicator.d.ts +0 -13
  31. package/types/keyUtils.d.ts +0 -19
  32. package/types/useDataSource.d.ts +0 -40
  33. package/types/useDataTable.d.ts +0 -63
  34. package/types/useDraggableColumn.d.ts +0 -12
  35. package/types/useKeyboardNavigation.d.ts +0 -22
  36. package/types/useMeasuredContainer.d.ts +0 -25
  37. package/types/useMeasuredSize.d.ts +0 -26
  38. package/types/useResizeObserver.d.ts +0 -15
  39. package/types/useSelection.d.ts +0 -7
  40. package/types/useTableColumnResize.d.ts +0 -17
  41. package/types/useTableModel.d.ts +0 -66
  42. package/types/useTableScroll.d.ts +0 -31
  43. package/types/useTableViewport.d.ts +0 -39
package/index.css CHANGED
@@ -1,638 +1,7 @@
1
- /* ../vuu-popups/src/dialog/Dialog.css */
2
- .vuuDialog {
3
- background: var(--salt-container-primary-background);
4
- border: var(--vuuDialog-border, solid 1px #ccc);
5
- border-radius: 5px;
6
- padding: var(--vuuDialog-padding, 0);
7
- box-shadow: var(--salt-overlayable-shadow, none);
8
- height: var(--vuuDialog-height, fit-content);
9
- width: var(--vuuDialog-width, fit-content);
10
- }
11
- .vuuDialog-header {
12
- --saltButton-height: 28px;
13
- --saltButton-width: 28px;
14
- --saltToolbar-background: transparent;
15
- --saltToolbar-height: calc(var(--salt-size-base) + 5px);
16
- border-bottom: solid 1px var(--salt-container-primary-borderColor);
17
- }
18
- .vuuDialog-header > .Responsive-inner {
19
- align-items: center;
20
- }
21
- .vuuDialog-header > .Responsive-inner > :last-child {
22
- right: 2px;
23
- }
24
-
25
- /* ../vuu-popups/src/menu/MenuList.css */
26
- .vuuMenuList {
27
- --context-menu-color: #161616;
28
- --context-menu-padding: var(--hw-list-item-padding, 0 6px);
29
- --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
30
- --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
31
- --context-menu-highlight-bg: #a4d5f4;
32
- --context-menu-blur-focus-bg: #e0e4e9;
33
- --menu-item-height: var(--hw-list-item-height, 24px);
34
- --menu-item-icon-color: black;
35
- --menu-item-twisty-color: black;
36
- --menu-item-twisty-content: "";
37
- --menu-item-twisty-top: 50%;
38
- --menu-item-twisty-left: auto;
39
- --menu-item-twisty-right: 0px;
40
- --menu-icon-size: 12px;
41
- background-clip: padding-box;
42
- background-color: white;
43
- border-radius: 4px;
44
- border: solid 1px rgba(0, 0, 0, 0.15);
45
- box-shadow: var(--context-menu-shadow);
46
- font-size: var(--salt-text-label-fontSize);
47
- font-weight: var(--salt-typography-fontWeight-semiBold);
48
- list-style: none;
49
- margin: 2px 0 0;
50
- outline: 0;
51
- padding: 0;
52
- position: absolute;
53
- }
54
- .vuuMenuItem {
55
- align-items: center;
56
- color: var(--context-menu-color);
57
- display: flex;
58
- gap: 6px;
59
- height: var(--menu-item-height);
60
- padding: var(--context-menu-padding);
61
- padding-right: 24px;
62
- position: relative;
63
- white-space: nowrap;
64
- }
65
- .vuuIconContainer {
66
- display: inline-block;
67
- flex: 12px 0 0;
68
- height: var(--menu-icon-size);
69
- mask-repeat: no-repeat;
70
- width: var(--menu-icon-size);
71
- }
72
- .vuuMenuItem[aria-expanded=true] {
73
- background-color: var(--context-menu-blur-focus-bg);
74
- }
75
- .vuuMenuItem-separator {
76
- border-top: solid 1px var(--context-menu-blur-focus-bg);
77
- }
78
- .vuuMenuItem[aria-haspopup=true]:after {
79
- content: var(--menu-item-twisty-content);
80
- -webkit-mask: var(--svg-chevron-right) center center/12px 12px;
81
- mask: var(--svg-chevron-down) center center/12px 12px;
82
- mask-repeat: no-repeat;
83
- background-color: var(--menu-item-twisty-color);
84
- height: 16px;
85
- left: var(--menu-item-twisty-left);
86
- right: var(--menu-item-twisty-right);
87
- margin-top: -8px;
88
- position: absolute;
89
- top: var(--menu-item-twisty-top);
90
- transition: transform 0.3s;
91
- width: 16px;
92
- }
93
- .vuuMenuItem[data-highlighted] {
94
- background-color: var(--context-menu-highlight-bg);
95
- }
96
- .vuuMenuItem:hover {
97
- background-color: var(--context-menu-highlight-bg);
98
- cursor: default;
99
- }
100
- .vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {
101
- background-color: var(--context-menu-blur-focus-bg);
102
- }
103
- .vuuMenuItem.focusVisible:before {
104
- content: "";
105
- position: absolute;
106
- top: 0;
107
- left: 0;
108
- right: 0;
109
- bottom: 0px;
110
- border: dotted var(--focus-visible-border-color) 2px;
111
- }
112
- .vuuPopupContainer.top-bottom-right-right .popup-menu {
113
- left: auto;
114
- right: 0;
115
- }
116
- .popup-menu .menu-item.showing > button,
117
- .popup-menu .menu-item > button:focus,
118
- .popup-menu .menu-item > button:hover {
119
- text-decoration: none;
120
- color: rgb(0, 0, 0);
121
- background-color: rgb(220, 220, 220);
122
- }
123
- .vuuMenuItem-button:active,
124
- .hwMenuItem-button:hover {
125
- outline: 0;
126
- }
127
- .popup-menu .menu-item.disabled > button {
128
- clear: both;
129
- font-weight: normal;
130
- line-height: 1.5;
131
- color: rgb(120, 120, 120);
132
- white-space: nowrap;
133
- text-decoration: none;
134
- cursor: default;
135
- }
136
-
137
- /* ../vuu-popups/src/popup/popup-service.css */
138
- .vuuPopup {
139
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
140
- position: absolute;
141
- top: 0;
142
- left: 0;
143
- width: 0;
144
- height: 0;
145
- overflow: visible;
146
- z-index: 1000;
147
- }
148
- .vuuPopup {
149
- position: absolute;
150
- }
151
-
152
- /* src/TableCell.css */
153
- .vuuDataTable {
154
- --cell-outline-width: 2px;
155
- user-select: none;
156
- }
157
- .vuuDataTable-table td {
158
- --saltEditableLabel-height: 17px;
159
- --saltInput-height: 17px;
160
- --saltInput-minHeight: 17px;
161
- border-right: 1px solid var(--vuuTableCell-border-rightColor);
162
- border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);
163
- color: var(--salt-text-primary-foreground);
164
- cursor: default;
165
- height: var(--vuuTable-rowHeight);
166
- line-height: calc(var(--vuuTable-rowHeight) - 1px);
167
- overflow: hidden;
168
- padding: 0 5px;
169
- }
170
- .vuuDataTable th:focus,
171
- .vuuDataTable td:focus {
172
- outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));
173
- outline-offset: calc(var(--cell-outline-width) * -1);
174
- box-shadow: inset 0 0 0 var(--cell-outline-width) white;
175
- border-bottom: none;
176
- }
177
- .vuuDataTable th:focus .vuuTable-headerCell-inner {
178
- padding-bottom: var(--cell-outline-width);
179
- }
180
- .vuuDataTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner {
181
- --columnResizer-color: transparent;
182
- }
183
- .vuuDataTable td:focus {
184
- border-right: none;
185
- padding-bottom: 1px;
186
- }
187
- td[data-editable=true] {
188
- --salt-text-fontSize: 10px;
189
- --vuu-icon-size: 5px;
190
- position: relative;
191
- }
192
- td[data-editable=true]:after {
193
- top: 0;
194
- content: "";
195
- background-color: var(--salt-text-secondary-foreground, black);
196
- left: 0;
197
- height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
198
- -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);
199
- mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);
200
- mask-repeat: no-repeat;
201
- -webkit-mask-repeat: no-repeat;
202
- position: absolute;
203
- transform: rotate(180deg);
204
- width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
205
- }
206
- td:focus[data-editable],
207
- td:focus-within[data-editable],
208
- td:has(.saltEditableLabel-editing) {
209
- outline: solid var(--salt-color-blue-400) 1px;
210
- background-color: white;
211
- outline-offset: -1px;
212
- }
213
- td:focus[data-editable=true]:after,
214
- td:has(.saltEditableLabel):after {
215
- background-color: var(--salt-color-blue-400);
216
- left: 1px;
217
- top: 1px;
218
- }
219
-
220
- /* src/TableGroupCell.css */
221
- .vuuTableGroupCell {
222
- --spacer-width: 20px;
223
- --toggle-icon-transform: var(--row-toggle-icon-transform, none);
224
- --vuu-icon-width: 18px;
225
- display: flex;
226
- align-items: center;
227
- }
228
- .vuuTableGroupCell-spacer {
229
- height: 100%;
230
- position: relative;
231
- width: var(--spacer-width);
232
- }
233
- .vuuTableGroupCell-spacer:after {
234
- background: var(--salt-container-primary-borderColor);
235
- content: "";
236
- position: absolute;
237
- top: 0;
238
- bottom: -1px;
239
- left: 9px;
240
- width: 1px;
241
- }
242
- .vuuTableGroupCell-toggle {
243
- transition: transform 0.25s;
244
- transform: var(--toggle-icon-transform);
245
- }
246
-
247
- /* src/TableRow.css */
248
- .vuuDataTableRow-even {
249
- --row-background: var(--salt-container-secondary-background);
250
- }
251
- .vuuDataTableRow:not(.vuuDataTableRow-even) {
252
- --row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background));
253
- }
254
- .vuuDataTableRow {
255
- background: var(--row-background);
256
- }
257
- .vuuDataTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {
258
- background-color: var(--row-background);
259
- }
260
- .vuuDataTableRow-expanded {
261
- --row-toggle-icon-transform: rotate(90deg);
262
- }
263
- .vuuDataTableRow[aria-selected] {
264
- background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));
265
- --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);
266
- }
267
- .vuuDataTableRow-preSelected {
268
- --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);
269
- }
270
-
271
- /* src/ColumnResizer.css */
272
- .vuuColumnResizer {
273
- cursor: col-resize;
274
- margin-left: auto;
275
- width: 4px;
276
- }
277
- .vuuColumnResizer:after {
278
- content: "";
279
- position: absolute;
280
- width: var(--columnResizer-width, 1px);
281
- top: 0;
282
- bottom: 0;
283
- right: 0;
284
- background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));
285
- height: var(--columnResizer-height, 100%);
286
- }
287
-
288
- /* src/SortIndicator.css */
289
- .vuuSortIndicator {
290
- --menu-icon-size: 18px;
291
- --menu-item-icon-color: black;
292
- display: flex;
293
- flex-direction: column;
294
- position: relative;
295
- width: 18px;
296
- }
297
- .vuuSortPosition {
298
- font-size: 10px;
299
- line-height: 10px;
300
- text-align: center;
301
- }
302
-
303
- /* src/TableHeaderCell.css */
304
- .vuuTable-heading:nth-child(2) {
305
- --heading-top: calc(var(--header-height));
306
- }
307
- .vuuTable-heading:nth-child(3) {
308
- --heading-top: calc(var(--header-height) * 2);
309
- }
310
- .vuuTable-heading:nth-child(3) {
311
- --heading-top: calc(var(--header-height) * 3);
312
- }
313
- .vuuTable-headingCell {
314
- background: var(--table-background);
315
- border-color: var(--salt-separable-tertiary-borderColor);
316
- border-style: solid solid solid none;
317
- border-width: 1px;
318
- color: var(--salt-text-secondary-foreground);
319
- height: var(--vuuTableHeaderHeight);
320
- padding: 0 !important;
321
- position: sticky;
322
- top: var(--heading-top, 0);
323
- z-index: 1;
324
- }
325
- .vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {
326
- border-bottom-color: transparent;
327
- }
328
- .vuuTable-headerCell {
329
- --cell-align: "flex-start";
330
- text-align: left;
331
- background: var(--table-background);
332
- border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);
333
- color: var(--salt-text-secondary-foreground);
334
- cursor: default;
335
- padding: 0 !important;
336
- position: sticky;
337
- top: calc(var(--total-header-height) - var(--header-height));
338
- height: var(--vuuTableHeaderHeight);
339
- z-index: 1;
340
- }
341
- .vuuTable-headerCell-right {
342
- --cell-align: flex-end;
343
- }
344
- .vuuTable-headerCell-inner {
345
- align-items: stretch;
346
- display: flex;
347
- height: 100%;
348
- padding: 0 0 0 3px;
349
- }
350
- .vuuTable-headerCell-inner:has(.vuuFilterIndicator) {
351
- padding-left: 0;
352
- }
353
- .vuuTable-headerCell-label {
354
- align-items: center;
355
- justify-content: var(--cell-align);
1
+ /* src/filter-table/FilterTable.css */
2
+ .vuuFilterTable {
3
+ --vuuFilterBar-flex: 0 0 33px;
356
4
  display: flex;
357
- flex: 1 1 auto;
358
- }
359
- .vuuTable-headerCell-resizing {
360
- --columnResizer-color: var(--salt-color-blue-500);
361
- --columnResizer-height: var(--table-height);
362
- --columnResizer-width: 2px;
363
- }
364
- .vuuTable-headerCell.vuuPinLeft.vuuEndPin:after {
365
- box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.4);
366
- content: "";
367
- position: absolute;
368
- width: 1px;
369
- background-color: transparent;
370
- height: var(--table-height);
371
- top: 0;
372
- right: 0px;
373
- }
374
- .vuuTable-headerCell.vuuPinRight.vuuEndPin:after {
375
- box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.3);
376
- content: "";
377
- position: absolute;
378
- width: 1px;
379
- background-color: transparent;
380
- height: var(--table-height);
381
- top: 0;
382
- left: 0px;
383
- }
384
-
385
- /* src/filter-indicator.css */
386
- .vuuFilterIndicator {
387
- --menu-icon-size: 12px;
388
- --menu-item-icon-color: black;
389
- align-items: center;
390
- cursor: pointer;
391
- display: flex;
392
- flex: 0 0 18px;
393
5
  flex-direction: column;
394
- justify-content: center;
395
- position: relative;
396
- }
397
- .vuuFilterIndicator + .vuuTable-headerCell-inner {
398
- padding-left: 0;
399
- }
400
-
401
- /* ../vuu-filters/src/filter-input/FilterInput.css */
402
- .salt-theme {
403
- --vuuFilterEditor-lineHeight: 28px;
404
- }
405
- .salt-density-high {
406
- --vuuFilterEditor-buttonWidth: 20px;
407
- --vuuFilterEditor-height: 22px;
408
- --vuuFilterEditor-lineHeight: 20px;
409
- }
410
- .vuuFilterInput {
411
- --vuuFilterEditor-background: var(--salt-container-primary-background);
412
- --vuuFilterEditor-color: var(--salt-text-primary-foreground);
413
- --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
414
- --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
415
- --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
416
- --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
417
- --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
418
- --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle);
419
- --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
420
- --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
421
- --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);
422
- --vuuFilterEditor-suggestion-height: 24px;
423
- --vuuFilterEditor-variableColor: blue;
424
- align-items: center;
425
- border-color: var(--salt-container-secondary-borderColor);
426
- border-style: solid none;
427
- border-width: 1px;
428
- box-sizing: border-box;
429
- display: flex;
430
- height: var(--vuuFilterEditor-height, 30px);
431
- }
432
- .vuuFilterInput-Editor {
433
- flex: 1 1 auto;
434
- height: 100%;
435
- }
436
- .vuuFilterInput-FilterButton,
437
- .vuuFilterInput-ClearButton {
438
- --vuu-icon-size: 12px;
439
- --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
440
- }
441
- .vuuIllustration {
442
- --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);
443
- background: var(--salt-container-secondary-background);
444
- color: var(--salt-text-secondary-foreground);
445
- }
446
-
447
- /* ../vuu-filters/src/filter-toolbar/FilterToolbar.css */
448
- .vuuFilterDropdown,
449
- .vuuFilterSwitch {
450
- --saltToolbarField-marginTop: 0;
451
- height: 100%;
452
- }
453
- .vuuFilterDropdown.saltFormField-focused:before {
454
- top: 2px !important;
455
- bottom: 2px !important;
456
- }
457
-
458
- /* src/TableGroupHeaderCell.css */
459
- .vuuTable-groupHeaderCell {
460
- --cell-align: "flex-start";
461
- text-align: left;
462
- background: var(--table-background);
463
- border-right: 1px solid var(--salt-separable-tertiary-borderColor);
464
- border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);
465
- color: var(--salt-text-secondary-foreground);
466
- cursor: default;
467
- padding: 0 !important;
468
- position: sticky;
469
- top: 0;
470
- height: var(--vuuTableHeaderHeight);
471
- z-index: 1;
472
- }
473
- .vuuTable-groupHeaderCell-inner {
474
- display: flex;
475
- height: 100%;
476
- }
477
- .vuuTable-groupHeaderCell-label {
478
- align-items: center;
479
- display: flex;
480
- flex: 0 0 auto;
481
- }
482
- .vuuTable-groupHeaderCell-col {
483
- align-items: center;
484
- background-color: inherit;
485
- display: inline-flex;
486
- flex: 0 1 auto;
487
- height: calc(var(--vuuTableHeaderHeight) - 4px);
488
- justify-content: space-between;
489
- padding-right: 8px;
490
- position: relative;
491
- }
492
- .vuuTable-groupHeaderCell-close {
493
- --vuu-icon-height: 18px;
494
- --vuu-icon-width: 18px;
495
- cursor: pointer;
496
- left: 3px;
497
- }
498
- .vuuTable-groupHeaderCell-col:nth-child(odd) {
499
- background-color: var(--salt-color-gray-50);
500
- }
501
- .vuuTable-groupHeaderCell-col:nth-child(even) {
502
- background-color: var(--salt-color-gray-40);
503
- }
504
- .vuuTable-groupHeaderCell-col:first-child {
505
- clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
506
- padding-left: 3px;
507
- z-index: 1;
508
- }
509
- .vuuTable-groupHeaderCell-col:not(:first-child) {
510
- margin-left: -6px;
511
- padding-left: 12px;
512
- clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
513
- }
514
- .vuuTable-groupHeaderCell-resizing {
515
- --columnResizer-color: var(--salt-color-blue-500);
516
- --columnResizer-height: var(--table-height);
517
- --columnResizer-width: 2px;
518
- }
519
-
520
- /* src/DataTable.css */
521
- .vuuDataTable {
522
- background-color: var(--salt-container-primary-background, inherit);
523
- position: relative;
524
- }
525
- .vuuDataTable-contentContainer {
526
- --table-background: var(--salt-container-primary-background, inherit);
527
- --vuuTable-contentHeight: var(--content-height, "auto");
528
- --vuuTable-contentWidth: var(--content-width, "auto");
529
- --vuuTableHeaderHeight: var(--header-height, 30px);
530
- --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));
531
- --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);
532
- --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);
533
- --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));
534
- background-color: var(--salt-container-primary-background);
535
- height: var(--vuuTable-height);
536
- position: relative;
537
- overflow: auto;
538
- overscroll-behavior: none;
539
- width: var(--vuuTable-width);
540
- }
541
- .vuuDataTable-contentContainer::-webkit-scrollbar {
542
- display: none;
543
- }
544
- .vuuDataTable-scrollbarContainer {
545
- --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));
546
- border-left: solid 1px var(--salt-container-primary-borderColor);
547
- border-top: solid 1px var(--salt-container-primary-borderColor);
548
- overflow: auto;
549
- position: absolute;
550
- height: calc(var(--table-height) - var(--total-header-height) + 1px);
551
- width: calc(var(--table-width) - var(--pinned-width-left) + 1px);
552
- }
553
- .vuuDataTable-scrollContainerHeader {
554
- background: #777;
555
- height: var(--header-height);
556
- position: fixed;
557
- top: 0;
558
- right: 0;
559
- width: var(--vuuTable-scrollbarSize);
560
- }
561
- .vuuDataTable-scrollContainerFooter {
562
- background-color: green;
563
- height: var(--vuuTable-scrollbarSize);
564
- position: fixed;
565
- bottom: 0;
566
- left: 0;
567
- width: var(--pinned-width-left);
568
- }
569
- .vuuDataTable-scrollContent {
570
- position: absolute;
571
- height: var(--content-height);
572
- width: var(--scroll-content-width, var(--content-width));
573
- }
574
- .vuuDataTable-tableContainer {
575
- background-color: var(--table-background);
576
- border-bottom: solid 1px var(--salt-container-primary-borderColor);
577
- height: calc(var(--table-height) - var(--scrollbar-size));
578
- left: 0px;
579
- overflow: hidden;
580
- position: sticky;
581
- top: 0px;
582
- width: calc(var(--table-width) - var(--scrollbar-size));
583
- white-space: nowrap;
584
- }
585
- .vuuDataTable-table {
586
- --vuuTable-rowHeight: var(--row-height);
587
- --vuuTableCell-border-bottomColor: transparent;
588
- --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);
589
- position: absolute;
590
- top: 0;
591
- left: 0;
592
- background: repeating-linear-gradient(to bottom, var(--salt-container-secondary-background), var(--salt-container-secondary-background) 20px, var(--table-background) 20px, var(--table-background) 40px);
593
- border-collapse: separate;
594
- border-spacing: 0;
595
- border-left: 1px solid #ccc;
596
- border: none;
597
- font-size: var(--vuuDataTable-font-size, 10px);
598
- margin: 0;
599
- min-height: 100%;
600
- table-layout: fixed;
601
- width: var(--vuuTable-contentWidth);
602
- }
603
- .vuuDataTable-columnBased {
604
- display: inline-table;
605
- height: var(--vuuTable-height);
606
- position: static;
607
- }
608
- .vuuDataTable-filler {
609
- height: var(--filler-height);
610
- }
611
- :is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
612
- position: sticky;
613
- }
614
- .vuuAlignRight {
615
- text-align: right;
616
- }
617
- th:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
618
- top: 0;
619
- z-index: 20;
620
- }
621
- table:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {
622
- z-index: 10;
623
- }
624
- .vuuDataTable-settings {
625
- height: var(--header-height);
626
- position: absolute;
627
- right: 0;
628
- top: 0;
629
- width: 15px;
630
- }
631
- .vuuDataTable:has(.vuuTable-headerCell-resizing) * {
632
- cursor: col-resize;
633
- }
634
- .saltDraggable-table-column {
635
- background-color: var(--salt-container-primary-background);
636
- overflow: hidden;
637
6
  }
638
7
  /*# sourceMappingURL=index.css.map */
package/index.css.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-datatable/src/TableCell.css", "../../../packages/vuu-datatable/src/TableGroupCell.css", "../../../packages/vuu-datatable/src/TableRow.css", "../../../packages/vuu-datatable/src/ColumnResizer.css", "../../../packages/vuu-datatable/src/SortIndicator.css", "../../../packages/vuu-datatable/src/TableHeaderCell.css", "../../../packages/vuu-datatable/src/filter-indicator.css", "../../../packages/vuu-filters/src/filter-input/FilterInput.css", "../../../packages/vuu-filters/src/filter-toolbar/FilterToolbar.css", "../../../packages/vuu-datatable/src/TableGroupHeaderCell.css", "../../../packages/vuu-datatable/src/DataTable.css"],
4
- "sourcesContent": [".vuuDialog {\n background: var(--salt-container-primary-background);\n border: var(--vuuDialog-border, solid 1px #ccc);\n border-radius: 5px;\n padding: var(--vuuDialog-padding, 0);\n box-shadow: var(--salt-overlayable-shadow, none);\n height: var(--vuuDialog-height, fit-content);\n width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n\n --saltToolbar-background: transparent;\n --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n right: 2px;\n}\n\n\n", ".vuuMenuList {\n --context-menu-color: #161616;\n --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n --context-menu-highlight-bg: #a4d5f4;\n --context-menu-blur-focus-bg: #e0e4e9;\n --menu-item-height: var(--hw-list-item-height, 24px);\n --menu-item-icon-color: black;\n --menu-item-twisty-color: black;\n --menu-item-twisty-content: '';\n --menu-item-twisty-top: 50%;\n --menu-item-twisty-left: auto;\n --menu-item-twisty-right: 0px;\n --menu-icon-size: 12px;\n\n background-clip: padding-box;\n background-color: white;\n border-radius: 4px;\n border: solid 1px rgba(0, 0, 0, 0.15);\n box-shadow: var(--context-menu-shadow);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-typography-fontWeight-semiBold);\n list-style: none;\n margin: 2px 0 0;\n outline: 0;\n padding: 0;\n position: absolute;\n}\n\n.vuuMenuItem {\n align-items: center;\n color: var(--context-menu-color);\n display: flex;\n gap: 6px;\n height: var(--menu-item-height);\n padding: var(--context-menu-padding);\n padding-right: 24px;\n position: relative;\n white-space: nowrap;\n}\n\n.vuuIconContainer {\n display: inline-block;\n flex: 12px 0 0;\n height: var(--menu-icon-size);\n mask-repeat: no-repeat;\n width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n content: var(--menu-item-twisty-content);\n -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n mask: var(--svg-chevron-down) center center/12px 12px;\n mask-repeat: no-repeat;\n background-color: var(--menu-item-twisty-color);\n height: 16px;\n left: var(--menu-item-twisty-left);\n right: var(--menu-item-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--menu-item-twisty-top);\n transition: transform 0.3s;\n width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n background-color: var(--context-menu-highlight-bg);\n cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n left: auto;\n right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n text-decoration: none;\n color: rgb(0, 0, 0);\n background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n clear: both;\n font-weight: normal;\n line-height: 1.5;\n color: rgb(120, 120, 120);\n white-space: nowrap;\n text-decoration: none;\n cursor: default;\n}\n", ".vuuPopup {\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n overflow: visible;\n z-index: 1000;\n}\n\n.vuuPopup {\n position: absolute;\n}\n", ".vuuDataTable {\n --cell-outline-width: 2px;\n user-select: none;\n}\n\n.vuuDataTable-table td {\n --saltEditableLabel-height: 17px;\n --saltInput-height: 17px;\n --saltInput-minHeight: 17px;\n\n border-right: 1px solid var(--vuuTableCell-border-rightColor);\n border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n color: var(--salt-text-primary-foreground);\n cursor: default;\n height: var(--vuuTable-rowHeight);\n line-height: calc(var(--vuuTable-rowHeight) - 1px);\n overflow: hidden;\n padding: 0 5px;\n}\n\n\n.vuuDataTable th:focus,\n.vuuDataTable td:focus {\n outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));\n outline-offset: calc(var(--cell-outline-width) * -1);\n /** This is to achieve a white background to outline dashes */\n box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n border-bottom: none;\n}\n\n.vuuDataTable th:focus .vuuTable-headerCell-inner{\n /** This is to achieve a white background to outline dashes */\n padding-bottom: var(--cell-outline-width);\n}\n\n.vuuDataTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n --columnResizer-color: transparent;\n}\n\n\n.vuuDataTable td:focus {\n /** This is to achieve a white background to outline dashes */\n border-right: none;\n padding-bottom: 1px;\n}\n\n\ntd[data-editable=\"true\"] {\n --salt-text-fontSize: 10px;\n --vuu-icon-size: 5px;\n position: relative;\n}\n\ntd[data-editable=\"true\"]:after {\n top: 0;\n content: \"\";\n background-color: var(--salt-text-secondary-foreground, black);\n left: 0;\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n transform: rotate(180deg);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n }\n \ntd:focus[data-editable],\ntd:focus-within[data-editable],\ntd:has(.saltEditableLabel-editing) {\n outline: solid var(--salt-color-blue-400) 1px;\n background-color: white;\n outline-offset: -1px;\n}\n\ntd:focus[data-editable=\"true\"]:after,\ntd:has(.saltEditableLabel):after {\n /* background-color: black; */\n background-color: var(--salt-color-blue-400);\n left: 1px;\n top: 1px;\n}\n", ".vuuTableGroupCell {\n --spacer-width: 20px;\n --toggle-icon-transform: var(--row-toggle-icon-transform, none);\n --vuu-icon-width: 18px;\n display: flex;\n align-items: center;\n}\n\n.vuuTableGroupCell-spacer {\n height: 100%;\n position: relative;\n width: var(--spacer-width);\n}\n\n.vuuTableGroupCell-spacer:after {\n background: var(--salt-container-primary-borderColor);\n content: '';\n position: absolute;\n top:0;\n bottom: -1px;\n /* left: calc(var(--spacer-width / 2)); */\n left: 9px;\n width: 1px;\n}\n\n.vuuTableGroupCell-toggle {\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n}\n\n\n/* .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-plus-box);\n}\n\n.vuuDataTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n --vuu-icon-svg: var(--svg-minus-box);\n} */\n", ".vuuDataTableRow-even {\n --row-background: var(--salt-container-secondary-background);\n }\n \n .vuuDataTableRow:not(.vuuDataTableRow-even) {\n --row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background));\n }\n\n .vuuDataTableRow {\n background: var(--row-background);\n }\n\n .vuuDataTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n background-color: var(--row-background);\n }\n \n .vuuDataTableRow-expanded {\n --row-toggle-icon-transform: rotate(90deg);\n }\n \n .vuuDataTableRow[aria-selected] {\n background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }\n\n /* .vuuDataTableRow:not([aria-selected]):has(+ [aria-selected]) {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n } */\n\n .vuuDataTableRow-preSelected {\n --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n }", ".vuuColumnResizer {\n cursor: col-resize;\n margin-left: auto;\n width: 4px;\n}\n\n.vuuColumnResizer:after {\n content: '';\n position: absolute;\n width: var(--columnResizer-width, 1px);\n top:0;\n bottom:0;\n right: 0;\n background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n height: var(--columnResizer-height, 100%);\n}", ".vuuSortIndicator {\n --menu-icon-size: 18px;\n --menu-item-icon-color: black;\n display: flex;\n flex-direction: column;\n position: relative;\n width: 18px;\n}\n\n.vuuSortPosition {\n font-size: 10px;\n line-height: 10px;\n text-align: center;\n}\n\n", "/* We support multi level headings up to a maximum of 4 heading levels */\n.vuuTable-heading:nth-child(2) {\n --heading-top: calc(var(--header-height));\n}\n.vuuTable-heading:nth-child(3) {\n --heading-top: calc(var(--header-height) * 2);\n}\n.vuuTable-heading:nth-child(3) {\n --heading-top: calc(var(--header-height) * 3);\n}\n\n.vuuTable-headingCell {\n background: var(--table-background);\n border-color: var(--salt-separable-tertiary-borderColor);\n border-style: solid solid solid none;\n border-width: 1px;\n color: var(--salt-text-secondary-foreground);\n height: var(--vuuTableHeaderHeight);\n padding: 0 !important;\n position: sticky;\n top: var(--heading-top, 0);\n z-index: 1;\n}\n\n.vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {\n border-bottom-color: transparent;\n}\n\n.vuuTable-headerCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--table-background);\n /* border-right: var(--header-border-rightWidth, 1px) solid var(--header-border-rightColor, var(--salt-separable-tertiary-borderColor)); */\n border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n padding: 0 !important;\n position: sticky;\n top: calc(var(--total-header-height) - var(--header-height));\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n }\n\n .vuuTable-headerCell-right {\n --cell-align: flex-end;\n }\n \n .vuuTable-headerCell-inner {\n align-items: stretch;\n display: flex;\n height: 100%;\n padding: 0 0 0 3px;\n }\n\n .vuuTable-headerCell-inner:has(.vuuFilterIndicator){\n padding-left: 0;\n }\n\n .vuuTable-headerCell-label {\n align-items: center;\n justify-content: var(--cell-align);\n display: flex;\n flex: 1 1 auto;\n }\n\n .vuuTable-headerCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n\n .vuuTable-headerCell.vuuPinLeft.vuuEndPin:after {\n box-shadow: 2px 0px 5px rgba(0,0,0,0.4);\n content: \"\";\n position: absolute;\n width: 1px;\n background-color: transparent;\n height: var(--table-height);\n top:0;\n right: 0px;\n }\n\n .vuuTable-headerCell.vuuPinRight.vuuEndPin:after {\n box-shadow: -2px 0px 5px rgba(0,0,0,0.3);\n content: \"\";\n position: absolute;\n width: 1px;\n background-color: transparent;\n height: var(--table-height);\n top:0;\n left: 0px;\n }", ".vuuFilterIndicator {\n --menu-icon-size: 12px;\n --menu-item-icon-color: black;\n align-items: center;\n cursor: pointer;\n display: flex;\n flex: 0 0 18px;\n flex-direction: column;\n justify-content: center;\n position: relative;\n}\n\n.vuuFilterIndicator + .vuuTable-headerCell-inner {\n padding-left: 0;\n}\n", "\n.salt-theme {\n --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n --vuuFilterEditor-buttonWidth: 20px;\n --vuuFilterEditor-height: 22px;\n --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n --vuuFilterEditor-background: var(--salt-container-primary-background);\n --vuuFilterEditor-color: var(--salt-text-primary-foreground);\n --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);\n --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n --vuuFilterEditor-suggestion-height: 24px;\n --vuuFilterEditor-variableColor: blue;\n\n align-items: center;\n border-color: var(--salt-container-secondary-borderColor);\n border-style: solid none;\n border-width: 1px;\n box-sizing: border-box;\n display: flex;\n height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n flex: 1 1 auto;\n height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n --vuu-icon-size: 12px;\n --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n background: var(--salt-container-secondary-background);\n color: var(--salt-text-secondary-foreground);\n}\n\n\n", ".vuuFilterDropdown,\n.vuuFilterSwitch {\n --saltToolbarField-marginTop: 0;\n\n height: 100%;\n}\n\n.vuuFilterDropdown.saltFormField-focused:before {\n top: 2px !important;\n bottom: 2px !important;\n}", ".vuuTable-groupHeaderCell {\n --cell-align: 'flex-start';\n text-align: left;\n background: var(--table-background);\n border-right: 1px solid var(--salt-separable-tertiary-borderColor);\n border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n color: var(--salt-text-secondary-foreground);\n cursor: default;\n padding: 0 !important;\n position: sticky;\n top: 0;\n height: var(--vuuTableHeaderHeight);\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n }\n\n\n .vuuTable-groupHeaderCell-inner {\n display: flex;\n height: 100%;\n }\n\n .vuuTable-groupHeaderCell-label {\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n }\n\n .vuuTable-groupHeaderCell-col {\n align-items: center;\n background-color: inherit;\n display: inline-flex;\n flex: 0 1 auto;\n height: calc(var(--vuuTableHeaderHeight) - 4px);\n justify-content: space-between;\n padding-right: 8px;\n position: relative;\n }\n\n .vuuTable-groupHeaderCell-close {\n --vuu-icon-height: 18px;\n --vuu-icon-width: 18px;\n cursor: pointer;\n left: 3px;\n }\n\n .vuuTable-groupHeaderCell-col:nth-child(odd) {\n background-color: var(--salt-color-gray-50);\n }\n .vuuTable-groupHeaderCell-col:nth-child(even) {\n background-color: var(--salt-color-gray-40);\n }\n\n .vuuTable-groupHeaderCell-col:first-child {\n clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);\n padding-left: 3px;\n z-index: 1;\n }\n \n .vuuTable-groupHeaderCell-col:not(:first-child) {\n margin-left: -6px;\n padding-left: 12px;\n clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);\n }\n \n .vuuTable-groupHeaderCell-resizing {\n --columnResizer-color: var(--salt-color-blue-500);\n --columnResizer-height: var(--table-height);\n --columnResizer-width: 2px;\n }\n", "\n.vuuDataTable {\n background-color: var(--salt-container-primary-background, inherit);\n position: relative;\n}\n.vuuDataTable-contentContainer {\n \n --table-background: var(--salt-container-primary-background, inherit);\n\n --vuuTable-contentHeight: var(--content-height, 'auto');\n --vuuTable-contentWidth: var(--content-width, 'auto');\n --vuuTableHeaderHeight: var(--header-height, 30px);\n --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));\n --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);\n --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);\n --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));\n\n background-color: var(--salt-container-primary-background);\n\n height: var(--vuuTable-height);\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: var(--vuuTable-width);\n}\n\n.vuuDataTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuDataTable-scrollbarContainer {\n --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));\n border-left: solid 1px var(--salt-container-primary-borderColor);\n border-top: solid 1px var(--salt-container-primary-borderColor);\n overflow: auto;\n position: absolute;\n height: calc(var(--table-height) - var(--total-header-height) + 1px);\n width: calc(var(--table-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuDataTable-scrollContainerHeader {\n background: #777;\n height: var(--header-height);\n position: fixed;\n top:0;\n right:0;\n width: var(--vuuTable-scrollbarSize);\n}\n.vuuDataTable-scrollContainerFooter {\n background-color: green;\n height: var(--vuuTable-scrollbarSize);\n position: fixed;\n bottom:0;\n left:0;\n width: var(--pinned-width-left);\n\n}\n\n.vuuDataTable-scrollContent {\n position: absolute;\n height: var(--content-height);\n width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuDataTable-tableContainer {\n background-color: var(--table-background);\n border-bottom: solid 1px var(--salt-container-primary-borderColor);\n height: calc(var(--table-height) - var(--scrollbar-size));\n left: 0px;\n overflow: hidden;\n position: sticky;\n top: 0px;\n width: calc(var(--table-width) - var(--scrollbar-size));\n white-space: nowrap;\n\n}\n\n\n.vuuDataTable-table {\n --vuuTable-rowHeight: var(--row-height);\n --vuuTableCell-border-bottomColor: transparent;\n --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n\n position: absolute;\n top: 0;\n left: 0;\n\n background: repeating-linear-gradient(\n to bottom, \n var(--salt-container-secondary-background), \n var(--salt-container-secondary-background) 20px, \n var(--table-background) 20px, \n var(--table-background) 40px);\n border-collapse: separate;\n border-spacing: 0;\n border-left: 1px solid #ccc;\n border: none;\n font-size: var(--vuuDataTable-font-size, 10px);\n margin: 0;\n min-height: 100%;\n table-layout: fixed;\n width: var(--vuuTable-contentWidth);\n}\n\n.vuuDataTable-columnBased {\n display: inline-table;\n height: var(--vuuTable-height);\n position: static;\n}\n\n/* .vuuDataTable-columnBased .vuuDataTable-headerCell{\n background-color: darkmagenta;\n} */\n\n.vuuDataTable-filler {\n height: var(--filler-height);\n}\n\n:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n position: sticky;\n}\n\n.vuuAlignRight {\n text-align: right;\n}\n\nth:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n top:0;\n z-index: 20;\n}\n\ntable:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n z-index: 10;\n}\n\n/* .vuuDataTable-row {\n transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuDataTable-settings {\n height: var(--header-height);\n position: absolute;\n right: 0;\n top:0;\n width: 15px;\n}\n\n.vuuDataTable:has(.vuuTable-headerCell-resizing) * {\n cursor: col-resize;\n}\n\n.saltDraggable-table-column {\n background-color: var(--salt-container-primary-background);\n overflow: hidden;\n}\n\n"],
5
- "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACxBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACzHF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AAAA;AAEI;AACA;AAEA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AAAA;AAIJ;AAEI;AACA;AAAA;AAIJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAAA;AAAA;AAGI;AACA;AACA;AAAA;AAGJ;AAAA;AAGI;AACA;AACA;AAAA;;;ACjFJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;;;AC3BJ;AACI;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAOF;AACE;AAAA;;;AC9BJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACdJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACXF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACE;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3FJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACI;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AAAA;AAEI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;;;ACjDJ;AAAA;AAEI;AAEA;AAAA;AAGJ;AACI;AACA;AAAA;;;ACTJ;AACE;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAIF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAAA;;;ACnEJ;AACE;AACA;AAAA;AAEF;AAEE;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAKF;AACE;AACA;AACA;AAEA;AACA;AACA;AAEA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;",
3
+ "sources": ["../../../packages/vuu-datatable/src/filter-table/FilterTable.css"],
4
+ "sourcesContent": [".vuuFilterTable {\n --vuuFilterBar-flex: 0 0 33px;\n display: flex;\n flex-direction: column;\n}"],
5
+ "mappings": ";AAAA;AACI;AACA;AACA;AAAA;",
6
6
  "names": []
7
7
  }