@bpmn-io/form-js-viewer 1.12.0 → 1.13.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 (11) hide show
  1. package/dist/assets/form-js-base.css +83 -4
  2. package/dist/assets/form-js.css +78 -4
  3. package/dist/index.cjs +524 -181
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.es.js +524 -182
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/types/index.d.ts +1 -1
  8. package/dist/types/render/components/Errors.d.ts +13 -1
  9. package/dist/types/render/components/form-fields/DocumentPreview.d.ts +61 -0
  10. package/dist/types/render/components/index.d.ts +3 -2
  11. package/package.json +2 -2
package/dist/assets/form-js-base.css CHANGED
@@ -63,6 +63,7 @@
63
63
  --color-borders: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
64
64
  --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
65
65
  --color-borders-table: var(--color-borders-group);
66
+ --color-borders-documentPreview: 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(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
68
69
  --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
@@ -1023,7 +1024,8 @@
1023
1024
  }
1024
1025
 
1025
1026
  .fjs-container .fjs-image-placeholder,
1026
- .fjs-container .fjs-iframe-placeholder {
1027
+ .fjs-container .fjs-iframe-placeholder,
1028
+ .fjs-container .fjs-documentPreview-placeholder {
1027
1029
  margin: 4px 0;
1028
1030
  width: 100%;
1029
1031
  height: 90px;
@@ -1033,12 +1035,14 @@
1033
1035
  color: var(--color-text-light);
1034
1036
  }
1035
1037
 
1036
- .fjs-container .fjs-iframe-placeholder {
1038
+ .fjs-container .fjs-iframe-placeholder,
1039
+ .fjs-container .fjs-documentPreview-placeholder {
1037
1040
  border: 1px solid var(--color-borders-readonly);
1038
1041
  }
1039
1042
 
1040
1043
  .fjs-container .fjs-image-placeholder .fjs-image-placeholder-inner,
1041
- .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
1044
+ .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text,
1045
+ .fjs-container .fjs-documentPreview-placeholder .fjs-documentPreview-placeholder-text {
1042
1046
  display: flex;
1043
1047
  align-items: center;
1044
1048
  justify-content: center;
@@ -1046,7 +1050,8 @@
1046
1050
  overflow: hidden;
1047
1051
  }
1048
1052
 
1049
- .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
1053
+ .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text,
1054
+ .fjs-container .fjs-documentPreview-placeholder .fjs-documentPreview-placeholder-text {
1050
1055
  font-size: var(--font-size-label);
1051
1056
  }
1052
1057
 
@@ -1153,6 +1158,80 @@
1153
1158
  width: 16px;
1154
1159
  }
1155
1160
 
1161
+ .fjs-container .fjs-documentPreview-document-container {
1162
+ width: 100%;
1163
+ display: flex;
1164
+ flex-direction: column;
1165
+ gap: 8px;
1166
+ }
1167
+
1168
+ .fjs-container .fjs-documentPreview-single-document-container {
1169
+ width: 100%;
1170
+ display: flex;
1171
+ flex-direction: column;
1172
+ align-items: center;
1173
+ justify-content: center;
1174
+ border: 1px solid var(--color-borders-documentPreview);
1175
+ border-radius: 3px;
1176
+
1177
+ .fjs-form-field-error {
1178
+ align-self: flex-start;
1179
+ }
1180
+ }
1181
+
1182
+ .fjs-container .fjs-documentPreview-non-preview-item {
1183
+ flex-direction: row;
1184
+ }
1185
+
1186
+ .fjs-container .fjs-documentPreview-single-document-container:not(.fjs-documentPreview-non-preview-item) {
1187
+ position: relative;
1188
+ overflow-y: auto;
1189
+ }
1190
+
1191
+ .fjs-container
1192
+ .fjs-documentPreview-single-document-container:not(.fjs-documentPreview-non-preview-item)
1193
+ .fjs-documentPreview-download-button {
1194
+ position: absolute;
1195
+ top: 6px;
1196
+ right: 6px;
1197
+ z-index: 1;
1198
+ }
1199
+
1200
+ .fjs-container .fjs-documentPreview-pdf-viewer {
1201
+ all: unset;
1202
+ width: 100%;
1203
+ min-height: 400px;
1204
+ }
1205
+
1206
+ .fjs-container .fjs-documentPreview-download-button {
1207
+ width: 24px;
1208
+ height: 24px;
1209
+ box-sizing: border-box;
1210
+ display: inline-flex;
1211
+ align-items: center;
1212
+ justify-content: center;
1213
+ border-radius: 3px;
1214
+ border: 1px solid var(--color-borders-documentPreview);
1215
+ background: var(--color-layer);
1216
+ padding: 0;
1217
+
1218
+ svg {
1219
+ color: var(--color-text);
1220
+ }
1221
+
1222
+ svg:focus {
1223
+ outline: none;
1224
+ }
1225
+ }
1226
+
1227
+ .fjs-container .fjs-documentPreview-non-preview-item {
1228
+ display: flex;
1229
+ justify-content: space-between;
1230
+ align-items: center;
1231
+ padding: 8px;
1232
+ color: var(--color-text-light);
1233
+ }
1234
+
1156
1235
  .fjs-container .fjs-repeat-row-container {
1157
1236
  display: flex;
1158
1237
  flex-direction: row;
package/dist/assets/form-js.css CHANGED
@@ -56,6 +56,7 @@
56
56
  --color-borders: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
57
57
  --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
58
58
  --color-borders-table: var(--color-borders-group);
59
+ --color-borders-documentPreview: var(--cds-border-subtle, var(--color-grey-225-10-85));
59
60
  --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
60
61
  --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
61
62
  --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
@@ -983,7 +984,8 @@
983
984
  }
984
985
 
985
986
  .fjs-container .fjs-image-placeholder,
986
- .fjs-container .fjs-iframe-placeholder {
987
+ .fjs-container .fjs-iframe-placeholder,
988
+ .fjs-container .fjs-documentPreview-placeholder {
987
989
  margin: 4px 0;
988
990
  width: 100%;
989
991
  height: 90px;
@@ -993,12 +995,14 @@
993
995
  color: var(--color-text-light);
994
996
  }
995
997
 
996
- .fjs-container .fjs-iframe-placeholder {
998
+ .fjs-container .fjs-iframe-placeholder,
999
+ .fjs-container .fjs-documentPreview-placeholder {
997
1000
  border: 1px solid var(--color-borders-readonly);
998
1001
  }
999
1002
 
1000
1003
  .fjs-container .fjs-image-placeholder .fjs-image-placeholder-inner,
1001
- .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
1004
+ .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text,
1005
+ .fjs-container .fjs-documentPreview-placeholder .fjs-documentPreview-placeholder-text {
1002
1006
  display: flex;
1003
1007
  align-items: center;
1004
1008
  justify-content: center;
@@ -1006,7 +1010,8 @@
1006
1010
  overflow: hidden;
1007
1011
  }
1008
1012
 
1009
- .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
1013
+ .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text,
1014
+ .fjs-container .fjs-documentPreview-placeholder .fjs-documentPreview-placeholder-text {
1010
1015
  font-size: var(--font-size-label);
1011
1016
  }
1012
1017
 
@@ -1113,6 +1118,75 @@
1113
1118
  width: 16px;
1114
1119
  }
1115
1120
 
1121
+ .fjs-container .fjs-documentPreview-document-container {
1122
+ width: 100%;
1123
+ display: flex;
1124
+ flex-direction: column;
1125
+ gap: 8px;
1126
+ }
1127
+
1128
+ .fjs-container .fjs-documentPreview-single-document-container {
1129
+ width: 100%;
1130
+ display: flex;
1131
+ flex-direction: column;
1132
+ align-items: center;
1133
+ justify-content: center;
1134
+ border: 1px solid var(--color-borders-documentPreview);
1135
+ border-radius: 3px;
1136
+ .fjs-form-field-error {
1137
+ align-self: flex-start;
1138
+ }
1139
+ }
1140
+
1141
+ .fjs-container .fjs-documentPreview-non-preview-item {
1142
+ flex-direction: row;
1143
+ }
1144
+
1145
+ .fjs-container .fjs-documentPreview-single-document-container:not(.fjs-documentPreview-non-preview-item) {
1146
+ position: relative;
1147
+ overflow-y: auto;
1148
+ }
1149
+
1150
+ .fjs-container .fjs-documentPreview-single-document-container:not(.fjs-documentPreview-non-preview-item) .fjs-documentPreview-download-button {
1151
+ position: absolute;
1152
+ top: 6px;
1153
+ right: 6px;
1154
+ z-index: 1;
1155
+ }
1156
+
1157
+ .fjs-container .fjs-documentPreview-pdf-viewer {
1158
+ all: unset;
1159
+ width: 100%;
1160
+ min-height: 400px;
1161
+ }
1162
+
1163
+ .fjs-container .fjs-documentPreview-download-button {
1164
+ width: 24px;
1165
+ height: 24px;
1166
+ box-sizing: border-box;
1167
+ display: inline-flex;
1168
+ align-items: center;
1169
+ justify-content: center;
1170
+ border-radius: 3px;
1171
+ border: 1px solid var(--color-borders-documentPreview);
1172
+ background: var(--color-layer);
1173
+ padding: 0;
1174
+ svg {
1175
+ color: var(--color-text);
1176
+ }
1177
+ svg:focus {
1178
+ outline: none;
1179
+ }
1180
+ }
1181
+
1182
+ .fjs-container .fjs-documentPreview-non-preview-item {
1183
+ display: flex;
1184
+ justify-content: space-between;
1185
+ align-items: center;
1186
+ padding: 8px;
1187
+ color: var(--color-text-light);
1188
+ }
1189
+
1116
1190
  .fjs-container .fjs-repeat-row-container {
1117
1191
  display: flex;
1118
1192
  flex-direction: row;