@vaadin/multi-select-combo-box 25.2.7 → 25.3.0-alpha10
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/custom-elements.json +95 -36
- package/package.json +15 -15
- package/src/vaadin-multi-select-combo-box-chip.js +1 -0
- package/src/vaadin-multi-select-combo-box-item.js +4 -1
- package/src/vaadin-multi-select-combo-box-overlay.js +1 -0
- package/src/vaadin-multi-select-combo-box-scroller.js +3 -1
- package/src/vaadin-multi-select-combo-box.js +1 -0
- package/web-types.json +24 -8
- package/web-types.lit.json +10 -3
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
"description": "",
|
|
27
27
|
"name": "MultiSelectComboBoxMixin",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleDescriptionRef",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
37
|
+
"attribute": "accessible-description-ref",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
29
43
|
{
|
|
30
44
|
"kind": "field",
|
|
31
45
|
"name": "accessibleName",
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
"type": {
|
|
34
48
|
"text": "string"
|
|
35
49
|
},
|
|
36
|
-
"description": "String used to label the component
|
|
50
|
+
"description": "String used to label the component for screen reader users.",
|
|
37
51
|
"attribute": "accessible-name",
|
|
38
52
|
"inheritedFrom": {
|
|
39
53
|
"name": "FieldMixin",
|
|
@@ -47,7 +61,7 @@
|
|
|
47
61
|
"type": {
|
|
48
62
|
"text": "string"
|
|
49
63
|
},
|
|
50
|
-
"description": "
|
|
64
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
51
65
|
"attribute": "accessible-name-ref",
|
|
52
66
|
"inheritedFrom": {
|
|
53
67
|
"name": "FieldMixin",
|
|
@@ -655,12 +669,24 @@
|
|
|
655
669
|
}
|
|
656
670
|
],
|
|
657
671
|
"attributes": [
|
|
672
|
+
{
|
|
673
|
+
"name": "accessible-description-ref",
|
|
674
|
+
"type": {
|
|
675
|
+
"text": "string"
|
|
676
|
+
},
|
|
677
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
678
|
+
"fieldName": "accessibleDescriptionRef",
|
|
679
|
+
"inheritedFrom": {
|
|
680
|
+
"name": "FieldMixin",
|
|
681
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
682
|
+
}
|
|
683
|
+
},
|
|
658
684
|
{
|
|
659
685
|
"name": "accessible-name",
|
|
660
686
|
"type": {
|
|
661
687
|
"text": "string"
|
|
662
688
|
},
|
|
663
|
-
"description": "String used to label the component
|
|
689
|
+
"description": "String used to label the component for screen reader users.",
|
|
664
690
|
"fieldName": "accessibleName",
|
|
665
691
|
"inheritedFrom": {
|
|
666
692
|
"name": "FieldMixin",
|
|
@@ -672,7 +698,7 @@
|
|
|
672
698
|
"type": {
|
|
673
699
|
"text": "string"
|
|
674
700
|
},
|
|
675
|
-
"description": "
|
|
701
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
676
702
|
"fieldName": "accessibleNameRef",
|
|
677
703
|
"inheritedFrom": {
|
|
678
704
|
"name": "FieldMixin",
|
|
@@ -1113,6 +1139,20 @@
|
|
|
1113
1139
|
"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\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.",
|
|
1114
1140
|
"name": "MultiSelectComboBox",
|
|
1115
1141
|
"members": [
|
|
1142
|
+
{
|
|
1143
|
+
"kind": "field",
|
|
1144
|
+
"name": "accessibleDescriptionRef",
|
|
1145
|
+
"privacy": "public",
|
|
1146
|
+
"type": {
|
|
1147
|
+
"text": "string"
|
|
1148
|
+
},
|
|
1149
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
1150
|
+
"attribute": "accessible-description-ref",
|
|
1151
|
+
"inheritedFrom": {
|
|
1152
|
+
"name": "FieldMixin",
|
|
1153
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1154
|
+
}
|
|
1155
|
+
},
|
|
1116
1156
|
{
|
|
1117
1157
|
"kind": "field",
|
|
1118
1158
|
"name": "accessibleName",
|
|
@@ -1120,7 +1160,7 @@
|
|
|
1120
1160
|
"type": {
|
|
1121
1161
|
"text": "string"
|
|
1122
1162
|
},
|
|
1123
|
-
"description": "String used to label the component
|
|
1163
|
+
"description": "String used to label the component for screen reader users.",
|
|
1124
1164
|
"attribute": "accessible-name",
|
|
1125
1165
|
"inheritedFrom": {
|
|
1126
1166
|
"name": "FieldMixin",
|
|
@@ -1134,7 +1174,7 @@
|
|
|
1134
1174
|
"type": {
|
|
1135
1175
|
"text": "string"
|
|
1136
1176
|
},
|
|
1137
|
-
"description": "
|
|
1177
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1138
1178
|
"attribute": "accessible-name-ref",
|
|
1139
1179
|
"inheritedFrom": {
|
|
1140
1180
|
"name": "FieldMixin",
|
|
@@ -1806,41 +1846,25 @@
|
|
|
1806
1846
|
"name": "validated"
|
|
1807
1847
|
}
|
|
1808
1848
|
],
|
|
1809
|
-
"
|
|
1810
|
-
{
|
|
1811
|
-
"name": "MultiSelectComboBoxMixin",
|
|
1812
|
-
"module": "src/vaadin-multi-select-combo-box-mixin.js"
|
|
1813
|
-
},
|
|
1814
|
-
{
|
|
1815
|
-
"name": "ThemableMixin",
|
|
1816
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1817
|
-
},
|
|
1818
|
-
{
|
|
1819
|
-
"name": "ElementMixin",
|
|
1820
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1821
|
-
},
|
|
1849
|
+
"attributes": [
|
|
1822
1850
|
{
|
|
1823
|
-
"name": "
|
|
1824
|
-
"
|
|
1851
|
+
"name": "accessible-description-ref",
|
|
1852
|
+
"type": {
|
|
1853
|
+
"text": "string"
|
|
1854
|
+
},
|
|
1855
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
1856
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1857
|
+
"inheritedFrom": {
|
|
1858
|
+
"name": "FieldMixin",
|
|
1859
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1860
|
+
}
|
|
1825
1861
|
},
|
|
1826
|
-
{
|
|
1827
|
-
"name": "LumoInjectionMixin",
|
|
1828
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1829
|
-
}
|
|
1830
|
-
],
|
|
1831
|
-
"superclass": {
|
|
1832
|
-
"name": "LitElement",
|
|
1833
|
-
"package": "lit"
|
|
1834
|
-
},
|
|
1835
|
-
"tagName": "vaadin-multi-select-combo-box",
|
|
1836
|
-
"customElement": true,
|
|
1837
|
-
"attributes": [
|
|
1838
1862
|
{
|
|
1839
1863
|
"name": "accessible-name",
|
|
1840
1864
|
"type": {
|
|
1841
1865
|
"text": "string"
|
|
1842
1866
|
},
|
|
1843
|
-
"description": "String used to label the component
|
|
1867
|
+
"description": "String used to label the component for screen reader users.",
|
|
1844
1868
|
"fieldName": "accessibleName",
|
|
1845
1869
|
"inheritedFrom": {
|
|
1846
1870
|
"name": "FieldMixin",
|
|
@@ -1852,7 +1876,7 @@
|
|
|
1852
1876
|
"type": {
|
|
1853
1877
|
"text": "string"
|
|
1854
1878
|
},
|
|
1855
|
-
"description": "
|
|
1879
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1856
1880
|
"fieldName": "accessibleNameRef",
|
|
1857
1881
|
"inheritedFrom": {
|
|
1858
1882
|
"name": "FieldMixin",
|
|
@@ -2255,6 +2279,13 @@
|
|
|
2255
2279
|
"package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
|
|
2256
2280
|
}
|
|
2257
2281
|
},
|
|
2282
|
+
{
|
|
2283
|
+
"type": {
|
|
2284
|
+
"text": "string"
|
|
2285
|
+
},
|
|
2286
|
+
"description": "The theme variants to apply to the component.",
|
|
2287
|
+
"name": "theme"
|
|
2288
|
+
},
|
|
2258
2289
|
{
|
|
2259
2290
|
"name": "title",
|
|
2260
2291
|
"type": {
|
|
@@ -2267,7 +2298,35 @@
|
|
|
2267
2298
|
"package": "@vaadin/field-base/src/input-control-mixin.js"
|
|
2268
2299
|
}
|
|
2269
2300
|
}
|
|
2270
|
-
]
|
|
2301
|
+
],
|
|
2302
|
+
"mixins": [
|
|
2303
|
+
{
|
|
2304
|
+
"name": "MultiSelectComboBoxMixin",
|
|
2305
|
+
"module": "src/vaadin-multi-select-combo-box-mixin.js"
|
|
2306
|
+
},
|
|
2307
|
+
{
|
|
2308
|
+
"name": "ThemableMixin",
|
|
2309
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
2310
|
+
},
|
|
2311
|
+
{
|
|
2312
|
+
"name": "ElementMixin",
|
|
2313
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
2314
|
+
},
|
|
2315
|
+
{
|
|
2316
|
+
"name": "PolylitMixin",
|
|
2317
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
2318
|
+
},
|
|
2319
|
+
{
|
|
2320
|
+
"name": "LumoInjectionMixin",
|
|
2321
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
2322
|
+
}
|
|
2323
|
+
],
|
|
2324
|
+
"superclass": {
|
|
2325
|
+
"name": "LitElement",
|
|
2326
|
+
"package": "lit"
|
|
2327
|
+
},
|
|
2328
|
+
"tagName": "vaadin-multi-select-combo-box",
|
|
2329
|
+
"customElement": true
|
|
2271
2330
|
}
|
|
2272
2331
|
],
|
|
2273
2332
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/multi-select-combo-box",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "
|
|
41
|
-
"@vaadin/combo-box": "
|
|
42
|
-
"@vaadin/component-base": "
|
|
43
|
-
"@vaadin/field-base": "
|
|
44
|
-
"@vaadin/input-container": "
|
|
45
|
-
"@vaadin/item": "
|
|
46
|
-
"@vaadin/lit-renderer": "
|
|
47
|
-
"@vaadin/overlay": "
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-alpha10",
|
|
41
|
+
"@vaadin/combo-box": "25.3.0-alpha10",
|
|
42
|
+
"@vaadin/component-base": "25.3.0-alpha10",
|
|
43
|
+
"@vaadin/field-base": "25.3.0-alpha10",
|
|
44
|
+
"@vaadin/input-container": "25.3.0-alpha10",
|
|
45
|
+
"@vaadin/item": "25.3.0-alpha10",
|
|
46
|
+
"@vaadin/lit-renderer": "25.3.0-alpha10",
|
|
47
|
+
"@vaadin/overlay": "25.3.0-alpha10",
|
|
48
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
|
|
49
49
|
"lit": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vaadin/aura": "
|
|
53
|
-
"@vaadin/chai-plugins": "
|
|
54
|
-
"@vaadin/test-runner-commands": "
|
|
52
|
+
"@vaadin/aura": "25.3.0-alpha10",
|
|
53
|
+
"@vaadin/chai-plugins": "25.3.0-alpha10",
|
|
54
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha10",
|
|
55
55
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
56
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
56
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
|
|
57
57
|
"sinon": "^22.0.0"
|
|
58
58
|
},
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"web-types.json",
|
|
62
62
|
"web-types.lit.json"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
|
|
65
65
|
}
|
|
@@ -24,6 +24,7 @@ import { multiSelectComboBoxChipStyles } from './styles/vaadin-multi-select-comb
|
|
|
24
24
|
*
|
|
25
25
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
26
26
|
*
|
|
27
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
27
28
|
* @customElement vaadin-multi-select-combo-box-chip
|
|
28
29
|
* @extends HTMLElement
|
|
29
30
|
* @private
|
|
@@ -34,10 +34,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
34
34
|
*
|
|
35
35
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
36
36
|
*
|
|
37
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
37
38
|
* @customElement vaadin-multi-select-combo-box-item
|
|
38
39
|
* @private
|
|
39
40
|
*/
|
|
40
|
-
|
|
41
|
+
class MultiSelectComboBoxItem extends ComboBoxItemMixin(
|
|
41
42
|
ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
42
43
|
) {
|
|
43
44
|
static get is() {
|
|
@@ -60,3 +61,5 @@ export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
|
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
defineCustomElement(MultiSelectComboBoxItem);
|
|
64
|
+
|
|
65
|
+
export { MultiSelectComboBoxItem };
|
|
@@ -17,6 +17,7 @@ import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-c
|
|
|
17
17
|
/**
|
|
18
18
|
* An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
|
|
19
19
|
*
|
|
20
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
20
21
|
* @customElement vaadin-multi-select-combo-box-overlay
|
|
21
22
|
* @extends HTMLElement
|
|
22
23
|
* @private
|
|
@@ -17,7 +17,7 @@ import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-
|
|
|
17
17
|
* @extends HTMLElement
|
|
18
18
|
* @private
|
|
19
19
|
*/
|
|
20
|
-
|
|
20
|
+
class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
|
|
21
21
|
static get is() {
|
|
22
22
|
return 'vaadin-multi-select-combo-box-scroller';
|
|
23
23
|
}
|
|
@@ -72,3 +72,5 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
defineCustomElement(MultiSelectComboBoxScroller);
|
|
75
|
+
|
|
76
|
+
export { MultiSelectComboBoxScroller };
|
|
@@ -96,6 +96,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
|
|
|
96
96
|
* @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
|
|
97
97
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
98
98
|
*
|
|
99
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
99
100
|
* @customElement vaadin-multi-select-combo-box
|
|
100
101
|
* @extends HTMLElement
|
|
101
102
|
*/
|
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.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
"name": "vaadin-multi-select-combo-box",
|
|
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
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -294,9 +303,7 @@
|
|
|
294
303
|
"description": "The theme variants to apply to the component.",
|
|
295
304
|
"value": {
|
|
296
305
|
"type": [
|
|
297
|
-
"string"
|
|
298
|
-
"null",
|
|
299
|
-
"undefined"
|
|
306
|
+
"string"
|
|
300
307
|
]
|
|
301
308
|
}
|
|
302
309
|
},
|
|
@@ -312,9 +319,18 @@
|
|
|
312
319
|
],
|
|
313
320
|
"js": {
|
|
314
321
|
"properties": [
|
|
322
|
+
{
|
|
323
|
+
"name": "accessibleDescriptionRef",
|
|
324
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
325
|
+
"value": {
|
|
326
|
+
"type": [
|
|
327
|
+
"string"
|
|
328
|
+
]
|
|
329
|
+
}
|
|
330
|
+
},
|
|
315
331
|
{
|
|
316
332
|
"name": "accessibleName",
|
|
317
|
-
"description": "String used to label the component
|
|
333
|
+
"description": "String used to label the component for screen reader users.",
|
|
318
334
|
"value": {
|
|
319
335
|
"type": [
|
|
320
336
|
"string"
|
|
@@ -323,7 +339,7 @@
|
|
|
323
339
|
},
|
|
324
340
|
{
|
|
325
341
|
"name": "accessibleNameRef",
|
|
326
|
-
"description": "
|
|
342
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
327
343
|
"value": {
|
|
328
344
|
"type": [
|
|
329
345
|
"string"
|
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": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,16 +19,23 @@
|
|
|
19
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 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.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|