@warp-ds/elements 2.9.0-next.1 → 2.9.0-next.3
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/dist/custom-elements.json +17 -10
- package/dist/docs/affix/affix.md +56 -0
- package/dist/docs/affix/api.md +48 -0
- package/dist/docs/alert/accessibility.md +30 -0
- package/dist/docs/alert/alert.md +208 -0
- package/dist/docs/alert/api.md +39 -0
- package/dist/docs/alert/examples.md +84 -0
- package/dist/docs/alert/usage.md +42 -0
- package/dist/docs/attention/api.md +132 -0
- package/dist/docs/attention/attention.md +138 -0
- package/dist/docs/badge/api.md +28 -0
- package/dist/docs/badge/badge.md +36 -0
- package/dist/docs/box/api.md +52 -0
- package/dist/docs/box/box.md +60 -0
- package/dist/docs/breadcrumbs/api.md +20 -0
- package/dist/docs/breadcrumbs/breadcrumbs.md +28 -0
- package/dist/docs/button/api.md +155 -0
- package/dist/docs/button/button.md +163 -0
- package/dist/docs/card/api.md +44 -0
- package/dist/docs/card/card.md +52 -0
- package/dist/docs/combobox/api.md +132 -0
- package/dist/docs/combobox/combobox.md +140 -0
- package/dist/docs/datepicker/api.md +192 -0
- package/dist/docs/datepicker/datepicker.md +202 -0
- package/dist/docs/expandable/api.md +100 -0
- package/dist/docs/expandable/expandable.md +108 -0
- package/dist/docs/link/api.md +87 -0
- package/dist/docs/link/link.md +95 -0
- package/dist/docs/page-indicator/api.md +28 -0
- package/dist/docs/page-indicator/page-indicator.md +35 -0
- package/dist/docs/pagination/api.md +44 -0
- package/dist/docs/pagination/pagination.md +52 -0
- package/dist/docs/pill/api.md +76 -0
- package/dist/docs/pill/pill.md +84 -0
- package/dist/docs/select/api.md +116 -0
- package/dist/docs/select/select.md +124 -0
- package/dist/docs/slider/api.md +214 -0
- package/dist/docs/slider/slider.md +222 -0
- package/dist/docs/slider-thumb/api.md +116 -0
- package/dist/docs/slider-thumb/slider-thumb.md +124 -0
- package/dist/docs/step/api.md +28 -0
- package/dist/docs/step/step.md +34 -0
- package/dist/docs/step-indicator/api.md +28 -0
- package/dist/docs/step-indicator/step-indicator.md +36 -0
- package/dist/docs/switch/api.md +52 -0
- package/dist/docs/switch/switch.md +58 -0
- package/dist/docs/tab/api.md +76 -0
- package/dist/docs/tab/tab.md +84 -0
- package/dist/docs/tab-panel/api.md +21 -0
- package/dist/docs/tab-panel/tab-panel.md +30 -0
- package/dist/docs/tabs/api.md +36 -0
- package/dist/docs/tabs/tabs.md +44 -0
- package/dist/docs/textarea/api.md +156 -0
- package/dist/docs/textarea/textarea.md +164 -0
- package/dist/docs/textfield/api.md +194 -0
- package/dist/docs/textfield/textfield.md +202 -0
- package/dist/docs/toast-container/api.md +14 -0
- package/dist/docs/toast-container/toast-container.md +20 -0
- package/dist/index.d.ts +0 -2
- package/dist/packages/affix/affix.js +5 -5
- package/dist/packages/affix/affix.js.map +2 -2
- package/dist/packages/alert/alert.d.ts +15 -0
- package/dist/packages/alert/alert.js +6 -6
- package/dist/packages/alert/alert.js.map +2 -2
- package/dist/packages/alert/alert.test.js +1 -1
- package/dist/packages/attention/attention.d.ts +0 -1
- package/dist/packages/attention/attention.js +21 -21
- package/dist/packages/attention/attention.js.map +4 -4
- package/dist/packages/datepicker/DatePicker.test.js +5 -5
- package/dist/packages/datepicker/datepicker.js +1 -1
- package/dist/packages/datepicker/datepicker.js.map +2 -2
- package/dist/packages/expandable/expandable.js +7 -7
- package/dist/packages/expandable/expandable.js.map +2 -2
- package/dist/packages/icon/icon.js +2 -2
- package/dist/packages/icon/icon.js.map +2 -2
- package/dist/packages/icon/icon.test.js +14 -0
- package/dist/packages/modal-header/modal-header.js +6 -6
- package/dist/packages/modal-header/modal-header.js.map +2 -2
- package/dist/packages/pagination/pagination.js +3 -3
- package/dist/packages/pagination/pagination.js.map +2 -2
- package/dist/packages/pill/pill.js +3 -3
- package/dist/packages/pill/pill.js.map +2 -2
- package/dist/packages/select/select.js +4 -4
- package/dist/packages/select/select.js.map +2 -2
- package/dist/packages/step/step.js +4 -4
- package/dist/packages/step/step.js.map +2 -2
- package/dist/packages/toast/toast.js +4 -4
- package/dist/packages/toast/toast.js.map +2 -2
- package/dist/web-types.json +18 -5
- package/package.json +26 -23
- package/dist/packages/utils/index.d.ts +0 -10
- package/dist/packages/utils/index.js +0 -37
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
# Button (w-button)
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
Buttons are used to perform actions, widh different visuals for different needs.
|
|
6
|
+
|
|
7
|
+
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
|
|
8
|
+
|
|
9
|
+
## API Documentation
|
|
10
|
+
|
|
11
|
+
### Properties
|
|
12
|
+
|
|
13
|
+
| Name | Type | Default | Summary |
|
|
14
|
+
|-|-|-|-|
|
|
15
|
+
| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
|
|
16
|
+
| type | [`ButtonType`](#buttontype) | `-` | - |
|
|
17
|
+
| autofocus | `boolean` | `false` | - |
|
|
18
|
+
| variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
|
|
19
|
+
| quiet | `boolean` | `false` | - |
|
|
20
|
+
| iconOnly | `boolean` | `false` | - |
|
|
21
|
+
| small | `boolean` | `false` | - |
|
|
22
|
+
| loading | `boolean` | `false` | - |
|
|
23
|
+
| href | `string` | `-` | - |
|
|
24
|
+
| target | `string` | `-` | - |
|
|
25
|
+
| disabled | `boolean` | `false` | - |
|
|
26
|
+
| rel | `string` | `-` | - |
|
|
27
|
+
| fullWidth | `boolean` | `false` | - |
|
|
28
|
+
| buttonClass | `string` | `-` | - |
|
|
29
|
+
| name | `string` | `-` | - |
|
|
30
|
+
| value | `string` | `-` | - |
|
|
31
|
+
| ariaValueTextLoading | `unknown` | `-` | - |
|
|
32
|
+
|
|
33
|
+
### Property Details
|
|
34
|
+
|
|
35
|
+
#### shadowRootOptions
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
- Type: `object`
|
|
40
|
+
- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
|
|
41
|
+
|
|
42
|
+
#### type
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
- Type: [`ButtonType`](#buttontype)
|
|
47
|
+
- Default: `-`
|
|
48
|
+
|
|
49
|
+
#### autofocus
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
- Type: `boolean`
|
|
54
|
+
- Default: `false`
|
|
55
|
+
|
|
56
|
+
#### variant
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
- Type: [`ButtonVariant`](#buttonvariant)
|
|
61
|
+
- Default: `-`
|
|
62
|
+
|
|
63
|
+
#### quiet
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
- Type: `boolean`
|
|
68
|
+
- Default: `false`
|
|
69
|
+
|
|
70
|
+
#### iconOnly
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
- Type: `boolean`
|
|
75
|
+
- Default: `false`
|
|
76
|
+
|
|
77
|
+
#### small
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
- Type: `boolean`
|
|
82
|
+
- Default: `false`
|
|
83
|
+
|
|
84
|
+
#### loading
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
- Type: `boolean`
|
|
89
|
+
- Default: `false`
|
|
90
|
+
|
|
91
|
+
#### href
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
- Type: `string`
|
|
96
|
+
- Default: `-`
|
|
97
|
+
|
|
98
|
+
#### target
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
- Type: `string`
|
|
103
|
+
- Default: `-`
|
|
104
|
+
|
|
105
|
+
#### disabled
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
- Type: `boolean`
|
|
110
|
+
- Default: `false`
|
|
111
|
+
|
|
112
|
+
#### rel
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
- Type: `string`
|
|
117
|
+
- Default: `-`
|
|
118
|
+
|
|
119
|
+
#### fullWidth
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
- Type: `boolean`
|
|
124
|
+
- Default: `false`
|
|
125
|
+
|
|
126
|
+
#### buttonClass
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
- Type: `string`
|
|
131
|
+
- Default: `-`
|
|
132
|
+
|
|
133
|
+
#### name
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
- Type: `string`
|
|
138
|
+
- Default: `-`
|
|
139
|
+
|
|
140
|
+
#### value
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
- Type: `string`
|
|
145
|
+
- Default: `-`
|
|
146
|
+
|
|
147
|
+
#### ariaValueTextLoading
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
- Type: `unknown`
|
|
152
|
+
- Default: `-`
|
|
153
|
+
|
|
154
|
+
### Types
|
|
155
|
+
|
|
156
|
+
#### ButtonType
|
|
157
|
+
|
|
158
|
+
`'button' | 'submit' | 'reset'`
|
|
159
|
+
|
|
160
|
+
#### ButtonVariant
|
|
161
|
+
|
|
162
|
+
`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'`
|
|
163
|
+
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
## API Documentation
|
|
2
|
+
|
|
3
|
+
### Properties
|
|
4
|
+
|
|
5
|
+
| Name | Type | Default | Summary |
|
|
6
|
+
|-|-|-|-|
|
|
7
|
+
| selected | `boolean` | `false` | - |
|
|
8
|
+
| flat | `boolean` | `false` | - |
|
|
9
|
+
| clickable | `boolean` | `false` | - |
|
|
10
|
+
| buttonText | `unknown` | `-` | - |
|
|
11
|
+
|
|
12
|
+
### Property Details
|
|
13
|
+
|
|
14
|
+
#### selected
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
- Type: `boolean`
|
|
19
|
+
- Default: `false`
|
|
20
|
+
|
|
21
|
+
#### flat
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
- Type: `boolean`
|
|
26
|
+
- Default: `false`
|
|
27
|
+
|
|
28
|
+
#### clickable
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
- Type: `boolean`
|
|
33
|
+
- Default: `false`
|
|
34
|
+
|
|
35
|
+
#### buttonText
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
- Type: `unknown`
|
|
40
|
+
- Default: `-`
|
|
41
|
+
|
|
42
|
+
### Types
|
|
43
|
+
|
|
44
|
+
No types documented.
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Card (w-card)
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
Card is a layout component used for separating content areas on a page.
|
|
6
|
+
|
|
7
|
+
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
|
|
8
|
+
|
|
9
|
+
## API Documentation
|
|
10
|
+
|
|
11
|
+
### Properties
|
|
12
|
+
|
|
13
|
+
| Name | Type | Default | Summary |
|
|
14
|
+
|-|-|-|-|
|
|
15
|
+
| selected | `boolean` | `false` | - |
|
|
16
|
+
| flat | `boolean` | `false` | - |
|
|
17
|
+
| clickable | `boolean` | `false` | - |
|
|
18
|
+
| buttonText | `unknown` | `-` | - |
|
|
19
|
+
|
|
20
|
+
### Property Details
|
|
21
|
+
|
|
22
|
+
#### selected
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
- Type: `boolean`
|
|
27
|
+
- Default: `false`
|
|
28
|
+
|
|
29
|
+
#### flat
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
- Type: `boolean`
|
|
34
|
+
- Default: `false`
|
|
35
|
+
|
|
36
|
+
#### clickable
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
- Type: `boolean`
|
|
41
|
+
- Default: `false`
|
|
42
|
+
|
|
43
|
+
#### buttonText
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
- Type: `unknown`
|
|
48
|
+
- Default: `-`
|
|
49
|
+
|
|
50
|
+
### Types
|
|
51
|
+
|
|
52
|
+
No types documented.
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
## API Documentation
|
|
2
|
+
|
|
3
|
+
### Properties
|
|
4
|
+
|
|
5
|
+
| Name | Type | Default | Summary |
|
|
6
|
+
|-|-|-|-|
|
|
7
|
+
| options | `ComboboxOption[]` | `[]` | - |
|
|
8
|
+
| label | `string | undefined` | `''` | - |
|
|
9
|
+
| placeholder | `string | undefined` | `''` | - |
|
|
10
|
+
| value | `string` | `''` | - |
|
|
11
|
+
| openOnFocus | `boolean` | `false` | - |
|
|
12
|
+
| selectOnBlur | `boolean` | `true` | - |
|
|
13
|
+
| matchTextSegments | `boolean` | `false` | - |
|
|
14
|
+
| disableStaticFiltering | `boolean` | `false` | - |
|
|
15
|
+
| invalid | `boolean` | `false` | - |
|
|
16
|
+
| helpText | `string | undefined` | `''` | - |
|
|
17
|
+
| disabled | `boolean` | `false` | - |
|
|
18
|
+
| required | `boolean` | `false` | - |
|
|
19
|
+
| optional | `boolean` | `false` | - |
|
|
20
|
+
| name | `string | undefined` | `''` | - |
|
|
21
|
+
| autocomplete | `string | undefined` | `'off'` | - |
|
|
22
|
+
|
|
23
|
+
### Property Details
|
|
24
|
+
|
|
25
|
+
#### options
|
|
26
|
+
|
|
27
|
+
The available options to select from
|
|
28
|
+
|
|
29
|
+
- Type: `ComboboxOption[]`
|
|
30
|
+
- Default: `[]`
|
|
31
|
+
|
|
32
|
+
#### label
|
|
33
|
+
|
|
34
|
+
Label above input
|
|
35
|
+
|
|
36
|
+
- Type: `string | undefined`
|
|
37
|
+
- Default: `''`
|
|
38
|
+
|
|
39
|
+
#### placeholder
|
|
40
|
+
|
|
41
|
+
Input placeholder
|
|
42
|
+
|
|
43
|
+
- Type: `string | undefined`
|
|
44
|
+
- Default: `''`
|
|
45
|
+
|
|
46
|
+
#### value
|
|
47
|
+
|
|
48
|
+
The input value
|
|
49
|
+
|
|
50
|
+
- Type: `string`
|
|
51
|
+
- Default: `''`
|
|
52
|
+
|
|
53
|
+
#### openOnFocus
|
|
54
|
+
|
|
55
|
+
Whether the popover opens when focus is on the text field
|
|
56
|
+
|
|
57
|
+
- Type: `boolean`
|
|
58
|
+
- Default: `false`
|
|
59
|
+
|
|
60
|
+
#### selectOnBlur
|
|
61
|
+
|
|
62
|
+
Select active option on blur
|
|
63
|
+
|
|
64
|
+
- Type: `boolean`
|
|
65
|
+
- Default: `true`
|
|
66
|
+
|
|
67
|
+
#### matchTextSegments
|
|
68
|
+
|
|
69
|
+
Whether the matching text segments in the options should be highlighted
|
|
70
|
+
|
|
71
|
+
- Type: `boolean`
|
|
72
|
+
- Default: `false`
|
|
73
|
+
|
|
74
|
+
#### disableStaticFiltering
|
|
75
|
+
|
|
76
|
+
Disable client-side static filtering
|
|
77
|
+
|
|
78
|
+
- Type: `boolean`
|
|
79
|
+
- Default: `false`
|
|
80
|
+
|
|
81
|
+
#### invalid
|
|
82
|
+
|
|
83
|
+
Renders the input field in an invalid state
|
|
84
|
+
|
|
85
|
+
- Type: `boolean`
|
|
86
|
+
- Default: `false`
|
|
87
|
+
|
|
88
|
+
#### helpText
|
|
89
|
+
|
|
90
|
+
The content to display as the help text
|
|
91
|
+
|
|
92
|
+
- Type: `string | undefined`
|
|
93
|
+
- Default: `''`
|
|
94
|
+
|
|
95
|
+
#### disabled
|
|
96
|
+
|
|
97
|
+
Whether the element is disabled
|
|
98
|
+
|
|
99
|
+
- Type: `boolean`
|
|
100
|
+
- Default: `false`
|
|
101
|
+
|
|
102
|
+
#### required
|
|
103
|
+
|
|
104
|
+
Whether the element is required
|
|
105
|
+
|
|
106
|
+
- Type: `boolean`
|
|
107
|
+
- Default: `false`
|
|
108
|
+
|
|
109
|
+
#### optional
|
|
110
|
+
|
|
111
|
+
Whether to show optional text
|
|
112
|
+
|
|
113
|
+
- Type: `boolean`
|
|
114
|
+
- Default: `false`
|
|
115
|
+
|
|
116
|
+
#### name
|
|
117
|
+
|
|
118
|
+
Name attribute for form submission
|
|
119
|
+
|
|
120
|
+
- Type: `string | undefined`
|
|
121
|
+
- Default: `''`
|
|
122
|
+
|
|
123
|
+
#### autocomplete
|
|
124
|
+
|
|
125
|
+
Autocomplete attribute for the input field
|
|
126
|
+
|
|
127
|
+
- Type: `string | undefined`
|
|
128
|
+
- Default: `'off'`
|
|
129
|
+
|
|
130
|
+
### Types
|
|
131
|
+
|
|
132
|
+
No types documented.
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# Combobox (w-combobox)
|
|
2
|
+
|
|
3
|
+
## Description
|
|
4
|
+
|
|
5
|
+
A combobox element for text input with selectable options.
|
|
6
|
+
|
|
7
|
+
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)
|
|
8
|
+
|
|
9
|
+
## API Documentation
|
|
10
|
+
|
|
11
|
+
### Properties
|
|
12
|
+
|
|
13
|
+
| Name | Type | Default | Summary |
|
|
14
|
+
|-|-|-|-|
|
|
15
|
+
| options | `ComboboxOption[]` | `[]` | - |
|
|
16
|
+
| label | `string | undefined` | `''` | - |
|
|
17
|
+
| placeholder | `string | undefined` | `''` | - |
|
|
18
|
+
| value | `string` | `''` | - |
|
|
19
|
+
| openOnFocus | `boolean` | `false` | - |
|
|
20
|
+
| selectOnBlur | `boolean` | `true` | - |
|
|
21
|
+
| matchTextSegments | `boolean` | `false` | - |
|
|
22
|
+
| disableStaticFiltering | `boolean` | `false` | - |
|
|
23
|
+
| invalid | `boolean` | `false` | - |
|
|
24
|
+
| helpText | `string | undefined` | `''` | - |
|
|
25
|
+
| disabled | `boolean` | `false` | - |
|
|
26
|
+
| required | `boolean` | `false` | - |
|
|
27
|
+
| optional | `boolean` | `false` | - |
|
|
28
|
+
| name | `string | undefined` | `''` | - |
|
|
29
|
+
| autocomplete | `string | undefined` | `'off'` | - |
|
|
30
|
+
|
|
31
|
+
### Property Details
|
|
32
|
+
|
|
33
|
+
#### options
|
|
34
|
+
|
|
35
|
+
The available options to select from
|
|
36
|
+
|
|
37
|
+
- Type: `ComboboxOption[]`
|
|
38
|
+
- Default: `[]`
|
|
39
|
+
|
|
40
|
+
#### label
|
|
41
|
+
|
|
42
|
+
Label above input
|
|
43
|
+
|
|
44
|
+
- Type: `string | undefined`
|
|
45
|
+
- Default: `''`
|
|
46
|
+
|
|
47
|
+
#### placeholder
|
|
48
|
+
|
|
49
|
+
Input placeholder
|
|
50
|
+
|
|
51
|
+
- Type: `string | undefined`
|
|
52
|
+
- Default: `''`
|
|
53
|
+
|
|
54
|
+
#### value
|
|
55
|
+
|
|
56
|
+
The input value
|
|
57
|
+
|
|
58
|
+
- Type: `string`
|
|
59
|
+
- Default: `''`
|
|
60
|
+
|
|
61
|
+
#### openOnFocus
|
|
62
|
+
|
|
63
|
+
Whether the popover opens when focus is on the text field
|
|
64
|
+
|
|
65
|
+
- Type: `boolean`
|
|
66
|
+
- Default: `false`
|
|
67
|
+
|
|
68
|
+
#### selectOnBlur
|
|
69
|
+
|
|
70
|
+
Select active option on blur
|
|
71
|
+
|
|
72
|
+
- Type: `boolean`
|
|
73
|
+
- Default: `true`
|
|
74
|
+
|
|
75
|
+
#### matchTextSegments
|
|
76
|
+
|
|
77
|
+
Whether the matching text segments in the options should be highlighted
|
|
78
|
+
|
|
79
|
+
- Type: `boolean`
|
|
80
|
+
- Default: `false`
|
|
81
|
+
|
|
82
|
+
#### disableStaticFiltering
|
|
83
|
+
|
|
84
|
+
Disable client-side static filtering
|
|
85
|
+
|
|
86
|
+
- Type: `boolean`
|
|
87
|
+
- Default: `false`
|
|
88
|
+
|
|
89
|
+
#### invalid
|
|
90
|
+
|
|
91
|
+
Renders the input field in an invalid state
|
|
92
|
+
|
|
93
|
+
- Type: `boolean`
|
|
94
|
+
- Default: `false`
|
|
95
|
+
|
|
96
|
+
#### helpText
|
|
97
|
+
|
|
98
|
+
The content to display as the help text
|
|
99
|
+
|
|
100
|
+
- Type: `string | undefined`
|
|
101
|
+
- Default: `''`
|
|
102
|
+
|
|
103
|
+
#### disabled
|
|
104
|
+
|
|
105
|
+
Whether the element is disabled
|
|
106
|
+
|
|
107
|
+
- Type: `boolean`
|
|
108
|
+
- Default: `false`
|
|
109
|
+
|
|
110
|
+
#### required
|
|
111
|
+
|
|
112
|
+
Whether the element is required
|
|
113
|
+
|
|
114
|
+
- Type: `boolean`
|
|
115
|
+
- Default: `false`
|
|
116
|
+
|
|
117
|
+
#### optional
|
|
118
|
+
|
|
119
|
+
Whether to show optional text
|
|
120
|
+
|
|
121
|
+
- Type: `boolean`
|
|
122
|
+
- Default: `false`
|
|
123
|
+
|
|
124
|
+
#### name
|
|
125
|
+
|
|
126
|
+
Name attribute for form submission
|
|
127
|
+
|
|
128
|
+
- Type: `string | undefined`
|
|
129
|
+
- Default: `''`
|
|
130
|
+
|
|
131
|
+
#### autocomplete
|
|
132
|
+
|
|
133
|
+
Autocomplete attribute for the input field
|
|
134
|
+
|
|
135
|
+
- Type: `string | undefined`
|
|
136
|
+
- Default: `'off'`
|
|
137
|
+
|
|
138
|
+
### Types
|
|
139
|
+
|
|
140
|
+
No types documented.
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
## API Documentation
|
|
2
|
+
|
|
3
|
+
### Properties
|
|
4
|
+
|
|
5
|
+
| Name | Type | Default | Summary |
|
|
6
|
+
|-|-|-|-|
|
|
7
|
+
| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
|
|
8
|
+
| label | `string` | `-` | - |
|
|
9
|
+
| lang | `string` | `-` | - |
|
|
10
|
+
| name | `string` | `-` | - |
|
|
11
|
+
| value | `string` | `-` | - |
|
|
12
|
+
| headerFormat | `string` | `'MMMM yyyy'` | - |
|
|
13
|
+
| weekdayFormat | `string` | `'EEEEEE'` | - |
|
|
14
|
+
| isDayDisabled | `(day: Date) => boolean` | `-` | - |
|
|
15
|
+
| dayFormat | `string` | `'PPPP'` | - |
|
|
16
|
+
| isCalendarOpen | `boolean` | `false` | - |
|
|
17
|
+
| navigationDate | `Date` | `-` | - |
|
|
18
|
+
| selectedDate | `Date | null` | `-` | - |
|
|
19
|
+
| month | `unknown` | `-` | - |
|
|
20
|
+
| weeks | `unknown` | `-` | - |
|
|
21
|
+
| calendar | `HTMLDivElement` | `-` | - |
|
|
22
|
+
| input | `HTMLInputElement` | `-` | - |
|
|
23
|
+
| toggleButton | `HTMLButtonElement` | `-` | - |
|
|
24
|
+
| wrapper | `HTMLDivElement` | `-` | - |
|
|
25
|
+
| previousMonthButton | `HTMLButtonElement` | `-` | - |
|
|
26
|
+
| todayCell | `HTMLTableCellElement` | `-` | - |
|
|
27
|
+
| selectedCell | `HTMLTableCellElement` | `-` | - |
|
|
28
|
+
|
|
29
|
+
### Property Details
|
|
30
|
+
|
|
31
|
+
#### shadowRootOptions
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
- Type: `object`
|
|
36
|
+
- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
|
|
37
|
+
|
|
38
|
+
#### label
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
- Type: `string`
|
|
43
|
+
- Default: `-`
|
|
44
|
+
|
|
45
|
+
#### lang
|
|
46
|
+
|
|
47
|
+
Takes precedence over the `<html>` lang attribute.
|
|
48
|
+
|
|
49
|
+
- Type: `string`
|
|
50
|
+
- Default: `-`
|
|
51
|
+
|
|
52
|
+
#### name
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
- Type: `string`
|
|
57
|
+
- Default: `-`
|
|
58
|
+
|
|
59
|
+
#### value
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
- Type: `string`
|
|
64
|
+
- Default: `-`
|
|
65
|
+
|
|
66
|
+
#### headerFormat
|
|
67
|
+
|
|
68
|
+
Decides the format of the date as shown in the calendar header.
|
|
69
|
+
|
|
70
|
+
The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
|
|
71
|
+
|
|
72
|
+
- Type: `string`
|
|
73
|
+
- Default: `'MMMM yyyy'`
|
|
74
|
+
|
|
75
|
+
#### weekdayFormat
|
|
76
|
+
|
|
77
|
+
Decides the format of the weekday as shown above the grid of dates in the calendar.
|
|
78
|
+
|
|
79
|
+
The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
|
|
80
|
+
|
|
81
|
+
- Type: `string`
|
|
82
|
+
- Default: `'EEEEEE'`
|
|
83
|
+
|
|
84
|
+
#### isDayDisabled
|
|
85
|
+
|
|
86
|
+
Lets you control if a date in the calendar should be disabled.
|
|
87
|
+
|
|
88
|
+
This needs to be set on the element instance in JavaScript, not as an HTML attribute.
|
|
89
|
+
|
|
90
|
+
- Type: `(day: Date) => boolean`
|
|
91
|
+
- Default: `-`
|
|
92
|
+
|
|
93
|
+
#### dayFormat
|
|
94
|
+
|
|
95
|
+
Decides the format of the day in the calendar as read to screen readers.
|
|
96
|
+
|
|
97
|
+
The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
|
|
98
|
+
|
|
99
|
+
- Type: `string`
|
|
100
|
+
- Default: `'PPPP'`
|
|
101
|
+
|
|
102
|
+
#### isCalendarOpen
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
- Type: `boolean`
|
|
107
|
+
- Default: `false`
|
|
108
|
+
|
|
109
|
+
#### navigationDate
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
- Type: `Date`
|
|
114
|
+
- Default: `-`
|
|
115
|
+
|
|
116
|
+
#### selectedDate
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
- Type: `Date | null`
|
|
121
|
+
- Default: `-`
|
|
122
|
+
|
|
123
|
+
#### month
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
- Type: `unknown`
|
|
128
|
+
- Default: `-`
|
|
129
|
+
|
|
130
|
+
#### weeks
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
- Type: `unknown`
|
|
135
|
+
- Default: `-`
|
|
136
|
+
|
|
137
|
+
#### calendar
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
- Type: `HTMLDivElement`
|
|
142
|
+
- Default: `-`
|
|
143
|
+
|
|
144
|
+
#### input
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
- Type: `HTMLInputElement`
|
|
149
|
+
- Default: `-`
|
|
150
|
+
|
|
151
|
+
#### toggleButton
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
- Type: `HTMLButtonElement`
|
|
156
|
+
- Default: `-`
|
|
157
|
+
|
|
158
|
+
#### wrapper
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
- Type: `HTMLDivElement`
|
|
163
|
+
- Default: `-`
|
|
164
|
+
|
|
165
|
+
#### previousMonthButton
|
|
166
|
+
|
|
167
|
+
This is the first focusable element, needed for the modal focus trap.
|
|
168
|
+
|
|
169
|
+
Don't cache this and other `@query` fields from inside the calendar modal.
|
|
170
|
+
They work the first time, but once the calendar is closed and reopened
|
|
171
|
+
the query will point to an element that doesn't exist anymore.
|
|
172
|
+
|
|
173
|
+
- Type: `HTMLButtonElement`
|
|
174
|
+
- Default: `-`
|
|
175
|
+
|
|
176
|
+
#### todayCell
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
- Type: `HTMLTableCellElement`
|
|
181
|
+
- Default: `-`
|
|
182
|
+
|
|
183
|
+
#### selectedCell
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
- Type: `HTMLTableCellElement`
|
|
188
|
+
- Default: `-`
|
|
189
|
+
|
|
190
|
+
### Types
|
|
191
|
+
|
|
192
|
+
No types documented.
|