@bpmn-io/form-js-viewer 0.10.0 → 0.10.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 (67) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +165 -165
  3. package/dist/assets/form-js.css +611 -620
  4. package/dist/index.cjs +140 -138
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +140 -138
  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,620 +1,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
- }
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-input-group.disabled {
237
- background-color: var(--color-background-disabled);
238
- }
239
-
240
- .fjs-container .fjs-input-group.disabled,
241
- .fjs-container .fjs-input-group.disabled .fjs-input,
242
- .fjs-container .fjs-input-group.disabled .fjs-input-adornment {
243
- border-color: var(--color-borders-disabled);
244
- }
245
-
246
- .fjs-container .fjs-taglist .fjs-taglist-input,
247
- .fjs-container .fjs-input-group .fjs-input {
248
- border: none;
249
- border-radius: 0;
250
- margin: 0;
251
- outline: 0;
252
- width: auto;
253
- flex-grow: 1;
254
- }
255
-
256
- .fjs-container .fjs-input-group .fjs-input-adornment {
257
- border-width: 0;
258
- }
259
-
260
- .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
261
- border-left-width: 1px;
262
- }
263
-
264
- .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
265
- border-right-width: 1px;
266
- }
267
-
268
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
269
- border-radius: 0 3px 3px 0;
270
- }
271
-
272
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
273
- border-radius: 3px 0 0 3px;
274
- }
275
-
276
- .fjs-container .fjs-input-group .fjs-input,
277
- .fjs-container .fjs-input-group.disabled .fjs-input {
278
- border-radius: 3px;
279
- }
280
-
281
- .fjs-container .fjs-vertical-group {
282
- display: flex;
283
- width: 100%;
284
- }
285
-
286
- .fjs-container .flatpickr-wrapper {
287
- width: 100%;
288
- }
289
-
290
- .fjs-container .fjs-textarea {
291
- resize: none;
292
- overflow: hidden;
293
- height: 75px;
294
- font-size: 14px;
295
- }
296
-
297
- .fjs-container .fjs-number-arrow-container {
298
- display: flex;
299
- flex-direction: column;
300
- border-radius: 0 2px 2px 0;
301
- width: 23px;
302
- overflow: clip;
303
- border-left: var(--border-definition-adornment);
304
- }
305
-
306
- .fjs-container .fjs-number-arrow-separator {
307
- height: 1px;
308
- background-color: var(--color-borders-adornment);
309
- }
310
-
311
- .fjs-container .fjs-number-arrow-container button {
312
- border: none;
313
- flex: 1;
314
- color: var(--color-text-light);
315
- background-color: var(--color-grey-225-10-95);
316
- font-weight: bold;
317
- font-size: 10px;
318
- }
319
-
320
- .fjs-container .fjs-number-arrow-container button:hover {
321
- background-color: var(--color-grey-225-10-93);
322
- color: var(--color-text);
323
- }
324
-
325
- .fjs-container .fjs-number-arrow-container.disabled button {
326
- background-color: var(--color-grey-225-10-95);
327
- }
328
-
329
- .fjs-container .fjs-radio {
330
- display: flex;
331
- flex-direction: column;
332
- }
333
-
334
- .fjs-container .fjs-input[type='checkbox'],
335
- .fjs-container .fjs-input[type='radio'] {
336
- margin: 6px 10px 6px 4px;
337
- }
338
-
339
- .fjs-container .fjs-button[type='submit'] {
340
- color: var(--color-text-inverted);
341
- background-color: var(--color-accent);
342
- border-color: var(--color-accent);
343
- }
344
-
345
- .fjs-container .fjs-button[type='reset'] {
346
- color: var(--color-text);
347
- background-color: transparent;
348
- border-color: var(--color-borders);
349
- }
350
-
351
- .fjs-container .fjs-button[type='submit'],
352
- .fjs-container .fjs-button[type='reset'] {
353
- min-width: 100px;
354
- width: auto;
355
- }
356
-
357
- .fjs-container .fjs-button[type='submit'] {
358
- font-weight: 600;
359
- }
360
-
361
- .fjs-container .fjs-taglist:focus-within,
362
- .fjs-container .fjs-input-group:focus-within,
363
- .fjs-container .fjs-input[type='text']:focus,
364
- .fjs-container .fjs-input[type='email']:focus,
365
- .fjs-container .fjs-input[type='tel']:focus,
366
- .fjs-container .fjs-input[type='number']:focus,
367
- .fjs-container .fjs-button[type='submit']:focus,
368
- .fjs-container .fjs-button[type='reset']:focus,
369
- .fjs-container .fjs-textarea:focus,
370
- .fjs-container .fjs-select:focus {
371
- outline: var(--outline-definition);
372
- }
373
-
374
- .fjs-container .fjs-input-group .fjs-input,
375
- .fjs-container .fjs-input-group .fjs-input:focus {
376
- outline: none;
377
- }
378
-
379
- .fjs-container .fjs-input-group .fjs-input,
380
- .fjs-container .fjs-input-group .fjs-input:focus {
381
- outline: none;
382
- }
383
-
384
- .fjs-container .fjs-button[type='submit']:focus {
385
- border-color: var(--color-accent);
386
- }
387
-
388
- .fjs-container .fjs-input:disabled,
389
- .fjs-container .fjs-textarea:disabled,
390
- .fjs-container .fjs-select:disabled,
391
- .fjs-container .fjs-taglist.disabled {
392
- background-color: var(--color-background-disabled);
393
- border-color: var(--color-borders-disabled);
394
- }
395
-
396
- .fjs-container .fjs-button[type='submit']:disabled,
397
- .fjs-container .fjs-button[type='reset']:disabled {
398
- color: var(--text-light);
399
- background-color: var(--color-background-disabled);
400
- border-color: var(--color-borders-disabled);
401
- }
402
-
403
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
404
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
405
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
406
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
407
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
408
- border-color: var(--color-warning);
409
- outline-color: var(--color-warning);
410
- }
411
-
412
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
413
- border-color: var(--color-red-360-100-92);
414
- }
415
-
416
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
417
- background-color: var(--color-red-360-100-92);
418
- }
419
-
420
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
421
- background-color: var(--color-red-360-100-97);
422
- }
423
-
424
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
425
- background-color: var(--color-red-360-100-95);
426
- }
427
-
428
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
429
- border-color: var(--color-red-360-100-92);
430
- background: var(--color-red-360-100-97);
431
- }
432
-
433
- .fjs-container .fjs-form-field-error {
434
- color: var(--color-warning);
435
- }
436
-
437
- .fjs-container .fjs-form-field-error > ul {
438
- list-style-type: none;
439
- margin: 0;
440
- padding: 0;
441
- }
442
-
443
- .fjs-container .fjs-form-field-error > ul > li {
444
- list-style-type: none;
445
- }
446
-
447
- .fjs-container .fjs-form-field-text a {
448
- color: var(--color-accent);
449
- }
450
-
451
- .fjs-container .fjs-taglist-anchor,
452
- .fjs-container .fjs-timepicker-anchor {
453
- position: relative;
454
- }
455
-
456
- .fjs-container .fjs-taglist {
457
- display: flex;
458
- flex-wrap: wrap;
459
- gap: 5px;
460
- border: var(--color-borders) solid 1px;
461
- border-radius: 3px;
462
- padding: 5px;
463
- background-color: var(--color-background);
464
- }
465
-
466
- .fjs-container .fjs-taglist.disabled {
467
- border: var(--color-borders-disabled) solid 1px;
468
- background-color: var(--color-background-disabled);
469
- }
470
-
471
- .fjs-container .fjs-taglist .fjs-taglist-tag {
472
- display: flex;
473
- overflow: hidden;
474
- user-select: none;
475
- border-radius: 2px;
476
- background-color: var(--color-grey-225-10-90);
477
- }
478
-
479
- .fjs-container .fjs-taglist .fjs-taglist-tags {
480
- display: flex;
481
- flex-wrap: wrap;
482
- gap: 5px;
483
- }
484
-
485
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
486
- padding: 2px 6px 2px 8px;
487
- }
488
-
489
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
490
- overflow: clip;
491
- width: 22px;
492
- height: 22px;
493
- text-align: center;
494
- line-height: 28px;
495
- background-color: var(--color-grey-225-10-80);
496
- border: none;
497
- padding: 1px 0;
498
- color: var(--color-black);
499
- }
500
-
501
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove svg {
502
- opacity: 0.6;
503
- }
504
-
505
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
506
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
507
- background-color: var(--color-grey-225-10-75);
508
- }
509
-
510
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
511
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
512
- opacity: 1;
513
- }
514
-
515
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
516
- outline: none;
517
- }
518
-
519
- .fjs-container .fjs-taglist .fjs-taglist-input {
520
- border: none;
521
- background-color: transparent;
522
- min-width: 100px;
523
- height: 22px;
524
- flex-grow: 1;
525
- }
526
-
527
- .fjs-container .fjs-dropdownlist {
528
- z-index: 1;
529
- position: absolute;
530
- user-select: none;
531
- overflow-y: auto;
532
- width: 100%;
533
- border-radius: 3px;
534
- margin-top: 3px;
535
- box-shadow: 0px 0px 5px var(--color-grey-225-10-85);
536
- background-color: var(--color-white);
537
- }
538
-
539
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
540
- padding: 6px 8px;
541
- border-bottom: 1px solid var(--color-grey-225-10-90);
542
- color: var(--color-grey-225-10-35);
543
- }
544
-
545
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
546
- border-bottom: none;
547
- }
548
-
549
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
550
- background-color: var(--color-grey-225-10-90);
551
- color: var(--color-black);
552
- }
553
-
554
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
555
- padding: 6px 8px;
556
- color: var(--color-text-lightest);
557
- }
558
-
559
- .fjs-container .fjs-image-container {
560
- width: fit-content;
561
- height: fit-content;
562
- }
563
-
564
- .fjs-container .fjs-image {
565
- object-fit: contain;
566
- }
567
-
568
- .fjs-container .fjs-image-placeholder {
569
- height: 64px;
570
- margin: 2px 0;
571
- }
572
-
573
- /**
574
- * Flatpickr style adjustments
575
- */
576
-
577
- .flatpickr-day.today {
578
- border-color: transparent !important;
579
- background-color: transparent !important;
580
- font-weight: bold !important;
581
- }
582
-
583
- .flatpickr-day.today:hover,
584
- .flatpickr-day.today:focus {
585
- border-color: var(--color-borders) !important;
586
- background-color: var(--color-datepicker-focused-day) !important;
587
- color: var(--color-text-inverted) !important;
588
- }
589
-
590
- .flatpickr-day.selected {
591
- border-color: var(--color-accent) !important;
592
- background-color: inherit !important;
593
- color: inherit !important;
594
- font-weight: normal !important;
595
- }
596
-
597
- .flatpickr-day.selected.today {
598
- font-weight: bold !important;
599
- }
600
-
601
- .flatpickr-day.selected:hover,
602
- .flatpickr-day.selected:focus {
603
- background-color: var(--color-accent) !important;
604
- font-weight: bold !important;
605
- color: var(--color-text-inverted) !important;
606
- }
607
-
608
- .flatpickr-days, .flatpickr-weekdays {
609
- padding: 10px !important;
610
- width: 100% !important;
611
- }
612
-
613
- .fjs-container .flatpickr-calendar.hasTime.noCalendar {
614
- width: auto !important;
615
- max-width: 250px !important;
616
- }
617
-
618
- .flatpickr-calendar {
619
- width: 326px !important;
620
- }
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
+ }