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