@bpmn-io/form-js-viewer 1.8.3 → 1.8.4
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.
- package/README.md +177 -189
- package/dist/assets/form-js-base.css +47 -39
- package/dist/assets/form-js.css +11 -26
- package/dist/index.cjs +222 -172
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +221 -173
- package/dist/index.es.js.map +1 -1
- package/dist/types/Form.d.ts +8 -11
- package/dist/types/core/FormFieldInstanceRegistry.d.ts +15 -0
- package/dist/types/core/index.d.ts +2 -0
- package/dist/types/features/expressionField/ExpressionLoopPreventer.d.ts +18 -0
- package/dist/types/features/expressionField/index.d.ts +6 -0
- package/dist/types/features/expressionLanguage/FeelersTemplating.d.ts +4 -4
- package/dist/types/features/index.d.ts +2 -0
- package/dist/types/types.d.ts +34 -36
- 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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
###
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
- `
|
|
172
|
-
- `
|
|
173
|
-
- `
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
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).
|
|
@@ -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
|
|
334
|
-
.fjs-
|
|
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
|
|
339
|
-
.fjs-
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
1208
|
+
.fjs-container .flatpickr-days,
|
|
1209
|
+
.flatpickr-weekdays {
|
|
1225
1210
|
padding: 10px;
|
|
1226
1211
|
width: 100%;
|
|
1227
1212
|
}
|