@vaadin/multi-select-combo-box 25.0.0-alpha7 → 25.0.0-alpha9
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/package.json +14 -14
- package/src/styles/vaadin-multi-select-combo-box-base-styles.js +44 -45
- package/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js +101 -103
- package/src/styles/vaadin-multi-select-combo-box-core-styles.js +4 -0
- package/src/styles/vaadin-multi-select-combo-box-overlay-base-styles.js +5 -7
- package/src/vaadin-multi-select-combo-box-chip.js +1 -1
- package/src/vaadin-multi-select-combo-box-item.js +1 -1
- package/src/vaadin-multi-select-combo-box-mixin.d.ts +9 -80
- package/src/vaadin-multi-select-combo-box-mixin.js +380 -266
- package/src/vaadin-multi-select-combo-box-overlay.js +1 -2
- package/src/vaadin-multi-select-combo-box.d.ts +13 -6
- package/src/vaadin-multi-select-combo-box.js +35 -88
- package/web-types.json +207 -230
- package/web-types.lit.json +78 -78
- package/src/vaadin-multi-select-combo-box-internal-mixin.js +0 -446
- package/src/vaadin-multi-select-combo-box-internal.js +0 -57
package/web-types.json
CHANGED
|
@@ -1,15 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-multi-select-combo-box",
|
|
11
|
-
"description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|----------------\n`chips` | The element that wraps slotted chips for selected items\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------------|-----------------\n`disabled` | Set to a disabled element\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`loading` | Set when loading items from the data provider\n`opened` | Set when the dropdown is open\n`readonly` | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-
|
|
11
|
+
"description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|----------------\n`chips` | The element that wraps slotted chips for selected items\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`toggle-button` | The toggle button\n`overlay` | The overlay container\n`content` | The overlay content\n`loader` | The loading indicator shown while loading items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------------|-----------------\n`disabled` | Set to a disabled element\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`invalid` | Set when the element is invalid\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`loading` | Set when loading items from the data provider\n`opened` | Set when the dropdown is open\n`readonly` | Set to a readonly element\n\nThe following custom CSS properties are available for styling:\n\nCustom property | Description | Default\n-----------------------------------------------------|----------------------------|--------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-multi-select-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n`--vaadin-multi-select-combo-box-input-min-width` | Min width of the input | `4em`\n\n### Internal components\n\nIn addition to `<vaadin-multi-select-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-multi-select-combo-box-chip>`\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "page-size",
|
|
15
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"number"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "size",
|
|
24
|
+
"description": "Total number of items.",
|
|
25
|
+
"value": {
|
|
26
|
+
"type": [
|
|
27
|
+
"number",
|
|
28
|
+
"undefined"
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
},
|
|
13
32
|
{
|
|
14
33
|
"name": "disabled",
|
|
15
34
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -22,19 +41,19 @@
|
|
|
22
41
|
}
|
|
23
42
|
},
|
|
24
43
|
{
|
|
25
|
-
"name": "
|
|
26
|
-
"description": "
|
|
44
|
+
"name": "value",
|
|
45
|
+
"description": "The value of the field.",
|
|
27
46
|
"value": {
|
|
28
47
|
"type": [
|
|
29
|
-
"
|
|
48
|
+
"string",
|
|
30
49
|
"null",
|
|
31
50
|
"undefined"
|
|
32
51
|
]
|
|
33
52
|
}
|
|
34
53
|
},
|
|
35
54
|
{
|
|
36
|
-
"name": "
|
|
37
|
-
"description": "
|
|
55
|
+
"name": "overlay-class",
|
|
56
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
38
57
|
"value": {
|
|
39
58
|
"type": [
|
|
40
59
|
"string",
|
|
@@ -44,19 +63,17 @@
|
|
|
44
63
|
}
|
|
45
64
|
},
|
|
46
65
|
{
|
|
47
|
-
"name": "
|
|
48
|
-
"description": "
|
|
66
|
+
"name": "opened",
|
|
67
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
49
68
|
"value": {
|
|
50
69
|
"type": [
|
|
51
|
-
"boolean"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
70
|
+
"boolean"
|
|
54
71
|
]
|
|
55
72
|
}
|
|
56
73
|
},
|
|
57
74
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "Set
|
|
75
|
+
"name": "auto-open-disabled",
|
|
76
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
60
77
|
"value": {
|
|
61
78
|
"type": [
|
|
62
79
|
"boolean",
|
|
@@ -66,8 +83,8 @@
|
|
|
66
83
|
}
|
|
67
84
|
},
|
|
68
85
|
{
|
|
69
|
-
"name": "
|
|
70
|
-
"description": "
|
|
86
|
+
"name": "readonly",
|
|
87
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
71
88
|
"value": {
|
|
72
89
|
"type": [
|
|
73
90
|
"boolean",
|
|
@@ -77,52 +94,46 @@
|
|
|
77
94
|
}
|
|
78
95
|
},
|
|
79
96
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
97
|
+
"name": "filter",
|
|
98
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
82
99
|
"value": {
|
|
83
100
|
"type": [
|
|
84
|
-
"string"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
101
|
+
"string"
|
|
87
102
|
]
|
|
88
103
|
}
|
|
89
104
|
},
|
|
90
105
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
106
|
+
"name": "item-label-path",
|
|
107
|
+
"description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
|
|
93
108
|
"value": {
|
|
94
109
|
"type": [
|
|
95
|
-
"string"
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
110
|
+
"string"
|
|
98
111
|
]
|
|
99
112
|
}
|
|
100
113
|
},
|
|
101
114
|
{
|
|
102
|
-
"name": "
|
|
103
|
-
"description": "
|
|
115
|
+
"name": "item-value-path",
|
|
116
|
+
"description": "Path for the value of the item. If `items` is an array of objects, the\n`itemValuePath:` is used to fetch the string value for the selected\nitem.\n\nThe item value is used in the `value` property of the combo box,\nto provide the form value.",
|
|
104
117
|
"value": {
|
|
105
118
|
"type": [
|
|
106
|
-
"string"
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
119
|
+
"string"
|
|
109
120
|
]
|
|
110
121
|
}
|
|
111
122
|
},
|
|
112
123
|
{
|
|
113
|
-
"name": "
|
|
114
|
-
"description": "
|
|
124
|
+
"name": "autofocus",
|
|
125
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
115
126
|
"value": {
|
|
116
127
|
"type": [
|
|
117
|
-
"
|
|
128
|
+
"boolean",
|
|
118
129
|
"null",
|
|
119
130
|
"undefined"
|
|
120
131
|
]
|
|
121
132
|
}
|
|
122
133
|
},
|
|
123
134
|
{
|
|
124
|
-
"name": "
|
|
125
|
-
"description": "The
|
|
135
|
+
"name": "label",
|
|
136
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
126
137
|
"value": {
|
|
127
138
|
"type": [
|
|
128
139
|
"string",
|
|
@@ -132,8 +143,8 @@
|
|
|
132
143
|
}
|
|
133
144
|
},
|
|
134
145
|
{
|
|
135
|
-
"name": "
|
|
136
|
-
"description": "Set to true
|
|
146
|
+
"name": "invalid",
|
|
147
|
+
"description": "Set to true when the field is invalid.",
|
|
137
148
|
"value": {
|
|
138
149
|
"type": [
|
|
139
150
|
"boolean",
|
|
@@ -143,19 +154,19 @@
|
|
|
143
154
|
}
|
|
144
155
|
},
|
|
145
156
|
{
|
|
146
|
-
"name": "
|
|
147
|
-
"description": "
|
|
157
|
+
"name": "manual-validation",
|
|
158
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
148
159
|
"value": {
|
|
149
160
|
"type": [
|
|
150
|
-
"
|
|
161
|
+
"boolean",
|
|
151
162
|
"null",
|
|
152
163
|
"undefined"
|
|
153
164
|
]
|
|
154
165
|
}
|
|
155
166
|
},
|
|
156
167
|
{
|
|
157
|
-
"name": "
|
|
158
|
-
"description": "
|
|
168
|
+
"name": "required",
|
|
169
|
+
"description": "Specifies that the user must fill in a value.",
|
|
159
170
|
"value": {
|
|
160
171
|
"type": [
|
|
161
172
|
"boolean",
|
|
@@ -165,8 +176,8 @@
|
|
|
165
176
|
}
|
|
166
177
|
},
|
|
167
178
|
{
|
|
168
|
-
"name": "
|
|
169
|
-
"description": "
|
|
179
|
+
"name": "error-message",
|
|
180
|
+
"description": "Error to show when the field is invalid.",
|
|
170
181
|
"value": {
|
|
171
182
|
"type": [
|
|
172
183
|
"string",
|
|
@@ -176,8 +187,8 @@
|
|
|
176
187
|
}
|
|
177
188
|
},
|
|
178
189
|
{
|
|
179
|
-
"name": "
|
|
180
|
-
"description": "
|
|
190
|
+
"name": "helper-text",
|
|
191
|
+
"description": "String used for the helper text.",
|
|
181
192
|
"value": {
|
|
182
193
|
"type": [
|
|
183
194
|
"string",
|
|
@@ -187,19 +198,19 @@
|
|
|
187
198
|
}
|
|
188
199
|
},
|
|
189
200
|
{
|
|
190
|
-
"name": "
|
|
191
|
-
"description": "
|
|
201
|
+
"name": "accessible-name",
|
|
202
|
+
"description": "String used to label the component to screen reader users.",
|
|
192
203
|
"value": {
|
|
193
204
|
"type": [
|
|
194
|
-
"
|
|
205
|
+
"string",
|
|
195
206
|
"null",
|
|
196
207
|
"undefined"
|
|
197
208
|
]
|
|
198
209
|
}
|
|
199
210
|
},
|
|
200
211
|
{
|
|
201
|
-
"name": "
|
|
202
|
-
"description": "
|
|
212
|
+
"name": "accessible-name-ref",
|
|
213
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
203
214
|
"value": {
|
|
204
215
|
"type": [
|
|
205
216
|
"string",
|
|
@@ -209,8 +220,8 @@
|
|
|
209
220
|
}
|
|
210
221
|
},
|
|
211
222
|
{
|
|
212
|
-
"name": "
|
|
213
|
-
"description": "Set to true to
|
|
223
|
+
"name": "clear-button-visible",
|
|
224
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
214
225
|
"value": {
|
|
215
226
|
"type": [
|
|
216
227
|
"boolean",
|
|
@@ -220,19 +231,19 @@
|
|
|
220
231
|
}
|
|
221
232
|
},
|
|
222
233
|
{
|
|
223
|
-
"name": "
|
|
224
|
-
"description": "
|
|
234
|
+
"name": "allowed-char-pattern",
|
|
235
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
225
236
|
"value": {
|
|
226
237
|
"type": [
|
|
227
|
-
"
|
|
238
|
+
"string",
|
|
228
239
|
"null",
|
|
229
240
|
"undefined"
|
|
230
241
|
]
|
|
231
242
|
}
|
|
232
243
|
},
|
|
233
244
|
{
|
|
234
|
-
"name": "
|
|
235
|
-
"description": "
|
|
245
|
+
"name": "autoselect",
|
|
246
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
236
247
|
"value": {
|
|
237
248
|
"type": [
|
|
238
249
|
"boolean",
|
|
@@ -242,8 +253,8 @@
|
|
|
242
253
|
}
|
|
243
254
|
},
|
|
244
255
|
{
|
|
245
|
-
"name": "
|
|
246
|
-
"description": "The
|
|
256
|
+
"name": "name",
|
|
257
|
+
"description": "The name of this field.",
|
|
247
258
|
"value": {
|
|
248
259
|
"type": [
|
|
249
260
|
"string",
|
|
@@ -253,8 +264,8 @@
|
|
|
253
264
|
}
|
|
254
265
|
},
|
|
255
266
|
{
|
|
256
|
-
"name": "
|
|
257
|
-
"description": "
|
|
267
|
+
"name": "placeholder",
|
|
268
|
+
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",
|
|
258
269
|
"value": {
|
|
259
270
|
"type": [
|
|
260
271
|
"string",
|
|
@@ -264,8 +275,8 @@
|
|
|
264
275
|
}
|
|
265
276
|
},
|
|
266
277
|
{
|
|
267
|
-
"name": "
|
|
268
|
-
"description": "
|
|
278
|
+
"name": "title",
|
|
279
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
269
280
|
"value": {
|
|
270
281
|
"type": [
|
|
271
282
|
"string",
|
|
@@ -275,8 +286,8 @@
|
|
|
275
286
|
}
|
|
276
287
|
},
|
|
277
288
|
{
|
|
278
|
-
"name": "
|
|
279
|
-
"description": "
|
|
289
|
+
"name": "auto-expand-horizontally",
|
|
290
|
+
"description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
|
|
280
291
|
"value": {
|
|
281
292
|
"type": [
|
|
282
293
|
"boolean",
|
|
@@ -286,8 +297,8 @@
|
|
|
286
297
|
}
|
|
287
298
|
},
|
|
288
299
|
{
|
|
289
|
-
"name": "
|
|
290
|
-
"description": "
|
|
300
|
+
"name": "auto-expand-vertically",
|
|
301
|
+
"description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
|
|
291
302
|
"value": {
|
|
292
303
|
"type": [
|
|
293
304
|
"boolean",
|
|
@@ -297,8 +308,8 @@
|
|
|
297
308
|
}
|
|
298
309
|
},
|
|
299
310
|
{
|
|
300
|
-
"name": "
|
|
301
|
-
"description": "
|
|
311
|
+
"name": "item-id-path",
|
|
312
|
+
"description": "Path for the id of the item, used to detect whether the item is selected.",
|
|
302
313
|
"value": {
|
|
303
314
|
"type": [
|
|
304
315
|
"string",
|
|
@@ -308,8 +319,8 @@
|
|
|
308
319
|
}
|
|
309
320
|
},
|
|
310
321
|
{
|
|
311
|
-
"name": "
|
|
312
|
-
"description": "
|
|
322
|
+
"name": "keep-filter",
|
|
323
|
+
"description": "When true, filter string isn't cleared after selecting an item.",
|
|
313
324
|
"value": {
|
|
314
325
|
"type": [
|
|
315
326
|
"boolean",
|
|
@@ -319,22 +330,11 @@
|
|
|
319
330
|
}
|
|
320
331
|
},
|
|
321
332
|
{
|
|
322
|
-
"name": "
|
|
323
|
-
"description": "
|
|
324
|
-
"value": {
|
|
325
|
-
"type": [
|
|
326
|
-
"number",
|
|
327
|
-
"null",
|
|
328
|
-
"undefined"
|
|
329
|
-
]
|
|
330
|
-
}
|
|
331
|
-
},
|
|
332
|
-
{
|
|
333
|
-
"name": "page-size",
|
|
334
|
-
"description": "Number of items fetched at a time from the data provider.",
|
|
333
|
+
"name": "loading",
|
|
334
|
+
"description": "True when loading items from the data provider, false otherwise.",
|
|
335
335
|
"value": {
|
|
336
336
|
"type": [
|
|
337
|
-
"
|
|
337
|
+
"boolean",
|
|
338
338
|
"null",
|
|
339
339
|
"undefined"
|
|
340
340
|
]
|
|
@@ -351,17 +351,6 @@
|
|
|
351
351
|
]
|
|
352
352
|
}
|
|
353
353
|
},
|
|
354
|
-
{
|
|
355
|
-
"name": "filter",
|
|
356
|
-
"description": "Filtering string the user has typed into the input field.",
|
|
357
|
-
"value": {
|
|
358
|
-
"type": [
|
|
359
|
-
"string",
|
|
360
|
-
"null",
|
|
361
|
-
"undefined"
|
|
362
|
-
]
|
|
363
|
-
}
|
|
364
|
-
},
|
|
365
354
|
{
|
|
366
355
|
"name": "selected-items-on-top",
|
|
367
356
|
"description": "Set to true to group selected items at the top of the overlay.",
|
|
@@ -388,41 +377,37 @@
|
|
|
388
377
|
"js": {
|
|
389
378
|
"properties": [
|
|
390
379
|
{
|
|
391
|
-
"name": "
|
|
392
|
-
"description": "
|
|
380
|
+
"name": "pageSize",
|
|
381
|
+
"description": "Number of items fetched at a time from the dataprovider.",
|
|
393
382
|
"value": {
|
|
394
383
|
"type": [
|
|
395
|
-
"
|
|
396
|
-
"null",
|
|
397
|
-
"undefined"
|
|
384
|
+
"number"
|
|
398
385
|
]
|
|
399
386
|
}
|
|
400
387
|
},
|
|
401
388
|
{
|
|
402
|
-
"name": "
|
|
403
|
-
"description": "
|
|
389
|
+
"name": "size",
|
|
390
|
+
"description": "Total number of items.",
|
|
404
391
|
"value": {
|
|
405
392
|
"type": [
|
|
406
|
-
"
|
|
407
|
-
"null",
|
|
393
|
+
"number",
|
|
408
394
|
"undefined"
|
|
409
395
|
]
|
|
410
396
|
}
|
|
411
397
|
},
|
|
412
398
|
{
|
|
413
|
-
"name": "
|
|
414
|
-
"description": "
|
|
399
|
+
"name": "dataProvider",
|
|
400
|
+
"description": "Function that provides items lazily. Receives arguments `params`, `callback`\n\n`params.page` Requested page index\n\n`params.pageSize` Current page size\n\n`params.filter` Currently applied filter\n\n`callback(items, size)` Callback function with arguments:\n - `items` Current page of items\n - `size` Total number of items.",
|
|
415
401
|
"value": {
|
|
416
402
|
"type": [
|
|
417
|
-
"
|
|
418
|
-
"null",
|
|
403
|
+
"ComboBoxDataProvider",
|
|
419
404
|
"undefined"
|
|
420
405
|
]
|
|
421
406
|
}
|
|
422
407
|
},
|
|
423
408
|
{
|
|
424
|
-
"name": "
|
|
425
|
-
"description": "
|
|
409
|
+
"name": "disabled",
|
|
410
|
+
"description": "If true, the user cannot interact with this element.",
|
|
426
411
|
"value": {
|
|
427
412
|
"type": [
|
|
428
413
|
"boolean",
|
|
@@ -432,118 +417,110 @@
|
|
|
432
417
|
}
|
|
433
418
|
},
|
|
434
419
|
{
|
|
435
|
-
"name": "
|
|
436
|
-
"description": "
|
|
420
|
+
"name": "overlayClass",
|
|
421
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
437
422
|
"value": {
|
|
438
423
|
"type": [
|
|
439
|
-
"
|
|
424
|
+
"string",
|
|
440
425
|
"null",
|
|
441
426
|
"undefined"
|
|
442
427
|
]
|
|
443
428
|
}
|
|
444
429
|
},
|
|
445
430
|
{
|
|
446
|
-
"name": "
|
|
447
|
-
"description": "
|
|
431
|
+
"name": "opened",
|
|
432
|
+
"description": "True if the dropdown is open, false otherwise.",
|
|
448
433
|
"value": {
|
|
449
434
|
"type": [
|
|
450
|
-
"boolean"
|
|
451
|
-
"null",
|
|
452
|
-
"undefined"
|
|
435
|
+
"boolean"
|
|
453
436
|
]
|
|
454
437
|
}
|
|
455
438
|
},
|
|
456
439
|
{
|
|
457
|
-
"name": "
|
|
458
|
-
"description": "
|
|
440
|
+
"name": "autoOpenDisabled",
|
|
441
|
+
"description": "Set true to prevent the overlay from opening automatically.",
|
|
459
442
|
"value": {
|
|
460
443
|
"type": [
|
|
461
|
-
"
|
|
444
|
+
"boolean",
|
|
462
445
|
"null",
|
|
463
446
|
"undefined"
|
|
464
447
|
]
|
|
465
448
|
}
|
|
466
449
|
},
|
|
467
450
|
{
|
|
468
|
-
"name": "
|
|
469
|
-
"description": "
|
|
451
|
+
"name": "readonly",
|
|
452
|
+
"description": "When present, it specifies that the field is read-only.",
|
|
470
453
|
"value": {
|
|
471
454
|
"type": [
|
|
472
|
-
"
|
|
455
|
+
"boolean",
|
|
473
456
|
"null",
|
|
474
457
|
"undefined"
|
|
475
458
|
]
|
|
476
459
|
}
|
|
477
460
|
},
|
|
478
461
|
{
|
|
479
|
-
"name": "
|
|
480
|
-
"description": "
|
|
462
|
+
"name": "items",
|
|
463
|
+
"description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
|
|
481
464
|
"value": {
|
|
482
465
|
"type": [
|
|
483
|
-
"
|
|
484
|
-
"
|
|
466
|
+
"Array.<ComboBoxItem",
|
|
467
|
+
"string>",
|
|
485
468
|
"undefined"
|
|
486
469
|
]
|
|
487
470
|
}
|
|
488
471
|
},
|
|
489
472
|
{
|
|
490
|
-
"name": "
|
|
491
|
-
"description": "
|
|
473
|
+
"name": "filteredItems",
|
|
474
|
+
"description": "A subset of items, filtered based on the user input. Filtered items\ncan be assigned directly to omit the internal filtering functionality.\nThe items can be of either `String` or `Object` type.",
|
|
492
475
|
"value": {
|
|
493
476
|
"type": [
|
|
494
|
-
"
|
|
495
|
-
"
|
|
477
|
+
"Array.<ComboBoxItem",
|
|
478
|
+
"string>",
|
|
496
479
|
"undefined"
|
|
497
480
|
]
|
|
498
481
|
}
|
|
499
482
|
},
|
|
500
483
|
{
|
|
501
|
-
"name": "
|
|
502
|
-
"description": "
|
|
484
|
+
"name": "filter",
|
|
485
|
+
"description": "Filtering string the user has typed into the input field.",
|
|
503
486
|
"value": {
|
|
504
487
|
"type": [
|
|
505
|
-
"
|
|
506
|
-
"null",
|
|
507
|
-
"undefined"
|
|
488
|
+
"string"
|
|
508
489
|
]
|
|
509
490
|
}
|
|
510
491
|
},
|
|
511
492
|
{
|
|
512
|
-
"name": "
|
|
513
|
-
"description": "
|
|
493
|
+
"name": "itemLabelPath",
|
|
494
|
+
"description": "Path for label of the item. If `items` is an array of objects, the\n`itemLabelPath` is used to fetch the displayed string label for each\nitem.\n\nThe item label is also used for matching items when processing user\ninput, i.e., for filtering and selecting items.",
|
|
514
495
|
"value": {
|
|
515
496
|
"type": [
|
|
516
|
-
"string"
|
|
517
|
-
"null",
|
|
518
|
-
"undefined"
|
|
497
|
+
"string"
|
|
519
498
|
]
|
|
520
499
|
}
|
|
521
500
|
},
|
|
522
501
|
{
|
|
523
|
-
"name": "
|
|
524
|
-
"description": "If
|
|
502
|
+
"name": "itemValuePath",
|
|
503
|
+
"description": "Path for the value of the item. If `items` is an array of objects, the\n`itemValuePath:` is used to fetch the string value for the selected\nitem.\n\nThe item value is used in the `value` property of the combo box,\nto provide the form value.",
|
|
525
504
|
"value": {
|
|
526
505
|
"type": [
|
|
527
|
-
"
|
|
528
|
-
"null",
|
|
529
|
-
"undefined"
|
|
506
|
+
"string"
|
|
530
507
|
]
|
|
531
508
|
}
|
|
532
509
|
},
|
|
533
510
|
{
|
|
534
|
-
"name": "
|
|
535
|
-
"description": "
|
|
511
|
+
"name": "autofocus",
|
|
512
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
536
513
|
"value": {
|
|
537
514
|
"type": [
|
|
538
|
-
"
|
|
515
|
+
"boolean",
|
|
539
516
|
"null",
|
|
540
517
|
"undefined"
|
|
541
518
|
]
|
|
542
519
|
}
|
|
543
520
|
},
|
|
544
521
|
{
|
|
545
|
-
"name": "
|
|
546
|
-
"description": "
|
|
522
|
+
"name": "label",
|
|
523
|
+
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
547
524
|
"value": {
|
|
548
525
|
"type": [
|
|
549
526
|
"string",
|
|
@@ -553,8 +530,8 @@
|
|
|
553
530
|
}
|
|
554
531
|
},
|
|
555
532
|
{
|
|
556
|
-
"name": "
|
|
557
|
-
"description": "
|
|
533
|
+
"name": "invalid",
|
|
534
|
+
"description": "Set to true when the field is invalid.",
|
|
558
535
|
"value": {
|
|
559
536
|
"type": [
|
|
560
537
|
"boolean",
|
|
@@ -564,19 +541,19 @@
|
|
|
564
541
|
}
|
|
565
542
|
},
|
|
566
543
|
{
|
|
567
|
-
"name": "
|
|
568
|
-
"description": "
|
|
544
|
+
"name": "manualValidation",
|
|
545
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
569
546
|
"value": {
|
|
570
547
|
"type": [
|
|
571
|
-
"
|
|
548
|
+
"boolean",
|
|
572
549
|
"null",
|
|
573
550
|
"undefined"
|
|
574
551
|
]
|
|
575
552
|
}
|
|
576
553
|
},
|
|
577
554
|
{
|
|
578
|
-
"name": "
|
|
579
|
-
"description": "
|
|
555
|
+
"name": "required",
|
|
556
|
+
"description": "Specifies that the user must fill in a value.",
|
|
580
557
|
"value": {
|
|
581
558
|
"type": [
|
|
582
559
|
"boolean",
|
|
@@ -586,63 +563,63 @@
|
|
|
586
563
|
}
|
|
587
564
|
},
|
|
588
565
|
{
|
|
589
|
-
"name": "
|
|
590
|
-
"description": "
|
|
566
|
+
"name": "errorMessage",
|
|
567
|
+
"description": "Error to show when the field is invalid.",
|
|
591
568
|
"value": {
|
|
592
569
|
"type": [
|
|
593
|
-
"
|
|
570
|
+
"string",
|
|
594
571
|
"null",
|
|
595
572
|
"undefined"
|
|
596
573
|
]
|
|
597
574
|
}
|
|
598
575
|
},
|
|
599
576
|
{
|
|
600
|
-
"name": "
|
|
601
|
-
"description": "
|
|
577
|
+
"name": "helperText",
|
|
578
|
+
"description": "String used for the helper text.",
|
|
602
579
|
"value": {
|
|
603
580
|
"type": [
|
|
604
|
-
"
|
|
581
|
+
"string",
|
|
605
582
|
"null",
|
|
606
583
|
"undefined"
|
|
607
584
|
]
|
|
608
585
|
}
|
|
609
586
|
},
|
|
610
587
|
{
|
|
611
|
-
"name": "
|
|
612
|
-
"description": "
|
|
588
|
+
"name": "accessibleName",
|
|
589
|
+
"description": "String used to label the component to screen reader users.",
|
|
613
590
|
"value": {
|
|
614
591
|
"type": [
|
|
615
|
-
"
|
|
592
|
+
"string",
|
|
616
593
|
"null",
|
|
617
594
|
"undefined"
|
|
618
595
|
]
|
|
619
596
|
}
|
|
620
597
|
},
|
|
621
598
|
{
|
|
622
|
-
"name": "
|
|
623
|
-
"description": "
|
|
599
|
+
"name": "accessibleNameRef",
|
|
600
|
+
"description": "Id of the element used as label of the component to screen reader users.",
|
|
624
601
|
"value": {
|
|
625
602
|
"type": [
|
|
626
|
-
"
|
|
603
|
+
"string",
|
|
627
604
|
"null",
|
|
628
605
|
"undefined"
|
|
629
606
|
]
|
|
630
607
|
}
|
|
631
608
|
},
|
|
632
609
|
{
|
|
633
|
-
"name": "
|
|
634
|
-
"description": "
|
|
610
|
+
"name": "clearButtonVisible",
|
|
611
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
635
612
|
"value": {
|
|
636
613
|
"type": [
|
|
637
|
-
"
|
|
614
|
+
"boolean",
|
|
638
615
|
"null",
|
|
639
616
|
"undefined"
|
|
640
617
|
]
|
|
641
618
|
}
|
|
642
619
|
},
|
|
643
620
|
{
|
|
644
|
-
"name": "
|
|
645
|
-
"description": "
|
|
621
|
+
"name": "allowedCharPattern",
|
|
622
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
646
623
|
"value": {
|
|
647
624
|
"type": [
|
|
648
625
|
"string",
|
|
@@ -652,116 +629,116 @@
|
|
|
652
629
|
}
|
|
653
630
|
},
|
|
654
631
|
{
|
|
655
|
-
"name": "
|
|
656
|
-
"description": "
|
|
632
|
+
"name": "autoselect",
|
|
633
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
657
634
|
"value": {
|
|
658
635
|
"type": [
|
|
659
|
-
"
|
|
636
|
+
"boolean",
|
|
660
637
|
"null",
|
|
661
638
|
"undefined"
|
|
662
639
|
]
|
|
663
640
|
}
|
|
664
641
|
},
|
|
665
642
|
{
|
|
666
|
-
"name": "
|
|
667
|
-
"description": "The
|
|
643
|
+
"name": "name",
|
|
644
|
+
"description": "The name of this field.",
|
|
668
645
|
"value": {
|
|
669
646
|
"type": [
|
|
670
|
-
"
|
|
647
|
+
"string",
|
|
648
|
+
"null",
|
|
649
|
+
"undefined"
|
|
671
650
|
]
|
|
672
651
|
}
|
|
673
652
|
},
|
|
674
653
|
{
|
|
675
|
-
"name": "
|
|
676
|
-
"description": "
|
|
654
|
+
"name": "placeholder",
|
|
655
|
+
"description": "A hint to the user of what can be entered in the control.\nThe placeholder will be only displayed in the case when\nthere is no item selected.",
|
|
677
656
|
"value": {
|
|
678
657
|
"type": [
|
|
679
|
-
"
|
|
658
|
+
"string",
|
|
680
659
|
"null",
|
|
681
660
|
"undefined"
|
|
682
661
|
]
|
|
683
662
|
}
|
|
684
663
|
},
|
|
685
664
|
{
|
|
686
|
-
"name": "
|
|
687
|
-
"description": "
|
|
665
|
+
"name": "title",
|
|
666
|
+
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
|
|
688
667
|
"value": {
|
|
689
668
|
"type": [
|
|
690
|
-
"
|
|
669
|
+
"string",
|
|
691
670
|
"null",
|
|
692
671
|
"undefined"
|
|
693
672
|
]
|
|
694
673
|
}
|
|
695
674
|
},
|
|
696
675
|
{
|
|
697
|
-
"name": "
|
|
698
|
-
"description": "
|
|
676
|
+
"name": "autoExpandHorizontally",
|
|
677
|
+
"description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
|
|
699
678
|
"value": {
|
|
700
679
|
"type": [
|
|
701
|
-
"
|
|
680
|
+
"boolean",
|
|
702
681
|
"null",
|
|
703
682
|
"undefined"
|
|
704
683
|
]
|
|
705
684
|
}
|
|
706
685
|
},
|
|
707
686
|
{
|
|
708
|
-
"name": "
|
|
709
|
-
"description": "
|
|
687
|
+
"name": "autoExpandVertically",
|
|
688
|
+
"description": "Set to true to not collapse selected items chips into the overflow\nchip and instead always expand vertically, causing input field to\nwrap into multiple lines when width is limited.",
|
|
710
689
|
"value": {
|
|
711
690
|
"type": [
|
|
712
|
-
"
|
|
691
|
+
"boolean",
|
|
713
692
|
"null",
|
|
714
693
|
"undefined"
|
|
715
694
|
]
|
|
716
695
|
}
|
|
717
696
|
},
|
|
718
697
|
{
|
|
719
|
-
"name": "
|
|
720
|
-
"description": "
|
|
698
|
+
"name": "itemClassNameGenerator",
|
|
699
|
+
"description": "A function used to generate CSS class names for dropdown\nitems and selected chips based on the item. The return\nvalue should be the generated class name as a string, or\nmultiple class names separated by whitespace characters.",
|
|
721
700
|
"value": {
|
|
722
701
|
"type": [
|
|
723
|
-
"
|
|
702
|
+
"Object",
|
|
724
703
|
"null",
|
|
725
704
|
"undefined"
|
|
726
705
|
]
|
|
727
706
|
}
|
|
728
707
|
},
|
|
729
708
|
{
|
|
730
|
-
"name": "
|
|
731
|
-
"description": "
|
|
709
|
+
"name": "itemIdPath",
|
|
710
|
+
"description": "Path for the id of the item, used to detect whether the item is selected.",
|
|
732
711
|
"value": {
|
|
733
712
|
"type": [
|
|
734
|
-
"
|
|
713
|
+
"string",
|
|
735
714
|
"null",
|
|
736
715
|
"undefined"
|
|
737
716
|
]
|
|
738
717
|
}
|
|
739
718
|
},
|
|
740
719
|
{
|
|
741
|
-
"name": "
|
|
742
|
-
"description": "
|
|
720
|
+
"name": "i18n",
|
|
721
|
+
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n```\n{\n // Screen reader announcement on clear button click.\n cleared: 'Selection cleared',\n // Screen reader announcement when a chip is focused.\n focused: ' focused. Press Backspace to remove',\n // Screen reader announcement when item is selected.\n selected: 'added to selection',\n // Screen reader announcement when item is deselected.\n deselected: 'removed from selection',\n // Screen reader announcement of the selected items count.\n // {count} is replaced with the actual count of items.\n total: '{count} items selected',\n}\n```",
|
|
743
722
|
"value": {
|
|
744
723
|
"type": [
|
|
745
|
-
"
|
|
746
|
-
"null",
|
|
747
|
-
"undefined"
|
|
724
|
+
"MultiSelectComboBoxI18n"
|
|
748
725
|
]
|
|
749
726
|
}
|
|
750
727
|
},
|
|
751
728
|
{
|
|
752
|
-
"name": "
|
|
753
|
-
"description": "
|
|
729
|
+
"name": "keepFilter",
|
|
730
|
+
"description": "When true, filter string isn't cleared after selecting an item.",
|
|
754
731
|
"value": {
|
|
755
732
|
"type": [
|
|
756
|
-
"
|
|
733
|
+
"boolean",
|
|
757
734
|
"null",
|
|
758
735
|
"undefined"
|
|
759
736
|
]
|
|
760
737
|
}
|
|
761
738
|
},
|
|
762
739
|
{
|
|
763
|
-
"name": "
|
|
764
|
-
"description": "
|
|
740
|
+
"name": "loading",
|
|
741
|
+
"description": "True when loading items from the data provider, false otherwise.",
|
|
765
742
|
"value": {
|
|
766
743
|
"type": [
|
|
767
744
|
"boolean",
|
|
@@ -771,33 +748,33 @@
|
|
|
771
748
|
}
|
|
772
749
|
},
|
|
773
750
|
{
|
|
774
|
-
"name": "
|
|
775
|
-
"description": "
|
|
751
|
+
"name": "selectedItems",
|
|
752
|
+
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|
|
776
753
|
"value": {
|
|
777
754
|
"type": [
|
|
778
|
-
"
|
|
755
|
+
"Array",
|
|
779
756
|
"null",
|
|
780
757
|
"undefined"
|
|
781
758
|
]
|
|
782
759
|
}
|
|
783
760
|
},
|
|
784
761
|
{
|
|
785
|
-
"name": "
|
|
786
|
-
"description": "
|
|
762
|
+
"name": "allowCustomValue",
|
|
763
|
+
"description": "When true, the user can input a value that is not present in the items list.",
|
|
787
764
|
"value": {
|
|
788
765
|
"type": [
|
|
789
|
-
"
|
|
766
|
+
"boolean",
|
|
790
767
|
"null",
|
|
791
768
|
"undefined"
|
|
792
769
|
]
|
|
793
770
|
}
|
|
794
771
|
},
|
|
795
772
|
{
|
|
796
|
-
"name": "
|
|
797
|
-
"description": "
|
|
773
|
+
"name": "renderer",
|
|
774
|
+
"description": "Custom function for rendering the content of every item.\nReceives three arguments:\n\n- `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.\n- `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.\n- `model` The object with the properties related with the rendered\n item, contains:\n - `model.index` The index of the rendered item.\n - `model.item` The item.",
|
|
798
775
|
"value": {
|
|
799
776
|
"type": [
|
|
800
|
-
"
|
|
777
|
+
"Function",
|
|
801
778
|
"null",
|
|
802
779
|
"undefined"
|
|
803
780
|
]
|
|
@@ -832,14 +809,6 @@
|
|
|
832
809
|
"name": "custom-value-set",
|
|
833
810
|
"description": "Fired when the user sets a custom value."
|
|
834
811
|
},
|
|
835
|
-
{
|
|
836
|
-
"name": "invalid-changed",
|
|
837
|
-
"description": "Fired when the `invalid` property changes."
|
|
838
|
-
},
|
|
839
|
-
{
|
|
840
|
-
"name": "selected-items-changed",
|
|
841
|
-
"description": "Fired when the `selectedItems` property changes."
|
|
842
|
-
},
|
|
843
812
|
{
|
|
844
813
|
"name": "opened-changed",
|
|
845
814
|
"description": "Fired when the `opened` property changes."
|
|
@@ -847,6 +816,14 @@
|
|
|
847
816
|
{
|
|
848
817
|
"name": "filter-changed",
|
|
849
818
|
"description": "Fired when the `filter` property changes."
|
|
819
|
+
},
|
|
820
|
+
{
|
|
821
|
+
"name": "invalid-changed",
|
|
822
|
+
"description": "Fired when the `invalid` property changes."
|
|
823
|
+
},
|
|
824
|
+
{
|
|
825
|
+
"name": "selected-items-changed",
|
|
826
|
+
"description": "Fired when the `selectedItems` property changes."
|
|
850
827
|
}
|
|
851
828
|
]
|
|
852
829
|
}
|