@bpmn-io/form-js-editor 0.14.0 → 0.15.0-alpha.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 (37) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +116 -116
  3. package/dist/assets/form-js-editor-base.css +704 -489
  4. package/dist/assets/form-js-editor.css +229 -35
  5. package/dist/index.cjs +1049 -523
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +920 -394
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/FormEditor.d.ts +9 -4
  10. package/dist/types/core/EventBus.d.ts +1 -1
  11. package/dist/types/core/FormLayoutValidator.d.ts +5 -1
  12. package/dist/types/core/index.d.ts +2 -1
  13. package/dist/types/features/dragging/Dragging.d.ts +3 -3
  14. package/dist/types/features/editor-actions/FormEditorActions.d.ts +2 -1
  15. package/dist/types/features/editor-actions/index.d.ts +1 -1
  16. package/dist/types/features/keyboard/index.d.ts +1 -1
  17. package/dist/types/features/modeling/FormLayoutUpdater.d.ts +2 -1
  18. package/dist/types/features/modeling/behavior/IdBehavior.d.ts +2 -1
  19. package/dist/types/features/modeling/behavior/KeyBehavior.d.ts +2 -1
  20. package/dist/types/features/modeling/behavior/ValidateBehavior.d.ts +2 -1
  21. package/dist/types/features/modeling/index.d.ts +6 -1
  22. package/dist/types/features/palette/PaletteRenderer.d.ts +1 -1
  23. package/dist/types/features/palette/components/Palette.d.ts +1 -1
  24. package/dist/types/features/properties-panel/PropertiesPanel.d.ts +1 -1
  25. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  26. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +1 -1
  27. package/dist/types/features/properties-panel/entries/InputKeyValuesSourceEntry.d.ts +1 -1
  28. package/dist/types/render/Renderer.d.ts +1 -1
  29. package/dist/types/render/components/FieldDragPreview.d.ts +1 -1
  30. package/dist/types/render/components/FieldResizer.d.ts +1 -0
  31. package/dist/types/render/components/FormEditor.d.ts +1 -1
  32. package/dist/types/render/components/Util.d.ts +27 -1
  33. package/dist/types/render/components/editor-form-fields/EditorText.d.ts +2 -4
  34. package/dist/types/render/components/icons/index.d.ts +1 -1
  35. package/dist/types/types.d.ts +28 -28
  36. package/package.json +4 -3
  37. package/dist/types/features/properties-panel/icons/index.d.ts +0 -1
package/dist/assets/form-js-editor.css CHANGED
@@ -1,49 +1,182 @@
1
1
  .fjs-editor-container {
2
- --color-children-border: var(--color-grey-225-10-75);
3
- --color-children-selected-border: var(--color-blue-219-100-53);
2
+ --color-children-border: var(
3
+ --cds-border-strong,
4
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
5
+ );
6
+ --color-children-selected-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
4
7
  --color-children-selected-background: transparent;
5
- --color-children-hover-border: var(--color-blue-219-100-53-05);
6
- --color-context-pad-item-background: var(--color-white);
7
- --color-context-pad-item-fill: var(--color-grey-225-10-35);
8
- --color-context-pad-item-hover-fill: var(--color-black);
9
- --color-dragula-background: var(--color-blue-205-100-95);
10
- --color-dragula-border: var(--color-blue-205-100-45);
11
- --color-dragula-mirror-background: var(--color-white);
12
- --color-dragula-mirror-border: var(--color-grey-225-10-90);
8
+ --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
9
+ --color-context-pad-item-background: transparent;
10
+ --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
11
+ --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
12
+ --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
13
+ --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
14
+ --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
15
+ --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
16
+ --color-dragula-mirror-background: var(--cds-background, var(--color-white));
17
+ --color-dragula-mirror-border: var(
18
+ --cds-border-strong,
19
+ var(--cds-border-strong-01, var(--color-grey-225-10-90))
20
+ );
13
21
  --color-dragula-error-background: var(--color-red-360-100-92);
14
- --color-dragula-error-border: var(--color-red-360-100-45);
22
+ --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
15
23
  }
16
24
 
17
25
  .fjs-palette-container {
18
- --color-palette-text: var(--color-grey-225-10-15);
19
- --color-palette-container-background: var(--color-grey-225-10-95);
20
- --color-palette-container-border: var(--color-grey-225-10-80);
21
- --color-palette-header: var(--color-text);
22
- --color-palette-header-background: var(--color-grey-225-10-95);
23
- --color-palette-header-border: var(--color-grey-225-10-85);
26
+ --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
27
+ --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
28
+ --color-palette-container-border: var(
29
+ --cds-border-strong,
30
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
31
+ );
32
+ --color-palette-header: var(--cds-text-primary, var(--color-text));
33
+ --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
34
+ --color-palette-header-border: var(
35
+ --cds-border-strong,
36
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
37
+ );
24
38
  --color-palette-search: var(--color-palette-text);
25
- --color-palette-search-icon: var(--color-grey-225-10-35);
26
- --color-palette-search-icon-hover: var(--color-grey-225-10-15);
27
- --color-palette-search-background: var(--color-white);
28
- --color-palette-search-border: var(--color-grey-225-10-75);
29
- --color-palette-search-focus-background: var(--color-blue-205-100-95);
30
- --color-palette-search-focus-border: var(--color-blue-205-100-50);
31
- --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
39
+ --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
40
+ --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
41
+ --color-palette-search-background: var(
42
+ --cds-field,
43
+ var(--cds-field-01, var(--color-white))
44
+ );
45
+ --color-palette-search-border: var(
46
+ --cds-border-strong,
47
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
48
+ );
49
+ --color-palette-search-focus-background: var(
50
+ --cds-field,
51
+ var(--cds-field-01, var(--color-blue-205-100-95))
52
+ );
53
+ --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
54
+ --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
32
55
  --color-palette-group-title: var(--color-palette-text);
33
56
  --color-palette-field: var(--color-palette-text);
34
- --color-palette-field-background: var(--color-white);
35
- --color-palette-field-border: var(--color-grey-225-10-80);
36
- --color-palette-field-hover-background: var(--color-grey-225-10-90);
57
+ --color-palette-field-background: var(
58
+ --cds-layer,
59
+ var(--cds-layer-01, var(--color-white))
60
+ );
61
+ --color-palette-field-border: var(
62
+ --cds-border-strong,
63
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
64
+ );
65
+ --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
37
66
  --cursor-palette-field: grab;
38
67
  --palette-width: 250px;
39
68
  }
40
69
 
41
70
  .fjs-properties-container {
42
- --color-properties-container-background: var(--color-white);
43
- --color-properties-container-border: var(--color-grey-225-10-80);
71
+ --color-properties-container-background: var(--cds-background, var(--color-white));
72
+ --color-properties-container-border: var(
73
+ --cds-border-strong,
74
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
75
+ );
44
76
  --properties-panel-width: 300px;
45
77
  }
46
78
 
79
+ /**
80
+ * Theming overrides
81
+ */
82
+ .fjs-properties-container .bio-properties-panel {
83
+ --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
84
+ --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
85
+ --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
86
+ --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
87
+ --description-code-background-color: var(
88
+ --cds-layer,
89
+ var(--cds-layer-01, var(--color-grey-225-10-97))
90
+ );
91
+ --description-code-border-color: var(
92
+ --cds-border-strong,
93
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
94
+ );
95
+ --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
96
+ --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
97
+ --placeholder-background-color: var(
98
+ --cds-layer,
99
+ var(--cds-layer-01, var(--color-grey-225-10-95))
100
+ );
101
+ --header-background-color: var(
102
+ --cds-layer,
103
+ var(--cds-layer-01, var(--color-grey-225-10-95))
104
+ );
105
+ --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
106
+ --header-bottom-border-color: var(--color-grey-225-10-75);
107
+ --group-background-color: var(--cds-background, var(--color-white));
108
+ --group-bottom-border-color: var(
109
+ --cds-border-strong,
110
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
111
+ );
112
+ --sticky-group-background-color: var(
113
+ --cds-layer,
114
+ var(--cds-layer-01, var(--color-grey-225-10-95))
115
+ );
116
+ --sticky-group-bottom-border-color: var(
117
+ --cds-border-strong,
118
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
119
+ );
120
+ --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
121
+ --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
122
+ --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
123
+ --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
124
+ --remove-entry-fill-color: var(--color-red-360-100-45);
125
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
126
+ --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
127
+ --arrow-hover-background-color: var(
128
+ --cds-layer,
129
+ var(--cds-layer-01, var(--color-grey-225-10-95))
130
+ );
131
+ --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
132
+ --list-badge-color: var(--cds-text-inverse, var(--color-white));
133
+ --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
134
+ --input-background-color: var(
135
+ --cds-field,
136
+ var(--cds-field-01, var(--color-grey-225-10-97))
137
+ );
138
+ --input-border-color: var(
139
+ --cds-border-strong,
140
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
141
+ );
142
+ --input-focus-background-color: var(
143
+ --cds-field,
144
+ var(--cds-field-01, var(--color-blue-205-100-95))
145
+ );
146
+ --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
147
+ --input-error-background-color: var(
148
+ --cds-field,
149
+ var(--cds-field-01, var(--color-red-360-100-97))
150
+ );
151
+ --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
152
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
153
+ --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
154
+ --input-disabled-background-color: var(
155
+ --cds-field,
156
+ var(--cds-field-01, var(--color-grey-225-10-97))
157
+ );
158
+ --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
159
+ --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
160
+ --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
161
+ --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
162
+ --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
163
+ --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
164
+ --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
165
+ --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
166
+ --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
167
+ --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
168
+ --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
169
+ --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
170
+ --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
171
+ --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-35));
172
+ --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
173
+ --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
174
+ }
175
+
176
+ .fjs-properties-container .bio-properties-panel-input {
177
+ color: var(--color-text);
178
+ }
179
+
47
180
  .fjs-editor-container {
48
181
  height: 100%;
49
182
  width: 100%;
@@ -109,6 +242,10 @@
109
242
  user-select: none;
110
243
  }
111
244
 
245
+ .fjs-editor-container .fjs-drop-container-horizontal {
246
+ width: 100%;
247
+ }
248
+
112
249
  .fjs-editor-container .fjs-layout-row {
113
250
  padding: 4px 0px;
114
251
  }
@@ -143,6 +280,64 @@
143
280
  visibility: visible;
144
281
  }
145
282
 
283
+ .fjs-editor-container .fjs-drag-move {
284
+ padding-left: 3px;
285
+ }
286
+
287
+ .fjs-editor-container .fjs-field-resize-handle {
288
+ resize: horizontal;
289
+ position: absolute;
290
+ visibility: hidden;
291
+ width: 6px;
292
+ top: 0;
293
+ bottom: 0;
294
+ margin: auto;
295
+ height: 50px;
296
+ max-height: calc(100% - 2px);
297
+ border: 1px solid var(--color-resize-handle-border);
298
+ border-radius: 50px;
299
+ background: var(--color-white);
300
+ z-index: 3;
301
+ }
302
+
303
+ .fjs-editor-container .fjs-field-resize-handle-right {
304
+ right: -4px;
305
+ cursor: ew-resize;
306
+ }
307
+
308
+ .fjs-editor-container .fjs-field-resize-handle-left {
309
+ left: -4px;
310
+ cursor: ew-resize;
311
+ }
312
+
313
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
314
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
315
+ .fjs-editor-container .fjs-field-resize-handle:hover {
316
+ background: var(--color-resize-handle-background);
317
+ }
318
+
319
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
320
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
321
+ display: none;
322
+ }
323
+
324
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
325
+ visibility: visible;
326
+ }
327
+
328
+ .fjs-resize-drag-preview {
329
+ width: 1px;
330
+ height: 1px;
331
+ position: absolute;
332
+ top: 0;
333
+ }
334
+
335
+ /* do not show resize handles on small screens */
336
+ @media (max-width: 66rem) {
337
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
338
+ display: none !important;
339
+ }
340
+ }
146
341
  /**
147
342
  * Cursor styles
148
343
  */
@@ -176,26 +371,24 @@
176
371
  .fjs-editor-container .fjs-context-pad {
177
372
  z-index: 2;
178
373
  position: absolute;
179
- top: 3px;
180
- right: 3px;
181
- box-shadow: 1px 1px 1px 1px rgb(0 0 0/10%);
374
+ top: 0;
375
+ right: 5px;
182
376
  }
183
377
 
184
378
  .fjs-editor-container .fjs-context-pad-item {
185
379
  border: none;
186
- border-radius: 3px;
187
380
  background-color: var(--color-context-pad-item-background);
188
381
  padding: 0;
189
382
  width: 24px;
190
383
  height: 24px;
191
- fill: var(--color-context-pad-item-fill);
384
+ color: var(--color-context-pad-item-fill);
192
385
  display: flex;
193
386
  justify-content: center;
194
387
  align-items: center;
195
388
  }
196
389
 
197
390
  .fjs-editor-container .fjs-context-pad-item:hover {
198
- fill: var(--color-context-pad-item-hover-fill);
391
+ color: var(--color-context-pad-item-hover-fill);
199
392
  }
200
393
 
201
394
  /**
@@ -262,6 +455,7 @@
262
455
  margin: 0;
263
456
  border: none;
264
457
  padding: 0;
458
+ color: var(--color-palette-text);
265
459
  }
266
460
 
267
461
  .fjs-palette-container .fjs-palette-search:focus {