@bpmn-io/form-js-editor 0.14.1 → 1.0.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 (36) hide show
  1. package/dist/assets/form-js-editor-base.css +266 -37
  2. package/dist/assets/form-js-editor.css +318 -53
  3. package/dist/index.cjs +1241 -418
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +1113 -290
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/FormEditor.d.ts +9 -4
  8. package/dist/types/core/EventBus.d.ts +1 -1
  9. package/dist/types/core/FormLayoutValidator.d.ts +5 -1
  10. package/dist/types/core/index.d.ts +2 -1
  11. package/dist/types/features/dragging/Dragging.d.ts +3 -3
  12. package/dist/types/features/editor-actions/FormEditorActions.d.ts +2 -1
  13. package/dist/types/features/editor-actions/index.d.ts +1 -1
  14. package/dist/types/features/keyboard/index.d.ts +1 -1
  15. package/dist/types/features/modeling/FormLayoutUpdater.d.ts +2 -1
  16. package/dist/types/features/modeling/behavior/IdBehavior.d.ts +2 -1
  17. package/dist/types/features/modeling/behavior/KeyBehavior.d.ts +2 -1
  18. package/dist/types/features/modeling/behavior/ValidateBehavior.d.ts +2 -1
  19. package/dist/types/features/modeling/index.d.ts +6 -1
  20. package/dist/types/features/palette/PaletteRenderer.d.ts +1 -1
  21. package/dist/types/features/palette/components/Palette.d.ts +1 -1
  22. package/dist/types/features/properties-panel/PropertiesPanel.d.ts +1 -1
  23. package/dist/types/features/properties-panel/PropertiesPanelHeaderProvider.d.ts +1 -1
  24. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +1 -1
  25. package/dist/types/features/properties-panel/entries/InputKeyValuesSourceEntry.d.ts +1 -1
  26. package/dist/types/features/properties-panel/entries/ReadonlyEntry.d.ts +9 -0
  27. package/dist/types/features/properties-panel/entries/index.d.ts +1 -0
  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/package.json +4 -4
  36. package/dist/types/features/properties-panel/icons/index.d.ts +0 -1
package/dist/assets/form-js-editor-base.css CHANGED
@@ -1,51 +1,207 @@
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);
8
+ --color-children-hover-border: var(--cds-border-interactive, var(--color-blue-219-100-53-05));
6
9
 
7
- --color-context-pad-item-background: var(--color-white);
8
- --color-context-pad-item-fill: var(--color-grey-225-10-35);
9
- --color-context-pad-item-hover-fill: var(--color-black);
10
-
11
- --color-dragula-background: var(--color-blue-205-100-95);
12
- --color-dragula-border: var(--color-blue-205-100-45);
13
- --color-dragula-mirror-background: var(--color-white);
14
- --color-dragula-mirror-border: var(--color-grey-225-10-90);
10
+ --color-context-pad-item-background: transparent;
11
+ --color-context-pad-item-fill: var(--cds-icon-secondary, var(--color-grey-225-10-15));
12
+ --color-context-pad-item-hover-fill: var(--color-red-360-100-45);
13
+
14
+ --color-resize-handle-background: var(--cds-border-interactive, var(--color-blue-219-100-53));
15
+ --color-resize-handle-border: var(--cds-border-interactive, var(--color-blue-219-100-53));
16
+
17
+ --color-dragula-background: var(--cds-highlight, var(--color-blue-205-100-95));
18
+ --color-dragula-border: var(--cds-border-interactive, var(--color-blue-205-100-45));
19
+ --color-dragula-mirror-background: var(--cds-background, var(--color-white));
20
+ --color-dragula-mirror-border: var(
21
+ --cds-border-strong,
22
+ var(--cds-border-strong-01, var(--color-grey-225-10-90))
23
+ );
15
24
  --color-dragula-error-background: var(--color-red-360-100-92);
16
- --color-dragula-error-border: var(--color-red-360-100-45);
25
+ --color-dragula-error-border: var(--cds-text-error, var(--color-red-360-100-45));
17
26
  }
18
27
 
19
28
  .fjs-palette-container {
20
- --color-palette-text: var(--color-grey-225-10-15);
21
- --color-palette-container-background: var(--color-grey-225-10-95);
22
- --color-palette-container-border: var(--color-grey-225-10-80);
23
- --color-palette-header: var(--color-text);
24
- --color-palette-header-background: var(--color-grey-225-10-95);
25
- --color-palette-header-border: var(--color-grey-225-10-85);
29
+ --color-palette-text: var(--cds-text-primary, var(--color-grey-225-10-15));
30
+ --color-palette-container-background: var(--cds-background, var(--color-grey-225-10-95));
31
+ --color-palette-container-border: var(
32
+ --cds-border-strong,
33
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
34
+ );
35
+ --color-palette-header: var(--cds-text-primary, var(--color-text));
36
+ --color-palette-header-background: var(--cds-background, var(--color-grey-225-10-95));
37
+ --color-palette-header-border: var(
38
+ --cds-border-strong,
39
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
40
+ );
26
41
  --color-palette-search: var(--color-palette-text);
27
- --color-palette-search-icon: var(--color-grey-225-10-35);
28
- --color-palette-search-icon-hover: var(--color-grey-225-10-15);
29
- --color-palette-search-background: var(--color-white);
30
- --color-palette-search-border: var(--color-grey-225-10-75);
31
- --color-palette-search-focus-background: var(--color-blue-205-100-95);
32
- --color-palette-search-focus-border: var(--color-blue-205-100-50);
33
- --color-palette-search-clear-focus-border: var(--color-grey-225-10-50);
42
+ --color-palette-search-icon: var(--cds-icon-secondary, var(--color-grey-225-10-35));
43
+ --color-palette-search-icon-hover: var(--cds-icon-primary, var(--color-grey-225-10-15));
44
+ --color-palette-search-background: var(
45
+ --cds-field,
46
+ var(--cds-field-01, var(--color-white))
47
+ );
48
+ --color-palette-search-border: var(
49
+ --cds-border-strong,
50
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
51
+ );
52
+ --color-palette-search-focus-background: var(
53
+ --cds-field,
54
+ var(--cds-field-01, var(--color-blue-205-100-95))
55
+ );
56
+ --color-palette-search-focus-border: var(--cds-focus, var(--color-blue-205-100-50));
57
+ --color-palette-search-clear-focus-border: var(--cds-focus, var(--color-grey-225-10-50));
34
58
  --color-palette-group-title: var(--color-palette-text);
35
59
  --color-palette-field: var(--color-palette-text);
36
- --color-palette-field-background: var(--color-white);
37
- --color-palette-field-border: var(--color-grey-225-10-80);
38
- --color-palette-field-hover-background: var(--color-grey-225-10-90);
60
+ --color-palette-field-background: var(
61
+ --cds-layer,
62
+ var(--cds-layer-01, var(--color-white))
63
+ );
64
+ --color-palette-field-border: var(
65
+ --cds-border-strong,
66
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
67
+ );
68
+ --color-palette-field-hover-background: var(--cds-background-hover, var(--color-grey-225-10-90));
39
69
  --cursor-palette-field: grab;
40
70
  --palette-width: 250px;
41
71
  }
42
72
 
43
73
  .fjs-properties-container {
44
- --color-properties-container-background: var(--color-white);
45
- --color-properties-container-border: var(--color-grey-225-10-80);
74
+ --color-properties-container-background: var(--cds-background, var(--color-white));
75
+ --color-properties-container-border: var(
76
+ --cds-border-strong,
77
+ var(--cds-border-strong-01, var(--color-grey-225-10-80))
78
+ );
46
79
  --properties-panel-width: 300px;
47
80
  }
48
81
 
82
+ /**
83
+ * Theming overrides
84
+ */
85
+ .fjs-properties-container .bio-properties-panel {
86
+ --text-base-color: var(--cds-text-primary, var(--color-grey-225-10-15));
87
+ --text-error-color: var(--cds-text-color, var(--color-red-360-100-45));
88
+ --link-color: var(--cds-text-primary, var(--color-blue-205-100-50));
89
+
90
+ --description-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
91
+ --description-code-background-color: var(
92
+ --cds-layer,
93
+ var(--cds-layer-01, var(--color-grey-225-10-97))
94
+ );
95
+ --description-code-border-color: var(
96
+ --cds-border-strong,
97
+ var(--cds-border-strong-01, var(--color-grey-225-10-85))
98
+ );
99
+ --description-list-item-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
100
+
101
+ --placeholder-color: var(--cds-text-placeholder, var(--color-grey-225-10-35));
102
+ --placeholder-background-color: var(
103
+ --cds-layer,
104
+ var(--cds-layer-01, var(--color-grey-225-10-95))
105
+ );
106
+
107
+ --header-background-color: var(
108
+ --cds-layer,
109
+ var(--cds-layer-01, var(--color-grey-225-10-95))
110
+ );
111
+ --header-icon-fill-color: var(--cds-icon-primary, var(--color-grey-225-10-15));
112
+ --header-bottom-border-color: var(--color-grey-225-10-75);
113
+
114
+ --group-background-color: var(--cds-background, var(--color-white));
115
+ --group-bottom-border-color: var(
116
+ --cds-border-strong,
117
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
118
+ );
119
+
120
+ --sticky-group-background-color: var(
121
+ --cds-layer,
122
+ var(--cds-layer-01, var(--color-grey-225-10-95))
123
+ );
124
+ --sticky-group-bottom-border-color: var(
125
+ --cds-border-strong,
126
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
127
+ );
128
+
129
+ --add-entry-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
130
+ --add-entry-hover-fill-color: var(--cds-icon-inverse, var(--color-white));
131
+ --add-entry-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
132
+ --add-entry-label-color: var(--cds-text-inverse, var(--color-white));
133
+
134
+ --remove-entry-fill-color: var(--color-red-360-100-45);
135
+ --remove-entry-hover-background-color: var(--color-red-360-100-92);
136
+
137
+ --arrow-fill-color: var(--cds-icon-secondary, var(--color-grey-225-10-35));
138
+ --arrow-hover-background-color: var(
139
+ --cds-layer,
140
+ var(--cds-layer-01, var(--color-grey-225-10-95))
141
+ );
142
+
143
+ --dot-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
144
+
145
+ --list-badge-color: var(--cds-text-inverse, var(--color-white));
146
+ --list-badge-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
147
+
148
+ --input-background-color: var(
149
+ --cds-field,
150
+ var(--cds-field-01, var(--color-grey-225-10-97))
151
+ );
152
+ --input-border-color: var(
153
+ --cds-border-strong,
154
+ var(--cds-border-strong-01, var(--color-grey-225-10-75))
155
+ );
156
+
157
+ --input-focus-background-color: var(
158
+ --cds-field,
159
+ var(--cds-field-01, var(--color-blue-205-100-95))
160
+ );
161
+ --input-focus-border-color: var(--cds-focus, var(--color-blue-205-100-50));
162
+
163
+ --input-error-background-color: var(
164
+ --cds-field,
165
+ var(--cds-field-01, var(--color-red-360-100-97))
166
+ );
167
+ --input-error-border-color: var(--cds-text-error, var(--color-red-360-100-45));
168
+ --input-error-focus-border-color: var(--cds-text-error, var(--color-red-360-100-45));
169
+
170
+ --input-disabled-color: var(--cds-text-disabled, var(--color-grey-225-10-55));
171
+ --input-disabled-background-color: var(
172
+ --cds-field,
173
+ var(--cds-field-01, var(--color-grey-225-10-97))
174
+ );
175
+ --input-disabled-border-color: var(--cds-border-disabled, var(--color-grey-225-10-90));
176
+
177
+ --toggle-switch-on-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
178
+ --toggle-switch-off-background-color: var(--cds-toggle-off, var(--color-grey-225-10-75));
179
+ --toggle-switch-switcher-background-color: var(--cds-background, var(--color-white));
180
+
181
+ --side-line-background-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
182
+ --side-line-extension-background-color: var(--cds-text-secondary, (--color-grey-225-10-35));
183
+
184
+ --list-entry-dot-background-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
185
+ --list-entry-header-button-fill-color: var(--cds-background-inverse, var(--color-grey-225-10-35));
186
+ --list-entry-add-entry-empty-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
187
+ --list-entry-add-entry-empty-hover-background-color: var(--cds-interactive, var(--color-blue-205-100-45));
188
+ --list-entry-add-entry-label-color: var(--cds-text-inverse, var(--color-white));
189
+ --list-entry-add-entry-background-color: var(--cds-interactive, var(--color-blue-205-100-50));
190
+ --list-entry-add-entry-fill-color: var(--cds-icon-inverse, var(--color-white));
191
+
192
+ --feel-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
193
+ --feel-active-color: var(--cds-interactive, var(--color-blue-205-100-45));
194
+ --feel-inactive-color: var(--cds-text-secondary, var(--color-grey-225-10-35));
195
+ --feel-hover-background-color: var(--cds-field-hover-02, var(--color-grey-225-10-90));
196
+ --feel-active-background-color: var(--cds-field-02, var(--color-grey-225-10-97));
197
+
198
+ --feel-indicator-background-color: var(--cds-background-hover, var(--color-grey-225-10-90));
199
+ }
200
+
201
+ .fjs-properties-container .bio-properties-panel-input {
202
+ color: var(--color-text);
203
+ }
204
+
49
205
  .fjs-editor-container {
50
206
  height: 100%;
51
207
  width: 100%;
@@ -94,8 +250,10 @@
94
250
  background-color: var(--color-children-selected-background);
95
251
  }
96
252
 
97
- .fjs-editor-container .fjs-children .fjs-element:hover {
253
+ .fjs-editor-container .fjs-children .fjs-element:hover,
254
+ .fjs-editor-container .fjs-children .fjs-element:focus-within {
98
255
  border-color: var(--color-children-hover-border);
256
+ outline: none;
99
257
  }
100
258
 
101
259
  .fjs-editor-container .fjs-input:disabled,
@@ -106,11 +264,19 @@
106
264
  pointer-events: none;
107
265
  }
108
266
 
267
+ .fjs-editor-container .fjs-readonly {
268
+ pointer-events: none;
269
+ }
270
+
109
271
  .fjs-editor-container .fjs-drag-container,
110
272
  .fjs-editor-container .fjs-drop-container-vertical {
111
273
  user-select: none;
112
274
  }
113
275
 
276
+ .fjs-editor-container .fjs-drop-container-horizontal {
277
+ width: 100%;
278
+ }
279
+
114
280
  .fjs-editor-container .fjs-layout-row {
115
281
  padding: 4px 0px;
116
282
  }
@@ -145,6 +311,65 @@
145
311
  visibility: visible;
146
312
  }
147
313
 
314
+ .fjs-editor-container .fjs-drag-move {
315
+ padding-left: 3px;
316
+ }
317
+
318
+ .fjs-editor-container .fjs-field-resize-handle {
319
+ resize: horizontal;
320
+ position: absolute;
321
+ visibility: hidden;
322
+ width: 6px;
323
+ top: 0;
324
+ bottom: 0;
325
+ margin: auto;
326
+ height: 50px;
327
+ max-height: calc(100% - 2px);
328
+ border: 1px solid var(--color-resize-handle-border);
329
+ border-radius: 50px;
330
+ background: var(--color-white);
331
+ z-index: 3;
332
+ }
333
+
334
+ .fjs-editor-container .fjs-field-resize-handle-right {
335
+ right: -4px;
336
+ cursor: ew-resize;
337
+ }
338
+
339
+ .fjs-editor-container .fjs-field-resize-handle-left {
340
+ left: -4px;
341
+ cursor: ew-resize;
342
+ }
343
+
344
+ .fjs-editor-container .fjs-element-resizing-right .fjs-field-resize-handle-right,
345
+ .fjs-editor-container .fjs-element-resizing-left .fjs-field-resize-handle-left,
346
+ .fjs-editor-container .fjs-field-resize-handle:hover {
347
+ background: var(--color-resize-handle-background);
348
+ }
349
+
350
+ .fjs-editor-container .fjs-element-resizing-right .fjs-context-pad,
351
+ .fjs-editor-container .fjs-element-resizing-left .fjs-context-pad {
352
+ display: none;
353
+ }
354
+
355
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
356
+ visibility: visible;
357
+ }
358
+
359
+ .fjs-resize-drag-preview {
360
+ width: 1px;
361
+ height: 1px;
362
+ position: absolute;
363
+ top: 0;
364
+ }
365
+
366
+ /* do not show resize handles on small screens */
367
+ @media (max-width: 66rem) {
368
+ .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
369
+ display: none !important;
370
+ }
371
+ }
372
+
148
373
  /**
149
374
  * Cursor styles
150
375
  */
@@ -179,26 +404,29 @@
179
404
  .fjs-editor-container .fjs-context-pad {
180
405
  z-index: 2;
181
406
  position: absolute;
182
- top: 3px;
183
- right: 3px;
184
- box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
407
+ top: 0;
408
+ right: 5px;
185
409
  }
186
410
 
187
411
  .fjs-editor-container .fjs-context-pad-item {
188
412
  border: none;
189
- border-radius: 3px;
190
413
  background-color: var(--color-context-pad-item-background);
191
414
  padding: 0;
192
415
  width: 24px;
193
416
  height: 24px;
194
- fill: var(--color-context-pad-item-fill);
417
+ color: var(--color-context-pad-item-fill);
195
418
  display: flex;
196
419
  justify-content: center;
197
420
  align-items: center;
198
421
  }
199
422
 
200
423
  .fjs-editor-container .fjs-context-pad-item:hover {
201
- fill: var(--color-context-pad-item-hover-fill);
424
+ color: var(--color-context-pad-item-hover-fill);
425
+ }
426
+
427
+ .fjs-editor-container .fjs-context-pad-item:focus-visible {
428
+ outline: 2px solid var(--color-children-selected-border);
429
+ border-radius: 2px;
202
430
  }
203
431
 
204
432
  /**
@@ -265,6 +493,7 @@
265
493
  margin: 0;
266
494
  border: none;
267
495
  padding: 0;
496
+ color: var(--color-palette-text);
268
497
  }
269
498
 
270
499
  .fjs-palette-container .fjs-palette-search:focus {