@vaadin/multi-select-combo-box 25.0.0-alpha2 → 25.0.0-alpha20

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 (27) hide show
  1. package/package.json +15 -16
  2. package/src/{vaadin-multi-select-combo-box-styles.d.ts → styles/vaadin-multi-select-combo-box-base-styles.d.ts} +1 -3
  3. package/src/styles/vaadin-multi-select-combo-box-base-styles.js +58 -0
  4. package/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js +126 -0
  5. package/src/styles/vaadin-multi-select-combo-box-overlay-base-styles.js +19 -0
  6. package/src/styles/vaadin-multi-select-combo-box-scroller-base-styles.js +8 -0
  7. package/src/vaadin-multi-select-combo-box-chip.js +4 -3
  8. package/src/vaadin-multi-select-combo-box-container.js +2 -0
  9. package/src/vaadin-multi-select-combo-box-item.js +7 -11
  10. package/src/vaadin-multi-select-combo-box-mixin.d.ts +18 -89
  11. package/src/vaadin-multi-select-combo-box-mixin.js +426 -307
  12. package/src/vaadin-multi-select-combo-box-overlay.js +5 -19
  13. package/src/vaadin-multi-select-combo-box-scroller.js +3 -24
  14. package/src/vaadin-multi-select-combo-box.d.ts +13 -7
  15. package/src/vaadin-multi-select-combo-box.js +42 -90
  16. package/vaadin-multi-select-combo-box.js +1 -1
  17. package/web-types.json +200 -236
  18. package/web-types.lit.json +76 -83
  19. package/src/vaadin-multi-select-combo-box-internal-mixin.js +0 -449
  20. package/src/vaadin-multi-select-combo-box-internal.js +0 -56
  21. package/src/vaadin-multi-select-combo-box-styles.js +0 -74
  22. package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.d.ts +0 -10
  23. package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js +0 -107
  24. package/theme/lumo/vaadin-multi-select-combo-box-styles.d.ts +0 -10
  25. package/theme/lumo/vaadin-multi-select-combo-box-styles.js +0 -118
  26. package/theme/lumo/vaadin-multi-select-combo-box.d.ts +0 -8
  27. 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-alpha2",
4
+ "version": "25.0.0-alpha20",
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-chip-min-width` | Min width of the chip | `50px`\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,96 +435,88 @@
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": "itemLabelPath",
481
+ "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.",
503
482
  "value": {
504
483
  "type": [
505
- "boolean",
506
- "null",
507
- "undefined"
484
+ "string"
508
485
  ]
509
486
  }
510
487
  },
511
488
  {
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-]\"`",
489
+ "name": "itemValuePath",
490
+ "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.",
514
491
  "value": {
515
492
  "type": [
516
- "string",
517
- "null",
518
- "undefined"
493
+ "string"
519
494
  ]
520
495
  }
521
496
  },
522
497
  {
523
- "name": "autoselect",
524
- "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
498
+ "name": "i18n",
499
+ "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```",
525
500
  "value": {
526
501
  "type": [
527
- "boolean",
528
- "null",
529
- "undefined"
502
+ "MultiSelectComboBoxI18n"
530
503
  ]
531
504
  }
532
505
  },
533
506
  {
534
- "name": "name",
535
- "description": "The name of this field.",
507
+ "name": "autofocus",
508
+ "description": "Specify that this control should have input focus when the page loads.",
536
509
  "value": {
537
510
  "type": [
538
- "string",
511
+ "boolean",
539
512
  "null",
540
513
  "undefined"
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": "label",
519
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
547
520
  "value": {
548
521
  "type": [
549
522
  "string",
@@ -553,8 +526,8 @@
553
526
  }
554
527
  },
555
528
  {
556
- "name": "readonly",
557
- "description": "When present, it specifies that the field is read-only.",
529
+ "name": "invalid",
530
+ "description": "Set to true when the field is invalid.",
558
531
  "value": {
559
532
  "type": [
560
533
  "boolean",
@@ -564,19 +537,8 @@
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.",
569
- "value": {
570
- "type": [
571
- "string",
572
- "null",
573
- "undefined"
574
- ]
575
- }
576
- },
577
- {
578
- "name": "autoExpandHorizontally",
579
- "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
540
+ "name": "manualValidation",
541
+ "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
542
  "value": {
581
543
  "type": [
582
544
  "boolean",
@@ -586,8 +548,8 @@
586
548
  }
587
549
  },
588
550
  {
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.",
551
+ "name": "required",
552
+ "description": "Specifies that the user must fill in a value.",
591
553
  "value": {
592
554
  "type": [
593
555
  "boolean",
@@ -597,41 +559,41 @@
597
559
  }
598
560
  },
599
561
  {
600
- "name": "autoOpenDisabled",
601
- "description": "Set true to prevent the overlay from opening automatically.",
562
+ "name": "errorMessage",
563
+ "description": "Error to show when the field is invalid.",
602
564
  "value": {
603
565
  "type": [
604
- "boolean",
566
+ "string",
605
567
  "null",
606
568
  "undefined"
607
569
  ]
608
570
  }
609
571
  },
610
572
  {
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.",
573
+ "name": "helperText",
574
+ "description": "String used for the helper text.",
613
575
  "value": {
614
576
  "type": [
615
- "Array",
577
+ "string",
616
578
  "null",
617
579
  "undefined"
618
580
  ]
619
581
  }
620
582
  },
621
583
  {
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.",
584
+ "name": "accessibleName",
585
+ "description": "String used to label the component to screen reader users.",
624
586
  "value": {
625
587
  "type": [
626
- "Object",
588
+ "string",
627
589
  "null",
628
590
  "undefined"
629
591
  ]
630
592
  }
631
593
  },
632
594
  {
633
- "name": "itemLabelPath",
634
- "description": "The item property used for a visual representation of the item.",
595
+ "name": "accessibleNameRef",
596
+ "description": "Id of the element used as label of the component to screen reader users.",
635
597
  "value": {
636
598
  "type": [
637
599
  "string",
@@ -641,19 +603,19 @@
641
603
  }
642
604
  },
643
605
  {
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.",
606
+ "name": "clearButtonVisible",
607
+ "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
608
  "value": {
647
609
  "type": [
648
- "string",
610
+ "boolean",
649
611
  "null",
650
612
  "undefined"
651
613
  ]
652
614
  }
653
615
  },
654
616
  {
655
- "name": "itemIdPath",
656
- "description": "Path for the id of the item, used to detect whether the item is selected.",
617
+ "name": "allowedCharPattern",
618
+ "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
619
  "value": {
658
620
  "type": [
659
621
  "string",
@@ -663,39 +625,41 @@
663
625
  }
664
626
  },
665
627
  {
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```",
628
+ "name": "autoselect",
629
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
668
630
  "value": {
669
631
  "type": [
670
- "MultiSelectComboBoxI18n"
632
+ "boolean",
633
+ "null",
634
+ "undefined"
671
635
  ]
672
636
  }
673
637
  },
674
638
  {
675
- "name": "keepFilter",
676
- "description": "When true, filter string isn't cleared after selecting an item.",
639
+ "name": "name",
640
+ "description": "The name of this field.",
677
641
  "value": {
678
642
  "type": [
679
- "boolean",
643
+ "string",
680
644
  "null",
681
645
  "undefined"
682
646
  ]
683
647
  }
684
648
  },
685
649
  {
686
- "name": "loading",
687
- "description": "True when loading items from the data provider, false otherwise.",
650
+ "name": "placeholder",
651
+ "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
652
  "value": {
689
653
  "type": [
690
- "boolean",
654
+ "string",
691
655
  "null",
692
656
  "undefined"
693
657
  ]
694
658
  }
695
659
  },
696
660
  {
697
- "name": "overlayClass",
698
- "description": "A space-delimited list of CSS class names to set on the overlay element.",
661
+ "name": "title",
662
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
699
663
  "value": {
700
664
  "type": [
701
665
  "string",
@@ -705,19 +669,19 @@
705
669
  }
706
670
  },
707
671
  {
708
- "name": "selectedItems",
709
- "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
672
+ "name": "autoExpandHorizontally",
673
+ "description": "Set to true to auto expand horizontally, causing input field to\ngrow until max width is reached.",
710
674
  "value": {
711
675
  "type": [
712
- "Array",
676
+ "boolean",
713
677
  "null",
714
678
  "undefined"
715
679
  ]
716
680
  }
717
681
  },
718
682
  {
719
- "name": "opened",
720
- "description": "True if the dropdown is open, false otherwise.",
683
+ "name": "autoExpandVertically",
684
+ "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
685
  "value": {
722
686
  "type": [
723
687
  "boolean",
@@ -727,41 +691,41 @@
727
691
  }
728
692
  },
729
693
  {
730
- "name": "size",
731
- "description": "Total number of items.",
694
+ "name": "itemClassNameGenerator",
695
+ "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
696
  "value": {
733
697
  "type": [
734
- "number",
698
+ "Object",
735
699
  "null",
736
700
  "undefined"
737
701
  ]
738
702
  }
739
703
  },
740
704
  {
741
- "name": "pageSize",
742
- "description": "Number of items fetched at a time from the data provider.",
705
+ "name": "itemIdPath",
706
+ "description": "Path for the id of the item, used to detect whether the item is selected.",
743
707
  "value": {
744
708
  "type": [
745
- "number",
709
+ "string",
746
710
  "null",
747
711
  "undefined"
748
712
  ]
749
713
  }
750
714
  },
751
715
  {
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.",
716
+ "name": "keepFilter",
717
+ "description": "When true, filter string isn't cleared after selecting an item.",
754
718
  "value": {
755
719
  "type": [
756
- "Object",
720
+ "boolean",
757
721
  "null",
758
722
  "undefined"
759
723
  ]
760
724
  }
761
725
  },
762
726
  {
763
- "name": "allowCustomValue",
764
- "description": "When true, the user can input a value that is not present in the items list.",
727
+ "name": "loading",
728
+ "description": "True when loading items from the data provider, false otherwise.",
765
729
  "value": {
766
730
  "type": [
767
731
  "boolean",
@@ -771,33 +735,33 @@
771
735
  }
772
736
  },
773
737
  {
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.",
738
+ "name": "selectedItems",
739
+ "description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
776
740
  "value": {
777
741
  "type": [
778
- "Function",
742
+ "Array",
779
743
  "null",
780
744
  "undefined"
781
745
  ]
782
746
  }
783
747
  },
784
748
  {
785
- "name": "filter",
786
- "description": "Filtering string the user has typed into the input field.",
749
+ "name": "allowCustomValue",
750
+ "description": "When true, the user can input a value that is not present in the items list.",
787
751
  "value": {
788
752
  "type": [
789
- "string",
753
+ "boolean",
790
754
  "null",
791
755
  "undefined"
792
756
  ]
793
757
  }
794
758
  },
795
759
  {
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.",
760
+ "name": "renderer",
761
+ "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
762
  "value": {
799
763
  "type": [
800
- "Array",
764
+ "Function",
801
765
  "null",
802
766
  "undefined"
803
767
  ]
@@ -832,14 +796,6 @@
832
796
  "name": "custom-value-set",
833
797
  "description": "Fired when the user sets a custom value."
834
798
  },
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
799
  {
844
800
  "name": "opened-changed",
845
801
  "description": "Fired when the `opened` property changes."
@@ -847,6 +803,14 @@
847
803
  {
848
804
  "name": "filter-changed",
849
805
  "description": "Fired when the `filter` property changes."
806
+ },
807
+ {
808
+ "name": "invalid-changed",
809
+ "description": "Fired when the `invalid` property changes."
810
+ },
811
+ {
812
+ "name": "selected-items-changed",
813
+ "description": "Fired when the `selectedItems` property changes."
850
814
  }
851
815
  ]
852
816
  }