@bpmn-io/form-js-viewer 1.1.0 → 1.3.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 (32) hide show
  1. package/dist/assets/form-js-base.css +54 -1
  2. package/dist/assets/form-js.css +54 -1
  3. package/dist/index.cjs +1074 -636
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +1070 -636
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/Form.d.ts +4 -0
  8. package/dist/types/core/FieldFactory.d.ts +19 -0
  9. package/dist/types/core/FormFieldRegistry.d.ts +0 -1
  10. package/dist/types/core/Importer.d.ts +56 -0
  11. package/dist/types/core/PathRegistry.d.ts +71 -0
  12. package/dist/types/core/index.d.ts +9 -5
  13. package/dist/types/features/expression-language/ConditionChecker.d.ts +3 -2
  14. package/dist/types/index.d.ts +2 -2
  15. package/dist/types/render/components/form-fields/Checklist.d.ts +2 -6
  16. package/dist/types/render/components/form-fields/Default.d.ts +3 -3
  17. package/dist/types/render/components/form-fields/Group.d.ts +14 -0
  18. package/dist/types/render/components/form-fields/Radio.d.ts +2 -6
  19. package/dist/types/render/components/form-fields/Select.d.ts +2 -6
  20. package/dist/types/render/components/form-fields/Taglist.d.ts +2 -6
  21. package/dist/types/render/components/form-fields/parts/Grid.d.ts +1 -0
  22. package/dist/types/render/components/index.d.ts +4 -2
  23. package/dist/types/render/components/util/localisationUtil.d.ts +24 -0
  24. package/dist/types/render/components/util/valuesUtil.d.ts +6 -0
  25. package/dist/types/render/context/FormRenderContext.d.ts +3 -0
  26. package/dist/types/render/hooks/index.d.ts +2 -0
  27. package/dist/types/render/hooks/useDeepCompareState.d.ts +8 -0
  28. package/dist/types/render/hooks/usePrevious.d.ts +1 -0
  29. package/dist/types/util/index.d.ts +1 -2
  30. package/package.json +3 -2
  31. package/dist/types/import/Importer.d.ts +0 -45
  32. package/dist/types/import/index.d.ts +0 -5
package/dist/assets/form-js-base.css CHANGED
@@ -70,6 +70,7 @@
70
70
  --cds-border-strong,
71
71
  var(--cds-border-strong-01, var(--color-grey-225-10-55))
72
72
  );
73
+ --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
73
74
  --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
74
75
  --color-borders-adornment: var(
75
76
  --cds-border-subtle,
@@ -90,6 +91,7 @@
90
91
 
91
92
  --font-family: 'IBM Plex Sans', sans-serif;
92
93
 
94
+ --font-size-group: 15px;
93
95
  --font-size-base: 14px;
94
96
  --font-size-input: 14px;
95
97
  --font-size-label: 12px;
@@ -198,6 +200,11 @@
198
200
  margin-right: 0;
199
201
  }
200
202
 
203
+ .fjs-container .cds--grid .cds--grid .cds--row {
204
+ margin-left: -1rem;
205
+ margin-right: -1rem;
206
+ }
207
+
201
208
  @media (max-width: 66rem) {
202
209
  .cds--col {
203
210
  flex-basis: unset !important;
@@ -226,7 +233,7 @@
226
233
  display: flex;
227
234
  flex-direction: column;
228
235
  flex-grow: 1;
229
- min-height: 100px;
236
+ min-height: 80px;
230
237
  }
231
238
 
232
239
  .fjs-container .fjs-element {
@@ -312,6 +319,52 @@
312
319
  color: var(--color-text-lighter);
313
320
  }
314
321
 
322
+ .fjs-container .fjs-form-field-group {
323
+ padding: 10px 6px 0 6px;
324
+ margin: 0 10px;
325
+ }
326
+
327
+ .fjs-container .fjs-form-field-group .cds--grid {
328
+ padding: 4px 16px;
329
+ }
330
+
331
+ .fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
332
+ .fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
333
+ margin-left: -6px;
334
+ }
335
+
336
+ .fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
337
+ .fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
338
+ margin-right: -6px;
339
+ }
340
+
341
+ .fjs-container .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
342
+ margin-left: 11px;
343
+ }
344
+
345
+ .fjs-container .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
346
+ margin-right: 11px;
347
+ }
348
+
349
+ .fjs-container .fjs-form-field-group.fjs-outlined {
350
+ outline: solid var(--color-borders-group) 2px;
351
+ }
352
+
353
+ .fjs-container .fjs-form-field-group label {
354
+ font-size: var(--font-size-label);
355
+ }
356
+
357
+ .fjs-container .fjs-form-field-group .fjs-form-field-group .cds--grid {
358
+ padding-left: 2rem;
359
+ padding-right: 2rem;
360
+ }
361
+
362
+ .fjs-container .fjs-form-field-group > label {
363
+ font-size: var(--font-size-group);
364
+ line-height: var(--line-height-input);
365
+ margin-left: 7px;
366
+ }
367
+
315
368
  .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
316
369
  .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
317
370
  .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {
package/dist/assets/form-js.css CHANGED
@@ -63,6 +63,7 @@
63
63
  --cds-border-strong,
64
64
  var(--cds-border-strong-01, var(--color-grey-225-10-55))
65
65
  );
66
+ --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
66
67
  --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
67
68
  --color-borders-adornment: var(
68
69
  --cds-border-subtle,
@@ -80,6 +81,7 @@
80
81
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
81
82
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
82
83
  --font-family: "IBM Plex Sans", sans-serif;
84
+ --font-size-group: 15px;
83
85
  --font-size-base: 14px;
84
86
  --font-size-input: 14px;
85
87
  --font-size-label: 12px;
@@ -183,6 +185,11 @@
183
185
  margin-right: 0;
184
186
  }
185
187
 
188
+ .fjs-container .cds--grid .cds--grid .cds--row {
189
+ margin-left: -1rem;
190
+ margin-right: -1rem;
191
+ }
192
+
186
193
  @media (max-width: 66rem) {
187
194
  .cds--col {
188
195
  flex-basis: unset !important;
@@ -210,7 +217,7 @@
210
217
  display: flex;
211
218
  flex-direction: column;
212
219
  flex-grow: 1;
213
- min-height: 100px;
220
+ min-height: 80px;
214
221
  }
215
222
 
216
223
  .fjs-container .fjs-element {
@@ -296,6 +303,52 @@
296
303
  color: var(--color-text-lighter);
297
304
  }
298
305
 
306
+ .fjs-container .fjs-form-field-group {
307
+ padding: 10px 6px 0 6px;
308
+ margin: 0 10px;
309
+ }
310
+
311
+ .fjs-container .fjs-form-field-group .cds--grid {
312
+ padding: 4px 16px;
313
+ }
314
+
315
+ .fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
316
+ .fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
317
+ margin-left: -6px;
318
+ }
319
+
320
+ .fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
321
+ .fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
322
+ margin-right: -6px;
323
+ }
324
+
325
+ .fjs-container .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
326
+ margin-left: 11px;
327
+ }
328
+
329
+ .fjs-container .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
330
+ margin-right: 11px;
331
+ }
332
+
333
+ .fjs-container .fjs-form-field-group.fjs-outlined {
334
+ outline: solid var(--color-borders-group) 2px;
335
+ }
336
+
337
+ .fjs-container .fjs-form-field-group label {
338
+ font-size: var(--font-size-label);
339
+ }
340
+
341
+ .fjs-container .fjs-form-field-group .fjs-form-field-group .cds--grid {
342
+ padding-left: 2rem;
343
+ padding-right: 2rem;
344
+ }
345
+
346
+ .fjs-container .fjs-form-field-group > label {
347
+ font-size: var(--font-size-group);
348
+ line-height: var(--line-height-input);
349
+ margin-left: 7px;
350
+ }
351
+
299
352
  .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
300
353
  .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
301
354
  .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {