@vaadin/select 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 +89 -11
- package/package.json +16 -16
- package/src/vaadin-select-base-mixin.js +39 -66
- package/src/vaadin-select-overlay-mixin.js +10 -6
- package/src/vaadin-select-overlay.js +3 -1
- package/src/vaadin-select-value-button.js +1 -1
- package/src/vaadin-select.d.ts +41 -7
- package/src/vaadin-select.js +41 -7
- package/web-types.json +24 -6
- package/web-types.lit.json +11 -4
package/custom-elements.json
CHANGED
|
@@ -56,6 +56,20 @@
|
|
|
56
56
|
"description": "",
|
|
57
57
|
"name": "SelectBaseMixin",
|
|
58
58
|
"members": [
|
|
59
|
+
{
|
|
60
|
+
"kind": "field",
|
|
61
|
+
"name": "accessibleDescriptionRef",
|
|
62
|
+
"privacy": "public",
|
|
63
|
+
"type": {
|
|
64
|
+
"text": "string"
|
|
65
|
+
},
|
|
66
|
+
"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.",
|
|
67
|
+
"attribute": "accessible-description-ref",
|
|
68
|
+
"inheritedFrom": {
|
|
69
|
+
"name": "FieldMixin",
|
|
70
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
59
73
|
{
|
|
60
74
|
"kind": "field",
|
|
61
75
|
"name": "accessibleName",
|
|
@@ -63,7 +77,7 @@
|
|
|
63
77
|
"type": {
|
|
64
78
|
"text": "string"
|
|
65
79
|
},
|
|
66
|
-
"description": "String used to label the component
|
|
80
|
+
"description": "String used to label the component for screen reader users.",
|
|
67
81
|
"attribute": "accessible-name",
|
|
68
82
|
"inheritedFrom": {
|
|
69
83
|
"name": "FieldMixin",
|
|
@@ -77,7 +91,7 @@
|
|
|
77
91
|
"type": {
|
|
78
92
|
"text": "string"
|
|
79
93
|
},
|
|
80
|
-
"description": "
|
|
94
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
81
95
|
"attribute": "accessible-name-ref",
|
|
82
96
|
"inheritedFrom": {
|
|
83
97
|
"name": "FieldMixin",
|
|
@@ -331,12 +345,24 @@
|
|
|
331
345
|
}
|
|
332
346
|
],
|
|
333
347
|
"attributes": [
|
|
348
|
+
{
|
|
349
|
+
"name": "accessible-description-ref",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "string"
|
|
352
|
+
},
|
|
353
|
+
"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.",
|
|
354
|
+
"fieldName": "accessibleDescriptionRef",
|
|
355
|
+
"inheritedFrom": {
|
|
356
|
+
"name": "FieldMixin",
|
|
357
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
358
|
+
}
|
|
359
|
+
},
|
|
334
360
|
{
|
|
335
361
|
"name": "accessible-name",
|
|
336
362
|
"type": {
|
|
337
363
|
"text": "string"
|
|
338
364
|
},
|
|
339
|
-
"description": "String used to label the component
|
|
365
|
+
"description": "String used to label the component for screen reader users.",
|
|
340
366
|
"fieldName": "accessibleName",
|
|
341
367
|
"inheritedFrom": {
|
|
342
368
|
"name": "FieldMixin",
|
|
@@ -348,7 +374,7 @@
|
|
|
348
374
|
"type": {
|
|
349
375
|
"text": "string"
|
|
350
376
|
},
|
|
351
|
-
"description": "
|
|
377
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
352
378
|
"fieldName": "accessibleNameRef",
|
|
353
379
|
"inheritedFrom": {
|
|
354
380
|
"name": "FieldMixin",
|
|
@@ -842,6 +868,20 @@
|
|
|
842
868
|
"description": "",
|
|
843
869
|
"name": "SelectOverlayMixin",
|
|
844
870
|
"members": [
|
|
871
|
+
{
|
|
872
|
+
"kind": "field",
|
|
873
|
+
"name": "autofocus",
|
|
874
|
+
"privacy": "public",
|
|
875
|
+
"type": {
|
|
876
|
+
"text": "boolean"
|
|
877
|
+
},
|
|
878
|
+
"description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
879
|
+
"attribute": "autofocus",
|
|
880
|
+
"inheritedFrom": {
|
|
881
|
+
"name": "OverlayFocusMixin",
|
|
882
|
+
"package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
|
|
883
|
+
}
|
|
884
|
+
},
|
|
845
885
|
{
|
|
846
886
|
"kind": "method",
|
|
847
887
|
"name": "bringToFront",
|
|
@@ -874,7 +914,7 @@
|
|
|
874
914
|
"type": {
|
|
875
915
|
"text": "boolean"
|
|
876
916
|
},
|
|
877
|
-
"description": "
|
|
917
|
+
"description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
878
918
|
"attribute": "focus-trap",
|
|
879
919
|
"inheritedFrom": {
|
|
880
920
|
"name": "OverlayFocusMixin",
|
|
@@ -1145,12 +1185,24 @@
|
|
|
1145
1185
|
}
|
|
1146
1186
|
],
|
|
1147
1187
|
"attributes": [
|
|
1188
|
+
{
|
|
1189
|
+
"name": "autofocus",
|
|
1190
|
+
"type": {
|
|
1191
|
+
"text": "boolean"
|
|
1192
|
+
},
|
|
1193
|
+
"description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
1194
|
+
"fieldName": "autofocus",
|
|
1195
|
+
"inheritedFrom": {
|
|
1196
|
+
"name": "OverlayFocusMixin",
|
|
1197
|
+
"package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
|
|
1198
|
+
}
|
|
1199
|
+
},
|
|
1148
1200
|
{
|
|
1149
1201
|
"name": "focus-trap",
|
|
1150
1202
|
"type": {
|
|
1151
1203
|
"text": "boolean"
|
|
1152
1204
|
},
|
|
1153
|
-
"description": "
|
|
1205
|
+
"description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
|
|
1154
1206
|
"fieldName": "focusTrap",
|
|
1155
1207
|
"inheritedFrom": {
|
|
1156
1208
|
"name": "OverlayFocusMixin",
|
|
@@ -1355,9 +1407,23 @@
|
|
|
1355
1407
|
"declarations": [
|
|
1356
1408
|
{
|
|
1357
1409
|
"kind": "class",
|
|
1358
|
-
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following
|
|
1410
|
+
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\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-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
1359
1411
|
"name": "Select",
|
|
1360
1412
|
"members": [
|
|
1413
|
+
{
|
|
1414
|
+
"kind": "field",
|
|
1415
|
+
"name": "accessibleDescriptionRef",
|
|
1416
|
+
"privacy": "public",
|
|
1417
|
+
"type": {
|
|
1418
|
+
"text": "string"
|
|
1419
|
+
},
|
|
1420
|
+
"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.",
|
|
1421
|
+
"attribute": "accessible-description-ref",
|
|
1422
|
+
"inheritedFrom": {
|
|
1423
|
+
"name": "FieldMixin",
|
|
1424
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1425
|
+
}
|
|
1426
|
+
},
|
|
1361
1427
|
{
|
|
1362
1428
|
"kind": "field",
|
|
1363
1429
|
"name": "accessibleName",
|
|
@@ -1365,7 +1431,7 @@
|
|
|
1365
1431
|
"type": {
|
|
1366
1432
|
"text": "string"
|
|
1367
1433
|
},
|
|
1368
|
-
"description": "String used to label the component
|
|
1434
|
+
"description": "String used to label the component for screen reader users.",
|
|
1369
1435
|
"attribute": "accessible-name",
|
|
1370
1436
|
"inheritedFrom": {
|
|
1371
1437
|
"name": "FieldMixin",
|
|
@@ -1379,7 +1445,7 @@
|
|
|
1379
1445
|
"type": {
|
|
1380
1446
|
"text": "string"
|
|
1381
1447
|
},
|
|
1382
|
-
"description": "
|
|
1448
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1383
1449
|
"attribute": "accessible-name-ref",
|
|
1384
1450
|
"inheritedFrom": {
|
|
1385
1451
|
"name": "FieldMixin",
|
|
@@ -1696,12 +1762,24 @@
|
|
|
1696
1762
|
}
|
|
1697
1763
|
],
|
|
1698
1764
|
"attributes": [
|
|
1765
|
+
{
|
|
1766
|
+
"name": "accessible-description-ref",
|
|
1767
|
+
"type": {
|
|
1768
|
+
"text": "string"
|
|
1769
|
+
},
|
|
1770
|
+
"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.",
|
|
1771
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1772
|
+
"inheritedFrom": {
|
|
1773
|
+
"name": "FieldMixin",
|
|
1774
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1775
|
+
}
|
|
1776
|
+
},
|
|
1699
1777
|
{
|
|
1700
1778
|
"name": "accessible-name",
|
|
1701
1779
|
"type": {
|
|
1702
1780
|
"text": "string"
|
|
1703
1781
|
},
|
|
1704
|
-
"description": "String used to label the component
|
|
1782
|
+
"description": "String used to label the component for screen reader users.",
|
|
1705
1783
|
"fieldName": "accessibleName",
|
|
1706
1784
|
"inheritedFrom": {
|
|
1707
1785
|
"name": "FieldMixin",
|
|
@@ -1713,7 +1791,7 @@
|
|
|
1713
1791
|
"type": {
|
|
1714
1792
|
"text": "string"
|
|
1715
1793
|
},
|
|
1716
|
-
"description": "
|
|
1794
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1717
1795
|
"fieldName": "accessibleNameRef",
|
|
1718
1796
|
"inheritedFrom": {
|
|
1719
1797
|
"name": "FieldMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/select",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,24 +37,24 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
41
|
-
"@vaadin/button": "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/list-box": "25.3.0-
|
|
47
|
-
"@vaadin/lit-renderer": "25.3.0-
|
|
48
|
-
"@vaadin/overlay": "25.3.0-
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-beta1",
|
|
41
|
+
"@vaadin/button": "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/list-box": "25.3.0-beta1",
|
|
47
|
+
"@vaadin/lit-renderer": "25.3.0-beta1",
|
|
48
|
+
"@vaadin/overlay": "25.3.0-beta1",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
|
|
50
50
|
"lit": "^3.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@vaadin/aura": "25.3.0-
|
|
54
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
55
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
53
|
+
"@vaadin/aura": "25.3.0-beta1",
|
|
54
|
+
"@vaadin/chai-plugins": "25.3.0-beta1",
|
|
55
|
+
"@vaadin/test-runner-commands": "25.3.0-beta1",
|
|
56
56
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
57
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
57
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
|
|
58
58
|
"sinon": "^22.0.0"
|
|
59
59
|
},
|
|
60
60
|
"customElements": "custom-elements.json",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"web-types.json",
|
|
63
63
|
"web-types.lit.json"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
|
|
66
66
|
}
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
* Copyright (c) 2017 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
|
|
7
6
|
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
7
|
import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
|
|
9
8
|
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
9
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
10
10
|
import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
|
|
11
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
12
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
@@ -232,6 +232,15 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
232
232
|
this.__lastMenuElement = null;
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
|
+
|
|
236
|
+
if (props.has('accessibleName')) {
|
|
237
|
+
this._srLabelController.setLabel(this.accessibleName);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
// Validate when the required constraint is removed.
|
|
241
|
+
if (props.has('required') && this.required === false) {
|
|
242
|
+
this._requestValidation();
|
|
243
|
+
}
|
|
235
244
|
}
|
|
236
245
|
|
|
237
246
|
/**
|
|
@@ -250,21 +259,6 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
250
259
|
this._overlayElement.requestContentUpdate();
|
|
251
260
|
}
|
|
252
261
|
|
|
253
|
-
/**
|
|
254
|
-
* Override an observer from `FieldMixin`
|
|
255
|
-
* to validate when required is removed.
|
|
256
|
-
*
|
|
257
|
-
* @protected
|
|
258
|
-
* @override
|
|
259
|
-
*/
|
|
260
|
-
_requiredChanged(required) {
|
|
261
|
-
super._requiredChanged(required);
|
|
262
|
-
|
|
263
|
-
if (required === false) {
|
|
264
|
-
this._requestValidation();
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
262
|
/**
|
|
269
263
|
* Detects a `<vaadin-select-list-box>` slotted directly into the overlay
|
|
270
264
|
* slot (instead of the default one rendered into slotted `div` element).
|
|
@@ -473,11 +467,7 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
473
467
|
/** @private */
|
|
474
468
|
_updateAriaLive(ariaLive) {
|
|
475
469
|
if (this.focusElement) {
|
|
476
|
-
|
|
477
|
-
this.focusElement.setAttribute('aria-live', 'polite');
|
|
478
|
-
} else {
|
|
479
|
-
this.focusElement.removeAttribute('aria-live');
|
|
480
|
-
}
|
|
470
|
+
setOrRemoveAttribute(this.focusElement, 'aria-live', ariaLive && 'polite');
|
|
481
471
|
}
|
|
482
472
|
}
|
|
483
473
|
|
|
@@ -538,44 +528,6 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
538
528
|
itemElement.setAttribute('id', this._itemId);
|
|
539
529
|
}
|
|
540
530
|
|
|
541
|
-
/**
|
|
542
|
-
* @param {string} accessibleName
|
|
543
|
-
* @protected
|
|
544
|
-
*/
|
|
545
|
-
_accessibleNameChanged(accessibleName) {
|
|
546
|
-
this._srLabelController.setLabel(accessibleName);
|
|
547
|
-
this._setCustomAriaLabelledBy(accessibleName ? this._srLabelController.defaultId : null);
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
/**
|
|
551
|
-
* @param {string} accessibleNameRef
|
|
552
|
-
* @protected
|
|
553
|
-
*/
|
|
554
|
-
_accessibleNameRefChanged(accessibleNameRef) {
|
|
555
|
-
this._setCustomAriaLabelledBy(accessibleNameRef);
|
|
556
|
-
}
|
|
557
|
-
|
|
558
|
-
/**
|
|
559
|
-
* @param {string} ariaLabelledby
|
|
560
|
-
* @private
|
|
561
|
-
*/
|
|
562
|
-
_setCustomAriaLabelledBy(ariaLabelledby) {
|
|
563
|
-
const labelId = this._getLabelIdWithItemId(ariaLabelledby);
|
|
564
|
-
this._fieldAriaController.setLabelId(labelId, true);
|
|
565
|
-
}
|
|
566
|
-
|
|
567
|
-
/**
|
|
568
|
-
* @param {string | null} labelId
|
|
569
|
-
* @returns string | null
|
|
570
|
-
* @private
|
|
571
|
-
*/
|
|
572
|
-
_getLabelIdWithItemId(labelId) {
|
|
573
|
-
const selected = this._items ? this._items[this._menuElement.selected] : false;
|
|
574
|
-
const itemId = selected || this.placeholder ? this._itemId : '';
|
|
575
|
-
|
|
576
|
-
return labelId ? `${labelId} ${itemId}`.trim() : null;
|
|
577
|
-
}
|
|
578
|
-
|
|
579
531
|
/** @private */
|
|
580
532
|
__updateValueButton() {
|
|
581
533
|
const valueButton = this.focusElement;
|
|
@@ -607,13 +559,7 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
607
559
|
delete this._selectedChanging;
|
|
608
560
|
}
|
|
609
561
|
|
|
610
|
-
|
|
611
|
-
selected || this.placeholder ? { newId: this._itemId } : { oldId: this._itemId };
|
|
612
|
-
|
|
613
|
-
setAriaIDReference(valueButton, 'aria-labelledby', labelledIdReferenceConfig);
|
|
614
|
-
if (this.accessibleName || this.accessibleNameRef) {
|
|
615
|
-
this._setCustomAriaLabelledBy(this.accessibleNameRef || this._srLabelController.defaultId);
|
|
616
|
-
}
|
|
562
|
+
this.__updateFieldAriaControllerLabelledBy();
|
|
617
563
|
}
|
|
618
564
|
|
|
619
565
|
/** @private */
|
|
@@ -709,4 +655,31 @@ export const SelectBaseMixin = (superClass) =>
|
|
|
709
655
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
|
|
710
656
|
this.__dispatchChangePending = false;
|
|
711
657
|
}
|
|
658
|
+
|
|
659
|
+
/** @override */
|
|
660
|
+
__updateFieldAriaControllerLabel() {
|
|
661
|
+
// NO-OP
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
/** @override */
|
|
665
|
+
__updateFieldAriaControllerLabelledBy() {
|
|
666
|
+
let labelId;
|
|
667
|
+
if (this.accessibleNameRef) {
|
|
668
|
+
labelId = this.accessibleNameRef;
|
|
669
|
+
} else if (this.accessibleName) {
|
|
670
|
+
labelId = this._srLabelController.defaultId;
|
|
671
|
+
} else if (this.hasAttribute('has-label')) {
|
|
672
|
+
labelId = this._labelNode?.id;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
const selectedItem = this._items?.[this._menuElement.selected];
|
|
676
|
+
const itemId = selectedItem || this.placeholder ? this._itemId : null;
|
|
677
|
+
|
|
678
|
+
const ids = [labelId, itemId].filter(Boolean);
|
|
679
|
+
if (ids.length > 0) {
|
|
680
|
+
this._fieldAriaController.setLabelledBy(ids.join(' '));
|
|
681
|
+
} else {
|
|
682
|
+
this._fieldAriaController.setLabelledBy(null);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
712
685
|
};
|
|
@@ -9,8 +9,14 @@ import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin
|
|
|
9
9
|
|
|
10
10
|
export const SelectOverlayMixin = (superClass) =>
|
|
11
11
|
class SelectOverlayMixin extends PositionMixin(OverlayMixin(DirMixin(superClass))) {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
/** @protected */
|
|
13
|
+
willUpdate(props) {
|
|
14
|
+
super.willUpdate(props);
|
|
15
|
+
|
|
16
|
+
// Update width here so that `PositionMixin` uses correct width in `updated()`.
|
|
17
|
+
if ((props.has('opened') || props.has('positionTarget')) && this.opened && this.positionTarget) {
|
|
18
|
+
this._updateOverlayWidth();
|
|
19
|
+
}
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
/** @protected */
|
|
@@ -81,10 +87,8 @@ export const SelectOverlayMixin = (superClass) =>
|
|
|
81
87
|
}
|
|
82
88
|
|
|
83
89
|
/** @private */
|
|
84
|
-
_updateOverlayWidth(
|
|
85
|
-
|
|
86
|
-
this.style.setProperty('--_vaadin-select-overlay-default-width', `${positionTarget.offsetWidth}px`);
|
|
87
|
-
}
|
|
90
|
+
_updateOverlayWidth() {
|
|
91
|
+
this.style.setProperty('--_vaadin-select-overlay-default-width', `${this.positionTarget.offsetWidth}px`);
|
|
88
92
|
}
|
|
89
93
|
|
|
90
94
|
requestContentUpdate() {
|
|
@@ -20,7 +20,7 @@ import { SelectOverlayMixin } from './vaadin-select-overlay-mixin.js';
|
|
|
20
20
|
* @extends HTMLElement
|
|
21
21
|
* @private
|
|
22
22
|
*/
|
|
23
|
-
|
|
23
|
+
class SelectOverlay extends SelectOverlayMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
|
|
24
24
|
static get is() {
|
|
25
25
|
return 'vaadin-select-overlay';
|
|
26
26
|
}
|
|
@@ -52,3 +52,5 @@ export class SelectOverlay extends SelectOverlayMixin(ThemableMixin(PolylitMixin
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
defineCustomElement(SelectOverlay);
|
|
55
|
+
|
|
56
|
+
export { SelectOverlay };
|
|
@@ -31,7 +31,7 @@ class SelectValueButton extends ButtonMixin(ThemableMixin(PolylitMixin(LumoInjec
|
|
|
31
31
|
/** @protected */
|
|
32
32
|
render() {
|
|
33
33
|
return html`
|
|
34
|
-
<div class="vaadin-button-container">
|
|
34
|
+
<div class="vaadin-button-container" role="presentation">
|
|
35
35
|
<span part="label">
|
|
36
36
|
<slot></slot>
|
|
37
37
|
</span>
|
package/src/vaadin-select.d.ts
CHANGED
|
@@ -144,13 +144,6 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
|
|
|
144
144
|
*
|
|
145
145
|
* ### Styling
|
|
146
146
|
*
|
|
147
|
-
* The following custom properties are available for styling:
|
|
148
|
-
*
|
|
149
|
-
* Custom property | Description | Default
|
|
150
|
-
* ---------------------------------|-----------------------------|--------
|
|
151
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
152
|
-
* `--vaadin-select-overlay-width` | Width of the overlay |
|
|
153
|
-
*
|
|
154
147
|
* The following shadow DOM parts are available for styling:
|
|
155
148
|
*
|
|
156
149
|
* Part name | Description
|
|
@@ -182,6 +175,47 @@ export interface SelectEventMap extends HTMLElementEventMap, SelectCustomEventMa
|
|
|
182
175
|
* `opened` | Set when the overlay is opened
|
|
183
176
|
* `phone` | Set when the overlay is shown in phone mode
|
|
184
177
|
*
|
|
178
|
+
* The following custom CSS properties are available for styling:
|
|
179
|
+
*
|
|
180
|
+
* Custom CSS property |
|
|
181
|
+
* :--------------------------------------------------|
|
|
182
|
+
* | `--vaadin-field-default-width` |
|
|
183
|
+
* | `--vaadin-input-field-background` |
|
|
184
|
+
* | `--vaadin-input-field-border-color` |
|
|
185
|
+
* | `--vaadin-input-field-border-radius` |
|
|
186
|
+
* | `--vaadin-input-field-border-width` |
|
|
187
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
188
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
189
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
190
|
+
* | `--vaadin-input-field-container-gap` |
|
|
191
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
192
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
193
|
+
* | `--vaadin-input-field-error-color` |
|
|
194
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
195
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
196
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
197
|
+
* | `--vaadin-input-field-gap` |
|
|
198
|
+
* | `--vaadin-input-field-helper-color` |
|
|
199
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
200
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
201
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
202
|
+
* | `--vaadin-input-field-label-color` |
|
|
203
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
204
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
205
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
206
|
+
* | `--vaadin-input-field-padding` |
|
|
207
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
208
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
209
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
210
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
211
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
212
|
+
* | `--vaadin-input-field-value-color` |
|
|
213
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
214
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
215
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
216
|
+
* | `--vaadin-item-overlay-padding` |
|
|
217
|
+
* | `--vaadin-select-overlay-width` |
|
|
218
|
+
*
|
|
185
219
|
* ### Internal components
|
|
186
220
|
*
|
|
187
221
|
* In addition to `<vaadin-select>` itself, the following internal components are used
|
package/src/vaadin-select.js
CHANGED
|
@@ -95,13 +95,6 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
|
|
|
95
95
|
*
|
|
96
96
|
* ### Styling
|
|
97
97
|
*
|
|
98
|
-
* The following custom properties are available for styling:
|
|
99
|
-
*
|
|
100
|
-
* Custom property | Description | Default
|
|
101
|
-
* ---------------------------------|-----------------------------|--------
|
|
102
|
-
* `--vaadin-field-default-width` | Default width of the field | `12em`
|
|
103
|
-
* `--vaadin-select-overlay-width` | Width of the overlay |
|
|
104
|
-
*
|
|
105
98
|
* The following shadow DOM parts are available for styling:
|
|
106
99
|
*
|
|
107
100
|
* Part name | Description
|
|
@@ -133,6 +126,47 @@ import { SelectBaseMixin } from './vaadin-select-base-mixin.js';
|
|
|
133
126
|
* `opened` | Set when the overlay is opened
|
|
134
127
|
* `phone` | Set when the overlay is shown in phone mode
|
|
135
128
|
*
|
|
129
|
+
* The following custom CSS properties are available for styling:
|
|
130
|
+
*
|
|
131
|
+
* Custom CSS property |
|
|
132
|
+
* :--------------------------------------------------|
|
|
133
|
+
* | `--vaadin-field-default-width` |
|
|
134
|
+
* | `--vaadin-input-field-background` |
|
|
135
|
+
* | `--vaadin-input-field-border-color` |
|
|
136
|
+
* | `--vaadin-input-field-border-radius` |
|
|
137
|
+
* | `--vaadin-input-field-border-width` |
|
|
138
|
+
* | `--vaadin-input-field-bottom-end-radius` |
|
|
139
|
+
* | `--vaadin-input-field-bottom-start-radius` |
|
|
140
|
+
* | `--vaadin-input-field-button-text-color` |
|
|
141
|
+
* | `--vaadin-input-field-container-gap` |
|
|
142
|
+
* | `--vaadin-input-field-disabled-background` |
|
|
143
|
+
* | `--vaadin-input-field-disabled-text-color` |
|
|
144
|
+
* | `--vaadin-input-field-error-color` |
|
|
145
|
+
* | `--vaadin-input-field-error-font-size` |
|
|
146
|
+
* | `--vaadin-input-field-error-font-weight` |
|
|
147
|
+
* | `--vaadin-input-field-error-line-height` |
|
|
148
|
+
* | `--vaadin-input-field-gap` |
|
|
149
|
+
* | `--vaadin-input-field-helper-color` |
|
|
150
|
+
* | `--vaadin-input-field-helper-font-size` |
|
|
151
|
+
* | `--vaadin-input-field-helper-font-weight` |
|
|
152
|
+
* | `--vaadin-input-field-helper-line-height` |
|
|
153
|
+
* | `--vaadin-input-field-label-color` |
|
|
154
|
+
* | `--vaadin-input-field-label-font-size` |
|
|
155
|
+
* | `--vaadin-input-field-label-font-weight` |
|
|
156
|
+
* | `--vaadin-input-field-label-line-height` |
|
|
157
|
+
* | `--vaadin-input-field-padding` |
|
|
158
|
+
* | `--vaadin-input-field-placeholder-color` |
|
|
159
|
+
* | `--vaadin-input-field-required-indicator` |
|
|
160
|
+
* | `--vaadin-input-field-required-indicator-color` |
|
|
161
|
+
* | `--vaadin-input-field-top-end-radius` |
|
|
162
|
+
* | `--vaadin-input-field-top-start-radius` |
|
|
163
|
+
* | `--vaadin-input-field-value-color` |
|
|
164
|
+
* | `--vaadin-input-field-value-font-size` |
|
|
165
|
+
* | `--vaadin-input-field-value-font-weight` |
|
|
166
|
+
* | `--vaadin-input-field-value-line-height` |
|
|
167
|
+
* | `--vaadin-item-overlay-padding` |
|
|
168
|
+
* | `--vaadin-select-overlay-width` |
|
|
169
|
+
*
|
|
136
170
|
* ### Internal components
|
|
137
171
|
*
|
|
138
172
|
* In addition to `<vaadin-select>` itself, the following internal components are used
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/select",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -138,11 +138,20 @@
|
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
140
|
"name": "vaadin-select",
|
|
141
|
-
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following
|
|
141
|
+
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\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-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
142
142
|
"attributes": [
|
|
143
|
+
{
|
|
144
|
+
"name": "accessible-description-ref",
|
|
145
|
+
"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.",
|
|
146
|
+
"value": {
|
|
147
|
+
"type": [
|
|
148
|
+
"string"
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
},
|
|
143
152
|
{
|
|
144
153
|
"name": "accessible-name",
|
|
145
|
-
"description": "String used to label the component
|
|
154
|
+
"description": "String used to label the component for screen reader users.",
|
|
146
155
|
"value": {
|
|
147
156
|
"type": [
|
|
148
157
|
"string"
|
|
@@ -151,7 +160,7 @@
|
|
|
151
160
|
},
|
|
152
161
|
{
|
|
153
162
|
"name": "accessible-name-ref",
|
|
154
|
-
"description": "
|
|
163
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
155
164
|
"value": {
|
|
156
165
|
"type": [
|
|
157
166
|
"string"
|
|
@@ -296,9 +305,18 @@
|
|
|
296
305
|
],
|
|
297
306
|
"js": {
|
|
298
307
|
"properties": [
|
|
308
|
+
{
|
|
309
|
+
"name": "accessibleDescriptionRef",
|
|
310
|
+
"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.",
|
|
311
|
+
"value": {
|
|
312
|
+
"type": [
|
|
313
|
+
"string"
|
|
314
|
+
]
|
|
315
|
+
}
|
|
316
|
+
},
|
|
299
317
|
{
|
|
300
318
|
"name": "accessibleName",
|
|
301
|
-
"description": "String used to label the component
|
|
319
|
+
"description": "String used to label the component for screen reader users.",
|
|
302
320
|
"value": {
|
|
303
321
|
"type": [
|
|
304
322
|
"string"
|
|
@@ -307,7 +325,7 @@
|
|
|
307
325
|
},
|
|
308
326
|
{
|
|
309
327
|
"name": "accessibleNameRef",
|
|
310
|
-
"description": "
|
|
328
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
311
329
|
"value": {
|
|
312
330
|
"type": [
|
|
313
331
|
"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/select",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -72,19 +72,26 @@
|
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
"name": "vaadin-select",
|
|
75
|
-
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following
|
|
75
|
+
"description": "`<vaadin-select>` is a Web Component for selecting values from a list of items.\n\n### Items\n\nUse the `items` property to define possible options for the select:\n\n```html\n<vaadin-select id=\"select\"></vaadin-select>\n```\n```js\nconst select = document.querySelector('#select');\nselect.items = [\n { label: 'Most recent first', value: 'recent' },\n { component: 'hr' },\n { label: 'Rating: low to high', value: 'rating-asc', className: 'asc' },\n { label: 'Rating: high to low', value: 'rating-desc', className: 'desc' },\n { component: 'hr' },\n { label: 'Price: low to high', value: 'price-asc', disabled: true },\n { label: 'Price: high to low', value: 'price-desc', disabled: true }\n];\n```\n\n### Rendering\n\nAlternatively, the content of the select can be populated by using a slotted `<vaadin-select-list-box>`\nwith `<vaadin-select-item>` children:\n\n```html\n<vaadin-select>\n <vaadin-select-list-box slot=\"overlay\">\n <vaadin-select-item value=\"recent\">Most recent first</vaadin-select-item>\n <vaadin-select-item value=\"rating-asc\">Rating: low to high</vaadin-select-item>\n <vaadin-select-item value=\"rating-desc\">Rating: high to low</vaadin-select-item>\n </vaadin-select-list-box>\n</vaadin-select>\n```\n\n* Hint: By setting the `label` property of inner vaadin-items you will\nbe able to change the visual representation of the selected value in the input part.\n\n#### Renderer (deprecated)\n\nThe content of the select can also be populated by using the renderer callback function, although\nthis approach is deprecated in favor of the `items` property or a slotted `<vaadin-select-list-box>`.\n\nThe renderer function provides `root`, `select` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `select`.\n\n```js\nconst select = document.querySelector('#select');\nselect.renderer = function(root, select) {\n const listBox = document.createElement('vaadin-list-box');\n // append 3 <vaadin-item> elements\n ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n const item = document.createElement('vaadin-item');\n item.textContent = name;\n item.setAttribute('label', name)\n listBox.appendChild(item);\n });\n\n // update the content\n root.appendChild(listBox);\n};\n```\n\nRenderer is called on initialization of new select and on its opening.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and toggle button\n`field-button` | Set on the toggle 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`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\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`readonly` | Set when the element is readonly\n`opened` | Set when the overlay is opened\n`phone` | Set when the overlay is shown in phone mode\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\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-select-overlay-width` |\n\n### Internal components\n\nIn addition to `<vaadin-select>` itself, the following internal components are used\nand themable:\n\n- `<vaadin-select-value-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-button).\n- [`<vaadin-select-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-select-list-box) - a list-box element.\n- [`<vaadin-select-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-select-item) - an item element.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
76
76
|
"extension": true,
|
|
77
77
|
"attributes": [
|
|
78
|
+
{
|
|
79
|
+
"name": ".accessibleDescriptionRef",
|
|
80
|
+
"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.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
78
85
|
{
|
|
79
86
|
"name": ".accessibleName",
|
|
80
|
-
"description": "String used to label the component
|
|
87
|
+
"description": "String used to label the component for screen reader users.",
|
|
81
88
|
"value": {
|
|
82
89
|
"kind": "expression"
|
|
83
90
|
}
|
|
84
91
|
},
|
|
85
92
|
{
|
|
86
93
|
"name": ".accessibleNameRef",
|
|
87
|
-
"description": "
|
|
94
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
88
95
|
"value": {
|
|
89
96
|
"kind": "expression"
|
|
90
97
|
}
|