@vaadin/multi-select-combo-box 25.0.0-alpha8 → 25.0.0-beta1

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 (28) hide show
  1. package/package.json +15 -18
  2. package/src/styles/vaadin-multi-select-combo-box-base-styles.js +1 -1
  3. package/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js +23 -9
  4. package/src/vaadin-multi-select-combo-box-chip.js +1 -1
  5. package/src/vaadin-multi-select-combo-box-container.js +1 -0
  6. package/src/vaadin-multi-select-combo-box-item.js +1 -1
  7. package/src/vaadin-multi-select-combo-box-mixin.d.ts +18 -89
  8. package/src/vaadin-multi-select-combo-box-mixin.js +426 -307
  9. package/src/vaadin-multi-select-combo-box-overlay.js +2 -2
  10. package/src/vaadin-multi-select-combo-box-scroller.js +1 -1
  11. package/src/vaadin-multi-select-combo-box.d.ts +13 -6
  12. package/src/vaadin-multi-select-combo-box.js +37 -88
  13. package/vaadin-multi-select-combo-box.js +1 -1
  14. package/web-types.json +205 -230
  15. package/web-types.lit.json +78 -78
  16. package/src/styles/vaadin-multi-select-combo-box-chip-core-styles.js +0 -33
  17. package/src/styles/vaadin-multi-select-combo-box-core-styles.d.ts +0 -8
  18. package/src/styles/vaadin-multi-select-combo-box-core-styles.js +0 -47
  19. package/src/styles/vaadin-multi-select-combo-box-overlay-core-styles.js +0 -21
  20. package/src/styles/vaadin-multi-select-combo-box-scroller-core-styles.js +0 -27
  21. package/src/vaadin-multi-select-combo-box-internal-mixin.js +0 -446
  22. package/src/vaadin-multi-select-combo-box-internal.js +0 -57
  23. package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.d.ts +0 -10
  24. package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js +0 -107
  25. package/theme/lumo/vaadin-multi-select-combo-box-styles.d.ts +0 -10
  26. package/theme/lumo/vaadin-multi-select-combo-box-styles.js +0 -121
  27. package/theme/lumo/vaadin-multi-select-combo-box.d.ts +0 -8
  28. package/theme/lumo/vaadin-multi-select-combo-box.js +0 -8
package/web-types.json CHANGED
@@ -1,73 +1,68 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/multi-select-combo-box",
4
- "version": "25.0.0-alpha8",
4
+ "version": "25.0.0-beta1",
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-overlay>` - has the same API as `<vaadin-overlay>`.\n- `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.\n- `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.\n\nNote: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
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`field-button` | Set on both clear and toggle buttons\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`has-tooltip` | Set when the element has a slotted tooltip\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
13
  {
14
- "name": "disabled",
15
- "description": "If true, the user cannot interact with this element.",
14
+ "name": "page-size",
15
+ "description": "Number of items fetched at a time from the dataprovider.",
16
16
  "value": {
17
17
  "type": [
18
- "boolean",
19
- "null",
20
- "undefined"
18
+ "number"
21
19
  ]
22
20
  }
23
21
  },
24
22
  {
25
- "name": "autofocus",
26
- "description": "Specify that this control should have input focus when the page loads.",
23
+ "name": "size",
24
+ "description": "Total number of items.",
27
25
  "value": {
28
26
  "type": [
29
- "boolean",
30
- "null",
27
+ "number",
31
28
  "undefined"
32
29
  ]
33
30
  }
34
31
  },
35
32
  {
36
- "name": "label",
37
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
33
+ "name": "disabled",
34
+ "description": "If true, the user cannot interact with this element.",
38
35
  "value": {
39
36
  "type": [
40
- "string",
37
+ "boolean",
41
38
  "null",
42
39
  "undefined"
43
40
  ]
44
41
  }
45
42
  },
46
43
  {
47
- "name": "invalid",
48
- "description": "Set to true when the field is invalid.",
44
+ "name": "value",
45
+ "description": "The value of the field.",
49
46
  "value": {
50
47
  "type": [
51
- "boolean",
48
+ "string",
52
49
  "null",
53
50
  "undefined"
54
51
  ]
55
52
  }
56
53
  },
57
54
  {
58
- "name": "manual-validation",
59
- "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.",
55
+ "name": "opened",
56
+ "description": "True if the dropdown is open, false otherwise.",
60
57
  "value": {
61
58
  "type": [
62
- "boolean",
63
- "null",
64
- "undefined"
59
+ "boolean"
65
60
  ]
66
61
  }
67
62
  },
68
63
  {
69
- "name": "required",
70
- "description": "Specifies that the user must fill in a value.",
64
+ "name": "auto-open-disabled",
65
+ "description": "Set true to prevent the overlay from opening automatically.",
71
66
  "value": {
72
67
  "type": [
73
68
  "boolean",
@@ -77,63 +72,55 @@
77
72
  }
78
73
  },
79
74
  {
80
- "name": "error-message",
81
- "description": "Error to show when the field is invalid.",
75
+ "name": "readonly",
76
+ "description": "When present, it specifies that the field is read-only.",
82
77
  "value": {
83
78
  "type": [
84
- "string",
79
+ "boolean",
85
80
  "null",
86
81
  "undefined"
87
82
  ]
88
83
  }
89
84
  },
90
85
  {
91
- "name": "helper-text",
92
- "description": "String used for the helper text.",
86
+ "name": "filter",
87
+ "description": "Filtering string the user has typed into the input field.",
93
88
  "value": {
94
89
  "type": [
95
- "string",
96
- "null",
97
- "undefined"
90
+ "string"
98
91
  ]
99
92
  }
100
93
  },
101
94
  {
102
- "name": "accessible-name",
103
- "description": "String used to label the component to screen reader users.",
95
+ "name": "item-label-path",
96
+ "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.",
104
97
  "value": {
105
98
  "type": [
106
- "string",
107
- "null",
108
- "undefined"
99
+ "string"
109
100
  ]
110
101
  }
111
102
  },
112
103
  {
113
- "name": "accessible-name-ref",
114
- "description": "Id of the element used as label of the component to screen reader users.",
104
+ "name": "item-value-path",
105
+ "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.",
115
106
  "value": {
116
107
  "type": [
117
- "string",
118
- "null",
119
- "undefined"
108
+ "string"
120
109
  ]
121
110
  }
122
111
  },
123
112
  {
124
- "name": "value",
125
- "description": "The value of the field.",
113
+ "name": "i18n",
114
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
126
115
  "value": {
127
116
  "type": [
128
- "string",
129
- "null",
130
- "undefined"
117
+ "Object"
131
118
  ]
132
119
  }
133
120
  },
134
121
  {
135
- "name": "clear-button-visible",
136
- "description": "Set to true to display the clear icon which clears the input.",
122
+ "name": "autofocus",
123
+ "description": "Specify that this control should have input focus when the page loads.",
137
124
  "value": {
138
125
  "type": [
139
126
  "boolean",
@@ -143,8 +130,8 @@
143
130
  }
144
131
  },
145
132
  {
146
- "name": "allowed-char-pattern",
147
- "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-]\"`",
133
+ "name": "label",
134
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
148
135
  "value": {
149
136
  "type": [
150
137
  "string",
@@ -154,8 +141,8 @@
154
141
  }
155
142
  },
156
143
  {
157
- "name": "autoselect",
158
- "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
144
+ "name": "invalid",
145
+ "description": "Set to true when the field is invalid.",
159
146
  "value": {
160
147
  "type": [
161
148
  "boolean",
@@ -165,41 +152,41 @@
165
152
  }
166
153
  },
167
154
  {
168
- "name": "name",
169
- "description": "The name of this field.",
155
+ "name": "manual-validation",
156
+ "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.",
170
157
  "value": {
171
158
  "type": [
172
- "string",
159
+ "boolean",
173
160
  "null",
174
161
  "undefined"
175
162
  ]
176
163
  }
177
164
  },
178
165
  {
179
- "name": "placeholder",
180
- "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.",
166
+ "name": "required",
167
+ "description": "Specifies that the user must fill in a value.",
181
168
  "value": {
182
169
  "type": [
183
- "string",
170
+ "boolean",
184
171
  "null",
185
172
  "undefined"
186
173
  ]
187
174
  }
188
175
  },
189
176
  {
190
- "name": "readonly",
191
- "description": "When present, it specifies that the field is read-only.",
177
+ "name": "error-message",
178
+ "description": "Error to show when the field is invalid.",
192
179
  "value": {
193
180
  "type": [
194
- "boolean",
181
+ "string",
195
182
  "null",
196
183
  "undefined"
197
184
  ]
198
185
  }
199
186
  },
200
187
  {
201
- "name": "title",
202
- "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
188
+ "name": "helper-text",
189
+ "description": "String used for the helper text.",
203
190
  "value": {
204
191
  "type": [
205
192
  "string",
@@ -209,30 +196,30 @@
209
196
  }
210
197
  },
211
198
  {
212
- "name": "auto-expand-horizontally",
213
- "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
199
+ "name": "accessible-name",
200
+ "description": "String used to label the component to screen reader users.",
214
201
  "value": {
215
202
  "type": [
216
- "boolean",
203
+ "string",
217
204
  "null",
218
205
  "undefined"
219
206
  ]
220
207
  }
221
208
  },
222
209
  {
223
- "name": "auto-expand-vertically",
224
- "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.",
210
+ "name": "accessible-name-ref",
211
+ "description": "Id of the element used as label of the component to screen reader users.",
225
212
  "value": {
226
213
  "type": [
227
- "boolean",
214
+ "string",
228
215
  "null",
229
216
  "undefined"
230
217
  ]
231
218
  }
232
219
  },
233
220
  {
234
- "name": "auto-open-disabled",
235
- "description": "Set true to prevent the overlay from opening automatically.",
221
+ "name": "clear-button-visible",
222
+ "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.",
236
223
  "value": {
237
224
  "type": [
238
225
  "boolean",
@@ -242,8 +229,8 @@
242
229
  }
243
230
  },
244
231
  {
245
- "name": "item-label-path",
246
- "description": "The item property used for a visual representation of the item.",
232
+ "name": "allowed-char-pattern",
233
+ "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-]\"`",
247
234
  "value": {
248
235
  "type": [
249
236
  "string",
@@ -253,19 +240,19 @@
253
240
  }
254
241
  },
255
242
  {
256
- "name": "item-value-path",
257
- "description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
243
+ "name": "autoselect",
244
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
258
245
  "value": {
259
246
  "type": [
260
- "string",
247
+ "boolean",
261
248
  "null",
262
249
  "undefined"
263
250
  ]
264
251
  }
265
252
  },
266
253
  {
267
- "name": "item-id-path",
268
- "description": "Path for the id of the item, used to detect whether the item is selected.",
254
+ "name": "name",
255
+ "description": "The name of this field.",
269
256
  "value": {
270
257
  "type": [
271
258
  "string",
@@ -275,41 +262,41 @@
275
262
  }
276
263
  },
277
264
  {
278
- "name": "keep-filter",
279
- "description": "When true, filter string isn't cleared after selecting an item.",
265
+ "name": "placeholder",
266
+ "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.",
280
267
  "value": {
281
268
  "type": [
282
- "boolean",
269
+ "string",
283
270
  "null",
284
271
  "undefined"
285
272
  ]
286
273
  }
287
274
  },
288
275
  {
289
- "name": "loading",
290
- "description": "True when loading items from the data provider, false otherwise.",
276
+ "name": "title",
277
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
291
278
  "value": {
292
279
  "type": [
293
- "boolean",
280
+ "string",
294
281
  "null",
295
282
  "undefined"
296
283
  ]
297
284
  }
298
285
  },
299
286
  {
300
- "name": "overlay-class",
301
- "description": "A space-delimited list of CSS class names to set on the overlay element.",
287
+ "name": "auto-expand-horizontally",
288
+ "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
302
289
  "value": {
303
290
  "type": [
304
- "string",
291
+ "boolean",
305
292
  "null",
306
293
  "undefined"
307
294
  ]
308
295
  }
309
296
  },
310
297
  {
311
- "name": "opened",
312
- "description": "True if the dropdown is open, false otherwise.",
298
+ "name": "auto-expand-vertically",
299
+ "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.",
313
300
  "value": {
314
301
  "type": [
315
302
  "boolean",
@@ -319,30 +306,30 @@
319
306
  }
320
307
  },
321
308
  {
322
- "name": "size",
323
- "description": "Total number of items.",
309
+ "name": "item-id-path",
310
+ "description": "Path for the id of the item, used to detect whether the item is selected.",
324
311
  "value": {
325
312
  "type": [
326
- "number",
313
+ "string",
327
314
  "null",
328
315
  "undefined"
329
316
  ]
330
317
  }
331
318
  },
332
319
  {
333
- "name": "page-size",
334
- "description": "Number of items fetched at a time from the data provider.",
320
+ "name": "keep-filter",
321
+ "description": "When true, filter string isn't cleared after selecting an item.",
335
322
  "value": {
336
323
  "type": [
337
- "number",
324
+ "boolean",
338
325
  "null",
339
326
  "undefined"
340
327
  ]
341
328
  }
342
329
  },
343
330
  {
344
- "name": "allow-custom-value",
345
- "description": "When true, the user can input a value that is not present in the items list.",
331
+ "name": "loading",
332
+ "description": "True when loading items from the data provider, false otherwise.",
346
333
  "value": {
347
334
  "type": [
348
335
  "boolean",
@@ -352,11 +339,11 @@
352
339
  }
353
340
  },
354
341
  {
355
- "name": "filter",
356
- "description": "Filtering string the user has typed into the input field.",
342
+ "name": "allow-custom-value",
343
+ "description": "When true, the user can input a value that is not present in the items list.",
357
344
  "value": {
358
345
  "type": [
359
- "string",
346
+ "boolean",
360
347
  "null",
361
348
  "undefined"
362
349
  ]
@@ -388,41 +375,37 @@
388
375
  "js": {
389
376
  "properties": [
390
377
  {
391
- "name": "disabled",
392
- "description": "If true, the user cannot interact with this element.",
378
+ "name": "pageSize",
379
+ "description": "Number of items fetched at a time from the dataprovider.",
393
380
  "value": {
394
381
  "type": [
395
- "boolean",
396
- "null",
397
- "undefined"
382
+ "number"
398
383
  ]
399
384
  }
400
385
  },
401
386
  {
402
- "name": "autofocus",
403
- "description": "Specify that this control should have input focus when the page loads.",
387
+ "name": "size",
388
+ "description": "Total number of items.",
404
389
  "value": {
405
390
  "type": [
406
- "boolean",
407
- "null",
391
+ "number",
408
392
  "undefined"
409
393
  ]
410
394
  }
411
395
  },
412
396
  {
413
- "name": "label",
414
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
397
+ "name": "dataProvider",
398
+ "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
399
  "value": {
416
400
  "type": [
417
- "string",
418
- "null",
401
+ "ComboBoxDataProvider",
419
402
  "undefined"
420
403
  ]
421
404
  }
422
405
  },
423
406
  {
424
- "name": "invalid",
425
- "description": "Set to true when the field is invalid.",
407
+ "name": "disabled",
408
+ "description": "If true, the user cannot interact with this element.",
426
409
  "value": {
427
410
  "type": [
428
411
  "boolean",
@@ -432,19 +415,17 @@
432
415
  }
433
416
  },
434
417
  {
435
- "name": "manualValidation",
436
- "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.",
418
+ "name": "opened",
419
+ "description": "True if the dropdown is open, false otherwise.",
437
420
  "value": {
438
421
  "type": [
439
- "boolean",
440
- "null",
441
- "undefined"
422
+ "boolean"
442
423
  ]
443
424
  }
444
425
  },
445
426
  {
446
- "name": "required",
447
- "description": "Specifies that the user must fill in a value.",
427
+ "name": "autoOpenDisabled",
428
+ "description": "Set true to prevent the overlay from opening automatically.",
448
429
  "value": {
449
430
  "type": [
450
431
  "boolean",
@@ -454,129 +435,121 @@
454
435
  }
455
436
  },
456
437
  {
457
- "name": "errorMessage",
458
- "description": "Error to show when the field is invalid.",
438
+ "name": "readonly",
439
+ "description": "When present, it specifies that the field is read-only.",
459
440
  "value": {
460
441
  "type": [
461
- "string",
442
+ "boolean",
462
443
  "null",
463
444
  "undefined"
464
445
  ]
465
446
  }
466
447
  },
467
448
  {
468
- "name": "helperText",
469
- "description": "String used for the helper text.",
449
+ "name": "items",
450
+ "description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
470
451
  "value": {
471
452
  "type": [
472
- "string",
473
- "null",
453
+ "Array.<ComboBoxItem",
454
+ "string>",
474
455
  "undefined"
475
456
  ]
476
457
  }
477
458
  },
478
459
  {
479
- "name": "accessibleName",
480
- "description": "String used to label the component to screen reader users.",
460
+ "name": "filteredItems",
461
+ "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.",
481
462
  "value": {
482
463
  "type": [
483
- "string",
484
- "null",
464
+ "Array.<ComboBoxItem",
465
+ "string>",
485
466
  "undefined"
486
467
  ]
487
468
  }
488
469
  },
489
470
  {
490
- "name": "accessibleNameRef",
491
- "description": "Id of the element used as label of the component to screen reader users.",
471
+ "name": "filter",
472
+ "description": "Filtering string the user has typed into the input field.",
492
473
  "value": {
493
474
  "type": [
494
- "string",
495
- "null",
496
- "undefined"
475
+ "string"
497
476
  ]
498
477
  }
499
478
  },
500
479
  {
501
- "name": "clearButtonVisible",
502
- "description": "Set to true to display the clear icon which clears the input.",
480
+ "name": "itemLabelGenerator",
481
+ "description": "A function that is used to generate the label for dropdown\nitems based on the item. Receives one argument:\n- `item` The item to generate the label for.",
503
482
  "value": {
504
483
  "type": [
505
- "boolean",
484
+ "Object",
506
485
  "null",
507
486
  "undefined"
508
487
  ]
509
488
  }
510
489
  },
511
490
  {
512
- "name": "allowedCharPattern",
513
- "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-]\"`",
491
+ "name": "itemLabelPath",
492
+ "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
493
  "value": {
515
494
  "type": [
516
- "string",
517
- "null",
518
- "undefined"
495
+ "string"
519
496
  ]
520
497
  }
521
498
  },
522
499
  {
523
- "name": "autoselect",
524
- "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
500
+ "name": "itemValuePath",
501
+ "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
502
  "value": {
526
503
  "type": [
527
- "boolean",
528
- "null",
529
- "undefined"
504
+ "string"
530
505
  ]
531
506
  }
532
507
  },
533
508
  {
534
- "name": "name",
535
- "description": "The name of this field.",
509
+ "name": "i18n",
510
+ "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\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```",
536
511
  "value": {
537
512
  "type": [
538
- "string",
539
- "null",
540
- "undefined"
513
+ "MultiSelectComboBoxI18n"
541
514
  ]
542
515
  }
543
516
  },
544
517
  {
545
- "name": "placeholder",
546
- "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.",
518
+ "name": "autofocus",
519
+ "description": "Specify that this control should have input focus when the page loads.",
547
520
  "value": {
548
521
  "type": [
549
- "string",
522
+ "boolean",
550
523
  "null",
551
524
  "undefined"
552
525
  ]
553
526
  }
554
527
  },
555
528
  {
556
- "name": "readonly",
557
- "description": "When present, it specifies that the field is read-only.",
529
+ "name": "label",
530
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
558
531
  "value": {
559
532
  "type": [
560
- "boolean",
533
+ "string",
561
534
  "null",
562
535
  "undefined"
563
536
  ]
564
537
  }
565
538
  },
566
539
  {
567
- "name": "title",
568
- "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
540
+ "name": "invalid",
541
+ "description": "Set to true when the field is invalid.",
569
542
  "value": {
570
543
  "type": [
571
- "string",
544
+ "boolean",
572
545
  "null",
573
546
  "undefined"
574
547
  ]
575
548
  }
576
549
  },
577
550
  {
578
- "name": "autoExpandHorizontally",
579
- "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
551
+ "name": "manualValidation",
552
+ "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.",
580
553
  "value": {
581
554
  "type": [
582
555
  "boolean",
@@ -586,8 +559,8 @@
586
559
  }
587
560
  },
588
561
  {
589
- "name": "autoExpandVertically",
590
- "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.",
562
+ "name": "required",
563
+ "description": "Specifies that the user must fill in a value.",
591
564
  "value": {
592
565
  "type": [
593
566
  "boolean",
@@ -597,41 +570,41 @@
597
570
  }
598
571
  },
599
572
  {
600
- "name": "autoOpenDisabled",
601
- "description": "Set true to prevent the overlay from opening automatically.",
573
+ "name": "errorMessage",
574
+ "description": "Error to show when the field is invalid.",
602
575
  "value": {
603
576
  "type": [
604
- "boolean",
577
+ "string",
605
578
  "null",
606
579
  "undefined"
607
580
  ]
608
581
  }
609
582
  },
610
583
  {
611
- "name": "items",
612
- "description": "A full set of items to filter the visible options from.\nThe items can be of either `String` or `Object` type.",
584
+ "name": "helperText",
585
+ "description": "String used for the helper text.",
613
586
  "value": {
614
587
  "type": [
615
- "Array",
588
+ "string",
616
589
  "null",
617
590
  "undefined"
618
591
  ]
619
592
  }
620
593
  },
621
594
  {
622
- "name": "itemClassNameGenerator",
623
- "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.",
595
+ "name": "accessibleName",
596
+ "description": "String used to label the component to screen reader users.",
624
597
  "value": {
625
598
  "type": [
626
- "Object",
599
+ "string",
627
600
  "null",
628
601
  "undefined"
629
602
  ]
630
603
  }
631
604
  },
632
605
  {
633
- "name": "itemLabelPath",
634
- "description": "The item property used for a visual representation of the item.",
606
+ "name": "accessibleNameRef",
607
+ "description": "Id of the element used as label of the component to screen reader users.",
635
608
  "value": {
636
609
  "type": [
637
610
  "string",
@@ -641,19 +614,19 @@
641
614
  }
642
615
  },
643
616
  {
644
- "name": "itemValuePath",
645
- "description": "Path for the value of the item. If `items` is an array of objects,\nthis property is used as a string value for the selected item.",
617
+ "name": "clearButtonVisible",
618
+ "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.",
646
619
  "value": {
647
620
  "type": [
648
- "string",
621
+ "boolean",
649
622
  "null",
650
623
  "undefined"
651
624
  ]
652
625
  }
653
626
  },
654
627
  {
655
- "name": "itemIdPath",
656
- "description": "Path for the id of the item, used to detect whether the item is selected.",
628
+ "name": "allowedCharPattern",
629
+ "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-]\"`",
657
630
  "value": {
658
631
  "type": [
659
632
  "string",
@@ -663,39 +636,41 @@
663
636
  }
664
637
  },
665
638
  {
666
- "name": "i18n",
667
- "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```",
639
+ "name": "autoselect",
640
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
668
641
  "value": {
669
642
  "type": [
670
- "MultiSelectComboBoxI18n"
643
+ "boolean",
644
+ "null",
645
+ "undefined"
671
646
  ]
672
647
  }
673
648
  },
674
649
  {
675
- "name": "keepFilter",
676
- "description": "When true, filter string isn't cleared after selecting an item.",
650
+ "name": "name",
651
+ "description": "The name of this field.",
677
652
  "value": {
678
653
  "type": [
679
- "boolean",
654
+ "string",
680
655
  "null",
681
656
  "undefined"
682
657
  ]
683
658
  }
684
659
  },
685
660
  {
686
- "name": "loading",
687
- "description": "True when loading items from the data provider, false otherwise.",
661
+ "name": "placeholder",
662
+ "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.",
688
663
  "value": {
689
664
  "type": [
690
- "boolean",
665
+ "string",
691
666
  "null",
692
667
  "undefined"
693
668
  ]
694
669
  }
695
670
  },
696
671
  {
697
- "name": "overlayClass",
698
- "description": "A space-delimited list of CSS class names to set on the overlay element.",
672
+ "name": "title",
673
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
699
674
  "value": {
700
675
  "type": [
701
676
  "string",
@@ -705,19 +680,19 @@
705
680
  }
706
681
  },
707
682
  {
708
- "name": "selectedItems",
709
- "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
683
+ "name": "autoExpandHorizontally",
684
+ "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
710
685
  "value": {
711
686
  "type": [
712
- "Array",
687
+ "boolean",
713
688
  "null",
714
689
  "undefined"
715
690
  ]
716
691
  }
717
692
  },
718
693
  {
719
- "name": "opened",
720
- "description": "True if the dropdown is open, false otherwise.",
694
+ "name": "autoExpandVertically",
695
+ "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.",
721
696
  "value": {
722
697
  "type": [
723
698
  "boolean",
@@ -727,41 +702,41 @@
727
702
  }
728
703
  },
729
704
  {
730
- "name": "size",
731
- "description": "Total number of items.",
705
+ "name": "itemClassNameGenerator",
706
+ "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.",
732
707
  "value": {
733
708
  "type": [
734
- "number",
709
+ "Object",
735
710
  "null",
736
711
  "undefined"
737
712
  ]
738
713
  }
739
714
  },
740
715
  {
741
- "name": "pageSize",
742
- "description": "Number of items fetched at a time from the data provider.",
716
+ "name": "itemIdPath",
717
+ "description": "Path for the id of the item, used to detect whether the item is selected.",
743
718
  "value": {
744
719
  "type": [
745
- "number",
720
+ "string",
746
721
  "null",
747
722
  "undefined"
748
723
  ]
749
724
  }
750
725
  },
751
726
  {
752
- "name": "dataProvider",
753
- "description": "Function that provides items lazily. Receives two arguments:\n\n- `params` - Object with the following properties:\n - `params.page` Requested page index\n - `params.pageSize` Current page size\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.",
727
+ "name": "keepFilter",
728
+ "description": "When true, filter string isn't cleared after selecting an item.",
754
729
  "value": {
755
730
  "type": [
756
- "Object",
731
+ "boolean",
757
732
  "null",
758
733
  "undefined"
759
734
  ]
760
735
  }
761
736
  },
762
737
  {
763
- "name": "allowCustomValue",
764
- "description": "When true, the user can input a value that is not present in the items list.",
738
+ "name": "loading",
739
+ "description": "True when loading items from the data provider, false otherwise.",
765
740
  "value": {
766
741
  "type": [
767
742
  "boolean",
@@ -771,33 +746,33 @@
771
746
  }
772
747
  },
773
748
  {
774
- "name": "renderer",
775
- "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.",
749
+ "name": "selectedItems",
750
+ "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
776
751
  "value": {
777
752
  "type": [
778
- "Function",
753
+ "Array",
779
754
  "null",
780
755
  "undefined"
781
756
  ]
782
757
  }
783
758
  },
784
759
  {
785
- "name": "filter",
786
- "description": "Filtering string the user has typed into the input field.",
760
+ "name": "allowCustomValue",
761
+ "description": "When true, the user can input a value that is not present in the items list.",
787
762
  "value": {
788
763
  "type": [
789
- "string",
764
+ "boolean",
790
765
  "null",
791
766
  "undefined"
792
767
  ]
793
768
  }
794
769
  },
795
770
  {
796
- "name": "filteredItems",
797
- "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.",
771
+ "name": "renderer",
772
+ "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
773
  "value": {
799
774
  "type": [
800
- "Array",
775
+ "Function",
801
776
  "null",
802
777
  "undefined"
803
778
  ]
@@ -832,14 +807,6 @@
832
807
  "name": "custom-value-set",
833
808
  "description": "Fired when the user sets a custom value."
834
809
  },
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
810
  {
844
811
  "name": "opened-changed",
845
812
  "description": "Fired when the `opened` property changes."
@@ -847,6 +814,14 @@
847
814
  {
848
815
  "name": "filter-changed",
849
816
  "description": "Fired when the `filter` property changes."
817
+ },
818
+ {
819
+ "name": "invalid-changed",
820
+ "description": "Fired when the `invalid` property changes."
821
+ },
822
+ {
823
+ "name": "selected-items-changed",
824
+ "description": "Fired when the `selectedItems` property changes."
850
825
  }
851
826
  ]
852
827
  }