@bpmn-io/form-js-viewer 1.0.0 → 1.3.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 (38) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +164 -164
  3. package/dist/assets/form-js-base.css +985 -917
  4. package/dist/assets/form-js.css +69 -1
  5. package/dist/index.cjs +1982 -859
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +1977 -860
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/Form.d.ts +12 -26
  10. package/dist/types/core/FieldFactory.d.ts +19 -0
  11. package/dist/types/core/FormFieldRegistry.d.ts +0 -1
  12. package/dist/types/core/Importer.d.ts +56 -0
  13. package/dist/types/core/PathRegistry.d.ts +71 -0
  14. package/dist/types/core/index.d.ts +9 -5
  15. package/dist/types/features/expression-language/ConditionChecker.d.ts +3 -2
  16. package/dist/types/features/expression-language/variableExtractionHelpers.d.ts +1 -1
  17. package/dist/types/features/index.d.ts +2 -0
  18. package/dist/types/features/viewerCommands/ViewerCommands.d.ts +14 -0
  19. package/dist/types/features/viewerCommands/cmd/UpdateFieldValidationHandler.d.ts +11 -0
  20. package/dist/types/features/viewerCommands/index.d.ts +8 -0
  21. package/dist/types/index.d.ts +2 -2
  22. package/dist/types/render/components/form-fields/Checklist.d.ts +2 -6
  23. package/dist/types/render/components/form-fields/Default.d.ts +3 -3
  24. package/dist/types/render/components/form-fields/Group.d.ts +14 -0
  25. package/dist/types/render/components/form-fields/Radio.d.ts +2 -6
  26. package/dist/types/render/components/form-fields/Select.d.ts +2 -6
  27. package/dist/types/render/components/form-fields/Spacer.d.ts +14 -0
  28. package/dist/types/render/components/form-fields/Taglist.d.ts +2 -6
  29. package/dist/types/render/components/form-fields/parts/Grid.d.ts +1 -0
  30. package/dist/types/render/components/index.d.ts +4 -2
  31. package/dist/types/render/components/util/localisationUtil.d.ts +24 -0
  32. package/dist/types/render/components/util/valuesUtil.d.ts +6 -0
  33. package/dist/types/render/context/FormRenderContext.d.ts +3 -0
  34. package/dist/types/types.d.ts +35 -35
  35. package/dist/types/util/index.d.ts +2 -5
  36. package/package.json +5 -4
  37. package/dist/types/import/Importer.d.ts +0 -45
  38. package/dist/types/import/index.d.ts +0 -5
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;
@@ -160,6 +162,10 @@
160
162
  position: relative;
161
163
  }
162
164
 
165
+ .fjs-container .fjs-layout-row:empty {
166
+ display: none;
167
+ }
168
+
163
169
  .fjs-container .fjs-column {
164
170
  flex-grow: 1;
165
171
  }
@@ -179,6 +185,11 @@
179
185
  margin-right: 0;
180
186
  }
181
187
 
188
+ .fjs-container .cds--grid .cds--grid .cds--row {
189
+ margin-left: -1rem;
190
+ margin-right: -1rem;
191
+ }
192
+
182
193
  @media (max-width: 66rem) {
183
194
  .cds--col {
184
195
  flex-basis: unset !important;
@@ -206,7 +217,7 @@
206
217
  display: flex;
207
218
  flex-direction: column;
208
219
  flex-grow: 1;
209
- min-height: 100px;
220
+ min-height: 80px;
210
221
  }
211
222
 
212
223
  .fjs-container .fjs-element {
@@ -292,6 +303,52 @@
292
303
  color: var(--color-text-lighter);
293
304
  }
294
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
+
295
352
  .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
296
353
  .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
297
354
  .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {
@@ -350,6 +407,13 @@
350
407
  margin: auto;
351
408
  }
352
409
 
410
+ .fjs-container .fjs-form-field-spacer {
411
+ background-color: transparent;
412
+ display: flex;
413
+ align-items: center;
414
+ justify-content: center;
415
+ }
416
+
353
417
  .fjs-container .fjs-input[type=text],
354
418
  .fjs-container .fjs-input[type=email],
355
419
  .fjs-container .fjs-input[type=tel],
@@ -689,6 +753,10 @@
689
753
  list-style-type: none;
690
754
  }
691
755
 
756
+ .fjs-container .fjs-form-field-text {
757
+ overflow-wrap: break-word;
758
+ }
759
+
692
760
  .fjs-container .fjs-form-field-text a {
693
761
  color: var(--color-accent);
694
762
  }