@bpmn-io/form-js-editor 1.21.3 → 1.23.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 (13) hide show
  1. package/dist/assets/form-js-editor-base.css +9 -1
  2. package/dist/assets/form-js-editor.css +38 -2
  3. package/dist/assets/properties-panel.css +31 -1
  4. package/dist/index.cjs +364 -165
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +362 -165
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/types/FormEditor.d.ts +4 -0
  9. package/dist/types/features/context-pad/DeleteActionProvider.d.ts +22 -0
  10. package/dist/types/features/context-pad/FormFieldContextActions.d.ts +38 -0
  11. package/dist/types/features/context-pad/index.d.ts +9 -0
  12. package/dist/types/index.d.ts +1 -0
  13. package/package.json +6 -6
package/dist/assets/form-js-editor-base.css CHANGED
@@ -120,7 +120,7 @@
120
120
  --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
121
121
 
122
122
  --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
123
- --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
123
+ --side-line-extension-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
124
124
 
125
125
  --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
126
126
  --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
@@ -180,6 +180,10 @@
180
180
  flex-grow: 1;
181
181
  }
182
182
 
183
+ .fjs-editor-container .fjs-editor-form-root {
184
+ padding-bottom: 28px;
185
+ }
186
+
183
187
  .fjs-editor-container .fjs-children .fjs-children {
184
188
  margin: 3px 0;
185
189
  }
@@ -454,6 +458,9 @@
454
458
  position: absolute;
455
459
  top: 0;
456
460
  right: 5px;
461
+ display: flex;
462
+ flex-direction: row;
463
+ gap: 2px;
457
464
  }
458
465
 
459
466
  .fjs-editor-container .fjs-context-pad-item {
@@ -466,6 +473,7 @@
466
473
  display: flex;
467
474
  justify-content: center;
468
475
  align-items: center;
476
+ cursor: pointer;
469
477
  }
470
478
 
471
479
  .fjs-editor-container .fjs-context-pad-item:hover {
package/dist/assets/form-js-editor.css CHANGED
@@ -101,7 +101,7 @@
101
101
  --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
102
102
  --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
103
103
  --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
104
- --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
104
+ --side-line-extension-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
105
105
  --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
106
106
  --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
107
107
  --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
@@ -158,6 +158,10 @@
158
158
  flex-grow: 1;
159
159
  }
160
160
 
161
+ .fjs-editor-container .fjs-editor-form-root {
162
+ padding-bottom: 28px;
163
+ }
164
+
161
165
  .fjs-editor-container .fjs-children .fjs-children {
162
166
  margin: 3px 0;
163
167
  }
@@ -430,6 +434,9 @@
430
434
  position: absolute;
431
435
  top: 0;
432
436
  right: 5px;
437
+ display: flex;
438
+ flex-direction: row;
439
+ gap: 2px;
433
440
  }
434
441
 
435
442
  .fjs-editor-container .fjs-context-pad-item {
@@ -442,6 +449,7 @@
442
449
  display: flex;
443
450
  justify-content: center;
444
451
  align-items: center;
452
+ cursor: pointer;
445
453
  }
446
454
 
447
455
  .fjs-editor-container .fjs-context-pad-item:hover {
@@ -883,6 +891,7 @@
883
891
  --description-code-background-color: var(--color-grey-225-10-97);
884
892
  --description-code-border-color: var(--color-grey-225-10-85);
885
893
  --description-list-item-color: var(--color-grey-225-10-35);
894
+ --tooltip-underline-color: var(--color-grey-225-10-55);
886
895
  --placeholder-color: var(--color-grey-225-10-35);
887
896
  --placeholder-background-color: var(--color-grey-225-10-95);
888
897
  --header-background-color: var(--color-grey-225-10-95);
@@ -1350,6 +1359,7 @@ select.bio-properties-panel-input {
1350
1359
  padding: 4px 6px;
1351
1360
  }
1352
1361
 
1362
+ .bio-properties-panel code,
1353
1363
  .bio-properties-panel-input-monospace {
1354
1364
  font-family: var(--font-family-monospace);
1355
1365
  }
@@ -1415,6 +1425,26 @@ textarea.bio-properties-panel-input {
1415
1425
  margin: auto;
1416
1426
  }
1417
1427
 
1428
+ /**
1429
+ * JSON Editor (CodeMirror)
1430
+ */
1431
+ .bio-properties-panel-json-editor .bio-properties-panel-input {
1432
+ padding: 0;
1433
+ }
1434
+
1435
+ .bio-properties-panel-json-editor .cm-editor {
1436
+ font-family: var(--font-family-monospace);
1437
+ }
1438
+
1439
+ .bio-properties-panel-json-editor .cm-editor.cm-focused {
1440
+ outline: none;
1441
+ }
1442
+
1443
+ .bio-properties-panel-json-editor .cm-scroller {
1444
+ overflow: auto;
1445
+ max-height: 215px;
1446
+ }
1447
+
1418
1448
  /**
1419
1449
  * Toggle Switch
1420
1450
  */
@@ -1965,14 +1995,20 @@ textarea.bio-properties-panel-input {
1965
1995
  text-decoration: underline;
1966
1996
  text-decoration-style: dotted;
1967
1997
  text-underline-offset: 2px;
1998
+ text-decoration-color: var(--tooltip-underline-color);
1968
1999
  font: inherit;
1969
2000
  display: flex;
1970
2001
  justify-content: center;
1971
2002
  width: fit-content;
1972
2003
  }
1973
2004
 
2005
+ .bio-properties-panel-tooltip-wrapper:hover,
2006
+ .bio-properties-panel-tooltip-wrapper:focus,
2007
+ .bio-properties-panel-tooltip-wrapper:focus-visible {
2008
+ text-decoration-color: currentColor;
2009
+ }
2010
+
1974
2011
  .bio-properties-panel-tooltip {
1975
- --tooltip-underline-color: var(--color-blue-219-99-53);
1976
2012
  --tooltip-background-color: var(--color-grey-0-0-22);
1977
2013
  --tooltip-link: var(--color-blue-218-100-74);
1978
2014
  --tooltip-code-background-color: var(--color-grey-225-10-97);
package/dist/assets/properties-panel.css CHANGED
@@ -44,6 +44,8 @@
44
44
  --description-code-border-color: var(--color-grey-225-10-85);
45
45
  --description-list-item-color: var(--color-grey-225-10-35);
46
46
 
47
+ --tooltip-underline-color: var(--color-grey-225-10-55);
48
+
47
49
  --placeholder-color: var(--color-grey-225-10-35);
48
50
  --placeholder-background-color: var(--color-grey-225-10-95);
49
51
 
@@ -534,6 +536,7 @@ select.bio-properties-panel-input {
534
536
  padding: 4px 6px;
535
537
  }
536
538
 
539
+ .bio-properties-panel code,
537
540
  .bio-properties-panel-input-monospace {
538
541
  font-family: var(--font-family-monospace);
539
542
  }
@@ -599,6 +602,27 @@ textarea.bio-properties-panel-input {
599
602
  margin: auto;
600
603
  }
601
604
 
605
+ /**
606
+ * JSON Editor (CodeMirror)
607
+ */
608
+
609
+ .bio-properties-panel-json-editor .bio-properties-panel-input {
610
+ padding: 0;
611
+ }
612
+
613
+ .bio-properties-panel-json-editor .cm-editor {
614
+ font-family: var(--font-family-monospace);
615
+ }
616
+
617
+ .bio-properties-panel-json-editor .cm-editor.cm-focused {
618
+ outline: none;
619
+ }
620
+
621
+ .bio-properties-panel-json-editor .cm-scroller {
622
+ overflow: auto;
623
+ max-height: 215px;
624
+ }
625
+
602
626
  /**
603
627
  * Toggle Switch
604
628
  */
@@ -1160,14 +1184,20 @@ textarea.bio-properties-panel-input {
1160
1184
  text-decoration: underline;
1161
1185
  text-decoration-style: dotted;
1162
1186
  text-underline-offset: 2px;
1187
+ text-decoration-color: var(--tooltip-underline-color);
1163
1188
  font: inherit;
1164
1189
  display: flex;
1165
1190
  justify-content: center;
1166
1191
  width: fit-content;
1167
1192
  }
1168
1193
 
1194
+ .bio-properties-panel-tooltip-wrapper:hover,
1195
+ .bio-properties-panel-tooltip-wrapper:focus,
1196
+ .bio-properties-panel-tooltip-wrapper:focus-visible {
1197
+ text-decoration-color: currentColor;
1198
+ }
1199
+
1169
1200
  .bio-properties-panel-tooltip {
1170
- --tooltip-underline-color: var(--color-blue-219-99-53);
1171
1201
  --tooltip-background-color: var(--color-grey-0-0-22);
1172
1202
  --tooltip-link: var(--color-blue-218-100-74);
1173
1203
  --tooltip-code-background-color: var(--color-grey-225-10-97);