camunda-bpmn-js 0.11.5 → 0.12.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 (25) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/assets/properties-panel.css +780 -0
  3. package/dist/camunda-cloud-modeler.development.js +546 -505
  4. package/dist/camunda-cloud-modeler.production.min.js +3 -3
  5. package/dist/camunda-platform-modeler.development.js +178 -270
  6. package/dist/camunda-platform-modeler.production.min.js +1 -1
  7. package/lib/camunda-cloud/features/modeling/behavior/CleanUpBusinessRuleTaskBehavior.js +112 -0
  8. package/lib/camunda-cloud/features/modeling/behavior/CreateZeebeBoundaryEventBehavior.js +51 -55
  9. package/lib/camunda-cloud/features/modeling/behavior/CreateZeebeCallActivityBehavior.js +56 -59
  10. package/lib/camunda-cloud/features/modeling/behavior/FormDefinitionBehavior.js +69 -127
  11. package/lib/camunda-cloud/features/modeling/behavior/UpdatePropagateAllChildVariablesBehavior.js +76 -128
  12. package/lib/camunda-cloud/features/modeling/behavior/index.js +3 -0
  13. package/lib/camunda-cloud/features/properties-provider/parts/implementation/InputOutput.js +21 -7
  14. package/lib/camunda-cloud/features/rules/BpmnRules.js +1 -1
  15. package/lib/camunda-cloud/helper/CalledElementHelper.js +43 -41
  16. package/lib/camunda-cloud/helper/FormsHelper.js +38 -50
  17. package/lib/camunda-cloud/helper/InputOutputHelper.js +92 -106
  18. package/lib/camunda-platform/features/modeling/behavior/DeleteErrorEventDefinitionBehavior.js +24 -47
  19. package/lib/camunda-platform/features/modeling/behavior/DeleteRetryTimeCycleBehavior.js +39 -81
  20. package/lib/camunda-platform/features/modeling/behavior/UpdateCamundaExclusiveBehavior.js +31 -65
  21. package/lib/camunda-platform/features/modeling/behavior/UpdateInputOutputBehavior.js +42 -76
  22. package/lib/camunda-platform/features/modeling/behavior/UpdateResultVariableBehavior.js +21 -26
  23. package/lib/camunda-platform/features/modeling/behavior/UserTaskFormsBehavior.js +16 -10
  24. package/lib/camunda-platform/helper/InputOutputHelper.js +29 -0
  25. package/package.json +2 -2
package/dist/assets/properties-panel.css ADDED
@@ -0,0 +1,780 @@
1
+ /**
2
+ * Theming
3
+ */
4
+ .bio-properties-panel {
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
8
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
9
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
10
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
11
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
12
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
13
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
14
+
15
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
16
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
17
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
18
+
19
+ --color-green-150-86-44: hsl(150, 86%, 44%);
20
+
21
+ --color-red-360-100-40: hsl(360, 100%, 40%);
22
+ --color-red-360-100-45: hsl(360, 100%, 45%);
23
+ --color-red-360-100-92: hsl(360, 100%, 92%);
24
+ --color-red-360-100-97: hsl(360, 100%, 97%);
25
+
26
+ --color-white: white;
27
+ --color-black: black;
28
+ --color-transparent: transparent;
29
+
30
+ --text-base-color: var(--color-grey-225-10-15);
31
+ --text-error-color: var(--color-red-360-100-45);
32
+ --description-color: var(--color-grey-225-10-35);
33
+
34
+ --placeholder-color: var(--color-grey-225-10-75);
35
+
36
+ --header-background-color: var(--color-grey-225-10-95);
37
+ --header-icon-fill-color: var(--color-grey-225-10-15);
38
+ --header-bottom-border-color: var(--color-grey-225-10-75);
39
+
40
+ --group-background-color: var(--color-white);
41
+ --group-bottom-border-color: var(--color-grey-225-10-75);
42
+
43
+ --add-entry-fill-color: var(--color-grey-225-10-35);
44
+ --add-entry-empty-fill-color: var(--color-grey-225-10-75);
45
+ --add-entry-hover-fill-color: var(--color-white);
46
+ --add-entry-hover-background-color: var(--color-blue-205-100-50);
47
+ --add-entry-label-color: var(--color-white);
48
+
49
+ --remove-entry-fill-color: var(--color-red-360-100-45);
50
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
51
+
52
+ --arrow-fill-color: var(--color-grey-225-10-35);
53
+ --arrow-hover-background-color: var(--color-grey-225-10-95);
54
+ --arrow-empty-fill-color: var(--color-grey-225-10-75);
55
+
56
+ --dot-color: var(--color-grey-225-10-35);
57
+
58
+ --list-badge-color: var(--color-white);
59
+ --list-badge-background-color: var(--color-grey-225-10-35);
60
+
61
+ --input-background-color: var(--color-grey-225-10-97);
62
+ --input-border-color: var(--color-grey-225-10-75);
63
+
64
+ --input-focus-background-color: var(--color-blue-205-100-95);
65
+ --input-focus-border-color: var(--color-blue-205-100-50);
66
+
67
+ --input-error-background-color: var(--color-red-360-100-97);
68
+ --input-error-border-color: var(--color-red-360-100-45);
69
+ --input-error-focus-border-color: var(--color-red-360-100-45);
70
+
71
+ --toggle-switch-on-background-color: var(--color-blue-205-100-50);
72
+ --toggle-switch-off-background-color: var(--color-grey-225-10-75);
73
+ --toggle-switch-switcher-background-color: var(--color-white);
74
+
75
+ --side-line-background-color: var(--color-grey-225-10-35);
76
+ --side-line-extension-background-color: var(--color-grey-225-10-35);
77
+
78
+ --list-entry-dot-background-color: var(--color-grey-225-10-35);
79
+ --list-entry-header-button-fill-color: var(--color-grey-225-10-35);
80
+ --list-entry-add-entry-empty-fill-color: var(--color-white);
81
+ --list-entry-add-entry-empty-background-color: var(--color-blue-205-100-50);
82
+ --list-entry-add-entry-empty-hover-background-color: var(--color-blue-205-100-45);
83
+ --list-entry-add-entry-label-color: var(--color-white);
84
+ --list-entry-add-entry-background-color: var(--color-blue-205-100-50);
85
+ --list-entry-add-entry-fill-color: var(--color-white);
86
+
87
+ --text-size-base: 14px;
88
+ --text-size-small: 13px;
89
+ --text-size-smallest: 12px;
90
+ --text-line-height: 21px;
91
+ --line-height-condensed: 17px;
92
+
93
+ --font-family: sans-serif;
94
+ --font-family-monospace: monospace;
95
+
96
+ display: none;
97
+ position: relative;
98
+ height: 100%;
99
+ width: 100%;
100
+ overflow: hidden;
101
+ }
102
+
103
+ .bio-properties-panel * {
104
+ color: var(--text-base-color);
105
+ font-size: var(--text-size-base);
106
+ line-height: var(--text-line-height);
107
+ font-weight: 400;
108
+ box-sizing: border-box;
109
+ }
110
+
111
+ .bio-properties-panel {
112
+ font-family: var(--font-family);
113
+ }
114
+
115
+ .bio-properties-panel.open {
116
+ display: flex;
117
+ flex-direction: column;
118
+ flex: 1;
119
+ }
120
+
121
+ .bio-properties-panel-placeholder {
122
+ padding: 10px;
123
+ color: var(--placeholder-color);
124
+ font-size: var(--text-size-base);
125
+ text-align: center;
126
+ }
127
+
128
+ /**
129
+ * Header
130
+ */
131
+ .bio-properties-panel-header {
132
+ display: flex;
133
+ flex-direction: row;
134
+ align-items: center;
135
+ font-size: var(--text-size-base);
136
+ padding: 16px 10px;
137
+ margin-bottom: 2px;
138
+ background-color: var(--header-background-color);
139
+ border-bottom: 1px solid var(--header-bottom-border-color);
140
+ width: 100%;
141
+ z-index: 1;
142
+ max-height: 64px;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .bio-properties-panel-header-icon {
147
+ fill: var(--header-icon-fill-color);
148
+ display: flex;
149
+ flex-direction: row;
150
+ align-items: center;
151
+ justify-content: center;
152
+ width: 32px;
153
+ height: 32px;
154
+ }
155
+
156
+ .bio-properties-panel-header-labels {
157
+ overflow: hidden;
158
+ margin-left: 12px;
159
+ user-select: none;
160
+ }
161
+
162
+ .bio-properties-panel-header-type {
163
+ font-size: var(--text-size-smallest);
164
+ font-weight: 600;
165
+ white-space: nowrap;
166
+ text-overflow: ellipsis;
167
+ overflow: hidden;
168
+ text-transform: uppercase;
169
+ }
170
+
171
+ .bio-properties-panel-header-label {
172
+ white-space: nowrap;
173
+ text-overflow: ellipsis;
174
+ overflow: hidden;
175
+ margin-top: -6px;
176
+ }
177
+
178
+ /**
179
+ * Scroll container
180
+ */
181
+ .bio-properties-panel-scroll-container {
182
+ overflow-y: auto;
183
+ overflow-x: hidden;
184
+ flex: 1;
185
+ padding-bottom: 70px;
186
+ }
187
+
188
+ /**
189
+ * Groups
190
+ */
191
+ .bio-properties-panel-group {
192
+ background-color: var(--group-background-color);
193
+ border-bottom: 1px solid var(--group-bottom-border-color);
194
+ }
195
+
196
+ .bio-properties-panel-group-header {
197
+ position: relative;
198
+ display: flex;
199
+ flex-direction: row;
200
+ align-items: center;
201
+ font-size: var(--text-size-base);
202
+ height: 32px;
203
+ user-select: none;
204
+ overflow: hidden;
205
+ justify-content: space-between;
206
+ }
207
+
208
+ .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
209
+ white-space: nowrap;
210
+ overflow: hidden;
211
+ text-overflow: ellipsis;
212
+ margin: 1px 12px 0;
213
+ }
214
+
215
+ .bio-properties-panel-group-header.open .bio-properties-panel-group-header-title {
216
+ font-weight: 500;
217
+ }
218
+
219
+ .bio-properties-panel-group-header-buttons {
220
+ display: flex;
221
+ }
222
+
223
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-button {
224
+ display: inline-flex;
225
+ justify-content: center;
226
+ align-items: center;
227
+ align-self: center;
228
+ font-size: var(--text-size-small);
229
+ height: 22px;
230
+ line-height: 22px;
231
+ min-width: 22px;
232
+ margin: 5px;
233
+ padding: 0 3px;
234
+ border: none;
235
+ background: none;
236
+ }
237
+
238
+ .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
239
+ margin-right: 0;
240
+ }
241
+
242
+ .bio-properties-panel-add-entry {
243
+ fill: var(--add-entry-fill-color);
244
+ border-radius: 11px;
245
+ }
246
+
247
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
248
+ fill: var(--add-entry-empty-fill-color);
249
+ margin-right: 69px;
250
+ padding-left: 6px;
251
+ }
252
+
253
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
254
+ margin-right: 19px;
255
+ }
256
+
257
+ .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
258
+ display: none;
259
+ color: var(--add-entry-label-color);
260
+ padding: 4px 6px 3px 2px;
261
+ }
262
+
263
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {
264
+ background-color: var(--add-entry-hover-background-color);
265
+ fill: var(--add-entry-hover-fill-color);
266
+ }
267
+
268
+ .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover .bio-properties-panel-add-entry-label {
269
+ display: block;
270
+ }
271
+
272
+ .bio-properties-panel-group-entries {
273
+ display: none;
274
+ }
275
+
276
+ .bio-properties-panel-group-entries.open {
277
+ display: block;
278
+ }
279
+
280
+ .bio-properties-panel-arrow {
281
+ display: flex;
282
+ justify-content: center;
283
+ text-align: center;
284
+ fill: var(--arrow-fill-color);
285
+ min-width: 22px;
286
+ border-radius: 11px;
287
+ border: none;
288
+ background: none;
289
+ }
290
+
291
+ .bio-properties-panel-arrow:hover {
292
+ background-color: var(--arrow-hover-background-color);
293
+ }
294
+
295
+ .bio-properties-panel-arrow-down {
296
+ transform: rotate(90deg);
297
+ }
298
+
299
+ .bio-properties-panel-group-header.empty .bio-properties-panel-arrow {
300
+ fill: var(--arrow-empty-fill-color);
301
+ }
302
+
303
+ .bio-properties-panel-dot {
304
+ align-self: center;
305
+ height: 8px;
306
+ min-width: 8px;
307
+ border-radius: 50%;
308
+ margin: 12px;
309
+ background-color: var(--dot-color);
310
+ }
311
+
312
+ /**
313
+ * Lists
314
+ */
315
+ .bio-properties-panel-list {
316
+ display: none;
317
+ }
318
+
319
+ .bio-properties-panel-list.open {
320
+ display: block;
321
+ margin-bottom: 6px;
322
+ padding-bottom: 2px;
323
+ }
324
+
325
+ .bio-properties-panel-list-badge {
326
+ height: 22px;
327
+ min-width: 22px;
328
+ color: var(--list-badge-color);
329
+ border-radius: 11px;
330
+ font-size: var(--text-size-small);
331
+ line-height: 22px;
332
+ text-align: center;
333
+ user-select: none;
334
+ padding: 0 5px;
335
+ margin: 5px;
336
+ background-color: var(--list-badge-background-color);
337
+ }
338
+
339
+ /**
340
+ * Basic entries
341
+ */
342
+ .bio-properties-panel-entry {
343
+ margin: 2px 32px 6px 12px;
344
+ }
345
+
346
+ .bio-properties-panel-entry:last-child {
347
+ padding-bottom: 10px;
348
+ }
349
+
350
+ .bio-properties-panel-label {
351
+ display: block;
352
+ font-size: var(--text-size-small);
353
+ margin: 2px 0 1px;
354
+ }
355
+
356
+ .bio-properties-panel-description {
357
+ color: var(--description-color);
358
+ display: block;
359
+ margin: 2px 0 4px;
360
+ line-height: var(--line-height-condensed);
361
+ font-weight: 400;
362
+ font-size: var(--text-size-small);
363
+ }
364
+
365
+ .bio-properties-panel-input {
366
+ padding: 3px 6px 2px;
367
+ border: 1px solid var(--input-border-color);
368
+ border-radius: 2px;
369
+ background-color: var(--input-background-color);
370
+ font-size: var(--text-size-base);
371
+ font-family: inherit;
372
+ }
373
+
374
+ .bio-properties-panel-input[type=number],
375
+ select.bio-properties-panel-input,
376
+ textarea.bio-properties-panel-input,
377
+ .bio-properties-panel-input[type=text] {
378
+ display: block;
379
+ width: 100%;
380
+ }
381
+
382
+ .bio-properties-panel-input:focus {
383
+ outline: none;
384
+ background-color: var(--input-focus-background-color);
385
+ border: 1px solid var(--input-focus-border-color);
386
+ }
387
+
388
+ select.bio-properties-panel-input {
389
+ padding: 4px 6px;
390
+ }
391
+
392
+ .bio-properties-panel-input-monospace {
393
+ font-family: var(--font-family-monospace);
394
+ }
395
+
396
+ .bio-properties-panel-input[type="checkbox"], .bio-properties-panel-input[type="radio"] {
397
+ margin: 0;
398
+ vertical-align: middle;
399
+ }
400
+
401
+ .bio-properties-panel-checkbox > .bio-properties-panel-label {
402
+ display: inline-block;
403
+ font-size: var(--text-size-base);
404
+ margin-left: 6px;
405
+ margin-top: auto;
406
+ vertical-align: middle;
407
+ }
408
+
409
+ .bio-properties-panel-checkbox-entry + .bio-properties-panel-checkbox-entry {
410
+ margin-top: -8px;
411
+ }
412
+
413
+ .bio-properties-panel-checkbox-entry > .bio-properties-panel-description {
414
+ margin-left: 18px;
415
+ }
416
+
417
+ textarea.bio-properties-panel-input {
418
+ resize: vertical;
419
+ }
420
+
421
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input {
422
+ border-color: var(--input-error-border-color);
423
+ background-color: var(--input-error-background-color);
424
+ }
425
+
426
+ .bio-properties-panel-entry.has-error .bio-properties-panel-input:focus {
427
+ border-color: var(--input-error-focus-border-color);
428
+ }
429
+
430
+ .bio-properties-panel-entry .bio-properties-panel-error {
431
+ color: var(--text-error-color);
432
+ margin: 4px 0;
433
+ font-size: var(--text-size-small);
434
+ }
435
+
436
+ .bio-properties-panel-simple {
437
+ width: 100%;
438
+ margin-right: 8px;
439
+ }
440
+
441
+ .bio-properties-panel-simple + .bio-properties-panel-remove-entry {
442
+ margin: auto;
443
+ }
444
+
445
+ /**
446
+ * Toggle Switch
447
+ */
448
+ .bio-properties-panel-toggle-switch-entry + .bio-properties-panel-toggle-switch-entry {
449
+ margin-top: -8px;
450
+ }
451
+
452
+ .bio-properties-panel-toggle-switch-entry > .bio-properties-panel-description {
453
+ margin-left: 38px;
454
+ }
455
+
456
+ .bio-properties-panel-toggle-switch .bio-properties-panel-field-wrapper {
457
+ display: flex;
458
+ flex-direction: row;
459
+ align-items: center;
460
+ }
461
+
462
+ .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
463
+ font-size: var(--text-size-base);
464
+ }
465
+
466
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
467
+ margin: 0;
468
+ margin-left: 6px;
469
+ font-size: var(--text-size-base);
470
+ }
471
+
472
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher {
473
+ position: relative;
474
+ width: 32px;
475
+ height: 16px;
476
+ }
477
+
478
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
479
+ opacity: 0;
480
+ width: 0;
481
+ height: 0;
482
+ }
483
+
484
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
485
+ position: absolute;
486
+ top: 0;
487
+ left: 0;
488
+ right: 0;
489
+ bottom: 0;
490
+ background-color: var(--toggle-switch-off-background-color);
491
+ -webkit-transition: 0.4s;
492
+ transition: 0.4s;
493
+ border-radius: 34px;
494
+ }
495
+
496
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider:before {
497
+ position: absolute;
498
+ content: "";
499
+ height: 12px;
500
+ width: 12px;
501
+ left: 2px;
502
+ bottom: 2px;
503
+ background-color: var(--toggle-switch-switcher-background-color);
504
+ -webkit-transition: 0.4s;
505
+ transition: 0.4s;
506
+ border-radius: 50%;
507
+ }
508
+
509
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider {
510
+ background-color: var(--toggle-switch-on-background-color);
511
+ box-shadow: 0 0 1px ;
512
+ }
513
+
514
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox']:checked + .bio-properties-panel-toggle-switch__slider:before {
515
+ -webkit-transform: translateX(16px);
516
+ -ms-transform: translateX(16px);
517
+ transform: translateX(16px);
518
+ }
519
+
520
+ /**
521
+ * Collapsible entries
522
+ */
523
+ .bio-properties-panel-collapsible-entry-entries {
524
+ position: relative;
525
+ display: none;
526
+ }
527
+
528
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child {
529
+ padding-bottom: 0;
530
+ }
531
+
532
+ .bio-properties-panel-collapsible-entry-entries.open {
533
+ display: block;
534
+ }
535
+
536
+ .bio-properties-panel-collapsible-entry-entries {
537
+ padding-left: 20px;
538
+ margin-bottom: 10px;
539
+ position: relative;
540
+ display: none;
541
+ }
542
+
543
+ .bio-properties-panel-collapsible-entry-header {
544
+ position: relative;
545
+ display: flex;
546
+ justify-content: space-between;
547
+ align-items: center;
548
+ overflow: hidden;
549
+ }
550
+
551
+ .bio-properties-panel-collapsible-entry-header .bio-properties-panel-collapsible-entry-header-title {
552
+ padding: 2px 24px 2px 32px;
553
+ font-size: var(--text-size-base);
554
+ white-space: nowrap;
555
+ overflow: hidden;
556
+ text-overflow: ellipsis;
557
+ user-select: none;
558
+ }
559
+
560
+ .bio-properties-panel-collapsible-entry-arrow {
561
+ position: absolute;
562
+ top: 2px;
563
+ left: 6px;
564
+ padding: 0 3px;
565
+ height: 22px;
566
+ display: inline-flex;
567
+ justify-content: center;
568
+ align-items: center;
569
+ align-self: center;
570
+ }
571
+
572
+ .bio-properties-panel-remove-entry {
573
+ display: flex;
574
+ align-items: center;
575
+ justify-content: center;
576
+ margin-right: 5px;
577
+ padding: 0;
578
+ width: 22px;
579
+ height: 22px;
580
+ fill: var(--remove-entry-fill-color);
581
+ border-radius: 50%;
582
+ border: none;
583
+ background: none;
584
+ visibility: hidden;
585
+ }
586
+
587
+ .bio-properties-panel-remove-entry:hover {
588
+ background-color: var(--remove-entry-hover-background-color);
589
+ }
590
+
591
+ .bio-properties-panel-list-entry-item:hover .bio-properties-panel-remove-list-entry,
592
+ .bio-properties-panel-collapsible-entry:hover > .bio-properties-panel-collapsible-entry-header .bio-properties-panel-remove-entry {
593
+ visibility: visible;
594
+ }
595
+
596
+ /* Side line */
597
+ .bio-properties-panel-collapsible-entry-entries::before {
598
+ content: "";
599
+ position: absolute;
600
+ left: 16px;
601
+ width: 2px;
602
+ top: -6px;
603
+ bottom: 12px;
604
+ background-color: var(--side-line-background-color);
605
+ border-radius: 1px;
606
+ }
607
+
608
+ /* Side line extension for non-list entry or open list entry positioned as the last one. */
609
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child,
610
+ .bio-properties-panel-list-entry.open:last-child {
611
+ position: relative;
612
+ }
613
+
614
+ .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:not(.bio-properties-panel-list-entry):last-child::after,
615
+ .bio-properties-panel-list-entry.open:last-child::after {
616
+ content: "";
617
+ position: absolute;
618
+ left: -16px;
619
+ width: 2px;
620
+ top: 0;
621
+ bottom: -4px;
622
+ background-color: var(--side-line-extension-background-color);
623
+ border-radius: 1px;
624
+ }
625
+
626
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries .bio-properties-panel-entry:last-child::after {
627
+ left: -18px;
628
+ }
629
+
630
+ /*
631
+ * List entry
632
+ */
633
+ .bio-properties-panel-list-entry {
634
+ position: relative;
635
+ margin-right: 5px;
636
+ margin-bottom: 0;
637
+ }
638
+
639
+ .bio-properties-panel-list-entry .bio-properties-panel-entry {
640
+ margin-right: 0;
641
+ }
642
+
643
+ .bio-properties-panel-list-entry-header {
644
+ position: relative;
645
+ overflow: hidden;
646
+ display: flex;
647
+ justify-content: space-between;
648
+ height: 32px;
649
+ }
650
+
651
+ /* Nested list dot */
652
+ .bio-properties-panel-list-entry::before {
653
+ content: "";
654
+ width: 8px;
655
+ height: 8px;
656
+ position: absolute;
657
+ left: -19px;
658
+ top: 13px;
659
+ border-radius: 50%;
660
+ background-color: var(--list-entry-dot-background-color);
661
+ }
662
+
663
+ .bio-properties-panel-list-entry-header-title {
664
+ display: block;
665
+ margin: auto 0;
666
+ padding: 2px 0;
667
+ font-size: var(--text-size-base);
668
+ white-space: nowrap;
669
+ overflow: hidden;
670
+ text-overflow: ellipsis;
671
+ }
672
+
673
+ .bio-properties-panel-list-entry-header-title.open {
674
+ font-weight: 500;
675
+ }
676
+
677
+ .bio-properties-panel-list-entry-header-buttons {
678
+ display: flex;
679
+ align-items: center;
680
+ }
681
+
682
+ .bio-properties-panel-list-entry-header-buttons > button {
683
+ display: inline-flex;
684
+ justify-content: center;
685
+ align-items: center;
686
+ align-self: center;
687
+ height: 22px;
688
+ line-height: 22px;
689
+ min-width: 22px;
690
+ margin: 5px;
691
+ padding: 0 3px;
692
+ border: none;
693
+ background: none;
694
+ fill: var(--list-entry-header-button-fill-color);
695
+ }
696
+
697
+ .bio-properties-panel-list-entry-header-buttons > :last-child {
698
+ margin-right: 0;
699
+ }
700
+
701
+ .bio-properties-panel-list-entry-items {
702
+ padding: 0;
703
+ margin: 0;
704
+
705
+ list-style: none;
706
+ }
707
+
708
+ .bio-properties-panel-list-entry-items:not(.open) {
709
+ display: none;
710
+ }
711
+
712
+ .bio-properties-panel-list-entry-item {
713
+ display: flex;
714
+ justify-content: space-between;
715
+ }
716
+
717
+ .bio-properties-panel-list-entry-item .bio-properties-panel-remove-entry {
718
+ margin-right: 1px;
719
+ }
720
+
721
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry {
722
+ width: 100%;
723
+ margin-right: 4px;
724
+ }
725
+
726
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header {
727
+ margin-left: -8px;
728
+ }
729
+
730
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-arrow {
731
+ left: 2px;
732
+ }
733
+
734
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-header-title {
735
+ padding-left: 30px;
736
+ }
737
+
738
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries {
739
+ padding-left: 10px;
740
+ }
741
+
742
+ .bio-properties-panel-list-entry-item .bio-properties-panel-collapsible-entry-entries::before {
743
+ left: 4px;
744
+ }
745
+
746
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry {
747
+ fill: var(--list-entry-add-entry-empty-fill-color);
748
+ background-color: var(--list-entry-add-entry-empty-background-color);
749
+ margin-right: 16px;
750
+ padding-left: 6px;
751
+ }
752
+
753
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry:hover {
754
+ background-color: var(--list-entry-add-entry-empty-hover-background-color);
755
+ }
756
+
757
+ .bio-properties-panel-list-entry.empty .bio-properties-panel-add-entry-label {
758
+ color: var(--list-entry-add-entry-label-color);
759
+ padding: 4px 6px 3px 2px;
760
+ }
761
+
762
+ .bio-properties-panel-list-entry-header-buttons .bio-properties-panel-add-entry:hover {
763
+ background-color: var(--list-entry-add-entry-background-color);
764
+ fill: var(--list-entry-add-entry-fill-color);
765
+ }
766
+
767
+ .bio-properties-panel-list-entry-item .bio-properties-panel-simple .bio-properties-panel-input {
768
+ border-radius: 0;
769
+ margin-bottom: -2px;
770
+ }
771
+
772
+ .bio-properties-panel-list-entry-item:first-child .bio-properties-panel-simple .bio-properties-panel-input {
773
+ border-top-left-radius: 2px;
774
+ border-top-right-radius: 2px;
775
+ }
776
+
777
+ .bio-properties-panel-list-entry-item:last-child .bio-properties-panel-simple .bio-properties-panel-input {
778
+ border-bottom-left-radius: 2px;
779
+ border-bottom-right-radius: 2px;
780
+ }