@vaadin/multi-select-combo-box 25.3.0-alpha8 → 25.3.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +113 -9
- package/package.json +15 -15
- package/src/vaadin-multi-select-combo-box-item.js +3 -1
- package/src/vaadin-multi-select-combo-box-mixin.js +18 -4
- package/src/vaadin-multi-select-combo-box-scroller.js +3 -1
- package/src/vaadin-multi-select-combo-box.d.ts +53 -6
- package/src/vaadin-multi-select-combo-box.js +53 -6
- package/web-types.json +42 -6
- package/web-types.lit.json +18 -4
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",
|
|
@@ -492,6 +506,20 @@
|
|
|
492
506
|
"package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
|
|
493
507
|
}
|
|
494
508
|
},
|
|
509
|
+
{
|
|
510
|
+
"kind": "field",
|
|
511
|
+
"name": "partialMatchMode",
|
|
512
|
+
"privacy": "public",
|
|
513
|
+
"type": {
|
|
514
|
+
"text": "string"
|
|
515
|
+
},
|
|
516
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
517
|
+
"attribute": "partial-match-mode",
|
|
518
|
+
"inheritedFrom": {
|
|
519
|
+
"name": "ComboBoxItemsMixin",
|
|
520
|
+
"package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
|
|
521
|
+
}
|
|
522
|
+
},
|
|
495
523
|
{
|
|
496
524
|
"kind": "field",
|
|
497
525
|
"name": "placeholder",
|
|
@@ -655,12 +683,24 @@
|
|
|
655
683
|
}
|
|
656
684
|
],
|
|
657
685
|
"attributes": [
|
|
686
|
+
{
|
|
687
|
+
"name": "accessible-description-ref",
|
|
688
|
+
"type": {
|
|
689
|
+
"text": "string"
|
|
690
|
+
},
|
|
691
|
+
"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.",
|
|
692
|
+
"fieldName": "accessibleDescriptionRef",
|
|
693
|
+
"inheritedFrom": {
|
|
694
|
+
"name": "FieldMixin",
|
|
695
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
696
|
+
}
|
|
697
|
+
},
|
|
658
698
|
{
|
|
659
699
|
"name": "accessible-name",
|
|
660
700
|
"type": {
|
|
661
701
|
"text": "string"
|
|
662
702
|
},
|
|
663
|
-
"description": "String used to label the component
|
|
703
|
+
"description": "String used to label the component for screen reader users.",
|
|
664
704
|
"fieldName": "accessibleName",
|
|
665
705
|
"inheritedFrom": {
|
|
666
706
|
"name": "FieldMixin",
|
|
@@ -672,7 +712,7 @@
|
|
|
672
712
|
"type": {
|
|
673
713
|
"text": "string"
|
|
674
714
|
},
|
|
675
|
-
"description": "
|
|
715
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
676
716
|
"fieldName": "accessibleNameRef",
|
|
677
717
|
"inheritedFrom": {
|
|
678
718
|
"name": "FieldMixin",
|
|
@@ -963,6 +1003,18 @@
|
|
|
963
1003
|
"package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
|
|
964
1004
|
}
|
|
965
1005
|
},
|
|
1006
|
+
{
|
|
1007
|
+
"name": "partial-match-mode",
|
|
1008
|
+
"type": {
|
|
1009
|
+
"text": "string"
|
|
1010
|
+
},
|
|
1011
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
1012
|
+
"fieldName": "partialMatchMode",
|
|
1013
|
+
"inheritedFrom": {
|
|
1014
|
+
"name": "ComboBoxItemsMixin",
|
|
1015
|
+
"package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
|
|
1016
|
+
}
|
|
1017
|
+
},
|
|
966
1018
|
{
|
|
967
1019
|
"name": "placeholder",
|
|
968
1020
|
"type": {
|
|
@@ -1110,9 +1162,23 @@
|
|
|
1110
1162
|
"declarations": [
|
|
1111
1163
|
{
|
|
1112
1164
|
"kind": "class",
|
|
1113
|
-
"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
|
|
1165
|
+
"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 CSS property |\n:-------------------------------------------------------|\n| `--vaadin-chip-background` |\n| `--vaadin-chip-border-color` |\n| `--vaadin-chip-border-radius` |\n| `--vaadin-chip-border-width` |\n| `--vaadin-chip-font-size` |\n| `--vaadin-chip-font-weight` |\n| `--vaadin-chip-gap` |\n| `--vaadin-chip-height` |\n| `--vaadin-chip-padding` |\n| `--vaadin-chip-remove-button-text-color` |\n| `--vaadin-chip-text-color` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-multi-select-combo-box-chip-min-width` |\n| `--vaadin-multi-select-combo-box-chips-gap` |\n| `--vaadin-multi-select-combo-box-input-min-width` |\n| `--vaadin-multi-select-combo-box-overlay-max-height` |\n| `--vaadin-multi-select-combo-box-overlay-width` |\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
1166
|
"name": "MultiSelectComboBox",
|
|
1115
1167
|
"members": [
|
|
1168
|
+
{
|
|
1169
|
+
"kind": "field",
|
|
1170
|
+
"name": "accessibleDescriptionRef",
|
|
1171
|
+
"privacy": "public",
|
|
1172
|
+
"type": {
|
|
1173
|
+
"text": "string"
|
|
1174
|
+
},
|
|
1175
|
+
"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.",
|
|
1176
|
+
"attribute": "accessible-description-ref",
|
|
1177
|
+
"inheritedFrom": {
|
|
1178
|
+
"name": "FieldMixin",
|
|
1179
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1180
|
+
}
|
|
1181
|
+
},
|
|
1116
1182
|
{
|
|
1117
1183
|
"kind": "field",
|
|
1118
1184
|
"name": "accessibleName",
|
|
@@ -1120,7 +1186,7 @@
|
|
|
1120
1186
|
"type": {
|
|
1121
1187
|
"text": "string"
|
|
1122
1188
|
},
|
|
1123
|
-
"description": "String used to label the component
|
|
1189
|
+
"description": "String used to label the component for screen reader users.",
|
|
1124
1190
|
"attribute": "accessible-name",
|
|
1125
1191
|
"inheritedFrom": {
|
|
1126
1192
|
"name": "FieldMixin",
|
|
@@ -1134,7 +1200,7 @@
|
|
|
1134
1200
|
"type": {
|
|
1135
1201
|
"text": "string"
|
|
1136
1202
|
},
|
|
1137
|
-
"description": "
|
|
1203
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1138
1204
|
"attribute": "accessible-name-ref",
|
|
1139
1205
|
"inheritedFrom": {
|
|
1140
1206
|
"name": "FieldMixin",
|
|
@@ -1611,6 +1677,20 @@
|
|
|
1611
1677
|
"package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
|
|
1612
1678
|
}
|
|
1613
1679
|
},
|
|
1680
|
+
{
|
|
1681
|
+
"kind": "field",
|
|
1682
|
+
"name": "partialMatchMode",
|
|
1683
|
+
"privacy": "public",
|
|
1684
|
+
"type": {
|
|
1685
|
+
"text": "string"
|
|
1686
|
+
},
|
|
1687
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
1688
|
+
"attribute": "partial-match-mode",
|
|
1689
|
+
"inheritedFrom": {
|
|
1690
|
+
"name": "ComboBoxItemsMixin",
|
|
1691
|
+
"package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
|
|
1692
|
+
}
|
|
1693
|
+
},
|
|
1614
1694
|
{
|
|
1615
1695
|
"kind": "field",
|
|
1616
1696
|
"name": "placeholder",
|
|
@@ -1807,12 +1887,24 @@
|
|
|
1807
1887
|
}
|
|
1808
1888
|
],
|
|
1809
1889
|
"attributes": [
|
|
1890
|
+
{
|
|
1891
|
+
"name": "accessible-description-ref",
|
|
1892
|
+
"type": {
|
|
1893
|
+
"text": "string"
|
|
1894
|
+
},
|
|
1895
|
+
"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.",
|
|
1896
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1897
|
+
"inheritedFrom": {
|
|
1898
|
+
"name": "FieldMixin",
|
|
1899
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1900
|
+
}
|
|
1901
|
+
},
|
|
1810
1902
|
{
|
|
1811
1903
|
"name": "accessible-name",
|
|
1812
1904
|
"type": {
|
|
1813
1905
|
"text": "string"
|
|
1814
1906
|
},
|
|
1815
|
-
"description": "String used to label the component
|
|
1907
|
+
"description": "String used to label the component for screen reader users.",
|
|
1816
1908
|
"fieldName": "accessibleName",
|
|
1817
1909
|
"inheritedFrom": {
|
|
1818
1910
|
"name": "FieldMixin",
|
|
@@ -1824,7 +1916,7 @@
|
|
|
1824
1916
|
"type": {
|
|
1825
1917
|
"text": "string"
|
|
1826
1918
|
},
|
|
1827
|
-
"description": "
|
|
1919
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1828
1920
|
"fieldName": "accessibleNameRef",
|
|
1829
1921
|
"inheritedFrom": {
|
|
1830
1922
|
"name": "FieldMixin",
|
|
@@ -2143,6 +2235,18 @@
|
|
|
2143
2235
|
"package": "@vaadin/combo-box/src/vaadin-combo-box-data-provider-mixin.js"
|
|
2144
2236
|
}
|
|
2145
2237
|
},
|
|
2238
|
+
{
|
|
2239
|
+
"name": "partial-match-mode",
|
|
2240
|
+
"type": {
|
|
2241
|
+
"text": "string"
|
|
2242
|
+
},
|
|
2243
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
2244
|
+
"fieldName": "partialMatchMode",
|
|
2245
|
+
"inheritedFrom": {
|
|
2246
|
+
"name": "ComboBoxItemsMixin",
|
|
2247
|
+
"package": "@vaadin/combo-box/src/vaadin-combo-box-items-mixin.js"
|
|
2248
|
+
}
|
|
2249
|
+
},
|
|
2146
2250
|
{
|
|
2147
2251
|
"name": "placeholder",
|
|
2148
2252
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/multi-select-combo-box",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-beta1",
|
|
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": "25.3.0-
|
|
41
|
-
"@vaadin/combo-box": "25.3.0-
|
|
42
|
-
"@vaadin/component-base": "25.3.0-
|
|
43
|
-
"@vaadin/field-base": "25.3.0-
|
|
44
|
-
"@vaadin/input-container": "25.3.0-
|
|
45
|
-
"@vaadin/item": "25.3.0-
|
|
46
|
-
"@vaadin/lit-renderer": "25.3.0-
|
|
47
|
-
"@vaadin/overlay": "25.3.0-
|
|
48
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-beta1",
|
|
41
|
+
"@vaadin/combo-box": "25.3.0-beta1",
|
|
42
|
+
"@vaadin/component-base": "25.3.0-beta1",
|
|
43
|
+
"@vaadin/field-base": "25.3.0-beta1",
|
|
44
|
+
"@vaadin/input-container": "25.3.0-beta1",
|
|
45
|
+
"@vaadin/item": "25.3.0-beta1",
|
|
46
|
+
"@vaadin/lit-renderer": "25.3.0-beta1",
|
|
47
|
+
"@vaadin/overlay": "25.3.0-beta1",
|
|
48
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
|
|
49
49
|
"lit": "^3.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@vaadin/aura": "25.3.0-
|
|
53
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
54
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
52
|
+
"@vaadin/aura": "25.3.0-beta1",
|
|
53
|
+
"@vaadin/chai-plugins": "25.3.0-beta1",
|
|
54
|
+
"@vaadin/test-runner-commands": "25.3.0-beta1",
|
|
55
55
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
56
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
56
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
|
|
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": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
|
|
65
65
|
}
|
|
@@ -38,7 +38,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
38
38
|
* @customElement vaadin-multi-select-combo-box-item
|
|
39
39
|
* @private
|
|
40
40
|
*/
|
|
41
|
-
|
|
41
|
+
class MultiSelectComboBoxItem extends ComboBoxItemMixin(
|
|
42
42
|
ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
|
|
43
43
|
) {
|
|
44
44
|
static get is() {
|
|
@@ -61,3 +61,5 @@ export class MultiSelectComboBoxItem extends ComboBoxItemMixin(
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
defineCustomElement(MultiSelectComboBoxItem);
|
|
64
|
+
|
|
65
|
+
export { MultiSelectComboBoxItem };
|
|
@@ -537,6 +537,16 @@ export const MultiSelectComboBoxMixin = (superClass) =>
|
|
|
537
537
|
__commitUserInput() {
|
|
538
538
|
if (this._focusedIndex > -1) {
|
|
539
539
|
const focusedItem = this._dropdownItems[this._focusedIndex];
|
|
540
|
+
// Do not unselect an already selected item when it was focused by
|
|
541
|
+
// filtering, in which case the input value still equals the filter.
|
|
542
|
+
if (
|
|
543
|
+
this._lastFilter &&
|
|
544
|
+
this._lastFilter === this._inputElementValue &&
|
|
545
|
+
this._findIndex(focusedItem, this.selectedItems, this.itemIdPath) !== -1
|
|
546
|
+
) {
|
|
547
|
+
this.__clearInternalValue();
|
|
548
|
+
return;
|
|
549
|
+
}
|
|
540
550
|
this.__selectItem(focusedItem);
|
|
541
551
|
} else if (this._inputElementValue) {
|
|
542
552
|
// Detect if input value doesn't match an existing item
|
|
@@ -574,7 +584,11 @@ export const MultiSelectComboBoxMixin = (superClass) =>
|
|
|
574
584
|
* @protected
|
|
575
585
|
*/
|
|
576
586
|
_setFocused(focused) {
|
|
577
|
-
|
|
587
|
+
// Do not validate, commit or close on internal blur triggered
|
|
588
|
+
// on overlay touch action needed to hide the virtual keyboard.
|
|
589
|
+
const blurred = !focused && !this._closeOnBlurIsPrevented;
|
|
590
|
+
|
|
591
|
+
if (blurred) {
|
|
578
592
|
this._ignoreCommitValue = true;
|
|
579
593
|
}
|
|
580
594
|
|
|
@@ -582,12 +596,12 @@ export const MultiSelectComboBoxMixin = (superClass) =>
|
|
|
582
596
|
|
|
583
597
|
// Do not validate when focusout is caused by document
|
|
584
598
|
// losing focus, which happens on browser tab switch.
|
|
585
|
-
if (
|
|
599
|
+
if (blurred && document.hasFocus()) {
|
|
586
600
|
this._focusedChipIndex = -1;
|
|
587
601
|
this._requestValidation();
|
|
588
602
|
}
|
|
589
603
|
|
|
590
|
-
if (
|
|
604
|
+
if (blurred && this.readonly) {
|
|
591
605
|
this.close();
|
|
592
606
|
}
|
|
593
607
|
}
|
|
@@ -750,7 +764,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
|
|
|
750
764
|
} else {
|
|
751
765
|
// When the user filled in something that is different from the current value = filtering is enabled,
|
|
752
766
|
// set the focused index to the item that matches the filter query.
|
|
753
|
-
this._focusedIndex = this.
|
|
767
|
+
this._focusedIndex = this.__getItemIndexByFilter(newItems);
|
|
754
768
|
}
|
|
755
769
|
}
|
|
756
770
|
|
|
@@ -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 };
|
|
@@ -133,12 +133,59 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
|
|
|
133
133
|
*
|
|
134
134
|
* The following custom CSS properties are available for styling:
|
|
135
135
|
*
|
|
136
|
-
* Custom property
|
|
137
|
-
*
|
|
138
|
-
* `--vaadin-
|
|
139
|
-
* `--vaadin-
|
|
140
|
-
* `--vaadin-
|
|
141
|
-
* `--vaadin-
|
|
136
|
+
* Custom CSS property |
|
|
137
|
+
* :-------------------------------------------------------|
|
|
138
|
+
* | `--vaadin-chip-background` |
|
|
139
|
+
* | `--vaadin-chip-border-color` |
|
|
140
|
+
* | `--vaadin-chip-border-radius` |
|
|
141
|
+
* | `--vaadin-chip-border-width` |
|
|
142
|
+
* | `--vaadin-chip-font-size` |
|
|
143
|
+
* | `--vaadin-chip-font-weight` |
|
|
144
|
+
* | `--vaadin-chip-gap` |
|
|
145
|
+
* | `--vaadin-chip-height` |
|
|
146
|
+
* | `--vaadin-chip-padding` |
|
|
147
|
+
* | `--vaadin-chip-remove-button-text-color` |
|
|
148
|
+
* | `--vaadin-chip-text-color` |
|
|
149
|
+
* | `--vaadin-field-default-width` |
|
|
150
|
+
* | `--vaadin-input-field-background` |
|
|
151
|
+
* | `--vaadin-input-field-border-color` |
|
|
152
|
+
* | `--vaadin-input-field-border-radius` |
|
|
153
|
+
* | `--vaadin-input-field-border-width` |
|
|
154
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
155
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
156
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
157
|
+
* | `--vaadin-input-field-container-gap` |
|
|
158
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
159
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
160
|
+
* | `--vaadin-input-field-error-color` |
|
|
161
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
162
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
163
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
164
|
+
* | `--vaadin-input-field-gap` |
|
|
165
|
+
* | `--vaadin-input-field-helper-color` |
|
|
166
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
167
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
168
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
169
|
+
* | `--vaadin-input-field-label-color` |
|
|
170
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
171
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
172
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
173
|
+
* | `--vaadin-input-field-padding` |
|
|
174
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
175
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
176
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
177
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
178
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
179
|
+
* | `--vaadin-input-field-value-color` |
|
|
180
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
181
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
182
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
183
|
+
* | `--vaadin-item-overlay-padding` |
|
|
184
|
+
* | `--vaadin-multi-select-combo-box-chip-min-width` |
|
|
185
|
+
* | `--vaadin-multi-select-combo-box-chips-gap` |
|
|
186
|
+
* | `--vaadin-multi-select-combo-box-input-min-width` |
|
|
187
|
+
* | `--vaadin-multi-select-combo-box-overlay-max-height` |
|
|
188
|
+
* | `--vaadin-multi-select-combo-box-overlay-width` |
|
|
142
189
|
*
|
|
143
190
|
* ### Internal components
|
|
144
191
|
*
|
|
@@ -71,12 +71,59 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
|
|
|
71
71
|
*
|
|
72
72
|
* The following custom CSS properties are available for styling:
|
|
73
73
|
*
|
|
74
|
-
* Custom property
|
|
75
|
-
*
|
|
76
|
-
* `--vaadin-
|
|
77
|
-
* `--vaadin-
|
|
78
|
-
* `--vaadin-
|
|
79
|
-
* `--vaadin-
|
|
74
|
+
* Custom CSS property |
|
|
75
|
+
* :-------------------------------------------------------|
|
|
76
|
+
* | `--vaadin-chip-background` |
|
|
77
|
+
* | `--vaadin-chip-border-color` |
|
|
78
|
+
* | `--vaadin-chip-border-radius` |
|
|
79
|
+
* | `--vaadin-chip-border-width` |
|
|
80
|
+
* | `--vaadin-chip-font-size` |
|
|
81
|
+
* | `--vaadin-chip-font-weight` |
|
|
82
|
+
* | `--vaadin-chip-gap` |
|
|
83
|
+
* | `--vaadin-chip-height` |
|
|
84
|
+
* | `--vaadin-chip-padding` |
|
|
85
|
+
* | `--vaadin-chip-remove-button-text-color` |
|
|
86
|
+
* | `--vaadin-chip-text-color` |
|
|
87
|
+
* | `--vaadin-field-default-width` |
|
|
88
|
+
* | `--vaadin-input-field-background` |
|
|
89
|
+
* | `--vaadin-input-field-border-color` |
|
|
90
|
+
* | `--vaadin-input-field-border-radius` |
|
|
91
|
+
* | `--vaadin-input-field-border-width` |
|
|
92
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
93
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
94
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
95
|
+
* | `--vaadin-input-field-container-gap` |
|
|
96
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
97
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
98
|
+
* | `--vaadin-input-field-error-color` |
|
|
99
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
100
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
101
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
102
|
+
* | `--vaadin-input-field-gap` |
|
|
103
|
+
* | `--vaadin-input-field-helper-color` |
|
|
104
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
105
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
106
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
107
|
+
* | `--vaadin-input-field-label-color` |
|
|
108
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
109
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
110
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
111
|
+
* | `--vaadin-input-field-padding` |
|
|
112
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
113
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
114
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
115
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
116
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
117
|
+
* | `--vaadin-input-field-value-color` |
|
|
118
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
119
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
120
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
121
|
+
* | `--vaadin-item-overlay-padding` |
|
|
122
|
+
* | `--vaadin-multi-select-combo-box-chip-min-width` |
|
|
123
|
+
* | `--vaadin-multi-select-combo-box-chips-gap` |
|
|
124
|
+
* | `--vaadin-multi-select-combo-box-input-min-width` |
|
|
125
|
+
* | `--vaadin-multi-select-combo-box-overlay-max-height` |
|
|
126
|
+
* | `--vaadin-multi-select-combo-box-overlay-width` |
|
|
80
127
|
*
|
|
81
128
|
* ### Internal components
|
|
82
129
|
*
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/multi-select-combo-box",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-multi-select-combo-box",
|
|
11
|
-
"description": "`<vaadin-multi-select-combo-box>` is a web component that wraps `<vaadin-combo-box>` and extends\nits functionality to allow selecting multiple items, in addition to basic features.\n\n```html\n<vaadin-multi-select-combo-box id=\"comboBox\"></vaadin-multi-select-combo-box>\n```\n```js\nconst comboBox = document.querySelector('#comboBox');\ncomboBox.items = ['apple', 'banana', 'lemon', 'orange'];\ncomboBox.selectedItems = ['lemon', 'orange'];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------------|----------------\n`chips` | The element that wraps slotted chips for selected items\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`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
|
|
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 CSS property |\n:-------------------------------------------------------|\n| `--vaadin-chip-background` |\n| `--vaadin-chip-border-color` |\n| `--vaadin-chip-border-radius` |\n| `--vaadin-chip-border-width` |\n| `--vaadin-chip-font-size` |\n| `--vaadin-chip-font-weight` |\n| `--vaadin-chip-gap` |\n| `--vaadin-chip-height` |\n| `--vaadin-chip-padding` |\n| `--vaadin-chip-remove-button-text-color` |\n| `--vaadin-chip-text-color` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-multi-select-combo-box-chip-min-width` |\n| `--vaadin-multi-select-combo-box-chips-gap` |\n| `--vaadin-multi-select-combo-box-input-min-width` |\n| `--vaadin-multi-select-combo-box-overlay-max-height` |\n| `--vaadin-multi-select-combo-box-overlay-width` |\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"
|
|
@@ -244,6 +253,15 @@
|
|
|
244
253
|
]
|
|
245
254
|
}
|
|
246
255
|
},
|
|
256
|
+
{
|
|
257
|
+
"name": "partial-match-mode",
|
|
258
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
259
|
+
"value": {
|
|
260
|
+
"type": [
|
|
261
|
+
"string"
|
|
262
|
+
]
|
|
263
|
+
}
|
|
264
|
+
},
|
|
247
265
|
{
|
|
248
266
|
"name": "placeholder",
|
|
249
267
|
"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.",
|
|
@@ -310,9 +328,18 @@
|
|
|
310
328
|
],
|
|
311
329
|
"js": {
|
|
312
330
|
"properties": [
|
|
331
|
+
{
|
|
332
|
+
"name": "accessibleDescriptionRef",
|
|
333
|
+
"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.",
|
|
334
|
+
"value": {
|
|
335
|
+
"type": [
|
|
336
|
+
"string"
|
|
337
|
+
]
|
|
338
|
+
}
|
|
339
|
+
},
|
|
313
340
|
{
|
|
314
341
|
"name": "accessibleName",
|
|
315
|
-
"description": "String used to label the component
|
|
342
|
+
"description": "String used to label the component for screen reader users.",
|
|
316
343
|
"value": {
|
|
317
344
|
"type": [
|
|
318
345
|
"string"
|
|
@@ -321,7 +348,7 @@
|
|
|
321
348
|
},
|
|
322
349
|
{
|
|
323
350
|
"name": "accessibleNameRef",
|
|
324
|
-
"description": "
|
|
351
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
325
352
|
"value": {
|
|
326
353
|
"type": [
|
|
327
354
|
"string"
|
|
@@ -603,6 +630,15 @@
|
|
|
603
630
|
]
|
|
604
631
|
}
|
|
605
632
|
},
|
|
633
|
+
{
|
|
634
|
+
"name": "partialMatchMode",
|
|
635
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
636
|
+
"value": {
|
|
637
|
+
"type": [
|
|
638
|
+
"string"
|
|
639
|
+
]
|
|
640
|
+
}
|
|
641
|
+
},
|
|
606
642
|
{
|
|
607
643
|
"name": "placeholder",
|
|
608
644
|
"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.",
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,19 +16,26 @@
|
|
|
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 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
|
|
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 CSS property |\n:-------------------------------------------------------|\n| `--vaadin-chip-background` |\n| `--vaadin-chip-border-color` |\n| `--vaadin-chip-border-radius` |\n| `--vaadin-chip-border-width` |\n| `--vaadin-chip-font-size` |\n| `--vaadin-chip-font-weight` |\n| `--vaadin-chip-gap` |\n| `--vaadin-chip-height` |\n| `--vaadin-chip-padding` |\n| `--vaadin-chip-remove-button-text-color` |\n| `--vaadin-chip-text-color` |\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n| `--vaadin-item-overlay-padding` |\n| `--vaadin-multi-select-combo-box-chip-min-width` |\n| `--vaadin-multi-select-combo-box-chips-gap` |\n| `--vaadin-multi-select-combo-box-input-min-width` |\n| `--vaadin-multi-select-combo-box-overlay-max-height` |\n| `--vaadin-multi-select-combo-box-overlay-width` |\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
|
}
|
|
@@ -243,6 +250,13 @@
|
|
|
243
250
|
"kind": "expression"
|
|
244
251
|
}
|
|
245
252
|
},
|
|
253
|
+
{
|
|
254
|
+
"name": ".partialMatchMode",
|
|
255
|
+
"description": "Controls which item is automatically set to be selected, for\nexample on Enter, when the typed filter only partially matches\nits label. The item that will be selected is highlighted in the\ndropdown while typing:\n\n- `none` (default): an item is automatically set to be selected only when the filter matches its label exactly.\n- `first-match`: the first item in the filtered results is automatically set to be selected.\n- `only-match`: the item is automatically set to be selected when filtering narrows the results to a single item.\n\nIn general, an exact match is always set to be selected and takes\nprecedence over partial matches, regardless of the mode.\n\nA partial match is only applied while the dropdown is open. For\nexample, when auto-open is disabled with `autoOpenDisabled`, typing\ndoes not highlight a match or set it to be selected until the\ndropdown is opened.\n\nThis feature cannot be used together with custom values, because a\npartial match is also a valid custom value. A partial match is not\napplied when custom values are allowed with `allowCustomValue`.",
|
|
256
|
+
"value": {
|
|
257
|
+
"kind": "expression"
|
|
258
|
+
}
|
|
259
|
+
},
|
|
246
260
|
{
|
|
247
261
|
"name": ".placeholder",
|
|
248
262
|
"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.",
|