@bpmn-io/form-js-viewer 1.8.3 → 1.8.5

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 (23) hide show
  1. package/README.md +177 -189
  2. package/dist/assets/form-js-base.css +47 -39
  3. package/dist/assets/form-js.css +11 -26
  4. package/dist/index.cjs +450 -292
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.es.js +447 -293
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/types/Form.d.ts +9 -13
  9. package/dist/types/core/FormFieldInstanceRegistry.d.ts +15 -0
  10. package/dist/types/core/Validator.d.ts +16 -1
  11. package/dist/types/core/index.d.ts +2 -0
  12. package/dist/types/features/expressionField/ExpressionLoopPreventer.d.ts +18 -0
  13. package/dist/types/features/expressionField/index.d.ts +6 -0
  14. package/dist/types/features/expressionLanguage/FeelersTemplating.d.ts +4 -4
  15. package/dist/types/features/index.d.ts +2 -0
  16. package/dist/types/features/viewerCommands/ViewerCommands.d.ts +6 -0
  17. package/dist/types/features/viewerCommands/cmd/UpdateFieldInstanceValidationHandler.d.ts +10 -0
  18. package/dist/types/features/viewerCommands/cmd/UpdateFieldValidationHandler.d.ts +3 -0
  19. package/dist/types/types.d.ts +34 -36
  20. package/dist/types/util/expressions.d.ts +17 -0
  21. package/dist/types/util/index.d.ts +1 -0
  22. package/dist/types/util/simple.d.ts +1 -7
  23. package/package.json +2 -2
package/README.md CHANGED
@@ -1,189 +1,177 @@
1
- # @bpmn-io/form-js-viewer
2
-
3
- This library exports a form viewer for viewing and submitting forms. Use [our editor](../form-js-editor) to create and edit forms.
4
-
5
-
6
- ## Installation
7
-
8
- ```
9
- npm install @bpmn-io/form-js-viewer
10
- ```
11
-
12
-
13
- ## Usage
14
-
15
- ```javascript
16
- import { Form } from '@bpmn-io/form-js-viewer';
17
-
18
- const schema = {
19
- components: [
20
- {
21
- key: 'creditor',
22
- label: 'Creditor',
23
- type: 'textfield',
24
- validate: {
25
- required: true
26
- }
27
- }
28
- ]
29
- };
30
-
31
- const data = {
32
- creditor: 'John Doe Company'
33
- };
34
-
35
- const form = new Form({
36
- container: document.querySelector('#form')
37
- });
38
-
39
- await form.importSchema(schema, data);
40
-
41
- // add event listeners
42
- form.on('submit', event => {
43
- console.log('Form <submit>', event);
44
- });
45
-
46
- // provide a priority to event listeners
47
- form.on('changed', 500, event => {
48
- console.log('Form <changed>', event);
49
- });
50
- ```
51
-
52
- Check out [a full example](https://github.com/bpmn-io/form-js-examples).
53
-
54
-
55
- ## Styling
56
-
57
- For proper styling include the `form-js.css` stylesheet and font used:
58
-
59
- ```html
60
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
61
-
62
- <link href="https://unpkg.com/@bpmn-io/form-js/dist/assets/form-js.css" rel="stylesheet">
63
- ```
64
-
65
-
66
- ## API
67
-
68
- ### `Form`
69
-
70
- Create a new form with options `{ container?: HTMLElement }`.
71
-
72
- ```javascript
73
- import { Form } from '@bpmn-io/form-js-viewer';
74
-
75
- const form = new Form({
76
- container: document.querySelector('#form')
77
- });
78
- ```
79
-
80
-
81
- ### `Form#importSchema(schema: Schema, data?: Data) => Promise<Result, Error>`
82
-
83
- Display a form represented via a form schema and the optional data.
84
-
85
- ```javascript
86
- try {
87
- await form.importSchema(schema);
88
- } catch (err) {
89
- console.log('importing form failed', err);
90
- }
91
- ```
92
-
93
-
94
- ### `Form#submit() => { data: Data, errors: Errors }`
95
-
96
- Submit a form programatically.
97
-
98
- ```javascript
99
- const {
100
- data,
101
- errors
102
- } = form.submit();
103
-
104
- if (Object.keys(errors).length) {
105
- console.error('Form submitted with errors', errors);
106
- }
107
- ```
108
-
109
-
110
- ### `Form#validate() => Errors`
111
-
112
- Validate a form programatically.
113
-
114
- ```javascript
115
- const errors = form.validate();
116
-
117
- if (Object.keys(errors).length) {
118
- console.error('Form has errors', errors);
119
- }
120
- ```
121
-
122
-
123
- ### `Form#reset() => void`
124
-
125
- Reset a form programatically.
126
-
127
-
128
- ### `Form#setProperty(key, value) => void`
129
-
130
- Set a form property such as `readOnly`.
131
-
132
-
133
- ### `Form#attachTo(parentNode: HTMLElement) => void`
134
-
135
-
136
- Attach the form to a parent node.
137
-
138
-
139
- ### `Form#detach() => void`
140
-
141
-
142
- Detach the form from its parent node.
143
-
144
-
145
- ### `Form#on(event, fn) => void`
146
-
147
- Subscribe to an [event](#events).
148
-
149
-
150
- ### `Form#destroy() => void`
151
-
152
- Remove form from the document.
153
-
154
-
155
- ## Events
156
-
157
- ### `changed :: { data, errors }`
158
- Fired off every time there is a form state change.
159
-
160
- ### `submit :: { data, errors }`
161
- Fired off on form submission.
162
-
163
- ### `import.done :: { error, warnings }`
164
- Fired whenever a schema has finished importing, whether it succeeds or fails.
165
-
166
- ### Layouting events
167
- - `form.layoutCleared`
168
- - `form.layoutCalculated :: { rows }`
169
-
170
- ### Lifecycle Events
171
- - `detach`
172
- - `attach`
173
- - `form.init`
174
- - `form.clear`
175
- - `form.destroy`
176
- - `diagram.clear`
177
- - `diagram.destroy`
178
-
179
- ### Formfield events
180
- - `formField.add :: { formField }`
181
- - `formField.remove :: { formField }`
182
- - `formField.focus :: { formField }`
183
- - `formField.blur :: { formField }`
184
- - `formField.search :: { formField, value }`
185
-
186
-
187
- ## License
188
-
189
- Use under the terms of the [bpmn.io license](http://bpmn.io/license).
1
+ # @bpmn-io/form-js-viewer
2
+
3
+ This library exports a form viewer for viewing and submitting forms. Use [our editor](../form-js-editor) to create and edit forms.
4
+
5
+ ## Installation
6
+
7
+ ```
8
+ npm install @bpmn-io/form-js-viewer
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```javascript
14
+ import { Form } from '@bpmn-io/form-js-viewer';
15
+
16
+ const schema = {
17
+ components: [
18
+ {
19
+ key: 'creditor',
20
+ label: 'Creditor',
21
+ type: 'textfield',
22
+ validate: {
23
+ required: true,
24
+ },
25
+ },
26
+ ],
27
+ };
28
+
29
+ const data = {
30
+ creditor: 'John Doe Company',
31
+ };
32
+
33
+ const form = new Form({
34
+ container: document.querySelector('#form'),
35
+ });
36
+
37
+ await form.importSchema(schema, data);
38
+
39
+ // add event listeners
40
+ form.on('submit', (event) => {
41
+ console.log('Form <submit>', event);
42
+ });
43
+
44
+ // provide a priority to event listeners
45
+ form.on('changed', 500, (event) => {
46
+ console.log('Form <changed>', event);
47
+ });
48
+ ```
49
+
50
+ Check out [a full example](https://github.com/bpmn-io/form-js-examples).
51
+
52
+ ## Styling
53
+
54
+ For proper styling include the `form-js.css` stylesheet and font used:
55
+
56
+ ```html
57
+ <link
58
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap"
59
+ rel="stylesheet" />
60
+
61
+ <link href="https://unpkg.com/@bpmn-io/form-js/dist/assets/form-js.css" rel="stylesheet" />
62
+ ```
63
+
64
+ ## API
65
+
66
+ ### `Form`
67
+
68
+ Create a new form with options `{ container?: HTMLElement }`.
69
+
70
+ ```javascript
71
+ import { Form } from '@bpmn-io/form-js-viewer';
72
+
73
+ const form = new Form({
74
+ container: document.querySelector('#form'),
75
+ });
76
+ ```
77
+
78
+ ### `Form#importSchema(schema: Schema, data?: Data) => Promise<Result, Error>`
79
+
80
+ Display a form represented via a form schema and the optional data.
81
+
82
+ ```javascript
83
+ try {
84
+ await form.importSchema(schema);
85
+ } catch (err) {
86
+ console.log('importing form failed', err);
87
+ }
88
+ ```
89
+
90
+ ### `Form#submit() => { data: Data, errors: Errors }`
91
+
92
+ Submit a form programatically.
93
+
94
+ ```javascript
95
+ const { data, errors } = form.submit();
96
+
97
+ if (Object.keys(errors).length) {
98
+ console.error('Form submitted with errors', errors);
99
+ }
100
+ ```
101
+
102
+ ### `Form#validate() => Errors`
103
+
104
+ Validate a form programatically.
105
+
106
+ ```javascript
107
+ const errors = form.validate();
108
+
109
+ if (Object.keys(errors).length) {
110
+ console.error('Form has errors', errors);
111
+ }
112
+ ```
113
+
114
+ ### `Form#reset() => void`
115
+
116
+ Reset a form programatically.
117
+
118
+ ### `Form#setProperty(key, value) => void`
119
+
120
+ Set a form property such as `readOnly`.
121
+
122
+ ### `Form#attachTo(parentNode: HTMLElement) => void`
123
+
124
+ Attach the form to a parent node.
125
+
126
+ ### `Form#detach() => void`
127
+
128
+ Detach the form from its parent node.
129
+
130
+ ### `Form#on(event, fn) => void`
131
+
132
+ Subscribe to an [event](#events).
133
+
134
+ ### `Form#destroy() => void`
135
+
136
+ Remove form from the document.
137
+
138
+ ## Events
139
+
140
+ ### `changed :: { data, errors }`
141
+
142
+ Fired off every time there is a form state change.
143
+
144
+ ### `submit :: { data, errors }`
145
+
146
+ Fired off on form submission.
147
+
148
+ ### `import.done :: { error, warnings }`
149
+
150
+ Fired whenever a schema has finished importing, whether it succeeds or fails.
151
+
152
+ ### Layouting events
153
+
154
+ - `form.layoutCleared`
155
+ - `form.layoutCalculated :: { rows }`
156
+
157
+ ### Lifecycle Events
158
+
159
+ - `detach`
160
+ - `attach`
161
+ - `form.init`
162
+ - `form.clear`
163
+ - `form.destroy`
164
+ - `diagram.clear`
165
+ - `diagram.destroy`
166
+
167
+ ### Formfield events
168
+
169
+ - `formField.add :: { formField }`
170
+ - `formField.remove :: { formField }`
171
+ - `formField.focus :: { formField }`
172
+ - `formField.blur :: { formField }`
173
+ - `formField.search :: { formField, value }`
174
+
175
+ ## License
176
+
177
+ Use under the terms of the [bpmn.io license](http://bpmn.io/license).
package/dist/assets/form-js-base.css CHANGED
@@ -40,21 +40,14 @@
40
40
  * 2 - use layer one
41
41
  * 3 - use fallback
42
42
  */
43
- --color-background: var(
44
- --cds-field,
45
- var(--cds-field-01, var(--color-white))
46
- );
43
+ --color-background: var(--cds-field, var(--cds-field-01, var(--color-white)));
47
44
  --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
48
45
  --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
49
- --color-background-adornment: var(
50
- --cds-field,
51
- var(--cds-field-01, var(--color-grey-225-10-95))
52
- );
46
+ --color-background-adornment: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-95)));
53
47
  --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
54
48
  --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
55
49
  --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
56
- --color-layer: var(--cds-layer,
57
- var(--cds-layer-01, var(--color-white)));
50
+ --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
58
51
  --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
59
52
 
60
53
  --color-icon-base: var(--cds-icon-primary, var(--color-black));
@@ -66,27 +59,18 @@
66
59
  --color-text-inverted: var(--cds-text-inverse, var(--color-text));
67
60
  --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
68
61
 
69
- --color-borders: var(
70
- --cds-border-strong,
71
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
72
- );
62
+ --color-borders: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
73
63
  --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
74
64
  --color-borders-table: var(--color-borders-group);
75
65
  --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
76
- --color-borders-adornment: var(
77
- --cds-border-subtle,
78
- var(--cds-border-subtle-01, var(--color-grey-225-10-85))
79
- );
66
+ --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
80
67
  --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
81
68
  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
82
69
 
83
70
  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
84
71
  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
85
72
  --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
86
- --color-accent-readonly: var(
87
- --cds-border-strong,
88
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
89
- );
73
+ --color-accent-readonly: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
90
74
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
91
75
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
92
76
 
@@ -101,9 +85,9 @@
101
85
  --line-height-input: 18px;
102
86
  --line-height-label: 16px;
103
87
 
104
- --letter-spacing-base: .16px;
105
- --letter-spacing-input: .16px;
106
- --letter-spacing-label: .32px;
88
+ --letter-spacing-base: 0.16px;
89
+ --letter-spacing-input: 0.16px;
90
+ --letter-spacing-label: 0.32px;
107
91
 
108
92
  --form-field-height: 36px;
109
93
 
@@ -330,21 +314,45 @@
330
314
  padding: 4px 16px;
331
315
  }
332
316
 
333
- .fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
334
- .fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
317
+ .fjs-container
318
+ .fjs-form-field-grouplike
319
+ .fjs-form-field-grouplike
320
+ .fjs-layout-column:first-child
321
+ > .fjs-element
322
+ > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
323
+ .fjs-container
324
+ .fjs-layout-column:first-child
325
+ > .fjs-element
326
+ > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
335
327
  margin-left: -6px;
336
328
  }
337
329
 
338
- .fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
339
- .fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
330
+ .fjs-container
331
+ .fjs-form-field-grouplike
332
+ .fjs-form-field-grouplike
333
+ .fjs-layout-column:last-child
334
+ > .fjs-element
335
+ > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
336
+ .fjs-container
337
+ .fjs-layout-column:last-child
338
+ > .fjs-element
339
+ > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
340
340
  margin-right: -6px;
341
341
  }
342
342
 
343
- .fjs-container .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
343
+ .fjs-container
344
+ .fjs-form-field-grouplike
345
+ .fjs-layout-column:first-child
346
+ > .fjs-element
347
+ > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
344
348
  margin-left: 11px;
345
349
  }
346
350
 
347
- .fjs-container .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
351
+ .fjs-container
352
+ .fjs-form-field-grouplike
353
+ .fjs-layout-column:last-child
354
+ > .fjs-element
355
+ > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
348
356
  margin-right: 11px;
349
357
  }
350
358
 
@@ -501,7 +509,6 @@
501
509
  border-radius: 3px;
502
510
  }
503
511
 
504
-
505
512
  .fjs-container .fjs-input-group .fjs-input[type='text'],
506
513
  .fjs-container .fjs-input-group .fjs-input[type='email'],
507
514
  .fjs-container .fjs-input-group .fjs-input[type='tel'],
@@ -525,7 +532,7 @@
525
532
 
526
533
  .fjs-container .fjs-input-group .fjs-select-display {
527
534
  line-height: var(--line-height-base);
528
- user-select: none;
535
+ user-select: none;
529
536
  padding: 8px;
530
537
  flex: 1;
531
538
  }
@@ -751,7 +758,7 @@
751
758
  }
752
759
 
753
760
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
754
- border-color: var(--color-red-360-100-92);
761
+ border-color: var(--color-red-360-100-92);
755
762
  }
756
763
 
757
764
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
@@ -812,13 +819,13 @@
812
819
  .fjs-container .fjs-form-field-text table,
813
820
  .fjs-container .fjs-form-field-text th,
814
821
  .fjs-container .fjs-form-field-text td {
815
- border: 1px solid var(--color-borders-table);
822
+ border: 1px solid var(--color-borders-table);
816
823
  padding: 8px;
817
824
  }
818
825
 
819
826
  .fjs-container .fjs-form-field-html th,
820
827
  .fjs-container .fjs-form-field-text th {
821
- font-weight: bold;
828
+ font-weight: bold;
822
829
  }
823
830
 
824
831
  .fjs-container .fjs-form-field-html td,
@@ -887,7 +894,7 @@
887
894
  }
888
895
 
889
896
  .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
890
- .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
897
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
891
898
  background-color: var(--color-background-inverted);
892
899
  }
893
900
 
@@ -1234,12 +1241,13 @@
1234
1241
  .fjs-container .flatpickr-day.selected:hover,
1235
1242
  .fjs-container .flatpickr-day.selected:focus {
1236
1243
  background-color: var(--color-accent);
1237
- font-weight: bold;
1244
+ font-weight: bold;
1238
1245
  color: var(--color-text-inverted);
1239
1246
  border-color: var(--color-accent);
1240
1247
  }
1241
1248
 
1242
- .fjs-container .flatpickr-days, .flatpickr-weekdays {
1249
+ .fjs-container .flatpickr-days,
1250
+ .flatpickr-weekdays {
1243
1251
  padding: 10px;
1244
1252
  width: 100%;
1245
1253
  }
package/dist/assets/form-js.css CHANGED
@@ -35,21 +35,14 @@
35
35
  * 2 - use layer one
36
36
  * 3 - use fallback
37
37
  */
38
- --color-background: var(
39
- --cds-field,
40
- var(--cds-field-01, var(--color-white))
41
- );
38
+ --color-background: var(--cds-field, var(--cds-field-01, var(--color-white)));
42
39
  --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
43
40
  --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
44
- --color-background-adornment: var(
45
- --cds-field,
46
- var(--cds-field-01, var(--color-grey-225-10-95))
47
- );
41
+ --color-background-adornment: var(--cds-field, var(--cds-field-01, var(--color-grey-225-10-95)));
48
42
  --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
49
43
  --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
50
44
  --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
51
- --color-layer: var(--cds-layer,
52
- var(--cds-layer-01, var(--color-white)));
45
+ --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
53
46
  --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
54
47
  --color-icon-base: var(--cds-icon-primary, var(--color-black));
55
48
  --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
@@ -59,26 +52,17 @@
59
52
  --color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
60
53
  --color-text-inverted: var(--cds-text-inverse, var(--color-text));
61
54
  --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
62
- --color-borders: var(
63
- --cds-border-strong,
64
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
65
- );
55
+ --color-borders: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
66
56
  --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
67
57
  --color-borders-table: var(--color-borders-group);
68
58
  --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
69
- --color-borders-adornment: var(
70
- --cds-border-subtle,
71
- var(--cds-border-subtle-01, var(--color-grey-225-10-85))
72
- );
59
+ --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
73
60
  --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
74
61
  --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
75
62
  --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
76
63
  --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
77
64
  --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
78
- --color-accent-readonly: var(
79
- --cds-border-strong,
80
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
81
- );
65
+ --color-accent-readonly: var(--cds-border-strong, var(--cds-border-strong-01, var(--color-grey-225-10-55)));
82
66
  --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
83
67
  --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
84
68
  --font-family: "IBM Plex Sans", sans-serif;
@@ -89,9 +73,9 @@
89
73
  --line-height-base: 20px;
90
74
  --line-height-input: 18px;
91
75
  --line-height-label: 16px;
92
- --letter-spacing-base: .16px;
93
- --letter-spacing-input: .16px;
94
- --letter-spacing-label: .32px;
76
+ --letter-spacing-base: 0.16px;
77
+ --letter-spacing-input: 0.16px;
78
+ --letter-spacing-label: 0.32px;
95
79
  --form-field-height: 36px;
96
80
  --border-definition: 1px solid var(--color-borders);
97
81
  --border-definition-adornment: 1px solid var(--color-borders-adornment);
@@ -1221,7 +1205,8 @@
1221
1205
  border-color: var(--color-accent);
1222
1206
  }
1223
1207
 
1224
- .fjs-container .flatpickr-days, .flatpickr-weekdays {
1208
+ .fjs-container .flatpickr-days,
1209
+ .flatpickr-weekdays {
1225
1210
  padding: 10px;
1226
1211
  width: 100%;
1227
1212
  }