@deviceinsight/ng-ui-components 7.20.1 → 7.21.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 (2) hide show
  1. package/dist/style.css +1 -191
  2. package/package.json +24 -23
package/dist/style.css CHANGED
@@ -4,12 +4,10 @@
4
4
  */
5
5
 
6
6
  /* Upload */
7
-
8
7
  .di.upload,
9
8
  .di.upload * {
10
9
  transition: all 0.1s ease;
11
10
  }
12
-
13
11
  .di.upload {
14
12
  margin: 0;
15
13
  padding: 0;
@@ -22,40 +20,32 @@
22
20
  overflow: hidden;
23
21
  user-select: none;
24
22
  }
25
-
26
23
  .di.upload {
27
24
  display: flex;
28
25
  flex-direction: column;
29
26
  align-items: center;
30
27
  }
31
-
32
28
  .di.upload:hover {
33
29
  border-color: #666;
34
30
  background: #f9f9f9;
35
31
  }
36
-
37
32
  .di.upload:active {
38
33
  background: #eee;
39
34
  }
40
-
41
35
  .di.upload > div {
42
36
  width: 100%;
43
37
  height: 100%;
44
38
  }
45
-
46
39
  .di.upload.clickable {
47
40
  cursor: pointer;
48
41
  }
49
-
50
42
  .di.upload.hasContent {
51
43
  border: 1px solid var(--primary-color, #1a8ed3);
52
44
  }
53
-
54
45
  .di.upload .drag-drop-hint {
55
46
  margin: 0;
56
47
  padding: 0;
57
48
  }
58
-
59
49
  .di.upload .drag-drop-hint::before,
60
50
  .di.upload .drag-drop-hover-hint::before {
61
51
  content: '';
@@ -67,23 +57,19 @@
67
57
  opacity: 0.5;
68
58
  background-size: 16px 16px;
69
59
  }
70
-
71
60
  .di.upload .reject .drag-drop-hint,
72
61
  .di.upload .accept .drag-drop-hint {
73
62
  display: none;
74
63
  }
75
-
76
64
  .di.upload .reject .drag-drop-hover-hint,
77
65
  .di.upload .accept .drag-drop-hover-hint {
78
66
  display: none;
79
67
  }
80
-
81
68
  .di.upload .drag-drop-hover-hint {
82
69
  margin: 0;
83
70
  padding: 0;
84
71
  display: none;
85
72
  }
86
-
87
73
  .di.upload .drag-drop-text-container {
88
74
  width: 100%;
89
75
  height: 100%;
@@ -95,11 +81,9 @@
95
81
  align-items: center;
96
82
  border: none;
97
83
  }
98
-
99
84
  .di.upload .drag-drop-text-container:hover .drag-drop-hint {
100
85
  display: none;
101
86
  }
102
-
103
87
  .di.upload .drag-drop-text-container:hover > .drag-drop-hover-hint {
104
88
  display: block;
105
89
  }
@@ -110,17 +94,14 @@
110
94
  color: rgb(26, 142, 211);
111
95
  display: none;
112
96
  }
113
-
114
97
  .di.upload .accept .drag-drop-accept {
115
98
  display: block;
116
99
  }
117
-
118
100
  .di.upload .drag-drop-reject {
119
101
  margin: 0;
120
102
  padding: 0;
121
103
  display: none;
122
104
  }
123
-
124
105
  .di.upload .reject .drag-drop-reject {
125
106
  display: block;
126
107
  }
@@ -130,7 +111,6 @@
130
111
  width: 100%;
131
112
  height: 100%;
132
113
  }
133
-
134
114
  .di.upload .preview {
135
115
  flex: 1;
136
116
  background-size: contain;
@@ -139,7 +119,6 @@
139
119
  overflow: hidden;
140
120
  display: flex;
141
121
  }
142
-
143
122
  .di.upload .preview .action-button {
144
123
  border: none;
145
124
  background: none;
@@ -156,18 +135,14 @@
156
135
  background-color: rgba(0, 0, 0, 0);
157
136
  color: transparent;
158
137
  }
159
-
160
138
  .di.upload .preview .action-button:hover {
161
139
  color: #ffffff;
162
140
  background-color: rgba(0, 0, 0, 0.4);
163
141
  }
164
-
165
142
  /* Slider */
166
-
167
143
  .di.slider .rc-slider-with-marks {
168
144
  margin-bottom: 25px;
169
145
  }
170
-
171
146
  .di.slider .disabled-area-element {
172
147
  position: absolute;
173
148
  right: 0;
@@ -175,25 +150,20 @@
175
150
  height: 100%;
176
151
  background: repeating-linear-gradient(-45deg, #f9f9f9 13px 18px, #d4d4d4 0px 20px);
177
152
  }
178
-
179
153
  .di.slider .rc-slider-track {
180
154
  background-color: var(--primary-color, #1a8ed3);
181
155
  }
182
-
183
156
  .di.slider .rc-slider-handle {
184
157
  border-color: var(--primary-color, #1a8ed3);
185
158
  }
186
-
187
159
  .di.slider .rc-slider-dot-active {
188
160
  border-color: var(--primary-color, #1a8ed3);
189
161
  }
190
-
191
162
  .di.slider .rc-slider-handle:active {
192
163
  box-shadow: 0 0 5px var(--primary-color, #1a8ed3);
193
164
  }
194
165
 
195
166
  /* Tooltip */
196
-
197
167
  .rc-tooltip {
198
168
  background-color: rgb(108, 108, 108);
199
169
  border-radius: 6px;
@@ -212,376 +182,216 @@
212
182
  }
213
183
 
214
184
  /* ColorPicker */
215
-
216
185
  .di.color-picker {margin:-5px -10px; padding:0}
217
-
218
186
  .di.color-picker .color {width:20%; padding:15px; float:left; position:relative; transition: transform .1s ease; cursor:pointer;}
219
-
220
187
  .di.color-picker .color:hover {transform: scale(1.2); z-index:1; box-shadow:0 2px 1px rgba(0,0,0,0.2)}
221
-
222
188
  .di.color-picker .color:active {box-shadow: 0 0px 0px 2px #fff inset;}
223
-
224
189
  .di.color-picker .color.selected {box-shadow: 0 0 0 2px #ffffff inset, 0px 4px 4px 4px rgba(0, 0, 0, 0.2); z-index:1;}
225
190
 
226
191
  .di.gradient-color-picker .inputs { display: flex; justify-content: space-between; margin-top: 10px; }
227
192
 
228
193
  /* RouteLink */
229
-
230
194
  .di.route-link {color: #666}
231
-
232
195
  .di.route-link:hover {color: #000}
233
-
234
196
  .di.route-link .icon {background-color:transparent; display:block; cursor:pointer; opacity:0.65; background-repeat:no-repeat; background-position:50%; position:relative}
235
-
236
197
  .di.route-link .icon:hover {background-color:rgba(0,0,0,0.07); opacity:1; border-radius:3px; text-decoration:none; cursor:pointer;}
237
-
238
198
  .di.route-link .icon:active {background-color:rgba(0,0,0,0.1); opacity:1;}
239
199
 
240
200
  /* misc */
241
-
242
201
  .clearfix::after {content:""; clear:both; display:block; visibility:hidden; height:0px;}
243
-
244
202
  .disabled {opacity:0.35; pointer-events:none; cursor:default;}
245
203
 
246
204
  /* Pagination */
247
-
248
205
  .di.pagination {text-shadow:0 1px 0 #fff; user-select:none; display:flex; align-items:center; justify-content:center;}
249
-
250
206
  .di.pagination .next,
251
207
  .di.pagination .prev {width:32px; height:32px; display:inline-block; font-size:24px; font-weight:bold; color:#333; position:relative; line-height:28px;}
252
-
253
208
  .di.pagination .next:hover,
254
209
  .di.pagination .prev:hover {cursor:pointer; background:rgba(0,0,0,.07); color:#444}
255
-
256
210
  .di.pagination .next:active,
257
211
  .di.pagination .prev:active {background:rgba(0,0,0,.1);}
258
-
259
212
  .di.pagination .next,
260
213
  .di.pagination .prev,
261
214
  .di.pagination .info {padding:0 10px 0; vertical-align:middle; border-radius:3px;}
262
-
263
215
  .di.pagination .info input {width:45px; height:32px; margin:0 5px; text-align:center; padding:4px 0; font-size:12px; border:1px solid #ccc; border-radius:2px; background:transparent;}
264
-
265
216
  .di.pagination .info input:hover {border:1px solid #b5b5b5;}
266
-
267
217
  .di.pagination .info input:focus {border:1px solid #333;}
268
-
269
218
  .di.pagination .options {margin:0 0 0 10px; padding: 0 0 0 10px; border-left:1px solid #eee;}
270
219
 
271
220
  /* Reactable */
272
-
273
221
  .di.reactable {width:100%; margin:0 0 5px; background:none;border-collapse:collapse;}
274
-
275
222
  .di.reactable [class*="right aligned"],
276
223
  .di.reactable[class*="right aligned"] {text-align:right;}
277
-
278
224
  .di.reactable a {text-decoration:underline; vertical-align:middle;}
279
-
280
225
  .di.reactable input[type="text"],
281
226
  .di.reactable select {width:100%; max-width:380px;}
282
-
283
227
  .di.reactable th {height:40px; background:none; padding:0 20px 0 0; user-select:none; -moz-user-select:none; white-space:nowrap; border-top:1px solid transparent; text-align:left; position:relative;}
284
-
285
228
  .di.reactable td {height:38px; padding:0 15px 0 0; white-space:nowrap;}
286
-
287
229
  .di.reactable tr {border-top:1px solid #ddd;}
288
-
289
230
  .di.reactable tr td:first-child {font-weight:bold;}
290
-
291
231
  .di.reactable tr.transitive td,
292
232
  .di.reactable tr.transitive td a {color: #999;}
293
-
294
233
  .di.reactable .filterrow td {padding:5px 2.5px;}
295
-
296
234
  .di.reactable.striped tr:nth-child(odd) {background:#f9f9f9;}
297
-
298
235
  .di.reactable.striped thead + tbody tr:nth-child(even) {background:#f0f0f0;}
299
-
300
236
  .di.reactable.striped thead + tbody tr:nth-child(odd) {background:#ffffff;}
301
-
302
237
  .di.reactable.striped td {border-bottom:1px solid #fff;}
303
-
304
238
  .di.reactable.hoverable tbody tr:hover {background-color:rgba(0,0,0,0.05);}
305
-
306
239
  .di.reactable.hoverable tbody tr.filterrow:hover {background:none;}
307
-
308
240
  .di.reactable.selectable tbody tr:hover {background-color:rgba(0,0,0,0.05); cursor:pointer;}
309
-
310
241
  .di.reactable.selectable tbody tr:active {background-color:rgba(0,0,0,0.1)}
311
-
312
242
  .di.reactable.selectable tbody tr.filterrow:hover {background-color:transparent;}
313
-
314
243
  .di.reactable.scroll-x {overflow-x:auto; margin-bottom:10px; padding-bottom:10px;}
315
-
316
244
  .di.reactable.sortable th {cursor:default;}
317
-
318
245
  .di.reactable.sortable th:hover {text-decoration:none;}
319
-
320
246
  .di.reactable.sortable th.sortable:hover { cursor: pointer;}
321
-
322
247
  .di.reactable.sortable th.sortable:hover::after {content: url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20id='triangle_up'%20data-name='triangle%20up'%20points='7.5%203%204%207%2011%207%207.5%203'/%3e%3cpolygon%20id='triangle_down'%20data-name='triangle%20down'%20points='7.5%2013%204%209%2011%209%207.5%2013'/%3e%3c/svg%3e"); position:absolute; padding:0 0 0 0px; margin-left:1px; filter:opacity(0.3); width:16px; height:16px;}
323
-
324
248
  .di.reactable.sortable th.sortable.sortAsc::after {content: url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.5%206%204%2010%2011%2010%207.5%206'/%3e%3c/svg%3e"); position:absolute; padding:0 0 0 0px; margin-left:2px; width:16px; height:16px;filter:none;}
325
-
326
249
  .di.reactable.sortable th.sortable.sortDes::after {content: url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='7.5%2010%204%206%2011%206%207.5%2010'/%3e%3c/svg%3e"); position:absolute; padding:0 0 0 0px; margin-left:2px; width:16px; height:16px;filter:none;}
327
250
 
328
251
  /* Color Picker */
329
-
330
252
  .di.color-picker { width: 220px; height: 200px; }
331
-
332
253
  .di.color-picker.grid-color-picker { max-width: 250px; height: auto;}
333
-
334
254
  .di.color-picker .colorpicker { position: relative; height: 100%; width: 100%; background-color: #fff; }
335
-
336
255
  .di.color-picker .hue-slider {position: absolute;top: 1em;bottom: 1em;right: 1.3em; }
337
-
338
256
  .di.color-picker .hue-slider .track { background: linear-gradient(to bottom, #FF0000 0%, #FF0099 10%, #CD00FF 20%, #3200FF 30%, #0066FF 40%, #00FFFD 50%, #00FF66 60%, #35FF00 70%, #CDFF00 80%, #FF9900 90%, #FF0000 100%); }
339
-
340
257
  .di.color-picker .map {position: absolute;top: 1em;bottom: 1em;right: 2em;left: 1em;overflow: hidden;user-select: none;border-radius: 0.25em; }
341
-
342
258
  .di.color-picker .map.active {cursor: none; }
343
-
344
259
  .di.color-picker .map.dark .pointer {border-color: #fff; }
345
-
346
260
  .di.color-picker .map.light .pointer {border-color: #000; }
347
-
348
261
  .di.color-picker .map .pointer {position: absolute;width: 10px;height: 10px;margin-left: -5px;margin-bottom: -5px;border-radius: 100%;border: 1px solid #000;will-change: left, bottom; }
349
-
350
262
  .di.color-picker .map .background {top: 0;left: 0;position: absolute;height: 100%;width: 100%; }
351
-
352
263
  .di.color-picker .map .background:before,
353
264
  .di.color-picker .map .background:after {display: block;content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0; }
354
-
355
265
  .di.color-picker .map .background:after {background: linear-gradient(to bottom, transparent 0%, black 100%); }
356
-
357
266
  .di.color-picker .map .background:before {background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); }
358
-
359
267
  .di.color-picker .slider {position: absolute;user-select: none; }
360
-
361
268
  .di.color-picker .slider.vertical { top: 0; bottom: 0; left: 50%; width: 10px; cursor: ns-resize; }
362
-
363
269
  .di.color-picker .slider.vertical .track { position: absolute; top: 0; bottom: 0; left: 50%; width: 8px; margin-left: -4px; }
364
-
365
270
  .di.color-picker .slider.horizontal { left: 0; right: 0; top: 50%; height: 10px; cursor: ew-resize; }
366
-
367
271
  .di.color-picker .slider.horizontal .track { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; }
368
-
369
272
  .di.color-picker .slider .track { border-radius: 3px; }
370
-
371
273
  .di.color-picker .slider .pointer { position: absolute; bottom: 50%; left: 50%; width: 16px; height: 16px; margin-left: -8px; margin-bottom: -8px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #ccc,0 1px 2px #ccc; will-change: left, bottom; }
372
-
373
274
  .di.color-picker .opacity-slider {position: absolute;bottom: 1.3em;left: 1em;right: 2em; }
374
-
375
275
  .di.color-picker .opacity-slider .slider {background: #fff url("data:image/gif;base64,R0lGODdhEAAQAPEAAMvLy8zMzP///wAAACwAAAAAEAAQAEACHYxvosstCAEMrq6Jj812Y59NIDQipdY5XLWqH4sVADs=") repeat;background-size: 8px 8px;height: 8px; }
376
-
377
276
  .di.color-picker .opacity-slider .slider .track {height: 8px;margin-top: -4px;background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #FFF 100%); }
378
-
379
277
  .di.color-picker .with-opacity-slider .map { bottom: 2em; }
380
-
381
278
  .di.color-picker .with-opacity-slider .hue-slider {bottom: 2em; }
382
-
383
279
  .di.color-picker.with-textfield { padding-bottom: 30px; }
384
280
 
385
281
  .di.color-picker-popper {position:relative; z-index: unset !important; width: 40px; height: 40px;}
386
-
387
282
  .di.color-picker-popper .trigger {border:1px solid #ccc; box-shadow:0 0 0 2px #ffffff inset; width: 100%; height: 100%; cursor: pointer;}
388
-
389
283
  .di.color-picker-popper .color-picker-box {width:220px;}
390
284
 
391
285
  /* Period Picker */
392
-
393
286
  .di.monthpicker {width:auto;}
394
-
395
287
  .di.monthpicker .pager {height:35px; line-height:35px; margin:10px 0 0 0; text-align:center;}
396
-
397
288
  .di.monthpicker .pager * {vertical-align:middle;}
398
-
399
289
  .di.monthpicker .pager .page-nav {height:35px; display:inline-block; border-radius:3px;}
400
-
401
290
  .di.monthpicker .pager .page-nav.prev {width:40px; background:url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%3e%3cpolygon%20points='3.59%208%209.94%201.65%2011.35%203.06%206.41%208%2011.35%2012.94%209.94%2014.35%203.59%208'/%3e%3cpath%20d='M9.94,2.35l.71.71L6.41,7.29,5.71,8l.7.71,4.24,4.23-.71.71L4.29,8,9.94,2.35m0-1.41L2.88,8l7.06,7.06,2.12-2.12L7.12,8l4.94-4.94L9.94.94Z'/%3e%3c/g%3e%3c/svg%3e") center no-repeat; cursor:pointer; background-size: 16px 16px;}
402
-
403
291
  .di.monthpicker .pager .page-nav.next {width:40px; background:url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cg%3e%3cpolygon%20points='3.59%2012.94%208.53%208%203.59%203.06%205%201.65%2011.35%208%205%2014.35%203.59%2012.94'/%3e%3cpath%20d='M5,2.35,10.65,8,5,13.65l-.71-.71L8.53,8.71,9.23,8l-.7-.71L4.29,3.06,5,2.35M5,.94,2.88,3.06,7.82,8,2.88,12.94,5,15.06,12.06,8,5,.94Z'/%3e%3c/g%3e%3c/svg%3e") center no-repeat; cursor:pointer; background-size: 16px 16px;}
404
-
405
292
  .di.monthpicker .pager .page-nav.info {width:75px; font-size:14px; font-weight:bold;}
406
-
407
293
  .di.monthpicker .pager .page-nav.prev:hover,
408
294
  .di.monthpicker .pager .page-nav.next:hover {background-color:rgba(0,0,0,.07)}
409
-
410
295
  .di.monthpicker .pager .page-nav.prev:active,
411
296
  .di.monthpicker .pager .page-nav.next:active {background-color:rgba(0,0,0,.1)}
412
-
413
297
  .di.monthpicker .months {margin-top:20px;}
414
-
415
298
  .di.monthpicker .months td {padding:10px 15px; border-radius: 3px}
416
-
417
299
  .di.monthpicker .months td:hover {background-color:rgba(0,0,0,0.07); cursor:pointer; transition-duration: 0s;}
418
-
419
300
  .di.monthpicker .months td:active {background-color:rgba(0,0,0,0.1);}
420
-
421
301
  .di.monthpicker .months td.selected {background-color:#333; color: white; font-weight: bold}
422
302
 
423
303
  /* Date Time Input */
424
-
425
304
  .di.date-time-input {display: flex;}
426
-
427
305
  .di.date-time-input input {height:32px; color: #333}
428
-
429
306
  .di.date-input-wrapper { position: relative; display: inline-block; }
430
-
431
307
  .di.date-input-wrapper .date.invalid {border-color: red; border-width: 1px;}
432
-
433
308
  .di.date-input-wrapper .date.invalid:focus, .di.date-input-wrapper .date.invalid:hover {border-color: red;}
434
-
435
309
  .di.date-input-wrapper .di.button { position: absolute; right: 0; top: 0; height: 100%; padding: 0 5px;}
436
-
437
310
  .di.date-time-input input {padding:3px; font-size:16px; border:1px solid transparent; text-align:center;}
438
-
439
311
  .di.date-time-input input.date {width:105px !important; font-weight:bold;}
440
-
441
312
  .di.date-time-input input.date::placeholder {font-size: 15px; text-overflow: clip;}
442
-
443
313
  .di.date-time-input input.time {width:55px !important;}
444
-
445
314
  .di.date-time-input input:hover {border:1px solid #b5b5b5;}
446
-
447
315
  .di.date-time-input input:focus {border:1px solid #333;}
448
-
449
316
  .di.date-time-input.with-warning {border: 1px solid red;}
450
317
 
451
318
  .di.period-picker {white-space:nowrap;}
452
-
453
319
  .di.period-picker div:not([class]){display:inline-block; position:relative;}
454
-
455
320
  .di.period-picker, .di.period-picker .inputs {margin-right:5px; display:flex; align-items: center;}
456
-
457
321
  .di.period-picker input {padding:3px; font-size:16px; border:1px solid transparent; text-align:center;}
458
-
459
322
  .di.period-picker input.date {width:105px !important; font-weight:bold;}
460
-
461
323
  .di.period-picker input.date::placeholder {font-size: 15px; text-overflow: clip;}
462
-
463
324
  .di.period-picker input.time {width:55px !important;}
464
-
465
325
  .di.period-picker input:hover {border:1px solid #b5b5b5;}
466
-
467
326
  .di.period-picker input:focus {border:1px solid #333;}
468
-
469
327
  .di.period-picker .date-time-input {border: 1px solid transparent; transition: border 1s ease-out;}
470
-
471
328
  .di.period-picker.centered {display: flex; justify-content: center;}
472
329
 
473
330
  /* SvgImage */
474
-
475
331
  .di.svg-image .anchor:hover, .di.svg-image .anchor:hover * { stroke: cyan !important; stroke-width: 2px !important; cursor: pointer; }
476
-
477
332
  .di.svg-image .di.hover:hover, .di.svg-image .di.hover:hover * { fill: cyan !important; }
478
333
 
479
334
  .treeview .node-info { display: flex; justify-content: flex-start; align-items: center; margin: 1px 0px; }
480
-
481
335
  .treeview .node-info:hover { background-color: #eee; }
482
-
483
336
  .treeview .node-info .description { display: flex; align-items: center; }
484
-
485
337
  .treeview .node-info > input{ margin: 0 5px; position: static; /*<---this should not be necessary...*/}
486
-
487
338
  .treeview .node-info > .icon { height: 24px; width: 24px; cursor: pointer; margin: 0 2px; }
488
-
489
339
  .treeview .node-info .name { flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; user-select:none; height: 30px; display: flex; align-items: center; }
490
-
491
340
  .treeview .icon-container { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; margin: 0 2px; }
492
341
 
493
342
  /* root nodes*/
494
-
495
343
  .treeview > .node { margin-left: 0 !important; }
496
-
497
344
  /* first childnodes do not have to take skeletons into account */
498
-
499
345
  .treeview > .node > .node { margin-left: 14px; }
500
-
501
346
  /* any childnodes below have 14px for node padding and 14px for skeleton padding */
502
-
503
347
  .treeview .node { margin-left: 28px; }
504
-
505
348
  .treeview .node-info .skeleton { width: 14px; height: 30px; display: flex; flex-wrap: wrap; }
506
-
507
349
  .treeview .node-info .skeleton .skeleton-cell { height: 50%; width: 100%; }
508
-
509
350
  .treeview .node-info .skeleton .skeleton-cell.top { border-left: 1px dashed grey; border-bottom: 1px dashed grey; }
510
-
511
351
  .treeview .node-info .skeleton .skeleton-cell.bottom { border-left: 1px dashed grey; }
512
352
 
513
353
  .di.svg-image .anchor:hover, .di.svg-image .anchor:hover * { cursor: pointer; stroke-width: 2px !important; }
514
-
515
354
  .di.svg-image .di.hover:hover, .di.svg-image .di.hover:hover * { fill: cyan !important; }
516
355
 
517
356
  .infobox { display: flex; flex-direction: column; box-shadow: 0px 2px 2px -1px #aaa; }
518
-
519
357
  .infobox-header { display: flex; justify-content: space-between; width: 100%; }
520
-
521
358
  .infobox-header-content { display: flex; padding: 15px; flex: 1; }
522
-
523
359
  .infobox-message { line-height: 1.5; word-break: break-word; padding-right: 30px; }
524
-
525
360
  .infobox-iconcontainer + .infobox-message { padding-left: 10px; padding-top: 3px; }
526
-
527
361
  .infobox-closebutton { flex-basis: 50px; cursor: pointer; padding: 0; background-color: transparent; }
528
-
529
362
  .infobox-closebutton:hover { background-color: rgba(0, 0, 0, 0.1); }
530
363
 
531
364
  /* Multi Menu (Drop & more) */
532
-
533
365
  .di.multimenu {margin:-10px;}
534
-
535
366
  .di.multimenu .drop {z-index:1;}
536
-
537
367
  .di.multimenu .drop .item {padding:0; white-space:nowrap; border-bottom:1px solid #ddd; text-align:left; cursor:pointer; position:relative; z-index:1; display:flex; align-items:center;}
538
-
539
368
  .di.multimenu .drop .item:last-child {border:none;}
540
-
541
369
  .di.multimenu .drop .item:hover {background:rgba(0,0,0,0.07)}
542
-
543
370
  .di.multimenu .drop .item:active {background:rgba(0,0,0,0.1)}
544
-
545
371
  .di.multimenu .drop .item-text {height:35px; padding:10px 20px 10px 20px; display:flex; align-items:center;}
546
-
547
372
  .di.multimenu .drop .item-icon {width:16px; height:16px; margin:0 -8px 0 20px;}
548
373
 
549
374
  .di.multimenu .drop .item-more {width:35px; height:35px; margin-left:auto; background-color:#fff; display:inline-block; }
550
-
551
375
  .di.multimenu .drop .item-more.icon.triangle {background:#fff url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3cpolygon%20points='10%208.04%206%204%206%2012.08%2010%208.04'/%3e%3c/svg%3e") no-repeat center; border-left:1px solid #ddd;}
552
-
553
376
  .di.multimenu .drop .item-more.icon.triangle:hover {background-color:rgba(0,0,0,0.07);}
554
-
555
377
  .di.multimenu .drop .item-more.icon.triangle:active {background-color:rgba(0,0,0,0.1);}
556
-
557
378
  .di.multimenu .drop .item-more.icon.dots {background:url("data:image/svg+xml,%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3e%3ccircle%20cx='12.5'%20cy='7.5'%20r='1.5'/%3e%3ccircle%20cx='8.5'%20cy='7.5'%20r='1.5'/%3e%3ccircle%20cx='4.5'%20cy='7.5'%20r='1.5'/%3e%3c/svg%3e") no-repeat center; background-size: 16px 16px;}
558
-
559
379
  .di.multimenu .drop .item-more .item-more-submenu {display:none; box-shadow:0 1px 3px rgba(0, 0, 0, 0.2); border:1px solid rgba(0, 0, 0, 0.2);}
560
-
561
380
  .di.multimenu .drop .item-more .item-more-submenu {position:absolute; top:0; left: 100%; background:#fff;}
562
-
563
381
  .di.multimenu .drop .item-more .item-more-submenu .subitem {padding:10px 20px; border-bottom:1px solid #ddd;}
564
-
565
382
  .di.multimenu .drop .item-more .item-more-submenu .subitem:last-child {border-bottom:none}
566
-
567
383
  .di.multimenu .drop .item-more .item-more-submenu .subitem:hover {background:rgba(0,0,0,0.07);}
568
-
569
384
  .di.multimenu .drop .item-more .item-more-submenu .subitem:active {background:rgba(0,0,0,0.1);}
570
-
571
385
  .di.multimenu .drop .item-more:hover .item-more-submenu {display:block;}
572
386
 
573
387
  .di.multimenu .drop .left-box {width:1px; height:calc(100% + 2px); position:absolute; right:0%; top:-1px; border:1px solid; background:#fff; z-index:1; overflow:hidden; opacity:0;}
574
-
575
388
  .di.multimenu .drop .left-box {box-shadow:0 1px 3px rgba(0,0,0,0.2); border:1px solid rgba(0,0,0,0.2); border-radius:3px 0 0 3px;}
576
-
577
389
  .di.multimenu .drop .left-box.show {right:100%; width:230px; opacity:1;}
578
-
579
390
  .di.multimenu .drop .right-box {position:relative; z-index:2; border-radius:0 3px 3px 0; /*background:#fff;*/}
580
-
581
391
  .di.multimenu a {text-decoration: none;}
582
392
 
583
- .di.modal.scroll-horizontally-advice {padding-top: 40vh}
584
393
 
394
+ .di.modal.scroll-horizontally-advice {padding-top: 40vh}
585
395
  .di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top: 24px;}
586
396
  /**
587
397
  * CS NG
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deviceinsight/ng-ui-components",
3
- "version": "7.20.1",
3
+ "version": "7.21.0",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -38,14 +38,14 @@
38
38
  "build-storybook": "storybook build"
39
39
  },
40
40
  "dependencies": {
41
- "@deviceinsight/ng-ui-api-client": "^10.50.0",
42
- "@deviceinsight/ng-ui-basic-components": "^7.13.0",
41
+ "@deviceinsight/ng-ui-api-client": "^10.51.0",
42
+ "@deviceinsight/ng-ui-basic-components": "^7.17.0",
43
43
  "@dnd-kit/core": "^6.3.1",
44
44
  "@dnd-kit/modifiers": "^9.0.0",
45
45
  "@dnd-kit/sortable": "^10.0.0",
46
46
  "@rc-component/slider": "^1.1.1",
47
- "@rc-component/tooltip": "^1.4.0",
48
- "@svgdotjs/svg.js": "^3.2.5",
47
+ "@rc-component/tooltip": "^1.5.0",
48
+ "@svgdotjs/svg.js": "^3.2.8",
49
49
  "classnames": "^2.5.1",
50
50
  "date-fns": "^4.4.0",
51
51
  "dayjs": "^1.11.21",
@@ -54,7 +54,7 @@
54
54
  "lodash": "^4.18.1",
55
55
  "nanoid": "^5.1.16",
56
56
  "pure-color": "^1.3.0",
57
- "react-colorful": "^5.7.0",
57
+ "react-colorful": "^5.8.0",
58
58
  "react-datepicker": "^8.10.0",
59
59
  "react-dropzone": "^14.4.1",
60
60
  "react-select": "^5.10.2",
@@ -70,37 +70,38 @@
70
70
  },
71
71
  "devDependencies": {
72
72
  "@eslint/js": "10.0.1",
73
- "@storybook/react-vite": "10.5.5",
73
+ "@storybook/react-vite": "10.5.7",
74
74
  "@testing-library/dom": "10.4.1",
75
75
  "@testing-library/jest-dom": "6.9.1",
76
76
  "@testing-library/react": "16.3.2",
77
- "@testing-library/user-event": "14.6.1",
78
- "@types/lodash": "4.17.24",
79
- "@types/node": "24.13.2",
80
- "@types/react": "19.2.17",
81
- "@types/react-dom": "19.2.3",
77
+ "@testing-library/user-event": "14.6.3",
78
+ "@types/lodash": "4.17.25",
79
+ "@types/node": "24.13.3",
80
+ "@types/react": "19.2.18",
81
+ "@types/react-dom": "19.2.4",
82
82
  "@types/react-router-dom": "5.3.3",
83
- "@typescript-eslint/eslint-plugin": "8.65.0",
84
- "@typescript-eslint/parser": "8.65.0",
85
- "@vitejs/plugin-react": "5.2.0",
86
- "eslint": "10.8.0",
83
+ "@typescript-eslint/eslint-plugin": "8.66.0",
84
+ "@typescript-eslint/parser": "8.66.0",
85
+ "@vitejs/plugin-react": "6.1.1",
86
+ "eslint": "10.8.1",
87
87
  "eslint-plugin-react-hooks": "7.1.1",
88
- "happy-dom": "20.10.6",
88
+ "happy-dom": "20.11.2",
89
89
  "husky": "9.1.7",
90
90
  "i18next": "25.10.10",
91
- "lint-staged": "17.0.8",
92
- "prettier": "3.9.4",
91
+ "lint-staged": "17.3.0",
92
+ "prettier": "3.9.6",
93
93
  "prop-types": "15.8.1",
94
94
  "react": "19.2.8",
95
95
  "react-dom": "19.2.8",
96
96
  "react-i18next": "16.6.6",
97
97
  "react-router-dom": "5.3.4",
98
98
  "rimraf": "6.1.3",
99
- "storybook": "10.5.5",
99
+ "storybook": "10.5.7",
100
100
  "tsc-watch": "7.2.1",
101
101
  "typescript": "5.9.3",
102
- "vitest": "4.1.9",
103
- "eslint-plugin-storybook": "10.5.5"
102
+ "vite": "8.1.5",
103
+ "vitest": "4.1.10",
104
+ "eslint-plugin-storybook": "10.5.7"
104
105
  },
105
106
  "overrides": {
106
107
  "follow-redirects": "^1.16.0",
@@ -108,7 +109,7 @@
108
109
  "ux4iot-admin-node": {
109
110
  "form-data": "^2.5.6"
110
111
  },
111
- "ws": "^8.21.0",
112
+ "ws": "^8.21.3",
112
113
  "yaml": "^2.9.0"
113
114
  },
114
115
  "lint-staged": {