@bpmn-io/form-js-viewer 0.10.1 → 0.11.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 (67) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +165 -165
  3. package/dist/assets/form-js.css +618 -611
  4. package/dist/index.cjs +180 -183
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +180 -183
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/types/Form.d.ts +144 -144
  9. package/dist/types/core/ConditionChecker.d.ts +57 -57
  10. package/dist/types/core/EventBus.d.ts +1 -1
  11. package/dist/types/core/FormFieldRegistry.d.ts +17 -17
  12. package/dist/types/core/Validator.d.ts +7 -7
  13. package/dist/types/core/index.d.ts +18 -18
  14. package/dist/types/import/Importer.d.ts +43 -43
  15. package/dist/types/import/index.d.ts +5 -5
  16. package/dist/types/index.d.ts +18 -18
  17. package/dist/types/render/FormFields.d.ts +5 -5
  18. package/dist/types/render/Renderer.d.ts +23 -23
  19. package/dist/types/render/components/Description.d.ts +1 -1
  20. package/dist/types/render/components/Errors.d.ts +1 -1
  21. package/dist/types/render/components/FormComponent.d.ts +1 -1
  22. package/dist/types/render/components/FormField.d.ts +1 -1
  23. package/dist/types/render/components/Label.d.ts +1 -1
  24. package/dist/types/render/components/PoweredBy.d.ts +1 -1
  25. package/dist/types/render/components/Sanitizer.d.ts +8 -8
  26. package/dist/types/render/components/Util.d.ts +17 -17
  27. package/dist/types/render/components/form-fields/Button.d.ts +11 -11
  28. package/dist/types/render/components/form-fields/Checkbox.d.ts +13 -13
  29. package/dist/types/render/components/form-fields/Checklist.d.ts +12 -12
  30. package/dist/types/render/components/form-fields/Datetime.d.ts +11 -11
  31. package/dist/types/render/components/form-fields/Default.d.ts +9 -9
  32. package/dist/types/render/components/form-fields/Image.d.ts +8 -8
  33. package/dist/types/render/components/form-fields/Number.d.ts +14 -14
  34. package/dist/types/render/components/form-fields/Radio.d.ts +12 -12
  35. package/dist/types/render/components/form-fields/Select.d.ts +12 -12
  36. package/dist/types/render/components/form-fields/Taglist.d.ts +12 -12
  37. package/dist/types/render/components/form-fields/Text.d.ts +10 -10
  38. package/dist/types/render/components/form-fields/Textarea.d.ts +13 -13
  39. package/dist/types/render/components/form-fields/Textfield.d.ts +13 -13
  40. package/dist/types/render/components/form-fields/parts/Datepicker.d.ts +1 -1
  41. package/dist/types/render/components/form-fields/parts/DropdownList.d.ts +1 -1
  42. package/dist/types/render/components/form-fields/parts/InputAdorner.d.ts +1 -1
  43. package/dist/types/render/components/form-fields/parts/Timepicker.d.ts +1 -1
  44. package/dist/types/render/components/icons/index.d.ts +16 -16
  45. package/dist/types/render/components/index.d.ts +17 -17
  46. package/dist/types/render/components/util/dateTimeUtil.d.ts +12 -12
  47. package/dist/types/render/components/util/numberFieldUtil.d.ts +4 -4
  48. package/dist/types/render/components/util/sanitizerUtil.d.ts +3 -3
  49. package/dist/types/render/context/FormContext.d.ts +12 -12
  50. package/dist/types/render/context/FormRenderContext.d.ts +6 -6
  51. package/dist/types/render/context/index.d.ts +2 -2
  52. package/dist/types/render/hooks/useCondition.d.ts +9 -9
  53. package/dist/types/render/hooks/useEvaluation.d.ts +6 -6
  54. package/dist/types/render/hooks/useExpressionValue.d.ts +5 -5
  55. package/dist/types/render/hooks/useKeyDownAction.d.ts +1 -1
  56. package/dist/types/render/hooks/useService.d.ts +1 -1
  57. package/dist/types/render/hooks/useValuesAsync.d.ts +28 -28
  58. package/dist/types/render/index.d.ts +11 -11
  59. package/dist/types/src/types.d.ts +35 -35
  60. package/dist/types/util/constants/DatetimeConstants.d.ts +24 -24
  61. package/dist/types/util/constants/ValuesSourceConstants.d.ts +15 -15
  62. package/dist/types/util/constants/index.d.ts +2 -2
  63. package/dist/types/util/feel.d.ts +15 -15
  64. package/dist/types/util/form.d.ts +6 -6
  65. package/dist/types/util/index.d.ts +25 -25
  66. package/dist/types/util/injector.d.ts +2 -2
  67. package/package.json +2 -2
package/dist/assets/form-js.css CHANGED
@@ -1,611 +1,618 @@
1
- /**
2
- * Theming
3
- */
4
- .fjs-container {
5
- --color-grey-225-10-15: hsl(225, 10%, 15%);
6
- --color-grey-225-10-35: hsl(225, 10%, 35%);
7
- --color-grey-225-10-45: hsl(225, 10%, 45%);
8
- --color-grey-225-10-55: hsl(225, 10%, 55%);
9
- --color-grey-225-10-75: hsl(225, 10%, 75%);
10
- --color-grey-225-10-80: hsl(225, 10%, 80%);
11
- --color-grey-225-10-85: hsl(225, 10%, 85%);
12
- --color-grey-225-10-90: hsl(225, 10%, 90%);
13
- --color-grey-225-10-93: hsl(225, 10%, 93%);
14
- --color-grey-225-10-95: hsl(225, 10%, 95%);
15
- --color-grey-225-10-97: hsl(225, 10%, 97%);
16
-
17
- --color-blue-205-100-40: hsl(205, 100%, 40%);
18
- --color-blue-205-100-45: hsl(205, 100%, 45%);
19
- --color-blue-205-100-50: hsl(205, 100%, 50%);
20
- --color-blue-205-100-80: hsl(205, 100%, 80%);
21
- --color-blue-205-100-95: hsl(205, 100%, 95%);
22
-
23
- --color-green-150-86-44: hsl(150, 86%, 44%);
24
-
25
- --color-red-360-100-40: hsl(360, 100%, 40%);
26
- --color-red-360-100-45: hsl(360, 100%, 45%);
27
- --color-red-360-100-92: hsl(360, 100%, 92%);
28
- --color-red-360-100-95: hsl(360, 100%, 95%);
29
- --color-red-360-100-97: hsl(360, 100%, 97%);
30
-
31
- --color-white: hsl(0, 0%, 100%);
32
- --color-black: hsl(0, 0%, 0%);
33
-
34
- --color-background: var(--color-white);
35
- --color-background-disabled: var(--color-grey-225-10-95);
36
- --color-background-adornment: var(--color-grey-225-10-95);
37
- --color-text: var(--color-grey-225-10-15);
38
- --color-text-light: var(--color-grey-225-10-35);
39
- --color-text-lighter: var(--color-grey-225-10-45);
40
- --color-text-lightest: var(--color-grey-225-10-55);
41
- --color-text-inverted: var(--color-white);
42
- --color-borders: var(--color-grey-225-10-55);
43
- --color-borders-disabled: var(--color-grey-225-10-75);
44
- --color-borders-adornment: var(--color-grey-225-10-85);
45
- --color-warning: var(--color-red-360-100-45);
46
- --color-accent: var(--color-blue-205-100-40);
47
- --color-datepicker-focused-day: var(--color-grey-225-10-55);
48
-
49
- --font-family: 'IBM Plex Sans', sans-serif;
50
-
51
- --border-definition: 1px solid var(--color-borders);
52
- --border-definition-adornment: 1px solid var(--color-borders-adornment);
53
- --outline-definition: 1px solid var(--color-borders);
54
- --border-definition-disabled: 1px solid var(--color-borders-disabled);
55
-
56
- height: 100%;
57
- }
58
-
59
- /**
60
- * Layout styles
61
- */
62
- .fjs-container .fjs-vertical-layout {
63
- display: flex;
64
- flex-direction: column;
65
- }
66
-
67
- .fjs-container .fjs-columns {
68
- display: flex;
69
- flex-direction: row;
70
- }
71
-
72
- .fjs-container .fjs-vertical-group {
73
- display: flex;
74
- flex: 1;
75
- width: 100%;
76
- }
77
-
78
- .fjs-container .fjs-column {
79
- flex-grow: 1;
80
- }
81
-
82
- .fjs-container img {
83
- max-width: 100%;
84
- }
85
-
86
- /**
87
- * Visual styles
88
- */
89
- .fjs-container .fjs-form {
90
- font-family: var(--font-family);
91
- font-size: 14px;
92
- line-height: 1.3;
93
- font-weight: 400;
94
- color: var(--color-text);
95
- background-color: var(--color-background);
96
- position: relative;
97
- }
98
-
99
- .fjs-container .fjs-form * {
100
- box-sizing: border-box;
101
- }
102
-
103
- .fjs-container .fjs-form-field {
104
- margin: 16px;
105
- }
106
-
107
- .fjs-container .fjs-form-field-placeholder {
108
- color: var(--color-text-light);
109
- font-style: italic;
110
- }
111
-
112
- .fjs-container .fjs-form-field-placeholder svg {
113
- width: 36px;
114
- height: 36px;
115
- vertical-align: middle;
116
- margin-top: -2px;
117
- margin-right: 2px;
118
- }
119
-
120
- .fjs-container .fjs-input,
121
- .fjs-container .fjs-textarea,
122
- .fjs-container .fjs-select {
123
- border-color: var(--color-borders);
124
- background-color: var(--color-background);
125
- font-family: inherit;
126
- }
127
-
128
- .fjs-container .fjs-input::placeholder,
129
- .fjs-container .fjs-textarea::placeholder,
130
- .fjs-container .fjs-select > option:disabled,
131
- .fjs-container .fjs-select [disabled] {
132
- font-style: italic;
133
- letter-spacing: 0.25px;
134
- color: var(--color-text-lightest);
135
- }
136
-
137
- .fjs-container .fjs-form-field-label {
138
- display: flex;
139
- align-items: center;
140
- }
141
-
142
- .fjs-container .fjs-incollapsible-label {
143
- min-height: 18.2px;
144
- }
145
-
146
- .fjs-container .fjs-form-field-description {
147
- display: block;
148
- color: var(--color-text-light);
149
- }
150
-
151
- .fjs-container .fjs-form-field-label,
152
- .fjs-container .fjs-form-field-description {
153
- margin: 4px 0;
154
- }
155
-
156
- .fjs-container .fjs-form-field.required label::after,
157
- .fjs-container .fjs-form-field.required .group-title::after {
158
- content: '*';
159
- }
160
-
161
- .fjs-container .fjs-checkbox.group.required label::after,
162
- .fjs-container .fjs-radio.required label::after {
163
- display: none;
164
- }
165
-
166
- .fjs-container .fjs-input,
167
- .fjs-container .fjs-textarea,
168
- .fjs-container .fjs-select {
169
- background-color: var(--color-background);
170
- }
171
-
172
- .fjs-container .fjs-input-adornment {
173
- border-style: solid;
174
- border-color: var(--color-borders-adornment);
175
- background-color: var(--color-background-adornment);
176
- color: var(--color-text-lighter);
177
- padding: 8px;
178
- width: auto !important;
179
- min-width: 34px;
180
- text-align: center;
181
- }
182
-
183
- .fjs-container .fjs-input-adornment svg {
184
- display: block;
185
- margin: auto;
186
- width: 15px;
187
- }
188
-
189
- .fjs-container .fjs-input-adornment span {
190
- color: var(--color-background-adornment);
191
- }
192
-
193
- .fjs-container .fjs-input::placeholder,
194
- .fjs-container .fjs-textarea::placeholder,
195
- .fjs-container .fjs-select > option:disabled,
196
- .fjs-container .fjs-select [disabled] {
197
- font-style: italic;
198
- letter-spacing: 0.25px;
199
- color: var(--color-text-lightest);
200
- }
201
-
202
- .fjs-container .fjs-input[type='text'],
203
- .fjs-container .fjs-input[type='email'],
204
- .fjs-container .fjs-input[type='tel'],
205
- .fjs-container .fjs-input[type='number'],
206
- .fjs-container .fjs-button[type='submit'],
207
- .fjs-container .fjs-button[type='reset'],
208
- .fjs-container .fjs-textarea,
209
- .fjs-container .fjs-select {
210
- display: block;
211
- width: 100%;
212
- padding: 8px;
213
- margin: 4px 0;
214
- border: var(--border-definition);
215
- border-radius: 3px;
216
- }
217
-
218
- .fjs-container .fjs-datepicker,
219
- .fjs-container .fjs-timepicker,
220
- .fjs-container .fjs-datetime-subsection {
221
- width: 100%;
222
- }
223
-
224
- .fjs-container .fjs-datetime-separator {
225
- width: 10px;
226
- }
227
-
228
- .fjs-container .fjs-input-group {
229
- display: flex;
230
- width: 100%;
231
- margin: 4px 0;
232
- border: var(--border-definition);
233
- border-radius: 3px;
234
- }
235
-
236
- .fjs-container .fjs-taglist .fjs-taglist-input,
237
- .fjs-container .fjs-input-group .fjs-input {
238
- border: none;
239
- border-radius: 0;
240
- margin: 0;
241
- outline: 0;
242
- width: auto;
243
- flex-grow: 1;
244
- }
245
-
246
- .fjs-container .fjs-input-group .fjs-input-adornment {
247
- border-width: 0;
248
- }
249
-
250
- .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
251
- border-left-width: 1px;
252
- }
253
-
254
- .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
255
- border-right-width: 1px;
256
- }
257
-
258
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
259
- border-radius: 0 3px 3px 0;
260
- }
261
-
262
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
263
- border-radius: 3px 0 0 3px;
264
- }
265
-
266
- .fjs-container .fjs-input-group .fjs-input,
267
- .fjs-container .fjs-input-group.disabled .fjs-input {
268
- border-radius: 3px;
269
- }
270
-
271
- .fjs-container .fjs-vertical-group {
272
- display: flex;
273
- width: 100%;
274
- }
275
-
276
- .fjs-container .flatpickr-wrapper {
277
- width: 100%;
278
- }
279
-
280
- .fjs-container .fjs-textarea {
281
- resize: none;
282
- overflow: hidden;
283
- height: 75px;
284
- font-size: 14px;
285
- }
286
-
287
- .fjs-container .fjs-number-arrow-container {
288
- display: flex;
289
- flex-direction: column;
290
- border-radius: 0 2px 2px 0;
291
- width: 23px;
292
- overflow: clip;
293
- border-left: var(--border-definition-adornment);
294
- }
295
-
296
- .fjs-container .fjs-number-arrow-separator {
297
- height: 1px;
298
- background-color: var(--color-borders-adornment);
299
- }
300
-
301
- .fjs-container .fjs-number-arrow-container button {
302
- border: none;
303
- flex: 1;
304
- color: var(--color-text-light);
305
- background-color: var(--color-grey-225-10-95);
306
- font-weight: bold;
307
- font-size: 10px;
308
- }
309
-
310
- .fjs-container .fjs-number-arrow-container button:hover {
311
- background-color: var(--color-grey-225-10-93);
312
- color: var(--color-text);
313
- }
314
-
315
-
316
-
317
- .fjs-container .fjs-radio {
318
- display: flex;
319
- flex-direction: column;
320
- }
321
-
322
- .fjs-container .fjs-input[type='checkbox'],
323
- .fjs-container .fjs-input[type='radio'] {
324
- margin: 6px 10px 6px 4px;
325
- }
326
-
327
- .fjs-container .fjs-button[type='submit'] {
328
- color: var(--color-text-inverted);
329
- background-color: var(--color-accent);
330
- border-color: var(--color-accent);
331
- }
332
-
333
- .fjs-container .fjs-button[type='reset'] {
334
- color: var(--color-text);
335
- background-color: transparent;
336
- border-color: var(--color-borders);
337
- }
338
-
339
- .fjs-container .fjs-button[type='submit'],
340
- .fjs-container .fjs-button[type='reset'] {
341
- min-width: 100px;
342
- width: auto;
343
- }
344
-
345
- .fjs-container .fjs-button[type='submit'] {
346
- font-weight: 600;
347
- }
348
-
349
- .fjs-container .fjs-taglist:focus-within,
350
- .fjs-container .fjs-input-group:focus-within,
351
- .fjs-container .fjs-input[type='text']:focus,
352
- .fjs-container .fjs-input[type='email']:focus,
353
- .fjs-container .fjs-input[type='tel']:focus,
354
- .fjs-container .fjs-input[type='number']:focus,
355
- .fjs-container .fjs-button[type='submit']:focus,
356
- .fjs-container .fjs-button[type='reset']:focus,
357
- .fjs-container .fjs-textarea:focus,
358
- .fjs-container .fjs-select:focus {
359
- outline: var(--outline-definition);
360
- }
361
-
362
- .fjs-container .fjs-input-group .fjs-input,
363
- .fjs-container .fjs-input-group .fjs-input:focus {
364
- outline: none;
365
- }
366
-
367
- .fjs-container .fjs-input-group .fjs-input,
368
- .fjs-container .fjs-input-group .fjs-input:focus {
369
- outline: none;
370
- }
371
-
372
- .fjs-container .fjs-button[type='submit']:focus {
373
- border-color: var(--color-accent);
374
- }
375
-
376
- .fjs-container .fjs-input:disabled,
377
- .fjs-container .fjs-textarea:disabled,
378
- .fjs-container .fjs-select:disabled,
379
- .fjs-container .fjs-number-arrow-container.disabled button,
380
- .fjs-container .fjs-input-group.disabled,
381
- .fjs-container .fjs-taglist.disabled {
382
- background-color: var(--color-background-disabled);
383
- border-color: var(--color-borders-disabled);
384
- }
385
-
386
- .fjs-container .fjs-button[type='submit']:disabled,
387
- .fjs-container .fjs-button[type='reset']:disabled {
388
- color: var(--text-light);
389
- background-color: var(--color-background-disabled);
390
- border-color: var(--color-borders-disabled);
391
- }
392
-
393
- .fjs-container .fjs-input-group.disabled .fjs-input,
394
- .fjs-container .fjs-input-group.disabled .fjs-input-adornment {
395
- border-color: var(--color-borders-disabled);
396
- }
397
-
398
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
399
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
400
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
401
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
402
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
403
- border-color: var(--color-warning);
404
- outline-color: var(--color-warning);
405
- }
406
-
407
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
408
- border-color: var(--color-red-360-100-92);
409
- }
410
-
411
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
412
- background-color: var(--color-red-360-100-92);
413
- }
414
-
415
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
416
- background-color: var(--color-red-360-100-97);
417
- }
418
-
419
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
420
- background-color: var(--color-red-360-100-95);
421
- }
422
-
423
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
424
- border-color: var(--color-red-360-100-92);
425
- background: var(--color-red-360-100-97);
426
- }
427
-
428
- .fjs-container .fjs-form-field-error {
429
- color: var(--color-warning);
430
- }
431
-
432
- .fjs-container .fjs-form-field-error > ul {
433
- list-style-type: none;
434
- margin: 0;
435
- padding: 0;
436
- }
437
-
438
- .fjs-container .fjs-form-field-error > ul > li {
439
- list-style-type: none;
440
- }
441
-
442
- .fjs-container .fjs-form-field-text a {
443
- color: var(--color-accent);
444
- }
445
-
446
- .fjs-container .fjs-taglist-anchor,
447
- .fjs-container .fjs-timepicker-anchor {
448
- position: relative;
449
- }
450
-
451
- .fjs-container .fjs-taglist {
452
- display: flex;
453
- flex-wrap: wrap;
454
- gap: 5px;
455
- border: var(--color-borders) solid 1px;
456
- border-radius: 3px;
457
- margin: 4px 0;
458
- padding: 5px;
459
- background-color: var(--color-background);
460
- }
461
-
462
- .fjs-container .fjs-taglist .fjs-taglist-tag {
463
- display: flex;
464
- overflow: hidden;
465
- user-select: none;
466
- border-radius: 2px;
467
- background-color: var(--color-grey-225-10-90);
468
- }
469
-
470
- .fjs-container .fjs-taglist .fjs-taglist-tags {
471
- display: flex;
472
- flex-wrap: wrap;
473
- gap: 5px;
474
- }
475
-
476
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
477
- padding: 2px 6px 2px 8px;
478
- }
479
-
480
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
481
- overflow: clip;
482
- width: 22px;
483
- height: 22px;
484
- text-align: center;
485
- line-height: 28px;
486
- background-color: var(--color-grey-225-10-80);
487
- border: none;
488
- padding: 1px 0;
489
- color: var(--color-black);
490
- }
491
-
492
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {
493
- opacity: 0.6;
494
- }
495
-
496
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
497
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
498
- background-color: var(--color-grey-225-10-75);
499
- }
500
-
501
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
502
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
503
- opacity: 1;
504
- }
505
-
506
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
507
- outline: none;
508
- }
509
-
510
- .fjs-container .fjs-taglist .fjs-taglist-input {
511
- border: none;
512
- background-color: transparent;
513
- min-width: 100px;
514
- height: 22px;
515
- flex-grow: 1;
516
- }
517
-
518
- .fjs-container .fjs-dropdownlist {
519
- z-index: 1;
520
- position: absolute;
521
- user-select: none;
522
- overflow-y: auto;
523
- width: 100%;
524
- border-radius: 3px;
525
- margin-top: 3px;
526
- box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
527
- background-color: var(--color-white);
528
- }
529
-
530
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
531
- padding: 6px 8px;
532
- border-bottom: 1px solid var(--color-grey-225-10-90);
533
- color: var(--color-grey-225-10-35);
534
- }
535
-
536
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
537
- border-bottom: none;
538
- }
539
-
540
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
541
- background-color: var(--color-grey-225-10-90);
542
- color: var(--color-black);
543
- }
544
-
545
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
546
- padding: 6px 8px;
547
- color: var(--color-text-lightest);
548
- }
549
-
550
- .fjs-container .fjs-image-container {
551
- width: fit-content;
552
- height: fit-content;
553
- }
554
-
555
- .fjs-container .fjs-image {
556
- object-fit: contain;
557
- }
558
-
559
- .fjs-container .fjs-image-placeholder {
560
- height: 64px;
561
- margin: 4px 0;
562
- }
563
-
564
- /**
565
- * Flatpickr style adjustments
566
- */
567
-
568
- .flatpickr-day.today {
569
- border-color: transparent !important;
570
- background-color: transparent !important;
571
- font-weight: bold !important;
572
- }
573
-
574
- .flatpickr-day.today:hover,
575
- .flatpickr-day.today:focus {
576
- border-color: var(--color-borders) !important;
577
- background-color: var(--color-datepicker-focused-day) !important;
578
- color: var(--color-text-inverted) !important;
579
- }
580
-
581
- .flatpickr-day.selected {
582
- border-color: var(--color-accent) !important;
583
- background-color: inherit !important;
584
- color: inherit !important;
585
- font-weight: normal !important;
586
- }
587
-
588
- .flatpickr-day.selected.today {
589
- font-weight: bold !important;
590
- }
591
-
592
- .flatpickr-day.selected:hover,
593
- .flatpickr-day.selected:focus {
594
- background-color: var(--color-accent) !important;
595
- font-weight: bold !important;
596
- color: var(--color-text-inverted) !important;
597
- }
598
-
599
- .flatpickr-days, .flatpickr-weekdays {
600
- padding: 10px !important;
601
- width: 100% !important;
602
- }
603
-
604
- .fjs-container .flatpickr-calendar.hasTime.noCalendar {
605
- width: auto !important;
606
- max-width: 250px !important;
607
- }
608
-
609
- .flatpickr-calendar {
610
- width: 326px !important;
611
- }
1
+ /**
2
+ * Theming
3
+ */
4
+ .fjs-container {
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-45: hsl(225, 10%, 45%);
8
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
9
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
10
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
11
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
12
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
13
+ --color-grey-225-10-93: hsl(225, 10%, 93%);
14
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
15
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
16
+
17
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
18
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
19
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
20
+ --color-blue-205-100-80: hsl(205, 100%, 80%);
21
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
22
+
23
+ --color-green-150-86-44: hsl(150, 86%, 44%);
24
+
25
+ --color-red-360-100-40: hsl(360, 100%, 40%);
26
+ --color-red-360-100-45: hsl(360, 100%, 45%);
27
+ --color-red-360-100-92: hsl(360, 100%, 92%);
28
+ --color-red-360-100-95: hsl(360, 100%, 95%);
29
+ --color-red-360-100-97: hsl(360, 100%, 97%);
30
+
31
+ --color-white: hsl(0, 0%, 100%);
32
+ --color-black: hsl(0, 0%, 0%);
33
+
34
+ --color-background: var(--color-white);
35
+ --color-background-disabled: var(--color-grey-225-10-95);
36
+ --color-background-adornment: var(--color-grey-225-10-95);
37
+ --color-text: var(--color-grey-225-10-15);
38
+ --color-text-light: var(--color-grey-225-10-35);
39
+ --color-text-lighter: var(--color-grey-225-10-45);
40
+ --color-text-lightest: var(--color-grey-225-10-55);
41
+ --color-text-inverted: var(--color-white);
42
+ --color-borders: var(--color-grey-225-10-55);
43
+ --color-borders-disabled: var(--color-grey-225-10-75);
44
+ --color-borders-adornment: var(--color-grey-225-10-85);
45
+ --color-warning: var(--color-red-360-100-45);
46
+ --color-accent: var(--color-blue-205-100-40);
47
+ --color-datepicker-focused-day: var(--color-grey-225-10-55);
48
+
49
+ --font-family: 'IBM Plex Sans', sans-serif;
50
+
51
+ --border-definition: 1px solid var(--color-borders);
52
+ --border-definition-adornment: 1px solid var(--color-borders-adornment);
53
+ --outline-definition: 1px solid var(--color-borders);
54
+ --border-definition-disabled: 1px solid var(--color-borders-disabled);
55
+
56
+ height: 100%;
57
+ }
58
+
59
+ /**
60
+ * Layout styles
61
+ */
62
+ .fjs-container .fjs-vertical-layout {
63
+ display: flex;
64
+ flex-direction: column;
65
+ }
66
+
67
+ .fjs-container .fjs-columns {
68
+ display: flex;
69
+ flex-direction: row;
70
+ }
71
+
72
+ .fjs-container .fjs-vertical-group {
73
+ display: flex;
74
+ flex: 1;
75
+ width: 100%;
76
+ }
77
+
78
+ .fjs-container .fjs-column {
79
+ flex-grow: 1;
80
+ }
81
+
82
+ .fjs-container img {
83
+ max-width: 100%;
84
+ }
85
+
86
+ /**
87
+ * Visual styles
88
+ */
89
+ .fjs-container .fjs-form {
90
+ font-family: var(--font-family);
91
+ font-size: 14px;
92
+ line-height: 1.3;
93
+ font-weight: 400;
94
+ color: var(--color-text);
95
+ background-color: var(--color-background);
96
+ position: relative;
97
+ }
98
+
99
+ .fjs-container .fjs-form * {
100
+ box-sizing: border-box;
101
+ }
102
+
103
+ .fjs-container .fjs-form-field {
104
+ margin: 16px;
105
+ }
106
+
107
+ .fjs-container .fjs-form-field-placeholder {
108
+ color: var(--color-text-light);
109
+ font-style: italic;
110
+ }
111
+
112
+ .fjs-container .fjs-form-field-placeholder svg {
113
+ width: 36px;
114
+ height: 36px;
115
+ vertical-align: middle;
116
+ margin-top: -2px;
117
+ margin-right: 2px;
118
+ }
119
+
120
+ .fjs-container .fjs-input,
121
+ .fjs-container .fjs-textarea,
122
+ .fjs-container .fjs-select {
123
+ border-color: var(--color-borders);
124
+ background-color: var(--color-background);
125
+ font-family: inherit;
126
+ }
127
+
128
+ .fjs-container .fjs-input::placeholder,
129
+ .fjs-container .fjs-textarea::placeholder,
130
+ .fjs-container .fjs-select > option:disabled,
131
+ .fjs-container .fjs-select [disabled] {
132
+ font-style: italic;
133
+ letter-spacing: 0.25px;
134
+ color: var(--color-text-lightest);
135
+ }
136
+
137
+ .fjs-container .fjs-form-field-label {
138
+ display: flex;
139
+ align-items: center;
140
+ }
141
+
142
+ .fjs-container .fjs-incollapsible-label {
143
+ min-height: 18.2px;
144
+ }
145
+
146
+ .fjs-container .fjs-form-field-description {
147
+ display: block;
148
+ color: var(--color-text-light);
149
+ }
150
+
151
+ .fjs-container .fjs-form-field-label,
152
+ .fjs-container .fjs-form-field-description {
153
+ margin: 4px 0;
154
+ }
155
+
156
+ .fjs-container .fjs-form-field.required label::after,
157
+ .fjs-container .fjs-form-field.required .group-title::after {
158
+ content: '*';
159
+ }
160
+
161
+ .fjs-container .fjs-checkbox.group.required label::after,
162
+ .fjs-container .fjs-radio.required label::after {
163
+ display: none;
164
+ }
165
+
166
+ .fjs-container .fjs-input,
167
+ .fjs-container .fjs-textarea,
168
+ .fjs-container .fjs-select {
169
+ background-color: var(--color-background);
170
+ }
171
+
172
+ .fjs-container .fjs-input-adornment {
173
+ border-style: solid;
174
+ border-color: var(--color-borders-adornment);
175
+ background-color: var(--color-background-adornment);
176
+ color: var(--color-text-lighter);
177
+ padding: 8px;
178
+ width: auto !important;
179
+ min-width: 34px;
180
+ text-align: center;
181
+ overflow: hidden;
182
+ text-overflow: ellipsis;
183
+ }
184
+
185
+ .fjs-container .fjs-input-adornment svg {
186
+ display: block;
187
+ margin: auto;
188
+ width: 15px;
189
+ }
190
+
191
+ .fjs-container .fjs-input-adornment span {
192
+ color: var(--color-background-adornment);
193
+ }
194
+
195
+ .fjs-container .fjs-input::placeholder,
196
+ .fjs-container .fjs-textarea::placeholder,
197
+ .fjs-container .fjs-select > option:disabled,
198
+ .fjs-container .fjs-select [disabled] {
199
+ font-style: italic;
200
+ letter-spacing: 0.25px;
201
+ color: var(--color-text-lightest);
202
+ }
203
+
204
+ .fjs-container .fjs-input[type='text'],
205
+ .fjs-container .fjs-input[type='email'],
206
+ .fjs-container .fjs-input[type='tel'],
207
+ .fjs-container .fjs-input[type='number'],
208
+ .fjs-container .fjs-button[type='submit'],
209
+ .fjs-container .fjs-button[type='reset'],
210
+ .fjs-container .fjs-textarea,
211
+ .fjs-container .fjs-select {
212
+ display: block;
213
+ width: 100%;
214
+ padding: 8px;
215
+ margin: 4px 0;
216
+ border: var(--border-definition);
217
+ border-radius: 3px;
218
+ }
219
+
220
+ .fjs-container .fjs-datepicker,
221
+ .fjs-container .fjs-timepicker,
222
+ .fjs-container .fjs-datetime-subsection {
223
+ width: 100%;
224
+ }
225
+
226
+ .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
227
+ color: var(--color-black);
228
+ }
229
+
230
+ .fjs-container .fjs-datetime-separator {
231
+ width: 10px;
232
+ }
233
+
234
+ .fjs-container .fjs-input-group {
235
+ display: flex;
236
+ width: 100%;
237
+ margin: 4px 0;
238
+ border: var(--border-definition);
239
+ border-radius: 3px;
240
+ }
241
+
242
+ .fjs-container .fjs-taglist .fjs-taglist-input,
243
+ .fjs-container .fjs-input-group .fjs-input {
244
+ border: none;
245
+ border-radius: 0;
246
+ margin: 0;
247
+ outline: 0;
248
+ width: auto;
249
+ flex-grow: 1;
250
+ }
251
+
252
+ .fjs-container .fjs-input-group .fjs-input-adornment {
253
+ border-width: 0;
254
+ }
255
+
256
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
257
+ border-left-width: 1px;
258
+ }
259
+
260
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
261
+ border-right-width: 1px;
262
+ }
263
+
264
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
265
+ border-radius: 0 3px 3px 0;
266
+ }
267
+
268
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
269
+ border-radius: 3px 0 0 3px;
270
+ }
271
+
272
+ .fjs-container .fjs-input-group .fjs-input,
273
+ .fjs-container .fjs-input-group.disabled .fjs-input {
274
+ border-radius: 3px;
275
+ }
276
+
277
+ .fjs-container .fjs-vertical-group {
278
+ display: flex;
279
+ width: 100%;
280
+ }
281
+
282
+ .fjs-container .flatpickr-wrapper {
283
+ width: 100%;
284
+ }
285
+
286
+ .fjs-container .fjs-textarea {
287
+ resize: none;
288
+ overflow: hidden;
289
+ height: 75px;
290
+ font-size: 14px;
291
+ }
292
+
293
+ .fjs-container .fjs-number-arrow-container {
294
+ display: flex;
295
+ flex-direction: column;
296
+ border-radius: 0 2px 2px 0;
297
+ width: 23px;
298
+ overflow: clip;
299
+ border-left: var(--border-definition-adornment);
300
+ }
301
+
302
+ .fjs-container .fjs-number-arrow-separator {
303
+ height: 1px;
304
+ background-color: var(--color-borders-adornment);
305
+ }
306
+
307
+ .fjs-container .fjs-number-arrow-container button {
308
+ border: none;
309
+ flex: 1;
310
+ color: var(--color-text-light);
311
+ background-color: var(--color-grey-225-10-95);
312
+ font-weight: bold;
313
+ font-size: 10px;
314
+ }
315
+
316
+ .fjs-container .fjs-number-arrow-container button:hover {
317
+ background-color: var(--color-grey-225-10-93);
318
+ color: var(--color-text);
319
+ }
320
+
321
+
322
+
323
+ .fjs-container .fjs-radio {
324
+ display: flex;
325
+ flex-direction: column;
326
+ }
327
+
328
+ .fjs-container .fjs-input[type='checkbox'],
329
+ .fjs-container .fjs-input[type='radio'] {
330
+ margin: 6px 10px 6px 4px;
331
+ }
332
+
333
+ .fjs-container .fjs-button[type='submit'] {
334
+ color: var(--color-text-inverted);
335
+ background-color: var(--color-accent);
336
+ border-color: var(--color-accent);
337
+ }
338
+
339
+ .fjs-container .fjs-button[type='reset'] {
340
+ color: var(--color-text);
341
+ background-color: transparent;
342
+ border-color: var(--color-borders);
343
+ }
344
+
345
+ .fjs-container .fjs-button[type='submit'],
346
+ .fjs-container .fjs-button[type='reset'] {
347
+ min-width: 100px;
348
+ width: auto;
349
+ }
350
+
351
+ .fjs-container .fjs-button[type='submit'] {
352
+ font-weight: 600;
353
+ }
354
+
355
+ .fjs-container .fjs-taglist:focus-within,
356
+ .fjs-container .fjs-input-group:focus-within,
357
+ .fjs-container .fjs-input[type='text']:focus,
358
+ .fjs-container .fjs-input[type='email']:focus,
359
+ .fjs-container .fjs-input[type='tel']:focus,
360
+ .fjs-container .fjs-input[type='number']:focus,
361
+ .fjs-container .fjs-button[type='submit']:focus,
362
+ .fjs-container .fjs-button[type='reset']:focus,
363
+ .fjs-container .fjs-textarea:focus,
364
+ .fjs-container .fjs-select:focus {
365
+ outline: var(--outline-definition);
366
+ }
367
+
368
+ .fjs-container .fjs-input-group .fjs-input,
369
+ .fjs-container .fjs-input-group .fjs-input:focus {
370
+ outline: none;
371
+ }
372
+
373
+ .fjs-container .fjs-input-group .fjs-input,
374
+ .fjs-container .fjs-input-group .fjs-input:focus {
375
+ outline: none;
376
+ }
377
+
378
+ .fjs-container .fjs-button[type='submit']:focus {
379
+ border-color: var(--color-accent);
380
+ }
381
+
382
+ .fjs-container .fjs-input:disabled,
383
+ .fjs-container .fjs-textarea:disabled,
384
+ .fjs-container .fjs-select:disabled,
385
+ .fjs-container .fjs-number-arrow-container.disabled button,
386
+ .fjs-container .fjs-input-group.disabled,
387
+ .fjs-container .fjs-taglist.disabled {
388
+ background-color: var(--color-background-disabled);
389
+ border-color: var(--color-borders-disabled);
390
+ }
391
+
392
+ .fjs-container .fjs-button[type='submit']:disabled,
393
+ .fjs-container .fjs-button[type='reset']:disabled {
394
+ color: var(--text-light);
395
+ background-color: var(--color-background-disabled);
396
+ border-color: var(--color-borders-disabled);
397
+ }
398
+
399
+ .fjs-container .fjs-input-group.disabled .fjs-input,
400
+ .fjs-container .fjs-input-group.disabled .fjs-input-adornment {
401
+ border-color: var(--color-borders-disabled);
402
+ }
403
+
404
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
405
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
406
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
407
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
408
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
409
+ border-color: var(--color-warning);
410
+ outline-color: var(--color-warning);
411
+ }
412
+
413
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
414
+ border-color: var(--color-red-360-100-92);
415
+ }
416
+
417
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
418
+ background-color: var(--color-red-360-100-92);
419
+ }
420
+
421
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
422
+ background-color: var(--color-red-360-100-97);
423
+ }
424
+
425
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
426
+ background-color: var(--color-red-360-100-95);
427
+ }
428
+
429
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
430
+ border-color: var(--color-red-360-100-92);
431
+ background: var(--color-red-360-100-97);
432
+ }
433
+
434
+ .fjs-container .fjs-form-field-error {
435
+ color: var(--color-warning);
436
+ }
437
+
438
+ .fjs-container .fjs-form-field-error > ul {
439
+ list-style-type: none;
440
+ margin: 0;
441
+ padding: 0;
442
+ }
443
+
444
+ .fjs-container .fjs-form-field-error > ul > li {
445
+ list-style-type: none;
446
+ }
447
+
448
+ .fjs-container .fjs-form-field-text a {
449
+ color: var(--color-accent);
450
+ }
451
+
452
+ .fjs-container .fjs-taglist-anchor,
453
+ .fjs-container .fjs-timepicker-anchor {
454
+ position: relative;
455
+ }
456
+
457
+ .fjs-container .fjs-taglist {
458
+ display: flex;
459
+ flex-wrap: wrap;
460
+ gap: 5px;
461
+ border: var(--color-borders) solid 1px;
462
+ border-radius: 3px;
463
+ margin: 4px 0;
464
+ padding: 5px;
465
+ background-color: var(--color-background);
466
+ }
467
+
468
+ .fjs-container .fjs-taglist .fjs-taglist-tag {
469
+ display: flex;
470
+ overflow: hidden;
471
+ user-select: none;
472
+ border-radius: 2px;
473
+ background-color: var(--color-grey-225-10-90);
474
+ }
475
+
476
+ .fjs-container .fjs-taglist .fjs-taglist-tags {
477
+ display: flex;
478
+ flex-wrap: wrap;
479
+ gap: 5px;
480
+ }
481
+
482
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
483
+ padding: 2px 6px 2px 8px;
484
+ }
485
+
486
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
487
+ overflow: clip;
488
+ width: 22px;
489
+ height: 22px;
490
+ text-align: center;
491
+ line-height: 28px;
492
+ background-color: var(--color-grey-225-10-80);
493
+ border: none;
494
+ padding: 1px 0;
495
+ color: var(--color-black);
496
+ }
497
+
498
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {
499
+ opacity: 0.6;
500
+ }
501
+
502
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
503
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
504
+ background-color: var(--color-grey-225-10-75);
505
+ }
506
+
507
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
508
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
509
+ opacity: 1;
510
+ }
511
+
512
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
513
+ outline: none;
514
+ }
515
+
516
+ .fjs-container .fjs-taglist .fjs-taglist-input {
517
+ border: none;
518
+ background-color: transparent;
519
+ min-width: 100px;
520
+ height: 22px;
521
+ flex-grow: 1;
522
+ }
523
+
524
+ .fjs-container .fjs-dropdownlist {
525
+ z-index: 1;
526
+ position: absolute;
527
+ user-select: none;
528
+ overflow-y: auto;
529
+ width: 100%;
530
+ border-radius: 3px;
531
+ margin-top: 3px;
532
+ box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
533
+ background-color: var(--color-white);
534
+ }
535
+
536
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
537
+ padding: 6px 8px;
538
+ border-bottom: 1px solid var(--color-grey-225-10-90);
539
+ color: var(--color-grey-225-10-35);
540
+ }
541
+
542
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
543
+ border-bottom: none;
544
+ }
545
+
546
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
547
+ background-color: var(--color-grey-225-10-90);
548
+ color: var(--color-black);
549
+ }
550
+
551
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
552
+ padding: 6px 8px;
553
+ color: var(--color-text-lightest);
554
+ }
555
+
556
+ .fjs-container .fjs-image-container {
557
+ width: fit-content;
558
+ height: fit-content;
559
+ }
560
+
561
+ .fjs-container .fjs-image {
562
+ object-fit: contain;
563
+ }
564
+
565
+ .fjs-container .fjs-image-placeholder {
566
+ height: 64px;
567
+ margin: 4px 0;
568
+ }
569
+
570
+ /**
571
+ * Flatpickr style adjustments
572
+ */
573
+
574
+ .fjs-container .flatpickr-day.today {
575
+ border-color: transparent;
576
+ background-color: transparent;
577
+ font-weight: bold;
578
+ }
579
+
580
+ .fjs-container .flatpickr-day.today:hover,
581
+ .fjs-container .flatpickr-day.today:focus {
582
+ border-color: var(--color-borders);
583
+ background-color: var(--color-datepicker-focused-day);
584
+ color: var(--color-text-inverted);
585
+ }
586
+
587
+ .fjs-container .flatpickr-day.selected {
588
+ border-color: var(--color-accent);
589
+ background-color: inherit;
590
+ color: inherit;
591
+ font-weight: normal;
592
+ }
593
+
594
+ .fjs-container .flatpickr-day.selected.today {
595
+ font-weight: bold;
596
+ }
597
+
598
+ .fjs-container .flatpickr-day.selected:hover,
599
+ .fjs-container .flatpickr-day.selected:focus {
600
+ background-color: var(--color-accent);
601
+ font-weight: bold;
602
+ color: var(--color-text-inverted);
603
+ border-color: var(--color-accent);
604
+ }
605
+
606
+ .fjs-container .flatpickr-days, .flatpickr-weekdays {
607
+ padding: 10px;
608
+ width: 100%;
609
+ }
610
+
611
+ .fjs-container .flatpickr-calendar.hasTime.noCalendar {
612
+ width: auto;
613
+ max-width: 250px;
614
+ }
615
+
616
+ .fjs-container .flatpickr-calendar {
617
+ width: 326px;
618
+ }