@bpmn-io/form-js-editor 1.5.0-alpha.0 → 1.6.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 (91) hide show
  1. package/dist/assets/form-js-editor-base.css +44 -13
  2. package/dist/assets/form-js-editor.css +44 -13
  3. package/dist/index.cjs +1550 -334
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +1552 -336
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/FormEditor.d.ts +16 -4
  8. package/dist/types/core/Debounce.d.ts +1 -1
  9. package/dist/types/core/FormLayoutValidator.d.ts +2 -2
  10. package/dist/types/core/index.d.ts +9 -9
  11. package/dist/types/features/dragging/Dragging.d.ts +3 -3
  12. package/dist/types/features/dragging/index.d.ts +2 -2
  13. package/dist/types/features/editor-actions/FormEditorActions.d.ts +1 -1
  14. package/dist/types/features/editor-actions/index.d.ts +2 -2
  15. package/dist/types/features/expression-language/EditorTemplating.d.ts +1 -1
  16. package/dist/types/features/expression-language/index.d.ts +3 -3
  17. package/dist/types/features/keyboard/FormEditorKeyboardBindings.d.ts +1 -1
  18. package/dist/types/features/keyboard/index.d.ts +3 -3
  19. package/dist/types/features/modeling/FormLayoutUpdater.d.ts +1 -1
  20. package/dist/types/features/modeling/Modeling.d.ts +1 -1
  21. package/dist/types/features/modeling/behavior/ColumnsSourceBehavior.d.ts +7 -0
  22. package/dist/types/features/modeling/behavior/IdBehavior.d.ts +1 -1
  23. package/dist/types/features/modeling/behavior/KeyBehavior.d.ts +1 -1
  24. package/dist/types/features/modeling/behavior/OptionsSourceBehavior.d.ts +8 -0
  25. package/dist/types/features/modeling/behavior/PathBehavior.d.ts +1 -1
  26. package/dist/types/features/modeling/behavior/TableDataSourceBehavior.d.ts +7 -0
  27. package/dist/types/features/modeling/behavior/ValidateBehavior.d.ts +1 -1
  28. package/dist/types/features/modeling/behavior/index.d.ts +11 -7
  29. package/dist/types/features/modeling/cmd/AddFormFieldHandler.d.ts +1 -1
  30. package/dist/types/features/modeling/cmd/EditFormFieldHandler.d.ts +1 -1
  31. package/dist/types/features/modeling/cmd/MoveFormFieldHandler.d.ts +1 -1
  32. package/dist/types/features/modeling/cmd/RemoveFormFieldHandler.d.ts +1 -1
  33. package/dist/types/features/modeling/cmd/UpdateIdClaimHandler.d.ts +1 -1
  34. package/dist/types/features/modeling/cmd/UpdateKeyClaimHandler.d.ts +1 -1
  35. package/dist/types/features/modeling/cmd/UpdatePathClaimHandler.d.ts +1 -1
  36. package/dist/types/features/modeling/index.d.ts +7 -5
  37. package/dist/types/features/palette/PaletteModule.d.ts +1 -1
  38. package/dist/types/features/palette/index.d.ts +1 -1
  39. package/dist/types/features/properties-panel/PropertiesPanelRenderer.d.ts +1 -1
  40. package/dist/types/features/properties-panel/PropertiesProvider.d.ts +1 -1
  41. package/dist/types/features/properties-panel/Util.d.ts +11 -3
  42. package/dist/types/features/properties-panel/entries/ColumnEntry.d.ts +11 -0
  43. package/dist/types/features/properties-panel/entries/ColumnsExpressionEntry.d.ts +10 -0
  44. package/dist/types/features/properties-panel/entries/ConditionEntry.d.ts +1 -1
  45. package/dist/types/features/properties-panel/entries/{GroupEntries.d.ts → GroupAppearanceEntry.d.ts} +3 -1
  46. package/dist/types/features/properties-panel/entries/HeadersSourceSelectEntry.d.ts +9 -0
  47. package/dist/types/features/properties-panel/entries/HeightEntry.d.ts +12 -0
  48. package/dist/types/features/properties-panel/entries/IFrameHeightEntry.d.ts +10 -0
  49. package/dist/types/features/properties-panel/entries/IFrameUrlEntry.d.ts +10 -0
  50. package/dist/types/features/properties-panel/entries/{InputKeyValuesSourceEntry.d.ts → InputKeyOptionsSourceEntry.d.ts} +1 -1
  51. package/dist/types/features/properties-panel/entries/LayouterAppearanceEntry.d.ts +10 -0
  52. package/dist/types/features/properties-panel/entries/OptionsExpressionEntry.d.ts +9 -0
  53. package/dist/types/features/properties-panel/entries/{ValuesSourceSelectEntry.d.ts → OptionsSourceSelectEntry.d.ts} +1 -1
  54. package/dist/types/features/properties-panel/entries/PaginationEntry.d.ts +10 -0
  55. package/dist/types/features/properties-panel/entries/RepeatableEntry.d.ts +24 -0
  56. package/dist/types/features/properties-panel/entries/RowCountEntry.d.ts +10 -0
  57. package/dist/types/features/properties-panel/entries/SelectEntries.d.ts +2 -0
  58. package/dist/types/features/properties-panel/entries/StaticColumnsSourceEntry.d.ts +5 -0
  59. package/dist/types/features/properties-panel/entries/{StaticValuesSourceEntry.d.ts → StaticOptionsSourceEntry.d.ts} +1 -1
  60. package/dist/types/features/properties-panel/entries/TableDataSourceEntry.d.ts +10 -0
  61. package/dist/types/features/properties-panel/entries/factories/index.d.ts +3 -0
  62. package/dist/types/features/properties-panel/entries/factories/simpleBoolEntryFactory.d.ts +2 -0
  63. package/dist/types/features/properties-panel/entries/factories/simpleRangeIntegerEntryFactory.d.ts +12 -0
  64. package/dist/types/features/properties-panel/entries/factories/simpleSelectEntryFactory.d.ts +10 -0
  65. package/dist/types/features/properties-panel/entries/factories/zeroPositiveIntegerEntryFactory.d.ts +9 -0
  66. package/dist/types/features/properties-panel/entries/index.d.ts +17 -7
  67. package/dist/types/features/properties-panel/groups/AppearanceGroup.d.ts +24 -3
  68. package/dist/types/features/properties-panel/groups/GeneralGroup.d.ts +13 -0
  69. package/dist/types/features/properties-panel/groups/OptionsGroups.d.ts +1 -0
  70. package/dist/types/features/properties-panel/groups/TableHeaderGroups.d.ts +1 -0
  71. package/dist/types/features/properties-panel/groups/index.d.ts +2 -1
  72. package/dist/types/features/properties-panel/index.d.ts +4 -4
  73. package/dist/types/features/render-injection/RenderInjector.d.ts +1 -1
  74. package/dist/types/features/render-injection/index.d.ts +2 -2
  75. package/dist/types/features/repeat-render/EditorRepeatRenderManager.d.ts +17 -0
  76. package/dist/types/features/repeat-render/index.d.ts +7 -0
  77. package/dist/types/features/selection/Selection.d.ts +1 -1
  78. package/dist/types/features/selection/SelectionBehavior.d.ts +1 -1
  79. package/dist/types/features/selection/index.d.ts +3 -3
  80. package/dist/types/render/Renderer.d.ts +1 -1
  81. package/dist/types/render/components/ModularSection.d.ts +1 -1
  82. package/dist/types/render/components/editor-form-fields/EditorIFrame.d.ts +6 -0
  83. package/dist/types/render/components/editor-form-fields/EditorTable.d.ts +10 -0
  84. package/dist/types/render/components/editor-form-fields/EditorText.d.ts +1 -1
  85. package/dist/types/render/components/editor-form-fields/index.d.ts +3 -1
  86. package/dist/types/render/index.d.ts +3 -3
  87. package/package.json +3 -3
  88. package/dist/types/features/modeling/behavior/ValuesSourceBehavior.d.ts +0 -8
  89. package/dist/types/features/properties-panel/entries/SpacerEntry.d.ts +0 -10
  90. package/dist/types/features/properties-panel/entries/ValuesExpressionEntry.d.ts +0 -9
  91. package/dist/types/features/properties-panel/groups/ValuesGroups.d.ts +0 -1
package/dist/assets/form-js-editor-base.css CHANGED
@@ -68,7 +68,7 @@
68
68
  var(--cds-border-strong-01, var(--color-grey-225-10-55))
69
69
  );
70
70
  --cursor-palette-field: grab;
71
- --palette-width: 246px;
71
+ --palette-width: 270px;
72
72
  }
73
73
 
74
74
  .fjs-properties-container {
@@ -268,6 +268,7 @@
268
268
 
269
269
  .fjs-editor-container .fjs-form > .fjs-element {
270
270
  border: none;
271
+ outline: none;
271
272
  }
272
273
 
273
274
  .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
@@ -288,29 +289,31 @@
288
289
  border-color: var(--color-children-hover-border);
289
290
  }
290
291
 
291
- .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"] {
292
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],
293
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="dynamiclist"] {
292
294
  margin-left: -6px;
293
295
  }
294
296
 
295
- .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="group"] {
297
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="group"],
298
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type="dynamiclist"] {
296
299
  margin-right: -6px;
297
300
  }
298
301
 
299
- .fjs-editor-container .fjs-form-field-group,
300
- .fjs-editor-container .fjs-form-field-group .fjs-form-field-group .fjs-form-field-group {
302
+ .fjs-editor-container .fjs-form-field-grouplike,
303
+ .fjs-editor-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-form-field-grouplike {
301
304
  margin: 1px 6px;
302
305
  padding: 0px;
303
306
  }
304
307
 
305
- .fjs-editor-container .fjs-form-field-group.fjs-outlined {
308
+ .fjs-editor-container .fjs-form-field-grouplike.fjs-outlined {
306
309
  outline: none;
307
310
  }
308
311
 
309
- .fjs-editor-container .fjs-form-field-group .cds--grid {
312
+ .fjs-editor-container .fjs-form-field-grouplike .cds--grid {
310
313
  padding: 0 2rem;
311
314
  }
312
315
 
313
- .fjs-editor-container .fjs-form-field-group > label {
316
+ .fjs-editor-container .fjs-form-field-grouplike > label {
314
317
  margin-top: 6px;
315
318
  }
316
319
 
@@ -331,6 +334,19 @@
331
334
  user-select: none;
332
335
  }
333
336
 
337
+ .fjs-editor-container .fjs-empty-component {
338
+ display: flex;
339
+ justify-content: center;
340
+ align-items: center;
341
+ height: 80px;
342
+ width: calc(100% - 4rem);
343
+ position: absolute;
344
+ }
345
+
346
+ .fjs-editor-container .fjs-empty-component span {
347
+ color: var(--cds-text-disabled, var(--color-grey-225-10-55));
348
+ }
349
+
334
350
  .fjs-editor-container .fjs-empty-editor {
335
351
  display: flex;
336
352
  align-items: center;
@@ -442,6 +458,21 @@
442
458
  top: 0;
443
459
  }
444
460
 
461
+ .fjs-editor-container .fjs-repeat-render-footer {
462
+ font-size: var(--font-size-label);
463
+ background: var(--cds-field, var(--color-background-disabled));
464
+ color: var(--cds-text-disabled, var(--color-grey-225-10-45));
465
+ padding: 3px;
466
+ display: flex;
467
+ align-items: center;
468
+ justify-content: center;
469
+ margin: 0px 5px 3px 5px;
470
+ }
471
+
472
+ .fjs-editor-container .fjs-repeat-render-footer svg {
473
+ margin-right: 4px;
474
+ }
475
+
445
476
  /* do not show resize handles on small screens */
446
477
  @media (max-width: 66rem) {
447
478
  .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
@@ -620,7 +651,7 @@
620
651
  .fjs-palette-container .fjs-palette-group {
621
652
  display: flex;
622
653
  flex-direction: column;
623
- width: 212px;
654
+ width: 236px;
624
655
  margin: auto;
625
656
  }
626
657
 
@@ -639,7 +670,7 @@
639
670
  }
640
671
 
641
672
  .fjs-palette-field {
642
- height: 64px;
673
+ height: 72px;
643
674
  display: flex;
644
675
  flex-direction: column;
645
676
  justify-content: center;
@@ -656,7 +687,7 @@
656
687
  }
657
688
 
658
689
  .fjs-palette-container .fjs-palette-field {
659
- width: 64px;
690
+ width: 72px;
660
691
  }
661
692
 
662
693
  .fjs-palette-container .fjs-palette-field:focus {
@@ -719,8 +750,8 @@
719
750
  }
720
751
 
721
752
  .fjs-editor-container .fjs-form-field-placeholder svg {
722
- width: 36px;
723
- height: 36px;
753
+ width: 32px;
754
+ height: 32px;
724
755
  vertical-align: middle;
725
756
  margin-top: -2px;
726
757
  margin-right: 2px;
package/dist/assets/form-js-editor.css CHANGED
@@ -65,7 +65,7 @@
65
65
  var(--cds-border-strong-01, var(--color-grey-225-10-55))
66
66
  );
67
67
  --cursor-palette-field: grab;
68
- --palette-width: 246px;
68
+ --palette-width: 270px;
69
69
  }
70
70
 
71
71
  .fjs-properties-container {
@@ -246,6 +246,7 @@
246
246
 
247
247
  .fjs-editor-container .fjs-form > .fjs-element {
248
248
  border: none;
249
+ outline: none;
249
250
  }
250
251
 
251
252
  .fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
@@ -266,29 +267,31 @@
266
267
  border-color: var(--color-children-hover-border);
267
268
  }
268
269
 
269
- .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type=group] {
270
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type=group],
271
+ .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type=dynamiclist] {
270
272
  margin-left: -6px;
271
273
  }
272
274
 
273
- .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type=group] {
275
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type=group],
276
+ .fjs-editor-container .fjs-layout-column:last-child > .fjs-element[data-field-type=dynamiclist] {
274
277
  margin-right: -6px;
275
278
  }
276
279
 
277
- .fjs-editor-container .fjs-form-field-group,
278
- .fjs-editor-container .fjs-form-field-group .fjs-form-field-group .fjs-form-field-group {
280
+ .fjs-editor-container .fjs-form-field-grouplike,
281
+ .fjs-editor-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-form-field-grouplike {
279
282
  margin: 1px 6px;
280
283
  padding: 0px;
281
284
  }
282
285
 
283
- .fjs-editor-container .fjs-form-field-group.fjs-outlined {
286
+ .fjs-editor-container .fjs-form-field-grouplike.fjs-outlined {
284
287
  outline: none;
285
288
  }
286
289
 
287
- .fjs-editor-container .fjs-form-field-group .cds--grid {
290
+ .fjs-editor-container .fjs-form-field-grouplike .cds--grid {
288
291
  padding: 0 2rem;
289
292
  }
290
293
 
291
- .fjs-editor-container .fjs-form-field-group > label {
294
+ .fjs-editor-container .fjs-form-field-grouplike > label {
292
295
  margin-top: 6px;
293
296
  }
294
297
 
@@ -309,6 +312,19 @@
309
312
  user-select: none;
310
313
  }
311
314
 
315
+ .fjs-editor-container .fjs-empty-component {
316
+ display: flex;
317
+ justify-content: center;
318
+ align-items: center;
319
+ height: 80px;
320
+ width: calc(100% - 4rem);
321
+ position: absolute;
322
+ }
323
+
324
+ .fjs-editor-container .fjs-empty-component span {
325
+ color: var(--cds-text-disabled, var(--color-grey-225-10-55));
326
+ }
327
+
312
328
  .fjs-editor-container .fjs-empty-editor {
313
329
  display: flex;
314
330
  align-items: center;
@@ -420,6 +436,21 @@
420
436
  top: 0;
421
437
  }
422
438
 
439
+ .fjs-editor-container .fjs-repeat-render-footer {
440
+ font-size: var(--font-size-label);
441
+ background: var(--cds-field, var(--color-background-disabled));
442
+ color: var(--cds-text-disabled, var(--color-grey-225-10-45));
443
+ padding: 3px;
444
+ display: flex;
445
+ align-items: center;
446
+ justify-content: center;
447
+ margin: 0px 5px 3px 5px;
448
+ }
449
+
450
+ .fjs-editor-container .fjs-repeat-render-footer svg {
451
+ margin-right: 4px;
452
+ }
453
+
423
454
  /* do not show resize handles on small screens */
424
455
  @media (max-width: 66rem) {
425
456
  .fjs-editor-container .fjs-children .fjs-editor-selected .fjs-field-resize-handle {
@@ -596,7 +627,7 @@
596
627
  .fjs-palette-container .fjs-palette-group {
597
628
  display: flex;
598
629
  flex-direction: column;
599
- width: 212px;
630
+ width: 236px;
600
631
  margin: auto;
601
632
  }
602
633
 
@@ -615,7 +646,7 @@
615
646
  }
616
647
 
617
648
  .fjs-palette-field {
618
- height: 64px;
649
+ height: 72px;
619
650
  display: flex;
620
651
  flex-direction: column;
621
652
  justify-content: center;
@@ -632,7 +663,7 @@
632
663
  }
633
664
 
634
665
  .fjs-palette-container .fjs-palette-field {
635
- width: 64px;
666
+ width: 72px;
636
667
  }
637
668
 
638
669
  .fjs-palette-container .fjs-palette-field:focus {
@@ -695,8 +726,8 @@
695
726
  }
696
727
 
697
728
  .fjs-editor-container .fjs-form-field-placeholder svg {
698
- width: 36px;
699
- height: 36px;
729
+ width: 32px;
730
+ height: 32px;
700
731
  vertical-align: middle;
701
732
  margin-top: -2px;
702
733
  margin-right: 2px;