wunderbaum 0.3.5 → 0.4.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.
Files changed (20) hide show
  1. package/dist/wunderbaum.css +380 -290
  2. package/dist/wunderbaum.css.map +1 -0
  3. package/dist/wunderbaum.d.ts +119 -65
  4. package/dist/wunderbaum.esm.js +583 -164
  5. package/dist/wunderbaum.esm.min.js +23 -23
  6. package/dist/wunderbaum.esm.min.js.map +1 -1
  7. package/dist/wunderbaum.umd.js +583 -164
  8. package/dist/wunderbaum.umd.min.js +31 -30
  9. package/dist/wunderbaum.umd.min.js.map +1 -1
  10. package/package.json +10 -9
  11. package/src/common.ts +2 -2
  12. package/src/types.ts +31 -10
  13. package/src/wb_ext_dnd.ts +62 -21
  14. package/src/wb_ext_edit.ts +2 -2
  15. package/src/wb_ext_filter.ts +1 -2
  16. package/src/wb_ext_keynav.ts +4 -4
  17. package/src/wb_node.ts +361 -82
  18. package/src/wb_options.ts +11 -4
  19. package/src/wunderbaum.scss +16 -12
  20. package/src/wunderbaum.ts +127 -52
package/dist/wunderbaum.css CHANGED
@@ -1,7 +1,8 @@
1
+ @charset "UTF-8";
1
2
  /*!
2
3
  * Wunderbaum style sheet (generated from wunderbaum.scss)
3
4
  * Copyright (c) 2021-2023, Martin Wendt. Released under the MIT license.
4
- * v0.3.5, Mon, 19 Jun 2023 06:20:59 GMT (https://github.com/mar10/wunderbaum)
5
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
5
6
  */
6
7
  :root {
7
8
  --wb-font-stack: Helvetica, sans-serif;
@@ -45,10 +46,12 @@
45
46
  --wb-icon-width: 16px;
46
47
  --wb-icon-padding-y: 2px;
47
48
  --wb-icon-padding-x: 2px;
48
- --wb-header-height: 22px; }
49
+ --wb-header-height: 22px;
50
+ }
49
51
 
50
52
  div.wunderbaum * {
51
- box-sizing: border-box; }
53
+ box-sizing: border-box;
54
+ }
52
55
 
53
56
  div.wunderbaum {
54
57
  height: 100%;
@@ -73,336 +76,423 @@ div.wunderbaum {
73
76
  /* Colorize indentation levels. */
74
77
  /* Fade out expanders, when container is not hovered or active */
75
78
  /* Skeleton */
76
- /* Auto-hide checkboxes unless selected or hovered */ }
77
- div.wunderbaum:focus, div.wunderbaum:focus-within {
78
- border-color: var(--wb-focus-border-color); }
79
- div.wunderbaum.wb-disabled {
80
- opacity: 0.7;
81
- pointer-events: none; }
82
- div.wunderbaum div.wb-list-container {
83
- position: relative;
84
- min-height: 4px; }
85
- div.wunderbaum div.wb-header {
86
- position: sticky;
87
- top: 0;
88
- z-index: 2; }
89
- div.wunderbaum div.wb-header,
90
- div.wunderbaum div.wb-list-container {
91
- overflow: unset; }
92
- div.wunderbaum div.wb-row {
93
- position: absolute;
94
- width: 100%;
95
- height: var(--wb-row-outer-height);
96
- line-height: var(--wb-row-outer-height);
97
- border: 1px solid transparent; }
98
- div.wunderbaum.wb-fixed-col {
99
- /* Sticky firdt column (header and nodes) */ }
100
- div.wunderbaum.wb-fixed-col span.wb-col:first-of-type {
101
- position: sticky;
102
- left: 0;
103
- z-index: 1;
104
- background-color: var(--wb-background-color); }
105
- div.wunderbaum.wb-fixed-col div.wb-header span.wb-col:first-of-type {
106
- background-color: var(--wb-header-color); }
107
- div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
108
- div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
109
- background-color: var(--wb-active-color); }
110
- div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active:hover span.wb-col:first-of-type,
111
- div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected:hover span.wb-col:first-of-type {
112
- background-color: var(--wb-active-hover-color); }
113
- div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row:hover span.wb-col:first-of-type {
114
- background-color: var(--wb-hover-color); }
115
- div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
116
- div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type,
117
- div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
118
- background-color: var(--wb-active-color-grayscale);
119
- border-color: var(--wb-active-border-color-grayscale); }
120
- div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type,
121
- div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type,
122
- div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type {
123
- background-color: var(--wb-active-hover-color-grayscale); }
124
- div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected {
125
- background-color: var(--wb-active-color-grayscale);
126
- border-color: var(--wb-active-border-color-grayscale); }
127
- div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected:hover {
128
- background-color: var(--wb-active-hover-color-grayscale); }
129
- div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
130
- background-color: var(--wb-alternate-row-color); }
131
- div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
132
- background-color: var(--wb-alternate-row-color-hover); }
133
- div.wunderbaum div.wb-node-list div.wb-row:hover {
134
- background-color: var(--wb-hover-color); }
135
- div.wunderbaum div.wb-node-list div.wb-row.wb-active, div.wunderbaum div.wb-node-list div.wb-row.wb-selected {
136
- background-color: var(--wb-active-color); }
137
- div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover {
138
- background-color: var(--wb-active-hover-color); }
139
- div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active) {
140
- border-style: dotted;
141
- border-color: var(--wb-active-border-color); }
142
- div.wunderbaum div.wb-node-list div.wb-row.wb-active {
143
- border-style: solid;
144
- border-color: var(--wb-active-border-color); }
145
- div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover {
146
- border-color: var(--wb-active-hover-border-color); }
147
- div.wunderbaum div.wb-node-list div.wb-row.wb-loading {
148
- font-style: italic; }
149
- div.wunderbaum div.wb-node-list div.wb-row.wb-busy,
150
- div.wunderbaum div.wb-node-list div.wb-row i.wb-busy,
151
- div.wunderbaum div.wb-node-list div.wb-row .wb-col.wb-busy {
152
- font-style: italic;
153
- background: repeating-linear-gradient(45deg, transparent, transparent 3.88px, #dedede 3.88px, #dedede 7.78px);
154
- animation: wb-busy-animation 2s linear infinite; }
155
- div.wunderbaum div.wb-node-list div.wb-row.wb-error, div.wunderbaum div.wb-node-list div.wb-row.wb-status-error {
156
- color: var(--wb-error-color); }
157
- div.wunderbaum div.wb-header {
158
- position: sticky;
159
- height: var(--wb-header-height);
160
- border-bottom: 1px solid var(--wb-border-color);
161
- padding: 0;
162
- background-color: var(--wb-header-color); }
163
- div.wunderbaum div.wb-header span.wb-col {
164
- font-weight: bold;
165
- overflow: visible; }
166
- div.wunderbaum div.wb-header span.wb-col-title {
167
- width: 100%;
168
- overflow: hidden;
169
- white-space: nowrap;
170
- text-overflow: ellipsis; }
171
- div.wunderbaum div.wb-header span.wb-col-resizer {
172
- position: absolute;
173
- top: 0;
174
- right: -1px;
175
- width: 3px;
176
- border: none;
177
- border-right: 2px solid var(--wb-border-color);
178
- height: 100%;
179
- cursor: col-resize; }
180
- div.wunderbaum span.wb-col {
181
- position: absolute;
182
- display: inline-block;
183
- overflow: hidden;
184
- height: var(--wb-row-inner-height);
185
- line-height: var(--wb-row-inner-height);
186
- padding: 0 2px;
187
- border-right: 1px solid #dedede;
188
- white-space: nowrap; }
189
- div.wunderbaum span.wb-col:last-of-type {
190
- border-right: none; }
191
- div.wunderbaum span.wb-node {
192
- user-select: none;
193
- /* Fix Bootstrap Icon alignment */ }
194
- div.wunderbaum span.wb-node i.wb-checkbox,
195
- div.wunderbaum span.wb-node i.wb-expander,
196
- div.wunderbaum span.wb-node i.wb-icon,
197
- div.wunderbaum span.wb-node i.wb-indent {
198
- height: var(--wb-icon-outer-height);
199
- width: var(--wb-icon-outer-width);
200
- padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
201
- display: inline-block; }
202
- div.wunderbaum span.wb-node i.bi::before {
203
- vertical-align: baseline; }
204
- div.wunderbaum span.wb-node img.wb-icon {
205
- width: var(--wb-icon-width);
206
- height: var(--wb-icon-height);
207
- padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x); }
208
- div.wunderbaum span.wb-node i.wb-indent::before {
209
- content: "\00a0"; }
210
- div.wunderbaum span.wb-node i.wb-expander.wb-spin,
211
- div.wunderbaum span.wb-node i.wb-icon.wb-spin {
212
- height: unset;
213
- width: unset;
214
- padding: 0 3px;
215
- animation: wb-spin-animation 2s linear infinite; }
216
- div.wunderbaum span.wb-node span.wb-title {
217
- min-width: 1em;
218
- vertical-align: top;
219
- overflow-x: hidden;
220
- display: inline-block;
221
- white-space: nowrap;
222
- text-overflow: ellipsis; }
223
- div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover {
224
- background-color: var(--wb-active-header-column-color); }
225
- div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active {
226
- background-color: var(--wb-active-hover-color); }
227
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row {
228
- border-bottom-color: var(--wb-grid-color); }
229
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected) {
230
- background-color: var(--wb-hover-color); }
231
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active {
232
- border-bottom-color: var(--wb-active-border-color); }
233
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col {
234
- border-right: 1px solid #dedede; }
235
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,
236
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="color"],
237
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="date"],
238
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="datetime"],
239
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="datetime-local"],
240
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="email"],
241
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="month"],
242
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="number"],
243
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="password"],
244
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="search"],
245
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="tel"],
246
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="text"],
247
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="time"],
248
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="url"],
249
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type="week"],
250
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select {
251
- width: 100%;
252
- max-height: var(--wb-row-inner-height);
253
- border: none; }
254
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input:focus,
255
- div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select:focus {
256
- border: 1px dashed #70c0e7; }
257
- div.wunderbaum.wb-grid.wb-cell-mode div.wb-row:not(.wb-colspan).wb-active span.wb-col.wb-active {
258
- background-color: var(--wb-active-cell-color-grayscale); }
259
- div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active {
260
- background-color: var(--wb-active-column-color); }
261
- div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active {
262
- background-color: var(--wb-active-column-color); }
263
- div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active {
264
- background-color: var(--wb-active-cell-color); }
265
- div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
266
- background-color: var(--wb-alternate-row-color); }
267
- div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
268
- background-color: var(--wb-alternate-row-color-hover); }
269
- div.wunderbaum.wb-grid:not(:focus-within) div.wb-node-list div.wb-row, div.wunderbaum.wb-grid:not(:focus) div.wb-node-list div.wb-row {
270
- border-bottom-color: var(--wb-grid-color-grayscale); }
271
- div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row {
272
- color: var(--wb-filter-dim-color); }
273
- div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-submatch, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-submatch {
274
- color: var(--wb-filter-submatch-color); }
275
- div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-match, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-match {
276
- color: var(--wb-node-text-color); }
277
- div.wunderbaum div.wb-row.wb-drag-source {
278
- opacity: 0.5; }
279
- div.wunderbaum div.wb-row.wb-drag-source .wb-node {
280
- background-color: var(--wb-drop-source-color); }
281
- div.wunderbaum div.wb-row.wb-drop-target {
282
- overflow: visible; }
283
- div.wunderbaum div.wb-row.wb-drop-target .wb-node {
284
- background-color: var(--wb-drop-target-color);
285
- overflow: visible; }
286
- div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon {
287
- position: relative;
288
- overflow: visible; }
289
- div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon::after {
290
- position: absolute;
291
- z-index: 1000;
292
- content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxnuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAALM9X5QAAAAudFJOU////////////////////////////////////////////////////////////wCCj3NVAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAqUlEQVQoU6WQ2w6CMAxA54agsCHq1HlFBREv/f/fs1tHAoaoiedlbXrWtGXwhV8FNqAXuAi4DwkShmE0cgGIcSwCCgkSkrAxpEonot0DhQxJptFsbnOpdNdgsFh6VtYwyqzTmG+oijDY7hr22E4qY7QybeGQe46nsxP0Wwc3Q1GWl+qKec8MlqKubxX+xzV7tkDuD1+3d+heigT2zGx/hCMUeUj4wL8CwAsW1kqCTugMCwAAAABJRU5ErkJggg==);
293
- left: 0;
294
- top: 3px; }
295
- div.wunderbaum div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after,
296
- div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
297
- content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAMAAACROYkbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNUExURe/v9/f39+//7+f35+f/79bW5wgIawwYd97e55Tnpc731rjA2d7350LOY1LWa7Xvvf///wAQcyAze97e773vxgAAAHuczgA5pQBCpdb33rXvxu//9whjxgBaxlKU1oOz5ABz3gB73tbn99bW1rXe/wCM9xiU997v/97e3gCc/xil/9bv/wic/+/3/wAAAParqS4AAAAvdFJOU/////////////////////////////////////////////////////////////8AWqU49wAAAAlwSFlzAAAOwwAADsMBx2+oZAAAALlJREFUOE/FktsSgiAQhglMS8WstKLzQTM77Ps/XguL16I208cFyzB8/LPAYCC/ErARzcCFx23pBgnGfjAxBYhpKDwq3SBB5DeGWCYz0SUDClIkmgeLpV7HMiNDbrbbYbBaWzbaoKTaJiHfQe5oYLA/NBwxTiyVyqTSghYwox4MTmfL5XozgqxjAtODoizv1QPXPXqgKer6WeH9+Iw9XgF5ve15/Q+6/SQSsE+q8yMcocoREgzg3wKAL4vrpBIKREShAAAAAElFTkSuQmCC);
298
- left: 0;
299
- top: -8px; }
300
- div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
301
- top: 14px; }
302
- div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 1),
303
- div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 1) {
304
- background: #ffffc9; }
305
- div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 2),
306
- div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 2) {
307
- background: #daffda; }
308
- div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 3),
309
- div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 3) {
310
- background: #ffd9fe; }
311
- div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n + 4),
312
- div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n + 4) {
313
- background: #ccfafa; }
314
- div.wunderbaum.wb-fade-expander i.wb-expander {
315
- transition: color 1.5s;
316
- color: rgba(86, 83, 76, 0); }
317
- div.wunderbaum.wb-fade-expander div.wb-row.wb-loading i.wb-expander,
318
- div.wunderbaum.wb-fade-expander:hover i.wb-expander,
319
- div.wunderbaum.wb-fade-expander:focus i.wb-expander,
320
- div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,
321
- div.wunderbaum.wb-fade-expander [class*="wb-statusnode-"] i.wb-expander {
322
- transition: color 0.6s;
323
- color: var(--wb-node-text-color); }
324
- div.wunderbaum div.wb-row.wb-skeleton span.wb-title,
325
- div.wunderbaum div.wb-row.wb-skeleton i.wb-icon {
326
- animation: wb-skeleton-animation 1s linear infinite alternate;
327
- border-radius: 0.25em;
328
- color: transparent;
329
- opacity: 0.7; }
330
- div.wunderbaum.wb-checkbox-auto-hide i.wb-checkbox {
331
- visibility: hidden; }
332
- div.wunderbaum.wb-checkbox-auto-hide .wb-row:hover i.wb-checkbox,
333
- div.wunderbaum.wb-checkbox-auto-hide .wb-row.wb-selected i.wb-checkbox {
334
- visibility: unset; }
335
- div.wunderbaum.wb-checkbox-auto-hide:focus .wb-row.wb-active i.wb-checkbox, div.wunderbaum.wb-checkbox-auto-hide:focus-within .wb-row.wb-active i.wb-checkbox {
336
- visibility: unset; }
79
+ /* Auto-hide checkboxes unless selected or hovered */
80
+ }
81
+ div.wunderbaum:focus, div.wunderbaum:focus-within {
82
+ border-color: var(--wb-focus-border-color);
83
+ }
84
+ div.wunderbaum.wb-disabled {
85
+ opacity: 0.7;
86
+ pointer-events: none;
87
+ }
88
+ div.wunderbaum div.wb-list-container {
89
+ position: relative;
90
+ min-height: 4px;
91
+ }
92
+ div.wunderbaum div.wb-header {
93
+ position: sticky;
94
+ top: 0;
95
+ z-index: 2;
96
+ }
97
+ div.wunderbaum div.wb-header,
98
+ div.wunderbaum div.wb-list-container {
99
+ overflow: unset;
100
+ }
101
+ div.wunderbaum div.wb-row {
102
+ position: absolute;
103
+ width: 100%;
104
+ height: var(--wb-row-outer-height);
105
+ line-height: var(--wb-row-outer-height);
106
+ border: 1px solid transparent;
107
+ }
108
+ div.wunderbaum.wb-fixed-col span.wb-col:first-of-type {
109
+ position: sticky;
110
+ left: 0;
111
+ z-index: 1;
112
+ background-color: var(--wb-background-color);
113
+ }
114
+ div.wunderbaum.wb-fixed-col div.wb-header span.wb-col:first-of-type {
115
+ background-color: var(--wb-header-color);
116
+ }
117
+ div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
118
+ background-color: var(--wb-active-color);
119
+ }
120
+ div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-active:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row.wb-selected:hover span.wb-col:first-of-type {
121
+ background-color: var(--wb-active-hover-color);
122
+ }
123
+ div.wunderbaum.wb-fixed-col div.wb-node-list div.wb-row:hover span.wb-col:first-of-type {
124
+ background-color: var(--wb-hover-color);
125
+ }
126
+ div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type {
127
+ background-color: var(--wb-active-color-grayscale);
128
+ border-color: var(--wb-active-border-color-grayscale);
129
+ }
130
+ div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus-within) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-active span.wb-col:first-of-type:hover span.wb-col:first-of-type, div.wunderbaum.wb-fixed-col:not(:focus) div.wb-node-list div.wb-row.wb-selected span.wb-col:first-of-type:hover span.wb-col:first-of-type {
131
+ background-color: var(--wb-active-hover-color-grayscale);
132
+ }
133
+ div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected {
134
+ background-color: var(--wb-active-color-grayscale);
135
+ border-color: var(--wb-active-border-color-grayscale);
136
+ }
137
+ div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus-within) div.wb-node-list div.wb-row.wb-selected:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum:not(:focus) div.wb-node-list div.wb-row.wb-selected:hover {
138
+ background-color: var(--wb-active-hover-color-grayscale);
139
+ }
140
+ div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
141
+ background-color: var(--wb-alternate-row-color);
142
+ }
143
+ div.wunderbaum.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
144
+ background-color: var(--wb-alternate-row-color-hover);
145
+ }
146
+ div.wunderbaum div.wb-node-list div.wb-row:hover {
147
+ background-color: var(--wb-hover-color);
148
+ }
149
+ div.wunderbaum div.wb-node-list div.wb-row.wb-active, div.wunderbaum div.wb-node-list div.wb-row.wb-selected {
150
+ background-color: var(--wb-active-color);
151
+ }
152
+ div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover, div.wunderbaum div.wb-node-list div.wb-row.wb-selected:hover {
153
+ background-color: var(--wb-active-hover-color);
154
+ }
155
+ div.wunderbaum div.wb-node-list div.wb-row.wb-focus:not(.wb-active) {
156
+ border-style: dotted;
157
+ border-color: var(--wb-active-border-color);
158
+ }
159
+ div.wunderbaum div.wb-node-list div.wb-row.wb-active {
160
+ border-style: solid;
161
+ border-color: var(--wb-active-border-color);
162
+ }
163
+ div.wunderbaum div.wb-node-list div.wb-row.wb-active:hover {
164
+ border-color: var(--wb-active-hover-border-color);
165
+ }
166
+ div.wunderbaum div.wb-node-list div.wb-row.wb-loading {
167
+ font-style: italic;
168
+ }
169
+ div.wunderbaum div.wb-node-list div.wb-row.wb-busy,
170
+ div.wunderbaum div.wb-node-list div.wb-row i.wb-busy,
171
+ div.wunderbaum div.wb-node-list div.wb-row .wb-col.wb-busy {
172
+ font-style: italic;
173
+ background: repeating-linear-gradient(45deg, transparent, transparent 3.88px, var(--wb-grid-color) 3.88px, var(--wb-grid-color) 7.78px);
174
+ animation: wb-busy-animation 2s linear infinite;
175
+ }
176
+ div.wunderbaum div.wb-node-list div.wb-row.wb-error, div.wunderbaum div.wb-node-list div.wb-row.wb-status-error {
177
+ color: var(--wb-error-color);
178
+ }
179
+ div.wunderbaum div.wb-header {
180
+ position: sticky;
181
+ height: var(--wb-header-height);
182
+ border-bottom: 1px solid var(--wb-border-color);
183
+ padding: 0;
184
+ background-color: var(--wb-header-color);
185
+ }
186
+ div.wunderbaum div.wb-header span.wb-col {
187
+ font-weight: bold;
188
+ overflow: visible;
189
+ }
190
+ div.wunderbaum div.wb-header span.wb-col-title {
191
+ width: 100%;
192
+ overflow: hidden;
193
+ white-space: nowrap;
194
+ text-overflow: ellipsis;
195
+ }
196
+ div.wunderbaum div.wb-header span.wb-col-resizer {
197
+ position: absolute;
198
+ top: 0;
199
+ right: -1px;
200
+ width: 3px;
201
+ border: none;
202
+ border-right: 2px solid var(--wb-border-color);
203
+ height: 100%;
204
+ cursor: col-resize;
205
+ }
206
+ div.wunderbaum span.wb-col {
207
+ position: absolute;
208
+ display: inline-block;
209
+ overflow: hidden;
210
+ height: var(--wb-row-inner-height);
211
+ line-height: var(--wb-row-inner-height);
212
+ padding: 0 val(--wb-col-padding-x);
213
+ border-right: 1px solid var(--wb-grid-color);
214
+ white-space: nowrap;
215
+ }
216
+ div.wunderbaum span.wb-col:last-of-type {
217
+ border-right: none;
218
+ }
219
+ div.wunderbaum span.wb-node {
220
+ user-select: none;
221
+ /* Fix Bootstrap Icon alignment */
222
+ }
223
+ div.wunderbaum span.wb-node i.wb-checkbox,
224
+ div.wunderbaum span.wb-node i.wb-expander,
225
+ div.wunderbaum span.wb-node i.wb-icon,
226
+ div.wunderbaum span.wb-node i.wb-indent {
227
+ height: var(--wb-icon-outer-height);
228
+ width: var(--wb-icon-outer-width);
229
+ padding: var(--wb-icon-padding) var(--wb-icon-padding-x);
230
+ display: inline-block;
231
+ }
232
+ div.wunderbaum span.wb-node i.bi::before {
233
+ vertical-align: baseline;
234
+ }
235
+ div.wunderbaum span.wb-node img.wb-icon {
236
+ width: var(--wb-icon-width);
237
+ height: var(--wb-icon-height);
238
+ padding: var(--wb-icon-padding-y) var(--wb-icon-padding-x);
239
+ }
240
+ div.wunderbaum span.wb-node i.wb-indent::before {
241
+ content: " ";
242
+ }
243
+ div.wunderbaum span.wb-node i.wb-expander.wb-spin,
244
+ div.wunderbaum span.wb-node i.wb-icon.wb-spin {
245
+ height: unset;
246
+ width: unset;
247
+ padding: 0 3px;
248
+ animation: wb-spin-animation 2s linear infinite;
249
+ }
250
+ div.wunderbaum span.wb-node span.wb-title {
251
+ min-width: 1em;
252
+ vertical-align: top;
253
+ overflow-x: hidden;
254
+ display: inline-block;
255
+ white-space: nowrap;
256
+ text-overflow: ellipsis;
257
+ }
258
+ div.wunderbaum.wb-grid div.wb-header div.wb-row span.wb-col:hover {
259
+ background-color: var(--wb-active-header-column-color);
260
+ }
261
+ div.wunderbaum.wb-grid.wb-cell-mode div.wb-header div.wb-row span.wb-col.wb-active {
262
+ background-color: var(--wb-active-hover-color);
263
+ }
264
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row {
265
+ border-bottom-color: var(--wb-grid-color);
266
+ }
267
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row:hover:not(.wb-active):not(.wb-selected) {
268
+ background-color: var(--wb-hover-color);
269
+ }
270
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row.wb-active {
271
+ border-bottom-color: var(--wb-active-border-color);
272
+ }
273
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col {
274
+ border-right: 1px solid var(--wb-grid-color);
275
+ }
276
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col input.wb-input-edit,
277
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=color],
278
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=date],
279
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=datetime],
280
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=datetime-local],
281
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=email],
282
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=month],
283
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=number],
284
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=password],
285
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=search],
286
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=tel],
287
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=text],
288
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=time],
289
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=url],
290
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input[type=week],
291
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select {
292
+ width: 100%;
293
+ max-height: var(--wb-row-inner-height);
294
+ border: none;
295
+ }
296
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > input:focus,
297
+ div.wunderbaum.wb-grid div.wb-node-list div.wb-row span.wb-col > select:focus {
298
+ border: 1px dashed #70c0e7;
299
+ }
300
+ div.wunderbaum.wb-grid.wb-cell-mode div.wb-row:not(.wb-colspan).wb-active span.wb-col.wb-active {
301
+ background-color: var(--wb-active-cell-color-grayscale);
302
+ }
303
+ div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected) span.wb-col.wb-active {
304
+ background-color: var(--wb-active-column-color);
305
+ }
306
+ div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active {
307
+ background-color: var(--wb-active-column-color);
308
+ }
309
+ div.wunderbaum.wb-grid.wb-cell-mode:focus-within div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active, div.wunderbaum.wb-grid.wb-cell-mode:focus div.wb-row:not(.wb-colspan):not(.wb-selected).wb-active span.wb-col.wb-active {
310
+ background-color: var(--wb-active-cell-color);
311
+ }
312
+ div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
313
+ background-color: var(--wb-alternate-row-color);
314
+ }
315
+ div.wunderbaum.wb-grid.wb-alternate div.wb-node-list div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected):hover {
316
+ background-color: var(--wb-alternate-row-color-hover);
317
+ }
318
+ div.wunderbaum.wb-grid:not(:focus-within) div.wb-node-list div.wb-row, div.wunderbaum.wb-grid:not(:focus) div.wb-node-list div.wb-row {
319
+ border-bottom-color: var(--wb-grid-color-grayscale);
320
+ }
321
+ div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row {
322
+ color: var(--wb-filter-dim-color);
323
+ }
324
+ div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-submatch, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-submatch {
325
+ color: var(--wb-filter-submatch-color);
326
+ }
327
+ div.wunderbaum.wb-ext-filter-dim div.wb-node-list div.wb-row.wb-match, div.wunderbaum.wb-ext-filter-hide div.wb-node-list div.wb-row.wb-match {
328
+ color: var(--wb-node-text-color);
329
+ }
330
+ div.wunderbaum div.wb-row.wb-drag-source {
331
+ opacity: 0.5;
332
+ }
333
+ div.wunderbaum div.wb-row.wb-drag-source .wb-node {
334
+ background-color: var(--wb-drop-source-color);
335
+ }
336
+ div.wunderbaum div.wb-row.wb-drop-target {
337
+ overflow: visible;
338
+ }
339
+ div.wunderbaum div.wb-row.wb-drop-target .wb-node {
340
+ background-color: var(--wb-drop-target-color);
341
+ overflow: visible;
342
+ }
343
+ div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon {
344
+ position: relative;
345
+ overflow: visible;
346
+ }
347
+ div.wunderbaum div.wb-row.wb-drop-target .wb-node .wb-icon::after {
348
+ position: absolute;
349
+ z-index: 1000;
350
+ content: url(../docs/assets/drop_marker_16x32.png);
351
+ left: 0;
352
+ top: calc((22px - --wb-icon-height) / 2);
353
+ }
354
+ div.wunderbaum div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after,
355
+ div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
356
+ content: url(../docs/assets/drop_marker_insert_16x64.png);
357
+ left: 0;
358
+ top: calc((22px - --wb-icon-height) / 2 - 11px);
359
+ }
360
+ div.wunderbaum div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
361
+ top: calc((22px - --wb-icon-height) / 2 + 11px);
362
+ }
363
+ div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+1),
364
+ div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+1) {
365
+ background: rgb(255, 255, 201);
366
+ }
367
+ div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+2),
368
+ div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+2) {
369
+ background: rgb(218, 255, 218);
370
+ }
371
+ div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+3),
372
+ div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+3) {
373
+ background: rgb(255, 217, 254);
374
+ }
375
+ div.wunderbaum.wb-rainbow i.wb-expander:nth-child(4n+4),
376
+ div.wunderbaum.wb-rainbow i.wb-indent:nth-child(4n+4) {
377
+ background: rgb(204, 250, 250);
378
+ }
379
+ div.wunderbaum.wb-fade-expander i.wb-expander {
380
+ transition: color 1.5s;
381
+ color: rgba(86, 83, 76, 0);
382
+ }
383
+ div.wunderbaum.wb-fade-expander div.wb-row.wb-loading i.wb-expander, div.wunderbaum.wb-fade-expander:hover i.wb-expander, div.wunderbaum.wb-fade-expander:focus i.wb-expander, div.wunderbaum.wb-fade-expander:focus-within i.wb-expander,
384
+ div.wunderbaum.wb-fade-expander [class*=wb-statusnode-] i.wb-expander {
385
+ transition: color 0.6s;
386
+ color: var(--wb-node-text-color);
387
+ }
388
+ div.wunderbaum div.wb-row.wb-skeleton span.wb-title,
389
+ div.wunderbaum div.wb-row.wb-skeleton i.wb-icon {
390
+ animation: wb-skeleton-animation 1s linear infinite alternate;
391
+ border-radius: 0.25em;
392
+ color: transparent;
393
+ opacity: 0.7;
394
+ }
395
+ div.wunderbaum.wb-checkbox-auto-hide i.wb-checkbox {
396
+ visibility: hidden;
397
+ }
398
+ div.wunderbaum.wb-checkbox-auto-hide .wb-row:hover i.wb-checkbox,
399
+ div.wunderbaum.wb-checkbox-auto-hide .wb-row.wb-selected i.wb-checkbox {
400
+ visibility: unset;
401
+ }
402
+ div.wunderbaum.wb-checkbox-auto-hide:focus .wb-row.wb-active i.wb-checkbox, div.wunderbaum.wb-checkbox-auto-hide:focus-within .wb-row.wb-active i.wb-checkbox {
403
+ visibility: unset;
404
+ }
337
405
 
338
406
  /* --- TOOL CLASSES --- */
339
407
  .wb-helper-center {
340
- text-align: center; }
408
+ text-align: center;
409
+ }
341
410
 
342
411
  .wb-helper-disabled {
343
- color: var(--wb-dim-color); }
412
+ color: var(--wb-dim-color);
413
+ }
344
414
 
345
415
  .wb-helper-hidden {
346
- display: none; }
416
+ display: none;
417
+ }
347
418
 
348
419
  .wb-helper-invalid {
349
- color: var(--wb-error-color); }
420
+ color: var(--wb-error-color);
421
+ }
350
422
 
351
423
  .wb-helper-lazy-expander {
352
- color: var(--wb-bg-highlight-color); }
424
+ color: var(--wb-bg-highlight-color);
425
+ }
353
426
 
354
427
  .wb-helper-link {
355
- cursor: pointer; }
428
+ cursor: pointer;
429
+ }
356
430
 
357
431
  .wb-no-select {
358
432
  user-select: none;
359
- -webkit-user-select: none; }
360
- .wb-no-select span.wb-title {
361
- user-select: contain;
362
- -webkit-user-select: contain; }
433
+ -webkit-user-select: none;
434
+ }
435
+ .wb-no-select span.wb-title {
436
+ user-select: contain;
437
+ -webkit-user-select: contain;
438
+ }
363
439
 
364
440
  /* RTL support */
365
441
  .wb-helper-start,
366
442
  .wb-helper-start > input {
367
- text-align: left; }
443
+ text-align: left;
444
+ }
368
445
 
369
446
  .wb-helper-end,
370
447
  .wb-helper-end > input {
371
- text-align: right; }
448
+ text-align: right;
449
+ }
372
450
 
373
451
  .wb-rtl .wb-helper-start,
374
452
  .wb-rtl .wb-helper-start > input {
375
- text-align: right; }
376
-
453
+ text-align: right;
454
+ }
377
455
  .wb-rtl .wb-helper-end,
378
456
  .wb-rtl .wb-helper-end > input {
379
- text-align: left; }
457
+ text-align: left;
458
+ }
380
459
 
381
460
  /* Class 'wb-tristate' is used to mark checkboxes that should toggle like
382
461
  * indeterminate -> checked -> unchecked -> indeterminate ...
383
462
  */
384
- .wb-col input[type="checkbox"]:indeterminate {
463
+ .wb-col input[type=checkbox]:indeterminate {
385
464
  color: var(--wb-dim-color);
386
- background-color: red; }
465
+ background-color: red;
466
+ }
387
467
 
388
468
  .wb-col input:invalid {
389
469
  color: var(--wb-error-color);
390
- background-color: var(--wb-error-background-color); }
470
+ background-color: var(--wb-error-background-color);
471
+ }
391
472
 
392
473
  @keyframes wb-spin-animation {
393
474
  0% {
394
- transform: rotate(0deg); }
475
+ transform: rotate(0deg);
476
+ }
395
477
  to {
396
- transform: rotate(1turn); } }
397
-
478
+ transform: rotate(1turn);
479
+ }
480
+ }
398
481
  @keyframes wb-skeleton-animation {
399
482
  0% {
400
- background-color: #a3b8c2; }
483
+ background-color: hsl(200, 20%, 70%);
484
+ }
401
485
  100% {
402
- background-color: #f0f3f5; } }
403
-
486
+ background-color: hsl(200, 20%, 95%);
487
+ }
488
+ }
404
489
  @keyframes wb-busy-animation {
405
490
  0% {
406
- background-position: 0 0; }
491
+ background-position: 0 0;
492
+ }
407
493
  100% {
408
- background-position: 0 22px; } }
494
+ background-position: 0 22px;
495
+ }
496
+ }
497
+
498
+ /*# sourceMappingURL=wunderbaum.css.map */