@bpmn-io/form-js-viewer 0.15.0-alpha.0 → 1.0.0-alpha.1

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 (13) hide show
  1. package/dist/assets/form-js-base.css +56 -8
  2. package/dist/assets/form-js.css +55 -8
  3. package/dist/index.cjs +256 -144
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +257 -145
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/index.d.ts +1 -1
  8. package/dist/types/render/components/Util.d.ts +2 -1
  9. package/dist/types/render/hooks/index.d.ts +2 -0
  10. package/dist/types/render/hooks/useReadonly.d.ts +17 -0
  11. package/dist/types/render/hooks/useSingleLineTemplateEvaluation.d.ts +17 -0
  12. package/dist/types/types.d.ts +1 -1
  13. package/package.json +2 -2
package/dist/assets/form-js-base.css CHANGED
@@ -44,6 +44,7 @@
44
44
  var(--cds-field-01, var(--color-white))
45
45
  );
46
46
  --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
47
+ --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
47
48
  --color-background-adornment: var(
48
49
  --cds-field,
49
50
  var(--cds-field-01, var(--color-grey-225-10-95))
@@ -74,11 +75,16 @@
74
75
  --cds-border-subtle,
75
76
  var(--cds-border-subtle-01, var(--color-grey-225-10-85))
76
77
  );
78
+ --color-borders-readonly: var(--cds-border-disabled, var(--color-grey-225-10-75));
77
79
  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
78
80
 
79
81
  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
80
82
  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
81
83
  --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
84
+ --color-accent-readonly: var(
85
+ --cds-border-strong,
86
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
87
+ );
82
88
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
83
89
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
84
90
 
@@ -102,6 +108,7 @@
102
108
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
103
109
  --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
104
110
  --border-definition-disabled: 1px solid var(--color-borders-disabled);
111
+ --border-definition-readonly: 1px solid var(--color-borders-readonly);
105
112
 
106
113
  height: 100%;
107
114
  }
@@ -230,7 +237,9 @@
230
237
  .fjs-container .fjs-taglist-input::placeholder,
231
238
  .fjs-container .fjs-textarea::placeholder,
232
239
  .fjs-container .fjs-select > option:disabled,
233
- .fjs-container .fjs-select [disabled] {
240
+ .fjs-container .fjs-select [disabled],
241
+ .fjs-container .fjs-select > option:read-only,
242
+ .fjs-container .fjs-select [read-only] {
234
243
  color: var(--color-text-lightest);
235
244
  font-size: var(--font-size-input);
236
245
  line-height: var(--line-height-input);
@@ -241,6 +250,9 @@
241
250
  .fjs-container .fjs-form-field-label {
242
251
  display: flex;
243
252
  align-items: center;
253
+ white-space: nowrap;
254
+ overflow: hidden;
255
+ color: var(--color-text-light);
244
256
  }
245
257
 
246
258
  .fjs-container .fjs-incollapsible-label {
@@ -255,10 +267,6 @@
255
267
  letter-spacing: var(--letter-spacing-label);
256
268
  }
257
269
 
258
- .fjs-container .fjs-form-field-label {
259
- color: var(--color-text-light);
260
- }
261
-
262
270
  .fjs-container .fjs-form-field-description {
263
271
  color: var(--color-text-lighter);
264
272
  }
@@ -408,7 +416,8 @@
408
416
  }
409
417
 
410
418
  .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
411
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
419
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
420
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
412
421
  color: var(--color-text-lighter);
413
422
  line-height: var(--line-height-input);
414
423
  }
@@ -563,12 +572,43 @@
563
572
  background-color: var(--cds-toggle-off, var(--color-background-disabled));
564
573
  }
565
574
 
575
+ .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
576
+ .fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
577
+ .fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
578
+ .fjs-container .fjs-number-arrow-container.fjs-readonly button,
579
+ .fjs-container .fjs-taglist.fjs-readonly,
580
+ .fjs-container .fjs-readonly .fjs-input-group {
581
+ background-color: var(--color-background-readonly);
582
+ border-color: var(--color-borders-readonly);
583
+ }
584
+
585
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly,
586
+ .fjs-container .fjs-form-field-checklist.fjs-readonly,
587
+ .fjs-container .fjs-form-field-radio.fjs-readonly {
588
+ pointer-events: none;
589
+ }
590
+
591
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
592
+ .fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
593
+ .fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
594
+ opacity: 0.4;
595
+ accent-color: var(--color-accent-readonly);
596
+ }
597
+
566
598
  .fjs-container .fjs-button[type='submit']:disabled,
567
599
  .fjs-container .fjs-button[type='reset']:disabled {
568
600
  color: var(--cds-text-on-color-disabled, var(--color-text-light));
569
601
  background-color: var(--color-background-disabled);
570
602
  border-color: var(--color-borders-disabled);
571
603
  }
604
+
605
+ .fjs-container .fjs-button[type='submit']:read-only,
606
+ .fjs-container .fjs-button[type='reset']:read-only {
607
+ color: var(--text-light);
608
+ background-color: var(--color-background-readonly);
609
+ border-color: var(--color-borders-readonly);
610
+ }
611
+
572
612
  .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
573
613
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
574
614
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
@@ -580,6 +620,12 @@
580
620
  pointer-events: none;
581
621
  }
582
622
 
623
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
624
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
625
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
626
+ border-color: var(--color-borders-readonly);
627
+ }
628
+
583
629
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
584
630
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
585
631
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -677,7 +723,8 @@
677
723
  border-radius: 2px;
678
724
  }
679
725
 
680
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
726
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
727
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
681
728
  background-color: var(--color-background-inverted);
682
729
  }
683
730
 
@@ -691,7 +738,8 @@
691
738
  padding: 2px 6px 2px 8px;
692
739
  }
693
740
 
694
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label {
741
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
742
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
695
743
  padding: 2px 8px;
696
744
  }
697
745
 
package/dist/assets/form-js.css CHANGED
@@ -39,6 +39,7 @@
39
39
  var(--cds-field-01, var(--color-white))
40
40
  );
41
41
  --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
42
+ --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
42
43
  --color-background-adornment: var(
43
44
  --cds-field,
44
45
  var(--cds-field-01, var(--color-grey-225-10-95))
@@ -67,10 +68,15 @@
67
68
  --cds-border-subtle,
68
69
  var(--cds-border-subtle-01, var(--color-grey-225-10-85))
69
70
  );
71
+ --color-borders-readonly: var(--cds-border-disabled, var(--color-grey-225-10-75));
70
72
  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
71
73
  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
72
74
  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
73
75
  --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
76
+ --color-accent-readonly: var(
77
+ --cds-border-strong,
78
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
79
+ );
74
80
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
75
81
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
76
82
  --font-family: "IBM Plex Sans", sans-serif;
@@ -88,6 +94,7 @@
88
94
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
89
95
  --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
90
96
  --border-definition-disabled: 1px solid var(--color-borders-disabled);
97
+ --border-definition-readonly: 1px solid var(--color-borders-readonly);
91
98
  height: 100%;
92
99
  }
93
100
 
@@ -214,7 +221,9 @@
214
221
  .fjs-container .fjs-taglist-input::placeholder,
215
222
  .fjs-container .fjs-textarea::placeholder,
216
223
  .fjs-container .fjs-select > option:disabled,
217
- .fjs-container .fjs-select [disabled] {
224
+ .fjs-container .fjs-select [disabled],
225
+ .fjs-container .fjs-select > option:read-only,
226
+ .fjs-container .fjs-select [read-only] {
218
227
  color: var(--color-text-lightest);
219
228
  font-size: var(--font-size-input);
220
229
  line-height: var(--line-height-input);
@@ -225,6 +234,9 @@
225
234
  .fjs-container .fjs-form-field-label {
226
235
  display: flex;
227
236
  align-items: center;
237
+ white-space: nowrap;
238
+ overflow: hidden;
239
+ color: var(--color-text-light);
228
240
  }
229
241
 
230
242
  .fjs-container .fjs-incollapsible-label {
@@ -239,10 +251,6 @@
239
251
  letter-spacing: var(--letter-spacing-label);
240
252
  }
241
253
 
242
- .fjs-container .fjs-form-field-label {
243
- color: var(--color-text-light);
244
- }
245
-
246
254
  .fjs-container .fjs-form-field-description {
247
255
  color: var(--color-text-lighter);
248
256
  }
@@ -390,7 +398,8 @@
390
398
  }
391
399
 
392
400
  .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
393
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display {
401
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
402
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
394
403
  color: var(--color-text-lighter);
395
404
  line-height: var(--line-height-input);
396
405
  }
@@ -545,6 +554,29 @@
545
554
  background-color: var(--cds-toggle-off, var(--color-background-disabled));
546
555
  }
547
556
 
557
+ .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
558
+ .fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
559
+ .fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
560
+ .fjs-container .fjs-number-arrow-container.fjs-readonly button,
561
+ .fjs-container .fjs-taglist.fjs-readonly,
562
+ .fjs-container .fjs-readonly .fjs-input-group {
563
+ background-color: var(--color-background-readonly);
564
+ border-color: var(--color-borders-readonly);
565
+ }
566
+
567
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly,
568
+ .fjs-container .fjs-form-field-checklist.fjs-readonly,
569
+ .fjs-container .fjs-form-field-radio.fjs-readonly {
570
+ pointer-events: none;
571
+ }
572
+
573
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
574
+ .fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
575
+ .fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
576
+ opacity: 0.4;
577
+ accent-color: var(--color-accent-readonly);
578
+ }
579
+
548
580
  .fjs-container .fjs-button[type=submit]:disabled,
549
581
  .fjs-container .fjs-button[type=reset]:disabled {
550
582
  color: var(--cds-text-on-color-disabled, var(--color-text-light));
@@ -552,6 +584,13 @@
552
584
  border-color: var(--color-borders-disabled);
553
585
  }
554
586
 
587
+ .fjs-container .fjs-button[type=submit]:read-only,
588
+ .fjs-container .fjs-button[type=reset]:read-only {
589
+ color: var(--text-light);
590
+ background-color: var(--color-background-readonly);
591
+ border-color: var(--color-borders-readonly);
592
+ }
593
+
555
594
  .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
556
595
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
557
596
  .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
@@ -563,6 +602,12 @@
563
602
  pointer-events: none;
564
603
  }
565
604
 
605
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
606
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
607
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
608
+ border-color: var(--color-borders-readonly);
609
+ }
610
+
566
611
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
567
612
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
568
613
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
@@ -660,7 +705,8 @@
660
705
  border-radius: 2px;
661
706
  }
662
707
 
663
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag {
708
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
709
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
664
710
  background-color: var(--color-background-inverted);
665
711
  }
666
712
 
@@ -674,7 +720,8 @@
674
720
  padding: 2px 6px 2px 8px;
675
721
  }
676
722
 
677
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label {
723
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
724
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
678
725
  padding: 2px 8px;
679
726
  }
680
727