@vaadin/multi-select-combo-box 23.3.21 → 23.3.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +10 -10
- package/web-types.json +14 -80
- package/web-types.lit.json +6 -27
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/multi-select-combo-box",
|
|
3
|
-
"version": "23.3.
|
|
3
|
+
"version": "23.3.23",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/combo-box": "~23.3.
|
|
41
|
-
"@vaadin/component-base": "~23.3.
|
|
42
|
-
"@vaadin/field-base": "~23.3.
|
|
43
|
-
"@vaadin/input-container": "~23.3.
|
|
44
|
-
"@vaadin/lit-renderer": "~23.3.
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "~23.3.
|
|
46
|
-
"@vaadin/vaadin-material-styles": "~23.3.
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "~23.3.
|
|
40
|
+
"@vaadin/combo-box": "~23.3.23",
|
|
41
|
+
"@vaadin/component-base": "~23.3.23",
|
|
42
|
+
"@vaadin/field-base": "~23.3.23",
|
|
43
|
+
"@vaadin/input-container": "~23.3.23",
|
|
44
|
+
"@vaadin/lit-renderer": "~23.3.23",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "~23.3.23",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "~23.3.23",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "~23.3.23"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "0027e59e0405f668a089c10e75bb488da9a665b8"
|
|
60
60
|
}
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "23.3.23",
|
|
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
|
|
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 chips for selected items\n`chip` | Chip shown for every selected item\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`overflow` | The chip shown when component width is not enough to fit all chips\n`overflow-one` | Set on the overflow chip when only one chip does not fit\n`overflow-two` | Set on the overflow chip when two chips do not fit\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/custom-theme/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
91
|
+
"name": "value",
|
|
92
|
+
"description": "The value of the field.",
|
|
93
93
|
"value": {
|
|
94
94
|
"type": [
|
|
95
95
|
"string",
|
|
@@ -99,8 +99,8 @@
|
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
|
-
"name": "
|
|
103
|
-
"description": "
|
|
102
|
+
"name": "allowed-char-pattern",
|
|
103
|
+
"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-]\"`",
|
|
104
104
|
"value": {
|
|
105
105
|
"type": [
|
|
106
106
|
"string",
|
|
@@ -110,11 +110,11 @@
|
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
|
-
"name": "
|
|
114
|
-
"description": "
|
|
113
|
+
"name": "autoselect",
|
|
114
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
115
115
|
"value": {
|
|
116
116
|
"type": [
|
|
117
|
-
"
|
|
117
|
+
"boolean",
|
|
118
118
|
"null",
|
|
119
119
|
"undefined"
|
|
120
120
|
]
|
|
@@ -131,28 +131,6 @@
|
|
|
131
131
|
]
|
|
132
132
|
}
|
|
133
133
|
},
|
|
134
|
-
{
|
|
135
|
-
"name": "allowed-char-pattern",
|
|
136
|
-
"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-]\"`",
|
|
137
|
-
"value": {
|
|
138
|
-
"type": [
|
|
139
|
-
"string",
|
|
140
|
-
"null",
|
|
141
|
-
"undefined"
|
|
142
|
-
]
|
|
143
|
-
}
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
"name": "autoselect",
|
|
147
|
-
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
148
|
-
"value": {
|
|
149
|
-
"type": [
|
|
150
|
-
"boolean",
|
|
151
|
-
"null",
|
|
152
|
-
"undefined"
|
|
153
|
-
]
|
|
154
|
-
}
|
|
155
|
-
},
|
|
156
134
|
{
|
|
157
135
|
"name": "name",
|
|
158
136
|
"description": "The name of this field.",
|
|
@@ -252,17 +230,6 @@
|
|
|
252
230
|
]
|
|
253
231
|
}
|
|
254
232
|
},
|
|
255
|
-
{
|
|
256
|
-
"name": "overlay-class",
|
|
257
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.",
|
|
258
|
-
"value": {
|
|
259
|
-
"type": [
|
|
260
|
-
"string",
|
|
261
|
-
"null",
|
|
262
|
-
"undefined"
|
|
263
|
-
]
|
|
264
|
-
}
|
|
265
|
-
},
|
|
266
233
|
{
|
|
267
234
|
"name": "opened",
|
|
268
235
|
"description": "True if the dropdown is open, false otherwise.",
|
|
@@ -410,8 +377,8 @@
|
|
|
410
377
|
}
|
|
411
378
|
},
|
|
412
379
|
{
|
|
413
|
-
"name": "
|
|
414
|
-
"description": "
|
|
380
|
+
"name": "allowedCharPattern",
|
|
381
|
+
"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-]\"`",
|
|
415
382
|
"value": {
|
|
416
383
|
"type": [
|
|
417
384
|
"string",
|
|
@@ -421,11 +388,11 @@
|
|
|
421
388
|
}
|
|
422
389
|
},
|
|
423
390
|
{
|
|
424
|
-
"name": "
|
|
425
|
-
"description": "
|
|
391
|
+
"name": "autoselect",
|
|
392
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
426
393
|
"value": {
|
|
427
394
|
"type": [
|
|
428
|
-
"
|
|
395
|
+
"boolean",
|
|
429
396
|
"null",
|
|
430
397
|
"undefined"
|
|
431
398
|
]
|
|
@@ -442,28 +409,6 @@
|
|
|
442
409
|
]
|
|
443
410
|
}
|
|
444
411
|
},
|
|
445
|
-
{
|
|
446
|
-
"name": "allowedCharPattern",
|
|
447
|
-
"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-]\"`",
|
|
448
|
-
"value": {
|
|
449
|
-
"type": [
|
|
450
|
-
"string",
|
|
451
|
-
"null",
|
|
452
|
-
"undefined"
|
|
453
|
-
]
|
|
454
|
-
}
|
|
455
|
-
},
|
|
456
|
-
{
|
|
457
|
-
"name": "autoselect",
|
|
458
|
-
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
459
|
-
"value": {
|
|
460
|
-
"type": [
|
|
461
|
-
"boolean",
|
|
462
|
-
"null",
|
|
463
|
-
"undefined"
|
|
464
|
-
]
|
|
465
|
-
}
|
|
466
|
-
},
|
|
467
412
|
{
|
|
468
413
|
"name": "name",
|
|
469
414
|
"description": "The name of this field.",
|
|
@@ -583,17 +528,6 @@
|
|
|
583
528
|
]
|
|
584
529
|
}
|
|
585
530
|
},
|
|
586
|
-
{
|
|
587
|
-
"name": "overlayClass",
|
|
588
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.",
|
|
589
|
-
"value": {
|
|
590
|
-
"type": [
|
|
591
|
-
"string",
|
|
592
|
-
"null",
|
|
593
|
-
"undefined"
|
|
594
|
-
]
|
|
595
|
-
}
|
|
596
|
-
},
|
|
597
531
|
{
|
|
598
532
|
"name": "selectedItems",
|
|
599
533
|
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|
package/web-types.lit.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": "
|
|
4
|
+
"version": "23.3.23",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-multi-select-combo-box",
|
|
19
|
-
"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
|
|
19
|
+
"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 chips for selected items\n`chip` | Chip shown for every selected item\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`overflow` | The chip shown when component width is not enough to fit all chips\n`overflow-one` | Set on the overflow chip when only one chip does not fit\n`overflow-two` | Set on the overflow chip when two chips do not fit\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/custom-theme/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -48,15 +48,15 @@
|
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"name": "?
|
|
52
|
-
"description": "
|
|
51
|
+
"name": "?autoselect",
|
|
52
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "?
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "?clearButtonVisible",
|
|
59
|
+
"description": "Set to true to display the clear icon which clears the input.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
@@ -117,20 +117,6 @@
|
|
|
117
117
|
"kind": "expression"
|
|
118
118
|
}
|
|
119
119
|
},
|
|
120
|
-
{
|
|
121
|
-
"name": ".accessibleName",
|
|
122
|
-
"description": "String used to label the component to screen reader users.",
|
|
123
|
-
"value": {
|
|
124
|
-
"kind": "expression"
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"name": ".accessibleNameRef",
|
|
129
|
-
"description": "Id of the element used as label of the component to screen reader users.",
|
|
130
|
-
"value": {
|
|
131
|
-
"kind": "expression"
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
120
|
{
|
|
135
121
|
"name": ".allowedCharPattern",
|
|
136
122
|
"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-]\"`",
|
|
@@ -194,13 +180,6 @@
|
|
|
194
180
|
"kind": "expression"
|
|
195
181
|
}
|
|
196
182
|
},
|
|
197
|
-
{
|
|
198
|
-
"name": ".overlayClass",
|
|
199
|
-
"description": "A space-delimited list of CSS class names to set on the overlay element.",
|
|
200
|
-
"value": {
|
|
201
|
-
"kind": "expression"
|
|
202
|
-
}
|
|
203
|
-
},
|
|
204
183
|
{
|
|
205
184
|
"name": ".selectedItems",
|
|
206
185
|
"description": "The list of selected items.\nNote: modifying the selected items creates a new array each time.",
|